@b3dotfun/sdk 0.0.5 → 0.0.6-alpha.1

package/dist/cjs/anyspend/constants/index.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VENDOR_DISPLAY_NAMES = exports.PAYMENT_METHOD_ICONS = exports.STRIPE_CONFIG = exports.DEFAULT_NFT_CONTRACT = exports.NFT_CONTRACTS = exports.USDC_BASE = exports.B3_TOKEN = exports.SOLANA_TOKEN_2022_PROGRAM_ID = exports.SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = exports.RELAY_SOLANA_MAINNET_CHAIN_ID = exports.RELAY_SOL_ADDRESS = exports.RELAY_ETH_ADDRESS = exports.ANYSPEND_TESTNET_BASE_URL = exports.ANYSPEND_MAINNET_BASE_URL = void 0;
 const chains_1 = require("viem/chains");
-exports.ANYSPEND_MAINNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://anyspend-mainnet.up.railway.app";
-exports.ANYSPEND_TESTNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://anyspend-testnet.up.railway.app";
+exports.ANYSPEND_MAINNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://mainnet.anyspend.com";
+exports.ANYSPEND_TESTNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://testnet.anyspend.com";
 exports.RELAY_ETH_ADDRESS = "0x0000000000000000000000000000000000000000";
 exports.RELAY_SOL_ADDRESS = "11111111111111111111111111111111";
 exports.RELAY_SOLANA_MAINNET_CHAIN_ID = 792703809;

package/dist/cjs/anyspend/react/components/AnySpend.js

@@ -103,7 +103,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                 name: srcTokenMetadata.name || selectedSrcToken.name,
                 metadata: {
                     ...selectedSrcToken.metadata,
-                    logoURI: srcTokenMetadata.logoURI || selectedSrcToken.metadata?.logoURI
+                    logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI
                 }
             };
             setSelectedSrcToken(enhancedToken);
@@ -125,7 +125,7 @@ function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet
                 name: dstTokenMetadata.name || selectedDstToken.name,
                 metadata: {
                     ...selectedDstToken.metadata,
-                    logoURI: dstTokenMetadata.logoURI || selectedDstToken.metadata?.logoURI
+                    logoURI: dstTokenMetadata?.logoURI || selectedDstToken.metadata.logoURI
                 }
             };
             setSelectedDstToken(enhancedToken);

package/dist/cjs/anyspend/react/components/index.d.ts

@@ -1,14 +1,16 @@
 export { AnySpend } from "./AnySpend";
+export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendNFT } from "./AnySpendNFT";
 export { AnySpendNFTButton } from "./AnySpendNFTButton";
-export { AnySpendTournament } from "./AnySpendTournament";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";
-export { AnySpendBuySpin } from "./AnySpendBuySpin";
-export { OrderHistoryItem } from "./common/OrderHistoryItem";
-export { OrderHistory } from "./common/OrderHistory";
+export { AnySpendTournament } from "./AnySpendTournament";
 export { OrderDetails } from "./common/OrderDetails";
+export { OrderHistory } from "./common/OrderHistory";
+export { OrderHistoryItem } from "./common/OrderHistoryItem";
+export { OrderStatus } from "./common/OrderStatus";
 export { OrderToken } from "./common/OrderToken";
 export { OrderTokenAmount } from "./common/OrderTokenAmount";
-export { OrderStatus } from "./common/OrderStatus";
 export { TokenBalance } from "./common/TokenBalance";
+export { WebviewOnrampOrderStatus } from "./webview/WebviewOnrampOrderStatus";
+export { WebviewOnrampPayment } from "./webview/WebviewOnrampPayment";

package/dist/cjs/anyspend/react/components/index.js

@@ -1,33 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TokenBalance = exports.OrderStatus = exports.OrderTokenAmount = exports.OrderToken = exports.OrderDetails = exports.OrderHistory = exports.OrderHistoryItem = exports.AnySpendBuySpin = exports.AnySpendStakeB3 = exports.AnySpendTournament = exports.AnySpendNFTButton = exports.AnySpendNFT = exports.AnySpendCustom = exports.AnySpend = void 0;
+exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TokenBalance = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetails = exports.AnySpendTournament = exports.AnySpendStakeB3 = exports.AnySpendNFTButton = exports.AnySpendNFT = exports.AnySpendCustom = exports.AnySpendBuySpin = exports.AnySpend = void 0;
 // Components
 var AnySpend_1 = require("./AnySpend");
 Object.defineProperty(exports, "AnySpend", { enumerable: true, get: function () { return AnySpend_1.AnySpend; } });
