0xtrails 0.6.6 → 0.7.0

package/src/widget/components/ChainList.tsx

@@ -6,13 +6,11 @@ import { ChainImage } from "./ChainImage.js"
 import { AllChainsIcon } from "./AllChainsIcon.js"
 import { SearchInputField } from "./SearchInputField.js"
 import { useChainFilter } from "../hooks/useChainFilter.js"
-import { useSupportedChains, getNormalizedChainName } from "../../chains.js"
-
-export interface ChainListItem {
-  chainId: number
-  name: string
-  imageUrl?: string
-}
+import {
+  useSupportedChains,
+  getNormalizedChainName,
+  type ChainListItem,
+} from "../../chains.js"
 
 interface ChainListProps {
   onBack: () => void
@@ -24,7 +22,7 @@ export const ChainList: React.FC<ChainListProps> = ({ onBack }) => {
   const { supportedChains } = useSupportedChains()
 
   // Convert chains to ChainListItem format
-  const chainList = useMemo(() => {
+  const chainList: ChainListItem[] = useMemo(() => {
     return supportedChains.map((chain) => ({
       chainId: chain.id,
       name: chain.name,

package/src/widget/components/ClassicSwap.tsx

@@ -2,10 +2,9 @@ import { Loader2, ArrowDown } from "lucide-react"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import type { Account, WalletClient } from "viem"
-import { zeroAddress } from "viem"
 import type { TransactionState } from "../../transactions.js"
-import type { OnCompleteProps, Token } from "../hooks/useSendForm.js"
-import type { SupportedToken } from "../../tokens.js"
+import type { OnCompleteProps } from "../hooks/useSendForm.js"
+import type { Token } from "../../tokens.js"
 import { useSendForm } from "../hooks/useSendForm.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
 import { QuoteDetails } from "./QuoteDetails.js"
@@ -13,7 +12,6 @@ import { type PrepareSendQuote, TradeType } from "../../prepareSend.js"
 import { getChainInfo } from "../../chains.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { TokenSelector } from "./TokenSelector.js"
-import { ErrorDisplay } from "./ErrorDisplay.js"
 import { useMode } from "../hooks/useMode.js"
 import { logger } from "../../logger.js"
 import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
@@ -33,6 +31,7 @@ import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
 import { FeeOptions } from "./FeeOptions.js"
 import { isFeeOptionDisabled } from "./FeeOption.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
+import { formatRawAmount } from "../../tokenBalances.js"
 
 interface ClassicSwapProps {
   selectedToken: Token | null
@@ -54,7 +53,7 @@ interface ClassicSwapProps {
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
-  onNavigateToMeshConnect?: (
+  onNavigateToOnramp?: (
     props: {
       toTokenSymbol: string
       toTokenAmount: string
@@ -62,11 +61,12 @@ interface ClassicSwapProps {
       toRecipientAddress: string
     },
     quote?: PrepareSendQuote | null,
+    continueSend?: () => Promise<void>,
   ) => void
   onAmountUpdate?: (amount: string) => void
   checkoutOnHandlers?: CheckoutOnHandlers
-  recentTokens?: SupportedToken[]
-  onRecentTokenSelect?: (token: SupportedToken) => void
+  recentTokens?: Token[]
+  onRecentTokenSelect?: (token: Token) => void
   onTrackToken?: (token: any) => void
   title?: string
   isSequenceWallet?: boolean
@@ -92,7 +92,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
-  onNavigateToMeshConnect,
+  onNavigateToOnramp,
   onAmountUpdate,
   checkoutOnHandlers,
   recentTokens,
@@ -180,8 +180,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     destinationTokenAddress,
     isValidCustomToken,
     prepareSendQuote,
-    quoteError,
-    quoteErrorPrettified,
     processedFeeOptions,
     selectedFeeOption,
     setSelectedFeeOption,
@@ -206,10 +204,23 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     quoteProvider,
     fundMethod,
     mode,
-    onNavigateToMeshConnect,
+    onNavigateToOnramp,
     checkoutOnHandlers,
   })
 
+  const destinationBalanceDisplay = useMemo(() => {
+    if (!destinationToken) return "0.00"
+    try {
+      return formatRawAmount(
+        destinationToken.balance || "0",
+        destinationToken.decimals ?? 18,
+      )
+    } catch (err) {
+      logger.console.error("[trails-sdk] balance format failed", err)
+      return "0.00"
+    }
+  }, [destinationToken])
+
   // Update amount based on last input type
   useEffect(() => {
     if (lastInputType === "sell") {
@@ -345,7 +356,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   }, [destinationToken, setSelectedDestToken])
 
   // Handle flip functionality
-  const handleFlip = () => {
+  const handleFlip = useCallback(() => {
     if (!selectedDestinationChain || !originToken || !selectedDestToken) return
 
     setIsFlipped(!isFlipped)
@@ -354,6 +365,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     const tempOriginToken = originToken
     const tempOriginChainId = originChainId
     const tempBuyAmount = buyAmount || toAmountDisplay || ""
+    const tempSellAmount = sellAmount || amount || ""
 
     // Swap origin and destination using hooks
     setOriginToken(selectedDestToken as any)
@@ -367,38 +379,41 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       setSelectedDestinationChain(newChain)
     }
 
-    // When flipping, always set the current visible amount as the new sell amount
     if (tradeType === TradeType.EXACT_INPUT) {
-      // If we were in EXACT_INPUT, use the buy amount (from quote) as the new sell amount
-      if (sellAmount !== "") {
-        setSellAmount(tempBuyAmount)
-        setBuyAmount("")
-      }
-      setTradeType(TradeType.EXACT_INPUT)
-      setLastInputType("sell")
+      // Move the user-entered sell amount into the buy field and treat it as exact output
+      setBuyAmount(tempSellAmount)
+      setSellAmount("")
+      setTradeType(TradeType.EXACT_OUTPUT)
+      setLastInputType("buy")
     } else {
       // If we were in EXACT_OUTPUT, use the current buy amount as the new sell amount
-      if (buyAmount !== "") {
-        setBuyAmount(tempBuyAmount)
-        setSellAmount("")
-      }
+      setSellAmount(tempBuyAmount)
+      setBuyAmount("")
       setTradeType(TradeType.EXACT_INPUT)
       setLastInputType("sell")
     }
-  }
+  }, [
+    originToken,
+    selectedDestinationChain,
+    selectedDestToken,
+    originChainId,
+    setOriginToken,
+    setDestinationToken,
+    setSelectedDestToken,
+    setSelectedDestinationChain,
+    isFlipped,
+    tradeType,
+    sellAmount,
+    buyAmount,
+    toAmountDisplay,
+    amount,
+  ])
 
   // Handle source token selection from full-screen selector
   const handleSourceTokenSelectorSelect = useCallback(
-    (token: any) => {
-      const formattedToken = {
-        ...token,
-        decimals: token.contractInfo?.decimals || token.decimals,
-        contractInfo: {
-          decimals: token.contractInfo?.decimals || token.decimals,
-          contractAddress: token.contractAddress,
-          symbol: token.symbol,
-          name: token.name,
-        },
+    (token: Token) => {
+      if (token.contractAddress === destinationToken?.contractAddress) {
+        handleFlip()
       }
 
       // Only reset input fields if the token symbol is different
@@ -411,31 +426,33 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
         setLastInputType("sell")
       }
 
-      setOriginToken(formattedToken as any)
+      setOriginToken(token)
       setOriginChainId(token.chainId)
       setShowSourceTokenSelector(false)
 
       onTrackToken?.(token)
       logger.console.log("[trails-sdk] selected origin token", token)
     },
-    [setOriginToken, onTrackToken, originToken],
+    [
+      setOriginToken,
+      onTrackToken,
+      originToken?.symbol,
+      originToken,
+      handleFlip,
+      destinationToken?.contractAddress,
+      destinationToken,
+    ],
   )
 
   // Handle destination token selection from full-screen selector
   const handleDestinationTokenSelectorSelect = useCallback(
-    (token: any) => {
-      const formattedToken = {
-        ...token,
-        decimals: token.contractInfo?.decimals || token.decimals,
-        contractInfo: {
-          decimals: token.contractInfo?.decimals || token.decimals,
-          contractAddress: token.contractAddress,
-          symbol: token.symbol,
-          name: token.name,
-        },
+    (token: Token) => {
+      if (token.contractAddress === originToken?.contractAddress) {
+        handleFlip()
       }
-      setDestinationToken(formattedToken as any)
-      setSelectedDestToken(formattedToken as any)
+
+      setDestinationToken(token)
+      setSelectedDestToken(token)
 
       // Update destination chain
       const chainInfo = getChainInfo(token.chainId)
@@ -452,12 +469,18 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       setSelectedDestToken,
       setSelectedDestinationChain,
       onTrackToken,
+      originToken?.contractAddress,
+      handleFlip,
     ],
   )
 
   // Handle recent token selection
   const handleRecentTokenSelect = useCallback(
     (token: any) => {
+      if (token.contractAddress === originToken?.contractAddress) {
+        handleFlip()
+      }
+
       if (showSourceTokenSelector) {
         handleSourceTokenSelectorSelect(token)
       } else if (showDestinationTokenSelector) {
@@ -469,6 +492,8 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       showDestinationTokenSelector,
       handleSourceTokenSelectorSelect,
       handleDestinationTokenSelectorSelect,
+      originToken?.contractAddress,
+      handleFlip,
     ],
   )
 
@@ -661,7 +686,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   {/* Percentage Buttons */}
                   <PercentageMaxButtons
                     userBalance={balanceFormatted}
-                    isNativeToken={originToken.contractAddress === zeroAddress}
+                    isNativeToken={originToken.isNativeToken ?? false}
                     gasCostFormatted={prepareSendQuote?.gasCostFormatted}
                     chainId={originChainId || undefined}
                     onAmountSelect={(amount) => {
@@ -752,7 +777,13 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
           </div>
 
           {/* Bottom Info Row */}
-          <div className="mt-4 flex justify-between items-center">
+          <div
+            className={
+              !prepareSendQuote?.destinationAmountUsdDisplay && !isLoadingQuote
+                ? "flex justify-end mt-4"
+                : "mt-4 flex items-center justify-between"
+            }
+          >
             {/* Destination Amount USD from Quote */}
             {(prepareSendQuote?.destinationAmountUsdDisplay ||
               (isLoadingQuote && tradeType === TradeType.EXACT_INPUT)) && (
@@ -763,16 +794,18 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   : prepareSendQuote?.destinationAmountUsdDisplay}
               </div>
             )}
+
+            {/* Dest Token Balance */}
+            {destinationToken && (
+              <div className="flex justify-end">
+                <div className="text-xs text-gray-500 dark:text-gray-400">
+                  Balance:{" "}
+                  {isBalanceVisible ? destinationBalanceDisplay : "0.00"}
+                </div>
+              </div>
+            )}
           </div>
         </div>
-
-        {/* Warning Messages - Show only one at a time */}
-        <ErrorDisplay
-          errorPrettified={quoteErrorPrettified}
-          error={quoteError}
-          severity="warning"
-        />
-
         {/* Exchange/Contract Warning */}
         <RefundWarning
           fundMethod={fundMethod}
@@ -781,34 +814,9 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
           isSequenceWallet={isSequenceWallet}
         />
 
-        {prepareSendQuote?.noSufficientBalance ? (
-          <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
-            <div className="flex items-center space-x-2">
-              <svg
-                className="w-4 h-4 text-amber-500 flex-shrink-0"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-                />
-              </svg>
-              <p className="text-sm text-amber-600 dark:text-amber-400">
-                Insufficient balance to complete this transaction. Required{" "}
-                {prepareSendQuote?.originAmountDisplay} {originToken?.symbol}
-              </p>
-            </div>
-          </div>
-        ) : null}
-
         {/* Quote Details */}
         {prepareSendQuote && (
-          <div className="mb-4">
+          <div>
             <QuoteDetails
               quote={prepareSendQuote}
               showContent={true}

package/src/widget/components/ConnectWallet.tsx

@@ -13,7 +13,6 @@ import { logger } from "../../logger.js"
 import { truncateAddress } from "../../utils.js"
 import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
 import { useBack } from "../hooks/useBack.js"
-
 export interface WalletOption {
   id: string
   name: string
@@ -174,7 +173,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
       )
 
       if (connection) {
-        await switchAccount({
+        switchAccount({
           connector: connection.connector,
         })
         logger.console.log(`[trails-sdk] Switched to wallet: ${walletAddress}`)

package/src/widget/components/ConnectedWallets.tsx

@@ -15,6 +15,7 @@ import { Identicon } from "./Identicon.js"
 import { useBack } from "../hooks/useBack.js"
 import type { Screen } from "../hooks/useCurrentScreen.js"
 import { useWalletConnectionContext } from "../hooks/useWalletConnectionContext.js"
+import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
 
 export interface ConnectedWalletsProps {
   onWalletSwitch?: (address: string) => void
@@ -163,7 +164,7 @@ const WalletItem: React.FC<WalletItemProps> = ({
             </span>
           ) : !onWalletSelect && !hideActiveState ? (
             <span className="whitespace-nowrap text-xs px-2 py-1 rounded font-medium bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-              Set as active
+              Activate
             </span>
           ) : null}
           {!isLoadingTotalBalanceUsd && totalBalanceUsdFormatted && (
@@ -176,7 +177,7 @@ const WalletItem: React.FC<WalletItemProps> = ({
               onClick={(e) => onDisconnect(wallet.connector, e)}
               onMouseDown={(e) => e.stopPropagation()}
               onMouseUp={(e) => e.stopPropagation()}
-              className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 opacity-0 group-hover:opacity-100 transition-all duration-200 cursor-pointer"
+              className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer"
               title="Disconnect wallet"
             >
               <X className="w-4 h-4 text-gray-500 dark:text-gray-400" />
@@ -207,6 +208,7 @@ export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
   const { setConnectionContext } = useWalletConnectionContext()
   const [error, setError] = useState<string | null>(null)
   const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
+  const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
 
   // Get all connected wallets with their details
   const getConnectedWallets = () => {
@@ -253,7 +255,7 @@ export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
       )
 
       if (connection) {
-        await switchAccount({
+        switchAccount({
           connector: connection.connector,
         })
         logger.console.log(`[trails-sdk] Switched to wallet: ${walletAddress}`)
@@ -280,7 +282,18 @@ export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
     e.stopPropagation()
     try {
       setError(null)
-      await disconnect({ connector: walletConnector })
+      disconnect({ connector: walletConnector })
+      const disconnectedAddress = (await walletConnector.getAccounts())[0]
+      if (selectedRecipient === disconnectedAddress) {
+        const connectedWallets = getConnectedWallets()
+        if (connectedWallets.length > 0) {
+          setSelectedRecipient(
+            connectedWallets.filter(
+              (wallet) => wallet.address !== disconnectedAddress,
+            )[0].address,
+          )
+        }
+      }
       logger.console.log("[trails-sdk] Disconnected wallet")
     } catch (error) {
       logger.console.error("[trails-sdk] Failed to disconnect wallet:", error)

package/src/widget/components/DebugMenu.tsx

@@ -7,7 +7,7 @@ import { DebugScreensList } from "./DebugScreensList.js"
 import { DebugToast } from "./DebugToast.js"
 
 interface DebugMenuProps {
-  onScreenSelect: (screen: string) => void
+  onScreenSelect?: (screen: string) => void
 }
 
 export const DebugMenu: React.FC<DebugMenuProps> = ({ onScreenSelect }) => {
@@ -18,7 +18,7 @@ export const DebugMenu: React.FC<DebugMenuProps> = ({ onScreenSelect }) => {
 
   // Wrap onScreenSelect to close dropdown when screen is selected
   const handleScreenSelect = (screen: string) => {
-    onScreenSelect(screen)
+    onScreenSelect?.(screen)
     setIsOpen(false)
   }
 

package/src/widget/components/DebugScreensList.tsx

@@ -20,7 +20,6 @@ const SCREENS = [
   "Earn",
   "Earn Pools",
   "Swap",
-  "Receive",
   "Wallet Confirmation",
   "Wallet Confirmation Retry",
   "Pending 1-item-0-confirmed",

package/src/widget/components/DepositTracker.tsx

@@ -3,12 +3,8 @@ import { useMemo, useEffect } from "react"
 import { CheckCircle, Clock } from "lucide-react"
 import { formatUnits, zeroAddress } from "viem"
 import { TokenImage } from "./TokenImage.js"
-import {
-  formatAmountDisplay,
-  useTokenBalances,
-  isNativeToken,
-  type TokenBalanceWithPrice,
-} from "../../tokenBalances.js"
+import { formatAmountDisplay, useTokenBalances } from "../../tokenBalances.js"
+import type { Token } from "../../tokens.js"
 import { useQueryClient } from "@tanstack/react-query"
 
 export interface DepositTrackerProps {
@@ -51,11 +47,9 @@ export const DepositTracker: React.FC<DepositTrackerProps> = ({
     const normalizedTokenAddress = tokenAddress.toLowerCase()
     const isNativeDeposit = normalizedTokenAddress === zeroAddress.toLowerCase()
 
-    return sortedTokens.find((token) => {
-      const tokenIsNative = isNativeToken(token)
-      const tokenChainId = tokenIsNative
-        ? token.chainId
-        : token.contractInfo?.chainId
+    return sortedTokens.find((token: Token) => {
+      const tokenIsNative = token.isNativeToken ?? false
+      const tokenChainId = token.chainId
 
       if (tokenChainId !== chainId) return false
 
@@ -74,17 +68,14 @@ export const DepositTracker: React.FC<DepositTrackerProps> = ({
   const allDeposits = useMemo(() => {
     if (!sortedTokens || sortedTokens.length === 0) return []
 
-    return sortedTokens.filter((token) => {
-      const tokenIsNative = isNativeToken(token)
-      const tokenChainId = tokenIsNative
-        ? token.chainId
-        : token.contractInfo?.chainId
+    return sortedTokens.filter((token: Token) => {
+      const tokenChainId = token.chainId
 
       // Only show tokens from the same chain with balance > 0
       if (tokenChainId !== chainId) return false
 
       try {
-        return BigInt(token.balance) > 0n
+        return BigInt(token.balance || "0") > 0n
       } catch {
         return false
       }
@@ -103,12 +94,12 @@ export const DepositTracker: React.FC<DepositTrackerProps> = ({
 
     const normalizedTokenAddress = tokenAddress.toLowerCase()
     const isNativeDeposit = normalizedTokenAddress === zeroAddress.toLowerCase()
-    const depositIsNative = isNativeToken(singleDeposit)
+    const depositIsNative = singleDeposit.isNativeToken ?? false
 
     // Get contract address for ERC20 tokens
     const depositTokenAddress = depositIsNative
       ? undefined
-      : (singleDeposit as TokenBalanceWithPrice).contractAddress?.toLowerCase()
+      : singleDeposit.contractAddress?.toLowerCase()
 
     // If both are native, don't show (it's the correct token)
     if (isNativeDeposit && depositIsNative) return false
@@ -238,18 +229,13 @@ export const DepositTracker: React.FC<DepositTrackerProps> = ({
             Detected Deposits:
           </p>
           <div className="trails-border-radius-container border trails-border-primary">
-            {allDeposits.map((token, index) => {
-              const tokenIsNative = isNativeToken(token)
-              const symbol = tokenIsNative
-                ? token.symbol || "ETH"
-                : token.contractInfo?.symbol
-              const decimals = tokenIsNative
-                ? token.decimals || 18
-                : token.contractInfo?.decimals || 18
-              const balance = formatUnits(BigInt(token.balance), decimals)
-              const tokenChainId = tokenIsNative
-                ? token.chainId
-                : token.contractInfo?.chainId
+            {allDeposits.map((token: Token, index) => {
+              const tokenIsNative = token.isNativeToken ?? false
+              const tokenChainId = token.chainId ?? chainId
+              const balance = formatUnits(
+                BigInt(token.balance || "0"),
+                token.decimals,
+              )
 
               const tokenKey = tokenIsNative
                 ? `native-${tokenChainId}`
@@ -260,8 +246,8 @@ export const DepositTracker: React.FC<DepositTrackerProps> = ({
                   <div className="px-2 py-1.5 flex items-center gap-2">
                     <TokenImage
                       imageUrl={token.imageUrl}
-                      symbol={symbol}
-                      chainId={tokenChainId || chainId}
+                      symbol={token.symbol}
+                      chainId={tokenChainId}
                       contractAddress={
                         tokenIsNative ? undefined : token.contractAddress
                       }
@@ -273,7 +259,7 @@ export const DepositTracker: React.FC<DepositTrackerProps> = ({
                           maxFractionDigits: 6,
                           minFractionDigits: 2,
                         })}{" "}
-                        {symbol}
+                        {token.symbol}
                       </span>
                       {token.balanceUsdFormatted && (
                         <span className="text-xs text-gray-500 dark:text-gray-400">

package/src/widget/components/Earn.tsx

@@ -9,7 +9,7 @@ import { ScreenHeader } from "./ScreenHeader.js"
 import { PoolDeposit } from "./PoolDeposit.js"
 import { PoolWithdraw } from "./PoolWithdraw.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
-import type { SupportedToken } from "../../tokens.js"
+import type { Token } from "../../tokens.js"
 
 interface EarnProps {
   onBack?: () => void
@@ -26,7 +26,7 @@ interface EarnProps {
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
-  onNavigateToMeshConnect?: (
+  onNavigateToOnramp?: (
     props: {
       toTokenSymbol: string
       toTokenAmount: string
@@ -34,10 +34,11 @@ interface EarnProps {
       toRecipientAddress: string
     },
     quote?: PrepareSendQuote | null,
+    continueSend?: () => Promise<void>,
   ) => void
   checkoutOnHandlers?: CheckoutOnHandlers
-  recentTokens?: SupportedToken[]
-  onRecentTokenSelect?: (token: SupportedToken) => void
+  recentTokens?: Token[]
+  onRecentTokenSelect?: (token: Token) => void
   onTrackToken?: (token: any) => void
 }
 
@@ -55,7 +56,7 @@ export const Earn: React.FC<EarnProps> = ({
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
-  onNavigateToMeshConnect,
+  onNavigateToOnramp,
   checkoutOnHandlers,
   recentTokens,
   onRecentTokenSelect,
@@ -118,7 +119,7 @@ export const Earn: React.FC<EarnProps> = ({
           setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
           quoteProvider={quoteProvider}
           fundMethod={fundMethod}
-          onNavigateToMeshConnect={onNavigateToMeshConnect}
+          onNavigateToOnramp={onNavigateToOnramp}
           checkoutOnHandlers={checkoutOnHandlers}
           recentTokens={recentTokens}
           onRecentTokenSelect={onRecentTokenSelect}

package/src/widget/components/FeeOption.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react"
 import type React from "react"
 import { TokenImage } from "./TokenImage.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
-import type { Token } from "../hooks/useOriginSelectedToken.js"
+import type { Token } from "../../tokens.js"
 import { normalizeAddress } from "../../utils.js"
 import { parseUnits } from "viem"
 import { Tooltip } from "./Tooltip.js"
@@ -45,7 +45,7 @@ export const isFeeOptionDisabled = (
       const balanceInWei = BigInt(originTokenInfo.originTokenBalance ?? "0")
       const originTokenAmountInWei = parseUnits(
         originTokenInfo.originTokenAmount ?? "0",
-        originTokenInfo.originToken?.contractInfo?.decimals ?? 18,
+        originTokenInfo.originToken?.decimals ?? 18,
       )
       const feeAmountInWei = BigInt(option.amount ?? "0")
 
@@ -78,7 +78,7 @@ export const FeeOption: React.FC<FeeOptionProps> = ({
   const button = (
     <button
       type="button"
-      className={`w-full flex items-center justify-between p-1.5 trails-border-radius-input transition-colors ${
+      className={`w-full flex items-center justify-between p-2 trails-border-radius-list-button transition-colors ${
         isDisabled
           ? "border cursor-not-allowed opacity-50 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600"
           : !isClickable
@@ -95,7 +95,7 @@ export const FeeOption: React.FC<FeeOptionProps> = ({
           imageUrl={option.tokenImageUrl}
           symbol={option.tokenSymbol}
           chainId={option.chainId || chainId}
-          size={16}
+          size={24}
         />
         <div className="ml-2 text-left">
           <div