@b3dotfun/sdk 0.0.28-alpha.0 → 0.0.28-alpha.2

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatUsername } from "../../../../shared/utils/index.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
+import { formatDisplayNumber } from "../../../../shared/utils/number.js";
+import { ChevronRight } from "lucide-react";
+import { motion } from "motion/react";
+import { OrderTokenAmount } from "./OrderTokenAmount.js";
+export function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, }) {
+    return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "receive-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: isDepositMode ? "Deposit" : "Receive" }), selectedRecipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: onSelectRecipient, children: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? formatUsername(recipientName) : shortenAddress(selectedRecipientAddress || "") }), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
+            // Fixed destination token display for buy mode and deposit mode
+            _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [dstToken.metadata?.logoURI && (_jsx("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: dstToken.symbol })] })] })) : (
+            // Token selection for regular swap mode
+            _jsx(OrderTokenAmount, { address: selectedRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), _jsxs("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: [formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
+                        style: "currency",
+                        fallback: "",
+                    }), anyspendQuote?.data?.currencyIn?.amountUsd &&
+                        anyspendQuote?.data?.currencyOut?.amountUsd &&
+                        (() => {
+                            const calculatePriceImpact = (inputUsd, outputUsd) => {
+                                if (!inputUsd || !outputUsd) {
+                                    return { percentage: "0.00", isNegative: false };
+                                }
+                                const input = Number(inputUsd);
+                                const output = Number(outputUsd);
+                                // Handle edge cases
+                                if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
+                                    return { percentage: "0.00", isNegative: false };
+                                }
+                                const percentageValue = ((output - input) / input) * 100;
+                                // Handle the -0.00% case
+                                if (percentageValue > -0.005 && percentageValue < 0) {
+                                    return { percentage: "0.00", isNegative: false };
+                                }
+                                return {
+                                    percentage: Math.abs(percentageValue).toFixed(2),
+                                    isNegative: percentageValue < 0,
+                                };
+                            };
+                            const { percentage, isNegative } = calculatePriceImpact(anyspendQuote.data.currencyIn.amountUsd, anyspendQuote.data.currencyOut.amountUsd);
+                            // Parse the percentage as a number for comparison
+                            const percentageNum = parseFloat(percentage);
+                            // Don't show if less than 1%
+                            if (percentageNum < 1) {
+                                return null;
+                            }
+                            // Using inline style to ensure color displays
+                            return (_jsxs("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
+                        })()] })] }));
+}

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

@@ -0,0 +1,6 @@
+interface ErrorSectionProps {
+    error?: Error | null;
+    message?: string;
+}
+export declare function ErrorSection({ error, message }: ErrorSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert } from "lucide-react";
+export function ErrorSection({ error, message }) {
+    if (!error && !message) {
+        return null;
+    }
+    const errorMessage = message || error?.message || "An error occurred";
+    return (_jsxs("div", { className: "error-section bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl px-4 py-2", children: [_jsx(CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), _jsx("div", { className: "text-as-red text-sm", children: errorMessage })] }));
+}

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

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

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

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { toast } from "sonner";
 import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
