@b3dotfun/sdk 0.0.7-alpha.12 → 0.0.7-alpha.14

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ABI_ERC20_STAKING, B3_TOKEN, OrderType } from "../../../anyspend/index.js";
-import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useChainSwitchWithAction, useHasMounted, useModalStore, useTokenBalance } from "../../../global-account/react/index.js";
+import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useChainSwitchWithAction, useHasMounted, useModalStore, useTokenBalance, } from "../../../global-account/react/index.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
 import { motion } from "framer-motion";
 import invariant from "invariant";
@@ -16,7 +16,7 @@ import { SolIcon } from "./icons/SolIcon.js";
 import { UsdcIcon } from "./icons/USDCIcon.js";
 const basePublicClient = createPublicClient({
     chain: base,
-    transport: http()
+    transport: http(),
 });
 const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
 function generateEncodedDataForStakingB3(amount, beneficiary) {
@@ -24,16 +24,16 @@ function generateEncodedDataForStakingB3(amount, beneficiary) {
     const encodedData = encodeFunctionData({
         abi: ABI_ERC20_STAKING,
         functionName: "stake",
-        args: [BigInt(amount), beneficiary]
+        args: [BigInt(amount), beneficiary],
     });
     return encodedData;
 }
-export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", recipientAddress, stakeAmount, onSuccess }) {
+export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", recipientAddress, stakeAmount, onSuccess, }) {
     const hasMounted = useHasMounted();
     const { setB3ModalOpen } = useModalStore();
     // Fetch B3 token balance
-    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance } = useTokenBalance({
-        token: B3_TOKEN
+    const { formattedBalance: b3Balance, isLoading: isBalanceLoading, rawBalance: b3RawBalance, } = useTokenBalance({
+        token: B3_TOKEN,
     });
     // Wagmi hooks for direct staking
     const { address } = useAccount();
@@ -47,8 +47,8 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
     const { isLoading: isTxPending, isSuccess: isTxSuccess } = useWaitForTransactionReceipt({
         hash: stakingTxHash,
         query: {
-            structuralSharing: false // Disable to avoid BigInt serialization issues
-        }
+            structuralSharing: false, // Disable to avoid BigInt serialization issues
+        },
     });
     // Show success modal when transaction is confirmed
     useEffect(() => {
@@ -148,7 +148,7 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
                     address: B3_TOKEN.address,
                     abi: erc20Abi,
                     functionName: "allowance",
-                    args: [address, ERC20Staking]
+                    args: [address, ERC20Staking],
                 });
                 // If allowance is insufficient, request approval
                 if (allowance < BigInt(userStakeAmount)) {
@@ -157,7 +157,7 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
                         address: B3_TOKEN.address,
                         abi: erc20Abi,
                         functionName: "approve",
-                        args: [ERC20Staking, BigInt(userStakeAmount)]
+                        args: [ERC20Staking, BigInt(userStakeAmount)],
                     });
                     toast.info("Approval confirmed. Proceeding with stake...");
                 }
@@ -167,7 +167,7 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
                     address: ERC20Staking,
                     abi: ABI_ERC20_STAKING,
                     functionName: "stake",
-                    args: [BigInt(userStakeAmount), recipientAddress]
+                    args: [BigInt(userStakeAmount), recipientAddress],
                 });
                 setStakingTxHash(stakeHash);
                 toast.success("Staking transaction submitted!");
