@relayprotocol/relay-kit-ui 5.1.2 → 6.0.0

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

@@ -0,0 +1,1005 @@
+"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 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 relay_kit_hooks_1 = require("@relayprotocol/relay-kit-hooks");
+const useWalletGuards_js_1 = require("../hooks/useWalletGuards.js");
+const TokenWidget = ({ fromToken, setFromToken, toToken, setToToken, defaultFromTokenAddress, defaultFromTokenChainId, defaultToTokenAddress, defaultToTokenChainId, defaultToAddress, defaultAmount, defaultTradeType, slippageTolerance, onOpenSlippageConfig, lockToToken = false, lockFromToken = false, lockChainId, singleChainMode = false, wallet, multiWalletSupportEnabled = false, linkedWallets, supportedWalletVMs, disableInputAutoFocus = false, popularChainIds, disablePasteWalletAddressOption, useSecureBaseUrl, onSetPrimaryWallet, onLinkNewWallet, onFromTokenChange, onToTokenChange, onConnectWallet, onAnalyticEvent: _onAnalyticEvent, onSwapSuccess, onSwapValidating, onSwapError }) => {
+    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 [isUsdInputMode, setIsUsdInputMode] = (0, react_1.useState)(false);
+    const [usdInputValue, setUsdInputValue] = (0, react_1.useState)('');
+    const [usdOutputValue, setUsdOutputValue] = (0, react_1.useState)('');
+    const [tokenInputCache, setTokenInputCache] = (0, react_1.useState)('');
+    const [activeTab, setActiveTab] = (0, react_1.useState)('buy');
+    const tabTokenStateRef = (0, react_1.useRef)({ buy: {}, sell: {} });
+    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 [resolvedFromToken, setResolvedFromToken] = (0, react_1.useState)(fromToken);
+    const [resolvedToToken, setResolvedToToken] = (0, react_1.useState)(toToken);
+    const hasLockedToken = lockFromToken || lockToToken;
+    const isSingleChainLocked = singleChainMode && lockChainId !== undefined;
+    const [localSlippageTolerance, setLocalSlippageTolerance] = (0, react_1.useState)(slippageTolerance);
+    const { data: fromTokenList } = (0, relay_kit_hooks_1.useTokenList)(relayClient?.baseApiUrl, defaultFromTokenAddress && defaultFromTokenChainId && !fromToken
+        ? {
+            chainIds: [defaultFromTokenChainId],
+            address: defaultFromTokenAddress,
+            limit: 1
+        }
+        : undefined, {
+        enabled: !!(defaultFromTokenAddress &&
+            defaultFromTokenChainId &&
+            !fromToken &&
+            relayClient)
+    });
+    const { data: toTokenList } = (0, relay_kit_hooks_1.useTokenList)(relayClient?.baseApiUrl, defaultToTokenAddress && defaultToTokenChainId && !toToken
+        ? {
+            chainIds: [defaultToTokenChainId],
+            address: defaultToTokenAddress,
+            limit: 1
+        }
+        : undefined, {
+        enabled: !!(defaultToTokenAddress &&
+            defaultToTokenChainId &&
+            !toToken &&
+            relayClient)
+    });
+    (0, react_1.useEffect)(() => {
+        if (fromToken) {
+            setResolvedFromToken(fromToken);
+        }
+        else if (fromTokenList?.[0]) {
+            const apiToken = fromTokenList[0];
+            const resolved = {
+                chainId: apiToken.chainId,
+                address: apiToken.address,
+                name: apiToken.name,
+                symbol: apiToken.symbol,
+                decimals: apiToken.decimals,
+                logoURI: (0, tokens_js_1.generateTokenImageUrl)(apiToken),
+                verified: apiToken.metadata?.verified ?? false
+            };
+            if (activeTab === 'buy' && !toToken && !resolvedToToken) {
+                setResolvedToToken(resolved);
+                setToToken?.(resolved);
+            }
+            else if (activeTab === 'sell') {
+                setResolvedFromToken(resolved);
+                setFromToken?.(resolved);
+            }
+        }
+    }, [
+        fromToken,
+        fromTokenList,
+        setFromToken,
+        activeTab,
+        toToken,
+        resolvedToToken,
+        setToToken
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (toToken) {
+            setResolvedToToken(toToken);
+        }
+        else if (toTokenList?.[0] && activeTab !== 'sell') {
+            const apiToken = toTokenList[0];
+            const resolved = {
+                chainId: apiToken.chainId,
+                address: apiToken.address,
+                name: apiToken.name,
+                symbol: apiToken.symbol,
+                decimals: apiToken.decimals,
+                logoURI: (0, tokens_js_1.generateTokenImageUrl)(apiToken),
+                verified: apiToken.metadata?.verified ?? false
+            };
+            setResolvedToToken(resolved);
+            setToToken?.(resolved);
+        }
+    }, [toToken, toTokenList, setToToken, activeTab]);
+    (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)(() => {
+        if (resolvedFromToken &&
+            'verified' in resolvedFromToken &&
+            !resolvedFromToken.verified) {
+            const isAlreadyAccepted = (0, localStorage_js_1.alreadyAcceptedToken)(resolvedFromToken);
+            if (!isAlreadyAccepted) {
+                unverifiedTokens.push({ token: resolvedFromToken, context: 'from' });
+                setResolvedFromToken(undefined);
+                setFromToken?.(undefined);
+            }
+        }
+        if (resolvedToToken &&
+            'verified' in resolvedToToken &&
+            !resolvedToToken.verified) {
+            const isAlreadyAccepted = (0, localStorage_js_1.alreadyAcceptedToken)(resolvedToToken);
+            if (!isAlreadyAccepted) {
+                unverifiedTokens.push({ token: resolvedToToken, context: 'to' });
+                setResolvedToToken(undefined);
+                setToToken?.(undefined);
+            }
+        }
+    }, [resolvedFromToken, resolvedToToken]);
+    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: resolvedToToken, setToToken: setResolvedToToken, fromToken: resolvedFromToken, setFromToken: setResolvedFromToken, 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, supportsExternalLiquidity, useExternalLiquidity, slippageTolerance, canonicalTimeEstimate, fromChainWalletVMSupported, toChainWalletVMSupported, isRecipientLinked, swapError, recipientWalletSupportsChain, linkedWallet, quoteParameters, setSwapError, setUseExternalLiquidity, invalidateBalanceQueries, invalidateQuoteQuery, quoteInProgress, setQuoteInProgress, abortController, fromTokenPriceData, toTokenPriceData, isLoadingFromTokenPrice, isLoadingToTokenPrice }) => {
+            setTradeTypeRef.current = setTradeType;
+            tradeTypeRef.current = tradeType;
+            (0, react_1.useEffect)(() => {
+                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 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) {
+                    setToToken(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;
+                        }
+                    }
+                }
+                setToToken(_token);
+                onToTokenChange?.(_token);
+            }, [fromChainWalletVMSupported, onToTokenChange, relayClient, setToToken]);
+            const handleSetFromToken = (0, react_1.useCallback)((token) => {
+                if (!token) {
+                    setFromToken(undefined);
+                    onFromTokenChange?.(undefined);
+                    return;
+                }
+                let _token = token;
+                const newFromChain = relayClient?.chains.find((chain) => token?.chainId == chain.id);
+                if (newFromChain?.vmType &&
+                    !supportedWalletVMs.includes(newFromChain?.vmType)) {
+                    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;
+                    }
+                }
+                setFromToken(_token);
+                onFromTokenChange?.(_token);
+            }, [
+                handleSetToToken,
+                onFromTokenChange,
+                relayClient,
+                setFromToken,
+                setTradeType,
+                supportedWalletVMs,
+                toChain,
+                toToken
+            ]);
+            const publicClient = (0, wagmi_1.usePublicClient)({ chainId: fromChain?.id });
+            (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 promptSwitchRoute = (isCapacityExceededError || isCouldNotExecuteError) &&
+                supportsExternalLiquidity &&
+                !isSingleChainLocked;
+            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);
+                    }
+                }
+            };
+            (0, react_1.useEffect)(() => {
+                if (activeTab === 'buy' &&
+                    !address &&
+                    !linkedWallets?.length &&
+                    !fromToken &&
+                    !defaultFromTokenAddress &&
+                    !defaultFromTokenChainId &&
+                    relayClient) {
+                    const baseUSDC = {
+                        chainId: 8453,
+                        address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
+                        name: 'USD Coin',
+                        symbol: 'USDC',
+                        decimals: 6,
+                        logoURI: `${relay_sdk_1.ASSETS_RELAY_API}/icons/currencies/usdc.png`,
+                        verified: true
+                    };
+                    handleSetFromToken(baseUSDC);
+                }
+            }, [
+                activeTab,
+                address,
+                linkedWallets?.length,
+                fromToken,
+                defaultFromTokenAddress,
+                defaultFromTokenChainId,
+                relayClient,
+                handleSetFromToken
+            ]);
+            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);
+                            }
+                        }, useExternalLiquidity: useExternalLiquidity, 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%' }, children: (0, jsx_runtime_1.jsx)(Tabs_js_1.TabsRoot, { value: activeTab, onValueChange: (value) => {
+                                        const nextTab = value;
+                                        setAllowUnsupportedOrigin(nextTab === 'buy');
+                                        setAllowUnsupportedRecipient(nextTab === 'sell');
+                                        if (nextTab !== activeTab) {
+                                            tabTokenStateRef.current[activeTab] = {
+                                                fromToken,
+                                                toToken
+                                            };
+                                            tabRecipientRef.current[activeTab] = {
+                                                override: typeof destinationAddressOverride === 'string'
+                                                    ? destinationAddressOverride
+                                                    : undefined,
+                                                custom: typeof customToAddress === 'string'
+                                                    ? customToAddress
+                                                    : undefined
+                                            };
+                                            const currentState = tabTokenStateRef.current[activeTab] ?? {};
+                                            const storedNextState = tabTokenStateRef.current[nextTab] ?? {};
+                                            const storedNextRecipient = tabRecipientRef.current[nextTab] ?? {};
+                                            let nextFromToken = storedNextState.fromToken;
+                                            let nextToToken = storedNextState.toToken;
+                                            if (nextTab === 'sell') {
+                                                const sellToken = nextFromToken ??
+                                                    currentState.toToken ??
+                                                    toToken ??
+                                                    fromToken;
+                                                const receiveToken = nextToToken ?? currentState.fromToken ?? fromToken;
+                                                nextFromToken = sellToken ?? undefined;
+                                                nextToToken = receiveToken ?? undefined;
+                                            }
+                                            else {
+                                                const buyToken = nextToToken ??
+                                                    currentState.toToken ??
+                                                    toToken ??
+                                                    fromToken;
+                                                const payToken = nextFromToken ??
+                                                    currentState.fromToken ??
+                                                    fromToken ??
+                                                    currentState.toToken;
+                                                nextFromToken = payToken ?? undefined;
+                                                nextToToken = buyToken ?? undefined;
+                                            }
+                                            tabTokenStateRef.current[nextTab] = {
+                                                fromToken: nextFromToken,
+                                                toToken: nextToToken
+                                            };
+                                            tabRecipientRef.current[nextTab] = storedNextRecipient;
+                                            handleSetFromToken(nextFromToken);
+                                            handleSetToToken(nextToToken);
+                                            setDestinationAddressOverride(storedNextRecipient.override);
+                                            setCustomToAddress(storedNextRecipient.custom);
+                                            if (nextTab === 'buy' &&
+                                                multiWalletSupportEnabled &&
+                                                linkedWallets &&
+                                                linkedWallets.length > 0 &&
+                                                !storedNextRecipient.override &&
+                                                !storedNextRecipient.custom) {
+                                                const toChain = relayClient?.chains?.find((c) => c.id === nextToToken?.chainId);
+                                                if (toChain) {
+                                                    const compatibleWallets = linkedWallets.filter((wallet) => {
+                                                        return wallet.vmType === toChain.vmType;
+                                                    });
+                                                    if (compatibleWallets.length > 0) {
+                                                        setDestinationAddressOverride(compatibleWallets[0].address);
+                                                    }
+                                                }
+                                            }
+                                            setAmountInputValue('');
+                                            setAmountOutputValue('');
+                                            setUsdInputValue('');
+                                            setUsdOutputValue('');
+                                            setTokenInputCache('');
+                                            setIsUsdInputMode(false);
+                                            debouncedAmountInputControls.cancel();
+                                            debouncedAmountOutputControls.cancel();
+                                            setOriginAddressOverride(undefined);
+                                        }
+                                        setActiveTab(nextTab);
+                                        const desiredTradeType = nextTab === 'buy' ? 'EXPECTED_OUTPUT' : 'EXACT_INPUT';
+                                        if (tradeType !== desiredTradeType) {
+                                            setTradeType(desiredTradeType);
+                                        }
+                                        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: 300,
+                                            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: 'gray11',
+                                                            '&[data-state="active"]': {
+                                                                background: 'white',
+                                                                borderRadius: '12px',
+                                                                borderColor: 'slate.4',
+                                                                color: 'gray12'
+                                                            },
+                                                            '&:not([data-state="active"])': {
+                                                                _hover: {
+                                                                    backgroundColor: 'transparent !important'
+                                                                }
+                                                            },
+                                                            _dark: {
+                                                                '&[data-state="active"]': {
+                                                                    background: 'gray1',
+                                                                    borderColor: 'gray.4'
+                                                                },
+                                                                '&:not([data-state="active"])': {
+                                                                    _hover: {
+                                                                        backgroundColor: 'transparent !important'
+                                                                    }
+                                                                }
+                                                            }
+                                                        }, children: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", children: "Buy" }) }), (0, jsx_runtime_1.jsx)(Tabs_js_1.TabsTrigger, { value: "sell", css: {
+                                                            padding: '12px',
+                                                            background: 'none',
+                                                            border: '1px solid transparent',
+                                                            color: 'gray11',
+                                                            '&[data-state="active"]': {
+                                                                background: 'white',
+                                                                borderRadius: '12px',
+                                                                borderColor: 'slate.4',
+                                                                color: 'gray12'
+                                                            },
+                                                            '&:not([data-state="active"])': {
+                                                                _hover: {
+                                                                    backgroundColor: 'transparent !important'
+                                                                }
+                                                            },
+                                                            _dark: {
+                                                                '&[data-state="active"]': {
+                                                                    background: 'gray1',
+                                                                    borderColor: 'gray.4'
+                                                                },
+                                                                '&:not([data-state="active"])': {
+                                                                    _hover: {
+                                                                        backgroundColor: 'transparent !important'
+                                                                    }
+                                                                }
+                                                            }
+                                                        }, 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,
+                                                supportsExternalLiquidity,
+                                                showHighPriceImpactWarning,
+                                                disableSwapButton: promptSwitchRoute,
+                                                onPrimaryAction: handlePrimaryAction,
+                                                debouncedInputAmountValue,
+                                                debouncedOutputAmountValue,
+                                                timeEstimate,
+                                                relayerFeeProportion,
+                                                highRelayerServiceFee,
+                                                onAnalyticEvent,
+                                                toChainVmType: toChain?.vmType,
+                                                ctaCopy }), (0, jsx_runtime_1.jsx)(SellTabContent_js_1.default, { slippageTolerance: localSlippageTolerance,
+                                                onOpenSlippageConfig: handleOpenSlippageConfig,
+                                                onSlippageToleranceChange: handleSlippageToleranceChange,
+                                                disableInputAutoFocus,
+                                                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,
+                                                supportsExternalLiquidity,
+                                                showHighPriceImpactWarning,
+                                                disableSwapButton: promptSwitchRoute,
+                                                onPrimaryAction: handlePrimaryAction,
+                                                debouncedInputAmountValue,
+                                                debouncedOutputAmountValue,
+                                                percentOptions: percentageOptions,
+                                                onMaxAmountClicked: handleMaxAmountClicked,
+                                                publicClient,
+                                                isFromNative,
+                                                getFeeBufferAmount: nativeMaxAmount_js_1.getFeeBufferAmount,
+                                                timeEstimate,
+                                                relayerFeeProportion,
+                                                highRelayerServiceFee,
+                                                onAnalyticEvent,
+                                                toChainVmType: toChain?.vmType,
+                                                ctaCopy }), promptSwitchRoute ? ((0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "primary", cta: true, css: { flexGrow: '1', justifyContent: 'center' }, onClick: () => {
+                                                    setUseExternalLiquidity(true);
+                                                    onAnalyticEvent?.(events_js_1.EventNames.CTA_SWITCH_ROUTE_CLICKED);
+                                                }, children: "Switch Route" })) : null] }) }) }));
+                        } }), (0, jsx_runtime_1.jsx)(UnverifiedTokenModal_js_1.UnverifiedTokenModal, { open: unverifiedTokens.length > 0, onOpenChange: () => { }, data: unverifiedTokens.length > 0 ? unverifiedTokens[0] : undefined, onDecline: (token, context) => {
+                            const tokens = unverifiedTokens.filter((unverifiedToken) => !(unverifiedToken.context === context &&
+                                unverifiedToken.token.address === token?.address &&
+                                unverifiedToken.token.chainId === token?.chainId));
+                            setUnverifiedTokens(tokens);
+                        }, 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);
+                                    }
+                                }
+                            }
+                            const tokens = unverifiedTokens.filter((unverifiedToken) => !(unverifiedToken.token.address === token?.address &&
+                                unverifiedToken.token.chainId === token?.chainId));
+                            setUnverifiedTokens(tokens);
+                        } })] }));
+        } }));
+};
+exports.default = TokenWidget;
+//# sourceMappingURL=index.js.map