save

Crossmint · Oct 14, 2024 · 523c43e · 523c43e
1 parent 4c81d1f
commit 523c43e
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 218 deletions.
diff --git a/apps/payments/nextjs/pages/embedded-checkout/v3.tsx b/apps/payments/nextjs/pages/embedded-checkout/v3.tsx
@@ -50,7 +50,7 @@ export default function EmbeddedCheckoutV3Page() {
                                     applePay: true,
                                     googlePay: true,
                                 },
-                                defaultCurrency: "inr",
+                                // defaultCurrency: "inr",
                             },
                             defaultMethod: "fiat",
                         }}

diff --git a/packages/client/base/src/types/embed/v3/events/incoming.ts b/packages/client/base/src/types/embed/v3/events/incoming.ts
@@ -7,5 +7,9 @@ export const embeddedCheckoutV3IncomingEvents = {
     "crypto:connect-wallet.show": z.object({
         show: z.boolean(),
     }),
+    "crypto:send-transaction": z.object({
+        chain: z.string(),
+        serializedTransaction: z.string(),
+    }),
 };
 export type EmbeddedCheckoutV3IncomingEventMap = typeof embeddedCheckoutV3IncomingEvents;
diff --git a/packages/client/base/src/types/embed/v3/events/outgoing.ts b/packages/client/base/src/types/embed/v3/events/outgoing.ts
@@ -9,5 +9,11 @@ export const embeddedCheckoutV3OutgoingEvents = {
         chain: z.string(),
         walletProviderKey: z.string().optional(),
     }),
+    "crypto:send-transaction:success": z.object({
+        txId: z.string(),
+    }),
+    "crypto:send-transaction:failed": z.object({
+        error: z.string(),
+    }),
 };
 export type EmbeddedCheckoutV3OutgoingEventMap = typeof embeddedCheckoutV3OutgoingEvents;
diff --git a/packages/client/ui/react-ui/package.json b/packages/client/ui/react-ui/package.json
@@ -26,9 +26,9 @@
         "@crossmint/client-sdk-window": "workspace:*",
         "@crossmint/common-sdk-base": "workspace:*",
         "@crossmint/common-sdk-auth": "workspace:*",
-        "@dynamic-labs/ethereum": "3.2.0",
-        "@dynamic-labs/sdk-react-core": "3.2.0",
-        "@dynamic-labs/solana": "3.2.0",
+        "@dynamic-labs/ethereum": "3.3.0",
+        "@dynamic-labs/sdk-react-core": "3.3.0",
+        "@dynamic-labs/solana": "3.3.0",
         "@ethersproject/transactions": "5.7.0",
         "@headlessui/react": "2.1.5",
         "@solana/web3.js": "1.95.1",
@@ -40,6 +40,7 @@
         "react-jss": "10.10.0",
         "tailwind-merge": "2.4.0",
         "tailwindcss": "3.4.10",
+        "viem": "2.17.5",
         "zod": "3.22.4"
     },
     "devDependencies": {

diff --git a/packages/client/ui/react-ui/src/components/embed/v3/crypto/CryptoWalletConnectionHandler.tsx b/packages/client/ui/react-ui/src/components/embed/v3/crypto/CryptoWalletConnectionHandler.tsx
@@ -1,10 +1,11 @@
 import DynamicContextProviderWrapper from "@/components/dynamic-xyz/DynamicContextProviderWrapper";
 import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
 import { type BlockchainIncludingTestnet, chainIdToBlockchain } from "@crossmint/common-sdk-base";
-import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
+import { EthereumWalletConnectors, isEthereumWallet } from "@dynamic-labs/ethereum";
 import { type HandleConnectedWallet, useDynamicContext } from "@dynamic-labs/sdk-react-core";
-import { SolanaWalletConnectors } from "@dynamic-labs/solana";
+import { isSolanaWallet, SolanaWalletConnectors } from "@dynamic-labs/solana";
 import { useEffect } from "react";
+import { parseTransaction, type TransactionSerializableEIP1559 } from "viem";
 
 export function CryptoWalletConnectionHandler(props: { iframeClient: EmbeddedCheckoutV3IFrameEmitter | null }) {
     const { iframeClient } = props;
@@ -62,22 +63,72 @@ export function CryptoWalletConnectionHandler(props: { iframeClient: EmbeddedChe
 }
 
 function _CryptoWalletConnectionHandler({ iframeClient }: Parameters<typeof CryptoWalletConnectionHandler>[0]) {
-    const { setShowAuthFlow } = useDynamicContext();
+    const { setShowAuthFlow, primaryWallet } = useDynamicContext();
 
     useEffect(() => {
         if (iframeClient == null) {
             return;
         }
-        const listenerId = iframeClient.on("crypto:connect-wallet.show", ({ show }) => {
-            console.log("crypto:connect-wallet.show", show);
+        console.log("[CryptoWalletConnectionHandler] setting up listeners");
+        const showAuthFlowListener = iframeClient.on("crypto:connect-wallet.show", ({ show }) => {
+            console.log("[CryptoWalletConnectionHandler] showAuthFlowListener", show);
             setShowAuthFlow(show);
+            console.log("[CryptoWalletConnectionHandler] called _setShowAuthFlow", show);
         });
 
         return () => {
-            iframeClient.off(listenerId);
+            console.log("[CryptoWalletConnectionHandler] cleaning up listeners");
+            iframeClient.off(showAuthFlowListener);
+            // iframeClient.off(signTransactionListener);
         };
     }, [iframeClient]);
 
+    useEffect(() => {
+        if (iframeClient == null) {
+            return;
+        }
+        const signTransactionListener = iframeClient.on(
+            "crypto:send-transaction",
+            async ({ chain, serializedTransaction }) => {
+                console.log("[CryptoWalletConnectionHandler] signTransaction", chain, serializedTransaction);
+
+                const connector = primaryWallet?.connector;
+                console.log("[CryptoWalletConnectionHandler] connector", connector);
+
+                if (primaryWallet == null) {
+                    console.error("[CryptoWalletConnectionHandler] signTransaction: primaryWallet is missing");
+                    return;
+                }
+
+                if (isEthereumWallet(primaryWallet)) {
+                    const walletClient = await primaryWallet.getWalletClient();
+                    const parsedTransaction = parseTransaction(serializedTransaction as `0x${string}`);
+                    try {
+                        const txId = await walletClient.sendTransaction(
+                            parsedTransaction as TransactionSerializableEIP1559
+                        );
+                        console.log("[CryptoWalletConnectionHandler] txId", txId);
+                        iframeClient.send("crypto:send-transaction:success", {
+                            txId,
+                        });
+                        return;
+                    } catch (error) {
+                        console.error("[CryptoWalletConnectionHandler] failed to send transaction", error);
+                        iframeClient.send("crypto:send-transaction:failed", {
+                            error: (error as Error).message,
+                        });
+                        return;
+                    }
+                } else if (isSolanaWallet(primaryWallet)) {
+                    console.error("[CryptoWalletConnectionHandler] signTransaction: unsupported wallet");
+                }
+            }
+        );
+
+        return () => {
+            iframeClient.off(signTransactionListener);
+        };
+    }, [iframeClient, primaryWallet]);
     return null;
 }