Merge pull request #5 from SarveshLimaye/safe-onramp

integrated on-ramp kit using stripe
Sohamkayal4103 · Oct 22, 2023 · 55ed5d8 · 55ed5d8
2 parents d02dfca + 2ce9346
commit 55ed5d8
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,8 @@
  "@safe-global/protocol-kit": "^1.3.0",
  "@safe-global/relay-kit": "^1.3.0",
  "@safe-global/safe-react-components": "^2.0.6",
+ "@stripe/crypto": "^0.0.4",
+ "@stripe/stripe-js": "^2.1.9",
  "@web3auth/base": "4.3.0",
  "@web3auth/modal": "4.3.1",
  "@web3auth/openlogin-adapter": "4.3.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -5,6 +5,7 @@ import UserRegistration from "./pages/User-Registration/UserRegistration";
 import AllMusic from "./pages/All-Music/AllMusic";
 import AddMusic from "./pages/Add-Music/AddMusic";
 import Navbar from "./components/Navbar/Navbar";
+import GetCrypto from "./pages/Get-Crypto/GetCrypto";
 
 function App() {
  return (
@@ -15,6 +16,7 @@ function App() {
  <Route path="/all" element={<AllMusic />} />
  <Route path="/user-registration" element={<UserRegistration />} />
  <Route path="/add" element={<AddMusic />} />
+ <Route path="/get-crypto" element={<GetCrypto />} />
  </Routes>
  </Router>
  );

diff --git a/src/pages/Get-Crypto/GetCrypto.tsx b/src/pages/Get-Crypto/GetCrypto.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { SafeOnRampKit, StripePack } from "@safe-global/onramp-kit";
+import { Button } from "@chakra-ui/react";
+import { useAccountAbstraction } from "../../store/accountAbstractionContext";
+
+export default function GetCrypto() {
+ const { safeSelected } = useAccountAbstraction();
+
+ const fundWallet = async function () {
+ const stripePack = new StripePack({
+ // Get public key from Stripe: https://dashboard.stripe.com/register
+ stripePublicKey: import.meta.env.VITE_STRIPE_KEY,
+ // Deploy your own server: https://github.com/5afe/aa-stripe-service
+ onRampBackendUrl: "https://aa-stripe.safe.global",
+ });
+ await stripePack.init();
+ const sessionData = await stripePack.open({
+ element: "#stripe-root", // Can be any CSS selector
+ theme: "dark", // light | dark
+ // Optional, if you want to use a specific created session
+ // ---
+ // sessionId: 'cos_1Mei3cKSn9ArdBimJhkCt1XC',
+ // Optional, if you want to specify default options
+ // ---
+ // defaultOptions: {
+ transaction_details: {
+ wallet_address: safeSelected,
+ lock_wallet_address: true,
+ supported_destination_networks: ["polygon"],
+ supported_destination_currencies: ["matic"],
+ },
+ // customer_information: {
+ // email: '[email protected]'
+ // }
+ });
+ };
+ return (
+ <div>
+ <Button
+ bg={"white"}
+ rounded={"2xl"}
+ color={"black"}
+ size={"lg"}
+ mt={50}
+ flex={"1 0 auto"}
+ onClick={fundWallet}
+ >
+ Get matic
+ </Button>
+ <div id="stripe-root"></div>
+ </div>
+ );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2377,6 +2377,11 @@
  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.54.2.tgz#0665848e22cbda936cfd05256facdfbba121438d"
  integrity sha512-R1PwtDvUfs99cAjfuQ/WpwJ3c92+DAMy9xGApjqlWQMj0FKQabUAys2swfTRNzuYAYJh7NqK2dzcYVNkKLEKUg==
 
+"@stripe/stripe-js@^2.1.9":
+ version "2.1.9"
+ resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-2.1.9.tgz#de7fd618ae31195fa0e8b16f5fc138d72f4d0b63"
+ integrity sha512-0RSvCJrzEVx52e8hbSAcZ2vv6OzoFj5fe5XC50GSrcev1Y4t2XDE6W5CIhR/Y6l3CPgO/P4luqoLWuvpUkBhig==
+
 "@szmarczak/http-timer@^4.0.5":
  version "4.0.6"
  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.6.tgz#b4a914bb62e7c272d4e5989fe4440f812ab1d807"