@@ -208,18 +208,18 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
         return (_jsx(StyleRoot, { children: _jsxs("div", { className: "bg-b3-react-background flex w-full flex-col items-center", children: [_jsxs("div", { className: "w-full px-4", children: [_jsx(motion.div, { initial: false, animate: {
                                     opacity: hasMounted ? 1 : 0,
                                     y: hasMounted ? 0 : 20,
-                                    filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
                                 }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative mx-auto size-48", children: _jsx("video", { autoPlay: true, muted: true, playsInline: true, className: "size-full", src: "https://cdn.b3.fun/b3-sphere-to-coin.mp4" }) }), _jsx(motion.div, { initial: false, animate: {
                                     opacity: hasMounted ? 1 : 0,
                                     y: hasMounted ? 0 : 20,
-                                    filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
                                 }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, children: _jsx("h2", { className: "font-sf-rounded font-neue-montreal-medium mb-1 text-center text-2xl font-semibold", children: (() => {
                                         const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
                                         return hasEnoughBalance || !debouncedAmount ? "Stake B3" : "Swap & Stake B3";
                                     })() }) })] }), _jsxs(motion.div, { initial: false, animate: {
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
-                            filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                            filter: hasMounted ? "blur(0px)" : "blur(10px)",
                         }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [_jsx("div", { className: "mb-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-as-primary/70 text-sm font-medium", children: "I want to stake" }), _jsxs("span", { className: "text-as-primary/50 flex items-center gap-1 text-sm", children: ["Available: ", isBalanceLoading ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : `${b3Balance} B3`] })] }) }), _jsxs("div", { className: "relative", children: [_jsx(Input, { onFocus: onFocusStakeAmountInput, type: "text", placeholder: "0.00", value: displayAmount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && displayAmount ? "border-as-red" : "border-b3-react-border"}` }), _jsx("div", { className: "font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70", children: "B3" })] }), !isAmountValid && displayAmount && _jsx("p", { className: "text-as-red mt-2 text-sm", children: validationError }), _jsx("div", { className: "mt-4", children: (() => {
                                     const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
                                     if (!hasEnoughBalance || !debouncedAmount) {
@@ -234,15 +234,15 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
         return (_jsx(StyleRoot, { children: _jsxs("div", { className: "bg-b3-react-background flex w-full flex-col items-center", children: [_jsxs("div", { className: "w-full p-4", children: [_jsxs(motion.div, { initial: false, animate: {
                                     opacity: hasMounted ? 1 : 0,
                                     y: hasMounted ? 0 : 20,
-                                    filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
                                 }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative mx-auto mb-4 size-[120px]", children: [_jsx("div", { className: "absolute inset-0 scale-95 rounded-[50%] bg-black/30 blur-md" }), _jsxs(GlareCardRounded, { className: "overflow-hidden rounded-full border-none", children: [_jsx("img", { alt: "b3 coin", loading: "lazy", width: "64", height: "64", decoding: "async", "data-nimg": "1", className: "size-full shrink-0 bg-transparent text-transparent", src: "https://cdn.b3.fun/b3-coin-3d.png" }), _jsx("div", { className: "absolute inset-0 rounded-[50%] border border-white/10" })] })] }), _jsx(motion.div, { initial: false, animate: {
                                     opacity: hasMounted ? 1 : 0,
                                     y: hasMounted ? 0 : 20,
-                                    filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                                    filter: hasMounted ? "blur(0px)" : "blur(10px)",
                                 }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, children: _jsxs("h2", { className: "font-sf-rounded mb-1 text-center text-2xl font-semibold", children: ["Staked ", formatTokenAmount(BigInt(userStakeAmount), 18), " B3"] }) })] }), _jsxs(motion.div, { initial: false, animate: {
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
-                            filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                            filter: hasMounted ? "blur(0px)" : "blur(10px)",
                         }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [_jsx("div", { className: "mb-6", children: _jsx("a", { href: `https://basescan.org/tx/${stakingTxHash}`, target: "_blank", rel: "noopener noreferrer", className: "text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors", children: "View transaction" }) }), _jsx(Button, { onClick: () => {
                                     setB3ModalOpen(false);
                                     onSuccess?.();
@@ -251,6 +251,6 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
     const encodedData = generateEncodedDataForStakingB3(userStakeAmount, recipientAddress);
     return (_jsx(AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: OrderType.Custom, dstChainId: base.id, dstToken: B3_TOKEN, dstAmount: userStakeAmount, contractAddress: ERC20Staking, encodedData: encodedData, metadata: {
             type: OrderType.Custom,
-            action: "stake B3"
+            action: "stake B3",
         }, header: header, onSuccess: onSuccess, showRecipient: true }));
 }

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

@@ -5,14 +5,14 @@ import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/nu
 import { AnimatePresence } from "framer-motion";
 import { AnySpendCustom } from "./AnySpendCustom.js";
 export function AnySpendTournament(props) {
-    const { isMainnet = true, mode = "modal", action, loadOrder, tournamentChainId, tournamentContractAddress, tournamentMetadata, onSuccess } = props;
+    const { isMainnet = true, mode = "modal", action, loadOrder, tournamentChainId, tournamentContractAddress, tournamentMetadata, onSuccess, } = props;
     const dstToken = action === "join" ? props.tournamentEntryToken : props.tournamentFundToken;
     const dstAmount = action === "join" ? props.tournamentEntryFee : props.tournamentFundAmount;
-    const header = ({ anyspendPrice, isLoadingAnyspendPrice }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "z-10 mt-[-100px] flex h-[270px] w-full items-end justify-center", children: _jsx("img", { src: "https://cdn.b3.fun/tournament-play.svg", alt: "Tournament Play", className: "h-[200px] w-[360px] object-cover object-center" }) }), _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[100px] w-full" }), _jsxs("div", { className: "flex w-full flex-col items-center gap-1 p-6 pt-0", children: [_jsxs("span", { className: "font-sf-rounded text-center text-lg font-semibold", children: [action === "join" ? "Pay entry fee to join " : "Pay to fund ", " ", tournamentMetadata.name] }), _jsx("div", { className: "mt-2 flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsxs("div", { className: cn("text-as-primary group flex items-center text-2xl font-semibold transition-all", {
-                                            "opacity-0": isLoadingAnyspendPrice
+    const header = ({ anyspendPrice, isLoadingAnyspendPrice, }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "z-10 mt-[-100px] flex h-[270px] w-full items-end justify-center", children: _jsx("img", { src: "https://cdn.b3.fun/tournament-play.svg", alt: "Tournament Play", className: "h-[200px] w-[360px] object-cover object-center" }) }), _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[100px] w-full" }), _jsxs("div", { className: "flex w-full flex-col items-center gap-1 p-6 pt-0", children: [_jsxs("span", { className: "font-sf-rounded text-center text-lg font-semibold", children: [action === "join" ? "Pay entry fee to join " : "Pay to fund ", " ", tournamentMetadata.name] }), _jsx("div", { className: "mt-2 flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsxs("div", { className: cn("text-as-primary group flex items-center text-2xl font-semibold transition-all", {
+                                            "opacity-0": isLoadingAnyspendPrice,
                                         }), children: [formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }), " (", formatTokenAmount(BigInt(dstAmount), dstToken.decimals, 6, true), " ", dstToken.symbol, ")"] }) })) : (_jsx("div", { className: "h-[32px] w-full" })) })] })] })] }));
     return (_jsx(AnySpendCustom, { isMainnet: isMainnet, loadOrder: loadOrder, mode: mode, recipientAddress: action === "join" ? props.joinFor : undefined, orderType: action === "join" ? OrderType.JoinTournament : OrderType.FundTournament, dstChainId: tournamentChainId, dstToken: dstToken, dstAmount: dstAmount, contractAddress: tournamentContractAddress, encodedData: "0x", metadata: {
             type: action === "join" ? OrderType.JoinTournament : OrderType.FundTournament,
-            tournament: tournamentMetadata
+            tournament: tournamentMetadata,
         }, header: header, onSuccess: onSuccess, showRecipient: action === "join" }));
 }

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

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

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

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

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

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ALL_CHAINS, capitalizeFirstLetter, EVM_CHAINS, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, OrderStatus, OrderType, RELAY_ETH_ADDRESS, zNft, zToken, zTournament } from "../../../../anyspend/index.js";
-import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useChainSwitchWithAction, useModalStore, useOnchainName } from "../../../../global-account/react/index.js";
+import { ALL_CHAINS, capitalizeFirstLetter, EVM_CHAINS, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, OrderStatus, OrderType, RELAY_ETH_ADDRESS, zNft, zToken, zTournament, } from "../../../../anyspend/index.js";
+import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useChainSwitchWithAction, useModalStore, useOnchainName, } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { useColorMode } from "@chakra-ui/react";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust, WalletWalletConnect } from "@web3icons/react";
 import { motion } from "framer-motion";
