@relayprotocol/relay-kit-ui 7.1.6 → 8.0.1

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

@@ -1,742 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { useCurrencyBalance, useRelayClient, useDebounceState, useWalletAddress, useDisconnected, usePreviousValueChange, useIsWalletCompatible, useFallbackState, useDisplayName, useLighterAccount, useExplicitDeposit } from '../../../../hooks/index.js';
-import { formatUnits, parseUnits } from 'viem';
-import { useAccount, useWalletClient } from 'wagmi';
-import { useCapabilities } from 'wagmi/experimental';
-import { useQueryClient } from '@tanstack/react-query';
-import { calculatePriceTimeEstimate, calculateRelayerFeeProportionUsd, extractQuoteId, getCurrentStep, getSwapEventData, isHighRelayerServiceFeeUsd, parseFees } from '../../../../utils/quote.js';
-import { useQuote, useTokenPrice } from '@relayprotocol/relay-kit-hooks';
-import { EventNames } from '../../../../constants/events.js';
-import { ProviderOptionsContext } from '../../../../providers/RelayKitProvider.js';
-import { addressesEqual, addressWithFallback, isValidAddress, isChainVmTypeSupported, isWalletVmTypeCompatible } from '../../../../utils/address.js';
-import { adaptViemWallet } from '@relayprotocol/relay-sdk';
-import { errorToJSON } from '../../../../utils/errors.js';
-import { useSwapButtonCta } from '../../../../hooks/widget/useSwapButtonCta.js';
-import { sha256 } from '../../../../utils/hashing.js';
-import { get15MinuteInterval } from '../../../../utils/time.js';
-import { isLighterAddress } from '../../../../utils/lighter.js';
-// shared query options for useTokenPrice
-const tokenPriceQueryOptions = {
-    staleTime: 60 * 1000, // 1 minute
-    refetchInterval: 30 * 1000, // 30 seconds
-    refetchOnWindowFocus: false
-};
-const TokenWidgetRenderer = ({ transactionModalOpen, setTransactionModalOpen, depositAddressModalOpen, fromToken: _fromToken, setFromToken: _setFromToken, toToken: _toToken, setToToken: _setToToken, defaultToAddress, defaultAmount, defaultTradeType, slippageTolerance, context, wallet, multiWalletSupportEnabled = false, linkedWallets, supportedWalletVMs, useSecureBaseUrl, children, onAnalyticEvent, onSwapError }) => {
-    const [fromToken, setFromToken] = useFallbackState(_setFromToken ? _fromToken : undefined, _setFromToken
-        ? [
-            _fromToken,
-            _setFromToken
-        ]
-        : undefined);
-    const [toToken, setToToken] = useFallbackState(_setToToken ? _toToken : undefined, _setToToken
-        ? [_toToken, _setToToken]
-        : undefined);
-    const providerOptionsContext = useContext(ProviderOptionsContext);
-    const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides;
-    const relayClient = useRelayClient();
-    const { connector } = useAccount();
-    const walletClient = useWalletClient();
-    const [customToAddress, setCustomToAddress] = useState(defaultToAddress);
-    const [destinationAddressOverride, setDestinationAddressOverride] = useState(undefined);
-    const [originAddressOverride, setOriginAddressOverride] = useState(undefined);
-    const [allowUnsupportedOrigin, setAllowUnsupportedOrigin] = useState(false);
-    const [allowUnsupportedRecipient, setAllowUnsupportedRecipient] = useState(false);
-    const defaultAddress = useWalletAddress(wallet, linkedWallets);
-    const [tradeType, setTradeType] = useState(defaultTradeType ?? 'EXACT_INPUT');
-    const queryClient = useQueryClient();
-    const [steps, setSteps] = useState(null);
-    const [quoteInProgress, setQuoteInProgress] = useState(null);
-    const [waitingForSteps, setWaitingForSteps] = useState(false);
-    const [details, setDetails] = useState(null);
-    const [abortController, setAbortController] = useState(null);
-    const { value: amountInputValue, debouncedValue: debouncedInputAmountValue, setValue: setAmountInputValue, debouncedControls: debouncedAmountInputControls } = useDebounceState(!defaultTradeType || defaultTradeType === 'EXACT_INPUT'
-        ? (defaultAmount ?? '')
-        : '', 500);
-    const { value: amountOutputValue, debouncedValue: debouncedOutputAmountValue, setValue: setAmountOutputValue, debouncedControls: debouncedAmountOutputControls } = useDebounceState(defaultTradeType === 'EXPECTED_OUTPUT' ? (defaultAmount ?? '') : '', 500);
-    const [swapError, setSwapError] = useState(null);
-    const toChain = useMemo(() => relayClient?.chains?.find((chain) => chain.id === toToken?.chainId), [relayClient?.chains, toToken?.chainId]);
-    const fromChain = useMemo(() => relayClient?.chains?.find((chain) => chain.id === fromToken?.chainId), [relayClient?.chains, fromToken?.chainId]);
-    const fromChainWalletVMSupported = useMemo(() => isChainVmTypeSupported(fromChain?.vmType, supportedWalletVMs) ||
-        fromChain?.id === 1337, [fromChain?.vmType, fromChain?.id, supportedWalletVMs]);
-    const toChainWalletVMSupported = useMemo(() => isChainVmTypeSupported(toChain?.vmType, supportedWalletVMs), [toChain?.vmType, supportedWalletVMs]);
-    // Automatically select the correct wallet address based on fromToken's chain VM
-    // In sell mode (no fromChain), use toChain to find compatible wallet
-    const address = useMemo(() => {
-        if (!multiWalletSupportEnabled || !linkedWallets?.length) {
-            return defaultAddress;
-        }
-        if (originAddressOverride) {
-            return originAddressOverride;
-        }
-        const targetChain = fromChain || toChain;
-        if (!targetChain) {
-            return defaultAddress;
-        }
-        const isCompatibleWallet = (wallet) => isWalletVmTypeCompatible(wallet.vmType, targetChain.vmType) &&
-            isValidAddress(targetChain.vmType, wallet.address, targetChain.id, wallet.connector, connectorKeyOverrides);
-        const activeLinkedWallet = linkedWallets.find((wallet) => addressesEqual(wallet.vmType, wallet.address, defaultAddress));
-        if (activeLinkedWallet && isCompatibleWallet(activeLinkedWallet)) {
-            return activeLinkedWallet.address;
-        }
-        const compatibleWallet = linkedWallets.find(isCompatibleWallet);
-        return compatibleWallet?.address || defaultAddress;
-    }, [
-        multiWalletSupportEnabled,
-        originAddressOverride,
-        fromChain,
-        toChain,
-        linkedWallets,
-        defaultAddress,
-        connectorKeyOverrides
-    ]);
-    const defaultRecipient = useMemo(() => {
-        const _linkedWallet = linkedWallets?.find((linkedWallet) => address ===
-            (linkedWallet.vmType === 'evm'
-                ? linkedWallet.address.toLowerCase()
-                : linkedWallet.address));
-        const _isValidToAddress = isValidAddress(toChain?.vmType, customToAddress ?? '', toChain?.id, !customToAddress && _linkedWallet?.address === address
-            ? _linkedWallet?.connector
-            : undefined, connectorKeyOverrides);
-        if (multiWalletSupportEnabled &&
-            toChain &&
-            linkedWallets &&
-            !_isValidToAddress) {
-            // Find a compatible wallet, excluding the origin wallet
-            const supportedWallet = linkedWallets.find((wallet) => wallet.address !== address &&
-                isValidAddress(toChain.vmType, wallet.address, toChain.id, wallet.connector, connectorKeyOverrides));
-            return supportedWallet?.address;
-        }
-        return undefined;
-    }, [
-        multiWalletSupportEnabled,
-        toChain,
-        customToAddress,
-        address,
-        linkedWallets,
-        setCustomToAddress,
-        connectorKeyOverrides
-    ]);
-    const recipient = destinationAddressOverride ??
-        customToAddress ??
-        defaultRecipient ??
-        (!allowUnsupportedRecipient && address ? address : undefined);
-    const { value: fromBalance, queryKey: fromBalanceQueryKey, isLoading: isLoadingFromBalance, isError: fromBalanceErrorFetching, isDuneBalance: fromBalanceIsDune, hasPendingBalance: fromBalancePending } = useCurrencyBalance({
-        chain: fromChain,
-        address: address,
-        currency: fromToken?.address ? fromToken.address : undefined,
-        enabled: fromToken !== undefined,
-        refreshInterval: undefined,
-        wallet
-    });
-    const { value: toBalance, queryKey: toBalanceQueryKey, isLoading: isLoadingToBalance, isDuneBalance: toBalanceIsDune, hasPendingBalance: toBalancePending } = useCurrencyBalance({
-        chain: toChain,
-        address: recipient,
-        currency: toToken?.address ? toToken.address : undefined,
-        enabled: toToken !== undefined && recipient !== undefined && recipient !== '',
-        refreshInterval: undefined,
-        wallet
-    });
-    const invalidateBalanceQueries = useCallback(() => {
-        const invalidatePeriodically = (invalidateFn) => {
-            let maxRefreshes = 4;
-            let refreshCount = 0;
-            const timer = setInterval(() => {
-                if (maxRefreshes === refreshCount) {
-                    clearInterval(timer);
-                    return;
-                }
-                refreshCount++;
-                invalidateFn();
-            }, 3000);
-        };
-        queryClient.invalidateQueries({ queryKey: ['useDuneBalances'] });
-        // Dune balances are sometimes stale, because of this we need to aggressively fetch them
-        // for a predetermined period to make sure we get back a fresh response
-        if (fromBalanceIsDune) {
-            invalidatePeriodically(() => {
-                queryClient.invalidateQueries({ queryKey: fromBalanceQueryKey });
-            });
-        }
-        else {
-            queryClient.invalidateQueries({ queryKey: fromBalanceQueryKey });
-        }
-        if (toBalanceIsDune) {
-            invalidatePeriodically(() => {
-                queryClient.invalidateQueries({ queryKey: toBalanceQueryKey });
-            });
-        }
-        else {
-            queryClient.invalidateQueries({ queryKey: toBalanceQueryKey });
-        }
-    }, [
-        queryClient,
-        fromBalanceQueryKey,
-        toBalanceQueryKey,
-        toBalanceIsDune,
-        fromBalanceIsDune,
-        address
-    ]);
-    const { data: capabilities } = useCapabilities({
-        query: {
-            enabled: connector &&
-                (connector.id === 'coinbaseWalletSDK' || connector.id === 'coinbase')
-        }
-    });
-    const hasAuxiliaryFundsSupport = Boolean(fromToken?.chainId
-        ? capabilities?.[fromToken?.chainId]?.auxiliaryFunds?.supported
-        : false);
-    const isSvmSwap = fromChain?.vmType === 'svm' || toChain?.vmType === 'svm';
-    const isBvmSwap = fromChain?.vmType === 'bvm' || toChain?.vmType === 'bvm';
-    const linkedWallet = linkedWallets?.find((linkedWallet) => address ===
-        (linkedWallet.vmType === 'evm'
-            ? linkedWallet.address.toLowerCase()
-            : linkedWallet.address) || linkedWallet.address === address);
-    const isRecipientLinked = (recipient
-        ? linkedWallets?.find((wallet) => wallet.address === recipient)
-        : undefined) !== undefined;
-    const isValidFromAddress = useMemo(() => isValidAddress(fromChain?.vmType, address ?? '', fromChain?.id, linkedWallet?.connector, connectorKeyOverrides), [
-        fromChain?.vmType,
-        address,
-        fromChain?.id,
-        linkedWallet?.connector,
-        connectorKeyOverrides
-    ]);
-    const fromAddressWithFallback = addressWithFallback(fromChain?.vmType, address, fromChain?.id, linkedWallet?.connector, connectorKeyOverrides);
-    const isValidToAddress = useMemo(() => isValidAddress(toChain?.vmType, recipient ?? '', toChain?.id), [toChain?.vmType, recipient, toChain?.id]);
-    const toAddressWithFallback = addressWithFallback(toChain?.vmType, recipient, toChain?.id);
-    const { displayName: toDisplayName } = useDisplayName(recipient, toChain?.vmType, toChain?.id);
-    const [currentSlippageTolerance, setCurrentSlippageTolerance] = useState(slippageTolerance);
-    useEffect(() => {
-        setCurrentSlippageTolerance(slippageTolerance);
-    }, [slippageTolerance]);
-    //  Retrieve the price of the `from` token
-    const { data: fromTokenPriceData, isLoading: isLoadingFromTokenPrice } = useTokenPrice(relayClient?.baseApiUrl, {
-        address: fromToken?.address ?? '',
-        chainId: fromToken?.chainId ?? 0,
-        referrer: relayClient?.source
-    }, {
-        enabled: !!(fromToken?.address && fromToken.chainId),
-        ...tokenPriceQueryOptions
-    });
-    // Retrieve the price of the `to` token
-    const { data: toTokenPriceData, isLoading: isLoadingToTokenPrice } = useTokenPrice(relayClient?.baseApiUrl, {
-        address: toToken?.address ?? '',
-        chainId: toToken?.chainId ?? 0,
-        referrer: relayClient?.source
-    }, {
-        enabled: !!(toToken?.address && toToken.chainId),
-        ...tokenPriceQueryOptions
-    });
-    const isFromNative = fromToken?.address === fromChain?.currency?.address;
-    const explicitDeposit = useExplicitDeposit(wallet, fromToken?.chainId, fromChain?.vmType, address);
-    const shouldSetQuoteParameters = fromToken && toToken;
-    const quoteParameters = shouldSetQuoteParameters
-        ? {
-            user: fromAddressWithFallback,
-            originChainId: fromToken.chainId,
-            destinationChainId: toToken.chainId,
-            originCurrency: fromToken.address,
-            destinationCurrency: toToken.address,
-            recipient: toAddressWithFallback,
-            tradeType,
-            appFees: providerOptionsContext.appFees,
-            amount: tradeType === 'EXACT_INPUT'
-                ? parseUnits(debouncedInputAmountValue, fromToken.decimals).toString()
-                : parseUnits(debouncedOutputAmountValue, toToken.decimals).toString(),
-            referrer: relayClient?.source ?? undefined,
-            useDepositAddress: !fromChainWalletVMSupported || fromToken?.chainId === 1337,
-            refundTo: fromToken?.chainId === 1337 ? address : undefined,
-            slippageTolerance: slippageTolerance,
-            ...(linkedWallet?.vmType === 'bvm' && wallet?.metadata?.publicKey
-                ? {
-                    additionalData: {
-                        userPublicKey: wallet?.metadata?.publicKey
-                    }
-                }
-                : {}),
-            ...(explicitDeposit !== undefined &&
-                fromChain?.vmType === 'evm' && {
-                explicitDeposit: explicitDeposit
-            })
-        }
-        : undefined;
-    const onQuoteRequested = (options, config) => {
-        const interval = get15MinuteInterval();
-        const quoteRequestId = sha256({ ...options, interval });
-        onAnalyticEvent?.(EventNames.QUOTE_REQUESTED, {
-            parameters: options,
-            wallet_connector: linkedWallet?.connector,
-            chain_id_in: options?.originChainId,
-            chain_id_out: options?.destinationChainId,
-            http_config: config,
-            quote_request_id: quoteRequestId
-        });
-    };
-    const onQuoteReceived = ({ details, steps }, options) => {
-        const interval = get15MinuteInterval();
-        const quoteRequestId = sha256({ ...options, interval });
-        onAnalyticEvent?.(EventNames.QUOTE_RECEIVED, {
-            parameters: options,
-            wallet_connector: linkedWallet?.connector,
-            amount_in: details?.currencyIn?.amountFormatted,
-            amount_in_raw: details?.currencyIn?.amount,
-            currency_in: details?.currencyIn?.currency?.symbol,
-            chain_id_in: details?.currencyIn?.currency?.chainId,
-            amount_out: details?.currencyOut?.amountFormatted,
-            amount_out_raw: details?.currencyOut?.amount,
-            currency_out: details?.currencyOut?.currency?.symbol,
-            chain_id_out: details?.currencyOut?.currency?.chainId,
-            slippage_tolerance_destination_percentage: details?.slippageTolerance?.destination?.percent,
-            slippage_tolerance_origin_percentage: details?.slippageTolerance?.origin?.percent,
-            steps,
-            quote_request_id: quoteRequestId,
-            quote_id: steps ? extractQuoteId(steps) : undefined
-        });
-    };
-    const quoteFetchingEnabled = Boolean(relayClient &&
-        ((tradeType === 'EXACT_INPUT' &&
-            debouncedInputAmountValue &&
-            debouncedInputAmountValue.length > 0 &&
-            Number(debouncedInputAmountValue) !== 0) ||
-            (tradeType === 'EXPECTED_OUTPUT' &&
-                debouncedOutputAmountValue &&
-                debouncedOutputAmountValue.length > 0 &&
-                Number(debouncedOutputAmountValue) !== 0)) &&
-        fromToken !== undefined &&
-        toToken !== undefined &&
-        !transactionModalOpen &&
-        !depositAddressModalOpen);
-    const quoteRefetchInterval = !transactionModalOpen &&
-        !depositAddressModalOpen &&
-        debouncedInputAmountValue === amountInputValue &&
-        debouncedOutputAmountValue === amountOutputValue
-        ? 12000
-        : undefined;
-    const handleQuoteError = (e) => {
-        const errorMessage = errorToJSON(e?.response?.data?.message ? new Error(e?.response?.data?.message) : e);
-        const interval = get15MinuteInterval();
-        const quoteRequestId = sha256({ ...quoteParameters, interval });
-        onAnalyticEvent?.(EventNames.QUOTE_ERROR, {
-            wallet_connector: linkedWallet?.connector,
-            error_message: errorMessage,
-            parameters: quoteParameters,
-            quote_request_id: quoteRequestId,
-            status_code: e?.response?.status ?? e?.status ?? ''
-        });
-    };
-    const { data: quote, error: quoteError, isFetching: isFetchingQuote, executeQuote: executeSwap, queryKey: quoteQueryKey } = useQuote(relayClient ? relayClient : undefined, wallet, quoteParameters, onQuoteRequested, onQuoteReceived, {
-        refetchOnWindowFocus: false,
-        enabled: Boolean(quoteFetchingEnabled && quoteParameters !== undefined),
-        refetchInterval: quoteRefetchInterval
-    }, handleQuoteError, undefined, useSecureBaseUrl?.(quoteParameters)
-        ? providerOptionsContext?.secureBaseUrl
-        : undefined);
-    const invalidateQuoteQuery = useCallback(() => {
-        queryClient.invalidateQueries({ queryKey: quoteQueryKey });
-    }, [queryClient, quoteQueryKey]);
-    const derivedError = quote ||
-        (isFetchingQuote &&
-            Boolean(quoteFetchingEnabled && quoteParameters !== undefined))
-        ? null
-        : quoteError;
-    const error = derivedError;
-    useDisconnected(address, () => {
-        setCustomToAddress(undefined);
-        setOriginAddressOverride(undefined);
-        setDestinationAddressOverride(undefined);
-    });
-    // Auto-select Lighter account when switching to LVM chain
-    const isLighterChain = toChain?.vmType === 'lvm';
-    const { data: connectedLighterAccount } = useLighterAccount(isLighterChain && address ? address : undefined);
-    useEffect(() => {
-        if (isLighterChain &&
-            connectedLighterAccount?.index &&
-            // Only auto-set if no valid Lighter address is already set
-            (!customToAddress || !isLighterAddress(customToAddress))) {
-            setCustomToAddress(connectedLighterAccount.index.toString());
-        }
-    }, [isLighterChain, connectedLighterAccount, customToAddress]);
-    useEffect(() => {
-        if (tradeType === 'EXACT_INPUT') {
-            const amountOut = quote?.details?.currencyOut?.amount ?? '';
-            setAmountOutputValue(amountOut !== ''
-                ? formatUnits(BigInt(amountOut), Number(quote?.details?.currencyOut?.currency?.decimals ?? 18))
-                : '');
-        }
-        else if (tradeType === 'EXPECTED_OUTPUT') {
-            const amountIn = quote?.details?.currencyIn?.amount ?? '';
-            setAmountInputValue(amountIn !== ''
-                ? formatUnits(BigInt(amountIn), Number(quote?.details?.currencyIn?.currency?.decimals ?? 18))
-                : '');
-        }
-        debouncedAmountInputControls.flush();
-        debouncedAmountOutputControls.flush();
-    }, [quote, tradeType]);
-    const feeBreakdown = useMemo(() => {
-        const chains = relayClient?.chains;
-        const fromChain = chains?.find((chain) => chain.id === fromToken?.chainId);
-        const toChain = chains?.find((chain) => chain.id === toToken?.chainId);
-        return fromToken && toToken && fromChain && toChain && quote
-            ? parseFees(toChain, fromChain, quote)
-            : null;
-    }, [quote, fromToken, toToken, relayClient]);
-    const totalAmount = BigInt(quote?.details?.currencyIn?.amount ?? 0n);
-    const hasInsufficientBalance = Boolean(!fromBalanceErrorFetching &&
-        totalAmount &&
-        address &&
-        (fromBalance ?? 0n) < totalAmount &&
-        !hasAuxiliaryFundsSupport &&
-        fromChainWalletVMSupported);
-    const fetchQuoteErrorMessage = error
-        ? error?.message
-            ? error?.message
-            : 'Unknown Error'
-        : null;
-    const fetchQuoteDataErrorMessage = error
-        ? error?.response?.data?.message
-            ? error?.response?.data.message
-            : 'Unknown Error'
-        : null;
-    const isInsufficientLiquidityError = Boolean(fetchQuoteErrorMessage?.includes('No quotes available'));
-    const isCapacityExceededError = fetchQuoteDataErrorMessage?.includes('Amount is higher than the available liquidity') || fetchQuoteDataErrorMessage?.includes('Insufficient relayer liquidity');
-    const isCouldNotExecuteError = fetchQuoteDataErrorMessage?.includes('Could not execute');
-    const highRelayerServiceFee = isHighRelayerServiceFeeUsd(quote);
-    const relayerFeeProportion = calculateRelayerFeeProportionUsd(quote);
-    const timeEstimate = calculatePriceTimeEstimate(quote?.details);
-    const recipientWalletSupportsChain = useIsWalletCompatible(toChain?.id, recipient, linkedWallets, onAnalyticEvent);
-    const isSameCurrencySameRecipientSwap = fromToken?.address === toToken?.address &&
-        fromToken?.chainId === toToken?.chainId &&
-        address === recipient;
-    const ctaCopy = useSwapButtonCta({
-        fromToken,
-        toToken,
-        multiWalletSupportEnabled,
-        isValidFromAddress,
-        fromChainWalletVMSupported,
-        isValidToAddress,
-        toChainWalletVMSupported,
-        fromChain,
-        toChain,
-        isSameCurrencySameRecipientSwap,
-        debouncedInputAmountValue,
-        debouncedOutputAmountValue,
-        hasInsufficientBalance,
-        isInsufficientLiquidityError,
-        quote,
-        operation: quote?.details?.operation
-    });
-    usePreviousValueChange(isCapacityExceededError, !isFetchingQuote, (capacityExceeded) => {
-        if (capacityExceeded) {
-            onAnalyticEvent?.(EventNames.CTA_MAX_CAPACITY_PROMPTED, {
-                inputAmount: debouncedInputAmountValue,
-                outputAmount: debouncedOutputAmountValue
-            });
-        }
-    });
-    const swap = useCallback(async () => {
-        let submittedEvents = [];
-        const swapErrorHandler = (error, currentSteps) => {
-            const errorMessage = errorToJSON(error?.response?.data?.message
-                ? new Error(error?.response?.data?.message)
-                : error);
-            if (error &&
-                ((typeof error.message === 'string' &&
-                    error.message.includes('rejected')) ||
-                    (typeof error === 'string' && error.includes('rejected')) ||
-                    (typeof error === 'string' && error.includes('Approval Denied')) ||
-                    (typeof error === 'string' && error.includes('denied transaction')) ||
-                    (typeof error.message === 'string' &&
-                        error.message.includes('Approval Denied')) ||
-                    (typeof error.message === 'string' &&
-                        error.message.includes('Plugin Closed')) ||
-                    (typeof error.message === 'string' &&
-                        error.message.includes('denied transaction')) ||
-                    (typeof error.message === 'string' &&
-                        error.message.includes('Failed to initialize request') &&
-                        fromChain?.id === 2741)) // Abstract @TODO: remove once privy improves handling rejected transactions
-            ) {
-                // Close the transaction modal if the user rejects the tx
-                setTransactionModalOpen(false);
-                onAnalyticEvent?.(EventNames.USER_REJECTED_WALLET, {
-                    error_message: errorMessage
-                });
-                return;
-            }
-            const { step, stepItem } = getCurrentStep(currentSteps);
-            const swapEventData = {
-                ...getSwapEventData(quote?.details, quote?.fees, currentSteps ?? null, linkedWallet?.connector, quoteParameters),
-                error_message: errorMessage
-            };
-            const isApproval = step?.id === 'approve';
-            const errorEvent = isApproval
-                ? EventNames.APPROVAL_ERROR
-                : EventNames.DEPOSIT_ERROR;
-            //Filter out receipt/deposit transaction errors, those are approval/deposit errors
-            const isTransactionConfirmationError = (error &&
-                typeof error.message === 'string' &&
-                error.message.includes('TransactionConfirmationError')) ||
-                (error.name && error.name.includes('TransactionConfirmationError'));
-            if (stepItem?.receipt &&
-                stepItem.check &&
-                !isTransactionConfirmationError &&
-                (typeof stepItem.receipt === 'object' && 'status' in stepItem.receipt
-                    ? stepItem.receipt.status !== 'reverted'
-                    : true) &&
-                (!stepItem.checkStatus || stepItem.checkStatus !== 'unknown')) {
-                //In some cases there's a race condition where an error is thrown before the steps get a chance to call
-                //the callback which triggers the success event. This is a workaround to ensure the success event is triggered when
-                //we have a receipt and require a fill check if we haven't already send the success event.
-                const successEvent = isApproval
-                    ? EventNames.APPROVAL_SUCCESS
-                    : EventNames.DEPOSIT_SUCCESS;
-                if (!submittedEvents.includes(successEvent)) {
-                    onAnalyticEvent?.(successEvent, swapEventData);
-                    submittedEvents.push(successEvent);
-                    //To preserve the order of events we need to delay sending the fill error event but mark that we did send it to avoid duplicates
-                    setTimeout(() => {
-                        onAnalyticEvent?.(EventNames.FILL_ERROR, swapEventData);
-                    }, 20);
-                }
-                else {
-                    onAnalyticEvent?.(EventNames.FILL_ERROR, swapEventData);
-                }
-            }
-            else if (!stepItem?.receipt ||
-                (typeof stepItem.receipt === 'object' &&
-                    'status' in stepItem.receipt &&
-                    stepItem.receipt.status === 'reverted')) {
-                onAnalyticEvent?.(errorEvent, swapEventData);
-            }
-            else {
-                onAnalyticEvent?.(EventNames.SWAP_ERROR, swapEventData);
-            }
-            setSwapError(errorMessage);
-            onSwapError?.(errorMessage, { ...quote, steps: currentSteps });
-        };
-        try {
-            const swapEventData = getSwapEventData(quote?.details, quote?.fees, quote?.steps ? quote?.steps : null, linkedWallet?.connector, quoteParameters);
-            onAnalyticEvent?.(EventNames.SWAP_CTA_CLICKED, swapEventData);
-            setWaitingForSteps(true);
-            if (!executeSwap) {
-                throw new Error('Missing a quote');
-            }
-            if (!wallet && !walletClient.data) {
-                throw new Error('Missing a wallet');
-            }
-            setSteps(quote?.steps);
-            setQuoteInProgress(quote);
-            setTransactionModalOpen(true);
-            const _wallet = wallet ?? adaptViemWallet(walletClient.data);
-            const activeWalletChainId = await _wallet?.getChainId();
-            const activeWalletChain = relayClient?.chains?.find((chain) => chain.id === activeWalletChainId);
-            let targetChainId = fromToken?.chainId;
-            //Special case for Hyperliquid, to sign txs on an evm chain
-            if (fromToken?.chainId === 1337) {
-                targetChainId =
-                    activeWalletChain?.vmType !== 'evm' ? 1 : activeWalletChainId;
-            }
-            if (fromToken && targetChainId && targetChainId !== activeWalletChainId) {
-                onAnalyticEvent?.(EventNames.SWAP_SWITCH_NETWORK, {
-                    activeWalletChainId,
-                    ...swapEventData
-                });
-                await _wallet?.switchChain(targetChainId);
-            }
-            let _currentSteps = undefined;
-            const execPromise = executeSwap(({ steps: currentSteps }) => {
-                setSteps(currentSteps);
-                _currentSteps = currentSteps;
-                const { step, stepItem } = getCurrentStep(currentSteps);
-                const swapEventData = getSwapEventData(quote?.details, quote?.fees, currentSteps, linkedWallet?.connector, quoteParameters);
-                if (step && stepItem) {
-                    //@ts-ignore
-                    const isApproval = step.id === 'approve' || step.id === 'approval';
-                    let submittedEvent = isApproval
-                        ? EventNames.APPROVAL_SUBMITTED
-                        : EventNames.DEPOSIT_SUBMITTED;
-                    const successEvent = isApproval
-                        ? EventNames.APPROVAL_SUCCESS
-                        : EventNames.DEPOSIT_SUCCESS;
-                    const isBatchTransaction = Boolean(Array.isArray(step.items) &&
-                        step.items.length > 1 &&
-                        wallet?.handleBatchTransactionStep);
-                    if (!isApproval && isBatchTransaction) {
-                        submittedEvent = EventNames.BATCH_TX_SUBMITTED;
-                    }
-                    if (!submittedEvents.includes(submittedEvent) &&
-                        !stepItem.receipt &&
-                        stepItem?.txHashes &&
-                        stepItem?.txHashes?.length > 0) {
-                        submittedEvents.push(submittedEvent);
-                        onAnalyticEvent?.(submittedEvent, swapEventData);
-                    }
-                    else if (!submittedEvents.includes(successEvent) &&
-                        ((stepItem.receipt &&
-                            !(typeof stepItem.receipt === 'object' &&
-                                'status' in stepItem.receipt &&
-                                stepItem.receipt.status === 'reverted')) ||
-                            stepItem.checkStatus === 'pending')) {
-                        onAnalyticEvent?.(successEvent, swapEventData);
-                        submittedEvents.push(successEvent);
-                    }
-                    if (stepItem.status === 'complete' &&
-                        stepItem.check &&
-                        !submittedEvents.includes(EventNames.FILL_SUCCESS)) {
-                        //Sometimes a fill may be quicker than the tx receipt is available, so we need to handle this scenario
-                        if (!submittedEvents.includes(EventNames.DEPOSIT_SUCCESS) &&
-                            !isBatchTransaction) {
-                            onAnalyticEvent?.(EventNames.DEPOSIT_SUCCESS, swapEventData);
-                            submittedEvents.push(EventNames.DEPOSIT_SUCCESS);
-                            //To preserve the order of events we need to delay sending the fill success event but mark that we did send it to avoid duplicates
-                            setTimeout(() => {
-                                onAnalyticEvent?.(EventNames.FILL_SUCCESS, swapEventData);
-                            }, 20);
-                        }
-                        else {
-                            onAnalyticEvent?.(EventNames.FILL_SUCCESS, swapEventData);
-                        }
-                        submittedEvents.push(EventNames.FILL_SUCCESS);
-                    }
-                }
-                else if (currentSteps?.every((step) => step.items?.every((item) => item.status === 'complete')) &&
-                    !submittedEvents.includes(EventNames.FILL_SUCCESS)) {
-                    //Sometimes a fill may be quicker than the tx receipt is available, so we need to handle this scenario
-                    if (!submittedEvents.includes(EventNames.DEPOSIT_SUCCESS) &&
-                        !submittedEvents.includes(EventNames.BATCH_TX_SUBMITTED)) {
-                        onAnalyticEvent?.(EventNames.DEPOSIT_SUCCESS, swapEventData);
-                        submittedEvents.push(EventNames.DEPOSIT_SUCCESS);
-                        //To preserve the order of events we need to delay sending the fill success event but mark that we did send it to avoid duplicates
-                        setTimeout(() => {
-                            onAnalyticEvent?.(EventNames.FILL_SUCCESS, swapEventData);
-                        }, 20);
-                    }
-                    else {
-                        onAnalyticEvent?.(EventNames.FILL_SUCCESS, swapEventData);
-                    }
-                    submittedEvents.push(EventNames.FILL_SUCCESS);
-                }
-            });
-            // Store the AbortController for potential cancellation immediately
-            if (execPromise &&
-                typeof execPromise === 'object' &&
-                'abortController' in execPromise) {
-                setAbortController(execPromise.abortController);
-            }
-            execPromise
-                ?.catch((error) => {
-                swapErrorHandler(error, _currentSteps);
-            })
-                .finally(() => {
-                setWaitingForSteps(false);
-                setAbortController(null);
-                invalidateBalanceQueries();
-            });
-        }
-        catch (error) {
-            swapErrorHandler(error);
-            setWaitingForSteps(false);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        relayClient,
-        address,
-        connector,
-        wallet,
-        walletClient,
-        fromToken,
-        toToken,
-        customToAddress,
-        recipient,
-        debouncedInputAmountValue,
-        debouncedOutputAmountValue,
-        tradeType,
-        waitingForSteps,
-        executeSwap,
-        setSteps,
-        setQuoteInProgress,
-        invalidateBalanceQueries,
-        linkedWallet,
-        abortController
-    ]);
-    return (_jsx(_Fragment, { children: children({
-            quote,
-            steps,
-            setSteps,
-            swap,
-            transactionModalOpen,
-            feeBreakdown,
-            fromToken,
-            setFromToken,
-            toToken,
-            setToToken,
-            swapError,
-            error,
-            toDisplayName,
-            address,
-            originAddressOverride,
-            setOriginAddressOverride,
-            recipient,
-            destinationAddressOverride,
-            customToAddress,
-            setCustomToAddress,
-            setDestinationAddressOverride,
-            tradeType,
-            setTradeType,
-            details,
-            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,
-            slippageTolerance: currentSlippageTolerance,
-            timeEstimate,
-            isSvmSwap,
-            isBvmSwap,
-            isValidFromAddress,
-            isValidToAddress,
-            supportedWalletVMs,
-            fromChainWalletVMSupported,
-            toChainWalletVMSupported,
-            isRecipientLinked,
-            recipientWalletSupportsChain,
-            invalidateBalanceQueries,
-            invalidateQuoteQuery,
-            setDetails,
-            setSwapError,
-            quoteInProgress,
-            setQuoteInProgress,
-            linkedWallet,
-            quoteParameters,
-            abortController,
-            fromTokenPriceData,
-            toTokenPriceData,
-            isLoadingFromTokenPrice,
-            isLoadingToTokenPrice
-        }) }));
-};
-export default TokenWidgetRenderer;
-//# sourceMappingURL=TokenWidgetRenderer.js.map