-export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, }) {
+export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, }) {
     // Get geo-based onramp options to access fee information
     const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
     // Helper function to get fees from API data
@@ -66,7 +66,7 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return (_jsxs("div", { className: "bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(7), children: selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
+    return (_jsxs("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
                                         width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
                                     } })] }) }), _jsx("div", { className: "mx-auto mb-6 inline-grid grid-cols-4 gap-2", children: ["5", "10", "20", "25"].map(value => (_jsxs("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
                                 ? "border-as-border-secondary bg-as-surface-secondary"

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

@@ -0,0 +1,20 @@
+import { components } from "../../../types/api";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import { FiatPaymentMethod } from "./FiatPaymentMethod";
+interface PaySectionProps {
+    paymentType: "crypto" | "fiat";
+    selectedSrcChainId: number;
+    setSelectedSrcChainId: (chainId: number) => void;
+    selectedSrcToken: components["schemas"]["Token"];
+    setSelectedSrcToken: (token: components["schemas"]["Token"]) => void;
+    srcAmount: string;
+    setSrcAmount: (amount: string) => void;
+    setIsSrcInputDirty: (dirty: boolean) => void;
+    selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+    selectedFiatPaymentMethod: FiatPaymentMethod;
+    onSelectCryptoPaymentMethod: () => void;
+    onSelectFiatPaymentMethod: () => void;
+    anyspendQuote?: any;
+}
+export declare function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }: PaySectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, useAccountWallet, useTokenData } from "../../../../global-account/react/index.js";
+import { formatUsername } from "../../../../shared/utils/index.js";
+import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
+import { formatDisplayNumber } from "../../../../shared/utils/number.js";
+import { ChevronRight } from "lucide-react";
+import { motion } from "motion/react";
+import { useEffect, useRef } from "react";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
+import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
+import { OrderTokenAmount } from "./OrderTokenAmount.js";
+import { TokenBalance } from "./TokenBalance.js";
+export function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }) {
+    const { address: globalAddress, wallet: globalWallet, ensName: connectedName } = useAccountWallet();
+    const connectedAddress = globalWallet?.address;
+    const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
+    // Add ref to track if we've applied metadata
+    const appliedSrcMetadataRef = useRef(false);
+    // Update source token with metadata
+    useEffect(() => {
+        if (selectedSrcToken && srcTokenMetadata && !appliedSrcMetadataRef.current) {
+            // Mark as applied
+            appliedSrcMetadataRef.current = true;
+            const enhancedToken = {
+                ...selectedSrcToken,
+                decimals: srcTokenMetadata.decimals || selectedSrcToken.decimals,
+                symbol: srcTokenMetadata.symbol || selectedSrcToken.symbol,
+                name: srcTokenMetadata.name || selectedSrcToken.name,
+                metadata: {
+                    ...selectedSrcToken.metadata,
+                    logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI,
+                },
+            };
+            setSelectedSrcToken(enhancedToken);
+        }
+    }, [srcTokenMetadata, selectedSrcToken, setSelectedSrcToken]);
+    // Reset source token ref when address/chain changes
+    useEffect(() => {
+        appliedSrcMetadataRef.current = false;
+    }, [selectedSrcToken.address, selectedSrcToken.chainId]);
+    return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [globalAddress ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })) : (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) }))] }), paymentType === "crypto" ? (_jsxs(_Fragment, { children: [_jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+                            setIsSrcInputDirty(true);
+                            setSrcAmount(value);
+                        }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
+                                    style: "currency",
+                                    fallback: "",
+                                }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
+                                    setIsSrcInputDirty(true);
+                                    setSrcAmount(value);
+                                } })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { type: "text", value: srcAmount, onChange: e => setSrcAmount(e.target.value.replace(/[^0-9.]/g, "")), placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
+                                        width: `${Math.max(50, srcAmount.length * 34)}px`,
+                                    } })] }) }), _jsx("div", { className: "mx-auto mb-6 inline-grid grid-cols-4 gap-2", children: ["5", "10", "20", "25"].map(value => (_jsxs("button", { onClick: () => setSrcAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmount === value
+                                ? "border-as-border-secondary bg-as-surface-secondary"
+                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) })] }))] }));
+}

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

@@ -0,0 +1,10 @@
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import { FiatPaymentMethod } from "./FiatPaymentMethod";
+interface TabSectionProps {
+    activeTab: "crypto" | "fiat";
+    setActiveTab: (tab: "crypto" | "fiat") => void;
+    setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+    setSelectedFiatPaymentMethod: (method: FiatPaymentMethod) => void;
+}
+export declare function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, }: TabSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
+import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
+export function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, }) {
+    return (_jsx("div", { className: "tab-section w-full", children: _jsxs("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+                        setActiveTab("crypto");
+                        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when switching to crypto
+                        setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to crypto
+                    }, children: "Pay with crypto" }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+                        setActiveTab("fiat");
+                        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
+                        setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
+                    }, children: "Pay with Fiat" })] }) }));
+}

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

