@b3dotfun/sdk 0.0.1-alpha.1

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

@@ -0,0 +1,385 @@
+"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";
+import { CopyToClipboard } from "../../../../global-account/react/components/custom/CopyToClipboard";
+import { Badge } from "../../../../global-account/react/components/ui/badge";
+import { Button } from "../../../../global-account/react/components/ui/button";
+import ShinyButton from "../../../../global-account/react/components/ui/ShinyButton";
+import { Skeleton } from "../../../../global-account/react/components/ui/skeleton";
+import { TextLoop } from "../../../../global-account/react/components/ui/text-loop";
+import { TextShimmer } from "../../../../global-account/react/components/ui/text-shimmer";
+import { useAccountWallet } from "../../../../global-account/react/hooks/useAccountWallet";
+import { useChainSwitchWithAction } from "../../../../global-account/react/hooks/useChainSwitchWithAction";
+import { useOnchainName } from "../../../../global-account/react/hooks/useOnchainName";
+import { useModalStore } from "../../../../global-account/react/stores/useModalStore";
+import { cn } from "../../../../shared/utils";
+import centerTruncate from "../../../../shared/utils/centerTruncate";
+import { formatTokenAmount } from "../../../../shared/utils/number";
+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 { QRCodeSVG } from "qrcode.react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import TimeAgo from "react-timeago";
+import { toast } from "sonner";
+import { erc20Abi } from "viem";
+import { b3 } from "viem/chains";
+import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
+import PaymentVendorUI from "./PaymentVendorUI";
+// Add this helper function near the top or just above the component
+function getOrderSuccessText({ order, tournament, formattedActualDstAmount, dstToken, recipientName, centerTruncate }) {
+    const recipient = recipientName || centerTruncate(order.recipientAddress, 8);
+    let actionText = "";
+    switch (order.type) {
+        case OrderType.Swap:
+            actionText = `sent ${formattedActualDstAmount || "--"} ${dstToken.symbol}`;
+            return `Successfully ${actionText} to ${recipient}`;
+        case OrderType.MintNFT:
+            actionText = `minted ${order.metadata.nft.name}`;
+            return `Successfully ${actionText} to ${recipient}`;
+        case OrderType.JoinTournament:
+            actionText = `joined ${tournament?.name}`;
+            return `Successfully ${actionText} for ${recipient}`;
+        case OrderType.FundTournament:
+            actionText = `funded ${tournament?.name}`;
+            return `Successfully ${actionText}`;
+        case OrderType.Custom:
+            actionText = order.metadata.action || `executed contract`;
+            return `Successfully ${actionText}`;
+        default:
+            throw new Error("Invalid order type");
+    }
+}
+/**
+ * Rounds a token amount to 6 significant digits after the first non-zero in the decimal part.
+ * Always rounds up (not standard rounding) if there are more than 6 significant digits.
+ * For example:
+ *    0.000123456 -> 0.000123456 (unchanged, as it has 6 significant digits)
+ *    0.0001234561 -> 0.000123457 (rounded up to 6 significant digits)
+ *    0.0001234564 -> 0.000123457 (always rounded up, even if digit < 5)
+ *    1,234,567.000123456789 -> 1,234,567.000123457 (decimal part rounded up to 6 sig digits)
+ *    1,234,567.000123123123 -> 1,234,567.000123124 (decimal part rounded up to 6 sig digits)
+ * @param amount The amount value as a string
+ * @returns The rounded amount string
+ */
+function roundTokenAmount(amount) {
+    if (!amount) {
+        return undefined;
+    }
+    // Split the number into whole and decimal parts
+    const parts = amount.split(".");
+    if (parts.length === 1) {
+        // No decimal part
+        return amount;
+    }
+    const wholePart = parts[0];
+    const decimalPart = parts[1];
+    // Check if decimal has 6 or fewer significant digits
+    if (decimalPart.length <= 6) {
+        return amount;
+    }
+    // Find the position of the first non-zero digit in the decimal part
+    let firstNonZeroPos = 0;
+    while (firstNonZeroPos < decimalPart.length && decimalPart[firstNonZeroPos] === "0") {
+        firstNonZeroPos++;
+    }
+    // Calculate how many significant digits we have after the first non-zero
+    const significantDigitsAfterFirstNonZero = decimalPart.length - firstNonZeroPos;
+    // If we have 6 or fewer significant digits, return as is
+    if (significantDigitsAfterFirstNonZero <= 6) {
+        return amount;
+    }
+    // We need to round to 6 significant digits after the first non-zero
+    // Keep all leading zeros plus 6 significant digits
+    const keepLength = firstNonZeroPos + 6;
+    // Always round up if there are more digits
+    const shouldRoundUp = decimalPart.length > keepLength;
+    // Create array of digits we're keeping (to handle carry)
+    const digits = decimalPart.substring(0, keepLength).split("");
+    // Apply rounding (always round up)
+    if (shouldRoundUp) {
+        // Start from the last position and carry as needed
+        let i = digits.length - 1;
+        let carry = 1;
+        while (i >= 0 && carry > 0) {
+            const digit = parseInt(digits[i], 10) + carry;
+            if (digit === 10) {
+                digits[i] = "0";
+                carry = 1;
+            }
+            else {
+                digits[i] = digit.toString();
+                carry = 0;
+            }
+            i--;
+        }
+        // Handle carry into the whole part if needed
+        if (carry > 0) {
+            return `${(parseInt(wholePart, 10) + 1).toString()}.${digits.join("")}`;
+        }
+    }
+    // Join the parts back together
+    const roundedDecimalPart = digits.join("");
+    return `${wholePart}.${roundedDecimalPart}`;
+}
+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);
+    const srcToken = zToken.parse(order.metadata.srcToken);
+    const dstToken = zToken.parse(order.metadata.dstToken);
+    const nft = order.type === OrderType.MintNFT ? zNft.parse(order.metadata.nft) : undefined;
+    const tournament = order.type === OrderType.JoinTournament || order.type === OrderType.FundTournament
+        ? zTournament.parse(order.metadata.tournament)
+        : undefined;
+    const { name: recipientName } = useOnchainName(order.recipientAddress);
+    const account = useAccountWallet();
+    const { data: walletClient } = useWalletClient();
+    const [txHash, setTxHash] = useState();
+    const [showQRCode, setShowQRCode] = useState(false);
+    const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
+    const { switchChainAndExecute, isSwitchingOrExecuting } = useChainSwitchWithAction();
+    // const { permitData, isCheckingPermit } = usePermitData({
+    //   chainId: order.srcChain,
+    //   tokenAddress: order.srcTokenAddress as Hex,
+    //   ownerAddress: account?.address && isAddress(account.address) ? getAddress(account.address) : undefined,
+    //   amount: BigInt(order.srcAmount)
+    // });
+    // const { sendPermitData } = useAnyspendSendPermitData({
+    //   onSuccess: _data => {
+    //     toast.info("Sent permit data successfully");
+    //   },
+    //   onError: error => {
+    //     console.error(error);
+    //     toast.error("Failed to send permit data: " + error.message);
+    //   }
+    // });
+    const { colorMode } = useColorMode();
+    const roundedUpSrcAmount = useMemo(() => {
+        // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
+        // Use 21 significant digits (max allowed by Intl.NumberFormat)
+        const formattedSrcAmount = srcToken
+            ? formatTokenAmount(BigInt(order.srcAmount), srcToken.decimals, 21, false)
+            : undefined;
+        return roundTokenAmount(formattedSrcAmount);
+    }, [order.srcAmount, srcToken]);
+    // This function handles the actual payment process
+    const handlePaymentProcess = useCallback(async (currentWalletClient) => {
+        if (!currentWalletClient || !currentWalletClient?.chain?.id) {
+            toast.error("Please connect your wallet");
+            return;
+        }
+        console.log("Processing transaction on chain:", currentWalletClient.chain.id);
+        // Process transaction
+        // if (permitData?.data && account.address) {
+        //   const signature = await currentWalletClient.signTypedData({
+        //     domain: permitData.data.domain,
+        //     types: permitData.data.types,
+        //     primaryType: "Permit",
+        //     message: permitData.data.messageToSign
+        //   });
+        //   // Split signature into v, r, s components
+        //   const r = signature.slice(0, 66);
+        //   const s = "0x" + signature.slice(66, 130);
+        //   const v = parseInt(signature.slice(130, 132), 16);
+        //   sendPermitData({
+        //     isMainnet: true,
+        //     orderId: order.id,
+        //     permitData: {
+        //       deadline: Number(permitData.data.messageToSign.deadline),
+        //       ownerAddress: account.address,
+        //       r,
+        //       s,
+        //       v
+        //     }
+        //   });
+        //   return;
+        // }
+        const signer = currentWalletClient.account;
+        // Send transaction
+        if (isNativeToken(order.srcTokenAddress)) {
+            const hash = await currentWalletClient.sendTransaction({
+                account: signer,
+                chain: EVM_CHAINS[order.srcChain].viem,
+                to: order.globalAddress,
+                value: BigInt(order.srcAmount)
+            });
+            setTxHash(hash);
+        }
+        else {
+            const hash = await currentWalletClient.writeContract({
+                account: signer,
+                chain: EVM_CHAINS[order.srcChain].viem,
+                address: order.srcTokenAddress,
+                abi: erc20Abi,
+                functionName: "transfer",
+                args: [order.globalAddress, BigInt(order.srcAmount)]
+            });
+            setTxHash(hash);
+        }
+    }, [order]);
+    // Main payment handler that triggers chain switch and payment
+    const handlePayment = async () => {
+        console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
+        await switchChainAndExecute(order.srcChain, handlePaymentProcess);
+    };
+    // 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);
+        params.set("waitingForDeposit", "true");
+        router.push(`?${params}`);
+    }, [router, searchParams]);
+    useEffect(() => {
+        if (txSuccess) {
+            toast.success("Transaction successful! We are processing your order.", { duration: 10000 });
+            setWaitingForDeposit();
+            setTxHash(undefined);
+        }
+    }, [setWaitingForDeposit, txSuccess]);
+    const [showOrderDetails, setShowOrderDetails] = useState(false);
+    if (!srcToken || !dstToken) {
+        return _jsx("div", { children: "Loading..." });
+    }
+    const expectedDstAmount = order.type === OrderType.MintNFT ||
+        order.type === OrderType.JoinTournament ||
+        order.type === OrderType.FundTournament ||
+        order.type === OrderType.Custom
+        ? "0"
+        : order.payload.expectedDstAmount.toString();
+    const formattedExpectedDstAmount = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
+    const actualDstAmount = order.type === OrderType.MintNFT ||
+        order.type === OrderType.JoinTournament ||
+        order.type === OrderType.FundTournament ||
+        order.type === OrderType.Custom
+        ? undefined
+        : order.payload.actualDstAmount;
+    const formattedActualDstAmount = actualDstAmount
+        ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals)
+        : undefined;
+    const depositedAmount = depositTxs
+        ? depositTxs.reduce((acc, curr) => acc + BigInt(curr.amount), BigInt(0))
+        : BigInt(0);
+    const depositDeficit = BigInt(order.srcAmount) - depositedAmount;
+    const depositEnoughAmount = depositDeficit <= BigInt(0);
+    const formattedDepositDeficit = formatTokenAmount(BigInt(depositDeficit), srcToken.decimals);
+    const { text: statusText, status: statusDisplay } = getStatusDisplay(order);
+    const permalink = window.location.origin === "https://basement.fun"
+        ? window.location.origin + "/deposit/" + order.id
+        : window.location.origin + "?orderId=" + order.id;
+    const handleCoinbaseRedirect = () => {
+        const coinbaseUrl = `https://go.cb-w.com/dapp?cb_url=${encodeURIComponent(permalink)}`;
+        return coinbaseUrl;
+    };
+    const handlePhantomRedirect = () => {
+        const phantomDeepLink = `https://phantom.app/ul/browse/${encodeURIComponent(permalink)}`;
+        return phantomDeepLink;
+    };
+    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)))
+                            : 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") })] }));
+    }
+    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)))
+                            : 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
+                                    ? "Minted NFT"
+                                    : order.type === OrderType.JoinTournament
+                                        ? "Joined Tournament"
+                                        : order.type === OrderType.FundTournament
+                                            ? "Funded Tournament"
+                                            : "Processed Order", chainId: order.dstChain, tx: executeTx, isProcessing: false, delay: 1 })] }), _jsx("div", { className: "flex w-full flex-col gap-8", children: _jsx(Button, { variant: "link", asChild: true, children: _jsxs("a", { href: getExplorerTxUrl(order.dstChain, executeTx.txHash), target: "_blank", className: "text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
+                                    order,
+                                    tournament,
+                                    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") }))] }));
+    }
+    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)))
+                            : null, order.srcChain === order.dstChain ? (_jsx(TransactionDetails, { title: order.type === OrderType.Swap
+                                ? "Processed Swap"
+                                : order.type === OrderType.MintNFT
+                                    ? "Minted NFT"
+                                    : order.type === OrderType.JoinTournament
+                                        ? "Joined Tournament"
+                                        : order.type === OrderType.FundTournament
+                                            ? "Funded Tournament"
+                                            : "Processed Transaction", chainId: order.srcChain, isProcessing: false, tx: relayTx, delay: 0.5 })) : (_jsxs(_Fragment, { children: [_jsx(TransactionDetails, { title: "Processed Transaction", chainId: order.srcChain, isProcessing: false, tx: relayTx, delay: 0.5 }), _jsx(TransactionDetails, { title: order.type === OrderType.Swap
+                                        ? "Processing Swap"
+                                        : order.type === OrderType.MintNFT
+                                            ? "Minting NFT"
+                                            : order.type === OrderType.JoinTournament
+                                                ? "Joining Tournament"
+                                                : order.type === OrderType.FundTournament
+                                                    ? "Funding Tournament"
+                                                    : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: executeTx, delay: 1 })] }))] }), _jsx("div", { className: "flex w-full flex-col gap-8", children: _jsx(Button, { variant: "link", asChild: true, children: _jsxs("a", { href: getExplorerTxUrl(order.dstChain, relayTx.txHash), target: "_blank", className: "text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
+                                    order,
+                                    tournament,
+                                    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") }))] }));
+    }
+    // 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
+                            ? "Processing Swap"
+                            : order.type === OrderType.MintNFT
+                                ? "Minting NFT"
+                                : order.type === OrderType.JoinTournament
+                                    ? "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 }))] }) }));
+    }
+    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: () => {
+                                            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) {
+                                                navigator
+                                                    .share({
+                                                    title: "Complete Deposit",
+                                                    text: "Complete your deposit on BSMNT.fun",
+                                                    url: permalink
+                                                })
+                                                    .catch(error => console.log("Error sharing:", error));
+                                            }
+                                            else {
+                                                toast.error("Web Share API is not supported on this browser");
+                                            }
+                                        }, children: ["Send Link ", _jsx(SquareArrowOutUpRight, { className: "ml-2 h-3 w-3" })] })] })] })] })), _jsxs("div", { className: "flex w-full items-center justify-center gap-1 text-sm", children: [_jsx("div", { className: "text-as-primary/30", children: "Time remaining:" }), _jsx("div", { className: "text-as-primary", children: depositEnoughAmount ? ("Received") : order.status === OrderStatus.Expired ? ("Expired") : (_jsx(TimeAgo, { date: new Date(order.expiredAt), live: true })) })] }), showOrderDetails ? (_jsx(motion.div, { className: "w-full", initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsxs("div", { className: "flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("div", { className: "text-as-primary/30", children: order.type === OrderType.Swap || order.type === OrderType.MintNFT
+                                        ? "Expected to receive"
+                                        : order.type === OrderType.JoinTournament
+                                            ? "Join tournament"
+                                            : order.type === OrderType.FundTournament
+                                                ? "Fund tournament"
+                                                : order.type === OrderType.Custom
+                                                    ? order.metadata.action
+                                                        ? capitalizeFirstLetter(order.metadata.action)
+                                                        : "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" })] })] }));
+});
+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)"
+                            }, 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/OrderHistory.d.ts

