@b3dotfun/sdk 0.0.16 → 0.0.17-alpha.0

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

@@ -25,7 +25,11 @@ const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
 const wagmi_1 = require("wagmi");
+const ConnectWalletPayment_1 = __importDefault(require("./ConnectWalletPayment"));
+const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
+const OrderDetailsCollapsible_1 = require("./OrderDetailsCollapsible");
 const PaymentVendorUI_1 = __importDefault(require("./PaymentVendorUI"));
+const TransferCryptoDetails_1 = require("./TransferCryptoDetails");
 // 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);
@@ -122,10 +126,13 @@ function roundTokenAmount(amount) {
     const roundedDecimalPart = digits.join("");
     return `${wholePart}.${roundedDecimalPart}`;
 }
-exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, onBack, }) {
+exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, paymentMethod = CryptoPaymentMethod_1.PaymentMethod.NONE, onBack, }) {
     const router = (0, hooks_1.useRouter)();
     const searchParams = (0, hooks_1.useSearchParams)();
-    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
+    // Read payment method from URL parameters
+    const paymentMethodFromUrl = searchParams.get("paymentMethod");
+    const effectivePaymentMethod = paymentMethodFromUrl || paymentMethod || CryptoPaymentMethod_1.PaymentMethod.NONE;
+    const setB3ModalOpen = (0, react_1.useModalStore)((state) => state.setB3ModalOpen);
     const srcToken = order.metadata.srcToken;
     const dstToken = order.metadata.dstToken;
     const nft = order.type === "mint_nft" ? order.metadata.nft : undefined;
@@ -155,6 +162,10 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
         }
         console.log("Processing transaction on chain:", currentWalletClient.chain.id);
         const signer = currentWalletClient.account;