-import { CheckIcon, ChevronDown, ChevronRight, Copy, ExternalLink, Home, Loader2, RefreshCcw, SquareArrowOutUpRight } from "lucide-react";
+import { 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";
@@ -19,7 +19,7 @@ import { b3 } from "viem/chains";
 import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
 import PaymentVendorUI from "./PaymentVendorUI.js";
 // Add this helper function near the top or just above the component
-function getOrderSuccessText({ order, tournament, formattedActualDstAmount, dstToken, recipientName, centerTruncate }) {
+function getOrderSuccessText({ order, tournament, formattedActualDstAmount, dstToken, recipientName, centerTruncate, }) {
     const recipient = recipientName || centerTruncate(order.recipientAddress, 8);
     let actionText = "";
     switch (order.type) {
@@ -114,7 +114,7 @@ function roundTokenAmount(amount) {
     const roundedDecimalPart = digits.join("");
     return `${wholePart}.${roundedDecimalPart}`;
 }
-export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, onBack }) {
+export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, onBack, }) {
     const router = useRouter();
     const searchParams = useSearchParams();
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
@@ -194,7 +194,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                 account: signer,
                 chain: EVM_CHAINS[order.srcChain].viem,
                 to: order.globalAddress,
-                value: BigInt(order.srcAmount)
+                value: BigInt(order.srcAmount),
             });
             setTxHash(hash);
         }
