@b3dotfun/sdk 0.0.7-alpha.2 → 0.0.7-alpha.21

package/dist/esm/anyspend/react/components/AnyspendSignatureMint.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { OrderType } from "../../../anyspend/index.js";
+import { StyleRoot, useHasMounted, useTokenData } from "../../../global-account/react/index.js";
+import invariant from "../../../shared/utils/debug.js";
+import { useMemo } from "react";
+import { encodeFunctionData, parseEther } from "viem";
+import { ABI_SIGNATURE_MINTING } from "../../abis/signature-minting.js";
+import { AnySpendCustom } from "./AnySpendCustom.js";
+// Helper function to determine if URL is a video
+function isVideoURL(url) {
+    const videoExtensions = [".mp4", ".webm", ".ogg"];
+    return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
+}
+function generateEncodedDataForSignatureMint(signatureData) {
+    const { signature, payload } = signatureData;
+    invariant(signature, "Signature is required");
+    invariant(payload, "Payload is required");
+    const mintRequest = {
+        to: payload.to,
+        royaltyRecipient: payload.royaltyRecipient,
+        royaltyBps: BigInt(payload.royaltyBps || 0),
+        primarySaleRecipient: payload.primarySaleRecipient,
+        tokenId: BigInt(payload.tokenId || 0),
+        uri: payload.uri,
+        quantity: BigInt(payload.quantity || 1),
+        pricePerToken: parseEther(payload.price?.toString() || "0"),
+        currency: payload.currencyAddress,
+        validityStartTimestamp: BigInt(payload.mintStartTime || 0),
+        validityEndTimestamp: BigInt(payload.mintEndTime || 0),
+        uid: payload.uid,
+    };
+    const encodedData = encodeFunctionData({
+        abi: [ABI_SIGNATURE_MINTING[0]],
+        functionName: "mintWithSignature",
+        args: [mintRequest, signature],
+    });
+    return encodedData;
+}
+export function AnyspendSignatureMint({ loadOrder, mode = "modal", signatureData, imageUrl, onSuccess, }) {
+    const hasMounted = useHasMounted();
+    // Get token data
+    const { data: tokenData, isError: isTokenError } = useTokenData(signatureData.collection.chainId, signatureData.collection.signatureRequestBody?.currency);
+    // Convert token data to AnySpend Token type
+    const dstToken = useMemo(() => {
+        if (!tokenData)
+            return null;
+        return {
+            address: tokenData.address,
+            chainId: signatureData.collection.chainId,
+            name: tokenData.name,
+            symbol: tokenData.symbol,
+            decimals: tokenData.decimals,
+            metadata: {
+                logoURI: tokenData.logoURI,
+            },
+        };
+    }, [tokenData, signatureData.collection.chainId]);
+    const mediaUrl = imageUrl || signatureData.payload.metadata.image || "https://cdn.b3.fun/nft-placeholder.png";
+    const isVideo = isVideoURL(mediaUrl);
+    const header = () => (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative mx-auto size-32", children: isVideo ? (_jsxs("video", { autoPlay: true, loop: true, muted: true, playsInline: true, className: "size-full rounded-lg object-cover", children: [_jsx("source", { src: mediaUrl, type: `video/${mediaUrl.split(".").pop()}` }), "Your browser does not support the video tag."] })) : (_jsx("img", { alt: "nft preview", className: "size-full rounded-lg object-cover", src: mediaUrl })) }), _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-60px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[60px] w-full" }), _jsx("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: _jsxs("span", { className: "font-sf-rounded text-2xl font-semibold", children: [signatureData.payload.metadata.name || "Mint NFT", " ", Number(signatureData.payload.quantity) > 1 ? `(${signatureData.payload.quantity}x)` : ""] }) })] })] }));
+    // If we don't have token data, show error state
+    if (!dstToken || isTokenError) {
+        return (_jsx(StyleRoot, { children: _jsx("div", { className: "b3-root b3-modal bg-b3-react-background flex w-full flex-col items-center p-8", children: _jsxs("p", { className: "text-as-red text-center text-sm", children: ["Failed to fetch payment token information for ", signatureData.collection.signatureRequestBody?.currency, " on chain ", signatureData.collection.chainId, ". Please try again."] }) }) }));
+    }
+    const encodedData = generateEncodedDataForSignatureMint(signatureData);
+    const price = parseEther(signatureData.payload.price?.toString() || "0");
+    return (_jsx(AnySpendCustom, { isMainnet: true, loadOrder: loadOrder, mode: mode, recipientAddress: signatureData.payload.to, orderType: OrderType.Custom, dstChainId: signatureData.collection.chainId, dstToken: dstToken, dstAmount: price.toString(), contractAddress: signatureData.collection.address, encodedData: encodedData, metadata: {
+            type: OrderType.Custom,
+            action: "Signature Mint",
+        }, header: header, onSuccess: onSuccess, showRecipient: true }));
+}