+        if (!signer) {
+            sonner_1.toast.error("No account connected");
+            return;
+        }
         // Send transaction
         if ((0, anyspend_1.isNativeToken)(order.srcTokenAddress)) {
             const hash = await currentWalletClient.sendTransaction({
@@ -198,6 +209,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
         const params = new URLSearchParams(searchParams.toString());
         params.delete("waitingForDeposit");
         params.delete("orderId");
+        params.delete("paymentMethod");
         // Only update URL if params were actually removed
         if (params.toString() !== searchParams.toString()) {
             router.push(`?${params}`);
@@ -219,7 +231,6 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
             setTxHash(undefined);
         }
     }, [setWaitingForDeposit, txSuccess]);
-    const [showOrderDetails, setShowOrderDetails] = (0, react_5.useState)(false);
     const isPhantomMobile = (0, react_5.useMemo)(() => navigator.userAgent.includes("Phantom"), []);
     const isPhantomBrowser = (0, react_5.useMemo)(() => window.phantom?.solana?.isPhantom, []);
     // Get connected Phantom wallet address if available
@@ -256,13 +267,6 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
     const depositEnoughAmount = depositDeficit <= BigInt(0);
     const formattedDepositDeficit = (0, number_1.formatTokenAmount)(BigInt(depositDeficit), srcToken.decimals);
     const { text: statusText, status: statusDisplay } = (0, anyspend_1.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 initiatePhantomTransfer = async (amountLamports, tokenAddress, recipientAddress) => {
         try {
             if (!isPhantomBrowser && !isPhantomMobile) {
@@ -401,7 +405,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
                                     : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
                             : null, refundTxs
                             ? refundTxs.map(rTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: `Refunded ${(0, number_1.formatTokenAmount)(BigInt(rTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: rTx, isProcessing: false }, rTx.txHash)))
-                            : null] }), order.errorDetails && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) }) })), (0, jsx_runtime_1.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" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
+                            : null] }), order.errorDetails && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) }) })), (0, jsx_runtime_1.jsx)("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
     }
     if (executeTx) {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative mt-4 flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.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
@@ -423,10 +427,10 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
                                     dstToken,
                                     recipientName,
                                     centerTruncate: centerTruncate_1.default,
-                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.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" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     if (relayTx && relayTx.status === "success") {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative mt-4 flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.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
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsxs)("div", { className: "relative mt-4 flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.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 => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                     ? `Received payment`
                                     : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
@@ -453,61 +457,38 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
                                     dstToken,
                                     recipientName,
                                     centerTruncate: centerTruncate_1.default,
-                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.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" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative mt-4 flex w-full flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.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) => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
-                            ? `Received payment`
-                            : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount }, dTxs.txHash))), statusDisplay === "failure" ? ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: statusText, chainId: order.srcChain, tx: null, isProcessing: false, delay: 0.5 })) : depositEnoughAmount ? ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap"
-                            ? "Processing Swap"
-                            : order.type === "mint_nft"
-                                ? "Minting NFT"
-                                : order.type === "join_tournament"
-                                    ? "Joining Tournament"
-                                    : order.type === "fund_tournament"
-                                        ? "Funding Tournament"
-                                        : "Processing Transaction", chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 })) : ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
-                            ? `Waiting for payment`
-                            : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsxs)("div", { className: "relative mt-4 flex w-full flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-background absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.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) => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
+                                ? `Received payment`
+                                : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount }, dTxs.txHash))), statusDisplay === "failure" ? ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: statusText, chainId: order.srcChain, tx: null, isProcessing: false, delay: 0.5 })) : depositEnoughAmount ? ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap"
+                                ? "Processing Swap"
+                                : order.type === "mint_nft"
+                                    ? "Minting NFT"
+                                    : order.type === "join_tournament"
+                                        ? "Joining Tournament"
+                                        : order.type === "fund_tournament"
+                                            ? "Funding Tournament"
+                                            : "Processing Transaction", chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 })) : ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
+                                ? `Waiting for payment`
+                                : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusDisplay === "failure" && ((0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col items-center gap-3 whitespace-nowrap pb-2 text-sm", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-as-light-brand/20 flex w-full flex-col gap-4 rounded-lg p-8", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", style: { whiteSpace: "normal" }, children: "This order is no longer valid because the order expired." }) }) })), statusDisplay === "processing" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [order.onrampMetadata ? ((0, jsx_runtime_1.jsx)(PaymentVendorUI_1.default, { isMainnet: isMainnet, order: order, dstTokenSymbol: dstToken.symbol })) : ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50", children: "Please send" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [(0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: roundedUpSrcAmount, onCopy: () => {
-                                                    sonner_1.toast.success("Copied to clipboard");
-                                                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.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] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", (0, anyspend_1.getChainName)(order.srcChain), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") })] })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 mb-1 mt-2", children: " to the address:" })] }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.globalAddress, onCopy: () => {
-                                    sonner_1.toast.success("Copied to clipboard");
-                                }, children: (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm", children: order.globalAddress }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (account?.address || phantomWalletAddress) && !showQRCode ? ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 mt-8 flex w-full flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4 text-lg md:text-sm", children: order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusDisplay === "processing" && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: order.onrampMetadata ? ((0, jsx_runtime_1.jsx)(PaymentVendorUI_1.default, { isMainnet: isMainnet, order: order, dstTokenSymbol: dstToken.symbol })) : effectivePaymentMethod === CryptoPaymentMethod_1.PaymentMethod.CONNECT_WALLET ? ((0, jsx_runtime_1.jsx)(ConnectWalletPayment_1.default, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft })) : effectivePaymentMethod === CryptoPaymentMethod_1.PaymentMethod.TRANSFER_CRYPTO ? (
+                // Transfer Crypto Payment Method - Show new card-based UI
+                (0, jsx_runtime_1.jsx)(TransferCryptoDetails_1.TransferCryptoDetails, { order: order, recipientName: recipientName, srcToken: srcToken, dstToken: dstToken, tournament: tournament, nft: nft, onBack: handleBack })) : ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50", children: "Please send" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [(0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: roundedUpSrcAmount, onCopy: () => {
+                                                sonner_1.toast.success("Copied to clipboard");
+                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.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] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "outline", className: "flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm", children: ["on ", (0, anyspend_1.getChainName)(order.srcChain), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") })] })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 mb-1 mt-2", children: " to the address:" })] }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.globalAddress, onCopy: () => {
+                                sonner_1.toast.success("Copied to clipboard");
+                            }, children: (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm", children: order.globalAddress }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (account?.address || phantomWalletAddress) && !showQRCode ? ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 mt-8 flex w-full flex-col items-center gap-4", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4 text-lg md:text-sm", children: order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                                                                 ? "Pay from Phantom Wallet"
                                                                 : "Pay from Connected Wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsxs)("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                                                         ? (0, centerTruncate_1.default)(phantomWalletAddress, 6)
-                                                        : (0, centerTruncate_1.default)(account?.address || "", 6)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] })) : ((0, jsx_runtime_1.jsxs)(react_4.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: [(0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress), className: "max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletWalletConnect, { className: "h-5 w-5", variant: "branded" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [account && ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "ghost", className: "text-as-primary w-full", onClick: handlePayment, children: ["Send Transaction ", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "ml-2 h-4 w-4" })] })), anyspend_1.EVM_CHAINS[order.srcChain] ? ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", className: "w-full", onClick: handlePayment, children: ["Open Metamask", (0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "ml-2 h-5 w-5", variant: "branded" })] })) : null, (0, jsx_runtime_1.jsx)("a", { href: handleCoinbaseRedirect(), children: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", className: "w-full", children: ["Open Coinbase", (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "ml-2 h-5 w-5", variant: "branded" })] }) }), (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", className: "w-full", onClick: () => initiatePhantomTransfer(order.srcAmount, order.srcTokenAddress, order.globalAddress), children: ["Open Phantom", (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "ml-2 h-5 w-5", variant: "branded" })] })] })] }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-light-brand/30 w-full rounded-lg p-4 sm:p-2 sm:px-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary mb-3 text-sm", children: "Continue on another device?" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: permalink, onCopy: () => {
-                                            sonner_1.toast.success("Copied to clipboard");
-                                        }, children: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", className: "w-full", children: ["Copy Link", (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "ml-2 h-3 w-3" })] }) }), (0, jsx_runtime_1.jsxs)(react_1.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 {
-                                                sonner_1.toast.error("Web Share API is not supported on this browser");
-                                            }
-                                        }, children: ["Send Link ", (0, jsx_runtime_1.jsx)(lucide_react_1.SquareArrowOutUpRight, { className: "ml-2 h-3 w-3" })] })] })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-center gap-1 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30", children: "Time remaining:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : ((0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.expiredAt), live: true })) })] }), showOrderDetails ? ((0, jsx_runtime_1.jsx)(react_4.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30", children: order.type === "swap" || order.type === "mint_nft"
-                                        ? "Expected to receive"
-                                        : order.type === "join_tournament"
-                                            ? "Join tournament"
-                                            : order.type === "fund_tournament"
-                                                ? "Fund tournament"
-                                                : order.type === "custom"
-                                                    ? order.metadata.action
-                                                        ? (0, anyspend_1.capitalizeFirstLetter)(order.metadata.action)
-                                                        : "Contract execution"
-                                                    : "" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-end gap-2", children: [order.type === "swap" ? (`~${formattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === "mint_nft" ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { children: tournament?.name || "Tournament" })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { children: ["on ", order.dstChain !== chains_1.b3.id && (0, anyspend_1.getChainName)(order.dstChain)] }), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: (0, utils_1.cn)("h-3", order.dstChain !== chains_1.b3.id && "w-3 rounded-full", order.dstChain === chains_1.b3.id && "h-4") })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30", children: "Order ID" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: order.id })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30", children: "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-1", children: [recipientName && (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: recipientName }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.recipientAddress, onCopy: () => {
-                                                sonner_1.toast.success("Copied recipient address to clipboard");
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary flex items-center gap-2", children: [(0, centerTruncate_1.default)(order.recipientAddress, 10), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" })] }) })] })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" })] })), (0, jsx_runtime_1.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 ", (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" })] })] }));
+                                                        : (0, centerTruncate_1.default)(account?.address || "", 6)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] }) })) : (
+                        // Default case - existing QR code flow
+                        (0, jsx_runtime_1.jsx)(react_4.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: (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress), className: "max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-center gap-1 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30", children: "Time remaining:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : ((0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && ((0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })), (0, jsx_runtime_1.jsxs)("button", { className: "flex w-full items-center justify-center gap-2", onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
 });
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-1 items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex grow items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-b3-react-background relative h-10 w-10 rounded-full", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_4.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : ((0, jsx_runtime_1.jsx)(react_4.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: {

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

