save

Crossmint · Sep 14, 2023 · b693e8d · b693e8d
1 parent a20e808
commit b693e8d
Show file tree

Hide file tree

Showing 5 changed files with 446 additions and 29 deletions.
diff --git a/packages/core/base/package.json b/packages/core/base/package.json
@@ -27,9 +27,11 @@
     },
     "dependencies": {
         "exponential-backoff": "3.1.1",
-        "uuid": "9.0.0"
+        "uuid": "9.0.1"
     },
     "devDependencies": {
-        "@types/uuid": "9.0.3"
+        "@ethersproject/transactions": "5.7.0",
+        "@solana/web3.js": "1.78.5",
+        "@types/uuid": "9.0.4"
     }
 }
diff --git a/packages/core/base/src/types/embed/crypto.ts b/packages/core/base/src/types/embed/crypto.ts
@@ -1,18 +1,34 @@
+import type { Transaction as _EthersTransaction } from "@ethersproject/transactions";
+import type { Transaction as _SolanaTransaction } from "@solana/web3.js";
+
 import { CommonEmbeddedCheckoutProps } from ".";
 import { CryptoPaymentMethod } from "..";
 
-export type CryptoEmbeddedCheckoutProps<
+type CryptoEmbeddedCheckoutPropsBase<
     PM extends keyof CryptoPaymentMethodSignerMap = keyof CryptoPaymentMethodSignerMap,
 > = CommonEmbeddedCheckoutProps<PM> & {
+    paymentMethod: PM;
     signer?: CryptoPaymentMethodSignerMap[PM];
 };
 
-export type CryptoEmbeddedCheckoutPropsWithSigner<
+type CryptoEmbeddedCheckoutPropsWithSignerBase<
     PM extends keyof CryptoPaymentMethodSignerMap = keyof CryptoPaymentMethodSignerMap,
-> = CommonEmbeddedCheckoutProps<PM> & {
+> = CryptoEmbeddedCheckoutPropsBase<PM> & {
     signer: CryptoPaymentMethodSignerMap[PM];
 };
 
+// Union discriminate with required signer
+export type CryptoEmbeddedCheckoutPropsWithSigner = {
+    [PM in keyof CryptoPaymentMethodSignerMap]: CryptoEmbeddedCheckoutPropsWithSignerBase<PM>;
+}[keyof CryptoPaymentMethodSignerMap];
+
+// Union discriminate type - both with or without signer
+export type CryptoEmbeddedCheckoutProps =
+    | {
+          [PM in keyof CryptoPaymentMethodSignerMap]: CryptoEmbeddedCheckoutPropsBase<PM>;
+      }[keyof CryptoPaymentMethodSignerMap]
+    | CryptoEmbeddedCheckoutPropsWithSigner;
+
 type CryptoPaymentMethodSignerMap = {
     [CryptoPaymentMethod.ETH]: ETHEmbeddedCheckoutSigner;
     [CryptoPaymentMethod.SOL]: SOLEmbeddedCheckoutSigner;
@@ -22,12 +38,15 @@ type CommonEmbeddedCheckoutSignerProps = {
     address: string;
 };
 
+// Aliases to preserve names
+type EthersTransaction = _EthersTransaction;
+type SolanaTransaction = _SolanaTransaction;
+
 // Signers
-// TODO: Import proper types from respective packages
 export type ETHEmbeddedCheckoutSigner = CommonEmbeddedCheckoutSignerProps & {
-    signAndSendTransaction: (transaction: any) => Promise<string>;
+    signAndSendTransaction: (transaction: EthersTransaction) => Promise<string>;
 };
 
 export type SOLEmbeddedCheckoutSigner = CommonEmbeddedCheckoutSignerProps & {
-    signAndSendTransaction: (transaction: any) => Promise<string>;
+    signAndSendTransaction: (transaction: SolanaTransaction) => Promise<string>;
 };
diff --git a/packages/ui/react-ui/package.json b/packages/ui/react-ui/package.json
@@ -31,6 +31,9 @@
     },
     "dependencies": {
         "@crossmint/client-sdk-base": "1.1.0-alpha.0",
+        "@ethersproject/transactions": "5.7.0",
+        "@solana/web3.js": "1.78.5",
+        "bs58": "5.0.0",
         "react-jss": "10.10.0"
     },
     "peerDependencies": {

diff --git a/packages/ui/react-ui/src/components/embed/crypto/CryptoEmbeddedCheckoutIFrame.tsx b/packages/ui/react-ui/src/components/embed/crypto/CryptoEmbeddedCheckoutIFrame.tsx
@@ -1,6 +1,10 @@
+import bs58 from "bs58";
+
 import {
     CryptoEmbeddedCheckoutPropsWithSigner,
+    ETHEmbeddedCheckoutSigner,
     IncomingInternalEvent,
+    SOLEmbeddedCheckoutSigner,
     crossmintIFrameService,
 } from "@crossmint/client-sdk-base";
 
@@ -9,20 +13,31 @@ import CrossmintEmbeddedCheckoutIFrame from "../EmbeddedCheckoutIFrame";
 export default function CryptoEmbeddedCheckoutIFrame(props: CryptoEmbeddedCheckoutPropsWithSigner) {
     const { emitInternalEvent } = crossmintIFrameService(props);
 
-    const { signer } = props;
+    const { signer, paymentMethod } = props;
 
     function onInternalEvent(event: IncomingInternalEvent) {
         const { type, payload } = event;
 
         if (type === "crypto-payment:incoming-transaction") {
             const { serializedTransaction } = payload;
+            console.log("[Crossmint] Received incoming transaction", serializedTransaction);
             handleIncomingTransaction(serializedTransaction);
         }
     }
 
     async function handleIncomingTransaction(serializedTransaction: string) {
         try {
-            const txId = await signer.signAndSendTransaction(serializedTransaction);
+            let txId: string;
+            switch (paymentMethod) {
+                case "SOL":
+                    txId = await handleSOLTransaction(signer, serializedTransaction);
+                    break;
+                case "ETH":
+                    txId = await handleETHTransaction(signer, serializedTransaction);
+                    break;
+                default:
+                    throw new Error(`Unsupported payment method ${paymentMethod}`);
+            }
 
             console.log("[Crossmint] Signed and sent transaction", txId);
             emitInternalEvent({
@@ -40,5 +55,23 @@ export default function CryptoEmbeddedCheckoutIFrame(props: CryptoEmbeddedChecko
         }
     }
 
+    async function handleSOLTransaction(signer: SOLEmbeddedCheckoutSigner, serializedTransaction: string) {
+        // @ts-expect-error - Error becasue we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+        const { Transaction } = await import("@solana/web3.js");
+        const transaction = Transaction.from(bs58.decode(serializedTransaction));
+        console.log("[Crossmint] Deserialized SOL transaction", transaction);
+
+        return await signer.signAndSendTransaction(transaction);
+    }
+
+    async function handleETHTransaction(signer: ETHEmbeddedCheckoutSigner, serializedTransaction: string) {
+        // @ts-expect-error - Error becasue we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+        const { parse: parseTransaction } = await import("@ethersproject/transactions");
+        const transaction = parseTransaction(serializedTransaction);
+        console.log("[Crossmint] Deserialized ETH transaction", transaction);
+
+        return await signer.signAndSendTransaction(transaction);
+    }
+
     return <CrossmintEmbeddedCheckoutIFrame onInternalEvent={onInternalEvent} {...props} />;
 }