@b3dotfun/sdk 0.0.87-alpha.1 → 0.0.87

package/src/styles/index.css

@@ -152,7 +152,6 @@
   --red-100: #fde6d7;
   --green-100: #dff9e8;
   --border-brand: #2a9fff;
-  --border-primary: #d1d1d6;
   --yellow-100: #fee6c7;
   --purple-100: #f5edfa;
   --purple-300: #ddc3ef;
@@ -250,7 +249,6 @@ html[data-theme="dark"] .b3-root,
   --red-100: #6a5550;
   --green-100: rgba(68, 90, 76, 0.57);
   --border-brand: #2a9fff;
-  --border-primary: #d1d1d6;
   --yellow-100: #957a6c;
   --purple-100: rgba(113, 88, 126, 0.38);
   --purple-300: #a375c3;

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

@@ -1,122 +0,0 @@
-import { components } from "../../../anyspend/types/api";
-import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
-export interface DepositContractConfig {
-    /** Custom function ABI JSON string */
-    functionAbi: string;
-    /** The function name to call */
-    functionName: string;
-    /** Custom function arguments. Use "{{amount_out}}" for the deposit amount placeholder */
-    functionArgs: string[];
-    /** The contract address to deposit to */
-    to: string;
-    /** Optional spender address if different from contract address */
-    spenderAddress?: string;
-    /** Custom action label */
-    action?: string;
-}
-export interface ChainConfig {
-    /** Chain ID */
-    id: number;
-    /** Display name */
-    name: string;
-    /** Optional icon URL */
-    iconUrl?: string;
-}
-export interface AnySpendDepositProps {
-    /** Order ID to load an existing order */
-    loadOrder?: string;
-    /** Display mode */
-    mode?: "modal" | "page";
-    /** The recipient address for the deposit */
-    recipientAddress: string;
-    /** Payment type - crypto or fiat. If not set, shows chain selection first */
-    paymentType?: "crypto" | "fiat";
-    /** Source token address to pre-select */
-    sourceTokenAddress?: string;
-    /** Source chain ID to pre-select. If not provided, shows chain selection */
-    sourceTokenChainId?: number;
-    /** The destination token to receive */
-    destinationToken: components["schemas"]["Token"];
-    /** The destination chain ID */
-    destinationChainId: number;
-    /** Callback when deposit succeeds */
-    onSuccess?: (amount: string) => void;
-    /** Callback for opening a custom modal (e.g., for special token handling) */
-    onOpenCustomModal?: () => void;
-    /** Custom footer content */
-    mainFooter?: React.ReactNode;
-    /** Called when a token is selected. Call event.preventDefault() to prevent default behavior */
-    onTokenSelect?: (token: components["schemas"]["Token"], event: {
-        preventDefault: () => void;
-    }) => void;
-    /** Custom USD input value presets for fiat payment */
-    customUsdInputValues?: string[];
-    /** Whether to prefer using connected EOA wallet */
-    preferEoa?: boolean;
-    /** Minimum destination amount required */
-    minDestinationAmount?: number;
-    /** Custom header component */
-    header?: ({ anyspendPrice, isLoadingAnyspendPrice, }: {
-        anyspendPrice: GetQuoteResponse | undefined;
-        isLoadingAnyspendPrice: boolean;
-    }) => React.JSX.Element;
-    /** Order type for the deposit */
-    orderType?: "hype_duel" | "custom_exact_in" | "swap";
-    /** Custom action label displayed on buttons */
-    actionLabel?: string;
-    /** Configuration for depositing to a custom contract.
-     * If provided, creates a custom_exact_in order that calls the contract.
-     * If not provided, creates a simple hype_duel order for direct deposits.
-     */
-    depositContractConfig?: DepositContractConfig;
-    /** Whether to show chain selection step. Defaults to true if sourceTokenChainId is not provided */
-    showChainSelection?: boolean;
-    /** Custom list of supported chains. If not provided, uses default chains */
-    supportedChains?: ChainConfig[];
-    /** Minimum pool size for filtering tokens (default: 1,000,000) */
-    minPoolSize?: number;
-    /** Custom title for chain selection step */
-    chainSelectionTitle?: string;
-    /** Custom description for chain selection step */
-    chainSelectionDescription?: string;
-    /** Number of top chains to show (default: 3) */
-    topChainsCount?: number;
-    /** Callback when close button is clicked */
-    onClose?: () => void;
-}
-/**
- * A flexible deposit component that wraps AnySpendCustomExactIn with optional chain selection.
- *
- * @example
- * // Simple deposit with chain selection
- * <AnySpendDeposit
- *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
- *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
- * />
- *
- * @example
- * // Skip chain selection by providing sourceTokenChainId
- * <AnySpendDeposit
- *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
- *   sourceTokenChainId={base.id}
- *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
- * />
- *
- * @example
- * // Deposit with custom contract
- * <AnySpendDeposit
- *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
- *   depositContractConfig={{
- *     contractAddress: "0x...",
- *     functionName: "depositFor",
- *   }}
- *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
- * />
- */
-export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,190 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnySpendDeposit = AnySpendDeposit;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const anyspend_1 = require("../../../anyspend");
-const react_1 = require("../../../global-account/react");
-const cn_1 = require("../../../shared/utils/cn");
-const react_2 = require("@web3icons/react");
-const lucide_react_1 = require("lucide-react");
-const react_3 = require("react");
-const AnySpend_1 = require("./AnySpend");
-const AnySpendCustomExactIn_1 = require("./AnySpendCustomExactIn");
-const WarningText_1 = require("./common/WarningText");
-const CreditCardIcon_1 = require("./icons/CreditCardIcon");
-const QrCodeIcon_1 = require("./icons/QrCodeIcon");
-const QRDeposit_1 = require("./QRDeposit");
-// Default supported chains
-const DEFAULT_SUPPORTED_CHAINS = [
-    { id: 8453, name: "Base" },
-    { id: 1, name: "Ethereum" },
-    { id: 42161, name: "Arbitrum" },
-    { id: 10, name: "Optimism" },
-    { id: 137, name: "Polygon" },
-    { id: 56, name: "BNB Chain" },
-];
-// Minimum pool size to filter out low liquidity tokens
-const DEFAULT_MIN_POOL_SIZE = 1000000;
-function formatUsd(value) {
-    return new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-        minimumFractionDigits: 0,
-        maximumFractionDigits: value >= 100 ? 0 : 2,
-    }).format(value);
-}
-function formatDecimal(value) {
-    return new Intl.NumberFormat("en-US", {
-        style: "decimal",
-        minimumFractionDigits: 0,
-        maximumFractionDigits: value >= 100 ? 0 : 2,
-    }).format(value);
-}
-// Chain icon component
-function ChainIcon({ chainId, className }) {
-    const iconProps = {
-        variant: "branded",
-        className: (0, cn_1.cn)("anyspend-deposit-chain-icon", className),
-    };
-    switch (chainId) {
-        case 1:
-            return (0, jsx_runtime_1.jsx)(react_2.NetworkEthereum, { ...iconProps });
-        case 8453:
-            return (0, jsx_runtime_1.jsx)(react_2.NetworkBase, { ...iconProps });
-        case 137:
-            return (0, jsx_runtime_1.jsx)(react_2.NetworkPolygonPos, { ...iconProps });
-        case 42161:
-            return (0, jsx_runtime_1.jsx)(react_2.NetworkArbitrumOne, { ...iconProps });
-        case 10:
-            return (0, jsx_runtime_1.jsx)(react_2.NetworkOptimism, { ...iconProps });
-        case 56:
-            return (0, jsx_runtime_1.jsx)(react_2.NetworkBinanceSmartChain, { ...iconProps });
-        default:
-            return null;
-    }
-}
-/**
- * A flexible deposit component that wraps AnySpendCustomExactIn with optional chain selection.
- *
- * @example
- * // Simple deposit with chain selection
- * <AnySpendDeposit
- *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
- *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
- * />
- *
- * @example
- * // Skip chain selection by providing sourceTokenChainId
- * <AnySpendDeposit
- *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
- *   sourceTokenChainId={base.id}
- *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
- * />
- *
- * @example
- * // Deposit with custom contract
- * <AnySpendDeposit
- *   recipientAddress={userAddress}
- *   destinationToken={myToken}
- *   destinationChainId={base.id}
- *   depositContractConfig={{
- *     contractAddress: "0x...",
- *     functionName: "depositFor",
- *   }}
- *   onSuccess={(amount) => console.log(`Deposited ${amount}`)}
- * />
- */
-function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, }) {
-    const { connectedEOAWallet } = (0, react_1.useAccountWallet)();
-    const eoaAddress = connectedEOAWallet?.getAccount()?.address;
-    // Determine if we should show chain selection
-    const shouldShowChainSelection = showChainSelection ?? (!initialSourceChainId && !initialPaymentType);
-    const [step, setStep] = (0, react_3.useState)(shouldShowChainSelection ? "select-chain" : "deposit");
-    const [selectedChainId, setSelectedChainId] = (0, react_3.useState)(initialSourceChainId);
-    const [paymentType, setPaymentType] = (0, react_3.useState)(initialPaymentType ?? "crypto");
-    // Fetch balances for EOA wallet
-    const { data: balanceData, isLoading: isBalanceLoading } = (0, react_1.useSimBalance)(shouldShowChainSelection ? eoaAddress : undefined, supportedChains.map(c => c.id));
-    // Group balances by chain and calculate total USD value per chain
-    const chainBalances = (0, react_3.useMemo)(() => {
-        if (!balanceData?.balances)
-            return {};
-        const filteredBalances = balanceData.balances.filter(token => token.address === "native" || (token.pool_size && token.pool_size > minPoolSize));
-        return filteredBalances.reduce((acc, token) => {
-            const chainId = token.chain_id;
-            if (!acc[chainId]) {
-                acc[chainId] = {
-                    chainId,
-                    chainName: token.chain,
-                    totalUsdValue: 0,
-                    tokenCount: 0,
-                };
-            }
-            acc[chainId].totalUsdValue += token.value_usd || 0;
-            acc[chainId].tokenCount += 1;
-            return acc;
-        }, {});
-    }, [balanceData, minPoolSize]);
-    // Sort chains by USD value (highest first)
-    const sortedChains = (0, react_3.useMemo)(() => {
-        return supportedChains
-            .map(chain => ({
-            ...chain,
-            balance: chainBalances[chain.id]?.totalUsdValue || 0,
-            tokenCount: chainBalances[chain.id]?.tokenCount || 0,
-        }))
-            .sort((a, b) => b.balance - a.balance);
-    }, [supportedChains, chainBalances]);
-    // Get top chains with balance
-    const topChainsWithBalance = (0, react_3.useMemo)(() => {
-        return sortedChains.filter(chain => chain.balance > 0).slice(0, topChainsCount);
-    }, [sortedChains, topChainsCount]);
-    // Calculate total balance across all chains
-    const totalBalance = (0, react_3.useMemo)(() => {
-        return Object.values(chainBalances).reduce((sum, chain) => sum + chain.totalUsdValue, 0);
-    }, [chainBalances]);
-    if (!recipientAddress)
-        return null;
-    const tokenSymbol = destinationToken.symbol ?? "TOKEN";
-    // Determine order type based on config
-    const effectiveOrderType = orderType ?? (depositContractConfig ? "custom_exact_in" : "swap");
-    // Default header if not provided
-    const defaultHeader = () => ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-header mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "anyspend-deposit-title text-as-primary text-xl font-bold", children: paymentType === "crypto" ? `Deposit ${tokenSymbol}` : "Fund with Fiat" }) }) }));
-    const handleSelectChain = (chainId) => {
-        setSelectedChainId(chainId);
-        setPaymentType("crypto");
-        setStep("deposit");
-    };
-    const handleSelectCrypto = () => {
-        setPaymentType("crypto");
-        setSelectedChainId(undefined);
-        setStep("deposit");
-    };
-    const handleSelectFiat = () => {
-        setPaymentType("fiat");
-        setSelectedChainId(undefined);
-        setStep("deposit");
-    };
-    const handleBack = () => {
-        setStep("select-chain");
-        setSelectedChainId(undefined);
-    };
-    const handleSelectQrDeposit = () => {
-        setStep("qr-deposit");
-    };
-    // Chain selection view
-    if (step === "select-chain") {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-deposit anyspend-deposit-chain-selection font-inter bg-as-surface-primary relative mx-auto w-full max-w-[460px]", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: [onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-balance-header border-secondary border-b p-5", children: [!isBalanceLoading && totalBalance > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-balance", children: [(0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-balance-label text-as-secondary text-sm", children: "Your Balance" }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-deposit-balance-value text-as-primary text-3xl font-semibold", children: [formatDecimal(totalBalance), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: "USD" })] })] })), isBalanceLoading && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-balance-skeleton", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mb-2 h-4 w-24" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-8 w-32" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-options flex flex-col gap-2 p-6", children: [isBalanceLoading && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chains-skeleton flex flex-col gap-2", children: [...Array(topChainsCount)].map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "border-border-primary flex items-center justify-between rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-32" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-20" })] })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-5 w-5" })] }, i))) })), topChainsWithBalance.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chains flex flex-col gap-2", children: topChainsWithBalance.map(chain => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSelectChain(chain.id), className: "anyspend-deposit-chain-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-chain-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-chain-info", children: [(0, jsx_runtime_1.jsxs)("span", { className: "anyspend-deposit-chain-name text-as-primary flex items-center gap-1.5 font-medium", children: ["Deposit from ", chain.name, (0, jsx_runtime_1.jsx)(ChainIcon, { chainId: chain.id, className: "h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "anyspend-deposit-chain-balance text-as-secondary text-xs", children: [formatUsd(chain.balance), " available"] })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-chain-chevron text-as-secondary h-5 w-5" })] }, chain.id))) })), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-general-options flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectCrypto, className: "anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-deposit-option-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit Crypto" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Swap from any token on any chain" })] }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-divider flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-stroke h-px flex-1" }), (0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-divider-text text-as-secondary text-sm", children: "More options" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-stroke h-px flex-1" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectQrDeposit, className: "anyspend-deposit-option-button anyspend-deposit-qr-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(QrCodeIcon_1.QrCodeIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit with QR Code" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Send tokens directly to deposit address" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectFiat, className: "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-content flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(CreditCardIcon_1.CreditCardIcon, { className: "anyspend-deposit-option-icon h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit-option-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-option-title text-as-primary font-medium", children: "Fund with Fiat" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-deposit-option-description text-as-secondary text-xs", children: "Pay with card or bank transfer" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] })] }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId, className: "mt-2" })] })] }));
-    }
-    // QR Deposit view
-    if (step === "qr-deposit") {
-        return ((0, jsx_runtime_1.jsx)(QRDeposit_1.QRDeposit, { mode: mode, recipientAddress: recipientAddress, destinationToken: destinationToken, destinationChainId: destinationChainId, depositContractConfig: depositContractConfig, onBack: handleBack, onClose: onClose ?? handleBack }));
-    }
-    // Check if destination is Hyperliquid
-    const isHyperliquidDeposit = destinationChainId === anyspend_1.HYPERLIQUID_CHAIN_ID;
-    // Deposit view
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleBack, className: "anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("svg", { className: "anyspend-deposit-back-icon h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), (0, jsx_runtime_1.jsx)("span", { className: "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isHyperliquidDeposit ? ((0, jsx_runtime_1.jsx)(AnySpend_1.AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationToken.address, destinationTokenChainId: destinationChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true })) : ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig })) }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId, className: "px-4 pb-4" })] }));
-}

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

@@ -1,43 +0,0 @@
-import { components } from "../../../anyspend/types/api";
-import { DepositContractConfig } from "./AnySpendDeposit";
-export interface QRDepositProps {
-    /** Display mode */
-    mode?: "modal" | "page";
-    /** The recipient address (user's wallet) */
-    recipientAddress: string;
-    /** The source token to deposit (defaults to ETH on Base) */
-    sourceToken?: components["schemas"]["Token"];
-    /** The source chain ID (defaults to Base) */
-    sourceChainId?: number;
-    /** The destination token to receive */
-    destinationToken: components["schemas"]["Token"];
-    /** The destination chain ID */
-    destinationChainId: number;
-    /** Creator address (optional) */
-    creatorAddress?: string;
-    /** Contract config for custom execution after deposit */
-    depositContractConfig?: DepositContractConfig;
-    /** Callback when back button is clicked */
-    onBack?: () => void;
-    /** Callback when close button is clicked */
-    onClose?: () => void;
-    /** Callback when order is created successfully */
-    onOrderCreated?: (orderId: string) => void;
-    /** Callback when deposit is completed */
-    onSuccess?: (txHash?: string) => void;
-}
-/**
- * A component for displaying QR code deposit functionality.
- * Creates a deposit_first order on mount and shows a QR code that can be scanned to deposit tokens.
- * Users can change the source token/chain using the TokenSelector.
- *
- * @example
- * <QRDeposit
- *   recipientAddress={userAddress}
- *   destinationToken={usdcArbitrumToken}
- *   destinationChainId={42161}
- *   onBack={() => setStep("select-chain")}
- *   onSuccess={(txHash) => console.log("Deposit complete:", txHash)}
- * />
- */
-export declare function QRDeposit({ mode, recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, }: QRDepositProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,146 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QRDeposit = QRDeposit;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const anyspend_1 = require("../../../anyspend");
-const react_1 = require("../../../global-account/react");
-const cn_1 = require("../../../shared/utils/cn");
-const relay_kit_ui_1 = require("@relayprotocol/relay-kit-ui");
-const lucide_react_1 = require("lucide-react");
-const qrcode_react_1 = require("qrcode.react");
-const react_2 = require("react");
-const useAnyspendOrderAndTransactions_1 = require("../hooks/useAnyspendOrderAndTransactions");
-const useCreateDepositFirstOrder_1 = require("../hooks/useCreateDepositFirstOrder");
-const ChainTokenIcon_1 = require("./common/ChainTokenIcon");
-const OrderDetails_1 = require("./common/OrderDetails");
-const WarningText_1 = require("./common/WarningText");
-// Default source token: ETH on Base
-const DEFAULT_ETH_ON_BASE = {
-    chainId: 8453,
-    address: "0x0000000000000000000000000000000000000000",
-    symbol: "ETH",
-    name: "Ethereum",
-    decimals: 18,
-    metadata: {
-        logoURI: "https://assets.relay.link/icons/1/light.png",
-    },
-};
-/**
- * A component for displaying QR code deposit functionality.
- * Creates a deposit_first order on mount and shows a QR code that can be scanned to deposit tokens.
- * Users can change the source token/chain using the TokenSelector.
- *
- * @example
- * <QRDeposit
- *   recipientAddress={userAddress}
- *   destinationToken={usdcArbitrumToken}
- *   destinationChainId={42161}
- *   onBack={() => setStep("select-chain")}
- *   onSuccess={(txHash) => console.log("Deposit complete:", txHash)}
- * />
- */
-function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, }) {
-    const [copied, setCopied] = (0, react_2.useState)(false);
-    const [orderId, setOrderId] = (0, react_2.useState)();
-    const [globalAddress, setGlobalAddress] = (0, react_2.useState)();
-    const orderCreatedRef = (0, react_2.useRef)(false);
-    const onSuccessCalled = (0, react_2.useRef)(false);
-    // Source token/chain as state (can be changed by user)
-    const [sourceChainId, setSourceChainId] = (0, react_2.useState)(sourceChainIdProp ?? 8453);
-    const [sourceToken, setSourceToken] = (0, react_2.useState)(sourceTokenProp ?? DEFAULT_ETH_ON_BASE);
-    // Handle token selection from TokenSelector
-    const handleTokenSelect = (newToken) => {
-        const token = {
-            address: newToken.address,
-            chainId: newToken.chainId,
-            decimals: newToken.decimals,
-            metadata: { logoURI: newToken.logoURI },
-            name: newToken.name,
-            symbol: newToken.symbol,
-        };
-        // Reset order state when token changes
-        setOrderId(undefined);
-        setGlobalAddress(undefined);
-        orderCreatedRef.current = false;
-        // Update token and chain
-        setSourceChainId(newToken.chainId);
-        setSourceToken(token);
-    };
-    // Create order hook
-    const { createOrder, isCreatingOrder } = (0, useCreateDepositFirstOrder_1.useCreateDepositFirstOrder)({
-        onSuccess: data => {
-            const newOrderId = data.data.id;
-            const newGlobalAddress = data.data.globalAddress;
-            setOrderId(newOrderId);
-            setGlobalAddress(newGlobalAddress);
-            onOrderCreated?.(newOrderId);
-        },
-        onError: error => {
-            console.error("Failed to create deposit order:", error);
-            react_1.toast.error("Failed to create deposit order: " + error.message);
-        },
-    });
-    // Fetch order status
-    const { orderAndTransactions: oat } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(orderId);
-    // Create order on mount
-    (0, react_2.useEffect)(() => {
-        if (orderCreatedRef.current)
-            return;
-        orderCreatedRef.current = true;
-        createOrder({
-            recipientAddress,
-            srcChain: sourceChainId,
-            dstChain: destinationChainId,
-            srcToken: sourceToken,
-            dstToken: destinationToken,
-            creatorAddress,
-            contractConfig: depositContractConfig,
-        });
-    }, [
-        recipientAddress,
-        sourceChainId,
-        destinationChainId,
-        sourceToken,
-        destinationToken,
-        creatorAddress,
-        depositContractConfig,
-        createOrder,
-    ]);
-    // Call onSuccess when order is executed
-    (0, react_2.useEffect)(() => {
-        if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
-            const txHash = oat?.data?.executeTx?.txHash;
-            onSuccess?.(txHash);
-            onSuccessCalled.current = true;
-        }
-    }, [oat?.data?.order.status, oat?.data?.executeTx?.txHash, onSuccess]);
-    // Reset onSuccess flag when orderId changes
-    (0, react_2.useEffect)(() => {
-        onSuccessCalled.current = false;
-    }, [orderId]);
-    const displayAddress = globalAddress || recipientAddress;
-    const handleCopyAddress = async () => {
-        if (displayAddress) {
-            await navigator.clipboard.writeText(displayAddress);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        }
-    };
-    const handleBack = () => {
-        setCopied(false);
-        onBack?.();
-    };
-    const handleClose = () => {
-        setCopied(false);
-        onClose?.();
-    };
-    // Show order details if order has deposits or is being processed
-    if (oat?.data && oat.data.depositTxs && oat.data.depositTxs.length > 0) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-qr-order-details font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "anyspend-qr-order-details-content relative flex flex-col gap-4", children: (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: handleBack }) }) }));
-    }
-    // Show loading state while creating order (but not if we already have an orderId)
-    if (isCreatingOrder && !orderId) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-qr-loading font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-loading-content flex flex-col items-center justify-center gap-4 py-12", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "anyspend-qr-loading-spinner text-as-brand h-8 w-8 animate-spin" }), (0, jsx_runtime_1.jsx)("p", { className: "anyspend-qr-loading-text text-as-secondary text-sm", children: "Creating deposit order..." })] }) }));
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-qr-deposit font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-deposit-content flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleBack, className: "anyspend-qr-back-button text-as-secondary hover:text-as-primary", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), (0, jsx_runtime_1.jsx)("h2", { className: "anyspend-qr-title text-as-primary text-base font-semibold", children: "Deposit" }), onClose ? ((0, jsx_runtime_1.jsx)("button", { onClick: handleClose, className: "anyspend-qr-close-button text-as-secondary hover:text-as-primary", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-5" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-token-selector flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)("label", { className: "anyspend-qr-token-label text-as-secondary text-sm", children: "Send" }), (0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { chainIdsFilter: (0, anyspend_1.getAvailableChainIds)("from"), context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: (0, anyspend_1.getAvailableChainIds)("from"), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, setToken: handleTokenSelect, supportedWalletVMs: ["evm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", role: "combobox", className: "anyspend-qr-token-trigger border-as-stroke bg-as-surface-secondary flex h-auto w-full items-center justify-between gap-2 rounded-xl border px-3 py-2.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [sourceToken.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[sourceChainId]?.logoUrl, tokenUrl: sourceToken.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: sourceToken.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[sourceChainId]?.name ?? "Unknown" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-code-container flex flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-qr-code rounded-lg bg-white p-2", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: displayAddress, size: 120, level: "M", marginSize: 0 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "anyspend-qr-scan-hint text-as-secondary text-xs", children: ["SCAN WITH ", (0, jsx_runtime_1.jsx)("span", { className: "inline-block", children: "\uD83E\uDD8A" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-address-container flex flex-1 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-qr-address-label text-as-secondary text-sm", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-qr-address-row flex items-start gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "anyspend-qr-address text-as-primary break-all font-mono text-sm leading-relaxed", children: displayAddress }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "anyspend-qr-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0", children: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" }) })] })] })] }), (0, jsx_runtime_1.jsx)(WarningText_1.ChainWarningText, { chainId: destinationChainId }), (0, jsx_runtime_1.jsxs)(WarningText_1.WarningText, { children: ["Only send ", sourceToken.symbol, " on ", anyspend_1.ALL_CHAINS[sourceChainId]?.name ?? "the specified chain", ". Other tokens will not be converted."] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "anyspend-qr-copy-button flex w-full items-center justify-center gap-2 rounded-xl bg-blue-500 py-3.5 font-medium text-white transition-all hover:bg-blue-600", children: "Copy deposit address" })] }) }));
-}

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

@@ -1,32 +0,0 @@
-export interface WarningTextProps {
-    /** The warning message content */
-    children: React.ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * A generic warning text component with consistent styling.
- *
- * @example
- * <WarningText>
- *   Custom warning message
- * </WarningText>
- */
-export declare function WarningText({ children, className }: WarningTextProps): import("react/jsx-runtime").JSX.Element;
-export interface ChainWarningTextProps {
-    /** The chain ID to display warning for */
-    chainId: number;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * A chain-aware warning text component that displays chain-specific warnings.
- * Returns null if there's no warning for the given chain.
- *
- * @example
- * <ChainWarningText chainId={HYPERLIQUID_CHAIN_ID} />
- *
- * @example
- * <ChainWarningText chainId={destinationChainId} className="mt-4" />
- */
-export declare function ChainWarningText({ chainId, className }: ChainWarningTextProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WarningText = WarningText;
-exports.ChainWarningText = ChainWarningText;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const anyspend_1 = require("../../../../anyspend");
-const cn_1 = require("../../../../shared/utils/cn");
-/**
- * A generic warning text component with consistent styling.
- *
- * @example
- * <WarningText>
- *   Custom warning message
- * </WarningText>
- */
-function WarningText({ children, className }) {
-    return (0, jsx_runtime_1.jsx)("p", { className: (0, cn_1.cn)("anyspend-warning text-center text-xs italic text-red-500", className), children: children });
-}
-/**
- * A chain-aware warning text component that displays chain-specific warnings.
- * Returns null if there's no warning for the given chain.
- *
- * @example
- * <ChainWarningText chainId={HYPERLIQUID_CHAIN_ID} />
- *
- * @example
- * <ChainWarningText chainId={destinationChainId} className="mt-4" />
- */
-function ChainWarningText({ chainId, className }) {
-    // Chain-specific warning messages
-    if (chainId === anyspend_1.HYPERLIQUID_CHAIN_ID) {
-        return ((0, jsx_runtime_1.jsxs)(WarningText, { className: className, children: ["Minimum deposit amount: ", (0, jsx_runtime_1.jsx)("b", { children: "$1" })] }));
-    }
-    // No warning for this chain
-    return null;
-}

package/dist/cjs/anyspend/react/components/icons/CreditCardIcon.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-interface CreditCardIconProps {
-    className?: string;
-}
-export declare const CreditCardIcon: React.FC<CreditCardIconProps>;
-export {};

package/dist/cjs/anyspend/react/components/icons/CreditCardIcon.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CreditCardIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const CreditCardIcon = ({ className }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 0.5H32C36.1421 0.5 39.5 3.85786 39.5 8V32C39.5 36.1421 36.1421 39.5 32 39.5H8C3.85786 39.5 0.5 36.1421 0.5 32V8C0.5 3.85786 3.85786 0.5 8 0.5Z", fill: "#F4F4F5" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 0.5H32C36.1421 0.5 39.5 3.85786 39.5 8V32C39.5 36.1421 36.1421 39.5 32 39.5H8C3.85786 39.5 0.5 36.1421 0.5 32V8C0.5 3.85786 3.85786 0.5 8 0.5Z", stroke: "#E4E4E7" }), (0, jsx_runtime_1.jsx)("path", { d: "M30 18H10M19 22H14M10 16.2L10 23.8C10 24.9201 10 25.4802 10.218 25.908C10.4097 26.2843 10.7157 26.5903 11.092 26.782C11.5198 27 12.0799 27 13.2 27L26.8 27C27.9201 27 28.4802 27 28.908 26.782C29.2843 26.5903 29.5903 26.2843 29.782 25.908C30 25.4802 30 24.9201 30 23.8V16.2C30 15.0799 30 14.5198 29.782 14.092C29.5903 13.7157 29.2843 13.4097 28.908 13.218C28.4802 13 27.9201 13 26.8 13L13.2 13C12.0799 13 11.5198 13 11.092 13.218C10.7157 13.4097 10.4097 13.7157 10.218 14.092C10 14.5198 10 15.0799 10 16.2Z", stroke: "#51525C", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-exports.CreditCardIcon = CreditCardIcon;

package/dist/cjs/anyspend/react/components/icons/QrCodeIcon.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-interface QrCodeIconProps {
-    className?: string;
-}
-export declare const QrCodeIcon: React.FC<QrCodeIconProps>;
-export {};