0xtrails 0.1.2 → 0.1.4

package/src/widget/components/ConnectWallet.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from "react"
 import { ChevronRight, Copy, LogOut } from "lucide-react"
 import { useAccount, useDisconnect } from "wagmi"
-import MetaMaskFox from "../assets/MetaMask-icon-fox.svg"
-import WalletConnectLogoWhite from "../assets/WalletConnect-logo-white.svg"
 import { AlignJustify, Wallet } from "lucide-react"
 import { ScreenHeader } from "./ScreenHeader.js"
+import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
 
 export interface WalletOption {
   id: string
@@ -18,6 +17,7 @@ export interface ConnectWalletProps {
   onContinue: () => void
   onError: (error: Error) => void
   walletOptions: WalletOption[]
+  lastClickedWallet?: string | null
 }
 
 export const ConnectWallet: React.FC<ConnectWalletProps> = ({
@@ -25,25 +25,12 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   onDisconnect,
   onContinue,
   onError,
-  walletOptions,
+  lastClickedWallet,
 }) => {
   const { isConnected, address, connector } = useAccount()
   const { disconnect } = useDisconnect()
+  const { wallets: allWallets } = useWallets()
   const [error, setError] = useState<string | null>(null)
-  const [lastClickedWallet, setLastClickedWallet] = useState<string | null>(
-    () => {
-      // Initialize from localStorage if available
-      if (typeof window !== "undefined") {
-        try {
-          return localStorage.getItem("trails-last-wallet") || null
-        } catch (error) {
-          console.error("[trails-sdk] Failed to read from localStorage:", error)
-          return null
-        }
-      }
-      return null
-    },
-  )
   const [showCopied, setShowCopied] = useState(false)
 
   useEffect(() => {
@@ -55,15 +42,6 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   }, [error, onError])
 
   const handleWalletConnect = (walletId: string) => {
-    setLastClickedWallet(walletId)
-    // Save to localStorage
-    if (typeof window !== "undefined") {
-      try {
-        localStorage.setItem("trails-last-wallet", walletId)
-      } catch (error) {
-        console.error("[trails-sdk] Failed to save to localStorage:", error)
-      }
-    }
     onConnect(walletId)
   }
 
@@ -92,24 +70,48 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
     }
   }
 
