0xtrails 0.5.0 → 0.6.0

package/src/widget/components/AccountSettings.tsx

@@ -37,23 +37,23 @@ export const AccountSettings: React.FC<AccountSettingsProps> = ({ onBack }) => {
 
   return (
     <div className="flex flex-col h-full">
-      <div className="flex items-center justify-between h-full">
-        <ScreenHeader
-          headerContent="Settings"
-          headerContentAlign="left"
-          onBack={onBack}
-        />
-        <Tooltip message="Get help" className="mb-4 mr-0">
-          <button
-            type="button"
-            onClick={onHelp}
-            className="flex h-8 w-8 justify-center items-center rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
-            title="Get help"
-          >
-            <HelpCircle className="w-4 h-4" />
-          </button>
-        </Tooltip>
-      </div>
+      <ScreenHeader
+        headerContent="Settings"
+        headerContentAlign="left"
+        onBack={onBack}
+        rightSideContent={
+          <Tooltip message="Get help">
+            <button
+              type="button"
+              onClick={onHelp}
+              className="flex h-8 w-8 justify-center items-center rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
+              title="Get help"
+            >
+              <HelpCircle className="w-4 h-4" />
+            </button>
+          </Tooltip>
+        }
+      />
 
       <div className="flex-1">
         <div className="space-y-4">

package/src/widget/components/ChainList.tsx

@@ -6,7 +6,7 @@ import { ChainImage } from "./ChainImage.js"
 import { AllChainsIcon } from "./AllChainsIcon.js"
 import { SearchInputField } from "./SearchInputField.js"
 import { useChainFilter } from "../hooks/useChainFilter.js"
-import { useSupportedChains } from "../../chains.js"
+import { useSupportedChains, getNormalizedChainName } from "../../chains.js"
 
 export interface ChainListItem {
   chainId: number
@@ -105,7 +105,7 @@ export const ChainList: React.FC<ChainListProps> = ({ onBack }) => {
                     ? "trails-list-item-selected"
                     : ""
                 }`}
-                title={`Select ${chain.name}`}
+                title={`Select ${chain.name} (${chain.chainId})`}
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: -20 }}
@@ -122,7 +122,7 @@ export const ChainList: React.FC<ChainListProps> = ({ onBack }) => {
 
                 <div className="flex-1 min-w-0 text-left">
                   <h3 className="text-sm font-medium truncate text-gray-900 dark:text-white">
-                    {chain.name}
+                    {getNormalizedChainName(chain.chainId, chain.name)}
                   </h3>
                 </div>
 

package/src/widget/components/ClassicSwap.tsx

@@ -143,9 +143,9 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     quoteError,
     quoteErrorPrettified,
     isSameTokenWithoutCustomCalldata,
-    feeOptions,
-    selectedFeeToken,
-    setSelectedFeeToken,
+    processedFeeOptions,
+    selectedFeeOption,
+    setSelectedFeeOption,
   } = useSendForm({
     account,
     toAmount: tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmount,
@@ -771,13 +771,22 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
         )}
 
         {/* Fee Options */}
-        <FeeOptions
-          feeOptions={feeOptions || []}
-          selectedFeeToken={selectedFeeToken}
-          setSelectedFeeToken={(token) => setSelectedFeeToken(token as any)}
-          chainId={originToken?.chainId}
-          isRefetching={isLoadingQuote}
-        />
+        {fundMethod !== "qr-code" && fundMethod !== "exchange" && (
+          <FeeOptions
+            processedFeeOptions={processedFeeOptions || []}
+            selectedFeeOption={selectedFeeOption}
+            setSelectedFeeOption={(feeOption) =>
+              setSelectedFeeOption(feeOption)
+            }
+            chainId={originToken?.chainId}
+            isRefetching={isLoadingQuote}
+            originTokenInfo={{
+              originToken: originToken!,
+              originTokenBalance: originToken?.balance ?? "0",
+              originTokenAmount: sellAmount,
+            }}
+          />
+        )}
 
         <button
           type="submit"

package/src/widget/components/ConfigDisplay.tsx

@@ -61,7 +61,7 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
     {
       label: "Trails API Key",
       value: config.trailsApiKey,
-      display: truncateString(config.trailsApiKey),
+      display: truncateString(config.trailsApiKey || "N/A"),
     },
     {
       label: "WalletConnect Project ID",

package/src/widget/components/FeeOption.tsx

@@ -1,24 +1,23 @@
+import { useMemo } from "react"
 import type React from "react"
 import { TokenImage } from "./TokenImage.js"
-
-export type FeeOption = {
-  tokenAddress: string
-  tokenSymbol: string
-  tokenDecimals: number
-  amount: string
-  amountUSD: number
-  amountFormatted: string
-  amountUsdDisplay: string
-  tokenImageUrl?: string
-  notEnoughBalance?: boolean
-  chainId?: number
-}
+import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
+import type { Token } from "../hooks/useOriginSelectedToken.js"
+import { normalizeAddress } from "../../utils.js"
+import { parseUnits } from "viem"
+import { Tooltip } from "./Tooltip.js"
+import { logger } from "../../logger.js"
 
 interface FeeOptionProps {
-  option: FeeOption
+  option: ProcessedFeeOption
   isSelected: boolean
   onClick: () => void
   chainId?: number
+  originTokenInfo?: {
+    originToken: Token
+    originTokenBalance: string
+    originTokenAmount: string
+  }
 }
 
 export const FeeOption: React.FC<FeeOptionProps> = ({
@@ -26,19 +25,53 @@ export const FeeOption: React.FC<FeeOptionProps> = ({
   isSelected,
   onClick,
   chainId,
+  originTokenInfo,
 }) => {
-  return (
+  const isDisabled = useMemo(() => {
+    try {
+      const originTokenAddress = originTokenInfo?.originToken?.contractAddress
+      const optionAddress = option.tokenAddress
+      const isOriginFeeOption =
+        originTokenAddress &&
+        optionAddress &&
+        normalizeAddress(originTokenAddress) === normalizeAddress(optionAddress)
+
+      let isInsufficientOriginBalance = false
+
+      if (isOriginFeeOption && originTokenInfo) {
+        const balanceInWei = BigInt(originTokenInfo.originTokenBalance ?? "0")
+        const originTokenAmountInWei = parseUnits(
+          originTokenInfo.originTokenAmount ?? "0",
+          originTokenInfo.originToken?.contractInfo?.decimals ?? 18,
+        )
+        const feeAmountInWei = BigInt(option.amount ?? "0")
+
+        isInsufficientOriginBalance =
+          originTokenAmountInWei + feeAmountInWei > balanceInWei
+      }
+
+      return option.notEnoughBalance || isInsufficientOriginBalance
+    } catch (error) {
+      logger.console.error(
+        "[trails-sdk] [FEE-OPTION] error checking if fee option is disabled",
+        error,
+      )
+      return true
+    }
+  }, [originTokenInfo, option])
+
+  const button = (
     <button
       type="button"
       className={`w-full flex items-center justify-between p-1.5 trails-border-radius-input border transition-colors ${
-        option.notEnoughBalance
+        isDisabled
           ? "cursor-not-allowed opacity-50 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600"
           : isSelected
             ? "cursor-pointer trails-bg-primary/10 border-blue-500 bg-blue-50 dark:bg-blue-900/20"
             : "cursor-pointer trails-bg-card trails-border-primary hover:trails-hover-bg"
       }`}
-      onClick={option.notEnoughBalance ? undefined : onClick}
-      disabled={option.notEnoughBalance}
+      onClick={isDisabled ? undefined : onClick}
+      disabled={isDisabled}
     >
       <div className="flex items-center space-x-2">
         <TokenImage
@@ -50,7 +83,7 @@ export const FeeOption: React.FC<FeeOptionProps> = ({
         <div className="ml-2 text-left">
           <div
             className={`text-xs font-medium ${
-              option.notEnoughBalance
+              isDisabled
                 ? "text-gray-400 dark:text-gray-500"
                 : "trails-text-primary"
             }`}
@@ -63,7 +96,7 @@ export const FeeOption: React.FC<FeeOptionProps> = ({
       <div className="text-right">
         <div
           className={`text-xs font-medium ${
-            option.notEnoughBalance
+            isDisabled
               ? "text-gray-400 dark:text-gray-500"
               : "trails-text-primary"
           }`}
@@ -73,6 +106,16 @@ export const FeeOption: React.FC<FeeOptionProps> = ({
       </div>
     </button>
   )
+
+  if (isDisabled) {
+    return (
+      <Tooltip message="Not enough balance to use this fee option">
+        {button}
+      </Tooltip>
+    )
+  }
+
+  return button
 }
 
 export default FeeOption

package/src/widget/components/FeeOptions.tsx

@@ -1,100 +1,60 @@
 import { ChevronDown } from "lucide-react"
 import type React from "react"
-import { useRef, useState, useEffect } from "react"
-import { formatUsdAmountDisplay, formatRawAmount } from "../../tokenBalances.js"
-import {
-  FeeOption,
-  type FeeOption as EnhancedFeeOptionType,
-} from "./FeeOption.js"
-import { logger } from "../../logger.js"
-import { getTokenImageUrl } from "../../tokens.js"
+import { useRef, useState } from "react"
 import { TokenImage } from "./TokenImage.js"
-import { ethAddress, zeroAddress } from "viem"
-import type { FeeOption as APIFeeOption } from "../../widget/hooks/useSelectedFeeToken.js"
-import type { SelectedFeeToken } from "../../prepareSend.js"
-
-const ZERO_ADDRESS = zeroAddress.toLowerCase()
-const ETH_ADDRESS = ethAddress.toLowerCase()
-
-const normalizeAddress = (address?: string | null): string =>
-  (address ?? "").toLowerCase()
-
-const isNativeTokenAddress = (address?: string | null): boolean => {
-  const normalized = normalizeAddress(address)
-  return normalized === ZERO_ADDRESS || normalized === ETH_ADDRESS
-}
-
-const safeFormatAmountWithSymbol = (option: APIFeeOption): string => {
-  const tokenDecimals =
-    typeof option.tokenDecimals === "number" &&
-    option.tokenDecimals > 0 &&
-    option.tokenDecimals <= 18
-      ? option.tokenDecimals
-      : isNativeTokenAddress(option.tokenAddress)
-        ? 18
-        : undefined
-
-  if (tokenDecimals === undefined) {
-    logger.console.warn("[trails-sdk] [FEE-OPTIONS] Missing token decimals", {
-      tokenAddress: option.tokenAddress,
-      tokenSymbol: option.tokenSymbol,
-    })
-    return option.tokenSymbol ? `-- ${option.tokenSymbol}` : "--"
-  }
-
-  try {
-    const formattedAmount = formatRawAmount(option.amount, tokenDecimals)
-    return option.tokenSymbol
-      ? `${formattedAmount} ${option.tokenSymbol}`
-      : formattedAmount
-  } catch (error) {
-    logger.console.warn(
-      "[trails-sdk] [FEE-OPTIONS] Failed to format fee option amount",
-      {
-        option,
-        tokenDecimals,
-        error,
-      },
-    )
-    return option.tokenSymbol ? `-- ${option.tokenSymbol}` : "--"
-  }
-}
-
-const safeFormatUsdDisplay = (option: APIFeeOption): string => {
-  const usdValue =
-    (option as { amountUsd?: number }).amountUsd ?? option.amountUSD ?? 0
-  return formatUsdAmountDisplay(usdValue)
-}
+import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
+import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
+import { logger } from "../../logger.js"
+import type { FeeOption } from "@0xsequence/trails-api"
+import { FeeOption as FeeOptionComponent } from "./FeeOption.js"
+import { isNativeToken, normalizeAddress } from "../../utils.js"
+import type { Token } from "../hooks/useOriginSelectedToken.js"
 
 interface FeeOptionsProps {
-  feeOptions: APIFeeOption[]
-  selectedFeeToken: APIFeeOption | SelectedFeeToken | null
-  setSelectedFeeToken: (token: APIFeeOption | null) => void
+  processedFeeOptions: ProcessedFeeOption[]
+  selectedFeeOption: FeeOption | null
+  setSelectedFeeOption: (token: FeeOption | null) => void
   chainId?: number
   isRefetching?: boolean // When true, the fee quote is stale and being refreshed, so hide the component
+  originTokenInfo?: {
+    originToken: Token
+    originTokenBalance: string
+    originTokenAmount: string
+  }
 }
 
 export const FeeOptions: React.FC<FeeOptionsProps> = ({
-  feeOptions,
-  selectedFeeToken,
-  setSelectedFeeToken,
+  processedFeeOptions,
+  selectedFeeOption,
+  setSelectedFeeOption,
   chainId,
   isRefetching,
+  originTokenInfo,
 }) => {
-  // Early returns BEFORE any hooks - this prevents "Rendered more hooks" error
+  // All hooks must be called before any early returns
+  const { selectedFundMethod } = useSelectedFundMethod()
+  const [isOpen, setIsOpen] = useState(false)
+  const accordionRef = useRef<HTMLDivElement>(null)
+
+  // Early returns AFTER all hooks - this is safe because hooks are always called first
+  // Hide component when fundMethod is qr-code or exchange
+  if (selectedFundMethod === "qr-code" || selectedFundMethod === "exchange") {
+    return null
+  }
+
   // Hide component when fee quote is stale and being refreshed
   if (isRefetching) {
     return null
   }
 
   // Don't render if no fee options available
-  if (!feeOptions || feeOptions.length === 0) {
+  if (!processedFeeOptions || processedFeeOptions.length === 0) {
     return null
   }
 
   // Check if there are non-native options before calling hooks
-  const hasNonNativeOptions = feeOptions.some(
-    (opt) => !isNativeTokenAddress(opt.tokenAddress),
+  const hasNonNativeOptions = processedFeeOptions.some(
+    (opt) => !isNativeToken(opt.tokenAddress),
   )
 
   // Don't render if only native token is available
@@ -102,57 +62,27 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
     return null
   }
 
-  // NOW we can safely call hooks after all early returns
-  const [isOpen, setIsOpen] = useState(false)
-  const accordionRef = useRef<HTMLDivElement>(null)
-
-  // Clear selected fee token when feeOptions change (stale quote)
-  // This resets the user's fee selection when they pick a different token
-  // Use comprehensive key that includes token addresses and amounts
-  const feeOptionsKey = feeOptions
-    .map((opt) => `${opt.tokenAddress}-${opt.tokenSymbol}-${opt.amount}`)
-    .join("|")
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: setSelectedFeeToken is stable
-  useEffect(() => {
-    setSelectedFeeToken(null)
-  }, [feeOptionsKey])
-
-  // Enhance ALL fee options with formatted values and image URLs (including native gas)
-  const enhancedFeeOptions: EnhancedFeeOptionType[] = feeOptions.map(
-    (option) => ({
-      ...option,
-      amountFormatted: safeFormatAmountWithSymbol(option),
-      amountUsdDisplay: safeFormatUsdDisplay(option),
-      tokenImageUrl: getTokenImageUrl({
-        chainId: option.chainId || chainId,
-        contractAddress: option.tokenAddress,
-        symbol: option.tokenSymbol,
-      }),
-    }),
-  )
-
   // Find native gas option (zero address) for header display
-  const nativeGasOption = enhancedFeeOptions.find((opt) =>
-    isNativeTokenAddress(opt.tokenAddress),
+  const nativeGasOption = processedFeeOptions.find((opt) =>
+    isNativeToken(opt.tokenAddress),
   )
 
   // Find the currently selected option from enhancedFeeOptions for header display
-  const getSelectedOption = (): EnhancedFeeOptionType | undefined => {
+  const getSelectedOption = (): ProcessedFeeOption | undefined => {
     if (
-      selectedFeeToken === null ||
-      isNativeTokenAddress(selectedFeeToken?.tokenAddress)
+      selectedFeeOption === null ||
+      isNativeToken(selectedFeeOption?.tokenAddress)
     ) {
       return nativeGasOption
     }
 
-    if (!selectedFeeToken) {
+    if (!selectedFeeOption) {
       return undefined
     }
 
-    const selectedAddress = normalizeAddress(selectedFeeToken.tokenAddress)
+    const selectedAddress = normalizeAddress(selectedFeeOption.tokenAddress)
 
-    return enhancedFeeOptions.find(
+    return processedFeeOptions.find(
       (opt) => normalizeAddress(opt.tokenAddress) === selectedAddress,
     )
   }
@@ -162,16 +92,16 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
   // Use nativeGasOption as fallback when selectedOption is null/undefined
   const displayOption = selectedOption || nativeGasOption
 
-  const handleFeeTokenSelect = (option: EnhancedFeeOptionType) => {
+  const handleFeeOptionSelect = (option: FeeOption) => {
     // For native gas (zero/ETH address), set to null to trigger non-gasless flow
-    if (isNativeTokenAddress(option.tokenAddress)) {
-      setSelectedFeeToken(null)
+    if (isNativeToken(option.tokenAddress)) {
+      setSelectedFeeOption(null)
       logger.console.log(
         "[trails-sdk] [FEE-SELECT] Selected native gas fee option",
       )
     } else {
       // Use the option directly - it already has all required fields
-      setSelectedFeeToken(option as APIFeeOption)
+      setSelectedFeeOption(option)
       logger.console.log(
         "[trails-sdk] [FEE-SELECT] Selected ERC20 fee option:",
         option,
@@ -236,19 +166,20 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
         {isOpen && (
           <div className="mt-2 space-y-1">
             {/* All Fee Options (including native gas) */}
-            {enhancedFeeOptions.map((option, index) => (
-              <FeeOption
+            {processedFeeOptions.map((option, index) => (
+              <FeeOptionComponent
                 key={`${option.tokenAddress}-${index}`}
                 option={option}
                 isSelected={
-                  isNativeTokenAddress(option.tokenAddress)
-                    ? selectedFeeToken === null ||
-                      isNativeTokenAddress(selectedFeeToken?.tokenAddress)
-                    : normalizeAddress(selectedFeeToken?.tokenAddress) ===
+                  isNativeToken(option.tokenAddress)
+                    ? selectedFeeOption === null ||
+                      isNativeToken(selectedFeeOption?.tokenAddress)
+                    : normalizeAddress(selectedFeeOption?.tokenAddress) ===
                       normalizeAddress(option.tokenAddress)
                 }
-                onClick={() => handleFeeTokenSelect(option)}
+                onClick={() => handleFeeOptionSelect(option)}
                 chainId={option.chainId || chainId}
+                originTokenInfo={originTokenInfo}
               />
             ))}
           </div>

package/src/widget/components/NativeGasOption.tsx

@@ -1,7 +1,7 @@
 import type React from "react"
 import { getChainInfo } from "../../chains.js"
 import { TokenImage } from "./TokenImage.js"
-import { getTokenImageUrl } from "../../tokens.js"
+import { useGetTokenImageUrl } from "../../tokens.js"
 import { zeroAddress } from "viem"
 
 interface NativeGasOptionProps {
@@ -21,6 +21,8 @@ export const NativeGasOption: React.FC<NativeGasOptionProps> = ({
   chainId,
   notEnoughBalance = false,
 }) => {
+  const { getTokenImageUrl } = useGetTokenImageUrl()
+
   // Helper function to get native symbol for a chain
   const getNativeSymbol = (chainId?: number) => {
     if (!chainId) return "ETH"

package/src/widget/components/Pay.tsx

@@ -194,9 +194,9 @@ export const Pay: React.FC<PayProps> = ({
     isValidCustomToken,
     isSenderContractOnOrigin,
     isSenderContractOnDestination,
-    feeOptions,
-    selectedFeeToken,
-    setSelectedFeeToken,
+    processedFeeOptions,
+    selectedFeeOption,
+    setSelectedFeeOption,
   } = useSendForm({
     account,
     toAmount: tokenAmountForBackend || toAmount, // Use the input amount as target amount for EXACT_OUTPUT
@@ -672,7 +672,7 @@ export const Pay: React.FC<PayProps> = ({
           {/* Payment Request Header */}
           <div className="space-y-1 trails-bg-secondary trails-border-radius-container p-3">
             <div className="flex justify-start">
-              <div className="flex items-center font-medium trails-text-primary text-sm whitespace-nowrap overflow-hidden min-w-full">
+              <div className="flex items-center font-medium trails-text-primary text-sm flex-wrap whitespace-break-spaces break-all min-w-full">
                 {payMessage}
               </div>
             </div>
@@ -1019,13 +1019,20 @@ export const Pay: React.FC<PayProps> = ({
       ) : null}
 
       {/* Fee Options */}
-      <FeeOptions
-        feeOptions={feeOptions || []}
-        selectedFeeToken={selectedFeeToken}
-        setSelectedFeeToken={(token) => setSelectedFeeToken(token as any)}
-        chainId={originToken?.chainId}
-        isRefetching={isLoadingQuote}
-      />
+      {fundMethod !== "qr-code" && fundMethod !== "exchange" && (
+        <FeeOptions
+          processedFeeOptions={processedFeeOptions}
+          selectedFeeOption={selectedFeeOption}
+          setSelectedFeeOption={(feeOption) => setSelectedFeeOption(feeOption)}
+          chainId={originToken?.chainId}
+          isRefetching={isLoadingQuote}
+          originTokenInfo={{
+            originToken: originToken!,
+            originTokenBalance: originToken?.balance ?? "0",
+            originTokenAmount: tokenAmountForBackend ?? "0",
+          }}
+        />
+      )}
 
       {/* Quote Details */}
       {prepareSendQuote && (

package/src/widget/components/PoolDeposit.tsx

@@ -39,6 +39,7 @@ import { FeeOptions } from "./FeeOptions.js"
 import { generateAaveDepositCalldata } from "../../aave.js"
 import { generateMorphoDepositCalldata } from "../../morpho.js"
 import { TRAILS_ROUTER_PLACEHOLDER_AMOUNT } from "../../trailsRouter.js"
+import { ScreenHeader } from "./ScreenHeader.js"
 
 interface PoolDepositProps {
   account?: Account
@@ -180,9 +181,9 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     isSubmitting,
     buttonText,
     isValidRecipient,
-    feeOptions,
-    selectedFeeToken,
-    setSelectedFeeToken,
+    processedFeeOptions,
+    selectedFeeOption,
+    setSelectedFeeOption,
   } = useSendForm({
     account,
     toAmount: undefined,
@@ -320,6 +321,11 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
   if (showOriginTokenSelector) {
     return (
       <div className="space-y-2">
+        <ScreenHeader
+          onBack={() => setShowOriginTokenSelector(false)}
+          headerContent="Select Token"
+          headerContentAlign="left"
+        />
         <TokenSelector
           onTokenSelect={handleOriginTokenSelect}
           onError={onError}
@@ -583,13 +589,20 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
       ) : null}
 
       {/* Fee Options */}
-      <FeeOptions
-        feeOptions={feeOptions || []}
-        selectedFeeToken={selectedFeeToken as any}
-        setSelectedFeeToken={(token) => setSelectedFeeToken(token as any)}
-        chainId={originToken?.chainId}
-        isRefetching={isLoadingQuote}
-      />
+      {fundMethod !== "qr-code" && fundMethod !== "exchange" && (
+        <FeeOptions
+          processedFeeOptions={processedFeeOptions}
+          selectedFeeOption={selectedFeeOption as any}
+          setSelectedFeeOption={(feeOption) => setSelectedFeeOption(feeOption)}
+          chainId={originToken?.chainId}
+          isRefetching={isLoadingQuote}
+          originTokenInfo={{
+            originToken: originToken!,
+            originTokenBalance: originToken?.balance ?? "0",
+            originTokenAmount: amount ?? "0",
+          }}
+        />
+      )}
 
       {/* Quote Details */}
       {prepareSendQuote && (