@b3dotfun/sdk 0.0.7 → 0.0.8

package/dist/cjs/anyspend/react/components/common/OrderHistory.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OrderHistory = OrderHistory;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const anyspend_1 = require("../../../../anyspend");
-const react_1 = require("../../../../global-account/react");
+const react_1 = require("../../../../anyspend/react");
+const react_2 = require("../../../../global-account/react");
 const lucide_react_1 = require("lucide-react");
 const OrderHistoryItem_1 = require("./OrderHistoryItem");
 const isMainnet = true;
 function OrderHistory({ mode, onBack, onSelectOrder }) {
-    const { address } = (0, react_1.useAccountWallet)();
-    const { orderHistory, isLoadingOrderHistory, refetchOrderHistory } = (0, anyspend_1.useAnyspendOrderHistory)(isMainnet, address);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex w-full items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: onBack, variant: "ghost", size: "icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-xl font-semibold", children: "Order History" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/30 text-sm", children: "View your past transactions" })] }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", size: "icon", onClick: () => {
+    const { address } = (0, react_2.useAccountWallet)();
+    const { orderHistory, isLoadingOrderHistory, refetchOrderHistory } = (0, react_1.useAnyspendOrderHistory)(isMainnet, address);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex w-full items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onBack, variant: "ghost", size: "icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-xl font-semibold", children: "Order History" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/30 text-sm", children: "View your past transactions" })] }), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", size: "icon", onClick: () => {
                             refetchOrderHistory();
-                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "text-as-primary/30 hover:text-as-primary h-4 w-4 cursor-pointer transition-all hover:rotate-180" }) })] }), isLoadingOrderHistory ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full space-y-4", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-[160px] w-full rounded-lg" }, i))) })) : !orderHistory?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-light-brand w-full rounded-lg border p-8 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-muted-foreground", children: "No order history found" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-12 w-full space-y-4", children: [...orderHistory]
+                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "text-as-primary/30 hover:text-as-primary h-4 w-4 cursor-pointer transition-all hover:rotate-180" }) })] }), isLoadingOrderHistory ? ((0, jsx_runtime_1.jsx)("div", { className: "w-full space-y-4", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-[160px] w-full rounded-lg" }, i))) })) : !orderHistory?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-light-brand w-full rounded-lg border p-8 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-muted-foreground", children: "No order history found" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-12 w-full space-y-4", children: [...orderHistory]
                     .sort((a, b) => b.createdAt - a.createdAt)
                     .map(order => ((0, jsx_runtime_1.jsx)(OrderHistoryItem_1.OrderHistoryItem, { order: order, onSelectOrder: onSelectOrder, mode: mode }, order.id))) }))] }));
 }

package/dist/cjs/anyspend/react/components/common/OrderToken.d.ts

@@ -1,5 +1,5 @@
 import { Token } from "../../../../anyspend";