-  // Get the wallet type for styling the continue button
-  const getWalletType = () => {
-    if (!connector?.name) return "injected"
-    const name = connector.name.toLowerCase()
-    if (name.includes("metamask")) return "injected"
-    if (name.includes("walletconnect")) return "walletconnect"
-    return "injected"
+  // Get the wallet config for the current connector
+  const getCurrentWalletConfig = () => {
+    if (!connector?.id) return null
+    const walletId = wagmiConnectorToWalletId(connector)
+    return allWallets.find((wallet) => wallet.id === walletId) || null
   }
 
-  // Reorder wallet options to put the recent one first
+  // Create wallet options from allWallets and always prepend recent wallet
   const orderedWalletOptions = React.useMemo(() => {
-    if (!lastClickedWallet) return walletOptions
+    // Convert allWallets to wallet options format
+    const walletOptionsFromAllWallets = allWallets.map((wallet) => ({
+      id: wallet.id,
+      name: wallet.name,
+      connector: () => wallet.connector?.connect?.(),
+    }))
 
-    const recentWallet = walletOptions.find((w) => w.id === lastClickedWallet)
-    const otherWallets = walletOptions.filter((w) => w.id !== lastClickedWallet)
+    const alwaysShowWallets = ["metamask", "walletconnect"]
+    const filteredWallets = walletOptionsFromAllWallets
+      .filter((wallet) => alwaysShowWallets.includes(wallet.id))
+      .sort((a, b) => {
+        const aIndex = alwaysShowWallets.indexOf(a.id)
+        const bIndex = alwaysShowWallets.indexOf(b.id)
+        return aIndex - bIndex
+      })
+
+    // Always prepend recent wallet if it exists, regardless of allowed list
+    if (lastClickedWallet) {
+      console.log("lastClickedWallet", lastClickedWallet)
+      const recentWallet = walletOptionsFromAllWallets.find(
+        (w) => w.id === lastClickedWallet,
+      )
+      const otherWallets = filteredWallets.filter(
+        (w) => w.id !== lastClickedWallet,
+      )
+
+      if (recentWallet) {
+        return [recentWallet, ...otherWallets]
+      }
+    }
 
-    return recentWallet ? [recentWallet, ...otherWallets] : walletOptions
-  }, [walletOptions, lastClickedWallet])
+    return filteredWallets
+  }, [lastClickedWallet, allWallets])
 
   return (
     <div className="space-y-6">
@@ -136,48 +138,30 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
               className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
             >
               <div className="flex items-center space-x-3">
-                {getWalletType() === "injected" &&
-                window.ethereum?.isMetaMask ? (
-                  <>
-                    <img
-                      src={MetaMaskFox}
-                      alt="MetaMask Fox"
-                      className="h-6 w-6"
-                    />
-                    <div className="flex items-center space-x-2">
-                      <span>MetaMask</span>
-                      <span className="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 trails-border-radius-container font-normal">
-                        Connected
-                      </span>
-                    </div>
-                  </>
-                ) : getWalletType() === "walletconnect" ? (
-                  <>
-                    <div className="h-6 w-6 bg-[#3B99FC] rounded flex items-center justify-center">
-                      <img
-                        src={WalletConnectLogoWhite}
-                        alt="WalletConnect"
-                        className="h-4 w-4"
-                      />
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <span>WalletConnect</span>
-                      <span className="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 trails-border-radius-container font-normal">
-                        Connected
-                      </span>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <Wallet className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-                    <div className="flex items-center space-x-2">
-                      <span>{connector?.name || "Wallet"}</span>
-                      <span className="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 trails-border-radius-container font-normal">
-                        Connected
-                      </span>
-                    </div>
-                  </>
-                )}
+                {(() => {
+                  const walletConfig = getCurrentWalletConfig()
+                  return (
+                    <>
+                      {typeof walletConfig?.icon === "string" ? (
+                        <img
+                          src={walletConfig?.icon}
+                          alt={walletConfig?.name}
+                          className="h-6 w-6"
+                        />
+                      ) : (
+                        <Wallet className="h-6 w-6 text-gray-600 dark:text-gray-400" />
+                      )}
+                      <div className="flex items-center space-x-2">
+                        <span>
+                          {walletConfig?.name || connector?.name || "Wallet"}
+                        </span>
+                        <span className="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 trails-border-radius-container font-normal">
+                          Connected
+                        </span>
+                      </div>
+                    </>
+                  )
+                })()}
               </div>
 
               <ChevronRight className="h-5 w-5 text-gray-400" />
@@ -246,64 +230,44 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                 <button
                   type="button"
                   key={wallet.id}
+                  data-wallet-id={wallet.id}
                   onClick={() => handleWalletConnect(wallet.id)}
                   className={`w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary`}
                 >
                   <div className="flex items-center space-x-3">
-                    {wallet.id === "injected" && window.ethereum?.isMetaMask ? (
-                      <>
-                        <img
-                          src={MetaMaskFox}
-                          alt="MetaMask Fox"
-                          className="h-6 w-6"
-                        />
-                        <div className="flex items-center space-x-2">
-                          <span>MetaMask</span>
-                          {lastClickedWallet === wallet.id && (
-                            <span className="text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 trails-border-radius-container font-normal">
-                              Recent
-                            </span>
-                          )}
-                        </div>
-                      </>
-                    ) : wallet.id === "walletconnect" ? (
-                      <>
-                        <div className="h-6 w-6 bg-[#3B99FC] rounded flex items-center justify-center">
-                          <img
-                            src={WalletConnectLogoWhite}
-                            alt="WalletConnect"
-                            className="h-4 w-4"
-                          />
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <span>WalletConnect</span>
-                          {lastClickedWallet === wallet.id && (
-                            <span className="text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 trails-border-radius-container font-normal">
-                              Recent
-                            </span>
-                          )}
-                        </div>
-                      </>
-                    ) : (
-                      <>
-                        <Wallet className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-                        <div className="flex items-center space-x-2">
-                          <span>{wallet.name}</span>
-                          {lastClickedWallet === wallet.id && (
-                            <span className="text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 trails-border-radius-container font-normal">
-                              Recent
-                            </span>
+                    {(() => {
+                      const walletConfig = allWallets.find(
+                        (w) => w.id === wallet.id,
+                      )
+                      return (
+                        <>
+                          {typeof walletConfig?.icon === "string" ? (
+                            <img
+                              src={walletConfig?.icon}
+                              alt={walletConfig?.name}
+                              className="h-6 w-6"
+                            />
+                          ) : (
+                            <Wallet className="h-6 w-6 text-gray-600 dark:text-gray-400" />
                           )}
-                        </div>
-                      </>
-                    )}
+                          <div className="flex items-center space-x-2">
+                            <span>{walletConfig?.name || wallet.name}</span>
+                            {lastClickedWallet === wallet.id && (
+                              <span className="text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 trails-border-radius-container font-normal">
+                                Recent
+                              </span>
+                            )}
+                          </div>
+                        </>
+                      )
+                    })()}
                   </div>
                   <ChevronRight className="h-5 w-5 text-gray-400" />
                 </button>
               ))}
 
               {/* More Wallets Link - only show if more than 1 wallet option */}
