wallets: merge main into wallets-v1

apps/auth/nextjs-ssr/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @crossmint/server-sdk-next-starter
 
+## 0.4.154
+
+### Patch Changes
+
+- Updated dependencies [92c894a]
+- Updated dependencies [464292b]
+- Updated dependencies [402001f]
+  - @crossmint/client-sdk-react-ui@3.1.0
+  - @crossmint/server-sdk@1.2.63
+
+## 0.4.153
+
+### Patch Changes
+
+- Updated dependencies [a6fadd0]
+  - @crossmint/client-sdk-react-ui@3.0.3
+
 ## 0.4.152
 
 ### Patch Changes

apps/auth/nextjs-ssr/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@crossmint/auth-ssr-nextjs-demo",
-    "version": "0.4.152",
+    "version": "0.4.154",
     "private": true,
     "scripts": {
         "dev": "next dev",

apps/auth/node-and-express-server/CHANGELOG.md

@@ -1,5 +1,11 @@
 # crossmint-auth-node
 
+## 1.1.74
+
+### Patch Changes
+
+- @crossmint/server-sdk@1.2.63
+
 ## 1.1.73
 
 ### Patch Changes

apps/auth/node-and-express-server/package.json

@@ -1,6 +1,6 @@
 {
     "name": "crossmint-auth-node",
-    "version": "1.1.73",
+    "version": "1.1.74",
     "description": "",
     "main": "index.js",
     "type": "module",

apps/payments/nextjs/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @crossmint/client-sdk-nextjs-starter
 
+## 2.0.4
+
+### Patch Changes
+
+- Updated dependencies [92c894a]
+- Updated dependencies [464292b]
+- Updated dependencies [402001f]
+  - @crossmint/client-sdk-react-ui@3.1.0
+  - @crossmint/client-sdk-base@2.1.0
+
+## 2.0.3
+
+### Patch Changes
+
+- Updated dependencies [a6fadd0]
+  - @crossmint/client-sdk-react-ui@3.0.3
+
 ## 2.0.2
 
 ### Patch Changes

apps/payments/nextjs/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@crossmint/client-sdk-nextjs-starter",
-    "version": "2.0.2",
+    "version": "2.0.4",
     "private": true,
     "repository": "https://github.com/Crossmint/crossmint-sdk",
     "license": "Apache-2.0",

apps/payments/nextjs/pages/hosted-checkout/v3.tsx

@@ -66,6 +66,16 @@ export default function HostedCheckoutV3Page() {
                         {createTokenButtonSection("dark", false, true)}
                     </div>
                 </div>
+                <div style={{ marginTop: "40px", textAlign: "center" }}>
+                    <h2 style={{ marginBottom: "16px" }}>Order-Based Checkout (orderId + clientSecret)</h2>
+                    <p style={{ marginBottom: "16px", color: "#666" }}>
+                        Create an order server-side first, then paste orderId + clientSecret below.
+                    </p>
+                    <div style={{ display: "flex", gap: "20px", justifyContent: "center" }}>
+                        {createOrderBasedButtonSection("crossmint")}
+                        {createOrderBasedButtonSection("dark")}
+                    </div>
+                </div>
             </HostedCheckoutV3ClientProviders>
         </div>
     );
@@ -153,3 +163,25 @@ function createTokenButtonSection(
         </div>
     );
 }
+
+const ORDER_ID = "YOUR_ORDER_ID";
+const CLIENT_SECRET = "YOUR_CLIENT_SECRET";
+
+function createOrderBasedButtonSection(buttonTheme: CrossmintHostedCheckoutV3ButtonTheme) {
+    return (
+        <div
+            style={{
+                backgroundColor: buttonTheme === "light" ? "black" : "white",
+                display: "flex",
+                justifyContent: "center",
+                padding: "20px",
+            }}
+        >
+            <CrossmintHostedCheckout
+                orderId={ORDER_ID}
+                clientSecret={CLIENT_SECRET}
+                appearance={{ theme: { button: buttonTheme } }}
+            />
+        </div>
+    );
+}

apps/wallets/quickstart-devkit/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @crossmint/wallets-quickstart-devkit
 
+## 0.2.24
+
+### Patch Changes
+
+- Updated dependencies [92c894a]
+- Updated dependencies [464292b]
+- Updated dependencies [402001f]
+  - @crossmint/client-sdk-react-ui@3.1.0
+
+## 0.2.23
+
+### Patch Changes
+
+- Updated dependencies [a6fadd0]
+  - @crossmint/client-sdk-react-ui@3.0.3
+
 ## 0.2.22
 
 ### Patch Changes

apps/wallets/quickstart-devkit/components/activity.tsx

@@ -40,24 +40,23 @@ export function Activity() {
                     <div className="text-gray-500 text-center" data-testid="activity-loading">
                         Loading...
                     </div>
-                ) : !activity || activity.data.length === 0 ? (
+                ) : !activity || activity.events.length === 0 ? (
                     <div className="text-gray-500 text-center" data-testid="activity-empty">
                         No recent activity
                     </div>
                 ) : (
-                    activity.data.map((transfer, idx) => (
+                    activity.events.map((event, idx) => (
                         <div
-                            key={`${transfer.sender.address}-${idx}`}
+                            key={`${event.transaction_hash}-${idx}`}
                             data-testid={`activity-event-${idx}`}
                             className="flex justify-between items-center py-2.5 border-t border-gray-100 first:border-t-0"
                         >
                             <div>
                                 <div className="font-medium">
-                                    {transfer.token.amount} {transfer.token.symbol ?? transfer.token.locator}
+                                    {event.amount} {event.token_symbol}
                                 </div>
                                 <div className="text-xs text-gray-500">
-                                    From: {shortenAddress(transfer.sender.address)} → To:{" "}
-                                    {shortenAddress(transfer.recipient.address)}
+                                    From: {shortenAddress(event.from_address)} → To: {shortenAddress(event.to_address)}
                                 </div>
                             </div>
                         </div>

apps/wallets/quickstart-devkit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@crossmint/wallets-quickstart-devkit",
-    "version": "0.2.22",
+    "version": "0.2.24",
     "private": true,
     "scripts": {
         "dev": "next dev --turbopack",

apps/wallets/smart-wallet/expo/CHANGELOG.md

@@ -1,5 +1,19 @@
 # expo-demo
 
+## 1.1.127
+
+### Patch Changes
+
+- Updated dependencies [e912d18]
+  - @crossmint/wallets-sdk@0.21.0
+  - @crossmint/client-sdk-react-native-ui@0.13.26
+
+## 1.1.126
+
+### Patch Changes
+
+- @crossmint/client-sdk-react-native-ui@0.13.25
+
 ## 1.1.125
 
 ### Patch Changes

apps/wallets/smart-wallet/expo/package.json

@@ -1,7 +1,7 @@
 {
     "name": "expo-demo",
     "main": "expo-router/entry",
-    "version": "1.1.125",
+    "version": "1.1.127",
     "scripts": {
         "start": "expo start",
         "reset-project": "node ./scripts/reset-project.js",

packages/client/auth/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @crossmint/client-sdk-auth
 
+## 1.2.51
+
+### Patch Changes
+
+- Updated dependencies [402001f]
+  - @crossmint/client-sdk-base@2.1.0
+  - @crossmint/common-sdk-auth@1.0.73
+
 ## 1.2.50
 
 ### Patch Changes

packages/client/auth/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@crossmint/client-sdk-auth",
-    "version": "1.2.50",
+    "version": "1.2.51",
     "repository": "https://github.com/Crossmint/crossmint-sdk",
     "license": "Apache-2.0",
     "author": "Paella Labs Inc",

packages/client/base/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crossmint/client-sdk-base
 
+## 2.1.0
+
+### Minor Changes
+
+- 402001f: Add orderId + clientSecret support to hosted checkout for pre-created orders
+
 ## 2.0.2
 
 ### Patch Changes

packages/client/base/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@crossmint/client-sdk-base",
-    "version": "2.0.2",
+    "version": "2.1.0",
     "repository": "https://github.com/Crossmint/crossmint-sdk",
     "license": "Apache-2.0",
     "author": "Paella Labs Inc",

packages/client/base/src/services/hosted/v3/crossmintHostedCheckoutV3Service.ts

@@ -1,12 +1,16 @@
-import type { CrossmintHostedCheckoutV3Props } from "@/types/hosted/v3/CrossmintHostedCheckoutV3Props";
+import {
+    type CrossmintHostedCheckoutV3AllProps,
+    isHostedCheckoutV3ExistingOrderProps,
+    type CrossmintHostedCheckoutV3OrderProps,
+} from "@/types/hosted/v3/CrossmintHostedCheckoutV3Props";
 import { appendObjectToQueryParams } from "@/utils/appendObjectToQueryParams";
 import { NewTabWindow, PopupWindow } from "@crossmint/client-sdk-window";
 import type { CrossmintApiClient } from "@crossmint/common-sdk-base";
 import { crossmintHostedCheckoutOverlayService } from "./crossmintHostedCheckoutOverlayService";
 
 export type CrossmintHostedCheckoutV3ServiceProps = {
     apiClient: CrossmintApiClient;
-    hostedCheckoutProps: CrossmintHostedCheckoutV3Props;
+    hostedCheckoutProps: CrossmintHostedCheckoutV3AllProps;
 };
 
 export function crossmintHostedCheckoutV3Service({
@@ -15,11 +19,20 @@ export function crossmintHostedCheckoutV3Service({
 }: CrossmintHostedCheckoutV3ServiceProps) {
     const overlayService = crossmintHostedCheckoutOverlayService();
 
-    function getUrl(props: CrossmintHostedCheckoutV3Props) {
-        const urlWithPath = apiClient.buildUrl("/sdk/2024-03-05/hosted-checkout");
+    function getUrl(props: CrossmintHostedCheckoutV3AllProps) {
+        const isExistingOrder = isHostedCheckoutV3ExistingOrderProps(props);
+        const path = isExistingOrder
+            ? `/sdk/2024-03-05/hosted-checkout/${encodeURIComponent(props.orderId)}`
+            : "/sdk/2024-03-05/hosted-checkout";
+        const urlWithPath = apiClient.buildUrl(path);
         const queryParams = new URLSearchParams();
 
-        appendObjectToQueryParams(queryParams, props);
+        if (isExistingOrder) {
+            const { orderId, ...restOfParams } = props as CrossmintHostedCheckoutV3OrderProps;
+            appendObjectToQueryParams(queryParams, restOfParams);
+        } else {
+            appendObjectToQueryParams(queryParams, props);
+        }
 
         queryParams.append("apiKey", apiClient.crossmint.apiKey);
         queryParams.append("sdkMetadata", JSON.stringify(apiClient["internalConfig"].sdkMetadata));

packages/client/base/src/services/hosted/v3/styles/crossmintHostedCheckoutV3StylesService.ts

@@ -1,7 +1,8 @@
 import type { Locale } from "@/types";
-import type {
-    CrossmintHostedCheckoutV3ButtonTheme,
-    CrossmintHostedCheckoutV3Props,
+import {
+    type CrossmintHostedCheckoutV3ButtonTheme,
+    type CrossmintHostedCheckoutV3AllProps,
+    isHostedCheckoutV3ExistingOrderProps,
 } from "@/types/hosted/v3/CrossmintHostedCheckoutV3Props";
 import { t } from "@/utils/i18n";
 
@@ -14,7 +15,7 @@ const BUTTON_THEME_TO_CLASSNAME: Record<CrossmintHostedCheckoutV3ButtonTheme, st
     crossmint: `${BUTTON_CLASSNAME}--Crossmint`,
 };
 
-export function crossmintHostedCheckoutV3StylesService(hostedCheckoutProps: CrossmintHostedCheckoutV3Props) {
+export function crossmintHostedCheckoutV3StylesService(hostedCheckoutProps: CrossmintHostedCheckoutV3AllProps) {
     const buttonTheme = hostedCheckoutProps.appearance?.theme?.button || "dark";
 
     function generateCss() {
@@ -109,8 +110,8 @@ export function crossmintHostedCheckoutV3StylesService(hostedCheckoutProps: Cros
     function getButtonText() {
         const locale: Locale = hostedCheckoutProps.locale || "en-US";
 
-        const isCryptoEnabled = hostedCheckoutProps.payment?.crypto?.enabled;
-        const isFiatEnabled = hostedCheckoutProps.payment?.fiat?.enabled;
+        const isCryptoEnabled = hostedCheckoutProps.payment?.crypto?.enabled ?? false;
+        const isFiatEnabled = hostedCheckoutProps.payment?.fiat?.enabled ?? false;
 
         const paymentMethodText = (() => {
             if (isCryptoEnabled && isFiatEnabled) {
@@ -122,6 +123,9 @@ export function crossmintHostedCheckoutV3StylesService(hostedCheckoutProps: Cros
             if (isFiatEnabled) {
                 return t("hostedCheckoutV3.card", locale);
             }
+            if (isHostedCheckoutV3ExistingOrderProps(hostedCheckoutProps)) {
+                return t("hostedCheckoutV3.crossmint", locale);
+            }
             throw new Error("Neither `payment.crypto.enabled` or `payment.fiat.enabled` is true");
         })();
 

packages/client/base/src/types/hosted/v3/CrossmintHostedCheckoutV3Props.ts

@@ -11,6 +11,25 @@ export interface CrossmintHostedCheckoutV3Props {
     metadata?: JSONObject;
 }
 
+export interface CrossmintHostedCheckoutV3OrderProps {
+    orderId: string;
+    clientSecret: string;
+    locale?: Locale;
+    payment?: Omit<HostedCheckoutV3Payment, "fiat" | "crypto"> & {
+        fiat?: HostedCheckoutV3FiatPayment;
+        crypto?: HostedCheckoutV3CryptoPayment;
+    };
+    appearance?: CrossmintHostedCheckoutV3Appearance;
+}
+
+export type CrossmintHostedCheckoutV3AllProps = CrossmintHostedCheckoutV3Props | CrossmintHostedCheckoutV3OrderProps;
+
+export function isHostedCheckoutV3ExistingOrderProps(
+    props: CrossmintHostedCheckoutV3AllProps
+): props is CrossmintHostedCheckoutV3OrderProps {
+    return "orderId" in props && props.orderId != null;
+}
+
 export type HostedCheckoutV3Payment = {
     receiptEmail?: string;
     fiat: HostedCheckoutV3FiatPayment;