0xtrails 0.0.1 → 0.0.2

package/dist/widget/hooks/useAmountUsd.d.ts

@@ -0,0 +1,13 @@
+import type { SequenceAPIClient } from "@0xsequence/trails-api";
+type UseAmountUsdProps = {
+    amount?: string | null;
+    token?: string | null;
+    chainId?: number | null;
+    apiClient: SequenceAPIClient;
+};
+export declare function useAmountUsd({ amount, token, chainId, apiClient, }: UseAmountUsdProps): {
+    amountUsd: number | null;
+    amountUsdFormatted: string;
+};
+export {};
+//# sourceMappingURL=useAmountUsd.d.ts.map

package/dist/widget/hooks/useAmountUsd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAmountUsd.d.ts","sourceRoot":"","sources":["../../../src/widget/hooks/useAmountUsd.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAM/D,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,SAAS,EAAE,iBAAiB,CAAA;CAC7B,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,OAAO,EACP,SAAS,GACV,EAAE,iBAAiB,GAAG;IACrB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,kBAAkB,EAAE,MAAM,CAAA;CAC3B,CAqCA"}

package/dist/widget/hooks/useAmountUsd.js

@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/react-query";
+import { useTokenPrice } from "../../prices.js";
+import { formatUsdValue } from "../../tokenBalances.js";
+import { useTokenAddress } from "../../tokens.js";
+export function useAmountUsd({ amount, token, chainId, apiClient, }) {
+    const isTokenAddress = token?.startsWith("0x");
+    const resolvedTokenAddress = useTokenAddress({
+        chainId,
+        tokenSymbol: isTokenAddress ? undefined : token,
+    });
+    const tokenAddress = isTokenAddress ? token : resolvedTokenAddress;
+    const { tokenPrice } = useTokenPrice(token && tokenAddress && chainId
+        ? {
+            tokenId: token,
+            contractAddress: tokenAddress,
+            chainId: Number(chainId),
+        }
+        : null, apiClient);
+    const { data: amountUsd } = useQuery({
+        queryKey: ["amountUsd", amount, tokenPrice?.price?.value],
+        queryFn: () => {
+            if (!amount || !tokenPrice?.price?.value) {
+                return null;
+            }
+            const tokenPriceValue = tokenPrice.price.value;
+            const value = Number(amount) * tokenPriceValue;
+            return value;
+        },
+        enabled: !!amount && !!tokenPrice?.price?.value,
+    });
+    return {
+        amountUsd: amountUsd || null,
+        amountUsdFormatted: formatUsdValue(amountUsd || 0),
+    };
+}

package/dist/widget/hooks/useSendForm.d.ts

