chore: coinbase and moonpay integration

examples/react-components/package.json

@@ -10,9 +10,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@coinbase/onchainkit": "^0.38.13",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@hello-pangea/dnd": "^17.0.0",
+    "@moonpay/moonpay-js": "^0.7.0",
+    "@moonpay/moonpay-react": "^1.10.1",
     "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
     "@noble/hashes": "1.4.0",
@@ -41,6 +44,7 @@
     "react-international-phone": "^4.3.0",
     "sonner": "^1.4.41",
     "tweetnacl": "^1.0.3",
-    "typescript": "5.4.3"
+    "typescript": "5.4.3",
+    "viem": "^2.30.5"
   }
 }

examples/react-components/src/app/components/CoinbaseCryptoProvider.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import React from "react";
+import { OnchainKitProvider } from "@coinbase/onchainkit";
+import { sepolia } from "viem/chains";
+
+interface CoinbaseCryptoProviderProps {
+  children: React.ReactNode;
+}
+
+const CoinbaseCryptoProvider = ({ children }: CoinbaseCryptoProviderProps) => {
+  return (
+    <OnchainKitProvider
+      apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY!}
+      projectId={process.env.NEXT_PUBLIC_CDP_PROJECT_ID!}
+      chain={sepolia}
+    >
+      {children}
+    </OnchainKitProvider>
+  );
+};
+
+export default CoinbaseCryptoProvider;

examples/react-components/src/app/components/MoonPayCryptoProvider.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import dynamic from "next/dynamic";
+
+const MoonPayProvider = dynamic(
+  () => import("@moonpay/moonpay-react").then((mod) => mod.MoonPayProvider),
+  { ssr: false },
+);
+
+interface MoonPayCryptoProviderProps {
+  children: React.ReactNode;
+}
+
+const MoonPayCryptoProvider = ({ children }: MoonPayCryptoProviderProps) => {
+  return (
+    <MoonPayProvider
+      apiKey={process.env.NEXT_PUBLIC_MOONPAY_API_KEY!}
+      debug={true}
+    >
+      {children}
+    </MoonPayProvider>
+  );
+};
+
+export default MoonPayCryptoProvider;

examples/react-components/src/app/dashboard/OnRamp.tsx

@@ -0,0 +1,139 @@
+import { useState } from "react";
+import { useTurnkey } from "@turnkey/sdk-react";
+import { Box, Modal, Typography } from "@mui/material";
+
+interface OnRampProps {
+  ethAddress: string;
+}
+
+export const OnRamp = ({ ethAddress }: OnRampProps) => {
+  const { turnkey, indexedDbClient } = useTurnkey();
+  const [isSignModalOpen, setSignModalOpen] = useState(false);
+
+  const handleModalOpen = () => setSignModalOpen(true);
+  const handleModalClose = () => setSignModalOpen(false);
+
+  const generateCoinbaseUrl = async () => {
+    try {
+      const session = await turnkey?.getSession();
+
+      const response = await indexedDbClient?.initFiatOnRamp({
+        organizationId: session?.organizationId!,
+        onrampProvider: "FIAT_ON_RAMP_PROVIDER_COINBASE",
+        walletAddress: ethAddress,
+        network: "FIAT_ON_RAMP_BLOCKCHAIN_NETWORK_ETHEREUM",
+        cryptoCurrencyCode: "FIAT_ON_RAMP_CRYPTO_CURRENCY_ETH",
+        fiatCurrencyCode: "FIAT_ON_RAMP_CURRENCY_USD",
+        countryCode: "US",
+        countrySubdivisionCode: "ME",
+        sandboxMode: true,
+      });
+
+      if (response?.onRampUrl) {
+        window.open(
+          response.onRampUrl,
+          "_blank",
+          "popup,width=500,height=700,scrollbars=yes,resizable=yes",
+        );
+      }
+    } catch (error) {
+      console.error("Failed to init Coinbase on-ramp:", error);
+    }
+  };
+
+  const generateMoonPayUrl = async () => {
+    try {
+      const session = await turnkey?.getSession();
+
+      const response = await indexedDbClient?.initFiatOnRamp({
+        organizationId: session?.organizationId!,
+        onrampProvider: "FIAT_ON_RAMP_PROVIDER_MOONPAY",
+        walletAddress: ethAddress,
+        network: "FIAT_ON_RAMP_BLOCKCHAIN_NETWORK_ETHEREUM",
+        cryptoCurrencyCode: "FIAT_ON_RAMP_CRYPTO_CURRENCY_ETH",
+        fiatCurrencyCode: "FIAT_ON_RAMP_CURRENCY_USD",
+        sandboxMode: true,
+      });
+
+      if (response?.onRampUrl) {
+        window.open(
+          response.onRampUrl,
+          "_blank",
+          "popup,width=500,height=700,scrollbars=yes,resizable=yes",
+        );
+      }
+    } catch (error) {
+      console.error("Failed to init MoonPay on-ramp:", error);
+    }
+  };
+
+  return (
+    <>
+      <button className="whiteButton" onClick={handleModalOpen}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="25"
+          height="24"
+          viewBox="0 0 25 24"
+          fill="none"
+        >
+          <path
+            d="M11.5 13H5.5V11H11.5V5H13.5V11H19.5V13H13.5V19H11.5V13Z"
+            fill="#878C94"
+          />
+        </svg>
+        Add Funds
+      </button>
+
+      <Modal open={isSignModalOpen} onClose={handleModalClose}>
+        <Box
+          sx={{
+            outline: "none",
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 400,
+            bgcolor: "var(--Greyscale-20, #f5f7fb)",
+            boxShadow: 24,
+            p: 4,
+            borderRadius: 2,
+          }}
+        >
+          <div
+            onClick={handleModalClose}
+            style={{
+              position: "absolute",
+              top: "16px",
+              right: "16px",
+              background: "none",
+              border: "none",
+              fontSize: "20px",
+              fontWeight: "bold",
+              cursor: "pointer",
+              color: "#6C727E",
+            }}
+          >
+            &times;
+          </div>
+          <Typography variant="h6" className="modalTitle">
+            Add Funds to your wallet
+          </Typography>
+          <Typography variant="subtitle2" sx={{ color: "#6C727E", mb: 2 }}>
+            Your crypto will be deposited directly into your Turnkey wallet
+          </Typography>
+          <div className="purchaseButtons">
+            <button className="whiteButton" onClick={generateMoonPayUrl}>
+              <img src="/images/moonpay.jpg" alt="MoonPay" />
+              Buy with MoonPay
+            </button>
+            <button className="whiteButton" onClick={generateCoinbaseUrl}>
+              <img src="/images/coinbase.png" alt="Coinbase" />
+              Buy with Coinbase
+            </button>
+          </div>
+        </Box>
+      </Modal>
+    </>
+  );
+};