package/dist/esm/anyspend/react/components/common/ChainTokenIcon.d.ts

@@ -1,4 +1,4 @@
-export declare function ChainTokenIcon({ chainUrl, tokenUrl, className }: {
+export declare function ChainTokenIcon({ chainUrl, tokenUrl, className, }: {
     chainUrl: string;
     tokenUrl: string;
     className?: string;

package/dist/esm/anyspend/react/components/common/ChainTokenIcon.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ChainTokenIcon({ chainUrl, tokenUrl, className = "" }) {
+export function ChainTokenIcon({ chainUrl, tokenUrl, className = "", }) {
     return (_jsxs("div", { className: `relative ${className}`, children: [_jsx("img", { src: tokenUrl, alt: "Token", className: "h-full w-full rounded-full" }), _jsx("div", { className: "bg-as-on-surface-1 border-as-stroke absolute bottom-0 right-0 h-[45%] w-[45%] rounded border", children: _jsx("img", { src: chainUrl, alt: "Chain", className: "h-full w-full rounded" }) })] }));
 }

package/dist/esm/anyspend/react/components/common/OrderDetails.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ALL_CHAINS, capitalizeFirstLetter, EVM_CHAINS, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, OrderStatus, OrderType, RELAY_ETH_ADDRESS, zNft, zToken, zTournament } from "../../../../anyspend/index.js";
-import { CopyToClipboard, Badge, ShinyButton, Skeleton, TextLoop, TextShimmer, Button, useAccountWallet, useChainSwitchWithAction, useOnchainName, useModalStore } from "../../../../global-account/react/index.js";
+import { ALL_CHAINS, capitalizeFirstLetter, EVM_CHAINS, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, OnrampVendor, OrderStatus, OrderType, RELAY_ETH_ADDRESS, zNft, zToken, zTournament, } from "../../../../anyspend/index.js";
+import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useChainSwitchWithAction, useModalStore, useOnchainName, } from "../../../../global-account/react/index.js";
+import { useRouter, useSearchParams } from "../../../../shared/react/hooks/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { useColorMode } from "@chakra-ui/react";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust, WalletWalletConnect } from "@web3icons/react";
 import { motion } from "framer-motion";
-import { CheckIcon, ChevronDown, ChevronRight, Copy, ExternalLink, Home, Loader2, RefreshCcw, SquareArrowOutUpRight } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { CheckIcon, ChevronDown, ChevronRight, Copy, ExternalLink, Home, Loader2, RefreshCcw, SquareArrowOutUpRight, } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import TimeAgo from "react-timeago";
@@ -19,7 +19,7 @@ import { b3 } from "viem/chains";
 import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
 import PaymentVendorUI from "./PaymentVendorUI.js";
 // Add this helper function near the top or just above the component
-function getOrderSuccessText({ order, tournament, formattedActualDstAmount, dstToken, recipientName, centerTruncate }) {
+function getOrderSuccessText({ order, tournament, formattedActualDstAmount, dstToken, recipientName, centerTruncate, }) {
     const recipient = recipientName || centerTruncate(order.recipientAddress, 8);
     let actionText = "";
     switch (order.type) {
@@ -114,7 +114,7 @@ function roundTokenAmount(amount) {
     const roundedDecimalPart = digits.join("");
     return `${wholePart}.${roundedDecimalPart}`;
 }
-export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, onBack }) {
+export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, onBack, }) {
     const router = useRouter();
     const searchParams = useSearchParams();
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
@@ -194,7 +194,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                 account: signer,
                 chain: EVM_CHAINS[order.srcChain].viem,
                 to: order.globalAddress,
-                value: BigInt(order.srcAmount)
+                value: BigInt(order.srcAmount),
             });
             setTxHash(hash);
         }
@@ -205,7 +205,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                 address: order.srcTokenAddress,
                 abi: erc20Abi,
                 functionName: "transfer",
-                args: [order.globalAddress, BigInt(order.srcAmount)]
+                args: [order.globalAddress, BigInt(order.srcAmount)],
             });
             setTxHash(hash);
         }