+var AnySpendBuySpin_1 = require("./AnySpendBuySpin");
+Object.defineProperty(exports, "AnySpendBuySpin", { enumerable: true, get: function () { return AnySpendBuySpin_1.AnySpendBuySpin; } });
 var AnySpendCustom_1 = require("./AnySpendCustom");
 Object.defineProperty(exports, "AnySpendCustom", { enumerable: true, get: function () { return AnySpendCustom_1.AnySpendCustom; } });
 var AnySpendNFT_1 = require("./AnySpendNFT");
 Object.defineProperty(exports, "AnySpendNFT", { enumerable: true, get: function () { return AnySpendNFT_1.AnySpendNFT; } });
 var AnySpendNFTButton_1 = require("./AnySpendNFTButton");
 Object.defineProperty(exports, "AnySpendNFTButton", { enumerable: true, get: function () { return AnySpendNFTButton_1.AnySpendNFTButton; } });
-var AnySpendTournament_1 = require("./AnySpendTournament");
-Object.defineProperty(exports, "AnySpendTournament", { enumerable: true, get: function () { return AnySpendTournament_1.AnySpendTournament; } });
 var AnySpendStakeB3_1 = require("./AnySpendStakeB3");
 Object.defineProperty(exports, "AnySpendStakeB3", { enumerable: true, get: function () { return AnySpendStakeB3_1.AnySpendStakeB3; } });
-var AnySpendBuySpin_1 = require("./AnySpendBuySpin");
-Object.defineProperty(exports, "AnySpendBuySpin", { enumerable: true, get: function () { return AnySpendBuySpin_1.AnySpendBuySpin; } });
+var AnySpendTournament_1 = require("./AnySpendTournament");
+Object.defineProperty(exports, "AnySpendTournament", { enumerable: true, get: function () { return AnySpendTournament_1.AnySpendTournament; } });
 // Common Components
-var OrderHistoryItem_1 = require("./common/OrderHistoryItem");
-Object.defineProperty(exports, "OrderHistoryItem", { enumerable: true, get: function () { return OrderHistoryItem_1.OrderHistoryItem; } });
-var OrderHistory_1 = require("./common/OrderHistory");
-Object.defineProperty(exports, "OrderHistory", { enumerable: true, get: function () { return OrderHistory_1.OrderHistory; } });
 var OrderDetails_1 = require("./common/OrderDetails");
 Object.defineProperty(exports, "OrderDetails", { enumerable: true, get: function () { return OrderDetails_1.OrderDetails; } });
+var OrderHistory_1 = require("./common/OrderHistory");
+Object.defineProperty(exports, "OrderHistory", { enumerable: true, get: function () { return OrderHistory_1.OrderHistory; } });
+var OrderHistoryItem_1 = require("./common/OrderHistoryItem");
+Object.defineProperty(exports, "OrderHistoryItem", { enumerable: true, get: function () { return OrderHistoryItem_1.OrderHistoryItem; } });
+var OrderStatus_1 = require("./common/OrderStatus");
+Object.defineProperty(exports, "OrderStatus", { enumerable: true, get: function () { return OrderStatus_1.OrderStatus; } });
 var OrderToken_1 = require("./common/OrderToken");
 Object.defineProperty(exports, "OrderToken", { enumerable: true, get: function () { return OrderToken_1.OrderToken; } });
 var OrderTokenAmount_1 = require("./common/OrderTokenAmount");
 Object.defineProperty(exports, "OrderTokenAmount", { enumerable: true, get: function () { return OrderTokenAmount_1.OrderTokenAmount; } });
-var OrderStatus_1 = require("./common/OrderStatus");
-Object.defineProperty(exports, "OrderStatus", { enumerable: true, get: function () { return OrderStatus_1.OrderStatus; } });
 var TokenBalance_1 = require("./common/TokenBalance");
 Object.defineProperty(exports, "TokenBalance", { enumerable: true, get: function () { return TokenBalance_1.TokenBalance; } });