@@ -0,0 +1,7 @@
+interface OrderHistoryProps {
+    mode: "modal" | "page";
+    onBack: () => void;
+    onSelectOrder?: (orderId: string) => void;
+}
+export default function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,8 @@
+import { Order } from "../../../../anyspend";
+interface OrderHistoryItemProps {
+    order: Order;
+    onSelectOrder?: (orderId: string) => void;
+    mode: "modal" | "page";
+}
+export default function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ALL_CHAINS, getChainName, getStatusDisplay, OrderType } from "../../../../anyspend";
+import { Badge } from "../../../../global-account/react/components/ui/badge";
+import { Button } from "../../../../global-account/react/components/ui/button";
+import useIsMobile from "../../../../global-account/react/hooks/useIsMobile";
+import { cn } from "../../../../shared/utils";
+import { formatTokenAmount } from "../../../../shared/utils/number";
+import { ArrowRight, ChevronDown } from "lucide-react";
+import TimeAgo from "react-timeago";
+import { b3 } from "viem/chains";
+export default function OrderHistoryItem({ order, onSelectOrder, mode }) {
+    const nft = order.type === OrderType.MintNFT ? order.metadata.nft : undefined;
+    const tournament = order.type === OrderType.JoinTournament || order.type === OrderType.FundTournament
+        ? order.metadata.tournament
+        : undefined;
+    const dstToken = order.metadata.dstToken;
+    const actualDstAmount = order.type === OrderType.MintNFT ||
+        order.type === OrderType.JoinTournament ||
+        order.type === OrderType.FundTournament ||
+        order.type === OrderType.Custom
+        ? undefined
+        : order.payload.actualDstAmount;
+    const expectedDstAmount = order.type === OrderType.MintNFT ||
+        order.type === OrderType.JoinTournament ||
+        order.type === OrderType.FundTournament ||
+        order.type === OrderType.Custom
+        ? undefined
+        : order.payload.expectedDstAmount;
+    const { text: orderStatusText, status: orderDisplayStatus } = getStatusDisplay(order);
+    const isSmallView = useIsMobile() || mode === "modal";
+    return (_jsxs("div", { className: cn("bg-as-light-brand/20 rounded-lg border p-4", onSelectOrder && "hover:bg-as-light-brand/30 hover:border-as-brand cursor-pointer transition-colors"), onClick: () => onSelectOrder?.(order.id), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Badge, { className: cn("px-3 py-1 text-xs", orderDisplayStatus === "processing" && "bg-yellow-500/10 text-yellow-500", orderDisplayStatus === "success" && "bg-green-500/10 text-green-500", orderDisplayStatus === "failure" && "bg-red-500/10 text-red-500"), children: orderStatusText }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-nano label-style text-as-primary/30", children: _jsx(TimeAgo, { date: new Date(order.createdAt) }) }) })] }), order.oneClickBuyUrl ? (_jsx("div", { className: "mb-3 mt-4 flex items-center gap-1", children: _jsxs("div", { className: "bg-b3-react-background flex flex-1 flex-col gap-1 rounded-lg border p-4 px-5", children: [_jsxs("h3", { className: "text-as-primary/50 flex items-center gap-2 text-xl font-semibold", children: [_jsxs("span", { children: ["Buy ", _jsxs("span", { className: "text-as-primary", children: ["$", formatTokenAmount(BigInt(order.srcAmount), order.metadata.srcToken.decimals)] }), ` of`] }), _jsxs("span", { className: "text-as-primary flex items-center gap-2", children: [nft ? (_jsx("img", { src: nft.imageUrl, alt: nft.name, className: "h-6 w-6" })) : tournament ? (_jsx("img", { src: tournament.imageUrl, alt: tournament.name, className: "h-6 w-6" })) : (_jsx("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: "h-6 w-6" })), nft ? nft.name : tournament ? tournament.name : dstToken.symbol] }), _jsxs("span", { className: "flex items-center gap-2", children: [` on `, _jsxs("span", { className: "text-as-primary flex items-center gap-2", children: [_jsx("img", { src: ALL_CHAINS[order.dstChain]?.logoUrl, alt: getChainName(order.dstChain), className: "h-4" }), order.dstChain !== b3.id && getChainName(order.dstChain)] })] })] }), _jsxs("p", { className: "label-style text-as-primary/30 mt-1 flex items-center gap-2 text-xs", children: ["Paying via", " ", _jsx("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "-mt-1 h-3" })] })] }) })) : (_jsxs("div", { className: cn("mb-3 mt-4 flex items-center gap-1", isSmallView && "flex-col"), children: [_jsxs("div", { className: "bg-b3-react-background flex w-full flex-1 flex-col gap-1 overflow-hidden rounded-lg border p-4 px-5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: order.metadata.srcToken.metadata.logoURI, alt: order.metadata.srcToken.symbol, className: "h-6 w-6 rounded-full" }), _jsxs("div", { className: "text-as-primary flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: [formatTokenAmount(BigInt(order.srcAmount), order.metadata.srcToken.decimals), " ", order.metadata.srcToken.symbol] })] }), _jsxs("div", { className: "label-style text-as-primary/50 flex items-center gap-2 text-sm", children: ["from", _jsx("img", { src: ALL_CHAINS[order.srcChain]?.logoUrl, alt: getChainName(order.srcChain), className: cn("h-4", order.srcChain !== b3.id && "w-4 rounded-full", order.srcChain === b3.id && "h-3") }), getChainName(order.srcChain)] })] }), _jsx("div", { className: cn("h-8 w-8 shrink-0 -rotate-90 opacity-30", isSmallView && "rotate-0"), children: _jsx(ChevronDown, { className: "h-8 w-8" }) }), _jsxs("div", { className: "bg-b3-react-background flex w-full flex-1 flex-col gap-1 overflow-hidden rounded-lg border p-4 px-5", children: [_jsx("div", { className: "flex items-center gap-2", children: nft ? (_jsxs(_Fragment, { children: [_jsx("img", { src: nft.imageUrl, alt: nft.name, className: "h-6 w-6 rounded-full" }), _jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: nft.name })] })) : tournament ? (_jsxs(_Fragment, { children: [_jsx("img", { src: tournament.imageUrl, alt: tournament.name, className: "h-6 w-6 rounded-full" }), _jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: tournament.name })] })) : (_jsxs(_Fragment, { children: [_jsx("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: "h-6 w-6 rounded-full" }), _jsxs("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: [formatTokenAmount(actualDstAmount ? BigInt(actualDstAmount) : expectedDstAmount ? BigInt(expectedDstAmount) : 0n, dstToken.decimals), " ", dstToken.symbol] })] })) }), _jsxs("div", { className: "label-style text-as-primary/50 flex items-center gap-2 text-sm", children: ["to", _jsx("img", { src: ALL_CHAINS[order.dstChain]?.logoUrl, alt: getChainName(order.dstChain), className: cn("h-4", order.dstChain !== b3.id && "w-4 rounded-full", order.dstChain === b3.id && "h-3") }), getChainName(order.dstChain)] })] })] })), _jsx("div", { className: "flex items-center justify-end", children: _jsxs(Button, { variant: "link", size: "sm", className: "h-auto", onClick: () => onSelectOrder?.(order.id), children: [orderDisplayStatus === "processing" ? "Proceed with payment" : "Details", " ", _jsx(ArrowRight, { className: "ml-2 h-3 w-3" })] }) })] }, `anyspend-${order.id}`));
+}

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

@@ -0,0 +1,4 @@
+import { Order } from "../../../../anyspend";
+export declare const OrderStatusDisplay: import("react").NamedExoticComponent<{
+    order: Order;
+}>;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OrderStatus, getStatusDisplay } from "../../../../anyspend";
+import { Badge } from "../../../../global-account/react/components/ui/badge";
+import { TextShimmer } from "../../../../global-account/react/components/ui/text-shimmer";
+import { Check, Loader2 } from "lucide-react";
+import { memo } from "react";
+export const OrderStatusDisplay = memo(function OrderStatusDisplay({ order }) {
+    const isComplete = order.status === OrderStatus.Executed;
+    const { text, status: displayStatus } = getStatusDisplay(order);
+    return (_jsx("div", { className: "flex items-center justify-center gap-2", children: isComplete ? (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-3 border-green-500/50 bg-green-500/20 px-4 py-1 text-base transition-colors", children: [_jsx(Check, { className: "h-6 w-6 text-green-500" }), _jsx("span", { className: "font-medium", children: text })] })) : displayStatus === "failure" ? (_jsx(Badge, { variant: "destructive", className: "border-red-400/50 bg-red-400/20 px-4 py-1 text-base", children: _jsx("div", { className: "font-sf-rounded text-base font-semibold text-red-400/50", children: text }) })) : (_jsxs(Badge, { variant: "default", className: "border-as-stroke/20 bg-as-primary/10 flex items-center gap-3 px-4 py-1 text-base transition-colors", children: [displayStatus === "processing" && _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: text })] })) }));
+});

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

@@ -0,0 +1,11 @@
+import { Token } from "../../../../anyspend";
+export declare function OrderToken({ context, address, chainId, setChainId, token, setToken, requiredAmount, tokenSelectClassName }: {
+    context: "from" | "to";
+    address: string | undefined;
+    token: Token;
+    setToken: (token: Token) => void;
+    chainId: number;
+    setChainId: (chainId: number) => void;
+    requiredAmount: bigint | undefined;
+    tokenSelectClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ALL_CHAINS, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend";
+import { Button } from "../../../../global-account/react/components/ui/button";
+import { useAccountWallet } from "../../../../global-account/react/hooks/useAccountWallet";
+import { useTokenBalancesByChain } from "../../../../global-account/react/hooks/useTokenBalancesByChain";
+import { cn } from "../../../../shared/utils";
+import { formatTokenAmount } from "../../../../shared/utils/number";
+import { simpleHashChainToChainName } from "../../../../shared/utils/simplehash";
+import { TokenSelector } from "@reservoir0x/relay-kit-ui";
+import { CheckCircle2, ChevronsUpDown } from "lucide-react";
+import { useMemo } from "react";
+import { ChainTokenIcon } from "./ChainTokenIcon";
+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
+    });
+    const { formattedBalance, hasEnoughBalance } = useMemo(() => {
+        // Get balance for the selected token
+        let balance = null;
+        if (token && wallet?.address) {
+            if (token.address === RELAY_ETH_ADDRESS) {
+                // Native token
+                const nativeToken = nativeTokens?.find(t => t.chainId === chainId);
+                balance = nativeToken?.value ?? null;
+            }
+            else {
+                // ERC20 token
+                const fungibleToken = fungibleTokens?.find(t => t.token_address?.toLowerCase() === token.address.toLowerCase());
+                balance = fungibleToken?.balance ? BigInt(fungibleToken.balance) : null;
+            }
+        }
+        // Check if balance is sufficient for the required amount
+        const hasEnoughBalance = balance && requiredAmount ? balance >= requiredAmount : false;
+        const formattedBalance = balance ? formatTokenAmount(balance, token.decimals, 6, false) : null;
+        return {
+            formattedBalance,
+            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 => {
+            setChainId(token.chainId);
+            setToken({
+                address: token.address,
+                chainId,
+                decimals: token.decimals,
+                metadata: { logoURI: token.logoURI },
+                name: token.name,
+                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

@@ -0,0 +1,18 @@
+import { Token } from "../../../../anyspend";
+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;
+    context: "from" | "to";
+    address: string | undefined;
+    token: Token;
+    setToken: (token: Token) => void;
+    chainId: number;
+    setChainId: (chainId: number) => void;
+    hideTokenSelect?: boolean;
+    canEditAmount?: boolean;
+    className?: string;
+    innerClassName?: string;
+    amountClassName?: string;
+    tokenSelectClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;