v1.1: deserialize txs and use native types

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"
     }
 }

packages/core/base/src/types/embed/crypto.ts

@@ -1,19 +1,32 @@
+import type { Transaction as EthersTransaction } from "@ethersproject/transactions";
+import type { Transaction as SolanaTransaction } from "@solana/web3.js";
+
 import { CommonEmbeddedCheckoutProps } from ".";
-import { CryptoPaymentMethod } from "..";
+import { CryptoPaymentMethod, RequiredBy } from "..";
 
-export type CryptoEmbeddedCheckoutProps<
+type CryptoEmbeddedCheckoutPropsBase<
     PM extends keyof CryptoPaymentMethodSignerMap = keyof CryptoPaymentMethodSignerMap,
 > = CommonEmbeddedCheckoutProps<PM> & {
     signer?: CryptoPaymentMethodSignerMap[PM];
 };
 
-export type CryptoEmbeddedCheckoutPropsWithSigner<
+type CryptoEmbeddedCheckoutPropsWithSignerBase<
     PM extends keyof CryptoPaymentMethodSignerMap = keyof CryptoPaymentMethodSignerMap,
-> = CommonEmbeddedCheckoutProps<PM> & {
-    signer: CryptoPaymentMethodSignerMap[PM];
-};
+> = RequiredBy<CryptoEmbeddedCheckoutPropsBase<PM>, "signer">;
+
+// 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 = {
+export type CryptoPaymentMethodSignerMap = {
     [CryptoPaymentMethod.ETH]: ETHEmbeddedCheckoutSigner;
     [CryptoPaymentMethod.SOL]: SOLEmbeddedCheckoutSigner;
 };
@@ -23,11 +36,10 @@ type CommonEmbeddedCheckoutSignerProps = {
 };
 
 // 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>;
 };

packages/core/base/src/types/embed/fiat.ts

@@ -1,6 +1,6 @@
 import { CommonEmbeddedCheckoutProps } from ".";
 
-export type FiatEmbeddedCheckoutProps = CommonEmbeddedCheckoutProps<"fiat"> & {
+export type FiatEmbeddedCheckoutProps = CommonEmbeddedCheckoutProps<"fiat" | undefined> & {
     // TODO: Audit old params
     cardWalletPaymentMethods?: CardWalletPaymentMethod | CardWalletPaymentMethod[] | "none";
     emailInputOptions?: EmailInputOptions;

packages/core/base/src/types/embed/index.ts

@@ -15,8 +15,8 @@ import { FiatEmbeddedCheckoutProps } from "./fiat";
 export * from "./crypto";
 export * from "./fiat";
 
-export type CommonEmbeddedCheckoutProps<PM extends PaymentMethod = PaymentMethod> = {
-    paymentMethod?: PM;
+export type CommonEmbeddedCheckoutProps<PM extends PaymentMethod | undefined = PaymentMethod | undefined> = {
+    paymentMethod: PM;
     mintConfig?: MintConfigs;
     currency?: CaseInsensitive<Currency>;
     locale?: Locale;

packages/core/base/src/types/system.ts

@@ -57,3 +57,6 @@ export type TypeFromPath<
 
 export type CaseInsensitive<T extends string> = T | Uppercase<T> | Lowercase<T>;
 export type EmptyObject = Record<string, never>;
+
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type RequiredBy<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

packages/starter/nextjs-starter/pages/payment-element.tsx

@@ -24,9 +24,9 @@ export default function PaymentElementPage() {
                 }}
                 paymentMethod="ETH"
                 signer={{
-                    address: "0xdC9bb9929b79b62d630A7C3568c979a2843eFd8b",
-                    signAndSendTransaction: async (tx) => {
-                        return "0x1234";
+                    address: "maxfQWBno84Zfu4sXgmjYvsvLn4LzGFSgSkFMFuzved",
+                    signAndSendTransaction: async (transaction) => {
+                        return "123";
                     },
                 }}
                 onEvent={(event) => {

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": {

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} />;
 }