@@ -0,0 +1,125 @@
+import type { TokenPrice } from "@0xsequence/trails-api";
+import type { MetaTxnReceipt } from "@0xsequence/trails-relayer";
+import type React from "react";
+import { type Account, type TransactionReceipt, type WalletClient } from "viem";
+import { type TransactionState } from "../../prepareSend.js";
+import { type RelayerEnv } from "../../relayer.js";
+import type { Theme } from "../../theme.js";
+import type { SupportedToken } from "../../tokens.js";
+export interface Token {
+    id: number;
+    name: string;
+    symbol: string;
+    balance: string;
+    imageUrl: string;
+    chainId: number;
+    contractAddress: string;
+    tokenPriceUsd?: number;
+    balanceUsdFormatted?: string;
+    contractInfo?: {
+        decimals: number;
+        symbol: string;
+        name: string;
+    };
+}
+export type TokenInfo = {
+    symbol: string;
+    name: string;
+    imageUrl: string;
+    decimals: number;
+};
+type ChainInfo = {
+    id: number;
+    name: string;
+    imageUrl?: string;
+};
+type PaymasterUrl = {
+    chainId: number;
+    url: string;
+};
+export type OnCompleteProps = {
+    originChainId: number;
+    destinationChainId: number;
+    originUserTxReceipt: TransactionReceipt | null;
+    originMetaTxnReceipt: MetaTxnReceipt | null;
+    destinationMetaTxnReceipt: MetaTxnReceipt | null;
+};
+export type UseSendProps = {
+    account: Account;
+    sequenceProjectAccessKey: string;
+    apiUrl?: string;
+    env?: RelayerEnv;
+    toAmount?: string;
+    toRecipient?: string;
+    toChainId?: number;
+    toToken?: string;
+    toCalldata?: string;
+    walletClient: WalletClient;
+    theme: Theme;
+    onTransactionStateChange: (transactionStates: TransactionState[]) => void;
+    useSourceTokenForButtonText: boolean;
+    onError: (error: Error | string | null) => void;
+    onWaitingForWalletConfirm: (intentAddress: string, details: {
+        amount: string;
+        amountUsd: string;
+        tokenSymbol: string;
+        tokenName: string;
+        chainId: number;
+        imageUrl: string;
+    }) => void;
+    paymasterUrls?: PaymasterUrl[];
+    gasless?: boolean;
+    onSend: (amount: string, recipient: string) => void;
+    onConfirm: () => void;
+    onComplete: (result: OnCompleteProps) => void;
+    selectedToken: Token;
+    setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void;
+};
+export type UseSendReturn = {
+    amount: string;
+    amountUsdFormatted: string;
+    balanceUsdFormatted: string;
+    chainInfo: ChainInfo | null;
+    error: string | null;
+    toChainId: number | undefined;
+    balanceFormatted: string;
+    handleRecipientInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleSubmit: (e: React.FormEvent) => Promise<void>;
+    isChainDropdownOpen: boolean;
+    isSubmitting: boolean;
+    isTokenDropdownOpen: boolean;
+    recipient: string;
+    recipientInput: string;
+    selectedDestinationChain: ChainInfo | null;
+    selectedDestToken: TokenInfo;
+    setAmount: (amount: string) => void;
+    setRecipient: (recipient: string) => void;
+    setRecipientInput: (recipientInput: string) => void;
+    setSelectedDestinationChain: (chain: ChainInfo) => void;
+    setSelectedDestToken: (token: TokenInfo) => void;
+    setSelectedFeeToken: (token: TokenInfo) => void;
+    FEE_TOKENS: TokenInfo[];
+    supportedTokens: SupportedToken[];
+    supportedChains: ChainInfo[];
+    ensAddress: string | null;
+    isWaitingForWalletConfirm: boolean;
+    buttonText: string;
+    isValidRecipient: boolean;
+    useSourceTokenForButtonText: boolean;
+    destTokenPrices: TokenPrice[] | null;
+    selectedToken: Token;
+    selectedFeeToken: TokenInfo | null;
+    setIsChainDropdownOpen: (isOpen: boolean) => void;
+    setIsTokenDropdownOpen: (isOpen: boolean) => void;
+    toAmountFormatted: string;
+    destinationTokenAddress: string | null;
+    isValidCustomToken: boolean;
+};
+export declare function useSendForm({ account, sequenceProjectAccessKey, apiUrl, env, toAmount, // Custom specified amount
+toRecipient, // Custom specified recipient
+toChainId, // Custom specified destination chain id
+toToken, // Custom specified destination token address or symbol
+toCalldata, // Custom specified destination calldata
+walletClient, onTransactionStateChange, useSourceTokenForButtonText, onError, onWaitingForWalletConfirm, paymasterUrls, gasless, selectedToken, onSend, onConfirm, onComplete, setWalletConfirmRetryHandler, }: UseSendProps): UseSendReturn;
+export {};
+//# sourceMappingURL=useSendForm.d.ts.map

package/dist/widget/hooks/useSendForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSendForm.d.ts","sourceRoot":"","sources":["../../../src/widget/hooks/useSendForm.ts"],"names":[],"mappings":"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"}

package/dist/widget/hooks/useSendForm.js