@@ -0,0 +1,18 @@
+import { components } from "../../../../anyspend/types/api";
+type Order = components["schemas"]["Order"];
+type Token = components["schemas"]["Token"];
+type Tournament = components["schemas"]["Tournament"];
+type NFT = components["schemas"]["NFT"];
+interface OrderDetailsCollapsibleProps {
+    order: Order;
+    dstToken: Token;
+    tournament?: Tournament;
+    nft?: NFT;
+    recipientName?: string;
+    formattedExpectedDstAmount?: string;
+    className?: string;
+    showTotal?: boolean;
+    totalAmount?: string;
+}
+export declare const OrderDetailsCollapsible: import("react").NamedExoticComponent<OrderDetailsCollapsibleProps>;
+export {};

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

@@ -0,0 +1,42 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrderDetailsCollapsible = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const react_1 = require("../../../../global-account/react");
+const utils_1 = require("../../../../shared/utils");
+const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
+const number_1 = require("../../../../shared/utils/number");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("motion/react");
+const react_3 = require("react");
+const sonner_1 = require("sonner");
+const chains_1 = require("viem/chains");
+exports.OrderDetailsCollapsible = (0, react_3.memo)(function OrderDetailsCollapsible({ order, dstToken, tournament, nft, recipientName, formattedExpectedDstAmount, className, showTotal = false, totalAmount, }) {
+    const [showOrderDetails, setShowOrderDetails] = (0, react_3.useState)(true);
+    // Calculate expected amount if not provided
+    const expectedDstAmount = order.type === "mint_nft" ||
+        order.type === "join_tournament" ||
+        order.type === "fund_tournament" ||
+        order.type === "custom"
+        ? "0"
+        : order.payload.expectedDstAmount.toString();
+    const finalFormattedExpectedDstAmount = formattedExpectedDstAmount || (0, number_1.formatTokenAmount)(BigInt(expectedDstAmount), dstToken.decimals);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-secondary border-as-border-secondary rounded-xl border px-4 py-2", className), children: showOrderDetails ? ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry", children: "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-1", children: [recipientName && (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: recipientName }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: order.recipientAddress, onCopy: () => {
+                                            sonner_1.toast.success("Copied recipient address to clipboard");
+                                        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary flex items-center gap-2", children: [(0, centerTruncate_1.default)(order.recipientAddress, 10), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" })] }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry", children: order.type === "swap" || order.type === "mint_nft"
+                                    ? "Expected to receive"
+                                    : order.type === "join_tournament"
+                                        ? "Join tournament"
+                                        : order.type === "fund_tournament"
+                                            ? "Fund tournament"
+                                            : order.type === "custom"
+                                                ? order.metadata.action
+                                                    ? (0, anyspend_1.capitalizeFirstLetter)(order.metadata.action)
+                                                    : "Contract execution"
+                                                : "" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-end gap-2", children: [order.type === "swap" ? (`~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === "mint_nft" ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { children: tournament?.name || "Tournament" })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { children: ["on ", order.dstChain !== chains_1.b3.id && (0, anyspend_1.getChainName)(order.dstChain)] }), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: (0, utils_1.cn)("h-3", order.dstChain !== chains_1.b3.id && "w-3 rounded-full", order.dstChain === chains_1.b3.id && "h-4") })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" })] })) }));
+});

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