@@ -9,6 +9,7 @@ export { AnySpendStakeB3 } from "./AnySpendStakeB3";
 export { AnySpendTournament } from "./AnySpendTournament";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
 export { ChainTokenIcon } from "./common/ChainTokenIcon";
+export { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 export { OrderDetails } from "./common/OrderDetails";
 export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible";
 export { OrderHistory } from "./common/OrderHistory";
@@ -16,6 +17,7 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem";
 export { OrderStatus } from "./common/OrderStatus";
 export { OrderToken } from "./common/OrderToken";
 export { OrderTokenAmount } from "./common/OrderTokenAmount";
+export { PaySection } from "./common/PaySection";
 export { RecipientSelection } from "./common/RecipientSelection";
 export { StepProgress } from "./common/StepProgress";
 export { TokenBalance } from "./common/TokenBalance";

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

@@ -11,6 +11,7 @@ export { AnySpendTournament } from "./AnySpendTournament.js";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton.js";
 // Common Components
 export { ChainTokenIcon } from "./common/ChainTokenIcon.js";
+export { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
 export { OrderDetails } from "./common/OrderDetails.js";
 export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible.js";
 export { OrderHistory } from "./common/OrderHistory.js";
@@ -18,6 +19,7 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem.js";
 export { OrderStatus } from "./common/OrderStatus.js";
 export { OrderToken } from "./common/OrderToken.js";
 export { OrderTokenAmount } from "./common/OrderTokenAmount.js";
+export { PaySection } from "./common/PaySection.js";
 export { RecipientSelection } from "./common/RecipientSelection.js";
 export { StepProgress } from "./common/StepProgress.js";
 export { TokenBalance } from "./common/TokenBalance.js";

package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts

@@ -0,0 +1,165 @@
+import { components } from "../../types/api";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod";
+export declare enum PanelView {
+    MAIN = 0,
+    CRYPTO_PAYMENT_METHOD = 1,
+    FIAT_PAYMENT_METHOD = 2,
+    RECIPIENT_SELECTION = 3,
+    ORDER_DETAILS = 4,
+    LOADING = 5
+}
+interface UseAnyspendFlowProps {
+    paymentType?: "crypto" | "fiat";
+    recipientAddress?: string;
+    loadOrder?: string;
+    isDepositMode?: boolean;
+    onOrderSuccess?: (orderId: string) => void;
+    onTransactionSuccess?: () => void;
+    sourceTokenAddress?: string;
+    sourceTokenChainId?: number;
+}
+export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, }: UseAnyspendFlowProps): {
+    activePanel: PanelView;
+    setActivePanel: import("react").Dispatch<import("react").SetStateAction<PanelView>>;
+    orderId: string | undefined;
+    setOrderId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    oat: {
+        success: boolean;
+        message: string;
+        data: {
+            order: components["schemas"]["Order"];
+            depositTxs: components["schemas"]["DepositTx"][] | null;
+            relayTx: components["schemas"]["RelayTx"] | null;
+            executeTx: components["schemas"]["ExecuteTx"] | null;
+            refundTxs: components["schemas"]["RefundTx"][] | null;
+        };
+        statusCode: number;
+    } | undefined;
+    selectedSrcChainId: number;
+    setSelectedSrcChainId: import("react").Dispatch<import("react").SetStateAction<number>>;
+    selectedDstChainId: number;
+    setSelectedDstChainId: import("react").Dispatch<import("react").SetStateAction<number>>;
+    selectedSrcToken: {
+        chainId: number;
+        address: string;
+        symbol: string;
+        name: string;
+        decimals: number;
+        metadata: {
+            logoURI?: string;
+        };
+    };
+    setSelectedSrcToken: import("react").Dispatch<import("react").SetStateAction<{
+        chainId: number;
+        address: string;
+        symbol: string;
+        name: string;
+        decimals: number;
+        metadata: {
+            logoURI?: string;
+        };
+    }>>;
+    srcAmount: string;
+    setSrcAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
+    dstAmount: string;
+    setDstAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
+    isSrcInputDirty: boolean;
+    setIsSrcInputDirty: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+    setSelectedCryptoPaymentMethod: import("react").Dispatch<import("react").SetStateAction<CryptoPaymentMethodType>>;
+    selectedFiatPaymentMethod: FiatPaymentMethod;
+    setSelectedFiatPaymentMethod: import("react").Dispatch<import("react").SetStateAction<FiatPaymentMethod>>;
+    selectedRecipientAddress: string | undefined;
+    setSelectedRecipientAddress: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    recipientName: string | null | undefined;
+    globalAddress: string | undefined;
+    anyspendQuote: {
+        success: boolean;
+        message: string;
+        data: {
+            operation?: string;
+            sender?: string;
+            recipient?: string;
+            currencyIn?: {
+                currency?: {
+                    chainId?: number;
+                    address?: string;
+                    symbol?: string;
+                    name?: string;
+                    decimals?: number;
+                    metadata?: {
+                        logoURI?: string;
+                    };
+                };
+                amount?: string;
+                amountFormatted?: string;
+                amountUsd?: string;
+                minimumAmount?: string;
+            };
+            currencyOut?: {
+                currency?: {
+                    chainId?: number;
+                    address?: string;
+                    symbol?: string;
+                    name?: string;
+                    decimals?: number;
+                    metadata?: {
+                        logoURI?: string;
+                    };
+                };
+                amount?: string;
+                amountFormatted?: string;
+                amountUsd?: string;
+                minimumAmount?: string;
+            };
+            totalImpact?: {
+                usd?: string;
+                percent?: string;
+            };
+            swapImpact?: {
+                usd?: string;
+                percent?: string;
+            };
+            rate?: string;
+            slippageTolerance?: {
+                origin?: {
+                    usd?: string;
+                    value?: string;
+                    percent?: string;
+                };
+                destination?: {
+                    usd?: string;
+                    value?: string;
+                    percent?: string;
+                };
+            };
+            timeEstimate?: number;
+            userBalance?: string;
+        };
+        statusCode: number;
+    } | undefined;
+    isLoadingAnyspendQuote: boolean;
+    getAnyspendQuoteError: Error | null;
+    activeInputAmountInWei: string;
+    geoData: import("../../../anyspend/react").GeoData | undefined;
+    coinbaseAvailablePaymentMethods: {
+        id?: string;
+        min?: string;
+        max?: string;
+    }[];
+    stripeWeb2Support: {
+        isSupport: false;
+    } | {
+        isSupport: true;
+        formattedTotalUsd: string;
+        formattedOnrampUsd: string;
+        formattedFeeUsd: string;
+    };
+    getOnrampVendor: (paymentMethod: FiatPaymentMethod) => "coinbase" | "stripe" | "stripe-web2" | undefined;
+    createOrder: import("@tanstack/react-query").UseMutateFunction<any, Error, import("../../../anyspend/react").CreateOrderParams, unknown>;
+    isCreatingOrder: boolean;
+    createOnrampOrder: import("@tanstack/react-query").UseMutateFunction<any, Error, import("../../../anyspend/react").CreateOnrampOrderParams, unknown>;
+    isCreatingOnrampOrder: boolean;
+};
+export {};