@@ -217,10 +217,29 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
     };
     // When waitingForDeposit is true, we show a message to the user to wait for the deposit to be processed.
     const setWaitingForDeposit = useCallback(() => {
-        const params = new URLSearchParams(searchParams);
+        const params = new URLSearchParams(searchParams.toString());
         params.set("waitingForDeposit", "true");
         router.push(`?${params}`);
     }, [router, searchParams]);
+    // Clean up URL parameters before closing modal or navigating back
+    const cleanupUrlParams = useCallback(() => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete("waitingForDeposit");
+        params.delete("orderId");
+        // Only update URL if params were actually removed
+        if (params.toString() !== searchParams.toString()) {
+            router.push(`?${params}`);
+        }
+    }, [router, searchParams]);
+    // Helper functions that clean up URL params before executing actions
+    const handleCloseModal = useCallback(() => {
+        cleanupUrlParams();
+        setB3ModalOpen(false);
+    }, [cleanupUrlParams, setB3ModalOpen]);
+    const handleBack = useCallback(() => {
+        cleanupUrlParams();
+        onBack?.();
+    }, [cleanupUrlParams, onBack]);
     useEffect(() => {
         if (txSuccess) {
             toast.success("Transaction successful! We are processing your order.", { duration: 10000 });
@@ -268,14 +287,18 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
     };
     if (refundTxs) {
         return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative mt-4 flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
-                            ? depositTxs.map(dTx => (_jsx(TransactionDetails, { title: `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
+                            ? depositTxs.map(dTx => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                                    ? `Received payment`
+                                    : `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
                             : null, refundTxs
                             ? refundTxs.map(rTx => (_jsx(TransactionDetails, { title: `Refunded ${formatTokenAmount(BigInt(rTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: rTx, isProcessing: false }, rTx.txHash)))
-                            : null] }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? onBack : () => setB3ModalOpen(false), children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
+                            : null] }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
     }
     if (executeTx) {
         return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative mt-4 flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
-                            ? depositTxs.map(dTxs => (_jsx(TransactionDetails, { title: `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
+                            ? depositTxs.map(dTxs => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                                    ? `Received payment`
+                                    : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
                             : null, _jsx(TransactionDetails, { title: "Processed Transaction", chainId: order.srcChain, tx: relayTx, delay: 0.5, isProcessing: false }), _jsx(TransactionDetails, { title: order.type === OrderType.Swap
                                 ? "Processed Swap"
                                 : order.type === OrderType.MintNFT
@@ -290,12 +313,14 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                     formattedActualDstAmount: formattedActualDstAmount,
                                     dstToken,
                                     recipientName,
-                                    centerTruncate
-                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === OrderType.JoinTournament && order.status === OrderStatus.Executed && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: () => setB3ModalOpen(false), children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === OrderStatus.Executed && (_jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? onBack : () => setB3ModalOpen(false), children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                    centerTruncate,
+                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === OrderType.JoinTournament && order.status === OrderStatus.Executed && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === OrderStatus.Executed && (_jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     if (relayTx && relayTx.status === "success") {
         return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative mt-4 flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
-                            ? depositTxs.map(dTxs => (_jsx(TransactionDetails, { title: `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
+                            ? depositTxs.map(dTxs => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                                    ? `Received payment`
+                                    : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
                             : null, order.srcChain === order.dstChain ? (_jsx(TransactionDetails, { title: order.type === OrderType.Swap
                                 ? "Processed Swap"
                                 : order.type === OrderType.MintNFT
@@ -318,13 +343,15 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                     formattedActualDstAmount,
                                     dstToken,
                                     recipientName,
-                                    centerTruncate
-                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === OrderType.JoinTournament && order.status === OrderStatus.Executed && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: () => setB3ModalOpen(false), children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === OrderStatus.Executed && (_jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? onBack : () => setB3ModalOpen(false), children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                    centerTruncate,
+                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === OrderType.JoinTournament && order.status === OrderStatus.Executed && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === OrderStatus.Executed && (_jsx("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
     const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
     if (depositTxs?.length || waitingForDeposit) {
-        return (_jsx(_Fragment, { children: _jsxs("div", { className: "relative mt-4 flex w-full flex-col gap-6", children: [_jsx("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1, ease: "easeInOut" } }) }), (depositTxs || []).map((dTxs, index) => (_jsx(TransactionDetails, { title: `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount }, dTxs.txHash))), statusDisplay === "failure" ? (_jsx(TransactionDetails, { title: statusText, chainId: order.srcChain, tx: null, isProcessing: false, delay: 0.5 })) : depositEnoughAmount ? (_jsx(TransactionDetails, { title: order.type === OrderType.Swap
+        return (_jsx(_Fragment, { children: _jsxs("div", { className: "relative mt-4 flex w-full flex-col gap-6", children: [_jsx("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1, ease: "easeInOut" } }) }), (depositTxs || []).map((dTxs, index) => (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                            ? `Received payment`
+                            : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount }, dTxs.txHash))), statusDisplay === "failure" ? (_jsx(TransactionDetails, { title: statusText, chainId: order.srcChain, tx: null, isProcessing: false, delay: 0.5 })) : depositEnoughAmount ? (_jsx(TransactionDetails, { title: order.type === OrderType.Swap
                             ? "Processing Swap"
                             : order.type === OrderType.MintNFT
                                 ? "Minting NFT"
@@ -332,13 +359,15 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                     ? "Joining Tournament"
                                     : order.type === OrderType.FundTournament
                                         ? "Funding Tournament"
-                                        : "Processing Transaction", chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 })) : (_jsx(TransactionDetails, { title: `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) }));
+                                        : "Processing Transaction", chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 })) : (_jsx(TransactionDetails, { title: order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                            ? `Waiting for payment`
+                            : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) }));
     }
     return (_jsxs(_Fragment, { children: [statusDisplay === "failure" && (_jsx("div", { className: "flex w-full flex-col items-center gap-3 whitespace-nowrap pb-2 text-sm", children: _jsx("div", { className: "bg-as-light-brand/20 flex w-full flex-col gap-4 rounded-lg p-8", children: _jsx("div", { className: "text-as-primary", style: { whiteSpace: "normal" }, children: "This order is no longer valid because the order expired." }) }) })), statusDisplay === "processing" && (_jsxs(_Fragment, { children: [order.onrampMetadata ? (_jsx(PaymentVendorUI, { isMainnet: isMainnet, order: order, dstTokenSymbol: dstToken.symbol })) : (_jsxs("div", { className: "relative flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-as-primary/50", children: "Please send" }), _jsxs("div", { className: "flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [_jsx(CopyToClipboard, { text: roundedUpSrcAmount, onCopy: () => {
                                                     toast.success("Copied to clipboard");
                                                 }, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("strong", { className: "border-as-brand text-as-primary border-b-2 pb-1 text-2xl font-semibold sm:text-xl", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), _jsxs(Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", getChainName(order.srcChain), _jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none") })] })] }), _jsx("span", { className: "text-as-primary/50 mb-1 mt-2", children: " to the address:" })] }), _jsx(CopyToClipboard, { text: order.globalAddress, onCopy: () => {
                                     toast.success("Copied to clipboard");
-                                }, children: _jsxs("div", { className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex cursor-pointer items-center justify-between gap-4 rounded-lg border p-3 px-4 shadow-md transition-all duration-200", children: [_jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm", children: order.globalAddress }), _jsx(Copy, { className: "group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), account?.address && !showQRCode ? (_jsxs("div", { className: "mb-4 mt-8 flex w-full flex-col items-center gap-4", children: [_jsxs("div", { className: "relative flex w-full flex-col items-center gap-2", children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: handlePayment, children: txLoading ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsxs("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to: ", centerTruncate(account?.address || "", 6)] })] }), _jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [_jsxs(ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [_jsx("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), _jsx("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] })) : (_jsxs(motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: [_jsxs("div", { className: "mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress), size: 200 }), _jsxs("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletWalletConnect, { className: "h-5 w-5", variant: "branded" })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [account && (_jsxs(Button, { variant: "ghost", className: "text-as-primary w-full", onClick: handlePayment, children: ["Send Transaction ", _jsx(ChevronRight, { className: "ml-2 h-4 w-4" })] })), EVM_CHAINS[order.srcChain] ? (_jsxs(Button, { variant: "outline", className: "w-full", onClick: handlePayment, children: ["Open Metamask", _jsx(WalletMetamask, { className: "ml-2 h-5 w-5", variant: "branded" })] })) : null, _jsx("a", { href: handleCoinbaseRedirect(), children: _jsxs(Button, { variant: "outline", className: "w-full", children: ["Open Coinbase", _jsx(WalletCoinbase, { className: "ml-2 h-5 w-5", variant: "branded" })] }) }), _jsx("a", { href: handlePhantomRedirect(), children: _jsxs(Button, { variant: "outline", className: "w-full", children: ["Open Phantom", _jsx(WalletPhantom, { className: "ml-2 h-5 w-5", variant: "branded" })] }) })] })] }))] })), _jsxs("div", { className: "bg-as-light-brand/30 w-full rounded-lg p-4 sm:p-2 sm:px-4", children: [_jsx("p", { className: "text-as-secondary mb-3 text-sm", children: "Continue on another device?" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(CopyToClipboard, { text: permalink, onCopy: () => {
+                                }, children: _jsxs("div", { className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex cursor-pointer items-center justify-between gap-4 rounded-lg border p-3 px-4 shadow-md transition-all duration-200", children: [_jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm", children: order.globalAddress }), _jsx(Copy, { className: "group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), account?.address && !showQRCode ? (_jsxs("div", { className: "mb-4 mt-8 flex w-full flex-col items-center gap-4", children: [_jsxs("div", { className: "relative flex w-full flex-col items-center gap-2", children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: handlePayment, children: txLoading ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsxs("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to: ", centerTruncate(account?.address || "", 6)] })] }), _jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [_jsxs(ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [_jsx("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), _jsx("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] })) : (_jsxs(motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: [_jsxs("div", { className: "mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress), className: "max-w-[200px]" }), _jsxs("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletWalletConnect, { className: "h-5 w-5", variant: "branded" })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [account && (_jsxs(Button, { variant: "ghost", className: "text-as-primary w-full", onClick: handlePayment, children: ["Send Transaction ", _jsx(ChevronRight, { className: "ml-2 h-4 w-4" })] })), EVM_CHAINS[order.srcChain] ? (_jsxs(Button, { variant: "outline", className: "w-full", onClick: handlePayment, children: ["Open Metamask", _jsx(WalletMetamask, { className: "ml-2 h-5 w-5", variant: "branded" })] })) : null, _jsx("a", { href: handleCoinbaseRedirect(), children: _jsxs(Button, { variant: "outline", className: "w-full", children: ["Open Coinbase", _jsx(WalletCoinbase, { className: "ml-2 h-5 w-5", variant: "branded" })] }) }), _jsx("a", { href: handlePhantomRedirect(), children: _jsxs(Button, { variant: "outline", className: "w-full", children: ["Open Phantom", _jsx(WalletPhantom, { className: "ml-2 h-5 w-5", variant: "branded" })] }) })] })] }))] })), _jsxs("div", { className: "bg-as-light-brand/30 w-full rounded-lg p-4 sm:p-2 sm:px-4", children: [_jsx("p", { className: "text-as-secondary mb-3 text-sm", children: "Continue on another device?" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(CopyToClipboard, { text: permalink, onCopy: () => {
                                             toast.success("Copied to clipboard");
                                         }, children: _jsxs(Button, { variant: "outline", className: "w-full", children: ["Copy Link", _jsx(Copy, { className: "ml-2 h-3 w-3" })] }) }), _jsxs(Button, { variant: "outline", className: "w-full", onClick: () => {
                                             if (navigator.share) {
@@ -346,7 +375,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                                     .share({
                                                     title: "Complete Deposit",
                                                     text: "Complete your deposit on BSMNT.fun",
-                                                    url: permalink
+                                                    url: permalink,
                                                 })
                                                     .catch(error => console.log("Error sharing:", error));
                                             }
@@ -365,11 +394,11 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                                         : "Contract execution"
                                                     : "" }), _jsxs("div", { className: "flex items-end gap-2", children: [order.type === OrderType.Swap ? (`~${formattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === OrderType.MintNFT ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "h-5 w-5" }), _jsx("div", { children: nft?.name || "NFT" })] })) : order.type === OrderType.JoinTournament || order.type === OrderType.FundTournament ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "h-5 w-5" }), _jsx("div", { children: tournament?.name || "Tournament" })] })) : null, _jsxs("div", { className: "text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex w-full justify-between gap-4", children: [_jsx("div", { className: "text-as-primary/30", children: "Order ID" }), _jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: order.id })] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex w-full justify-between gap-4", children: [_jsx("div", { className: "text-as-primary/30", children: "Recipient" }), _jsxs("div", { className: "flex flex-col items-end gap-1", children: [recipientName && _jsx("div", { className: "text-as-primary font-semibold", children: recipientName }), _jsx(CopyToClipboard, { text: order.recipientAddress, onCopy: () => {
                                                 toast.success("Copied recipient address to clipboard");
-                                            }, children: _jsxs("div", { className: "text-as-primary flex items-center gap-2", children: [centerTruncate(order.recipientAddress, 10), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" })] }) })] })] })] }) })) : (_jsxs("div", { className: "flex w-full items-center", children: [_jsx("div", { className: "divider w-full" }), _jsx("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "divider w-full" })] })), _jsxs("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: onBack, children: ["Cancel and start over ", _jsx(RefreshCcw, { className: "ml-2 h-4 w-4" })] })] }));
+                                            }, children: _jsxs("div", { className: "text-as-primary flex items-center gap-2", children: [centerTruncate(order.recipientAddress, 10), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" })] }) })] })] })] }) })) : (_jsxs("div", { className: "flex w-full items-center", children: [_jsx("div", { className: "divider w-full" }), _jsx("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "divider w-full" })] })), _jsxs("button", { className: "bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2", onClick: handleBack, children: ["Cancel and start over ", _jsx(RefreshCcw, { className: "ml-2 h-4 w-4" })] })] }));
 });
-function TransactionDetails({ title, chainId, tx, isProcessing, delay }) {
+function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return (_jsxs("div", { className: "relative flex w-full flex-1 items-center justify-between gap-4", children: [_jsxs("div", { className: "flex grow items-center gap-4", children: [_jsx(motion.div, { className: "bg-b3-react-background relative h-10 w-10 rounded-full", children: isProcessing ? (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full bg-black/70 shadow-lg backdrop-blur-sm", children: _jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-brand/70 absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg shadow-purple-500/30 backdrop-blur-sm", style: {
-                                boxShadow: "0 0 15px 5px rgba(138, 43, 226, 0.2)"
+                                boxShadow: "0 0 15px 5px rgba(138, 43, 226, 0.2)",
                             }, children: _jsx(CheckIcon, { className: "text-as-primary h-3 w-3" }) })) }), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? (_jsx(TextShimmer, { duration: 1, children: title })) : (_jsx("span", { className: "text-as-primary", children: title })) })] }), _jsx("div", { className: "flex flex-col gap-1", children: tx ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: _jsx("a", { href: getExplorerTxUrl(chainId, tx.txHash), target: "_blank", children: _jsx("div", { className: "text-as-primary/30 font-mono text-xs", children: centerTruncate(tx?.txHash, 6) }) }) })) : null })] }));
 }
 export const OrderDetailsLoadingView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: [_jsxs(Badge, { variant: "default", className: "hover:bg-b3-react-background flex items-center gap-3 border-white/20 bg-white/10 px-4 py-1 text-base transition-colors", children: [_jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }), _jsx(TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), _jsxs("div", { className: "flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "ml-4 h-8 w-32" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-24" })] }), _jsx(Skeleton, { className: "mb-4 h-12 w-full" }), _jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [_jsxs(Skeleton, { className: "rounded-lg p-6 pb-3", children: [_jsx("div", { className: "h-[200px] w-[200px]" }), _jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: _jsx("div", { className: "h-5 w-5 rounded-full" }) })] }), _jsx("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })] })] }), _jsxs("div", { className: "bg-b3-react-background mt-8 w-full rounded-lg p-4", children: [_jsx(Skeleton, { className: "mb-3 h-4 w-48" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-10 flex-1" }), _jsx(Skeleton, { className: "h-10 flex-1" })] })] }), _jsx(Skeleton, { className: "h-10 w-full" })] }));

