diff --git a/apps/payments/create-react-app/package.json b/apps/payments/create-react-app/package.json index 4c682002d..adacf2dfe 100644 --- a/apps/payments/create-react-app/package.json +++ b/apps/payments/create-react-app/package.json @@ -20,10 +20,12 @@ }, "dependencies": { "@crossmint/client-sdk-react-ui": "workspace:*", + "crypto": "npm:crypto-browserify@3.12.0", "eslint-config-react-app": "7.0.1", "react": "18.2.0", "react-dom": "18.2.0", "react-scripts": "5.0.1", + "stream": "npm:stream-browserify@3.0.0", "web-vitals": "3.4.0" }, "devDependencies": { diff --git a/apps/payments/nextjs/pages/embedded-checkout/v3.tsx b/apps/payments/nextjs/pages/embedded-checkout/v3.tsx index c3e5fed70..0701201b3 100644 --- a/apps/payments/nextjs/pages/embedded-checkout/v3.tsx +++ b/apps/payments/nextjs/pages/embedded-checkout/v3.tsx @@ -24,7 +24,7 @@ export default function EmbeddedCheckoutV3Page() { > diff --git a/packages/client/base/src/services/embed/v3/crossmintEmbeddedCheckoutV3Service.ts b/packages/client/base/src/services/embed/v3/crossmintEmbeddedCheckoutV3Service.ts index e904a9839..42d6216f7 100644 --- a/packages/client/base/src/services/embed/v3/crossmintEmbeddedCheckoutV3Service.ts +++ b/packages/client/base/src/services/embed/v3/crossmintEmbeddedCheckoutV3Service.ts @@ -33,6 +33,8 @@ export function crossmintEmbeddedCheckoutV3Service({ apiClient }: CrossmintEmbed } } + queryParams.append("apiKey", apiClient.crossmint.apiKey); + return `${urlWithPath}?${queryParams.toString()}`; } diff --git a/packages/client/base/src/types/embed/v3/events/incoming.ts b/packages/client/base/src/types/embed/v3/events/incoming.ts index 1f5f53bdf..de15f99be 100644 --- a/packages/client/base/src/types/embed/v3/events/incoming.ts +++ b/packages/client/base/src/types/embed/v3/events/incoming.ts @@ -4,5 +4,8 @@ export const embeddedCheckoutV3IncomingEvents = { "ui:height.changed": z.object({ height: z.number(), }), + "crypto:connect-wallet.show": z.object({ + show: z.boolean(), + }), }; 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 index ea1190fa9..287ff1269 100644 --- a/packages/client/base/src/types/embed/v3/events/outgoing.ts +++ b/packages/client/base/src/types/embed/v3/events/outgoing.ts @@ -1,8 +1,13 @@ import { z } from "zod"; export const embeddedCheckoutV3OutgoingEvents = { - placeholder: z.object({ - placeholder: z.number(), + "crypto:connect-wallet.failed": z.object({ + error: z.string(), + }), + "crypto:connect-wallet.success": z.object({ + address: z.string(), + chain: z.string(), + walletProviderKey: z.string().optional(), }), }; export type EmbeddedCheckoutV3OutgoingEventMap = typeof embeddedCheckoutV3OutgoingEvents; diff --git a/packages/client/ui/react-ui/package.json b/packages/client/ui/react-ui/package.json index 337c9e785..9601b50ea 100644 --- a/packages/client/ui/react-ui/package.json +++ b/packages/client/ui/react-ui/package.json @@ -26,6 +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", "@ethersproject/transactions": "5.7.0", "@headlessui/react": "2.1.5", "@solana/web3.js": "1.95.1", diff --git a/packages/client/ui/react-ui/src/components/dynamic-xyz/DynamicContextProviderWrapper.tsx b/packages/client/ui/react-ui/src/components/dynamic-xyz/DynamicContextProviderWrapper.tsx new file mode 100644 index 000000000..60a97db99 --- /dev/null +++ b/packages/client/ui/react-ui/src/components/dynamic-xyz/DynamicContextProviderWrapper.tsx @@ -0,0 +1,21 @@ +import { type DynamicContextProps, DynamicContextProvider } from "@dynamic-labs/sdk-react-core"; +import type { ReactNode } from "react"; + +export interface DynamicContextProviderWrapperProps { + children?: ReactNode; + settings: Omit; +} + +export default function DynamicContextProviderWrapper({ children, settings }: DynamicContextProviderWrapperProps) { + return ( + + {children} + + ); +} diff --git a/packages/client/ui/react-ui/src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx b/packages/client/ui/react-ui/src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx index 069f35673..ed0ce9950 100644 --- a/packages/client/ui/react-ui/src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx +++ b/packages/client/ui/react-ui/src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx @@ -8,6 +8,7 @@ import { } from "@crossmint/client-sdk-base"; import { LIB_VERSION } from "@/consts/version"; import { CrossmintApiClient } from "@crossmint/common-sdk-base"; +import { CryptoWalletConnectionHandler } from "./crypto/CryptoWalletConnectionHandler"; export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props) { const [iframeClient, setIframeClient] = useState(null); @@ -35,7 +36,7 @@ export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props }, [ref.current, iframeClient]); useEffect(() => { - if (!iframeClient) { + if (iframeClient == null) { return; } iframeClient.on("ui:height.changed", (data) => setHeight(data.height)); @@ -46,27 +47,30 @@ export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props }, [iframeClient]); return ( -