+var WebviewOnrampOrderStatus_1 = require("./webview/WebviewOnrampOrderStatus");
+Object.defineProperty(exports, "WebviewOnrampOrderStatus", { enumerable: true, get: function () { return WebviewOnrampOrderStatus_1.WebviewOnrampOrderStatus; } });
+var WebviewOnrampPayment_1 = require("./webview/WebviewOnrampPayment");
+Object.defineProperty(exports, "WebviewOnrampPayment", { enumerable: true, get: function () { return WebviewOnrampPayment_1.WebviewOnrampPayment; } });

package/dist/cjs/anyspend/react/components/webview/WebviewOnrampOrderStatus.d.ts

@@ -0,0 +1,6 @@
+import { Order } from "../../../../anyspend";
+interface WebviewOnrampOrderStatusProps {
+    order: Order;
+}
+export declare function WebviewOnrampOrderStatus({ order }: WebviewOnrampOrderStatusProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/anyspend/react/components/webview/WebviewOnrampOrderStatus.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebviewOnrampOrderStatus = WebviewOnrampOrderStatus;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const react_1 = require("../../../../global-account/react");
+const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
+const lucide_react_1 = require("lucide-react");
+const sonner_1 = require("sonner");
+const viem_1 = require("viem");
+function WebviewOnrampOrderStatus({ order }) {
+    console.log(order.status);
+    const isPending = order.status === anyspend_1.OrderStatus.WaitingStripePayment ||
+        order.status === anyspend_1.OrderStatus.ScanningDepositTransaction ||
+        order.status === anyspend_1.OrderStatus.SendingTokenFromVault ||
+        order.status === anyspend_1.OrderStatus.ObtainToken ||
+        order.status === anyspend_1.OrderStatus.Relay;
+    const isExecuted = order.status === anyspend_1.OrderStatus.Executed;
+    const isFailed = order.status === anyspend_1.OrderStatus.Failure;
+    const isRefunded = order.status === anyspend_1.OrderStatus.Refunded;
+    // Get token metadata
+    const { data: tokenMetadata } = (0, react_1.useTokenData)(order.metadata.dstToken.chainId, order.metadata.dstToken.address);
+    // Only show expected amount for swap orders
+    const expectedAmount = order.type === anyspend_1.OrderType.Swap
+        ? Number((0, viem_1.formatUnits)(BigInt(order.payload.expectedDstAmount), order.metadata.dstToken.decimals)).toFixed(2)
+        : null;
+    // Use token metadata logo if available
+    const tokenLogoUrl = tokenMetadata?.logoURI || order.metadata.dstToken.metadata?.logoURI;
+    const handleCopy = (text, label) => {
+        navigator.clipboard.writeText(text);
+        sonner_1.toast.success(`${label} copied to clipboard`);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "default", className: "flex items-center gap-3 px-4 py-2 text-base", children: [isPending && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), isExecuted && (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "h-4 w-4 text-green-500" }), isFailed && (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "h-4 w-4 text-red-500" }), (0, jsx_runtime_1.jsxs)("span", { children: [isPending && "Processing Payment...", isExecuted && "Payment Complete", isFailed && "Payment Failed", isRefunded && "Payment Refunded"] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-xl bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-lg font-semibold", children: "Order Summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col divide-y", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Amount Paid" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-semibold", children: ["$", Number((0, viem_1.formatUnits)(BigInt(order.srcAmount), order.metadata.srcToken.decimals)).toFixed(2)] })] }), order.type === anyspend_1.OrderType.Swap && expectedAmount && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Est Token Amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [tokenLogoUrl && ((0, jsx_runtime_1.jsx)("img", { src: tokenLogoUrl, alt: order.metadata.dstToken.symbol, className: "h-5 w-5 rounded-full" })), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [expectedAmount, " ", order.metadata.dstToken.symbol] })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Network" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, anyspend_1.getChainName)(order.dstChain) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Recipient" }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => handleCopy(order.recipientAddress, "Recipient address"), className: "flex items-center gap-2 font-medium transition-colors hover:text-blue-600", children: [(0, centerTruncate_1.default)(order.recipientAddress, 8), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Order ID" }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => handleCopy(order.id, "Order ID"), className: "flex items-center gap-2 font-medium transition-colors hover:text-blue-600", children: [(0, centerTruncate_1.default)(order.id, 8), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" })] })] })] })] }) })] }));
+}

package/dist/cjs/anyspend/react/components/webview/WebviewOnrampPayment.d.ts

@@ -0,0 +1,12 @@
+import { GetQuoteResponse, Token } from "../../../../anyspend";
+interface WebviewOnrampPaymentProps {
+    srcAmountOnRamp: string;
+    recipientAddress?: string;
+    destinationToken: Token;
+    partnerId?: string;
+    anyspendQuote: GetQuoteResponse | undefined;
+    onPaymentSuccess: (orderId: string) => void;
+    userId?: string;
+}
+export declare function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId }: WebviewOnrampPaymentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/anyspend/react/components/webview/WebviewOnrampPayment.js