package/dist/esm/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/esm/anyspend/react/components/common/OrderToken.js

@@ -9,13 +9,13 @@ import { TokenSelector } from "@reservoir0x/relay-kit-ui";
 import { CheckCircle2, ChevronsUpDown } from "lucide-react";
 import { useMemo } from "react";
 import { ChainTokenIcon } from "./ChainTokenIcon.js";
-export function OrderToken({ context, address, chainId, setChainId, token, setToken, requiredAmount, tokenSelectClassName }) {
+export function OrderToken({ context, address, chainId, setChainId, token, setToken, requiredAmount, tokenSelectClassName, }) {
     const { wallet } = useAccountWallet();
     const chainName = useMemo(() => simpleHashChainToChainName(chainId), [chainId]);
     const { nativeTokens, fungibleTokens } = useTokenBalancesByChain({
         address: wallet?.address || "",
         chainsIds: [chainId],
-        enabled: !!wallet?.address && !!chainName
+        enabled: !!wallet?.address && !!chainName,
     });
     const { formattedBalance, hasEnoughBalance } = useMemo(() => {
         // Get balance for the selected token
@@ -37,7 +37,7 @@ export function OrderToken({ context, address, chainId, setChainId, token, setTo
         const formattedBalance = balance ? formatTokenAmount(balance, token.decimals, 6, false) : null;
         return {
             formattedBalance,
-            hasEnoughBalance
+            hasEnoughBalance,
         };
     }, [chainId, fungibleTokens, nativeTokens, requiredAmount, token, wallet?.address]);
     return (_jsx(TokenSelector, { address: address, chainIdsFilter: Object.values(ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], restrictedToken: undefined, setToken: token => {
@@ -48,7 +48,7 @@ export function OrderToken({ context, address, chainId, setChainId, token, setTo
                 decimals: token.decimals,
                 metadata: { logoURI: token.logoURI },
                 name: token.name,
-                symbol: token.symbol
+                symbol: token.symbol,
             });
         }, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: 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 ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsxs("div", { className: "text-as-primary font-semibold", children: [token.symbol, " on ", ALL_CHAINS[chainId].name] }), formattedBalance && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("div", { className: "text-as-primary/50 text-xs", children: [formattedBalance || "--", " ", token.symbol] }), hasEnoughBalance && _jsx(CheckCircle2, { className: "text-as-brand -mt-0.5 h-4 w-4" })] }))] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, undefined));
 }