@@ -0,0 +1,450 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { formatUnits, getAddress, isAddress, parseUnits, } from "viem";
+import { mainnet } from "viem/chains";
+import { useEnsAddress } from "wagmi";
+import { useAPIClient } from "../../apiClient.js";
+import { getChainInfo, useSupportedChains } from "../../chains.js";
+import { getFullErrorMessage } from "../../error.js";
+import { prepareSend } from "../../prepareSend.js";
+import { useTokenPrices } from "../../prices.js";
+import { useQueryParams } from "../../queryParams.js";
+import { getRelayer } from "../../relayer.js";
+import { formatBalance, formatUsdValue, formatValue, } from "../../tokenBalances.js";
+import { useSupportedTokens, useTokenAddress, useTokenInfo, } from "../../tokens.js";
+import { DEFAULT_USE_V3_RELAYERS } from "../../constants.js";
+// Add FEE_TOKENS constant after SUPPORTED_TOKENS
+const FEE_TOKENS = [
+    {
+        symbol: "ETH",
+        name: "Ethereum",
+        imageUrl: `https://assets.sequence.info/images/tokens/large/1/0x0000000000000000000000000000000000000000.webp`,
+        decimals: 18,
+    },
+    {
+        symbol: "USDC",
+        name: "USD Coin",
+        imageUrl: `https://assets.sequence.info/images/tokens/large/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.webp`,
+        decimals: 6,
+    },
+];
+export function useSendForm({ account, sequenceProjectAccessKey, apiUrl, env, toAmount, // Custom specified amount
+toRecipient, // Custom specified recipient
+toChainId, // Custom specified destination chain id
+toToken, // Custom specified destination token address or symbol
+toCalldata, // Custom specified destination calldata
+walletClient, onTransactionStateChange, useSourceTokenForButtonText, onError, onWaitingForWalletConfirm, paymasterUrls, gasless, selectedToken, onSend, onConfirm, onComplete, setWalletConfirmRetryHandler, }) {
+    const [amount, setAmount] = useState(toAmount ?? "");
+    const [recipientInput, setRecipientInput] = useState(toRecipient ?? "");
+    const [recipient, setRecipient] = useState(toRecipient ?? "");
+    const [error, setError] = useState(null);
+    const { supportedChains } = useSupportedChains();
+    const { data: ensAddress } = useEnsAddress({
+        name: recipientInput?.endsWith(".eth") ? recipientInput : undefined,
+        chainId: mainnet.id,
+        query: {
+            enabled: !!recipientInput && recipientInput.endsWith(".eth"),
+        },
+    });
+    useEffect(() => {
+        if (ensAddress) {
+            setRecipient(ensAddress);
+        }
+        else {
+            setRecipient(recipientInput);
+        }
+    }, [ensAddress, recipientInput]);
+    useEffect(() => {
+        if (onError) {
+            onError(error);
+        }
+    }, [error, onError]);
+    const handleRecipientInputChange = (e) => {
+        setRecipientInput(e.target.value.trim());
+    };
+    const [selectedDestinationChain, setSelectedDestinationChain] = useState(() => {
+        const chain = supportedChains.find((chain) => chain.id === toChainId);
+        if (chain) {
+            return chain;
+        }
+        return supportedChains[0];
+    });
+    const { supportedTokens } = useSupportedTokens({
+        chainId: selectedDestinationChain?.id,
+    });
+    const isCustomToken = useMemo(() => toToken?.startsWith("0x"), [toToken]);
+    const { tokenInfo: customTokenInfo, isLoading: isLoadingCustomToken, error: errorCustomToken, } = useTokenInfo({
+        address: isCustomToken ? toToken : "",
+        chainId: toChainId,
+    });
+    const isValidCustomToken = useMemo(() => {
+        if (!isCustomToken) {
+            return true;
+        }
+        return Boolean(isCustomToken &&
+            !errorCustomToken &&
+            !isLoadingCustomToken &&
+            !!customTokenInfo);
+    }, [isCustomToken, errorCustomToken, isLoadingCustomToken, customTokenInfo]);
+    useEffect(() => {
+        if (isCustomToken && customTokenInfo && !isLoadingCustomToken) {
+            setSelectedDestToken(customTokenInfo);
+        }
+    }, [customTokenInfo, isCustomToken, isLoadingCustomToken]);
+    useEffect(() => {
+        if (isCustomToken && errorCustomToken && !isLoadingCustomToken) {
+            console.error("[trails-sdk] errorCustomToken", errorCustomToken);
+            setError(`Invalid custom toToken address. Error: ${errorCustomToken.message}`);
+        }
+    }, [errorCustomToken, isCustomToken, isLoadingCustomToken]);
+    const defaultDestToken = useMemo(() => {
+        if (selectedDestinationChain) {
+            return supportedTokens.find((token) => token.chainId === selectedDestinationChain.id);
+        }
+        return supportedTokens?.[0];
+    }, [supportedTokens, selectedDestinationChain]);
+    const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false);
+    const [isTokenDropdownOpen, setIsTokenDropdownOpen] = useState(false);
+    const [selectedDestToken, setSelectedDestToken] = useState(() => {
+        let token = defaultDestToken;
+        if (toToken && !isCustomToken) {
+            const isToTokenAddress = isAddress(toToken);
+            token = supportedTokens.find((token) => (isToTokenAddress // Match by specified destination token address or symbol
+                ? token.contractAddress === toToken
+                : token.symbol === toToken) &&
+                (toChainId // Match by specified destination chain id
+                    ? token.chainId === toChainId
+                    : selectedDestinationChain.id));
+        }
+        return token;
+    });
+    useEffect(() => {
+        if (!selectedDestToken && defaultDestToken) {
+            setSelectedDestToken(defaultDestToken);
+        }
+    }, [selectedDestToken, defaultDestToken]);
+    const apiClient = useAPIClient({
+        apiUrl,
+        projectAccessKey: sequenceProjectAccessKey,
+    });
+    const destTokenAddress = useTokenAddress({
+        chainId: selectedDestinationChain?.id,
+        tokenSymbol: selectedDestToken?.symbol,
+    });
+    const { tokenPrices: destTokenPrices } = useTokenPrices(selectedDestToken && destTokenAddress
+        ? [
+            {
+                tokenId: selectedDestToken.symbol,
+                contractAddress: destTokenAddress,
+                chainId: selectedDestinationChain.id,
+            },
+        ]
+        : [], apiClient);
+    // Update selectedChain when toChainId prop changes
+    useEffect(() => {
+        if (toChainId) {
+            const newChain = supportedChains.find((chain) => chain.id === toChainId);
+            if (newChain) {
+                setSelectedDestinationChain(newChain);
+            }
+        }
+    }, [toChainId, supportedChains]);
+    // Update selectedDestToken when toToken prop changes
+    useEffect(() => {
+        if (toToken && !isCustomToken) {
+            const isToTokenAddress = isAddress(toToken);
+            const newToken = supportedTokens.find((token) => (isToTokenAddress // Match by specified destination token address or symbol
+                ? token.contractAddress === toToken
+                : token.symbol === toToken) &&
+                (toChainId // Match by specified destination chain id
+                    ? token.chainId === toChainId
+                    : token.chainId === selectedDestinationChain.id));
+            if (newToken) {
+                setSelectedDestToken(newToken);
+            }
+        }
+    }, [
+        toToken,
+        supportedTokens,
+        toChainId,
+        selectedDestinationChain.id,
+        isCustomToken,
+    ]);
+    // Update amount when toAmount prop changes
+    useEffect(() => {
+        setAmount(toAmount ?? "");
+    }, [toAmount]);
+    const toAmountFormatted = useMemo(() => {
+        return formatValue(toAmount || 0);
+    }, [toAmount]);
+    // Update recipient when toRecipient prop changes
+    useEffect(() => {
+        setRecipientInput(toRecipient ?? "");
+        setRecipient(toRecipient ?? "");
+    }, [toRecipient]);
+    const chainInfo = getChainInfo(selectedToken.chainId);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isWaitingForWalletConfirm, setIsWaitingForWalletConfirm] = useState(false);
+    const balanceFormatted = formatBalance(selectedToken.balance, selectedToken.contractInfo?.decimals);
+    const balanceUsdFormatted = selectedToken.balanceUsdFormatted ?? "";
+    const relayerConfig = useMemo(() => ({ env, useV3Relayers: DEFAULT_USE_V3_RELAYERS }), [env]);
+    const isValidRecipient = Boolean(recipient && isAddress(recipient));
+    // Calculate USD value
+    const amountUsdFormatted = useMemo(() => {
+        const amountUsd = Number(amount) * (destTokenPrices?.[0]?.price?.value ?? 0);
+        return formatUsdValue(amountUsd);
+    }, [amount, destTokenPrices]);
+    const [selectedFeeToken, setSelectedFeeToken] = useState(null);
+    const { hasParam } = useQueryParams();
+    const isDryMode = hasParam("dryMode", "true");
+    const destinationTokenAddressFromTokenSymbol = useTokenAddress({
+        chainId: selectedDestinationChain?.id,
+        tokenSymbol: selectedDestToken?.symbol,
+    });
+    const destinationTokenAddress = useMemo(() => {
+        if (isCustomToken) {
+            return toToken ?? null;
+        }
+        return destinationTokenAddressFromTokenSymbol ?? null;
+    }, [isCustomToken, toToken, destinationTokenAddressFromTokenSymbol]);
+    const processSend = useCallback(async () => {
+        try {
+            if (!destinationTokenAddress) {
+                return;
+            }
+            setError(null);
+            setIsSubmitting(true);
+            const decimals = selectedDestToken?.decimals;
+            const parsedAmount = parseUnits(amount, decimals).toString();
+            const originRelayer = getRelayer(relayerConfig, selectedToken.chainId);
+            const destinationRelayer = getRelayer(relayerConfig, selectedDestinationChain.id);
+            const sourceTokenDecimals = typeof selectedToken.contractInfo?.decimals === "number"
+                ? selectedToken.contractInfo.decimals
+                : null;
+            const destinationTokenDecimals = typeof selectedDestToken.decimals === "number"
+                ? selectedDestToken.decimals
+                : null;
+            if (sourceTokenDecimals === null || destinationTokenDecimals === null) {
+                setError("Invalid token decimals");
+                setIsSubmitting(false);
+                return;
+            }
+            const sourceTokenPriceUsd = selectedToken.tokenPriceUsd ?? null;
+            const destinationTokenPriceUsd = destTokenPrices?.[0]?.price?.value ?? null;
+            const options = {
+                account,
+                originTokenAddress: selectedToken.contractAddress,
+                originChainId: selectedToken.chainId,
+                originTokenAmount: selectedToken.balance,
+                destinationChainId: selectedDestinationChain.id,
+                recipient,
+                destinationTokenAddress,
+                destinationTokenAmount: parsedAmount,
+                destinationTokenSymbol: selectedDestToken.symbol,
+                sequenceProjectAccessKey,
+                fee: "0",
+                client: walletClient,
+                apiClient,
+                originRelayer,
+                destinationRelayer,
+                destinationCalldata: toCalldata,
+                dryMode: isDryMode,
+                onTransactionStateChange: (transactionStates) => {
+                    onTransactionStateChange(transactionStates);
+                },
+                sourceTokenPriceUsd,
+                destinationTokenPriceUsd,
+                sourceTokenDecimals,
+                destinationTokenDecimals,
+                paymasterUrl: paymasterUrls?.find((p) => p.chainId.toString() === selectedToken.chainId.toString())?.url ?? undefined,
+                gasless,
+                relayerConfig,
+            };
+            console.log("[trails-sdk] options", options);
+            const { intentAddress, originSendAmount, send } = await prepareSend(options);
+            console.log("[trails-sdk] Intent address:", intentAddress?.toString());
+            function onOriginSend() {
+                console.log("[trails-sdk] onOriginSend called");
+                onConfirm();
+                setIsWaitingForWalletConfirm(false);
+                onSend(amount, recipient);
+            }
+            const originSendAmountFormatted = Number(formatUnits(BigInt(originSendAmount), selectedToken.contractInfo?.decimals ?? 18));
+            const originSendAmountUsdFormatted = originSendAmountFormatted * (sourceTokenPriceUsd ?? 0);
+            setIsWaitingForWalletConfirm(true);
+            onWaitingForWalletConfirm(intentAddress?.toString() ?? "", {
+                amount: formatValue(originSendAmountFormatted),
+                amountUsd: formatUsdValue(originSendAmountUsdFormatted),
+                tokenSymbol: selectedToken.symbol,
+                tokenName: selectedToken.name,
+                chainId: selectedToken.chainId,
+                imageUrl: selectedToken.imageUrl,
+            });
+            async function handleSend() {
+                console.log("[trails-sdk] handleRetry called, about to call send()");
+                // Wait for full send to complete
+                const { originUserTxReceipt, originMetaTxnReceipt, destinationMetaTxnReceipt, } = await send(onOriginSend);
+                console.log("[trails-sdk] send() completed, receipts:", {
+                    originUserTxReceipt,
+                    originMetaTxnReceipt,
+                    destinationMetaTxnReceipt,
+                });
+                // Move to receipt screen
+                onComplete({
+                    originChainId: selectedToken.chainId,
+                    destinationChainId: selectedDestinationChain.id,
+                    originUserTxReceipt,
+                    originMetaTxnReceipt,
+                    destinationMetaTxnReceipt,
+                });
+            }
+            async function walletConfirmRetryHandler() {
+                console.log("[trails-sdk] walletConfirmRetryHandler called");
+                try {
+                    console.log("[trails-sdk] About to call handleRetry");
+                    await handleSend();
+                    console.log("[trails-sdk] handleRetry completed successfully");
+                }
+                catch (error) {
+                    console.error("[trails-sdk] Error in prepareSend walletConfirmRetryHandler:", error);
+                    const errorMessage = getFullErrorMessage(error);
+                    setError(errorMessage);
+                    if (onError) {
+                        onError(errorMessage);
+                    }
+                }
+            }
+            setWalletConfirmRetryHandler(() => walletConfirmRetryHandler);
+            await handleSend();
+        }
+        catch (error) {
+            console.error("[trails-sdk] Error in prepareSend:", error);
+            const errorMessage = getFullErrorMessage(error);
+            setError(errorMessage);
+            if (onError) {
+                onError(errorMessage);
+            }
+        }
+        setIsSubmitting(false);
+        setIsWaitingForWalletConfirm(false);
+    }, [
+        amount,
+        selectedToken,
+        onSend,
+        onConfirm,
+        onComplete,
+        walletClient,
+        apiClient,
+        relayerConfig,
+        isDryMode,
+        selectedDestToken,
+        selectedDestinationChain,
+        toCalldata,
+        paymasterUrls,
+        gasless,
+        sequenceProjectAccessKey,
+        account,
+        destTokenPrices,
+        setWalletConfirmRetryHandler,
+        onWaitingForWalletConfirm,
+        recipient,
+        onTransactionStateChange,
+        destinationTokenAddress,
+        onError,
+    ]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        processSend().catch((error) => {
+            console.error("[trails-sdk] Error in processSend:", error);
+            setError(error instanceof Error ? error.message : "An unexpected error occurred");
+        });
+    };
+    // Get button text based on recipient and calldata
+    const buttonText = useMemo(() => {
+        if (isWaitingForWalletConfirm)
+            return "Waiting for wallet...";
+        if (isSubmitting)
+            return "Processing...";
+        if (!amount)
+            return "Enter amount";
+        if (!isValidRecipient)
+            return "Enter recipient";
+        const amountFormatted = formatValue(amount);
+        const destTokenSymbol = selectedDestToken?.symbol ?? "Token";
+        try {
+            const checksummedRecipient = getAddress(recipient);
+            const checksummedAccount = getAddress(account.address);
+            if (checksummedRecipient === checksummedAccount) {
+                return `Receive ${amountFormatted} ${destTokenSymbol}`;
+            }
+            if (toCalldata) {
+                if (useSourceTokenForButtonText) {
+                    const destPrice = destTokenPrices?.[0]?.price?.value ?? 0;
+                    const sourcePrice = selectedToken.tokenPriceUsd ?? 0;
+                    if (destPrice > 0 && sourcePrice > 0) {
+                        const destAmountUsd = Number(amount) * destPrice;
+                        const sourceAmount = destAmountUsd / sourcePrice;
+                        const formattedSourceAmount = formatValue(sourceAmount);
+                        return `Spend ~${formattedSourceAmount} ${selectedToken.symbol}`;
+                    }
+                }
+                return `Spend ${amountFormatted} ${destTokenSymbol}`;
+            }
+            return `Pay ${amountFormatted} ${destTokenSymbol}`;
+        }
+        catch {
+            return `Send ${amountFormatted} ${destTokenSymbol}`;
+        }
+    }, [
+        amount,
+        isValidRecipient,
+        recipient,
+        account.address,
+        selectedDestToken?.symbol,
+        toCalldata,
+        isWaitingForWalletConfirm,
+        isSubmitting,
+        useSourceTokenForButtonText,
+        destTokenPrices,
+        selectedToken,
+    ]);
+    return {
+        amount,
+        amountUsdFormatted,
+        balanceUsdFormatted,
+        chainInfo,
+        toChainId,
+        error,
+        balanceFormatted,
+        handleRecipientInputChange,
+        handleSubmit,
+        isChainDropdownOpen,
+        isSubmitting,
+        isTokenDropdownOpen,
+        recipient,
+        recipientInput,
+        selectedDestinationChain,
+        selectedDestToken,
+        setAmount,
+        setRecipient,
+        setRecipientInput,
+        setSelectedDestinationChain,
+        setSelectedDestToken,
+        setSelectedFeeToken,
+        FEE_TOKENS,
+        supportedTokens,
+        supportedChains,
+        ensAddress: ensAddress ?? null,
+        isWaitingForWalletConfirm,
+        buttonText,
+        isValidRecipient,
+        useSourceTokenForButtonText,
+        destTokenPrices: destTokenPrices ?? null,
+        selectedToken,
+        selectedFeeToken,
+        setIsChainDropdownOpen,
+        setIsTokenDropdownOpen,
+        toAmountFormatted,
+        destinationTokenAddress,
+        isValidCustomToken,
+    };
+}