-export declare function OrderToken({ context, address, chainId, setChainId, token, setToken, requiredAmount, tokenSelectClassName }: {
+export declare function OrderToken({ context, address, chainId, setChainId, token, setToken, requiredAmount, tokenSelectClassName, }: {
     context: "from" | "to";
     address: string | undefined;
     token: Token;

package/dist/cjs/anyspend/react/components/common/OrderToken.js

@@ -12,13 +12,13 @@ const relay_kit_ui_1 = require("@reservoir0x/relay-kit-ui");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const ChainTokenIcon_1 = require("./ChainTokenIcon");
-function OrderToken({ context, address, chainId, setChainId, token, setToken, requiredAmount, tokenSelectClassName }) {
+function OrderToken({ context, address, chainId, setChainId, token, setToken, requiredAmount, tokenSelectClassName, }) {
     const { wallet } = (0, react_1.useAccountWallet)();
     const chainName = (0, react_2.useMemo)(() => (0, simplehash_1.simpleHashChainToChainName)(chainId), [chainId]);
     const { nativeTokens, fungibleTokens } = (0, react_1.useTokenBalancesByChain)({
         address: wallet?.address || "",
         chainsIds: [chainId],
-        enabled: !!wallet?.address && !!chainName
+        enabled: !!wallet?.address && !!chainName,
     });
     const { formattedBalance, hasEnoughBalance } = (0, react_2.useMemo)(() => {
         // Get balance for the selected token
@@ -40,7 +40,7 @@ function OrderToken({ context, address, chainId, setChainId, token, setToken, re
         const formattedBalance = balance ? (0, number_1.formatTokenAmount)(balance, token.decimals, 6, false) : null;
         return {
             formattedBalance,
-            hasEnoughBalance
+            hasEnoughBalance,
         };
     }, [chainId, fungibleTokens, nativeTokens, requiredAmount, token, wallet?.address]);
     return ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], restrictedToken: undefined, setToken: token => {
@@ -51,7 +51,7 @@ function OrderToken({ context, address, chainId, setChainId, token, setToken, re
                 decimals: token.decimals,
                 metadata: { logoURI: token.logoURI },
                 name: token.name,
-                symbol: token.symbol
+                symbol: token.symbol,
             });
         }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", role: "combobox", className: (0, utils_1.cn)("bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary font-semibold", children: [token.symbol, " on ", anyspend_1.ALL_CHAINS[chainId].name] }), formattedBalance && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 text-xs", children: [formattedBalance || "--", " ", token.symbol] }), hasEnoughBalance && (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { className: "text-as-brand -mt-0.5 h-4 w-4" })] }))] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, undefined));
 }

package/dist/cjs/anyspend/react/components/common/OrderTokenAmount.d.ts

@@ -1,5 +1,5 @@
 import { Token } from "../../../../anyspend";