-              {orderedWalletOptions.length > 1 && (
+              {orderedWalletOptions.length > 0 && (
                 <button
                   type="button"
                   onClick={() => onConnect("wallet-list")}

package/src/widget/components/DebugScreensDropdown.tsx

@@ -13,10 +13,14 @@ const SCREENS = [
   "Mesh Connect",
   "Wallet Connect",
   "Wallet List",
+  "Wallet Connection Pending",
+  "Wallet Connection Pending Retry",
   "Tokens",
   "Send Form",
   "Fund Form",
   "Earn Pools",
+  "Swap",
+  "Receive",
   "Wallet Confirmation",
   "Wallet Confirmation Retry",
   "Pending 1-item-0-confirmed",
@@ -28,8 +32,10 @@ const SCREENS = [
   "Pending 3-item-1-confirmed",
   "Pending 3-item-2-confirmed",
   "Pending 3-item-3-confirmed",
+  "Pending 3-item-2-confirmed-with-error",
   "Receipt",
   "Receipt Failed",
+  "Receipt Refunded",
 ] as const
 
 export const DebugScreensDropdown: React.FC<DebugScreensDropdownProps> = ({

package/src/widget/components/ErrorDisplay.tsx

@@ -0,0 +1,150 @@
+import type React from "react"
+import { useState, useEffect } from "react"
+import { getPrettifiedErrorMessage } from "../../error.js"
+
+interface ErrorDisplayProps {
+  errorPrettified?: string | null
+  error?: string | null
+  severity?: "warning" | "error" | "info"
+}
+
+export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
+  errorPrettified,
+  error,
+  severity = "error",
+}) => {
+  const [showFullError, setShowFullError] = useState(false)
+  const [computedErrorPrettified, setComputedErrorPrettified] = useState<
+    string | null
+  >(errorPrettified || null)
+
+  // If errorPrettified doesn't exist but error does, try to get a prettified version
+  useEffect(() => {
+    if (!errorPrettified && error) {
+      const prettified = getPrettifiedErrorMessage(error)
+      if (prettified) {
+        setComputedErrorPrettified(prettified)
+      }
+    } else {
+      setComputedErrorPrettified(errorPrettified || null)
+    }
+  }, [errorPrettified, error])
+
+  // Get colors based on severity
+  const getSeverityColors = () => {
+    switch (severity) {
+      case "error":
+        return {
+          bg: "bg-red-500/10",
+          border: "border-red-500/30",
+          icon: "text-red-500",
+          text: "text-red-600 dark:text-red-400",
+          button:
+            "text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300",
+          expandable:
+            "bg-red-500/5 border-red-500/20 text-red-700 dark:text-red-300",
+        }
+      case "info":
+        return {
+          bg: "bg-blue-500/10",
+          border: "border-blue-500/30",
+          icon: "text-blue-500",
+          text: "text-blue-600 dark:text-blue-400",
+          button:
+            "text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300",
+          expandable:
+            "bg-blue-500/5 border-blue-500/20 text-blue-700 dark:text-blue-300",
+        }
+      case "warning":
+        return {
+          bg: "bg-amber-500/10",
+          border: "border-amber-500/30",
+          icon: "text-amber-500",
+          text: "text-amber-600 dark:text-amber-400",
+          button:
+            "text-amber-500 hover:text-amber-600 dark:text-amber-400 dark:hover:text-amber-300",
+          expandable:
+            "bg-amber-500/5 border-amber-500/20 text-amber-700 dark:text-amber-300",
+        }
+      default:
+        return {
+          bg: "bg-amber-500/10",
+          border: "border-amber-500/30",
+          icon: "text-amber-500",
+          text: "text-amber-600 dark:text-amber-400",
+          button:
+            "text-amber-500 hover:text-amber-600 dark:text-amber-400 dark:hover:text-amber-300",
+          expandable:
+            "bg-amber-500/5 border-amber-500/20 text-amber-700 dark:text-amber-300",
+        }
+    }
+  }
+
+  const colors = getSeverityColors()
+
+  // Only show if we have a prettified error (either provided or computed)
+  if (!computedErrorPrettified) {
+    return null
+  }
+
+  return (
+    <div
+      className={`px-2 py-3 rounded-lg ${colors.bg} border border-solid ${colors.border}`}
+    >
+      <div className="flex items-start space-x-2">
+        <svg
+          className={`w-4 h-4 ${colors.icon} flex-shrink-0 mt-0.5`}
+          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>
+        <div className="flex-1 min-w-0">
+          <p className={`text-sm ${colors.text}`}>{computedErrorPrettified}</p>
+          {error && error !== computedErrorPrettified && (
+            <div className="mt-2">
+              <button
+                type="button"
+                onClick={() => setShowFullError(!showFullError)}
+                className={`flex items-center gap-1 text-xs ${colors.button} transition-colors cursor-pointer`}
+                aria-label="Show full error details"
+              >
+                <span>{showFullError ? "Hide" : "Show"} full error</span>
+                <svg
+                  className={`w-3 h-3 transition-transform duration-300 ease-out ${
+                    showFullError ? "rotate-180" : ""
+                  }`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+              {showFullError && (
+                <div
+                  className={`mt-2 p-2 ${colors.expandable} rounded text-xs font-mono max-h-[200px] overflow-y-auto overflow-x-auto`}
+                >
+                  {error}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/widget/components/FundSendForm.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, Loader2 } from "lucide-react"
+import { ChevronDown, Loader2, RefreshCcw } from "lucide-react"
 import type React from "react"
 import { useEffect, useRef, useState, useCallback, useMemo } from "react"
 import type { Account, WalletClient } from "viem"
@@ -11,10 +11,12 @@ import { ChainImage } from "./ChainImage.js"
 import { TokenImage } from "./TokenImage.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { TruncatedAddress } from "./TruncatedAddress.js"
+// import { RefundAddressInput } from "./RefundAddressInput.js"
 import { TradeType } from "../../prepareSend.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { formatAmount, formatUsdAmountDisplay } from "../../tokenBalances.js"
 import { ScreenHeader } from "./ScreenHeader.js"
+import { ErrorDisplay } from "./ErrorDisplay.js"
 
 interface FundSendFormProps {
   selectedToken: Token
@@ -36,8 +38,8 @@ interface FundSendFormProps {
   gasless?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
-  fundMethod?: string | null
-  mode?: "pay" | "fund" | "earn"
+  fundMethod?: string
+  mode?: "pay" | "fund" | "earn" | "swap" | "receive"
   onNavigateToMeshConnect?: (
     props: {
       toTokenSymbol: string
@@ -77,6 +79,9 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
 }) => {
   // Local state for fund-specific functionality
   const [isInputTypeUsd, setIsInputTypeUsd] = useState(false)
+  const [refetchTrigger, setRefetchTrigger] = useState(0)
+  // const [isRefundAddressOpen, setIsRefundAddressOpen] = useState(false)
+  // const [refundAddress, setRefundAddress] = useState<string>(account.address)
 
   const [tokenAmountForBackend, setTokenAmountForBackend] = useState("")
   const [inputDisplayValue, setInputDisplayValue] = useState("")
@@ -119,6 +124,9 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
     setSelectedDestinationChain,
     setSelectedDestToken,
     prepareSendQuote,
+    quoteError,
+    quoteErrorPrettified,
+    isSameTokenWithoutCustomCalldata,
   } = useSendForm({
     account,
     // Don't pass toAmount for fund form - user enters input amount
@@ -126,6 +134,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
     toChainId,
     toToken,
     toCalldata,
+    // refundAddress,
     walletClient,
     onTransactionStateChange,
     onError,
@@ -143,6 +152,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
     mode,
     onNavigateToMeshConnect,
     checkoutOnHandlers,
+    refetchTrigger,
   })
 
   // Get source token price for USD conversions
@@ -340,6 +350,11 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
     }, 0)
   }, [tokenAmountForBackend, isInputTypeUsd, sourceTokenPrice])
 
+  // Handle manual quote refetch
+  const handleRefetchQuote = useCallback(() => {
+    setRefetchTrigger((prev) => prev + 1)
+  }, [])
+
   // Dynamic font size based on input length
   const inputStyles = useMemo(() => {
     const inputLength = displayAmount.length
@@ -479,7 +494,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
 
           {/* Percentage Buttons */}
           <div className="flex space-x-1 justify-center">
-            {[25, 50, 100].map((percentage) => (
+            {[25, 50, 75, 100].map((percentage) => (
               <button
                 key={percentage}
                 type="button"
@@ -497,7 +512,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
           <div className="mb-4">
             <label
               htmlFor="destination-chain"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300"
+              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
             >
               Destination Chain
             </label>
@@ -560,7 +575,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
           <div className="mb-4">
             <label
               htmlFor="token"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300"
+              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
             >
               Receive Token
             </label>
@@ -626,10 +641,37 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
 
         {/* Receive Section */}
         <div className="space-y-1">
-          <div
-            className={`text-lg font-semibold text-left ${"text-gray-900 dark:text-white"}`}
-          >
-            Receive
+          <div className="flex items-center justify-between">
+            <div
+              className={`text-lg font-semibold text-left ${"text-gray-900 dark:text-white"}`}
+            >
+              Receive
+            </div>
+            <button
+              type="button"
+              onClick={handleRefetchQuote}
+              disabled={
+                isLoadingQuote ||
+                !tokenAmountForBackend ||
+                !selectedDestToken ||
+                !selectedDestinationChain ||
+                !isValidRecipient
+              }
+              className={`p-2 rounded-md transition-colors cursor-pointer ${
+                isLoadingQuote ||
+                !tokenAmountForBackend ||
+                !selectedDestToken ||
+                !selectedDestinationChain ||
+                !isValidRecipient
+                  ? "opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-500"
+                  : "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200"
+              }`}
+              title="Refetch quote"
+            >
+              <RefreshCcw
+                className={`h-4 w-4 ${isLoadingQuote ? "animate-spin" : ""}`}
+              />
+            </button>
           </div>
 
           <div className="p-2">
@@ -688,7 +730,29 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
           </div>
         )}
 
+        {/* Refund Address Input */}
+        {/* <RefundAddressInput
+          account={account}
+          isOpen={isRefundAddressOpen}
+          onToggle={() => setIsRefundAddressOpen(!isRefundAddressOpen)}
+          refundAddress={refundAddress}
+          onRefundAddressChange={setRefundAddress}
+          chainId={selectedDestinationChain.id}
+        /> */}
+
         {/* Warning Messages - Show only one at a time */}
+        {isSameTokenWithoutCustomCalldata ? (
+          <ErrorDisplay
+            errorPrettified="Cannot swap to the same token on the same chain without custom calldata. Please select a different destination token."
+            severity="error"
+          />
+        ) : (
+          <ErrorDisplay
+            errorPrettified={quoteErrorPrettified}
+            error={quoteError}
+            severity="warning"
+          />
+        )}
         {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">
@@ -746,7 +810,8 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
             !isValidRecipient ||
             buttonText === "No quote available" ||
             buttonText === "Getting quote..." ||
-            prepareSendQuote?.noSufficientBalance
+            prepareSendQuote?.noSufficientBalance ||
+            isSameTokenWithoutCustomCalldata
           }
           className={`w-full font-semibold py-4 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer relative`}
         >
@@ -755,6 +820,8 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
               <Loader2 className="w-5 h-5 animate-spin mr-2 text-white dark:text-gray-400" />
               <span>{buttonText}</span>
             </div>
+          ) : isSameTokenWithoutCustomCalldata ? (
+            "Select Different Tokens"
           ) : prepareSendQuote?.noSufficientBalance ? (
             "Insufficient Balance"
           ) : !tokenAmountForBackend ||