@relayprotocol/relay-kit-ui 7.1.6 → 8.0.1

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

@@ -1,1034 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const index_js_1 = require("../../../primitives/index.js");
-const Tabs_js_1 = require("../../../primitives/Tabs.js");
-const react_1 = require("react");
-const index_js_2 = require("../../../../hooks/index.js");
-const useFallbackState_js_1 = tslib_1.__importDefault(require("../../../../hooks/useFallbackState.js"));
-const viem_1 = require("viem");
-const wagmi_1 = require("wagmi");
-const relay_sdk_1 = require("@relayprotocol/relay-sdk");
-const events_js_1 = require("../../../../constants/events.js");
-const WidgetContainer_js_1 = tslib_1.__importDefault(require("../../WidgetContainer.js"));
-const RelayKitProvider_js_1 = require("../../../../providers/RelayKitProvider.js");
-const tokens_js_1 = require("../../../../utils/tokens.js");
-const UnverifiedTokenModal_js_1 = require("../../../common/UnverifiedTokenModal.js");
-const localStorage_js_1 = require("../../../../utils/localStorage.js");
-const quote_js_1 = require("../../../../utils/quote.js");
-const nativeMaxAmount_js_1 = require("../../../../utils/nativeMaxAmount.js");
-const TokenWidgetRenderer_js_1 = tslib_1.__importDefault(require("./TokenWidgetRenderer.js"));
-const BuyTabContent_js_1 = tslib_1.__importDefault(require("../BuyTabContent.js"));
-const SellTabContent_js_1 = tslib_1.__importDefault(require("../SellTabContent.js"));
-const useWalletGuards_js_1 = require("../hooks/useWalletGuards.js");
-const address_js_1 = require("../../../../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: `${relay_sdk_1.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 = (0, react_1.useCallback)((eventName, data) => {
-        try {
-            _onAnalyticEvent?.(eventName, data);
-        }
-        catch (e) {
-            console.error('Error in onAnalyticEvent', eventName, data, e);
-        }
-    }, [_onAnalyticEvent]);
-    const relayClient = (0, index_js_2.useRelayClient)();
-    const providerOptionsContext = (0, react_1.useContext)(RelayKitProvider_js_1.ProviderOptionsContext);
-    const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides;
-    const [transactionModalOpen, setTransactionModalOpen] = (0, react_1.useState)(false);
-    const [depositAddressModalOpen, setDepositAddressModalOpen] = (0, react_1.useState)(false);
-    const [addressModalOpen, setAddressModalOpen] = (0, react_1.useState)(false);
-    const [pendingSuccessFlush, setPendingSuccessFlush] = (0, react_1.useState)(false);
-    const [unverifiedTokens, setUnverifiedTokens] = (0, react_1.useState)([]);
-    const declinedTokensRef = (0, react_1.useRef)(new Set());
-    const [fromToken, setFromToken] = (0, react_1.useState)(externalFromToken);
-    const [toToken, setToToken] = (0, react_1.useState)(externalToToken);
-    (0, react_1.useEffect)(() => {
-        setFromToken(externalFromToken);
-    }, [externalFromToken]);
-    (0, react_1.useEffect)(() => {
-        setToToken(externalToToken);
-    }, [externalToToken]);
-    const updateFromToken = (0, react_1.useCallback)((token) => {
-        setFromToken(token);
-        setExternalFromToken?.(token);
-    }, [setExternalFromToken]);
-    const updateToToken = (0, react_1.useCallback)((token) => {
-        setToToken(token);
-        setExternalToToken?.(token);
-    }, [setExternalToToken]);
-    const [activeTab, setActiveTab] = (0, useFallbackState_js_1.default)(setExternalActiveTab && externalActiveTab ? externalActiveTab : 'buy', setExternalActiveTab && externalActiveTab
-        ? [
-            externalActiveTab,
-            setExternalActiveTab
-        ]
-        : undefined);
-    const [isUsdInputMode, setIsUsdInputMode] = (0, react_1.useState)(activeTab === 'buy');
-    const [usdInputValue, setUsdInputValue] = (0, react_1.useState)('');
-    const [usdOutputValue, setUsdOutputValue] = (0, react_1.useState)('');
-    const [tokenInputCache, setTokenInputCache] = (0, react_1.useState)('');
-    const tabTokenStateRef = (0, react_1.useRef)({ buy: {}, sell: {} });
-    const prevActiveTabRef = (0, react_1.useRef)(activeTab);
-    const autoSelectedFromTokenRef = (0, react_1.useRef)(false);
-    const tabRecipientRef = (0, react_1.useRef)({ buy: {}, sell: {} });
-    const setTradeTypeRef = (0, react_1.useRef)(null);
-    const tradeTypeRef = (0, react_1.useRef)(defaultTradeType ?? 'EXPECTED_OUTPUT');
-    const hasLockedToken = lockFromToken || lockToToken;
-    const isSingleChainLocked = singleChainMode && lockChainId !== undefined;
-    const [localSlippageTolerance, setLocalSlippageTolerance] = (0, react_1.useState)(slippageTolerance);
-    (0, react_1.useEffect)(() => {
-        setLocalSlippageTolerance(slippageTolerance);
-    }, [slippageTolerance]);
-    (0, react_1.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');
-    (0, react_1.useEffect)(() => {
-        const tokensToVerify = [];
-        const getTokenKey = (token) => `${token.chainId}:${token.address.toLowerCase()}`;
-        if (fromToken && 'verified' in fromToken && !fromToken.verified) {
-            if ((0, localStorage_js_1.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 ((0, localStorage_js_1.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 ((0, jsx_runtime_1.jsx)(TokenWidgetRenderer_js_1.default, { 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;
-            (0, react_1.useEffect)(() => {
-                if (prevActiveTabRef.current !== activeTab) {
-                    return;
-                }
-                tabTokenStateRef.current[activeTab] = {
-                    fromToken,
-                    toToken
-                };
-            }, [activeTab, fromToken, toToken]);
-            (0, react_1.useEffect)(() => {
-                tabRecipientRef.current[activeTab] = {
-                    override: typeof destinationAddressOverride === 'string'
-                        ? destinationAddressOverride
-                        : undefined,
-                    custom: typeof customToAddress === 'string' ? customToAddress : undefined
-                };
-            }, [activeTab, destinationAddressOverride, customToAddress]);
-            (0, react_1.useEffect)(() => {
-                setAllowUnsupportedOrigin(activeTab === 'buy');
-                setAllowUnsupportedRecipient(activeTab === 'sell');
-            }, [activeTab, setAllowUnsupportedOrigin, setAllowUnsupportedRecipient]);
-            (0, react_1.useEffect)(() => {
-                if (activeTab === 'buy' &&
-                    toToken &&
-                    multiWalletSupportEnabled &&
-                    linkedWallets &&
-                    linkedWallets.length > 0 &&
-                    !destinationAddressOverride &&
-                    !customToAddress) {
-                    const toChain = relayClient?.chains?.find((c) => c.id === toToken.chainId);
-                    if (toChain) {
-                        const compatibleWallets = linkedWallets.filter((wallet) => {
-                            return (0, address_js_1.isWalletVmTypeCompatible)(wallet.vmType, toChain.vmType);
-                        });
-                        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
-            ]);
-            const inputAmountUsd = (0, react_1.useMemo)(() => {
-                return ((0, quote_js_1.calculateUsdValue)(fromTokenPriceData?.price, amountInputValue) ??
-                    null);
-            }, [fromTokenPriceData, amountInputValue]);
-            const outputAmountUsd = (0, react_1.useMemo)(() => {
-                return ((0, quote_js_1.calculateUsdValue)(toTokenPriceData?.price, amountOutputValue) ??
-                    null);
-            }, [toTokenPriceData, amountOutputValue]);
-            const percentageOptions = [20, 50];
-            const handleMaxAmountClicked = async (amount, percent, bufferAmount) => {
-                if (fromToken) {
-                    const formattedAmount = (0, viem_1.formatUnits)(amount, fromToken?.decimals);
-                    setAmountInputValue(formattedAmount);
-                    setTradeType('EXACT_INPUT');
-                    debouncedAmountOutputControls.cancel();
-                    debouncedAmountInputControls.flush();
-                    onAnalyticEvent?.(events_js_1.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 = (0, react_1.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 = (0, tokens_js_1.findBridgableToken)(newToChain, _token);
-                        if (_toToken && _toToken.address != _token?.address) {
-                            _token = _toToken;
-                        }
-                    }
-                }
-                updateToToken(_token);
-                onToTokenChange?.(_token);
-            }, [
-                fromChainWalletVMSupported,
-                onToTokenChange,
-                relayClient,
-                updateToToken
-            ]);
-            const handleSetFromToken = (0, react_1.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 &&
-                    !(0, address_js_1.isChainVmTypeSupported)(newFromChain?.vmType, supportedWalletVMs)) {
-                    setTradeType('EXACT_INPUT');
-                    const _toToken = (0, tokens_js_1.findBridgableToken)(toChain, toToken);
-                    if (_toToken && _toToken?.address != toToken?.address) {
-                        handleSetToToken(_toToken);
-                    }
-                    const _fromToken = (0, tokens_js_1.findBridgableToken)(newFromChain, _token);
-                    if (_fromToken && _fromToken.address != _token?.address) {
-                        _token = _fromToken;
-                    }
-                }
-                updateFromToken(_token);
-                onFromTokenChange?.(_token);
-            }, [
-                handleSetToToken,
-                onFromTokenChange,
-                relayClient,
-                updateFromToken,
-                setTradeType,
-                supportedWalletVMs,
-                toChain,
-                toToken
-            ]);
-            const publicClient = (0, wagmi_1.usePublicClient)({ chainId: fromChain?.id });
-            (0, react_1.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]);
-            (0, useWalletGuards_js_1.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);
-            const conversionRate = (0, react_1.useMemo)(() => {
-                if (isUsdInputMode) {
-                    if (fromTokenPriceData?.price && fromTokenPriceData.price > 0) {
-                        return fromTokenPriceData.price;
-                    }
-                    else {
-                        return null;
-                    }
-                }
-                else {
-                    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 {
-                        return null;
-                    }
-                }
-            }, [
-                isUsdInputMode,
-                fromTokenPriceData?.price,
-                quote?.details?.currencyIn?.amountUsd,
-                amountInputValue
-            ]);
-            const toggleInputMode = () => {
-                if (!isUsdInputMode) {
-                    let newUsdInputValue = '';
-                    let newUsdOutputValue = '';
-                    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);
-                    }
-                    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);
-                    if (tradeType !== 'EXPECTED_OUTPUT' || !newUsdOutputValue) {
-                        setTradeType('EXACT_INPUT');
-                    }
-                }
-                else {
-                    if (!usdInputValue && tokenInputCache) {
-                        setAmountInputValue(tokenInputCache);
-                    }
-                    setUsdInputValue('');
-                    setUsdOutputValue('');
-                    setIsUsdInputMode(false);
-                }
-            };
-            (0, react_1.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
-            ]);
-            (0, react_1.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
-            ]);
-            (0, react_1.useEffect)(() => {
-                if (isUsdInputMode) {
-                    if (tradeType === 'EXPECTED_OUTPUT') {
-                        return;
-                    }
-                    if (quote?.details?.currencyOut?.amountUsd && !isFetchingQuote) {
-                        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) {
-                        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
-            ]);
-            (0, react_1.useEffect)(() => {
-                if (isUsdInputMode && tradeType === 'EXPECTED_OUTPUT') {
-                    if (quote?.details?.currencyIn?.amountUsd && !isFetchingQuote) {
-                        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 = (0, quote_js_1.getSwapEventData)(quote?.details, quote?.fees, quote?.steps ? quote?.steps : null, linkedWallet?.connector, quoteParameters);
-                        onAnalyticEvent?.(events_js_1.EventNames.SWAP_CTA_CLICKED, swapEventData);
-                        setDepositAddressModalOpen(true);
-                    }
-                }
-            };
-            const linkedWalletsLoading = multiWalletSupportEnabled && linkedWallets === undefined;
-            const walletAddressLoading = Boolean(wallet && !address);
-            (0, react_1.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 = (0, react_1.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') {
-                        nextFromToken =
-                            storedNextState.fromToken ??
-                                prevToToken ??
-                                prevFromToken ??
-                                undefined;
-                        nextToToken = storedNextState.toToken ?? undefined;
-                    }
-                    else {
-                        nextToToken =
-                            storedNextState.toToken ??
-                                prevFromToken ??
-                                prevToToken ??
-                                undefined;
-                        nextFromToken = storedNextState.fromToken ?? undefined;
-                    }
-                    handleSetFromToken(nextFromToken);
-                    handleSetToToken(nextToToken);
-                    setDestinationAddressOverride(storedNextRecipient.override);
-                    setCustomToAddress(storedNextRecipient.custom);
-                    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) => (0, address_js_1.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
-            ]);
-            (0, react_1.useEffect)(() => {
-                if (prevActiveTabRef.current === activeTab) {
-                    return;
-                }
-                handleTabChange(activeTab, false);
-            }, [activeTab, handleTabChange]);
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(WidgetContainer_js_1.default, { 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();
-                                }
-                                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 ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { direction: "column", css: { gap: '3', width: '100%', position: 'relative' }, children: (0, jsx_runtime_1.jsx)(Tabs_js_1.TabsRoot, { value: activeTab, onValueChange: (value) => {
-                                        const nextTab = value;
-                                        handleTabChange(nextTab, true);
-                                        onAnalyticEvent?.('TAB_SWITCHED', {
-                                            tab: value
-                                        });
-                                    }, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
-                                            width: '100%',
-                                            overflow: 'hidden',
-                                            border: 'widget-border',
-                                            minWidth: { base: 320, md: 400 },
-                                            maxWidth: 408
-                                        }, children: [(0, jsx_runtime_1.jsxs)(Tabs_js_1.TabsList, { css: {
-                                                    backgroundColor: 'transparent',
-                                                    p: '0',
-                                                    mb: '2'
-                                                }, children: [(0, jsx_runtime_1.jsx)(Tabs_js_1.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: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", css: { color: 'inherit' }, children: "Buy" }) }), (0, jsx_runtime_1.jsx)(Tabs_js_1.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: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", css: { color: 'inherit' }, children: "Sell" }) })] }), (0, jsx_runtime_1.jsx)(BuyTabContent_js_1.default, { slippageTolerance: localSlippageTolerance,
-                                                onOpenSlippageConfig: handleOpenSlippageConfig,
-                                                onSlippageToleranceChange: handleSlippageToleranceChange,
-                                                isUsdInputMode,
-                                                usdOutputValue,
-                                                tradeType,
-                                                amountOutputValue,
-                                                amountInputValue,
-                                                outputAmountUsd,
-                                                setUsdOutputValue,
-                                                setTradeType,
-                                                setAmountOutputValue,
-                                                setAmountInputValue,
-                                                setUsdInputValue,
-                                                toggleInputMode,
-                                                debouncedAmountOutputControls,
-                                                toToken,
-                                                fromToken,
-                                                quote,
-                                                isFetchingQuote,
-                                                isLoadingToTokenPrice,
-                                                toTokenPriceData,
-                                                handleSetFromToken,
-                                                handleSetToToken,
-                                                feeBreakdown,
-                                                isLoadingFromBalance,
-                                                fromBalance,
-                                                fromBalancePending,
-                                                toBalance,
-                                                isLoadingToBalance,
-                                                toBalancePending,
-                                                hasInsufficientBalance,
-                                                address,
-                                                multiWalletSupportEnabled,
-                                                linkedWallets,
-                                                onSetPrimaryWallet,
-                                                setOriginAddressOverride,
-                                                onConnectWallet,
-                                                onLinkNewWallet,
-                                                disablePasteWalletAddressOption,
-                                                setAddressModalOpen,
-                                                fromChain,
-                                                toChain,
-                                                toChainWalletVMSupported,
-                                                fromChainWalletVMSupported,
-                                                supportedWalletVMs,
-                                                recipient,
-                                                setCustomToAddress,
-                                                setDestinationAddressOverride,
-                                                isValidToAddress,
-                                                isRecipientLinked,
-                                                toDisplayName,
-                                                isValidFromAddress,
-                                                recipientWalletSupportsChain,
-                                                recipientLinkedWallet,
-                                                lockToToken,
-                                                lockFromToken,
-                                                isSingleChainLocked,
-                                                lockChainId,
-                                                popularChainIds,
-                                                transactionModalOpen,
-                                                depositAddressModalOpen,
-                                                error,
-                                                isInsufficientLiquidityError,
-                                                isSameCurrencySameRecipientSwap,
-                                                isCapacityExceededError,
-                                                isCouldNotExecuteError,
-                                                showHighPriceImpactWarning,
-                                                onPrimaryAction: handlePrimaryAction,
-                                                debouncedInputAmountValue,
-                                                debouncedOutputAmountValue,
-                                                timeEstimate,
-                                                relayerFeeProportion,
-                                                highRelayerServiceFee,
-                                                onAnalyticEvent,
-                                                toChainVmType: toChain?.vmType,
-                                                ctaCopy,
-                                                paymentMethodMinHeight }), (0, jsx_runtime_1.jsx)(SellTabContent_js_1.default, { slippageTolerance: localSlippageTolerance,
-                                                onOpenSlippageConfig: handleOpenSlippageConfig,
-                                                onSlippageToleranceChange: handleSlippageToleranceChange,
-                                                isUsdInputMode,
-                                                usdInputValue,
-                                                tradeType,
-                                                amountInputValue,
-                                                amountOutputValue,
-                                                conversionRate,
-                                                inputAmountUsd,
-                                                setUsdInputValue,
-                                                setTradeType,
-                                                setTokenInputCache,
-                                                setAmountInputValue,
-                                                setAmountOutputValue,
-                                                setUsdOutputValue,
-                                                toggleInputMode,
-                                                debouncedAmountInputControls,
-                                                fromToken,
-                                                toToken,
-                                                quote,
-                                                isFetchingQuote,
-                                                fromTokenPriceData,
-                                                isLoadingFromTokenPrice,
-                                                handleSetFromToken,
-                                                handleSetToToken,
-                                                feeBreakdown,
-                                                fromBalance,
-                                                isLoadingFromBalance,
-                                                toBalance,
-                                                isLoadingToBalance,
-                                                toBalancePending,
-                                                hasInsufficientBalance,
-                                                fromBalancePending,
-                                                address,
-                                                multiWalletSupportEnabled,
-                                                linkedWallets,
-                                                onSetPrimaryWallet,
-                                                setOriginAddressOverride,
-                                                onConnectWallet,
-                                                onLinkNewWallet,
-                                                disablePasteWalletAddressOption,
-                                                setAddressModalOpen,
-                                                fromChain,
-                                                toChain,
-                                                fromChainWalletVMSupported,
-                                                toChainWalletVMSupported,
-                                                supportedWalletVMs,
-                                                recipient,
-                                                setCustomToAddress,
-                                                setDestinationAddressOverride,
-                                                isValidToAddress,
-                                                isRecipientLinked,
-                                                toDisplayName,
-                                                isValidFromAddress,
-                                                recipientWalletSupportsChain,
-                                                recipientLinkedWallet,
-                                                lockToToken,
-                                                lockFromToken,
-                                                isSingleChainLocked,
-                                                lockChainId,
-                                                popularChainIds,
-                                                transactionModalOpen,
-                                                depositAddressModalOpen,
-                                                error,
-                                                isInsufficientLiquidityError,
-                                                isSameCurrencySameRecipientSwap,
-                                                isCapacityExceededError,
-                                                isCouldNotExecuteError,
-                                                showHighPriceImpactWarning,
-                                                onPrimaryAction: handlePrimaryAction,
-                                                debouncedInputAmountValue,
-                                                debouncedOutputAmountValue,
-                                                percentOptions: percentageOptions,
-                                                onMaxAmountClicked: handleMaxAmountClicked,
-                                                publicClient,
-                                                isFromNative,
-                                                getFeeBufferAmount: nativeMaxAmount_js_1.getFeeBufferAmount,
-                                                timeEstimate,
-                                                relayerFeeProportion,
-                                                highRelayerServiceFee,
-                                                onAnalyticEvent,
-                                                toChainVmType: toChain?.vmType,
-                                                ctaCopy,
-                                                paymentMethodMinHeight })] }) }) }));
-                        } }), (0, jsx_runtime_1.jsx)(UnverifiedTokenModal_js_1.UnverifiedTokenModal, { open: unverifiedTokens.length > 0, onOpenChange: () => { }, data: unverifiedTokens.length > 0 ? unverifiedTokens[0] : undefined, onDecline: (token, context) => {
-                            if (token) {
-                                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?.(events_js_1.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?.(events_js_1.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)));
-                        } })] }));
-        } }));
-};
-exports.default = TokenWidget;
-//# sourceMappingURL=index.js.map