-export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName }: {
+export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName, }: {
     disabled?: boolean;
     inputValue: string;
     onChangeInput: (value: string) => void;

package/dist/cjs/anyspend/react/components/common/OrderTokenAmount.js

@@ -11,7 +11,7 @@ const react_2 = require("../../../../global-account/react");
 const utils_1 = require("../../../../shared/utils");
 const relay_kit_ui_1 = require("@reservoir0x/relay-kit-ui");
 const ChainTokenIcon_1 = require("./ChainTokenIcon");
-function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName }) {
+function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName, }) {
     // Track previous token to detect changes
     const prevTokenRef = (0, react_1.useRef)(token.address);
     (0, react_1.useEffect)(() => {
@@ -39,7 +39,7 @@ function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, addres
             decimals: newToken.decimals,
             metadata: { logoURI: newToken.logoURI },
             name: newToken.name,
-            symbol: newToken.symbol
+            symbol: newToken.symbol,
         });
         // If this is the source token, reset the amount immediately
         if (context === "from") {

package/dist/cjs/anyspend/react/components/common/PanelOnramp.d.ts

@@ -1,4 +1,4 @@
-export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp }: {
+export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, }: {
     srcAmountOnRamp: string;
     setSrcAmountOnRamp: (amount: string) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/common/PanelOnramp.js

@@ -2,17 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelOnramp = PanelOnramp;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const anyspend_1 = require("../../../../anyspend");
-const react_1 = require("../../../../global-account/react");
+const react_1 = require("../../../../anyspend/react");
+const react_2 = require("../../../../global-account/react");
 const framer_motion_1 = require("framer-motion");
-const react_2 = require("react");
+const react_3 = require("react");
 const sonner_1 = require("sonner");
 const PaymentOptions_1 = require("./PaymentOptions");
-function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp }) {
+function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, }) {
     // Get geo data for onramp availability
-    const { geoData } = (0, react_1.useGetGeo)();
-    const { coinbaseOnrampOptions } = (0, anyspend_1.useCoinbaseOnrampOptions)(true, geoData?.country || "US");
-    const amountInputRef = (0, react_2.useRef)(null);
+    const { geoData } = (0, react_2.useGetGeo)();
+    const { coinbaseOnrampOptions } = (0, react_1.useCoinbaseOnrampOptions)(true, geoData?.country || "US");
+    const amountInputRef = (0, react_3.useRef)(null);
     const handleAmountChange = (e) => {
         // Only allow numbers and decimal points
         const value = e.target.value.replace(/[^0-9.]/g, "");
@@ -33,9 +33,9 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp }) {
                         (coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max
                             ? parseFloat(coinbaseOnrampOptions.paymentCurrencies[0].limits.find(l => l.id === "ACH_BANK_ACCOUNT")?.max || "25000")
                             : 25000) ? ((0, jsx_runtime_1.jsxs)("p", { className: "label-style -mb-3 mt-3 text-xs text-red-400 dark:bg-transparent", children: ["Maximum amount is $", coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max ||
-                                "25,000"] })) : ((0, jsx_runtime_1.jsx)("p", { className: "label-style text-b3-react-foreground/60 -mb-3 mt-3 text-xs dark:bg-transparent", children: "Buy amount in USD" })), (0, jsx_runtime_1.jsxs)("div", { className: "relative inline-flex items-center dark:bg-transparent", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-foreground/60 -ms-3 -mt-2 text-2xl font-semibold dark:bg-transparent", children: "$" }), (0, jsx_runtime_1.jsx)(react_1.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "0.00", className: "placeholder:text-b3-react-foreground/60 h-auto min-w-[70px] border-0 bg-transparent py-6 text-center text-4xl font-semibold focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent", style: {
+                                "25,000"] })) : ((0, jsx_runtime_1.jsx)("p", { className: "label-style text-b3-react-foreground/60 -mb-3 mt-3 text-xs dark:bg-transparent", children: "Buy amount in USD" })), (0, jsx_runtime_1.jsxs)("div", { className: "relative inline-flex items-center dark:bg-transparent", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-foreground/60 -ms-3 -mt-2 text-2xl font-semibold dark:bg-transparent", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "0.00", className: "placeholder:text-b3-react-foreground/60 h-auto min-w-[70px] border-0 bg-transparent py-6 text-center text-4xl font-semibold focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent", style: {
                                     width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
-                                    minWidth: srcAmountOnRamp ? `auto` : "105px"
+                                    minWidth: srcAmountOnRamp ? `auto` : "105px",
                                 } }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { animate: { opacity: !srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0 ? 1 : 0 }, exit: { opacity: 0 }, transition: { duration: 0.5, ease: "easeInOut" }, className: "border-b3-react-foreground/10 absolute bottom-3 left-1 h-1 w-[90%] rounded-full border-t-2 border-dashed bg-transparent" }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-4 gap-4", children: ["5", "10", "25", "100"].map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleQuickAmount(value), className: `rounded-lg border px-4 py-3 ${srcAmountOnRamp === value
                         ? "border-as-brand bg-as-brand/30"
                         : "border-as-stroke hover:border-as-brand hover:bg-as-brand/30"} transition-all duration-200`, children: ["$", value] }, value))) })] }));

package/dist/cjs/anyspend/react/components/common/PanelOnrampPayment.d.ts

@@ -25,5 +25,5 @@ interface PanelOnrampPaymentProps {
     recipientEnsName?: string;
     recipientImageUrl?: string;
 }
-export declare function PanelOnrampPayment({ srcAmountOnRamp, recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl }: PanelOnrampPaymentProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelOnrampPayment({ srcAmountOnRamp, recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, }: PanelOnrampPaymentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/anyspend/react/components/common/PanelOnrampPayment.js

@@ -6,28 +6,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelOnrampPayment = PanelOnrampPayment;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
-const react_1 = require("../../../../global-account/react");
+const react_1 = require("../../../../anyspend/react");
+const react_2 = require("../../../../global-account/react");
 const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
 const framer_motion_1 = require("framer-motion");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
-const react_2 = require("react");
+const react_3 = require("react");
 const sonner_1 = require("sonner");
 function PanelOnrampPayment({ srcAmountOnRamp, 
 // recipientName,
-recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl }) {
+recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, }) {
     // Use a stable amount for geo onramp options to prevent unnecessary refetches
-    const [stableAmountForGeo, setStableAmountForGeo] = (0, react_2.useState)(srcAmountOnRamp);
-    const hasInitialized = (0, react_2.useRef)(false);
+    const [stableAmountForGeo, setStableAmountForGeo] = (0, react_3.useState)(srcAmountOnRamp);
+    const hasInitialized = (0, react_3.useRef)(false);
     // Only update the stable amount on first render or when explicitly needed
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         if (!hasInitialized.current && srcAmountOnRamp) {
             setStableAmountForGeo(srcAmountOnRamp);
             hasInitialized.current = true;
         }
     }, [srcAmountOnRamp]);
-    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, isStripeWeb2Supported, isLoading: isLoadingGeoOnramp } = (0, anyspend_1.useGeoOnrampOptions)(isMainnet, stableAmountForGeo);
-    const { createOrder, isCreatingOrder } = (0, anyspend_1.useAnyspendCreateOnrampOrder)({
+    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, isStripeWeb2Supported, isLoading: isLoadingGeoOnramp, } = (0, react_1.useGeoOnrampOptions)(isMainnet, stableAmountForGeo);
+    const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
         onSuccess: data => {
             const orderId = data.data.id;
             onOrderCreated(orderId);
@@ -35,7 +36,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
         onError: error => {
             console.error(error);
             sonner_1.toast.error("Failed to create order: " + error.message);
-        }
+        },
     });
     const handlePaymentMethodClick = async (vendor, paymentMethod) => {
         try {
@@ -69,7 +70,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
                     return {
                         ...selectedDstToken,
                         chainId: destinationTokenChainId || selectedDstChainId,
-                        address: destinationTokenAddress
+                        address: destinationTokenAddress,
                     };
                 }
                 return selectedDstToken;
@@ -86,13 +87,13 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
                     paymentMethod: paymentMethod || "",
                     country: geoData?.country || "US",
                     ipAddress: geoData?.ip,
-                    redirectUrl: window.location.origin === "https://basement.fun" ? "https://basement.fun/deposit" : window.location.origin
+                    redirectUrl: window.location.origin === "https://basement.fun" ? "https://basement.fun/deposit" : window.location.origin,
                 },
                 expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
                 creatorAddress: globalAddress,
                 nft,
                 tournament,
-                payload
+                payload,
             });
         }
         catch (err) {
@@ -103,7 +104,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
     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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: false, animate: {
                                     opacity: 1,
                                     y: 0,
-                                    filter: "blur(0px)"
+                                    filter: "blur(0px)",
                                 }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground/60", children: orderType === anyspend_1.OrderType.Swap
                                             ? "Recipient"
                                             : orderType === anyspend_1.OrderType.MintNFT
@@ -120,5 +121,5 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
                                 (() => {
                                     const method = coinbaseAvailablePaymentMethods[0];
                                     return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handlePaymentMethodClick(anyspend_1.OnrampVendor.Coinbase, method.id), disabled: isCreatingOrder, className: "bg-b3-react-background border-b3-react-border hover:border-as-brand disabled:hover:border-b3-react-border group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "h-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Coinbase Pay" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-b3-react-foreground/60 text-sm", children: [method.id === "CARD" && "Debit card, bank account, or Coinbase Account", method.id === "FIAT_WALLET" && "Pay with your Coinbase account balance", method.id === "APPLE_PAY" && "Quick payment with Apple Pay", method.id === "ACH_BANK_ACCOUNT" && "Direct bank account transfer"] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-green-600", children: "Free" }) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] }));
-                                })(), isStripeWeb2Supported && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handlePaymentMethodClick(anyspend_1.OnrampVendor.StripeWeb2), className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Stripe" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground/60 text-sm", children: "Credit or debit card payment" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-orange-600", children: "Fee Applied" }) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "link", onClick: onBack, className: "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
+                                })(), isStripeWeb2Supported && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handlePaymentMethodClick(anyspend_1.OnrampVendor.StripeWeb2), className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Stripe" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground/60 text-sm", children: "Credit or debit card payment" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-orange-600", children: "Fee Applied" }) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onBack, className: "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
 }

package/dist/cjs/anyspend/react/components/common/PaymentMethodIcons.js

@@ -9,7 +9,7 @@ function PaymentMethodIcons() {
         { name: "Mastercard", src: constants_1.PAYMENT_METHOD_ICONS.mastercard },
         { name: "Amex", src: constants_1.PAYMENT_METHOD_ICONS.amex },
         { name: "Apple Pay", src: constants_1.PAYMENT_METHOD_ICONS.applePay },
-        { name: "Google Pay", src: constants_1.PAYMENT_METHOD_ICONS.googlePay }
+        { name: "Google Pay", src: constants_1.PAYMENT_METHOD_ICONS.googlePay },
     ];
     return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-6 flex w-full flex-col items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 text-xs", children: "Supported payment methods" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-3", children: paymentMethods.map(method => ((0, jsx_runtime_1.jsx)("img", { src: method.src, alt: method.name, className: "h-6 opacity-70" }, method.name))) })] }));
 }

package/dist/cjs/anyspend/react/components/common/PaymentOneClick.js

@@ -16,12 +16,12 @@ function PaymentOneClick({ order }) {
     const howItWorksSteps = [
         {
             number: 1,
-            description: `Click the link above to pay with ${paymentDescription}`
+            description: `Click the link above to pay with ${paymentDescription}`,
         },
         {
             number: 2,
-            description: `After payment, you'll be redirected back here, where we continue to execute the order.`
-        }
+            description: `After payment, you'll be redirected back here, where we continue to execute the order.`,
+        },
     ];
     return ((0, jsx_runtime_1.jsxs)("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: [(0, jsx_runtime_1.jsx)("a", { href: order.oneClickBuyUrl || "", target: "_blank", className: "w-4/5", children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", className: "relative w-full py-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative z-10 flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-medium text-white", children: ["Continue to ", vendorName] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-5 w-5 text-white/90" })] }) }) }), (0, jsx_runtime_1.jsx)(HowItWorks_1.default, { steps: howItWorksSteps })] }));
 }

package/dist/cjs/anyspend/react/components/common/PaymentStripeWeb2.js

@@ -6,19 +6,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = PaymentStripeWeb2;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
+const react_1 = require("../../../../anyspend/react");
 const constants_1 = require("../../../../anyspend/constants");
-const react_1 = require("../../../../global-account/react");
+const react_2 = require("../../../../global-account/react");
 const payment_utils_1 = require("../../../../shared/utils/payment.utils");
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
 const stripe_js_1 = require("@stripe/stripe-js");
 const lucide_react_1 = require("lucide-react");
-const react_2 = require("react");
+const react_3 = require("react");
 const HowItWorks_1 = __importDefault(require("./HowItWorks"));
 const PaymentMethodIcons_1 = __importDefault(require("./PaymentMethodIcons"));
 const stripePromise = (0, stripe_js_1.loadStripe)(constants_1.STRIPE_CONFIG.publishableKey);
 function PaymentStripeWeb2({ isMainnet, order, onPaymentSuccess }) {
-    const { theme } = (0, react_1.useB3)();
-    const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = (0, anyspend_1.useStripeClientSecret)(isMainnet, order.stripePaymentIntentId);
+    const { theme } = (0, react_2.useB3)();
+    const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = (0, react_1.useStripeClientSecret)(isMainnet, order.stripePaymentIntentId);
     if (isLoadingStripeClientSecret) {
         return (0, jsx_runtime_1.jsx)(StripeLoadingState, {});
     }
@@ -27,7 +28,7 @@ function PaymentStripeWeb2({ isMainnet, order, onPaymentSuccess }) {
     }
     return ((0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: stripePromise, options: {
             clientSecret: clientSecret || undefined,
-            appearance: { theme: theme === "light" ? "stripe" : "night" }
+            appearance: { theme: theme === "light" ? "stripe" : "night" },
         }, children: (0, jsx_runtime_1.jsx)(StripePaymentForm, { order: order, clientSecret: clientSecret, onPaymentSuccess: onPaymentSuccess }) }));
 }
 function StripeLoadingState() {
@@ -36,21 +37,21 @@ function StripeLoadingState() {
 function StripeErrorState({ error }) {
     return ((0, jsx_runtime_1.jsx)("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-red text-sm font-medium", children: ["Error: ", error] })] }) }));
 }
