Merge pull request #6 from useverto/feat/buy-ar

Allow AR purchasing with fiat via Ramp.network
useverto · Dec 13, 2021 · f3274fe · f3274fe
2 parents 57b1111 + 91be8e8
commit f3274fe
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@iconicicons/react": "^1.5.0",
     "@primer/octicons-react": "^13.0.0",
+    "@ramp-network/ramp-instant-sdk": "^2.5.0",
     "@verto/js": "^0.0.0-alpha.19",
     "@verto/ui": "^2.1.24-alpha",
     "ar-gql": "^0.0.6",

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -21,7 +21,9 @@ import {
   UserIcon,
   UserPlusIcon,
   SearchIcon,
+  DollarIcon,
 } from "@iconicicons/react";
+import { RampInstantSDK } from "@ramp-network/ramp-instant-sdk";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { UserInterface } from "@verto/js/dist/faces";
@@ -272,6 +274,27 @@ const Nav = () => {
                   <BellIcon />
                   Notifications
                 </div>
+                <div
+                  className={
+                    styles.MenuItem +
+                    " " +
+                    (displayTheme === "Dark" ? styles.Dark : "")
+                  }
+                  onClick={() => {
+                    new RampInstantSDK({
+                      hostAppName: "Verto",
+                      hostLogoUrl:
+                        "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzE2Ljg0IDkuMTUxMThDNDQ5Ljc2OCA0Ni4wNDEgNTI3LjczOSAxODMuOTEyIDQ5MC44NDkgMzE2Ljg0QzQ1My45NTkgNDQ5Ljc2OCAzMTYuMDg4IDUyNy43MzkgMTgzLjE2IDQ5MC44NDlDNTAuMjMxOSA0NTMuOTU5IC0yNy43MzkgMzE2LjA4OCA5LjE1MTE4IDE4My4xNkM0Ni4wNDEgNTAuMjMxOSAxODMuOTEyIC0yNy43MzkgMzE2Ljg0IDkuMTUxMThaTTI4Mi41MjggMjc4LjE3MkMzMzcuNTY1IDI5My40MDggMzcwLjE0MSAzNTAuMDQzIDM1NS42MzkgNDA1LjI3OEMzNDEuMTM3IDQ2MC41MTIgMjg0LjkzOSA0OTMuODQgMjI5LjUxNyA0ODAuMDczQzIyOS4xMTIgNDc5Ljk2NCAyMjguNzA2IDQ3OS44NTYgMjI4LjMgNDc5Ljc0OEMyMjcuMzcyIDQ3OS41IDIyNi40NDIgNDc5LjI1MSAyMjUuNTEzIDQ3OC45OTRDMTMzLjczOSA0NTMuNTI1IDgyLjk3MTYgMzQzLjk4MyAxMDYuOTY0IDIyOS40NUwyODIuNTI4IDI3OC4xNzJaTTE0NC4zNjIgOTQuNzIyQzEyOS44NiAxNDkuOTU3IDE2Mi40MzcgMjA2LjU5MiAyMTcuNDczIDIyMS44MjhMMzkzLjAzNyAyNzAuNTVDNDE3LjAzIDE1Ni4wMTcgMzY2LjI2MiA0Ni40NzU0IDI3NC40ODggMjEuMDA2M0MyNzMuNTQ1IDIwLjc0NDYgMjcyLjYwMSAyMC40OTI2IDI3MS42NTkgMjAuMjQxMUMyNzEuMjY3IDIwLjEzNjUgMjcwLjg3NSAyMC4wMzIgMjcwLjQ4NCAxOS45MjY5QzIxNS4wNjIgNi4xNjA1MyAxNTguODY1IDM5LjQ4NzQgMTQ0LjM2MiA5NC43MjJaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K",
+                      variant: "auto",
+                      swapAsset: "Arweave_AR",
+                      userAddress: address,
+                      hostApiKey: "vzszc8sq8z8ksrdxds6asctz2az8k6wx72xazdwb",
+                    }).show();
+                  }}
+                >
+                  <DollarIcon />
+                  Buy AR
+                </div>
                 <div
                   className={
                     styles.MenuItem +

diff --git a/yarn.lock b/yarn.lock
@@ -237,6 +237,13 @@
   resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-13.0.0.tgz#a7f2288fd9cf9cabc1e75553a0dd9f00d74b68c1"
   integrity sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==
 
+"@ramp-network/ramp-instant-sdk@^2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@ramp-network/ramp-instant-sdk/-/ramp-instant-sdk-2.5.0.tgz#4d8a746cd5cf2dfd6ffb1451058cfe9126d85c10"
+  integrity sha512-KKow1w+G49a/zq4Vv659G+ZVWs6DwWglLJL2H7XxATbCSE+7QknNjId/RIwJ1sDfJv10rV4AqjELXcPsgKlgcw==
+  dependencies:
+    body-scroll-lock "^2.6.4"
+
 "@types/cli-color@*":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/cli-color/-/cli-color-2.0.0.tgz#dc64e32da0fb9ea1814300fb468a58e833ce71a6"
@@ -617,6 +624,11 @@ bn.js@^5.0.0, bn.js@^5.1.1:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
   integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
 
+body-scroll-lock@^2.6.4:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.7.1.tgz#caf3f9c91773af1ffb684cd66ed9137b5b737014"
+  integrity sha512-hS53SQ8RhM0e4DsQ3PKz6Gr2O7Kpdh59TWU98GHjaQznL7y4dFycEPk7pFQAikqBaUSCArkc5E3pe7CWIt2fZA==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"