package/dist/esm/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/esm/anyspend/react/components/common/OrderTokenAmount.js

@@ -8,7 +8,7 @@ import { Button } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import { TokenSelector } from "@reservoir0x/relay-kit-ui";
 import { ChainTokenIcon } from "./ChainTokenIcon.js";
-export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName }) {
+export 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 = useRef(token.address);
     useEffect(() => {
@@ -36,7 +36,7 @@ export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context,
             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/esm/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/esm/anyspend/react/components/common/PanelOnramp.js

@@ -5,7 +5,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useRef } from "react";
 import { toast } from "sonner";
 import { PaymentOptions } from "./PaymentOptions.js";
-export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp }) {
+export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, }) {
     // Get geo data for onramp availability
     const { geoData } = useGetGeo();
     const { coinbaseOnrampOptions } = useCoinbaseOnrampOptions(true, geoData?.country || "US");
@@ -32,7 +32,7 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp }) {
                             : 25000) ? (_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"] })) : (_jsx("p", { className: "label-style text-b3-react-foreground/60 -mb-3 mt-3 text-xs dark:bg-transparent", children: "Buy amount in USD" })), _jsxs("div", { className: "relative inline-flex items-center dark:bg-transparent", children: [_jsx("span", { className: "text-b3-react-foreground/60 -ms-3 -mt-2 text-2xl font-semibold dark:bg-transparent", children: "$" }), _jsx(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",
                                 } }), _jsx(AnimatePresence, { mode: "wait", children: _jsx(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" }) })] })] }), _jsx("div", { className: "grid grid-cols-4 gap-4", children: ["5", "10", "25", "100"].map(value => (_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/esm/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/esm/anyspend/react/components/common/PanelOnrampPayment.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { OnrampVendor, OrderType, useAnyspendCreateOnrampOrder, useGeoOnrampOptions } from "../../../../anyspend/index.js";
+import { OnrampVendor, OrderType, useAnyspendCreateOnrampOrder, useGeoOnrampOptions, } from "../../../../anyspend/index.js";
 import { Button } from "../../../../global-account/react/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { motion } from "framer-motion";
@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 export 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] = useState(srcAmountOnRamp);
     const hasInitialized = useRef(false);
@@ -20,7 +20,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
             hasInitialized.current = true;
         }
     }, [srcAmountOnRamp]);