-function StripePaymentForm({ order, clientSecret, onPaymentSuccess }) {
+function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
     const stripe = (0, react_stripe_js_1.useStripe)();
     const elements = (0, react_stripe_js_1.useElements)();
-    const [loading, setLoading] = (0, react_2.useState)(false);
-    const [message, setMessage] = (0, react_2.useState)(null);
-    const [amount, setAmount] = (0, react_2.useState)(null);
-    const [stripeReady, setStripeReady] = (0, react_2.useState)(false);
-    const [showHowItWorks, setShowHowItWorks] = (0, react_2.useState)(false);
-    (0, react_2.useEffect)(() => {
+    const [loading, setLoading] = (0, react_3.useState)(false);
+    const [message, setMessage] = (0, react_3.useState)(null);
+    const [amount, setAmount] = (0, react_3.useState)(null);
+    const [stripeReady, setStripeReady] = (0, react_3.useState)(false);
+    const [showHowItWorks, setShowHowItWorks] = (0, react_3.useState)(false);
+    (0, react_3.useEffect)(() => {
         if (stripe && elements) {
             setStripeReady(true);
             console.log("@@stripe-web2-payment:initialized:", JSON.stringify({ orderId: order.id }, null, 2));
         }
     }, [stripe, elements, order.id]);
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         const fetchPaymentIntent = async () => {
             if (!stripe || !clientSecret)
                 return;
@@ -79,7 +80,7 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess }) {
             console.log("@@stripe-web2-payment:confirming-payment:", JSON.stringify({ orderId: order.id }, null, 2));
             const { error, paymentIntent } = await stripe.confirmPayment({
                 elements,
-                redirect: "if_required"
+                redirect: "if_required",
             });
             if (error) {
                 console.error("@@stripe-web2-payment:error:", JSON.stringify(error, null, 2));
@@ -113,40 +114,40 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess }) {
         defaultValues: {
             billingDetails: {
                 name: "",
-                email: ""
-            }
+                email: "",
+            },
         },
         fields: {
-            billingDetails: "auto"
+            billingDetails: "auto",
         },
         wallets: {
             applePay: "auto",
-            googlePay: "auto"
-        }
+            googlePay: "auto",
+        },
     };
     const howItWorksSteps = [
         {
             number: 1,
-            description: "Enter your payment details securely using Stripe's encrypted form"
+            description: "Enter your payment details securely using Stripe's encrypted form",
         },
         {
             number: 2,
-            description: "Your payment is processed instantly and securely through our payment partner"
+            description: "Your payment is processed instantly and securely through our payment partner",
         },
         {
             number: 3,
-            description: "After payment confirmation, your order will be processed and completed automatically"
-        }
+            description: "After payment confirmation, your order will be processed and completed automatically",
+        },
     ];
     return ((0, jsx_runtime_1.jsxs)("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: [(0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "w-full space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-brand/20 flex h-8 w-8 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("svg", { className: "text-as-brand h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary text-sm font-medium", children: "Secured by Stripe" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 text-xs", children: "End-to-end encrypted payment" })] })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setShowHowItWorks(true), className: "text-as-primary/60 hover:text-as-primary flex items-center gap-1 text-xs transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "How it works" })] })] }), amount && ((0, jsx_runtime_1.jsxs)("div", { className: "border-as-stroke border-t pt-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 mb-3 text-sm", children: "Payment Breakdown" }), (() => {
                                         const originalAmount = Number(order.srcAmount) / 10 ** anyspend_1.USDC_BASE.decimals;
                                         const finalAmount = Number(amount);
                                         const calculatedFee = finalAmount - originalAmount;
                                         return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60", children: "Amount" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary", children: ["$", originalAmount.toFixed(2)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60", children: "Processing fee" }), (0, jsx_runtime_1.jsx)(Tooltip, { content: `Credit card companies charge a processing fee of 5.4% + $0.30 for all transactions.\n\nThis fee covers secure payment processing and fraud protection.`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "text-as-primary/40 hover:text-as-primary/60 h-3 w-3 transition-colors" }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary", children: ["$", calculatedFee.toFixed(2)] })] }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-stroke border-t pt-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Total Amount" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-2xl font-bold", children: ["$", finalAmount.toFixed(2), " USD"] })] }) })] }));