package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js

@@ -0,0 +1,180 @@
+import { B3_TOKEN, getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
+import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
+import { anyspendService } from "../../../anyspend/services/anyspend.js";
+import { useAccountWallet, useProfile } from "../../../global-account/react/index.js";
+import { formatTokenAmount, formatUnits } from "../../../shared/utils/number.js";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { parseUnits } from "viem";
+import { base, mainnet } from "viem/chains";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod.js";
+import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod.js";
+export var PanelView;
+(function (PanelView) {
+    PanelView[PanelView["MAIN"] = 0] = "MAIN";
+    PanelView[PanelView["CRYPTO_PAYMENT_METHOD"] = 1] = "CRYPTO_PAYMENT_METHOD";
+    PanelView[PanelView["FIAT_PAYMENT_METHOD"] = 2] = "FIAT_PAYMENT_METHOD";
+    PanelView[PanelView["RECIPIENT_SELECTION"] = 3] = "RECIPIENT_SELECTION";
+    PanelView[PanelView["ORDER_DETAILS"] = 4] = "ORDER_DETAILS";
+    PanelView[PanelView["LOADING"] = 5] = "LOADING";
+})(PanelView || (PanelView = {}));
+export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, }) {
+    // Panel and order state
+    const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
+    const [orderId, setOrderId] = useState(loadOrder);
+    const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(orderId);
+    // Token selection state - use provided sourceTokenChainId if available
+    const [selectedSrcChainId, setSelectedSrcChainId] = useState(sourceTokenChainId || (paymentType === "fiat" ? base.id : mainnet.id));
+    const [selectedDstChainId, setSelectedDstChainId] = useState(base.id); // Default to Base for cross-chain swaps
+    const defaultSrcToken = paymentType === "fiat" ? USDC_BASE : getDefaultToken(selectedSrcChainId);
+    const [selectedSrcToken, setSelectedSrcToken] = useState(defaultSrcToken);
+    const [srcAmount, setSrcAmount] = useState(paymentType === "fiat" ? "5" : "0.1");
+    const [dstAmount, setDstAmount] = useState("");
+    const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
+    // Payment method state
+    const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
+    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
+    // Recipient state
+    const { address: globalAddress } = useAccountWallet();
+    const [selectedRecipientAddress, setSelectedRecipientAddress] = useState(recipientAddress);
+    const recipientProfile = useProfile({ address: selectedRecipientAddress, fresh: true });
+    const recipientName = recipientProfile.data?.name;
+    // Set default recipient address when wallet changes
+    useEffect(() => {
+        if (!selectedRecipientAddress && globalAddress) {
+            setSelectedRecipientAddress(globalAddress);
+        }
+    }, [selectedRecipientAddress, globalAddress]);
+    // Fetch specific token when sourceTokenAddress and sourceTokenChainId are provided
+    useEffect(() => {
+        const fetchSourceToken = async () => {
+            if (sourceTokenAddress && sourceTokenChainId) {
+                try {
+                    const token = await anyspendService.getToken(sourceTokenChainId, sourceTokenAddress);
+                    setSelectedSrcToken(token);
+                }
+                catch (error) {
+                    console.error("Failed to fetch source token:", error);
+                    toast.error(`Failed to load token ${sourceTokenAddress} on chain ${sourceTokenChainId}`);
+                    // Keep the default token on error
+                }
+            }
+        };
+        fetchSourceToken();
+    }, [sourceTokenAddress, sourceTokenChainId]);
+    // Helper function for onramp vendor mapping
+    const getOnrampVendor = (paymentMethod) => {
+        switch (paymentMethod) {
+            case FiatPaymentMethod.COINBASE_PAY:
+                return "coinbase";
+            case FiatPaymentMethod.STRIPE:
+                return "stripe-web2";
+            default:
+                return undefined;
+        }
+    };
+    // Get quote
+    const activeInputAmountInWei = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals).toString();
+    const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = useAnyspendQuote({
+        srcChain: paymentType === "fiat" ? base.id : selectedSrcChainId,
+        dstChain: isDepositMode ? base.id : selectedDstChainId, // For deposits, always Base; for swaps, use selected destination
+        srcTokenAddress: paymentType === "fiat" ? USDC_BASE.address : selectedSrcToken.address,
+        dstTokenAddress: isDepositMode ? B3_TOKEN.address : selectedSrcToken.address, // For deposits, always B3
+        type: "swap",
+        tradeType: "EXACT_INPUT",
+        amount: activeInputAmountInWei,
+        onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
+    });
+    // Get geo options for fiat
+    const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(paymentType === "fiat" ? formatUnits(activeInputAmountInWei, USDC_BASE.decimals) : "0");
+    // Update destination amount when quote changes
+    useEffect(() => {
+        if (anyspendQuote?.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
+            const amount = anyspendQuote.data.currencyOut.amount;
+            const decimals = anyspendQuote.data.currencyOut.currency.decimals;
+            const formattedAmount = formatTokenAmount(BigInt(amount), decimals, 6, false);
+            setDstAmount(formattedAmount);
+        }
+        else {
+            setDstAmount("");
+        }
+    }, [anyspendQuote]);
+    // Order creation hooks
+    const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
+        onSuccess: data => {
+            const newOrderId = data.data.id;
+            setOrderId(newOrderId);
+            setActivePanel(PanelView.ORDER_DETAILS);
+            onOrderSuccess?.(newOrderId);
+        },
+        onError: error => {
+            console.error(error);
+            toast.error("Failed to create order: " + error.message);
+        },
+    });
+    const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = useAnyspendCreateOnrampOrder({
+        onSuccess: data => {
+            const newOrderId = data.data.id;
+            setOrderId(newOrderId);
+            setActivePanel(PanelView.ORDER_DETAILS);
+            onOrderSuccess?.(newOrderId);
+        },
+        onError: error => {
+            console.error(error);
+            toast.error("Failed to create order: " + error.message);
+        },
+    });
+    // Handle order completion
+    useEffect(() => {
+        if (oat?.data?.order.status === "executed") {
+            console.log("Order executed successfully");
+            onTransactionSuccess?.();
+        }
+    }, [oat?.data?.order.status, onTransactionSuccess]);
+    return {
+        // State
+        activePanel,
+        setActivePanel,
+        orderId,
+        setOrderId,
+        oat,
+        // Token state
+        selectedSrcChainId,
+        setSelectedSrcChainId,
+        selectedDstChainId,
+        setSelectedDstChainId,
+        selectedSrcToken,
+        setSelectedSrcToken,
+        srcAmount,
+        setSrcAmount,
+        dstAmount,
+        setDstAmount,
+        isSrcInputDirty,
+        setIsSrcInputDirty,
+        // Payment methods
+        selectedCryptoPaymentMethod,
+        setSelectedCryptoPaymentMethod,
+        selectedFiatPaymentMethod,
+        setSelectedFiatPaymentMethod,
+        // Recipient
+        selectedRecipientAddress,
+        setSelectedRecipientAddress,
+        recipientName,
+        globalAddress,
+        // Quote data
+        anyspendQuote,
+        isLoadingAnyspendQuote,
+        getAnyspendQuoteError,
+        activeInputAmountInWei,
+        // Geo/onramp data
+        geoData,
+        coinbaseAvailablePaymentMethods,
+        stripeWeb2Support,
+        getOnrampVendor,
+        // Order creation
+        createOrder,
+        isCreatingOrder,
+        createOnrampOrder,
+        isCreatingOnrampOrder,
+    };
+}

package/dist/esm/anyspend/react/hooks/useSigMint.d.ts

@@ -28,10 +28,10 @@ export declare const useGenerateSigMintData: ({ recipientAddress, contractAddres
                     description?: string | undefined;
                     properties?: any;
                     image?: string | undefined;
+                    backgroundColor?: string | undefined;
                     externalLink?: string | undefined;
                     appUri?: string | undefined;
                     attributes?: any;
-                    backgroundColor?: string | undefined;
                     promptImageUrl?: string | undefined;
                 };
             } | undefined;
@@ -48,8 +48,8 @@ export declare const useGenerateSigMintData: ({ recipientAddress, contractAddres
             creatorMap?: {} | undefined;
             chainId: number;
             address: string;
-            title: string;
             _id: string | {};
+            title: string;
         };
     } | null;
     error: Error | null;