@@ -0,0 +1,173 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebviewOnrampPayment = WebviewOnrampPayment;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
+const react_stripe_js_1 = require("@stripe/react-stripe-js");
+const stripe_js_1 = require("@stripe/stripe-js");
+const framer_motion_1 = require("framer-motion");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+const sonner_1 = require("sonner");
+const viem_1 = require("viem");
+const stripePromise = (0, stripe_js_1.loadStripe)(anyspend_1.STRIPE_CONFIG.publishableKey);
+// Stripe Payment Form Component
+function StripePaymentForm({ order, onPaymentSuccess }) {
+    const stripe = (0, react_stripe_js_1.useStripe)();
+    const elements = (0, react_stripe_js_1.useElements)();
+    const [isProcessing, setIsProcessing] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!stripe || !elements) {
+            return;
+        }
+        setIsProcessing(true);
+        setError(null);
+        try {
+            const { error: submitError } = await stripe.confirmPayment({
+                elements,
+                redirect: "if_required"
+            });
+            if (submitError) {
+                setError(submitError.message || "An error occurred");
+                console.error("Payment error:", submitError);
+            }
+            else {
+                console.log("Payment successful");
+                onPaymentSuccess(order.id);
+            }
+        }
+        catch (err) {
+            setError(err.message || "An error occurred");
+            console.error("Payment error:", err);
+        }
+        finally {
+            setIsProcessing(false);
+        }
+    };
+    const stripeElementOptions = {
+        layout: "tabs",
+        defaultValues: {
+            billingDetails: {
+                name: "",
+                email: ""
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("form", { onSubmit: handleSubmit, className: "w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-xl bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { options: stripeElementOptions }), error && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !stripe || isProcessing, className: "mt-6 w-full rounded-xl bg-blue-600 px-4 py-3 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50", children: isProcessing ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Processing..." })] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Complete Payment" })) })] }) }) }));
+}
+function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId }) {
+    const [stableAmountForGeo, setStableAmountForGeo] = (0, react_1.useState)(srcAmountOnRamp);
+    const hasInitialized = (0, react_1.useRef)(false);
+    const [createdOrder, setCreatedOrder] = (0, react_1.useState)(null);
+    const orderCreationAttempted = (0, react_1.useRef)(false);
+    // Only update the stable amount on first render or when explicitly needed
+    (0, react_1.useEffect)(() => {
+        if (!hasInitialized.current && srcAmountOnRamp) {
+            setStableAmountForGeo(srcAmountOnRamp);
+            hasInitialized.current = true;
+        }
+    }, [srcAmountOnRamp]);
+    const { geoData, isStripeWeb2Supported, isLoading: isLoadingGeoOnramp } = (0, anyspend_1.useGeoOnrampOptions)(true, stableAmountForGeo);
+    const { createOrder, isCreatingOrder } = (0, anyspend_1.useAnyspendCreateOnrampOrder)({
+        onSuccess: data => {
+            const orderId = data.data.id;
+            setCreatedOrder(data.data);
+        },
+        onError: error => {
+            console.error(error);
+            sonner_1.toast.error("Failed to create order: " + error.message);
+        }
+    });
+    const { clientSecret, isLoadingStripeClientSecret } = (0, anyspend_1.useStripeClientSecret)(true, createdOrder?.stripePaymentIntentId || "");
+    // Create order when component mounts and all required data is available
+    (0, react_1.useEffect)(() => {
+        const createOrderIfPossible = async () => {
+            if (!orderCreationAttempted.current &&
+                recipientAddress &&
+                srcAmountOnRamp &&
+                parseFloat(srcAmountOnRamp) > 0 &&
+                isStripeWeb2Supported &&
+                anyspendQuote &&
+                geoData) {
+                orderCreationAttempted.current = true;
+                try {
+                    const getDstToken = () => {
+                        return {
+                            ...destinationToken,
+                            chainId: destinationToken.chainId,
+                            address: destinationToken.address
+                        };
+                    };
+                    createOrder({
+                        isMainnet: true,
+                        recipientAddress,
+                        orderType: anyspend_1.OrderType.Swap,
+                        dstChain: getDstToken().chainId,
+                        dstToken: getDstToken(),
+                        srcFiatAmount: srcAmountOnRamp,
+                        onramp: {
+                            vendor: anyspend_1.OnrampVendor.StripeWeb2,
+                            paymentMethod: "",
+                            country: geoData.country || "US",
+                            ipAddress: geoData.ip,
+                            redirectUrl: `${window.location.origin}${userId ? `?userId=${userId}` : ""}`
+                        },
+                        expectedDstAmount: anyspendQuote.data?.currencyOut?.amount?.toString() || "0",
+                        partnerId
+                    });
+                }
+                catch (err) {
+                    console.error(err);
+                    sonner_1.toast.error("Failed to create order: " + err.message);
+                }
+            }
+        };
+        createOrderIfPossible();
+    }, [
+        recipientAddress,
+        srcAmountOnRamp,
+        isStripeWeb2Supported,
+        anyspendQuote,
+        geoData,
+        createOrder,
+        destinationToken,
+        userId,
+        partnerId
+    ]);
+    // Check if all required data is loaded
+    const isLoading = isLoadingGeoOnramp || !anyspendQuote || !destinationToken.metadata?.logoURI;
+    // Show loading state while data is being fetched or order is being created
+    if (isLoading || isCreatingOrder || isLoadingStripeClientSecret) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col items-center justify-center gap-3 py-12", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-brand h-8 w-8 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70", children: isCreatingOrder
+                        ? "Creating payment session..."
+                        : isLoadingStripeClientSecret
+                            ? "Loading payment form..."
+                            : "Loading payment details..." })] }));
+    }
+    // If we have a created order and client secret, show the payment form
+    if (createdOrder && clientSecret) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-xl bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col divide-y", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Receiving" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: destinationToken.metadata.logoURI, alt: destinationToken.symbol, className: "h-5 w-5 rounded-full" })), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [anyspendQuote?.data?.currencyOut?.amount
+                                                                ? Number((0, viem_1.formatUnits)(BigInt(anyspendQuote.data.currencyOut.amount), destinationToken.decimals)).toFixed(4)
+                                                                : "0", " ", destinationToken.symbol] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Network" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, anyspend_1.getChainName)(destinationToken.chainId) })] }), recipientAddress && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Recipient" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, centerTruncate_1.default)(recipientAddress) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "You Pay" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: stripePromise, options: {
+                        clientSecret,
+                        appearance: {
+                            theme: "flat",
+                            variables: {
+                                colorPrimary: "#2563eb",
+                                colorBackground: "#ffffff",
+                                borderRadius: "12px"
+                            }
+                        }
+                    }, children: (0, jsx_runtime_1.jsx)(StripePaymentForm, { order: createdOrder, onPaymentSuccess: onPaymentSuccess }) })] }));
+    }
+    // Show initial order summary while waiting for order creation
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, className: "mx-auto w-full max-w-[460px]", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-xl bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col divide-y", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Receiving" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: destinationToken.metadata.logoURI, alt: destinationToken.symbol, className: "h-5 w-5 rounded-full" })), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [anyspendQuote?.data?.currencyOut?.amount
+                                                        ? Number((0, viem_1.formatUnits)(BigInt(anyspendQuote.data.currencyOut.amount), destinationToken.decimals)).toFixed(4)
+                                                        : "0", " ", destinationToken.symbol] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Network" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, anyspend_1.getChainName)(destinationToken.chainId) })] }), recipientAddress && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Recipient" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, centerTruncate_1.default)(recipientAddress) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "You Pay" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }) }));
+}