@@ -205,7 +205,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                 address: order.srcTokenAddress,
                 abi: erc20Abi,
                 functionName: "transfer",
-                args: [order.globalAddress, BigInt(order.srcAmount)]
+                args: [order.globalAddress, BigInt(order.srcAmount)],
             });
             setTxHash(hash);
         }
@@ -290,7 +290,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                     formattedActualDstAmount: formattedActualDstAmount,
                                     dstToken,
                                     recipientName,
-                                    centerTruncate
+                                    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") {
@@ -318,7 +318,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                     formattedActualDstAmount,
                                     dstToken,
                                     recipientName,
-                                    centerTruncate
+                                    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)
@@ -346,7 +346,7 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                                     .share({
                                                     title: "Complete Deposit",
                                                     text: "Complete your deposit on BSMNT.fun",
-                                                    url: permalink
+                                                    url: permalink,
                                                 })
                                                     .catch(error => console.log("Error sharing:", error));
                                             }
@@ -367,9 +367,9 @@ export const OrderDetails = memo(function OrderDetails({ isMainnet, mode = "moda
                                                 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 }) {
+function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
     return (_jsxs("div", { className: "relative flex w-full flex-1 items-center justify-between gap-4", children: [_jsxs("div", { className: "flex grow items-center gap-4", children: [_jsx(motion.div, { className: "bg-b3-react-background relative h-10 w-10 rounded-full", children: isProcessing ? (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full bg-black/70 shadow-lg backdrop-blur-sm", children: _jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : (_jsx(motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-brand/70 absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg shadow-purple-500/30 backdrop-blur-sm", style: {
-                                boxShadow: "0 0 15px 5px rgba(138, 43, 226, 0.2)"
+                                boxShadow: "0 0 15px 5px rgba(138, 43, 226, 0.2)",
                             }, children: _jsx(CheckIcon, { className: "text-as-primary h-3 w-3" }) })) }), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? (_jsx(TextShimmer, { duration: 1, children: title })) : (_jsx("span", { className: "text-as-primary", children: title })) })] }), _jsx("div", { className: "flex flex-col gap-1", children: tx ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: _jsx("a", { href: getExplorerTxUrl(chainId, tx.txHash), target: "_blank", children: _jsx("div", { className: "text-as-primary/30 font-mono text-xs", children: centerTruncate(tx?.txHash, 6) }) }) })) : null })] }));
 }
 export const OrderDetailsLoadingView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: [_jsxs(Badge, { variant: "default", className: "hover:bg-b3-react-background flex items-center gap-3 border-white/20 bg-white/10 px-4 py-1 text-base transition-colors", children: [_jsx(Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }), _jsx(TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), _jsxs("div", { className: "flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "ml-4 h-8 w-32" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-24" })] }), _jsx(Skeleton, { className: "mb-4 h-12 w-full" }), _jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [_jsxs(Skeleton, { className: "rounded-lg p-6 pb-3", children: [_jsx("div", { className: "h-[200px] w-[200px]" }), _jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: _jsx("div", { className: "h-5 w-5 rounded-full" }) })] }), _jsx("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-10 w-full" }, i))) })] })] }), _jsxs("div", { className: "bg-b3-react-background mt-8 w-full rounded-lg p-4", children: [_jsx(Skeleton, { className: "mb-3 h-4 w-48" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-10 flex-1" }), _jsx(Skeleton, { className: "h-10 flex-1" })] })] }), _jsx(Skeleton, { className: "h-10 w-full" })] }));

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

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

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

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

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

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

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

@@ -8,7 +8,7 @@ import { Button } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import { TokenSelector } from "@reservoir0x/relay-kit-ui";
 import { ChainTokenIcon } from "./ChainTokenIcon.js";
-export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName }) {
+export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName, }) {
     // Track previous token to detect changes
     const prevTokenRef = useRef(token.address);
     useEffect(() => {
@@ -36,7 +36,7 @@ export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context,
             decimals: newToken.decimals,
             metadata: { logoURI: newToken.logoURI },
             name: newToken.name,
-            symbol: newToken.symbol
+            symbol: newToken.symbol,
         });
         // If this is the source token, reset the amount immediately
         if (context === "from") {

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

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

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

@@ -5,7 +5,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useRef } from "react";
 import { toast } from "sonner";
 import { PaymentOptions } from "./PaymentOptions.js";
-export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp }) {
+export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, }) {
     // Get geo data for onramp availability
     const { geoData } = useGetGeo();
     const { coinbaseOnrampOptions } = useCoinbaseOnrampOptions(true, geoData?.country || "US");
@@ -32,7 +32,7 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp }) {
                             : 25000) ? (_jsxs("p", { className: "label-style -mb-3 mt-3 text-xs text-red-400 dark:bg-transparent", children: ["Maximum amount is $", coinbaseOnrampOptions?.paymentCurrencies?.[0]?.limits?.find(l => l.id === "ACH_BANK_ACCOUNT")?.max ||
                                 "25,000"] })) : (_jsx("p", { className: "label-style text-b3-react-foreground/60 -mb-3 mt-3 text-xs dark:bg-transparent", children: "Buy amount in USD" })), _jsxs("div", { className: "relative inline-flex items-center dark:bg-transparent", children: [_jsx("span", { className: "text-b3-react-foreground/60 -ms-3 -mt-2 text-2xl font-semibold dark:bg-transparent", children: "$" }), _jsx(Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "0.00", className: "placeholder:text-b3-react-foreground/60 h-auto min-w-[70px] border-0 bg-transparent py-6 text-center text-4xl font-semibold focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent", style: {
                                     width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
-                                    minWidth: srcAmountOnRamp ? `auto` : "105px"
+                                    minWidth: srcAmountOnRamp ? `auto` : "105px",
                                 } }), _jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { animate: { opacity: !srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0 ? 1 : 0 }, exit: { opacity: 0 }, transition: { duration: 0.5, ease: "easeInOut" }, className: "border-b3-react-foreground/10 absolute bottom-3 left-1 h-1 w-[90%] rounded-full border-t-2 border-dashed bg-transparent" }) })] })] }), _jsx("div", { className: "grid grid-cols-4 gap-4", children: ["5", "10", "25", "100"].map(value => (_jsxs("button", { onClick: () => handleQuickAmount(value), className: `rounded-lg border px-4 py-3 ${srcAmountOnRamp === value
                         ? "border-as-brand bg-as-brand/30"
                         : "border-as-stroke hover:border-as-brand hover:bg-as-brand/30"} transition-all duration-200`, children: ["$", value] }, value))) })] }));

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

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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { OnrampVendor, OrderType, useAnyspendCreateOnrampOrder, useGeoOnrampOptions } from "../../../../anyspend/index.js";
+import { OnrampVendor, OrderType, useAnyspendCreateOnrampOrder, useGeoOnrampOptions, } from "../../../../anyspend/index.js";
 import { Button } from "../../../../global-account/react/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { motion } from "framer-motion";