-                                    })()] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { options: stripeElementOptions })] }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm font-medium", children: message })] })), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Processing Payment..." })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Complete Payment" }), amount && (0, jsx_runtime_1.jsxs)("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-6 w-6" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsx)(PaymentMethodIcons_1.default, {}), (0, jsx_runtime_1.jsx)(HowItWorks_1.default, { steps: howItWorksSteps })] })] }) }))] }));
+                                    })()] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { options: stripeElementOptions })] }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm font-medium", children: message })] })), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Processing Payment..." })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Complete Payment" }), amount && (0, jsx_runtime_1.jsxs)("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-6 w-6" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsx)(PaymentMethodIcons_1.default, {}), (0, jsx_runtime_1.jsx)(HowItWorks_1.default, { steps: howItWorksSteps })] })] }) }))] }));
 }
 // Add tooltip component
 function Tooltip({ children, content }) {
-    const [isVisible, setIsVisible] = (0, react_2.useState)(false);
+    const [isVisible, setIsVisible] = (0, react_3.useState)(false);
     return ((0, jsx_runtime_1.jsxs)("div", { className: "relative inline-block", children: [(0, jsx_runtime_1.jsx)("div", { onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), className: "cursor-help", children: children }), isVisible && ((0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-full left-1/2 z-50 mb-2 w-80 -translate-x-1/2", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 border-as-stroke text-as-primary rounded-lg border p-3 text-sm shadow-lg", children: [(0, jsx_runtime_1.jsx)("div", { className: "whitespace-pre-line", children: content }), (0, jsx_runtime_1.jsx)("div", { className: "absolute left-1/2 top-full -translate-x-1/2", children: (0, jsx_runtime_1.jsx)("div", { className: "border-t-as-on-surface-1 border-l-4 border-r-4 border-t-4 border-transparent" }) })] }) }))] }));
 }

