initial commit to implement fiat onramp into @turnkey/core and @turnk…

examples/delegated-access/CHANGELOG.md

@@ -36,8 +36,36 @@
 
 ### Patch Changes
 
-- Updated dependencies [[`5d8be2d`](https://github.com/tkhq/sdk/commit/5d8be2d0329070c7aa025dddb1b28f04257ae4e6)]:
-  - @turnkey/[email protected]
+- Updated dependencies []:
+  - @turnkey/[email protected]
+
+## 0.0.15-beta.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @turnkey/[email protected]
+
+## 0.0.15-beta.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @turnkey/[email protected]
+
+## 0.0.15-beta.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @turnkey/[email protected]
+
+## 0.0.15-beta.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @turnkey/[email protected]
 
 ## 0.0.15-beta.4
 

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

@@ -13,12 +13,21 @@ interface OnRampProps {
   ethAddress: string;
 }
 
+type DisplayOption = "iframe" | "popup" | "newTab";
+
+const displayOptions = ["iframe", "popup", "newTab"] as const;
+
 export const OnRamp = ({ ethAddress }: OnRampProps) => {
   const { turnkey, indexedDbClient } = useTurnkey();
-  const [isSignModalOpen, setSignModalOpen] = useState(false);
+  const [isOnrampModalOpen, setIsOnrampModalOpen] = useState(false);
+  const [onrampDisplayOption, setOnrampDisplayOption] =
+    useState<DisplayOption>("popup");
+
+  const [moonpayUrl, setMoonpayUrl] = useState<string | null>(null);
+  const [coinbaseUrl, setCoinbaseUrl] = useState<string | null>(null);
 
-  const handleModalOpen = () => setSignModalOpen(true);
-  const handleModalClose = () => setSignModalOpen(false);
+  const handleModalOpen = () => setIsOnrampModalOpen(true);
+  const handleModalClose = () => setIsOnrampModalOpen(false);
 
   const generateCoinbaseUrl = async () => {
     try {
@@ -39,11 +48,20 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
       });
 
       if (response?.onRampUrl) {
-        window.open(
-          response.onRampUrl,
-          "_blank",
-          "popup,width=500,height=700,scrollbars=yes,resizable=yes",
-        );
+        if (onrampDisplayOption === "iframe") {
+          setCoinbaseUrl(response.onRampUrl);
+          return;
+        } else if (onrampDisplayOption === "popup") {
+          window.open(
+            response.onRampUrl,
+            "_blank",
+            "popup,width=500,height=700,scrollbars=yes,resizable=yes",
+          );
+          return;
+        } else if (onrampDisplayOption === "newTab") {
+          window.open(response.onRampUrl, "_blank", "noopener,noreferrer");
+          return;
+        }
       }
     } catch (error) {
       console.error("Failed to init Coinbase on-ramp:", error);
@@ -67,11 +85,20 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
       });
 
       if (response?.onRampUrl) {
-        window.open(
-          response.onRampUrl,
-          "_blank",
-          "popup,width=500,height=700,scrollbars=yes,resizable=yes",
-        );
+        if (onrampDisplayOption === "iframe") {
+          setMoonpayUrl(response.onRampUrl);
+          return;
+        } else if (onrampDisplayOption === "popup") {
+          window.open(
+            response.onRampUrl,
+            "_blank",
+            "popup,width=500,height=700,scrollbars=yes,resizable=yes",
+          );
+          return;
+        } else if (onrampDisplayOption === "newTab") {
+          window.open(response.onRampUrl, "_blank", "noopener,noreferrer");
+          return;
+        }
       }
     } catch (error) {
       console.error("Failed to init MoonPay on-ramp:", error);
@@ -96,7 +123,7 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
         Add Funds
       </button>
 
-      <Modal open={isSignModalOpen} onClose={handleModalClose}>
+      <Modal open={isOnrampModalOpen} onClose={handleModalClose}>
         <Box
           sx={{
             outline: "none",
@@ -133,6 +160,28 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
           <Typography variant="subtitle2" sx={{ color: "#6C727E", mb: 2 }}>
             Your crypto will be deposited directly into your Turnkey wallet
           </Typography>
+          {displayOptions.map((displayOption) => {
+            const id = `plan-${displayOption}`;
+            return (
+              <label
+                key={displayOption}
+                htmlFor={id}
+                style={{ display: "block" }}
+              >
+                <input
+                  id={id}
+                  type="radio"
+                  name="plan"
+                  value={displayOption}
+                  checked={onrampDisplayOption === displayOption}
+                  onChange={(e) =>
+                    setOnrampDisplayOption(e.target.value as DisplayOption)
+                  }
+                />
+                {displayOption}
+              </label>
+            );
+          })}
           <div className="purchaseButtons">
             <button className="whiteButton" onClick={generateMoonPayUrl}>
               <img src="/images/moonpay.jpg" alt="MoonPay" />
@@ -143,6 +192,18 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
               Buy with Coinbase
             </button>
           </div>
+          {moonpayUrl && (
+            <iframe
+              src={moonpayUrl}
+              title="MoonPay OnRamp"
+              style={{
+                width: "100%",
+                height: "500px",
+                border: "none",
+                marginTop: "20px",
+              }}
+            ></iframe>
+          )}
         </Box>
       </Modal>
     </>

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

@@ -45,9 +45,6 @@ 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";
 

examples/react-wallet-kit/package.json

@@ -19,6 +19,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@headlessui/react": "^2.2.4",
     "@hello-pangea/dnd": "^17.0.0",
+    "@moonpay/moonpay-js": "^0.7.0",
     "@noble/hashes": "1.4.0",
     "@react-three/drei": "^10.6.1",
     "@react-three/fiber": "^8.18.0",

examples/react-wallet-kit/src/components/Svg.tsx

@@ -348,3 +348,46 @@ export function ImportSVG(props: SVGProps) {
     </svg>
   );
 }
+
+export function MoonPaySVG(props: SVGProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+    >
+      <rect x="0" y="0" width="16" height="16" fill="none" />
+      <rect x="12" y="0" width="3" height="1" fill="#7d00ff" />
+      <rect x="11" y="1" width="5" height="1" fill="#7d00ff" />
+      <rect x="10" y="2" width="6" height="1" fill="#7d00ff" />
+      <rect x="11" y="3" width="5" height="1" fill="#7d00ff" />
+      <rect x="3" y="4" width="6" height="1" fill="#7d00ff" />
+      <rect x="11" y="4" width="4" height="1" fill="#7d00ff" />
+      <rect x="2" y="5" width="8" height="1" fill="#7d00ff" />
+      <rect x="1" y="6" width="10" height="1" fill="#7d00ff" />
+      <rect x="0" y="7" width="12" height="5" fill="#7d00ff" />
+      <rect x="1" y="12" width="10" height="2" fill="#7d00ff" />
+      <rect x="2" y="14" width="8" height="1" fill="#7d00ff" />
+      <rect x="4" y="15" width="4" height="1" fill="#7d00ff" />
+    </svg>
+  );
+}
+
+export function CoinbaseSVG(props: SVGProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 32 32"
+      {...props}
+    >
+      <path
+        fill="#0052FF"
+        d="M16 23c-3.867 0-7-3.133-7-7s3.133-7 7-7c3.465 0 6.34 2.526 6.895 5.833h7.053C29.352 7.647 23.338 2 16 2 8.27 2 2 8.27 2 16s6.27 14 14 14 13.352-5.647 13.948-12.833h-7.053A6.993 6.993 0 0 1 16 23Z"
+      />
+    </svg>
+  );
+}

examples/react-wallet-kit/src/components/demo/DemoPanel.tsx

@@ -40,6 +40,7 @@ import {
 } from "@/utils";
 import SignatureVerification from "./SignatureVerification";
 import Image from "next/image";
+import OnrampSelector from "./OnrampSelector";
 
 export default function DemoPanel() {
   const {
@@ -361,6 +362,26 @@ export default function DemoPanel() {
           >
             Sign Message
           </Button>
+
+          <Button
+            onClick={async () => {
+              if (!selectedWalletAccount) return;
+              pushPage({
+                key: "Add funds to your wallet",
+                content: (
+                  <OnrampSelector
+                    selectedWalletAccount={selectedWalletAccount}
+                  />
+                ),
+                preventBack: true,
+                showTitle: true,
+              });
+            }}
+            className="bg-primary-light dark:bg-primary-dark text-primary-text-light dark:text-primary-text-dark rounded-lg px-4 py-2 active:scale-95 transition-transform cursor-pointer"
+          >
+            <FontAwesomeIcon icon={faPlus} className="w-4 h-4 mr-2" /> Add Funds
+          </Button>
+
           {selectedWallet?.source === WalletSource.Embedded && (
             <>
               <hr className="border-draggable-background-light dark:border-draggable-background-dark" />