@@ -3,11 +3,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OrderStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
-const react_1 = require("../../../../global-account/react");
 const lucide_react_1 = require("lucide-react");
-const react_2 = require("react");
-exports.OrderStatus = (0, react_2.memo)(function OrderStatus({ order }) {
+const react_1 = require("react");
+const StepProgress_1 = require("./StepProgress");
+exports.OrderStatus = (0, react_1.memo)(function OrderStatus({ order }) {
     const isComplete = order.status === "executed";
-    const { text, status: displayStatus } = (0, anyspend_1.getStatusDisplay)(order);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-2", children: isComplete ? ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-6 w-6 text-green-500" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: text })] })) : displayStatus === "failure" ? ((0, jsx_runtime_1.jsx)(react_1.Badge, { variant: "destructive", className: "border-red-400/50 bg-red-400/20 px-4 py-1 text-base", children: (0, jsx_runtime_1.jsx)("div", { className: "font-sf-rounded text-base font-semibold text-red-400/50", children: text }) })) : ((0, jsx_runtime_1.jsxs)(react_1.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" && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: text })] })) }));
+    const { text, status: displayStatus, description } = (0, anyspend_1.getStatusDisplay)(order);
+    console.log("OrderStatus", displayStatus);
+    console.log("OrderStatus", order);
+    const paymentSteps = [
+        {
+            id: 1,
+            title: text,
+            description: description,
+        },
+        {
+            id: 2,
+            title: text,
+            description: description,
+        },
+    ];
+    if (order.status === "waiting_stripe_payment") {
+        return (0, jsx_runtime_1.jsx)(StepProgress_1.StepProgress, { steps: paymentSteps, currentStepIndex: 0 });
+    }
+    if (order.status === "relay") {
+        return (0, jsx_runtime_1.jsx)(StepProgress_1.StepProgress, { steps: paymentSteps, currentStepIndex: 1 });
+    }
+    if (!isComplete && displayStatus !== "failure") {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-2", children: isComplete ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: `bg-as-success-secondary relative flex h-10 w-10 items-center justify-center rounded-full`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "text-as-content-icon-success h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry mt-1 text-center", children: description })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-error-secondary flex h-10 w-10 items-center justify-center rounded-full text-base", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "text-as-content-icon-error h-5 w-5" }) }), (0, jsx_runtime_1.jsx)("div", { className: "font-sf-rounded text-as-content-primary mt-4 text-lg font-semibold", children: text }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry text-center", style: { whiteSpace: "normal" }, children: description })] })) }));
 });

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

