0xtrails 0.2.0 → 0.2.1

package/src/widget/components/ConnectWallet.tsx

@@ -1,6 +1,11 @@
 import React, { useEffect, useState } from "react"
 import { ChevronRight, LogOut } from "lucide-react"
-import { useAccount, useConnections, useSwitchAccount } from "wagmi"
+import {
+  useAccount,
+  useConnections,
+  useSwitchAccount,
+  useConnectors,
+} from "wagmi"
 import { AlignJustify, Wallet } from "lucide-react"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
@@ -35,6 +40,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   const { switchAccount } = useSwitchAccount()
   const { setCurrentScreen } = useCurrentScreen()
   const { wallets: allWallets } = useWallets()
+  const connectors = useConnectors()
   const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
@@ -96,6 +102,87 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
 
   const connectedWallets = getConnectedWallets()
 
+  // Get available browser wallets using EIP-6963 and injected providers
+  const getAvailableBrowserWallets = (): Array<{
+    connector: any
+    walletId: string
+    walletConfig: any
+    name: string
+    icon?: string
+  }> => {
+    const filteredConnectors = connectors
+      .filter((connector) => {
+        // EIP-6963 compliant wallets will have type "injected" and be ready when installed
+        // Filter for connectors that are:
+        // 1. Injected type (browser extensions, including EIP-6963)
+        // 2. Not WalletConnect (which is a protocol, not a browser wallet)
+        // 3. Not Privy wallet (should not appear in detected wallets)
+        // 4. Not already connected
+        const isInjected = connector.type === "injected"
+        const isNotWalletConnect = connector.id !== "walletConnect"
+        const isNotPrivy =
+          connector.id !== "privy" &&
+          !connector.name?.toLowerCase().includes("privy") &&
+          !connector.id?.toLowerCase().includes("privy")
+        const isNotAlreadyConnected = !connections.some(
+          (conn) => conn.connector.id === connector.id,
+        )
+
+        // Log for debugging EIP-6963 detection
+        if (isInjected && isNotWalletConnect) {
+          logger.console.log(
+            "[trails-sdk] Detected browser wallet via EIP-6963:",
+            {
+              id: connector.id,
+              name: connector.name,
+              type: connector.type,
+              uid: connector.uid,
+              hasIcon: !!connector.icon,
+            },
+          )
+        }
+
+        // Log all connectors for debugging
+        logger.console.log("[trails-sdk] All connector:", {
+          id: connector.id,
+          name: connector.name,
+          type: connector.type,
+        })
+
+        return (
+          isInjected &&
+          isNotWalletConnect &&
+          isNotPrivy &&
+          isNotAlreadyConnected
+        )
+      })
+      .map((connector) => {
+        const walletId = wagmiConnectorToWalletId(connector)
+        const walletConfig = allWallets.find((wallet) => wallet.id === walletId)
+
+        return {
+          connector,
+          walletId,
+          walletConfig,
+          name: connector.name,
+          // EIP-6963 providers may have additional metadata including icon
+          icon: connector.icon || walletConfig?.icon,
+        }
+      })
+
+    // Deduplicate by walletId, keeping the first occurrence
+    const seenWalletIds = new Set<string>()
+    return filteredConnectors.filter((wallet) => {
+      if (seenWalletIds.has(wallet.walletId)) {
+        return false
+      }
+      seenWalletIds.add(wallet.walletId)
+      return true
+    })
+  }
+
+  const allAvailableBrowserWallets = getAvailableBrowserWallets()
+
   // Handle switching to a different connected wallet
   const handleWalletSwitch = async (
     walletAddress: string,
@@ -160,6 +247,14 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
     return filteredWallets
   }, [lastClickedWallet, allWallets])
 