package/dist/cjs/anyspend/react/hooks/useAnyspendCreateOnrampOrder.d.ts

@@ -14,6 +14,7 @@ export type CreateOnrampOrderParams = {
     dstToken: Token;
     srcFiatAmount: string;
     onramp: OnrampOptions;
+    partnerId?: string;
     expectedDstAmount: string;
     creatorAddress?: string;
     nft?: Nft & {

package/dist/cjs/anyspend/react/hooks/useAnyspendCreateOnrampOrder.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAnyspendCreateOnrampOrder = useAnyspendCreateOnrampOrder;
+const constants_1 = require("../../../anyspend/constants");
 const anyspend_1 = require("../../../anyspend/services/anyspend");
 const utils_1 = require("../../../anyspend/utils");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
-const constants_1 = require("../../../anyspend/constants");
 /**
  * Hook for creating onramp orders in the Anyspend protocol
  * Specifically handles orders that involve fiat-to-crypto onramp functionality
@@ -15,7 +15,7 @@ const constants_1 = require("../../../anyspend/constants");
 function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     const { mutate: createOrder, isPending } = (0, react_query_1.useMutation)({
         mutationFn: async (params) => {
-            const { isMainnet, recipientAddress, orderType, dstChain, dstToken, srcFiatAmount, onramp, creatorAddress, expectedDstAmount, nft, tournament, payload } = params;
+            const { isMainnet, recipientAddress, orderType, dstChain, dstToken, srcFiatAmount, onramp, creatorAddress, expectedDstAmount, nft, tournament, payload, partnerId } = params;
             try {
                 // Validate Stripe onramp options
                 if (onramp.vendor === "stripe" && !onramp.ipAddress) {
@@ -57,7 +57,8 @@ function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                         tournament,
                         payload
                     }),
-                    creatorAddress: creatorAddress ? (0, utils_1.normalizeAddress)(creatorAddress) : undefined
+                    creatorAddress: creatorAddress ? (0, utils_1.normalizeAddress)(creatorAddress) : undefined,
+                    partnerId
                 });
             }
             catch (error) {

package/dist/cjs/anyspend/react/hooks/useAnyspendOrderAndTransactions.d.ts

@@ -46,6 +46,7 @@ export declare function useAnyspendOrderAndTransactions(isMainnet: boolean, orde
                     ipAddress?: string | undefined;
                 } | null;
                 creatorAddress: string | null;
+                partnerId: string | null;
                 oneClickBuyUrl: string | null;
                 stripePaymentIntentId: string | null;
                 permit: {
@@ -117,6 +118,7 @@ export declare function useAnyspendOrderAndTransactions(isMainnet: boolean, orde
                     ipAddress?: string | undefined;
                 } | null;
                 creatorAddress: string | null;
+                partnerId: string | null;
                 oneClickBuyUrl: string | null;
                 stripePaymentIntentId: string | null;
                 permit: {
@@ -180,6 +182,7 @@ export declare function useAnyspendOrderAndTransactions(isMainnet: boolean, orde
                     ipAddress?: string | undefined;
                 } | null;
                 creatorAddress: string | null;
+                partnerId: string | null;
                 oneClickBuyUrl: string | null;
                 stripePaymentIntentId: string | null;
                 permit: {
@@ -243,6 +246,7 @@ export declare function useAnyspendOrderAndTransactions(isMainnet: boolean, orde
                     ipAddress?: string | undefined;
                 } | null;
                 creatorAddress: string | null;
+                partnerId: string | null;
                 oneClickBuyUrl: string | null;
                 stripePaymentIntentId: string | null;
                 permit: {
@@ -301,6 +305,7 @@ export declare function useAnyspendOrderAndTransactions(isMainnet: boolean, orde
                     ipAddress?: string | undefined;
                 } | null;
                 creatorAddress: string | null;
+                partnerId: string | null;
                 oneClickBuyUrl: string | null;
                 stripePaymentIntentId: string | null;
                 permit: {
@@ -399,6 +404,7 @@ export declare function useAnyspendOrderAndTransactions(isMainnet: boolean, orde
                     ipAddress?: string | undefined;
                 } | null;
                 creatorAddress: string | null;
+                partnerId: string | null;
                 oneClickBuyUrl: string | null;
                 stripePaymentIntentId: string | null;
                 permit: {
@@ -470,6 +476,7 @@ export declare function useAnyspendOrderAndTransactions(isMainnet: boolean, orde
                     ipAddress?: string | undefined;
                 } | null;
                 creatorAddress: string | null;
+                partnerId: string | null;
                 oneClickBuyUrl: string | null;
                 stripePaymentIntentId: string | null;
                 permit: {
@@ -533,6 +540,7 @@ export declare function useAnyspendOrderAndTransactions(isMainnet: boolean, orde
                     ipAddress?: string | undefined;
                 } | null;
                 creatorAddress: string | null;
+                partnerId: string | null;
                 oneClickBuyUrl: string | null;
                 stripePaymentIntentId: string | null;
                 permit: {
@@ -596,6 +604,7 @@ export declare function useAnyspendOrderAndTransactions(isMainnet: boolean, orde
                     ipAddress?: string | undefined;
                 } | null;
                 creatorAddress: string | null;
+                partnerId: string | null;
                 oneClickBuyUrl: string | null;
                 stripePaymentIntentId: string | null;
                 permit: {
@@ -654,6 +663,7 @@ export declare function useAnyspendOrderAndTransactions(isMainnet: boolean, orde
                     ipAddress?: string | undefined;
                 } | null;
                 creatorAddress: string | null;
+                partnerId: string | null;
                 oneClickBuyUrl: string | null;
                 stripePaymentIntentId: string | null;
                 permit: {

package/dist/cjs/anyspend/react/hooks/useAnyspendOrderHistory.d.ts

@@ -43,6 +43,7 @@ export declare function useAnyspendOrderHistory(isMainnet: boolean, creatorAddre
             ipAddress?: string | undefined;
         } | null;
         creatorAddress: string | null;
+        partnerId: string | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
         permit: {
@@ -114,6 +115,7 @@ export declare function useAnyspendOrderHistory(isMainnet: boolean, creatorAddre
             ipAddress?: string | undefined;
         } | null;
         creatorAddress: string | null;
+        partnerId: string | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
         permit: {
@@ -177,6 +179,7 @@ export declare function useAnyspendOrderHistory(isMainnet: boolean, creatorAddre
             ipAddress?: string | undefined;
         } | null;
         creatorAddress: string | null;
+        partnerId: string | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
         permit: {
@@ -240,6 +243,7 @@ export declare function useAnyspendOrderHistory(isMainnet: boolean, creatorAddre
             ipAddress?: string | undefined;
         } | null;
         creatorAddress: string | null;
+        partnerId: string | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
         permit: {
@@ -298,6 +302,7 @@ export declare function useAnyspendOrderHistory(isMainnet: boolean, creatorAddre
             ipAddress?: string | undefined;
         } | null;
         creatorAddress: string | null;
+        partnerId: string | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
         permit: {
@@ -360,6 +365,7 @@ export declare function useAnyspendOrderHistory(isMainnet: boolean, creatorAddre
             ipAddress?: string | undefined;
         } | null;
         creatorAddress: string | null;
+        partnerId: string | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
         permit: {
@@ -431,6 +437,7 @@ export declare function useAnyspendOrderHistory(isMainnet: boolean, creatorAddre
             ipAddress?: string | undefined;
         } | null;
         creatorAddress: string | null;
+        partnerId: string | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
         permit: {
@@ -494,6 +501,7 @@ export declare function useAnyspendOrderHistory(isMainnet: boolean, creatorAddre
             ipAddress?: string | undefined;
         } | null;
         creatorAddress: string | null;
+        partnerId: string | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
         permit: {
@@ -557,6 +565,7 @@ export declare function useAnyspendOrderHistory(isMainnet: boolean, creatorAddre
             ipAddress?: string | undefined;
         } | null;
         creatorAddress: string | null;
+        partnerId: string | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
         permit: {
@@ -615,6 +624,7 @@ export declare function useAnyspendOrderHistory(isMainnet: boolean, creatorAddre
             ipAddress?: string | undefined;
         } | null;
         creatorAddress: string | null;
+        partnerId: string | null;
         oneClickBuyUrl: string | null;
         stripePaymentIntentId: string | null;
         permit: {

package/dist/cjs/anyspend/services/anyspend.d.ts

@@ -4,7 +4,7 @@ export declare const anyspendService: {
     getTokenList: (isMainnet: boolean, chainId: number, query: string) => Promise<Token[]>;
     getToken: (isMainnet: boolean, chainId: number, tokenAddress: string) => Promise<Token>;
     getQuote: (isMainnet: boolean, req: GetQuoteRequest) => Promise<GetQuoteResponse>;
-    createOrder: ({ isMainnet, recipientAddress, type, srcChain, dstChain, srcTokenAddress, dstTokenAddress, srcAmount, payload, onramp, metadata, creatorAddress }: {
+    createOrder: ({ isMainnet, recipientAddress, type, srcChain, dstChain, srcTokenAddress, dstTokenAddress, srcAmount, payload, onramp, metadata, creatorAddress, partnerId }: {
         isMainnet: boolean;
         recipientAddress: string;
         type: string;
@@ -17,6 +17,7 @@ export declare const anyspendService: {
         onramp?: OnrampOptions;
         metadata: Record<string, any>;
         creatorAddress?: string;
+        partnerId?: string;
     }) => Promise<any>;
     getOrderAndTransactions: (isMainnet: boolean, orderId: string | undefined) => Promise<GetOrderAndTxsResponse>;
     getOrderHistory: (isMainnet: boolean, creatorAddress: string | undefined, limit?: number, offset?: number) => Promise<{
@@ -65,6 +66,7 @@ export declare const anyspendService: {
                 ipAddress?: string | undefined;
             } | null;
             creatorAddress: string | null;
+            partnerId: string | null;
             oneClickBuyUrl: string | null;
             stripePaymentIntentId: string | null;
             permit: {
@@ -136,6 +138,7 @@ export declare const anyspendService: {
                 ipAddress?: string | undefined;
             } | null;
             creatorAddress: string | null;
+            partnerId: string | null;
             oneClickBuyUrl: string | null;
             stripePaymentIntentId: string | null;
             permit: {
@@ -199,6 +202,7 @@ export declare const anyspendService: {
                 ipAddress?: string | undefined;
             } | null;
             creatorAddress: string | null;
+            partnerId: string | null;
             oneClickBuyUrl: string | null;
             stripePaymentIntentId: string | null;
             permit: {
@@ -262,6 +266,7 @@ export declare const anyspendService: {
                 ipAddress?: string | undefined;
             } | null;
             creatorAddress: string | null;
+            partnerId: string | null;
             oneClickBuyUrl: string | null;
             stripePaymentIntentId: string | null;
             permit: {
@@ -320,6 +325,7 @@ export declare const anyspendService: {
                 ipAddress?: string | undefined;
             } | null;
             creatorAddress: string | null;
+            partnerId: string | null;
             oneClickBuyUrl: string | null;
             stripePaymentIntentId: string | null;
             permit: {

package/dist/cjs/anyspend/services/anyspend.js

@@ -43,7 +43,7 @@ exports.anyspendService = {
         return data;
     },
     // Order related
-    createOrder: async ({ isMainnet, recipientAddress, type, srcChain, dstChain, srcTokenAddress, dstTokenAddress, srcAmount, payload, onramp, metadata, creatorAddress }) => {
+    createOrder: async ({ isMainnet, recipientAddress, type, srcChain, dstChain, srcTokenAddress, dstTokenAddress, srcAmount, payload, onramp, metadata, creatorAddress, partnerId }) => {
         const response = await fetch(`${isMainnet ? constants_1.ANYSPEND_MAINNET_BASE_URL : constants_1.ANYSPEND_TESTNET_BASE_URL}/orders`, {
             method: "POST",
             headers: {
@@ -60,7 +60,8 @@ exports.anyspendService = {
                 payload,
                 onramp,
                 metadata,
-                creatorAddress
+                creatorAddress,
+                partnerId
             })
         });
         const data = await response.json();