@@ -0,0 +1,13 @@
+import { components } from "../../../../anyspend/types/api";
+export declare function OrderTokenAmountFiat({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, className, }: {
+    disabled?: boolean;
+    inputValue: string;
+    onChangeInput: (value: string) => void;
+    context: "from" | "to";
+    address: string | undefined;
+    token: components["schemas"]["Token"];
+    setToken: (token: components["schemas"]["Token"]) => void;
+    chainId: number;
+    setChainId: (chainId: number) => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrderTokenAmountFiat = OrderTokenAmountFiat;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+const react_number_format_1 = require("react-number-format");
+const anyspend_1 = require("../../../../anyspend");
+const utils_1 = require("../../../../shared/utils");
+const relay_kit_ui_1 = require("@reservoir0x/relay-kit-ui");
+const ChainTokenIcon_1 = require("./ChainTokenIcon");
+function OrderTokenAmountFiat({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, className, }) {
+    // Track previous token to detect changes
+    const prevTokenRef = (0, react_1.useRef)(token.address);
+    (0, react_1.useEffect)(() => {
+        // Only trigger when token actually changes
+        if (prevTokenRef.current !== token.address) {
+            console.log(`Token changed from ${prevTokenRef.current} to ${token.address}`);
+            // For "from" context, reset to default value when token changes
+            if (context === "from") {
+                // Reset input to default for new token
+                onChangeInput("0.01");
+            }
+            // Update ref to current token
+            prevTokenRef.current = token.address;
+        }
+    }, [token.address, chainId, context, onChangeInput]);
+    const handleTokenSelect = (newToken) => {
+        // Mark that we're about to change tokens
+        prevTokenRef.current = "changing"; // Temporary value to force effect
+        // Set the chain ID first
+        setChainId(newToken.chainId);
+        // Then set the new token
+        setToken({
+            address: newToken.address,
+            chainId: newToken.chainId, // Use the new chain ID
+            decimals: newToken.decimals,
+            metadata: { logoURI: newToken.logoURI },
+            name: newToken.name,
+            symbol: newToken.symbol,
+        });
+        // If this is the source token, reset the amount immediately
+        if (context === "from") {
+            onChangeInput("0.01");
+        }
+    };
+    // Original token amount input design for other contexts
+    return ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("border-as-border-secondary bg-as-surface-primary flex cursor-pointer items-center justify-between rounded-xl border px-3 py-2", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [token.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId]?.logoUrl, tokenUrl: token.metadata.logoURI, className: "h-10 w-10" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "font-bold text-white", children: token.symbol?.substring(0, 2) || "??" }) })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 text-sm", children: anyspend_1.ALL_CHAINS[chainId]?.name || "Unknown" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-600", children: "\u2248" }), (0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 20, spellCheck: "false", className: "text-as-primary bg-as-surface-primary w-[100px]", pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, "aria-disabled": true, readOnly: true }, `input-${token.address}-${chainId}`), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 cursor-pointer text-gray-400" })] })] }) }, `selector-${context}-${token.address}-${chainId}`));
+}

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