+  // Filter out browser wallets that are already in the main wallet options to avoid showing same wallet twice
+  const availableBrowserWallets = React.useMemo(() => {
+    const mainWalletIds = new Set(orderedWalletOptions.map((w) => w.id))
+    return allAvailableBrowserWallets.filter(
+      (wallet) => !mainWalletIds.has(wallet.walletId),
+    )
+  }, [allAvailableBrowserWallets, orderedWalletOptions])
+
   return (
     <div className="space-y-6">
       <ScreenHeader
@@ -171,14 +266,6 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
       {isConnected ? (
         <div className="space-y-4">
           <div className="flex flex-col gap-3">
-            {error && (
-              <div className="border rounded-lg p-4 bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800">
-                <p className="text-sm break-words text-red-600 dark:text-red-200">
-                  {error}
-                </p>
-              </div>
-            )}
-
             {/* Connected Wallets List */}
             {connectedWallets.map((wallet) => (
               <div key={wallet.address} className="space-y-2">
@@ -242,6 +329,39 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
               </div>
             ))}
 
+            {/* Available Browser Wallets Section */}
+            {availableBrowserWallets.length > 0 && (
+              <div className="pt-2 space-y-2">
+                {availableBrowserWallets.map((wallet) => (
+                  <button
+                    key={wallet.connector.uid || wallet.connector.id}
+                    type="button"
+                    onClick={() => handleWalletConnect(wallet.walletId)}
+                    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">
+                      {typeof wallet.icon === "string" ? (
+                        <img
+                          src={wallet.icon}
+                          alt={wallet.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>{wallet.walletConfig?.name || wallet.name}</span>
+                        <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">
+                          Detected
+                        </span>
+                      </div>
+                    </div>
+                    <ChevronRight className="h-5 w-5 text-gray-400" />
+                  </button>
+                ))}
+              </div>
+            )}
+
             {/* Connect Another Wallet Button */}
             <button
               type="button"
@@ -273,6 +393,36 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
         </div>
       ) : (
         <div className="flex flex-col gap-3">
+          {/* Available Browser Wallets Section - Not Connected */}
+          {availableBrowserWallets.length > 0 &&
+            availableBrowserWallets.map((wallet) => (
+              <button
+                key={wallet.connector.uid || wallet.connector.id}
+                type="button"
+                onClick={() => handleWalletConnect(wallet.walletId)}
+                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">
+                  {typeof wallet.icon === "string" ? (
+                    <img
+                      src={wallet.icon}
+                      alt={wallet.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>{wallet.walletConfig?.name || wallet.name}</span>
+                    <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">
+                      Detected
+                    </span>
+                  </div>
+                </div>
+                <ChevronRight className="h-5 w-5 text-gray-400" />
+              </button>
+            ))}
+
           {orderedWalletOptions.length > 0 ? (
             <>
               {orderedWalletOptions.map((wallet) => (
@@ -301,11 +451,18 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                           )}
                           <div className="flex items-center space-x-2">
                             <span>{walletConfig?.name || wallet.name}</span>
-                            {lastClickedWallet === wallet.id && (
+                            {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>
-                            )}
+                            ) : allAvailableBrowserWallets.some(
+                                (detectedWallet) =>
+                                  detectedWallet.walletId === 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">
+                                Detected
+                              </span>
+                            ) : null}
                           </div>
                         </>
                       )

package/src/widget/components/ConnectedWallets.tsx

@@ -1,10 +1,17 @@
 import { useState } from "react"
 import type React from "react"
-import { Wallet, Copy } from "lucide-react"
-import { useAccount, useConnections, useSwitchAccount } from "wagmi"
+import { Wallet, Copy, X } from "lucide-react"
+import {
+  useAccount,
+  useConnections,
+  useSwitchAccount,
+  useDisconnect,
+} from "wagmi"
 import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
 import { logger } from "../../logger.js"
 import { truncateAddress } from "../../utils.js"
+import { useAccountTotalBalanceUsd } from "../../tokenBalances.js"
+import { Identicon } from "./Identicon.js"
 
 export interface ConnectedWalletsProps {
   onWalletSwitch?: (address: string) => void
@@ -12,6 +19,153 @@ export interface ConnectedWalletsProps {
   className?: string
 }
 
+interface WalletItemProps {
+  wallet: {
+    address: string
+    connector: any
+    walletConfig: any
+    walletId: string
+    isActive: boolean
+  }
+  onWalletSwitch: (address: string, connector: any) => void
+  onDisconnect: (connector: any, e: React.MouseEvent) => void
+  onCopyAddress: (address: string, e: React.MouseEvent) => void
+  copiedAddress: string | null
+}
+
+const WalletItem: React.FC<WalletItemProps> = ({
+  wallet,
+  onWalletSwitch,
+  onDisconnect,
+  onCopyAddress,
+  copiedAddress,
+}) => {
+  const { totalBalanceUsdFormatted, isLoadingTotalBalanceUsd } =
+    useAccountTotalBalanceUsd(wallet.address)
+
+  return (
+    <div className="space-y-1">
+      {/* Wallet Button */}
+      <div
+        onClick={() => {
+          if (!wallet.isActive) {
+            onWalletSwitch(wallet.address, wallet.connector)
+          }
+        }}
+        onKeyDown={(e) => {
+          if ((e.key === "Enter" || e.key === " ") && !wallet.isActive) {
+            e.preventDefault()
+            onWalletSwitch(wallet.address, wallet.connector)
+          }
+        }}
+        tabIndex={wallet.isActive ? -1 : 0}
+        className={`group w-full flex items-center justify-between font-medium py-2 px-3 rounded-lg transition-all duration-200 ${
+          wallet.isActive
+            ? "bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300 cursor-default"
+            : "bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
+        }`}
+      >
+        <div className="flex items-center space-x-3">
+          {/* Identicon */}
+          <Identicon value={wallet.address} size={32} />
+          <div className="flex flex-col items-start space-y-1">
+            <div className="flex items-center space-x-2">
+              {/* Wallet Icon */}
+              {typeof wallet.walletConfig?.icon === "string" ? (
+                <img
+                  src={wallet.walletConfig.icon}
+                  alt={wallet.walletConfig.name}
+                  className="h-4 w-4"
+                />
+              ) : (
+                <Wallet className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              )}
+              <span className="text-sm">
+                {wallet.walletConfig?.name ||
+                  wallet.connector?.name ||
+                  "Wallet"}
+              </span>
+              {!isLoadingTotalBalanceUsd && totalBalanceUsdFormatted && (
+                <span className="text-xs text-gray-400 dark:text-gray-500">
+                  {totalBalanceUsdFormatted}
+                </span>
+              )}
+            </div>
+            <div className="flex items-center space-x-1">
+              <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+                {truncateAddress(wallet.address)}
+              </span>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  onCopyAddress(wallet.address, e)
+                }}
+                onMouseDown={(e) => e.stopPropagation()}
+                onMouseUp={(e) => e.stopPropagation()}
+                className={`p-0.5 rounded transition-all duration-200 cursor-pointer z-10 relative ${
+                  copiedAddress === wallet.address
+                    ? "bg-green-100 dark:bg-green-900/30"
+                    : "hover:bg-gray-200 dark:hover:bg-gray-600"
+                }`}
+                title={
+                  copiedAddress === wallet.address
+                    ? "Copied!"
+                    : "Copy full address"
+                }
+              >
+                {copiedAddress === wallet.address ? (
+                  <svg
+                    className="w-3 h-3 text-green-600 dark:text-green-400"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    aria-label="Copied"
+                  >
+                    <title>Copied</title>
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M5 13l4 4L19 7"
+                    />
+                  </svg>
+                ) : (
+                  <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {wallet.isActive ? (
+            <span className="text-xs px-2 py-1 rounded font-medium bg-blue-500 text-white">
+              Active
+            </span>
+          ) : (
+            <span className="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
+            </span>
+          )}
+          <button
+            type="button"
+            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"
+            title="Disconnect wallet"
+            aria-label="Disconnect wallet"
+          >
+            <X className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
   onWalletSwitch,
   showActiveWallet = true,
@@ -20,6 +174,7 @@ export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
   const { address, connector } = useAccount()
   const connections = useConnections()
   const { switchAccount } = useSwitchAccount()
+  const { disconnect } = useDisconnect()
   const { wallets: allWallets } = useWallets()
   const [error, setError] = useState<string | null>(null)
   const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
@@ -87,6 +242,25 @@ export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
     }
   }
 
+  // Handle disconnecting a specific wallet
+  const handleDisconnect = async (
+    walletConnector: any,
+    e: React.MouseEvent,
+  ) => {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      setError(null)
+      await disconnect({ connector: walletConnector })
+      logger.console.log("[trails-sdk] Disconnected wallet")
+    } catch (error) {
+      logger.console.error("[trails-sdk] Failed to disconnect wallet:", error)
+      setError(
+        error instanceof Error ? error.message : "Failed to disconnect wallet",
+      )
+    }
+  }
+
   // Handle copy to clipboard with success indication
   const handleCopyAddress = async (address: string, e: React.MouseEvent) => {
     e.preventDefault()
@@ -151,106 +325,14 @@ export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
         }
 
         return (
-          <div key={wallet.address} className="space-y-1">
-            {/* Wallet Button */}
-            <div
-              onClick={() => {
-                if (!wallet.isActive) {
-                  handleWalletSwitch(wallet.address, wallet.connector)
-                }
-              }}
-              onKeyDown={(e) => {
-                if ((e.key === "Enter" || e.key === " ") && !wallet.isActive) {
-                  e.preventDefault()
-                  handleWalletSwitch(wallet.address, wallet.connector)
-                }
-              }}
-              tabIndex={wallet.isActive ? -1 : 0}
-              className={`group w-full flex items-center justify-between font-medium py-2 px-3 rounded-lg transition-all duration-200 ${
-                wallet.isActive
-                  ? "bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300 cursor-default"
-                  : "bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
-              }`}
-            >
-              <div className="flex items-center space-x-3">
-                {typeof wallet.walletConfig?.icon === "string" ? (
-                  <img
-                    src={wallet.walletConfig.icon}
-                    alt={wallet.walletConfig.name}
-                    className="h-5 w-5"
-                  />
-                ) : (
-                  <Wallet className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-                )}
-                <div className="flex flex-col items-start space-y-1">
-                  <div className="flex items-center space-x-2">
-                    <span className="text-sm">
-                      {wallet.walletConfig?.name ||
-                        wallet.connector?.name ||
-                        "Wallet"}
-                    </span>
-                  </div>
-                  <div className="flex items-center space-x-1">
-                    <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
-                      {truncateAddress(wallet.address)}
-                    </span>
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                        handleCopyAddress(wallet.address, e)
-                      }}
-                      onMouseDown={(e) => e.stopPropagation()}
-                      onMouseUp={(e) => e.stopPropagation()}
-                      className={`p-0.5 rounded transition-all duration-200 cursor-pointer z-10 relative ${
-                        copiedAddress === wallet.address
-                          ? "bg-green-100 dark:bg-green-900/30"
-                          : "hover:bg-gray-200 dark:hover:bg-gray-600"
-                      }`}
-                      title={
-                        copiedAddress === wallet.address
-                          ? "Copied!"
-                          : "Copy full address"
-                      }
-                    >
-                      {copiedAddress === wallet.address ? (
-                        <svg
-                          className="w-3 h-3 text-green-600 dark:text-green-400"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                          aria-label="Copied"
-                        >
-                          <title>Copied</title>
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M5 13l4 4L19 7"
-                          />
-                        </svg>
-                      ) : (
-                        <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
-                      )}
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              <div className="flex items-center">
-                {wallet.isActive ? (
-                  <span className="text-xs px-2 py-1 rounded font-medium bg-blue-500 text-white">
-                    Active
-                  </span>
-                ) : (
-                  <span className="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
-                  </span>
-                )}
-              </div>
-            </div>
-          </div>
+          <WalletItem
+            key={wallet.address}
+            wallet={wallet}
+            onWalletSwitch={handleWalletSwitch}
+            onDisconnect={handleDisconnect}
+            onCopyAddress={handleCopyAddress}
+            copiedAddress={copiedAddress}
+          />
         )
       })}
     </div>

package/src/widget/components/DebugToast.tsx

@@ -38,21 +38,21 @@ export const DebugToast: React.FC = () => {
           <button
             type="button"
             onClick={handleShowInfo}
-            className="px-2 py-1 text-xs font-medium rounded bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/50 transition-colors"
+            className="px-2 py-1 text-xs font-medium rounded bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/50 transition-colors cursor-pointer"
           >
             info
           </button>
           <button
             type="button"
             onClick={handleShowSuccess}
-            className="px-2 py-1 text-xs font-medium rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50 transition-colors"
+            className="px-2 py-1 text-xs font-medium rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50 transition-colors cursor-pointer"
           >
             success
           </button>
           <button
             type="button"
             onClick={handleShowError}
-            className="px-2 py-1 text-xs font-medium rounded bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50 transition-colors"
+            className="px-2 py-1 text-xs font-medium rounded bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50 transition-colors cursor-pointer"
           >
             error
           </button>

package/src/widget/components/Earn.tsx

@@ -27,8 +27,6 @@ import { ChainList } from "./ChainList.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { formatTvl } from "../../prices.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
-import { formatUsdAmountDisplay } from "../../tokenBalances.js"
-import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
 import aaveLogo from "../assets/aave.svg"
 import morphoLogo from "../assets/morpho.svg"
 import type { PrepareSendQuote } from "../../prepareSend.js"
@@ -340,7 +338,10 @@ export const Earn: React.FC<EarnProps> = ({
           <div className="flex items-center space-x-2">
             {/* Amount Input */}
             <div className="flex-1">
-              <div className="flex items-center justify-start">
+              <div
+                className="flex items-center justify-start cursor-text"
+                onClick={() => inputRef.current?.focus()}
+              >
                 <div className="flex items-center">
                   <input
                     ref={inputRef}
@@ -623,30 +624,6 @@ export const Earn: React.FC<EarnProps> = ({
             </p>
           </div>
         </div>
-      ) : prepareSendQuote?.minimumNotMet ? (
-        <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">
-              Please enter an amount above{" "}
-              {formatUsdAmountDisplay(MINIMUM_USD_AMOUNT_FOR_SWAP)} otherwise
-              transfer may fail
-            </p>
-          </div>
-        </div>
       ) : null}
 
       <form onSubmit={handleSubmit}>