examples/react-components/src/app/dashboard/dashboard.css

@@ -48,7 +48,7 @@ body {
   padding: 8px 24px;
   border-radius: 8px;
   width: 542px;
-  height: 584px;
+  height: 642px;
   border: 1px solid var(--Greyscale-100, #ebedf2);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   display: flex;
@@ -215,6 +215,12 @@ body {
   margin-bottom: 12px;
   /* margin-top: 24px; */
 }
+
+.signMessage {
+  margin-bottom: 12px;
+  /* margin-top: 24px; */
+}
+
 .exportImportGroup {
   margin-top: 12px;
   display: flex;
@@ -465,3 +471,42 @@ button:hover {
 .sonner-toaster > div {
   pointer-events: auto;
 }
+
+.purchaseButtons {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.whiteButton {
+  letter-spacing: -0.01em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 16px;
+  gap: 8px;
+  color: var(--button-text);
+  width: 100%;
+  font-size: 1rem;
+  background: var(--button-bg);
+  border: 1px solid var(--button-border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.whiteButton img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+.whiteButton:hover {
+  background-color: var(--button-hover-bg);
+}
+
+.whiteButton:disabled {
+  color: var(--button-disabled-text);
+  background: var(--button-disabled-bg);
+  border-color: var(--button-disabled-border);
+  cursor: default;
+}

examples/react-components/src/app/dashboard/page.tsx

@@ -45,6 +45,11 @@ import Navbar from "../components/Navbar";
 import { Toaster, toast } from "sonner";
 import { jwtDecode } from "jwt-decode";
 import { useSessionExpiry } from "../providers/SessionExpiryProvider";
+import { MoonPayBuyWidget } from "@moonpay/moonpay-react";
+import { loadMoonPay } from "@moonpay/moonpay-js";
+import crypto from "crypto";
+
+import { OnRamp } from "./OnRamp";
 
 export default function Dashboard() {
   const router = useRouter();
@@ -471,6 +476,9 @@ export default function Dashboard() {
         : "Verification failed.",
     );
   };
+  const ethAddress = accounts.find((account: any) =>
+    account.address.startsWith("0x"),
+  )?.address;
   if (loading) {
     return (
       <main className="main">
@@ -711,6 +719,7 @@ export default function Dashboard() {
                 Sign a message
               </button>
             </div>
+            <OnRamp ethAddress={ethAddress || ""} />
           </RadioGroup>
 
           <div className="exportImportGroup">
@@ -724,6 +733,7 @@ export default function Dashboard() {
               onHandleImportSuccess={handleImportSuccess}
             />
           </div>
+
           <div className="authFooter">
             <div className="authFooterLeft">
               <div onClick={handleLogout} className="authFooterButton">

examples/react-components/src/app/layout.tsx

@@ -4,6 +4,8 @@ import "@turnkey/sdk-react/styles";
 import { TurnkeyProvider, TurnkeyThemeProvider } from "@turnkey/sdk-react";
 import { EthereumWallet } from "@turnkey/wallet-stamper";
 import { SessionExpiryProvider } from "./providers/SessionExpiryProvider";
+import CoinbaseCryptoProvider from "./components/CoinbaseCryptoProvider";
+import MoonPayCryptoProvider from "./components/MoonPayCryptoProvider";
 const wallet = new EthereumWallet();
 const turnkeyConfig = {
   apiBaseUrl: process.env.NEXT_PUBLIC_BASE_URL!,
@@ -27,7 +29,9 @@ function RootLayout({ children }: RootLayoutProps) {
         <body>
           <TurnkeyProvider config={turnkeyConfig}>
             <SessionExpiryProvider warningBeforeSec={30}>
-              {children}
+              <CoinbaseCryptoProvider>
+                <MoonPayCryptoProvider>{children}</MoonPayCryptoProvider>
+              </CoinbaseCryptoProvider>
             </SessionExpiryProvider>
           </TurnkeyProvider>
         </body>

examples/react-components/tsconfig.json

@@ -9,7 +9,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",