@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 export function PanelOnrampPayment({ srcAmountOnRamp, 
 // recipientName,
-recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl }) {
+recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, }) {
     // Use a stable amount for geo onramp options to prevent unnecessary refetches
     const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
     const hasInitialized = useRef(false);
@@ -20,7 +20,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
             hasInitialized.current = true;
         }
     }, [srcAmountOnRamp]);
-    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, isStripeWeb2Supported, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(isMainnet, stableAmountForGeo);
+    const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, isStripeWeb2Supported, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(isMainnet, stableAmountForGeo);
     const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
         onSuccess: data => {
             const orderId = data.data.id;
@@ -29,7 +29,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
         onError: error => {
             console.error(error);
             toast.error("Failed to create order: " + error.message);
-        }
+        },
     });
     const handlePaymentMethodClick = async (vendor, paymentMethod) => {
         try {
@@ -63,7 +63,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
                     return {
                         ...selectedDstToken,
                         chainId: destinationTokenChainId || selectedDstChainId,
-                        address: destinationTokenAddress
+                        address: destinationTokenAddress,
                     };
                 }
                 return selectedDstToken;
@@ -80,13 +80,13 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
                     paymentMethod: paymentMethod || "",
                     country: geoData?.country || "US",
                     ipAddress: geoData?.ip,
-                    redirectUrl: window.location.origin === "https://basement.fun" ? "https://basement.fun/deposit" : window.location.origin
+                    redirectUrl: window.location.origin === "https://basement.fun" ? "https://basement.fun/deposit" : window.location.origin,
                 },
                 expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0",
                 creatorAddress: globalAddress,
                 nft,
                 tournament,