-    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, isStripeWeb2Supported, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(isMainnet, stableAmountForGeo);
+    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, isStripeWeb2Supported, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(isMainnet, stableAmountForGeo);
     const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
         onSuccess: data => {
             const orderId = data.data.id;
@@ -29,7 +29,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
         onError: error => {
             console.error(error);
             toast.error("Failed to create order: " + error.message);
-        }
+        },
     });
     const handlePaymentMethodClick = async (vendor, paymentMethod) => {
         try {
@@ -63,7 +63,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
                     return {
                         ...selectedDstToken,
                         chainId: destinationTokenChainId || selectedDstChainId,
-                        address: destinationTokenAddress
+                        address: destinationTokenAddress,
                     };
                 }
                 return selectedDstToken;
@@ -80,13 +80,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) {
@@ -97,7 +97,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
     return (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [_jsxs(_Fragment, { children: [_jsx("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), _jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && (_jsxs(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: [_jsx("p", { className: "text-b3-react-foreground/60", children: orderType === OrderType.Swap
                                             ? "Recipient"
                                             : orderType === OrderType.MintNFT

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

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

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

@@ -10,12 +10,12 @@ export default 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 (_jsxs("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: [_jsx("a", { href: order.oneClickBuyUrl || "", target: "_blank", className: "w-4/5", children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", className: "relative w-full py-6", children: _jsxs("div", { className: "relative z-10 flex items-center justify-center gap-3", children: [_jsxs("span", { className: "text-lg font-medium text-white", children: ["Continue to ", vendorName] }), _jsx(ChevronRight, { className: "h-5 w-5 text-white/90" })] }) }) }), _jsx(HowItWorks, { steps: howItWorksSteps })] }));
 }