@@ -0,0 +1,16 @@
+import { components } from "../../../../anyspend/types/api";
+export declare function OrderTokenAmountFiat({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, showAsReceiveAmount, }: {
+    disabled?: boolean;
+    inputValue: string;
+    onChangeInput: (value: string) => void;
+    context: "from" | "to";
+    address: string | undefined;
+    token: components["schemas"]["Token"];
+    setToken: (token: components["schemas"]["Token"]) => void;
+    chainId: number;
+    setChainId: (chainId: number) => void;
+    hideTokenSelect?: boolean;
+    canEditAmount?: boolean;
+    className?: string;
+    showAsReceiveAmount?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,63 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrderTokenAmountFiat = OrderTokenAmountFiat;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+const react_number_format_1 = require("react-number-format");
+const anyspend_1 = require("../../../../anyspend");
+const react_2 = require("../../../../global-account/react");
+const utils_1 = require("../../../../shared/utils");
+const relay_kit_ui_1 = require("@reservoir0x/relay-kit-ui");
+const ChainTokenIcon_1 = require("./ChainTokenIcon");
+function OrderTokenAmountFiat({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, showAsReceiveAmount = false, }) {
+    // Track previous token to detect changes
+    const prevTokenRef = (0, react_1.useRef)(token.address);
+    (0, react_1.useEffect)(() => {
+        // Only trigger when token actually changes
+        if (prevTokenRef.current !== token.address) {
+            console.log(`Token changed from ${prevTokenRef.current} to ${token.address}`);
+            // For "from" context, reset to default value when token changes
+            if (context === "from") {
+                // Reset input to default for new token
+                onChangeInput("0.01");
+            }
+            // Update ref to current token
+            prevTokenRef.current = token.address;
+        }
+    }, [token.address, chainId, context, onChangeInput]);
+    const handleTokenSelect = (newToken) => {
+        // Mark that we're about to change tokens
+        prevTokenRef.current = "changing"; // Temporary value to force effect
+        // Set the chain ID first
+        setChainId(newToken.chainId);
+        // Then set the new token
+        setToken({
+            address: newToken.address,
+            chainId: newToken.chainId, // Use the new chain ID
+            decimals: newToken.decimals,
+            metadata: { logoURI: newToken.logoURI },
+            name: newToken.name,
+            symbol: newToken.symbol,
+        });
+        // If this is the source token, reset the amount immediately
+        if (context === "from") {
+            onChangeInput("0.01");
+        }
+    };
+    // Calculate formatted amount for display
+    const formatAmount = (amount) => {
+        const numAmount = parseFloat(amount) || 0;
+        return numAmount.toLocaleString("en-US", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        });
+    };
+    if (showAsReceiveAmount) {
+        // Design-matched token display for receive amounts (like in PanelOnramp)
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center justify-between rounded-xl bg-gray-50 p-4", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [token.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId]?.logoUrl, tokenUrl: token.metadata.logoURI, className: "h-10 w-10" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "font-bold text-white", children: token.symbol?.substring(0, 2) || "??" }) })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-base font-semibold text-gray-900", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600", children: anyspend_1.ALL_CHAINS[chainId]?.name || "Unknown" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-600", children: "\u2248" }), (0, jsx_runtime_1.jsx)("span", { className: "text-lg font-semibold text-gray-900", children: formatAmount(inputValue) }), !hideTokenSelect && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 cursor-pointer text-gray-400" }) }, `selector-${context}-${token.address}-${chainId}`))] })] }));
+    }
+    // Original token amount input design for other contexts
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [!canEditAmount ? ((0, jsx_runtime_1.jsx)("h2", { className: "text-3xl font-medium text-white", children: inputValue || "--" })) : ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: "placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "outline", role: "combobox", className: "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", children: [token.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId]?.logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[chainId]?.name })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
+}

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

@@ -1,4 +1,14 @@
-export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, }: {
+import { components } from "../../../../anyspend/types/api";
+import { FiatPaymentMethod } from "./FiatPaymentMethod";
+export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, }: {
     srcAmountOnRamp: string;
     setSrcAmountOnRamp: (amount: string) => void;
+    selectedPaymentMethod?: FiatPaymentMethod;
+    setActivePanel: (panel: number) => void;
+    _recipientAddress?: string;
+    destinationToken?: components["schemas"]["Token"];
+    destinationChainId?: number;
+    destinationAmount?: string;
+    onDestinationTokenChange?: (token: components["schemas"]["Token"]) => void;
+    onDestinationChainChange?: (chainId: number) => void;
 }): import("react/jsx-runtime").JSX.Element;