@relayprotocol/relay-kit-ui 7.1.6 → 8.0.0

package/_esm/src/components/widgets/TokenWidget/widget/index.js

@@ -1,1100 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Flex, Text } from '../../../primitives/index.js';
-import { TabsRoot, TabsList, TabsTrigger } from '../../../primitives/Tabs.js';
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { useRelayClient } from '../../../../hooks/index.js';
-import useFallbackState from '../../../../hooks/useFallbackState.js';
-import { formatUnits } from 'viem';
-import { usePublicClient } from 'wagmi';
-import { ASSETS_RELAY_API } from '@relayprotocol/relay-sdk';
-import { EventNames } from '../../../../constants/events.js';
-import WidgetContainer from '../../WidgetContainer.js';
-import { ProviderOptionsContext } from '../../../../providers/RelayKitProvider.js';
-import { findBridgableToken } from '../../../../utils/tokens.js';
-import { UnverifiedTokenModal } from '../../../common/UnverifiedTokenModal.js';
-import { alreadyAcceptedToken } from '../../../../utils/localStorage.js';
-import { calculateUsdValue, getSwapEventData } from '../../../../utils/quote.js';
-import { getFeeBufferAmount } from '../../../../utils/nativeMaxAmount.js';
-import TokenWidgetRenderer, {} from './TokenWidgetRenderer.js';
-import BuyTabContent from '../BuyTabContent.js';
-import SellTabContent from '../SellTabContent.js';
-import { useQuote } from '@relayprotocol/relay-kit-hooks';
-import { useWalletGuards } from '../hooks/useWalletGuards.js';
-import { isChainVmTypeSupported, isWalletVmTypeCompatible } from '../../../../utils/address.js';
-const BASE_USDC_ADDRESS = '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913';
-const BASE_USDC_TOKEN = {
-    chainId: 8453,
-    address: BASE_USDC_ADDRESS,
-    name: 'USD Coin',
-    symbol: 'USDC',
-    decimals: 6,
-    logoURI: `${ASSETS_RELAY_API}/icons/currencies/usdc.png`,
-    verified: true
-};
-const isBaseUsdcToken = (token) => token?.chainId === BASE_USDC_TOKEN.chainId &&
-    token?.address?.toLowerCase() === BASE_USDC_ADDRESS;
-const COMPATIBLE_WALLET_VMS = [
-    'evm',
-    'suivm',
-    'tvm',
-    'hypevm',
-    'svm',
-    'bvm'
-];
-const TokenWidget = ({ fromToken: externalFromToken, setFromToken: setExternalFromToken, toToken: externalToToken, setToToken: setExternalToToken, activeTab: externalActiveTab, setActiveTab: setExternalActiveTab, defaultToAddress, defaultAmount, defaultTradeType, slippageTolerance, onOpenSlippageConfig, lockToToken = false, lockFromToken = false, lockChainId, singleChainMode = false, wallet, multiWalletSupportEnabled = false, linkedWallets, supportedWalletVMs, disableInputAutoFocus = false, popularChainIds, disablePasteWalletAddressOption, useSecureBaseUrl, paymentMethodMinHeight = '85vh', onSetPrimaryWallet, onLinkNewWallet, onFromTokenChange, onToTokenChange, onConnectWallet, onAnalyticEvent: _onAnalyticEvent, onSwapSuccess, onSwapValidating, onSwapError, onUnverifiedTokenDecline, walletsLoading = false }) => {
-    const onAnalyticEvent = useCallback((eventName, data) => {
-        try {
-            _onAnalyticEvent?.(eventName, data);
-        }
-        catch (e) {
-            console.error('Error in onAnalyticEvent', eventName, data, e);
-        }
-    }, [_onAnalyticEvent]);
-    const relayClient = useRelayClient();
-    const providerOptionsContext = useContext(ProviderOptionsContext);
-    const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides;
-    const [transactionModalOpen, setTransactionModalOpen] = useState(false);
-    const [depositAddressModalOpen, setDepositAddressModalOpen] = useState(false);
-    const [addressModalOpen, setAddressModalOpen] = useState(false);
-    const [pendingSuccessFlush, setPendingSuccessFlush] = useState(false);
-    const [unverifiedTokens, setUnverifiedTokens] = useState([]);
-    const declinedTokensRef = useRef(new Set());
-    const [fromToken, setFromToken] = useState(externalFromToken);
-    const [toToken, setToToken] = useState(externalToToken);
-    useEffect(() => {
-        setFromToken(externalFromToken);
-    }, [externalFromToken]);
-    useEffect(() => {
-        setToToken(externalToToken);
-    }, [externalToToken]);
-    const updateFromToken = useCallback((token) => {
-        setFromToken(token);
-        setExternalFromToken?.(token);
-    }, [setExternalFromToken]);
-    const updateToToken = useCallback((token) => {
-        setToToken(token);
-        setExternalToToken?.(token);
-    }, [setExternalToToken]);
-    const [activeTab, setActiveTab] = useFallbackState(setExternalActiveTab && externalActiveTab ? externalActiveTab : 'buy', setExternalActiveTab && externalActiveTab
-        ? [
-            externalActiveTab,
-            setExternalActiveTab
-        ]
-        : undefined);
-    const [isUsdInputMode, setIsUsdInputMode] = useState(activeTab === 'buy');
-    const [usdInputValue, setUsdInputValue] = useState('');
-    const [usdOutputValue, setUsdOutputValue] = useState('');
-    const [tokenInputCache, setTokenInputCache] = useState('');
-    const tabTokenStateRef = useRef({ buy: {}, sell: {} });
-    const prevActiveTabRef = useRef(activeTab);
-    const autoSelectedFromTokenRef = useRef(false);
-    const tabRecipientRef = useRef({ buy: {}, sell: {} });
-    const setTradeTypeRef = useRef(null);
-    const tradeTypeRef = useRef(defaultTradeType ?? 'EXPECTED_OUTPUT');
-    const hasLockedToken = lockFromToken || lockToToken;
-    const isSingleChainLocked = singleChainMode && lockChainId !== undefined;
-    const [localSlippageTolerance, setLocalSlippageTolerance] = useState(slippageTolerance);
-    useEffect(() => {
-        setLocalSlippageTolerance(slippageTolerance);
-    }, [slippageTolerance]);
-    useEffect(() => {
-        const desiredTradeType = activeTab === 'buy' ? 'EXPECTED_OUTPUT' : 'EXACT_INPUT';
-        if (tradeTypeRef.current !== desiredTradeType) {
-            setTradeTypeRef.current?.(desiredTradeType);
-        }
-    }, [activeTab]);
-    const handleOpenSlippageConfig = () => {
-        onOpenSlippageConfig?.();
-    };
-    const handleSlippageToleranceChange = (value) => {
-        setLocalSlippageTolerance(value);
-    };
-    const computedDefaultTradeType = defaultTradeType ??
-        (activeTab === 'buy' ? 'EXPECTED_OUTPUT' : 'EXACT_INPUT');
-    //Handle unverified tokens
-    useEffect(() => {
-        const tokensToVerify = [];
-        const getTokenKey = (token) => `${token.chainId}:${token.address.toLowerCase()}`;
-        if (fromToken && 'verified' in fromToken && !fromToken.verified) {
-            if (alreadyAcceptedToken(fromToken)) {
-                setFromToken({ ...fromToken, verified: true });
-            }
-            else if (!declinedTokensRef.current.has(getTokenKey(fromToken))) {
-                tokensToVerify.push({ token: fromToken, context: 'from' });
-            }
-        }
-        if (toToken && 'verified' in toToken && !toToken.verified) {
-            if (alreadyAcceptedToken(toToken)) {
-                setToToken({ ...toToken, verified: true });
-            }
-            else if (!declinedTokensRef.current.has(getTokenKey(toToken))) {
-                tokensToVerify.push({ token: toToken, context: 'to' });
-            }
-        }
-        if (tokensToVerify.length > 0) {
-            setUnverifiedTokens((prev) => [...prev, ...tokensToVerify]);
-            tokensToVerify.forEach(({ context }) => {
-                if (context === 'from') {
-                    setFromToken(undefined);
-                }
-                else {
-                    setToToken(undefined);
-                }
-            });
-        }
-    }, [fromToken, toToken]);
-    return (_jsx(TokenWidgetRenderer, { context: "Swap", transactionModalOpen: transactionModalOpen, setTransactionModalOpen: setTransactionModalOpen, depositAddressModalOpen: depositAddressModalOpen, defaultAmount: defaultAmount, defaultToAddress: defaultToAddress, defaultTradeType: computedDefaultTradeType, toToken: toToken, setToToken: updateToToken, fromToken: fromToken, setFromToken: updateFromToken, slippageTolerance: localSlippageTolerance, wallet: wallet, linkedWallets: linkedWallets, multiWalletSupportEnabled: multiWalletSupportEnabled, onSwapError: onSwapError, onAnalyticEvent: onAnalyticEvent, supportedWalletVMs: supportedWalletVMs, useSecureBaseUrl: useSecureBaseUrl, children: ({ quote, steps, swap, setSteps, feeBreakdown, fromToken, setFromToken, toToken, setToToken, error, toDisplayName, address, originAddressOverride: _originAddressOverride, setOriginAddressOverride, recipient, customToAddress, setCustomToAddress, destinationAddressOverride, setDestinationAddressOverride, tradeType, setTradeType, isSameCurrencySameRecipientSwap, allowUnsupportedOrigin, setAllowUnsupportedOrigin, allowUnsupportedRecipient, setAllowUnsupportedRecipient, debouncedInputAmountValue, debouncedAmountInputControls, setAmountInputValue, amountInputValue, amountOutputValue, debouncedOutputAmountValue, debouncedAmountOutputControls, setAmountOutputValue, toBalance, toBalancePending, isLoadingToBalance, isFetchingQuote, isLoadingFromBalance, fromBalance, fromBalancePending, highRelayerServiceFee, relayerFeeProportion, hasInsufficientBalance, isInsufficientLiquidityError, isCapacityExceededError, isCouldNotExecuteError, ctaCopy, isFromNative, timeEstimate, isSvmSwap, isBvmSwap, isValidFromAddress, isValidToAddress, slippageTolerance, fromChainWalletVMSupported, toChainWalletVMSupported, isRecipientLinked, swapError, recipientWalletSupportsChain, linkedWallet, quoteParameters, setSwapError, invalidateBalanceQueries, invalidateQuoteQuery, quoteInProgress, setQuoteInProgress, abortController, fromTokenPriceData, toTokenPriceData, isLoadingFromTokenPrice, isLoadingToTokenPrice }) => {
-            setTradeTypeRef.current = setTradeType;
-            tradeTypeRef.current = tradeType;
-            useEffect(() => {
-                if (prevActiveTabRef.current !== activeTab) {
-                    return;
-                }
-                tabTokenStateRef.current[activeTab] = {
-                    fromToken,
-                    toToken
-                };
-            }, [activeTab, fromToken, toToken]);
-            useEffect(() => {
-                tabRecipientRef.current[activeTab] = {
-                    override: typeof destinationAddressOverride === 'string'
-                        ? destinationAddressOverride
-                        : undefined,
-                    custom: typeof customToAddress === 'string' ? customToAddress : undefined
-                };
-            }, [activeTab, destinationAddressOverride, customToAddress]);
-            useEffect(() => {
-                setAllowUnsupportedOrigin(activeTab === 'buy');
-                setAllowUnsupportedRecipient(activeTab === 'sell');
-            }, [activeTab, setAllowUnsupportedOrigin, setAllowUnsupportedRecipient]);
-            // Auto-select first compatible wallet in buy tab when toToken is set and no destination is selected
-            useEffect(() => {
-                if (activeTab === 'buy' &&
-                    toToken &&
-                    multiWalletSupportEnabled &&
-                    linkedWallets &&
-                    linkedWallets.length > 0 &&
-                    !destinationAddressOverride &&
-                    !customToAddress) {
-                    // Find the destination chain for filtering compatible wallets
-                    const toChain = relayClient?.chains?.find((c) => c.id === toToken.chainId);
-                    if (toChain) {
-                        // Filter wallets compatible with the destination chain VM type
-                        const compatibleWallets = linkedWallets.filter((wallet) => {
-                            return isWalletVmTypeCompatible(wallet.vmType, toChain.vmType);
-                        });
-                        // Auto-select the first compatible wallet (prefer the current address if compatible)
-                        const currentAddressWallet = compatibleWallets.find((w) => w.address.toLowerCase() === address?.toLowerCase());
-                        const walletToSelect = currentAddressWallet || compatibleWallets[0];
-                        if (walletToSelect) {
-                            setDestinationAddressOverride(walletToSelect.address);
-                        }
-                    }
-                }
-            }, [
-                activeTab,
-                toToken,
-                multiWalletSupportEnabled,
-                linkedWallets,
-                destinationAddressOverride,
-                customToAddress,
-                relayClient?.chains,
-                setDestinationAddressOverride,
-                address
-            ]);
-            // Calculate the USD value of the input amount
-            const inputAmountUsd = useMemo(() => {
-                return (calculateUsdValue(fromTokenPriceData?.price, amountInputValue) ??
-                    null);
-            }, [fromTokenPriceData, amountInputValue]);
-            // Calculate the USD value of the output amount
-            const outputAmountUsd = useMemo(() => {
-                return (calculateUsdValue(toTokenPriceData?.price, amountOutputValue) ??
-                    null);
-            }, [toTokenPriceData, amountOutputValue]);
-            const percentageOptions = [20, 50];
-            const handleMaxAmountClicked = async (amount, percent, bufferAmount) => {
-                if (fromToken) {
-                    const formattedAmount = formatUnits(amount, fromToken?.decimals);
-                    setAmountInputValue(formattedAmount);
-                    setTradeType('EXACT_INPUT');
-                    debouncedAmountOutputControls.cancel();
-                    debouncedAmountInputControls.flush();
-                    onAnalyticEvent?.(EventNames.MAX_AMOUNT_CLICKED, {
-                        percent: percent,
-                        bufferAmount: bufferAmount ? bufferAmount.toString() : '0',
-                        chainType: fromChain?.vmType
-                    });
-                    if (isUsdInputMode && conversionRate) {
-                        const numericTokenAmount = Number(formattedAmount);
-                        if (!isNaN(numericTokenAmount)) {
-                            const usdEquivalent = numericTokenAmount * conversionRate;
-                            setUsdInputValue(usdEquivalent.toFixed(2));
-                        }
-                    }
-                }
-            };
-            const fromChain = relayClient?.chains?.find((chain) => chain.id === fromToken?.chainId);
-            const toChain = relayClient?.chains?.find((chain) => chain.id === toToken?.chainId);
-            const handleSetToToken = useCallback((token) => {
-                if (!token) {
-                    updateToToken(undefined);
-                    onToTokenChange?.(undefined);
-                    return;
-                }
-                let _token = token;
-                if (!fromChainWalletVMSupported) {
-                    const newToChain = relayClient?.chains.find((chain) => token?.chainId == chain.id);
-                    if (newToChain) {
-                        const _toToken = findBridgableToken(newToChain, _token);
-                        if (_toToken && _toToken.address != _token?.address) {
-                            _token = _toToken;
-                        }
-                    }
-                }
-                updateToToken(_token);
-                onToTokenChange?.(_token);
-            }, [
-                fromChainWalletVMSupported,
-                onToTokenChange,
-                relayClient,
-                updateToToken
-            ]);
-            const handleSetFromToken = useCallback((token) => {
-                if (!token) {
-                    updateFromToken(undefined);
-                    onFromTokenChange?.(undefined);
-                    return;
-                }
-                let _token = token;
-                const newFromChain = relayClient?.chains.find((chain) => token?.chainId == chain.id);
-                if (newFromChain?.vmType &&
-                    !isChainVmTypeSupported(newFromChain?.vmType, supportedWalletVMs)) {
-                    setTradeType('EXACT_INPUT');
-                    const _toToken = findBridgableToken(toChain, toToken);
-                    if (_toToken && _toToken?.address != toToken?.address) {
-                        handleSetToToken(_toToken);
-                    }
-                    const _fromToken = findBridgableToken(newFromChain, _token);
-                    if (_fromToken && _fromToken.address != _token?.address) {
-                        _token = _fromToken;
-                    }
-                }
-                updateFromToken(_token);
-                onFromTokenChange?.(_token);
-            }, [
-                handleSetToToken,
-                onFromTokenChange,
-                relayClient,
-                updateFromToken,
-                setTradeType,
-                supportedWalletVMs,
-                toChain,
-                toToken
-            ]);
-            // Get public client for the fromChain to estimate gas
-            const publicClient = usePublicClient({ chainId: fromChain?.id });
-            // Seed fromToken on sell tab if empty but we have a token available
-            useEffect(() => {
-                if (activeTab !== 'sell')
-                    return;
-                if (fromToken)
-                    return;
-                const candidateFromToken = tabTokenStateRef.current.sell?.fromToken ??
-                    tabTokenStateRef.current.buy?.toToken ??
-                    toToken;
-                if (candidateFromToken) {
-                    handleSetFromToken(candidateFromToken);
-                }
-            }, [activeTab, fromToken, toToken, handleSetFromToken]);
-            useWalletGuards({
-                multiWalletSupportEnabled,
-                allowUnsupportedOrigin,
-                allowUnsupportedRecipient,
-                fromChain,
-                toChain,
-                address,
-                recipient,
-                linkedWallets,
-                connectorKeyOverrides,
-                onSetPrimaryWallet,
-                isValidFromAddress,
-                isValidToAddress,
-                setOriginAddressOverride,
-                setCustomToAddress,
-                disablePasteWalletAddressOption,
-                customToAddress: customToAddress,
-                originAddressOverride: _originAddressOverride,
-                destinationAddressOverride: destinationAddressOverride,
-                setDestinationAddressOverride
-            });
-            const isAutoSlippage = slippageTolerance === undefined;
-            const isHighPriceImpact = Number(quote?.details?.totalImpact?.percent) < -3.5;
-            const totalImpactUsd = quote?.details?.totalImpact?.usd;
-            const showHighPriceImpactWarning = Boolean(isHighPriceImpact && totalImpactUsd && Number(totalImpactUsd) <= -10);
-            // Calculate conversion rate
-            const conversionRate = useMemo(() => {
-                if (isUsdInputMode) {
-                    // When in USD input mode, the conversion rate is the price of the fromToken.
-                    if (fromTokenPriceData?.price && fromTokenPriceData.price > 0) {
-                        return fromTokenPriceData.price;
-                    }
-                    else {
-                        // If no price data, or price is 0, return null to avoid stale calculations.
-                        return null;
-                    }
-                }
-                else {
-                    // When in token input mode, calculate rate from quote if available.
-                    if (amountInputValue &&
-                        Number(amountInputValue) > 0 &&
-                        quote?.details?.currencyIn?.amountUsd) {
-                        const tokenVal = Number(amountInputValue);
-                        const usdVal = Number(quote.details.currencyIn.amountUsd);
-                        if (tokenVal > 0 && usdVal > 0) {
-                            const rate = usdVal / tokenVal;
-                            return rate;
-                        }
-                        else {
-                            return null;
-                        }
-                    }
-                    else {
-                        // If in token mode and token input is cleared or zero, return null
-                        return null;
-                    }
-                }
-            }, [
-                isUsdInputMode,
-                fromTokenPriceData?.price,
-                quote?.details?.currencyIn?.amountUsd,
-                amountInputValue
-            ]);
-            // toggle between token and usd input mode
-            const toggleInputMode = () => {
-                if (!isUsdInputMode) {
-                    // Switching TO USD mode
-                    let newUsdInputValue = '';
-                    let newUsdOutputValue = '';
-                    // Calculate USD input value
-                    if (quote?.details?.currencyIn?.amountUsd &&
-                        Number(quote.details.currencyIn.amountUsd) > 0) {
-                        newUsdInputValue = String(Number(quote.details.currencyIn.amountUsd));
-                    }
-                    else if (inputAmountUsd && inputAmountUsd > 0) {
-                        newUsdInputValue = inputAmountUsd.toFixed(2);
-                    }
-                    else if (amountInputValue &&
-                        Number(amountInputValue) > 0 &&
-                        conversionRate &&
-                        conversionRate > 0) {
-                        newUsdInputValue = (Number(amountInputValue) * conversionRate).toFixed(2);
-                    }
-                    // Calculate USD output value
-                    if (quote?.details?.currencyOut?.amountUsd &&
-                        Number(quote.details.currencyOut.amountUsd) > 0) {
-                        newUsdOutputValue = String(Number(quote.details.currencyOut.amountUsd));
-                    }
-                    else if (outputAmountUsd && outputAmountUsd > 0) {
-                        newUsdOutputValue = outputAmountUsd.toFixed(2);
-                    }
-                    else if (amountOutputValue &&
-                        Number(amountOutputValue) > 0 &&
-                        toTokenPriceData?.price &&
-                        toTokenPriceData.price > 0) {
-                        newUsdOutputValue = (Number(amountOutputValue) * toTokenPriceData.price).toFixed(2);
-                    }
-                    setTokenInputCache(amountInputValue);
-                    setUsdInputValue(newUsdInputValue);
-                    setUsdOutputValue(newUsdOutputValue);
-                    setIsUsdInputMode(true);
-                    // Default to EXACT_INPUT unless we're currently in EXPECTED_OUTPUT mode with a valid USD output value
-                    if (tradeType !== 'EXPECTED_OUTPUT' || !newUsdOutputValue) {
-                        setTradeType('EXACT_INPUT');
-                    }
-                }
-                else {
-                    // Switching FROM USD mode
-                    if (!usdInputValue && tokenInputCache) {
-                        setAmountInputValue(tokenInputCache);
-                    }
-                    setUsdInputValue('');
-                    setUsdOutputValue('');
-                    setIsUsdInputMode(false);
-                    // Maintain current trade type when switching back to token mode
-                }
-            };
-            //Update token input value when USD input changes in USD mode
-            useEffect(() => {
-                if (isUsdInputMode) {
-                    if (conversionRate && conversionRate > 0 && usdInputValue) {
-                        const usdValue = Number(usdInputValue);
-                        if (!isNaN(usdValue) && usdValue > 0) {
-                            const tokenEquivalent = (usdValue / conversionRate).toFixed(fromToken?.decimals ?? 8);
-                            setAmountInputValue(tokenEquivalent);
-                        }
-                    }
-                    else if (usdInputValue === '' || Number(usdInputValue) === 0) {
-                        setAmountInputValue('');
-                    }
-                }
-            }, [
-                isUsdInputMode,
-                usdInputValue,
-                conversionRate,
-                setAmountInputValue,
-                fromToken?.decimals
-            ]);
-            //Update token output value when USD output changes in USD mode
-            useEffect(() => {
-                if (isUsdInputMode && tradeType === 'EXPECTED_OUTPUT') {
-                    if (toTokenPriceData?.price &&
-                        toTokenPriceData.price > 0 &&
-                        usdOutputValue) {
-                        const usdValue = Number(usdOutputValue);
-                        if (!isNaN(usdValue) && usdValue > 0) {
-                            const tokenEquivalent = (usdValue / toTokenPriceData.price).toFixed(toToken?.decimals ?? 8);
-                            setAmountOutputValue(tokenEquivalent);
-                        }
-                    }
-                    else if (usdOutputValue === '' || Number(usdOutputValue) === 0) {
-                        setAmountOutputValue('');
-                    }
-                }
-            }, [
-                isUsdInputMode,
-                tradeType,
-                usdOutputValue,
-                toTokenPriceData?.price,
-                setAmountOutputValue,
-                toToken?.decimals
-            ]);
-            //Update USD output value when in USD mode
-            useEffect(() => {
-                if (isUsdInputMode) {
-                    // For EXPECTED_OUTPUT, don't override user's typed value
-                    if (tradeType === 'EXPECTED_OUTPUT') {
-                        // User is controlling the output value directly
-                        return;
-                    }
-                    // For EXACT_INPUT, update based on quote or calculations
-                    if (quote?.details?.currencyOut?.amountUsd && !isFetchingQuote) {
-                        // Use quote USD value when available
-                        const quoteUsdValue = Number(quote.details.currencyOut.amountUsd);
-                        if (!isNaN(quoteUsdValue) && quoteUsdValue >= 0) {
-                            setUsdOutputValue(quoteUsdValue.toFixed(2));
-                        }
-                    }
-                    else if (toTokenPriceData?.price &&
-                        toTokenPriceData.price > 0 &&
-                        amountOutputValue &&
-                        Number(amountOutputValue) > 0) {
-                        // Fallback to direct token price calculation
-                        const tokenAmount = Number(amountOutputValue);
-                        const usdEquivalent = tokenAmount * toTokenPriceData.price;
-                        if (!isNaN(usdEquivalent) && usdEquivalent >= 0) {
-                            setUsdOutputValue(usdEquivalent.toFixed(2));
-                        }
-                    }
-                    else if (!amountOutputValue || Number(amountOutputValue) === 0) {
-                        setUsdOutputValue('');
-                    }
-                }
-            }, [
-                isUsdInputMode,
-                tradeType,
-                quote?.details?.currencyOut?.amountUsd,
-                isFetchingQuote,
-                toTokenPriceData?.price,
-                amountOutputValue
-            ]);
-            //Update USD input value when in EXPECTED_OUTPUT mode
-            useEffect(() => {
-                if (isUsdInputMode && tradeType === 'EXPECTED_OUTPUT') {
-                    if (quote?.details?.currencyIn?.amountUsd && !isFetchingQuote) {
-                        // Use quote USD value when available
-                        const quoteUsdValue = Number(quote.details.currencyIn.amountUsd);
-                        if (!isNaN(quoteUsdValue) && quoteUsdValue >= 0) {
-                            setUsdInputValue(quoteUsdValue.toFixed(2));
-                        }
-                    }
-                    else if (!amountInputValue || Number(amountInputValue) === 0) {
-                        setUsdInputValue('');
-                    }
-                }
-            }, [
-                isUsdInputMode,
-                tradeType,
-                quote?.details?.currencyIn?.amountUsd,
-                isFetchingQuote,
-                amountInputValue
-            ]);
-            const recipientLinkedWallet = linkedWallets?.find((wallet) => wallet.address === recipient);
-            const handlePrimaryAction = () => {
-                if (fromChainWalletVMSupported) {
-                    if (!isValidToAddress || !isValidFromAddress) {
-                        if (multiWalletSupportEnabled &&
-                            (isValidToAddress ||
-                                (!isValidToAddress && toChainWalletVMSupported))) {
-                            const chain = !isValidFromAddress ? fromChain : toChain;
-                            if (!address) {
-                                onConnectWallet?.();
-                            }
-                            else {
-                                onLinkNewWallet?.({
-                                    chain,
-                                    direction: !isValidFromAddress ? 'from' : 'to'
-                                })?.then((wallet) => {
-                                    if (!isValidFromAddress) {
-                                        onSetPrimaryWallet?.(wallet.address);
-                                    }
-                                    else {
-                                        setDestinationAddressOverride(wallet.address);
-                                        setCustomToAddress(undefined);
-                                    }
-                                });
-                            }
-                        }
-                        else {
-                            setAddressModalOpen(true);
-                        }
-                    }
-                    else {
-                        swap();
-                    }
-                }
-                else {
-                    if (!isValidToAddress) {
-                        if (multiWalletSupportEnabled && toChainWalletVMSupported) {
-                            if (!address) {
-                                onConnectWallet?.();
-                            }
-                            else {
-                                onLinkNewWallet?.({
-                                    chain: toChain,
-                                    direction: 'to'
-                                })?.then((wallet) => {
-                                    if (!wallet) {
-                                        return;
-                                    }
-                                    setDestinationAddressOverride(wallet.address);
-                                    setCustomToAddress(undefined);
-                                });
-                            }
-                        }
-                        else {
-                            setAddressModalOpen(true);
-                        }
-                    }
-                    else {
-                        const swapEventData = getSwapEventData(quote?.details, quote?.fees, quote?.steps ? quote?.steps : null, linkedWallet?.connector, quoteParameters);
-                        onAnalyticEvent?.(EventNames.SWAP_CTA_CLICKED, swapEventData);
-                        setDepositAddressModalOpen(true);
-                    }
-                }
-            };
-            const linkedWalletsLoading = multiWalletSupportEnabled && linkedWallets === undefined;
-            const walletAddressLoading = Boolean(wallet && !address);
-            useEffect(() => {
-                if (walletsLoading || linkedWalletsLoading || walletAddressLoading) {
-                    return;
-                }
-                const hasLinkedCompatibleWallet = linkedWallets?.some((wallet) => wallet?.vmType && COMPATIBLE_WALLET_VMS.includes(wallet.vmType)) ?? false;
-                const hasCompatibleWallet = Boolean(address && isValidFromAddress) || hasLinkedCompatibleWallet;
-                const baseSelected = isBaseUsdcToken(fromToken);
-                if (activeTab === 'buy' && !fromToken && !hasCompatibleWallet) {
-                    handleSetFromToken(BASE_USDC_TOKEN);
-                    autoSelectedFromTokenRef.current = true;
-                    return;
-                }
-                if (autoSelectedFromTokenRef.current && !baseSelected) {
-                    autoSelectedFromTokenRef.current = false;
-                }
-                if (autoSelectedFromTokenRef.current &&
-                    (activeTab !== 'buy' || hasCompatibleWallet)) {
-                    if (baseSelected) {
-                        handleSetFromToken(undefined);
-                    }
-                    autoSelectedFromTokenRef.current = false;
-                }
-            }, [
-                activeTab,
-                address,
-                handleSetFromToken,
-                linkedWallets,
-                fromToken,
-                isValidFromAddress,
-                linkedWalletsLoading,
-                multiWalletSupportEnabled,
-                walletAddressLoading,
-                walletsLoading
-            ]);
-            const handleTabChange = useCallback((nextTab, updateActiveTab) => {
-                const prevTab = prevActiveTabRef.current ?? activeTab;
-                if (nextTab === prevTab && !updateActiveTab) {
-                    return;
-                }
-                setAllowUnsupportedOrigin(nextTab === 'buy');
-                setAllowUnsupportedRecipient(nextTab === 'sell');
-                if (nextTab !== prevTab) {
-                    const storedNextState = tabTokenStateRef.current[nextTab] ?? {};
-                    const storedNextRecipient = tabRecipientRef.current[nextTab] ?? {};
-                    const prevFromToken = fromToken;
-                    const prevToToken = toToken;
-                    tabTokenStateRef.current[prevTab] = {
-                        fromToken: prevFromToken,
-                        toToken: prevToToken
-                    };
-                    tabRecipientRef.current[prevTab] = {
-                        override: typeof destinationAddressOverride === 'string'
-                            ? destinationAddressOverride
-                            : undefined,
-                        custom: typeof customToAddress === 'string'
-                            ? customToAddress
-                            : undefined
-                    };
-                    let nextFromToken;
-                    let nextToToken;
-                    if (nextTab === 'sell') {
-                        // Selling the page token: default to previously viewed token (prevToToken)
-                        nextFromToken =
-                            storedNextState.fromToken ??
-                                prevToToken ??
-                                prevFromToken ??
-                                undefined;
-                        // Payout token should remain empty unless user explicitly selected it on sell
-                        nextToToken = storedNextState.toToken ?? undefined;
-                    }
-                    else {
-                        // Buying the page token: default output token is prev page token
-                        nextToToken =
-                            storedNextState.toToken ??
-                                prevFromToken ??
-                                prevToToken ??
-                                undefined;
-                        // Payment method stays empty unless explicitly chosen on buy
-                        nextFromToken = storedNextState.fromToken ?? undefined;
-                    }
-                    handleSetFromToken(nextFromToken);
-                    handleSetToToken(nextToToken);
-                    setDestinationAddressOverride(storedNextRecipient.override);
-                    setCustomToAddress(storedNextRecipient.custom);
-                    // Auto-select first compatible wallet in buy tab if no destination is set
-                    if (nextTab === 'buy' &&
-                        multiWalletSupportEnabled &&
-                        linkedWallets &&
-                        linkedWallets.length > 0 &&
-                        !storedNextRecipient.override &&
-                        !storedNextRecipient.custom) {
-                        const toChainForRecipient = relayClient?.chains?.find((c) => c.id === nextToToken?.chainId);
-                        if (toChainForRecipient) {
-                            const compatibleWallets = linkedWallets.filter((wallet) => isWalletVmTypeCompatible(wallet.vmType, toChainForRecipient.vmType));
-                            if (compatibleWallets.length > 0) {
-                                setDestinationAddressOverride(compatibleWallets[0].address);
-                            }
-                        }
-                    }
-                    setAmountInputValue('');
-                    setAmountOutputValue('');
-                    setUsdInputValue('');
-                    setUsdOutputValue('');
-                    setTokenInputCache('');
-                    setIsUsdInputMode(nextTab === 'buy');
-                    debouncedAmountInputControls.cancel();
-                    debouncedAmountOutputControls.cancel();
-                    setOriginAddressOverride(undefined);
-                }
-                if (updateActiveTab) {
-                    setActiveTab(nextTab);
-                }
-                const desiredTradeType = nextTab === 'buy' ? 'EXPECTED_OUTPUT' : 'EXACT_INPUT';
-                if (tradeType !== desiredTradeType) {
-                    setTradeType(desiredTradeType);
-                }
-                prevActiveTabRef.current = nextTab;
-            }, [
-                activeTab,
-                customToAddress,
-                debouncedAmountInputControls,
-                debouncedAmountOutputControls,
-                destinationAddressOverride,
-                fromToken,
-                handleSetFromToken,
-                handleSetToToken,
-                linkedWallets,
-                multiWalletSupportEnabled,
-                relayClient?.chains,
-                setActiveTab,
-                setAllowUnsupportedOrigin,
-                setAllowUnsupportedRecipient,
-                setAmountInputValue,
-                setAmountOutputValue,
-                setCustomToAddress,
-                setDestinationAddressOverride,
-                setIsUsdInputMode,
-                setOriginAddressOverride,
-                setTokenInputCache,
-                setTradeType,
-                setUsdInputValue,
-                setUsdOutputValue,
-                toToken,
-                tradeType
-            ]);
-            useEffect(() => {
-                if (prevActiveTabRef.current === activeTab) {
-                    return;
-                }
-                handleTabChange(activeTab, false);
-            }, [activeTab, handleTabChange]);
-            return (_jsxs(_Fragment, { children: [_jsx(WidgetContainer, { steps: steps, setSteps: setSteps, quoteInProgress: quoteInProgress, setQuoteInProgress: setQuoteInProgress, transactionModalOpen: transactionModalOpen, setTransactionModalOpen: setTransactionModalOpen, depositAddressModalOpen: depositAddressModalOpen, setDepositAddressModalOpen: setDepositAddressModalOpen, addressModalOpen: addressModalOpen, setAddressModalOpen: setAddressModalOpen, fromToken: fromToken, fromChain: fromChain, toToken: toToken, toChain: toChain, address: address, recipient: recipient, amountInputValue: amountInputValue, amountOutputValue: amountOutputValue, debouncedInputAmountValue: debouncedInputAmountValue, debouncedOutputAmountValue: debouncedOutputAmountValue, tradeType: tradeType, onTransactionModalOpenChange: (open) => {
-                            if (!open) {
-                                if (pendingSuccessFlush) {
-                                    setPendingSuccessFlush(false);
-                                }
-                                else if (steps) {
-                                    invalidateQuoteQuery();
-                                }
-                                // Abort ongoing execution
-                                if (abortController) {
-                                    abortController.abort();
-                                }
-                                setSwapError(null);
-                                setSteps(null);
-                                setQuoteInProgress(null);
-                            }
-                            else if (pendingSuccessFlush) {
-                                setPendingSuccessFlush(false);
-                            }
-                        }, onDepositAddressModalOpenChange: (open) => {
-                            if (!open) {
-                                setSwapError(null);
-                                if (pendingSuccessFlush) {
-                                    setPendingSuccessFlush(false);
-                                }
-                                else {
-                                    invalidateQuoteQuery();
-                                }
-                            }
-                            else if (pendingSuccessFlush) {
-                                setPendingSuccessFlush(false);
-                            }
-                        }, slippageTolerance: localSlippageTolerance, swapError: swapError, setSwapError: setSwapError, onSwapSuccess: (data) => {
-                            setPendingSuccessFlush(true);
-                            setAmountInputValue('');
-                            setAmountOutputValue('');
-                            onSwapSuccess?.(data);
-                        }, onSwapValidating: onSwapValidating, onAnalyticEvent: onAnalyticEvent, invalidateBalanceQueries: invalidateBalanceQueries, invalidateQuoteQuery: invalidateQuoteQuery, customToAddress: customToAddress, setCustomToAddress: setCustomToAddress, timeEstimate: timeEstimate, wallet: wallet, linkedWallets: linkedWallets, multiWalletSupportEnabled: multiWalletSupportEnabled, children: () => {
-                            return (_jsx(Flex, { direction: "column", css: { gap: '3', width: '100%', position: 'relative' }, children: _jsx(TabsRoot, { value: activeTab, onValueChange: (value) => {
-                                        const nextTab = value;
-                                        handleTabChange(nextTab, true);
-                                        onAnalyticEvent?.('TAB_SWITCHED', {
-                                            tab: value
-                                        });
-                                    }, children: _jsxs(Flex, { direction: "column", css: {
-                                            width: '100%',
-                                            overflow: 'hidden',
-                                            border: 'widget-border',
-                                            minWidth: { base: 320, md: 400 },
-                                            maxWidth: 408
-                                        }, children: [_jsxs(TabsList, { css: {
-                                                    backgroundColor: 'transparent',
-                                                    p: '0',
-                                                    mb: '2'
-                                                }, children: [_jsx(TabsTrigger, { value: "buy", css: {
-                                                            padding: '12px',
-                                                            background: 'none',
-                                                            border: '1px solid transparent',
-                                                            color: 'text-subtle',
-                                                            '&[data-state="active"]': {
-                                                                background: 'widget-background',
-                                                                borderRadius: '12px',
-                                                                borderColor: 'slate.4',
-                                                                color: 'text-default'
-                                                            },
-                                                            '&:not([data-state="active"])': {
-                                                                _hover: {
-                                                                    backgroundColor: 'transparent !important'
-                                                                }
-                                                            },
-                                                            _dark: {
-                                                                '&[data-state="active"]': {
-                                                                    background: 'widget-background',
-                                                                    borderColor: 'gray.4'
-                                                                },
-                                                                '&:not([data-state="active"])': {
-                                                                    _hover: {
-                                                                        backgroundColor: 'transparent !important'
-                                                                    }
-                                                                }
-                                                            }
-                                                        }, children: _jsx(Text, { style: "subtitle1", css: { color: 'inherit' }, children: "Buy" }) }), _jsx(TabsTrigger, { value: "sell", css: {
-                                                            padding: '12px',
-                                                            background: 'none',
-                                                            border: '1px solid transparent',
-                                                            color: 'text-subtle',
-                                                            '&[data-state="active"]': {
-                                                                background: 'widget-background',
-                                                                borderRadius: '12px',
-                                                                borderColor: 'slate.4',
-                                                                color: 'text-default'
-                                                            },
-                                                            '&:not([data-state="active"])': {
-                                                                _hover: {
-                                                                    backgroundColor: 'transparent !important'
-                                                                }
-                                                            },
-                                                            _dark: {
-                                                                '&[data-state="active"]': {
-                                                                    background: 'widget-background',
-                                                                    borderColor: 'gray.4'
-                                                                },
-                                                                '&:not([data-state="active"])': {
-                                                                    _hover: {
-                                                                        backgroundColor: 'transparent !important'
-                                                                    }
-                                                                }
-                                                            }
-                                                        }, children: _jsx(Text, { style: "subtitle1", css: { color: 'inherit' }, children: "Sell" }) })] }), _jsx(BuyTabContent, { 
-                                                // Slippage configuration
-                                                slippageTolerance: localSlippageTolerance,
-                                                onOpenSlippageConfig: handleOpenSlippageConfig,
-                                                onSlippageToleranceChange: handleSlippageToleranceChange,
-                                                // Input/output state
-                                                isUsdInputMode,
-                                                usdOutputValue,
-                                                tradeType,
-                                                amountOutputValue,
-                                                amountInputValue,
-                                                outputAmountUsd,
-                                                setUsdOutputValue,
-                                                setTradeType,
-                                                setAmountOutputValue,
-                                                setAmountInputValue,
-                                                setUsdInputValue,
-                                                toggleInputMode,
-                                                debouncedAmountOutputControls,
-                                                // Tokens and pricing
-                                                toToken,
-                                                fromToken,
-                                                quote,
-                                                isFetchingQuote,
-                                                isLoadingToTokenPrice,
-                                                toTokenPriceData,
-                                                handleSetFromToken,
-                                                handleSetToToken,
-                                                // Balance information
-                                                feeBreakdown,
-                                                isLoadingFromBalance,
-                                                fromBalance,
-                                                fromBalancePending,
-                                                toBalance,
-                                                isLoadingToBalance,
-                                                toBalancePending,
-                                                hasInsufficientBalance,
-                                                // Wallet and address management
-                                                address,
-                                                multiWalletSupportEnabled,
-                                                linkedWallets,
-                                                onSetPrimaryWallet,
-                                                setOriginAddressOverride,
-                                                onConnectWallet,
-                                                onLinkNewWallet,
-                                                disablePasteWalletAddressOption,
-                                                setAddressModalOpen,
-                                                // Chain and VM support
-                                                fromChain,
-                                                toChain,
-                                                toChainWalletVMSupported,
-                                                fromChainWalletVMSupported,
-                                                supportedWalletVMs,
-                                                // Recipient configuration
-                                                recipient,
-                                                setCustomToAddress,
-                                                setDestinationAddressOverride,
-                                                isValidToAddress,
-                                                isRecipientLinked,
-                                                toDisplayName,
-                                                isValidFromAddress,
-                                                recipientWalletSupportsChain,
-                                                recipientLinkedWallet,
-                                                // Chain and token locking
-                                                lockToToken,
-                                                lockFromToken,
-                                                isSingleChainLocked,
-                                                lockChainId,
-                                                popularChainIds,
-                                                // Modal states
-                                                transactionModalOpen,
-                                                depositAddressModalOpen,
-                                                // Error and validation states
-                                                error,
-                                                isInsufficientLiquidityError,
-                                                isSameCurrencySameRecipientSwap,
-                                                isCapacityExceededError,
-                                                isCouldNotExecuteError,
-                                                // UI state and interactions
-                                                showHighPriceImpactWarning,
-                                                onPrimaryAction: handlePrimaryAction,
-                                                debouncedInputAmountValue,
-                                                debouncedOutputAmountValue,
-                                                // Fee and estimation
-                                                timeEstimate,
-                                                relayerFeeProportion,
-                                                highRelayerServiceFee,
-                                                // Event handling and misc
-                                                onAnalyticEvent,
-                                                toChainVmType: toChain?.vmType,
-                                                ctaCopy,
-                                                // Payment method configuration
-                                                paymentMethodMinHeight }), _jsx(SellTabContent, { 
-                                                // Slippage configuration
-                                                slippageTolerance: localSlippageTolerance,
-                                                onOpenSlippageConfig: handleOpenSlippageConfig,
-                                                onSlippageToleranceChange: handleSlippageToleranceChange,
-                                                // Input/output state
-                                                isUsdInputMode,
-                                                usdInputValue,
-                                                tradeType,
-                                                amountInputValue,
-                                                amountOutputValue,
-                                                conversionRate,
-                                                inputAmountUsd,
-                                                setUsdInputValue,
-                                                setTradeType,
-                                                setTokenInputCache,
-                                                setAmountInputValue,
-                                                setAmountOutputValue,
-                                                setUsdOutputValue,
-                                                toggleInputMode,
-                                                debouncedAmountInputControls,
-                                                // Tokens and pricing
-                                                fromToken,
-                                                toToken,
-                                                quote,
-                                                isFetchingQuote,
-                                                fromTokenPriceData,
-                                                isLoadingFromTokenPrice,
-                                                handleSetFromToken,
-                                                handleSetToToken,
-                                                // Balance information
-                                                feeBreakdown,
-                                                fromBalance,
-                                                isLoadingFromBalance,
-                                                toBalance,
-                                                isLoadingToBalance,
-                                                toBalancePending,
-                                                hasInsufficientBalance,
-                                                fromBalancePending,
-                                                // Wallet and address management
-                                                address,
-                                                multiWalletSupportEnabled,
-                                                linkedWallets,
-                                                onSetPrimaryWallet,
-                                                setOriginAddressOverride,
-                                                onConnectWallet,
-                                                onLinkNewWallet,
-                                                disablePasteWalletAddressOption,
-                                                setAddressModalOpen,
-                                                // Chain and VM support
-                                                fromChain,
-                                                toChain,
-                                                fromChainWalletVMSupported,
-                                                toChainWalletVMSupported,
-                                                supportedWalletVMs,
-                                                // Recipient configuration
-                                                recipient,
-                                                setCustomToAddress,
-                                                setDestinationAddressOverride,
-                                                isValidToAddress,
-                                                isRecipientLinked,
-                                                toDisplayName,
-                                                isValidFromAddress,
-                                                recipientWalletSupportsChain,
-                                                recipientLinkedWallet,
-                                                // Chain and token locking
-                                                lockToToken,
-                                                lockFromToken,
-                                                isSingleChainLocked,
-                                                lockChainId,
-                                                popularChainIds,
-                                                // Modal states
-                                                transactionModalOpen,
-                                                depositAddressModalOpen,
-                                                // Error and validation states
-                                                error,
-                                                isInsufficientLiquidityError,
-                                                isSameCurrencySameRecipientSwap,
-                                                isCapacityExceededError,
-                                                isCouldNotExecuteError,
-                                                // UI state and interactions
-                                                showHighPriceImpactWarning,
-                                                onPrimaryAction: handlePrimaryAction,
-                                                debouncedInputAmountValue,
-                                                debouncedOutputAmountValue,
-                                                percentOptions: percentageOptions,
-                                                onMaxAmountClicked: handleMaxAmountClicked,
-                                                publicClient,
-                                                isFromNative,
-                                                getFeeBufferAmount,
-                                                // Fee and estimation
-                                                timeEstimate,
-                                                relayerFeeProportion,
-                                                highRelayerServiceFee,
-                                                // Event handling and misc
-                                                onAnalyticEvent,
-                                                toChainVmType: toChain?.vmType,
-                                                ctaCopy,
-                                                // Payment method configuration
-                                                paymentMethodMinHeight })] }) }) }));
-                        } }), _jsx(UnverifiedTokenModal, { open: unverifiedTokens.length > 0, onOpenChange: () => { }, data: unverifiedTokens.length > 0 ? unverifiedTokens[0] : undefined, onDecline: (token, context) => {
-                            if (token) {
-                                // Track declined tokens to prevent re-prompting
-                                const tokenKey = `${token.chainId}:${token.address.toLowerCase()}`;
-                                declinedTokensRef.current.add(tokenKey);
-                                onUnverifiedTokenDecline?.(token, context);
-                            }
-                            setUnverifiedTokens((prev) => prev.filter((unverifiedToken) => !(unverifiedToken.context === context &&
-                                unverifiedToken.token.address === token?.address &&
-                                unverifiedToken.token.chainId === token?.chainId)));
-                        }, onAcceptToken: (token, context) => {
-                            if (token) {
-                                if (context === 'to') {
-                                    onAnalyticEvent?.(EventNames.SWAP_TOKEN_SELECT, {
-                                        direction: 'output',
-                                        token_symbol: token.symbol
-                                    });
-                                    if (token.address === fromToken?.address &&
-                                        token.chainId === fromToken?.chainId &&
-                                        address === recipient &&
-                                        (!lockToToken || !fromToken)) {
-                                        handleSetToToken(fromToken);
-                                        handleSetFromToken(toToken);
-                                    }
-                                    else {
-                                        handleSetToToken(token);
-                                    }
-                                }
-                                else if (context === 'from') {
-                                    onAnalyticEvent?.(EventNames.SWAP_TOKEN_SELECT, {
-                                        direction: 'input',
-                                        token_symbol: token.symbol
-                                    });
-                                    if (token.address === toToken?.address &&
-                                        token.chainId === toToken?.chainId &&
-                                        address === recipient &&
-                                        (!lockToToken || !fromToken)) {
-                                        handleSetFromToken(toToken);
-                                        handleSetToToken(fromToken);
-                                    }
-                                    else {
-                                        handleSetFromToken(token);
-                                    }
-                                }
-                            }
-                            setUnverifiedTokens((prev) => prev.filter((unverifiedToken) => !(unverifiedToken.token.address === token?.address &&
-                                unverifiedToken.token.chainId === token?.chainId)));
-                        } })] }));
-        } }));
-};
-export default TokenWidget;
-//# sourceMappingURL=index.js.map