package/dist/cjs/anyspend/react/components/common/TokenBalance.d.ts

@@ -1,5 +1,5 @@
 import { Token } from "../../../../anyspend";
-export declare function TokenBalance({ token, walletAddress, onChangeInput }: {
+export declare function TokenBalance({ token, walletAddress, onChangeInput, }: {
     token: Token;
     walletAddress: string | undefined;
     onChangeInput: (value: string) => void;

package/dist/cjs/anyspend/react/components/common/TokenBalance.js

@@ -4,10 +4,10 @@ exports.TokenBalance = TokenBalance;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
 const viem_1 = require("viem");
-function TokenBalance({ token, walletAddress, onChangeInput }) {
+function TokenBalance({ token, walletAddress, onChangeInput, }) {
     const { rawBalance, formattedBalance, isLoading } = (0, react_1.useTokenBalance)({
         token,
-        address: walletAddress
+        address: walletAddress,
     });
     const handlePercentageClick = (percentage) => {
         if (!rawBalance)

package/dist/cjs/anyspend/react/components/common/Warning.d.ts

@@ -0,0 +1,3 @@
+export declare function Warning({ text }: {
+    text: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/common/Warning.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Warning = Warning;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Warning({ text }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-red/60 relative rounded border border-orange-400 px-4 py-3 text-white", role: "alert", children: (0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: text }) }));
+}

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

@@ -3,8 +3,10 @@ export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendNFT } from "./AnySpendNFT";
 export { AnySpendNFTButton } from "./AnySpendNFTButton";
+export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";
 export { AnySpendTournament } from "./AnySpendTournament";
+export { ChainTokenIcon } from "./common/ChainTokenIcon";
 export { OrderDetails } from "./common/OrderDetails";
 export { OrderHistory } from "./common/OrderHistory";
 export { OrderHistoryItem } from "./common/OrderHistoryItem";

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TokenBalance = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetails = exports.ChainTokenIcon = exports.AnySpendTournament = exports.AnySpendStakeB3 = exports.AnyspendSignatureMint = 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; } });
@@ -12,11 +12,15 @@ 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 AnyspendSignatureMint_1 = require("./AnyspendSignatureMint");
+Object.defineProperty(exports, "AnyspendSignatureMint", { enumerable: true, get: function () { return AnyspendSignatureMint_1.AnyspendSignatureMint; } });
 var AnySpendStakeB3_1 = require("./AnySpendStakeB3");
 Object.defineProperty(exports, "AnySpendStakeB3", { enumerable: true, get: function () { return AnySpendStakeB3_1.AnySpendStakeB3; } });
 var AnySpendTournament_1 = require("./AnySpendTournament");
 Object.defineProperty(exports, "AnySpendTournament", { enumerable: true, get: function () { return AnySpendTournament_1.AnySpendTournament; } });
 // Common Components
+var ChainTokenIcon_1 = require("./common/ChainTokenIcon");
+Object.defineProperty(exports, "ChainTokenIcon", { enumerable: true, get: function () { return ChainTokenIcon_1.ChainTokenIcon; } });
 var OrderDetails_1 = require("./common/OrderDetails");
 Object.defineProperty(exports, "OrderDetails", { enumerable: true, get: function () { return OrderDetails_1.OrderDetails; } });
 var OrderHistory_1 = require("./common/OrderHistory");

package/dist/cjs/anyspend/react/components/modals/EnterRecipientModal.d.ts

@@ -1,4 +1,4 @@
-export declare function EnterRecipientModal({ isOpenPasteRecipientAddress, setIsOpenPasteRecipientAddress, recipientAddress, setRecipientAddress }: {
+export declare function EnterRecipientModal({ isOpenPasteRecipientAddress, setIsOpenPasteRecipientAddress, recipientAddress, setRecipientAddress, }: {
     isOpenPasteRecipientAddress: boolean;
     setIsOpenPasteRecipientAddress: (isOpen: boolean) => void;
     recipientAddress: string | undefined;

package/dist/cjs/anyspend/react/components/modals/EnterRecipientModal.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnterRecipientModal = EnterRecipientModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("../../../../global-account/react");
-function EnterRecipientModal({ isOpenPasteRecipientAddress, setIsOpenPasteRecipientAddress, recipientAddress, setRecipientAddress }) {
-    const [modalRecipientAddress, setModalRecipientAddress] = (0, react_1.useState)(recipientAddress || "");
-    (0, react_1.useEffect)(() => {
+const react_1 = require("../../../../global-account/react");
+const react_2 = require("react");
+function EnterRecipientModal({ isOpenPasteRecipientAddress, setIsOpenPasteRecipientAddress, recipientAddress, setRecipientAddress, }) {
+    const [modalRecipientAddress, setModalRecipientAddress] = (0, react_2.useState)(recipientAddress || "");
+    (0, react_2.useEffect)(() => {
         setModalRecipientAddress(recipientAddress || "");
     }, [recipientAddress]);
-    return ((0, jsx_runtime_1.jsx)(react_2.Dialog, { open: isOpenPasteRecipientAddress, onOpenChange: setIsOpenPasteRecipientAddress, children: (0, jsx_runtime_1.jsx)(react_2.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_2.Input, { value: modalRecipientAddress, onChange: e => setModalRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Dialog, { open: isOpenPasteRecipientAddress, onOpenChange: setIsOpenPasteRecipientAddress, children: (0, jsx_runtime_1.jsx)(react_1.DialogContent, { className: "w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: "To address" }), (0, jsx_runtime_1.jsx)(react_1.Input, { value: modalRecipientAddress, onChange: e => setModalRecipientAddress(e.target.value), placeholder: "Enter address", className: "h-12 rounded-lg", spellCheck: false }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full rounded-lg", onClick: () => {
                             setIsOpenPasteRecipientAddress(false);
                             setRecipientAddress(modalRecipientAddress);
                         }, children: "Save" })] }) }) }));

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

@@ -16,7 +16,6 @@ function WebviewOnrampOrderStatus({ order }) {
     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;

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

@@ -8,5 +8,5 @@ interface WebviewOnrampPaymentProps {
     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 declare function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId, }: WebviewOnrampPaymentProps): import("react/jsx-runtime").JSX.Element;
 export {};