-                payload
+                payload,
             });
         }
         catch (err) {
@@ -97,7 +97,7 @@ recipientAddress, isMainnet, isBuyMode, destinationTokenChainId, destinationToke
     return (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [_jsxs(_Fragment, { children: [_jsx("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), _jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && (_jsxs(motion.div, { initial: false, animate: {
                                     opacity: 1,
                                     y: 0,
-                                    filter: "blur(0px)"
+                                    filter: "blur(0px)",
                                 }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground/60", children: orderType === OrderType.Swap
                                             ? "Recipient"
                                             : orderType === OrderType.MintNFT

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

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

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

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

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

@@ -21,7 +21,7 @@ export default function PaymentStripeWeb2({ isMainnet, order, onPaymentSuccess }
     }
     return (_jsx(Elements, { stripe: stripePromise, options: {
             clientSecret: clientSecret || undefined,
-            appearance: { theme: theme === "light" ? "stripe" : "night" }
+            appearance: { theme: theme === "light" ? "stripe" : "night" },
         }, children: _jsx(StripePaymentForm, { order: order, clientSecret: clientSecret, onPaymentSuccess: onPaymentSuccess }) }));
 }
 function StripeLoadingState() {
@@ -30,7 +30,7 @@ function StripeLoadingState() {
 function StripeErrorState({ error }) {
     return (_jsx("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: _jsxs("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [_jsx("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsxs("div", { className: "text-as-red text-sm font-medium", children: ["Error: ", error] })] }) }));
 }
-function StripePaymentForm({ order, clientSecret, onPaymentSuccess }) {
+function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
     const stripe = useStripe();
     const elements = useElements();
     const [loading, setLoading] = useState(false);
@@ -73,7 +73,7 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess }) {
             console.log("@@stripe-web2-payment:confirming-payment:", JSON.stringify({ orderId: order.id }, null, 2));
             const { error, paymentIntent } = await stripe.confirmPayment({
                 elements,
-                redirect: "if_required"
+                redirect: "if_required",
             });
             if (error) {
                 console.error("@@stripe-web2-payment:error:", JSON.stringify(error, null, 2));
@@ -107,30 +107,30 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess }) {
         defaultValues: {
             billingDetails: {
                 name: "",
-                email: ""
-            }
+                email: "",
+            },
         },
         fields: {
-            billingDetails: "auto"
+            billingDetails: "auto",
         },
         wallets: {
             applePay: "auto",
-            googlePay: "auto"
-        }
+            googlePay: "auto",
+        },
     };
     const howItWorksSteps = [
         {
             number: 1,
-            description: "Enter your payment details securely using Stripe's encrypted form"
+            description: "Enter your payment details securely using Stripe's encrypted form",
         },
         {
             number: 2,
-            description: "Your payment is processed instantly and securely through our payment partner"
+            description: "Your payment is processed instantly and securely through our payment partner",
         },
         {
             number: 3,
-            description: "After payment confirmation, your order will be processed and completed automatically"
-        }
+            description: "After payment confirmation, your order will be processed and completed automatically",
+        },
     ];
     return (_jsxs("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: [_jsxs("form", { onSubmit: handleSubmit, className: "w-full space-y-6", children: [_jsxs("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-as-brand/20 flex h-8 w-8 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "text-as-brand h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }) }), _jsxs("div", { children: [_jsx("div", { className: "text-as-primary text-sm font-medium", children: "Secured by Stripe" }), _jsx("div", { className: "text-as-primary/50 text-xs", children: "End-to-end encrypted payment" })] })] }), _jsxs("button", { type: "button", onClick: () => setShowHowItWorks(true), className: "text-as-primary/60 hover:text-as-primary flex items-center gap-1 text-xs transition-colors", children: [_jsx(HelpCircle, { className: "h-4 w-4" }), _jsx("span", { children: "How it works" })] })] }), amount && (_jsxs("div", { className: "border-as-stroke border-t pt-4", children: [_jsx("div", { className: "text-as-primary/50 mb-3 text-sm", children: "Payment Breakdown" }), (() => {
                                         const originalAmount = Number(order.srcAmount) / 10 ** USDC_BASE.decimals;

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

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

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTokenBalance } from "../../../../global-account/react/index.js";
 import { formatUnits } from "viem";
-export function TokenBalance({ token, walletAddress, onChangeInput }) {
+export function TokenBalance({ token, walletAddress, onChangeInput, }) {
     const { rawBalance, formattedBalance, isLoading } = useTokenBalance({
         token,
-        address: walletAddress
+        address: walletAddress,
     });
     const handlePercentageClick = (percentage) => {
         if (!rawBalance)

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

@@ -5,6 +5,7 @@ export { AnySpendNFT } from "./AnySpendNFT";
 export { AnySpendNFTButton } from "./AnySpendNFTButton";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";
 export { AnySpendTournament } from "./AnySpendTournament";
+export { ChainTokenIcon } from "./common/ChainTokenIcon";
 export { OrderDetails } from "./common/OrderDetails";
 export { OrderHistory } from "./common/OrderHistory";
 export { OrderHistoryItem } from "./common/OrderHistoryItem";

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

@@ -7,6 +7,7 @@ export { AnySpendNFTButton } from "./AnySpendNFTButton.js";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3.js";
 export { AnySpendTournament } from "./AnySpendTournament.js";
 // Common Components
+export { ChainTokenIcon } from "./common/ChainTokenIcon.js";
 export { OrderDetails } from "./common/OrderDetails.js";
 export { OrderHistory } from "./common/OrderHistory.js";
 export { OrderHistoryItem } from "./common/OrderHistoryItem.js";

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

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