0xtrails 0.1.2 → 0.1.3

package/src/widget/components/TokenSelector.tsx

@@ -0,0 +1,405 @@
+import { Search, ChevronLeft } from "lucide-react"
+import type React from "react"
+import { useEffect, useRef, useState, useMemo } from "react"
+import { AnimatePresence, motion } from "framer-motion"
+import type { Token, TokenFormatted } from "../hooks/useTokenList.js"
+import { useTokenList } from "../hooks/useTokenList.js"
+import { TokenImage } from "./TokenImage.js"
+import type { Mode } from "../../mode.js"
+import type { SupportedToken } from "../../tokens.js"
+import { RecentTokens } from "./RecentTokens.js"
+import { getChainInfo } from "../../chains.js"
+import { ChainFilterDropdown } from "./ChainFilterDropdown.js"
+
+interface TokenSelectorProps {
+  onTokenSelect: (selectedToken: Token) => void
+  targetAmountUsd?: number | null
+  targetAmountUsdFormatted?: string | null
+  onError: (error: Error | string | null) => void
+  mode?: Mode
+  recentTokens?: SupportedToken[]
+  onRecentTokenSelect?: (token: SupportedToken) => void
+  fundMethod?: string | null
+  onNavigateToFundMethods?: () => void
+  showContinueButton?: boolean
+  selectedToken?: Token | null
+  onContinue?: (selectedToken: Token) => void
+  showInsufficientBalance?: boolean
+  totalBalanceUsd?: number
+  totalBalanceUsdFormatted?: string
+  compactMode?: boolean
+  allSupportedTokens?: boolean
+}
+
+export const TokenSelector: React.FC<TokenSelectorProps> = ({
+  onTokenSelect,
+  targetAmountUsd,
+  onError,
+  recentTokens = [],
+  onRecentTokenSelect,
+  fundMethod,
+  onNavigateToFundMethods,
+  showContinueButton = false,
+  selectedToken,
+  onContinue,
+  showInsufficientBalance = false,
+  compactMode = false,
+  allSupportedTokens = false,
+}) => {
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const [filterByChainId, setFilterByChainId] = useState<number | null>(null)
+
+  useEffect(() => {
+    // Auto-focus the search input when component mounts
+    if (searchInputRef.current) {
+      searchInputRef.current.focus()
+    }
+  }, [])
+
+  const {
+    searchQuery,
+    setSearchQuery,
+    handleTokenSelect,
+    filteredTokens,
+    isLoadingTokens,
+    isTokenSelected,
+    filteredTokensFormatted,
+    balanceError,
+  } = useTokenList({
+    onContinue: onTokenSelect, // Use onTokenSelect for the hook
+    targetAmountUsd,
+    onError,
+    fundMethod,
+    allSupportedTokens,
+  })
+
+  // Apply chain filter to tokens
+  const chainFilteredTokens = useMemo(() => {
+    if (filterByChainId === null) {
+      return filteredTokensFormatted
+    }
+    return filteredTokensFormatted.filter(
+      (token) => token.chainId === filterByChainId,
+    )
+  }, [filteredTokensFormatted, filterByChainId])
+
+  // Get unique chains from all tokens (not filtered by chain)
+  const uniqueChains = useMemo(() => {
+    const chainIds = new Set(
+      filteredTokensFormatted.map((token) => token.chainId),
+    )
+    return Array.from(chainIds)
+      .map((chainId) => {
+        const chainInfo = getChainInfo(chainId)
+        return {
+          chainId,
+          name: chainInfo?.name || `Chain ${chainId}`,
+          imageUrl: "", // We'll use TokenImage component for chain icons
+        }
+      })
+      .sort((a, b) => a.name.localeCompare(b.name))
+  }, [filteredTokensFormatted])
+
+  // Filter recent tokens to only show ones that exist in the current token list and match search
+  const filteredRecentTokens = recentTokens.filter((recentToken) => {
+    // First check if this recent token exists in the current token list
+    const existsInTokenList = chainFilteredTokens.some(
+      (token) =>
+        token.contractAddress.toLowerCase() ===
+          recentToken.contractAddress.toLowerCase() &&
+        token.chainId === recentToken.chainId,
+    )
+
+    if (!existsInTokenList) return false
+
+    // Then apply search filtering
+    if (!searchQuery.trim()) return true
+
+    const query = searchQuery.toLowerCase()
+    return (
+      recentToken.symbol.toLowerCase().includes(query) ||
+      recentToken.name.toLowerCase().includes(query) ||
+      recentToken.contractAddress.toLowerCase().includes(query)
+    )
+  })
+
+  // Handle recent token selection by finding the actual token from the list
+  const handleRecentTokenSelect = (recentToken: SupportedToken) => {
+    // Find the actual token from the filtered tokens list
+    const actualToken = chainFilteredTokens.find(
+      (token) =>
+        token.contractAddress.toLowerCase() ===
+          recentToken.contractAddress.toLowerCase() &&
+        token.chainId === recentToken.chainId,
+    )
+
+    if (actualToken) {
+      // Use the actual token with balance info
+      handleTokenSelect(actualToken)
+    } else if (onRecentTokenSelect) {
+      // Fallback to the original handler if token not found in current list
+      onRecentTokenSelect(recentToken)
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      {/* Search Field */}
+      <div className="relative mb-2">
+        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+          <Search className={`h-5 w-5 ${"text-gray-500 dark:text-gray-500"}`} />
+        </div>
+        <input
+          ref={searchInputRef}
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search tokens"
+          className="block w-full pl-10 pr-12 py-2 border border-solid border-gray-200 dark:border-gray-700 trails-border-radius-input focus:ring-2 focus:ring-blue-500 focus:border-blue-500 trails-input"
+        />
+
+        {/* Chain Filter Dropdown */}
+        <div className="absolute inset-y-0 right-0 flex items-center">
+          <ChainFilterDropdown
+            chains={uniqueChains}
+            selectedChainId={filterByChainId}
+            onChainSelect={setFilterByChainId}
+            compactMode={compactMode}
+            nestedMode={true}
+          />
+        </div>
+      </div>
+
+      {/* Recent Tokens */}
+      <AnimatePresence>
+        {!isLoadingTokens && filteredRecentTokens.length > 0 && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.05, ease: "easeOut" }}
+          >
+            <RecentTokens
+              recentTokens={filteredRecentTokens}
+              onTokenSelect={handleRecentTokenSelect}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {isLoadingTokens && (
+        <div className="text-center py-4">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 mx-auto border-solid border-black dark:border-white"></div>
+          <p className="mt-2 text-gray-500 dark:text-gray-400">
+            Loading your token balances...
+          </p>
+        </div>
+      )}
+
+      {!isLoadingTokens && !balanceError && filteredTokens.length === 0 && (
+        <div className="text-center py-4 rounded-lg trails-bg-secondary">
+          <p className="text-gray-500 dark:text-gray-400">
+            {searchQuery.trim()
+              ? "No tokens found matching your search."
+              : fundMethod === "qr-code" || fundMethod === "exchange"
+                ? ""
+                : "No available tokens found"}
+          </p>
+        </div>
+      )}
+
+      {/* Token List */}
+      {chainFilteredTokens.length > 0 && (
+        <div
+          className={`${compactMode ? "max-h-48" : "max-h-[24vh]"} overflow-y-auto trails-scrollbar space-y-1`}
+        >
+          <AnimatePresence mode="popLayout">
+            {chainFilteredTokens.map((token: TokenFormatted) => {
+              const {
+                symbol,
+                imageUrl,
+                chainId,
+                contractAddress,
+                balanceUsdFormatted,
+                tokenName,
+                priceUsd,
+                balanceFormatted,
+                isSufficientBalance,
+              } = token
+
+              return (
+                <motion.button
+                  key={`${chainId}-${contractAddress}`}
+                  layout
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -20 }}
+                  transition={{
+                    duration: 0.05,
+                    ease: "easeOut",
+                    layout: { duration: 0.08, ease: "easeOut" },
+                  }}
+                  type="button"
+                  onClick={() => handleTokenSelect(token)}
+                  title={
+                    !isSufficientBalance &&
+                    fundMethod !== "qr-code" &&
+                    fundMethod !== "exchange"
+                      ? "Insufficient balance for this token"
+                      : undefined
+                  }
+                  className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-bg-secondary trails-hover-bg trails-border-radius-list-button ${
+                    isTokenSelected(token) ? "trails-bg-card" : ""
+                  } ${!isSufficientBalance && fundMethod !== "qr-code" && fundMethod !== "exchange" ? "opacity-75 cursor-not-allowed" : "cursor-pointer"}`}
+                >
+                  <div className="relative flex-shrink-0 mr-2">
+                    <div
+                      className={`rounded-full flex items-center justify-center bg-gray-100 dark:bg-gray-700 ${
+                        !isSufficientBalance &&
+                        fundMethod !== "qr-code" &&
+                        fundMethod !== "exchange"
+                          ? "opacity-80"
+                          : ""
+                      }`}
+                    >
+                      {contractAddress ? (
+                        <TokenImage
+                          symbol={symbol}
+                          imageUrl={imageUrl}
+                          chainId={chainId}
+                          size={32}
+                        />
+                      ) : (
+                        <span
+                          className={`text-base font-medium text-gray-600 dark:text-gray-300 ${
+                            !isSufficientBalance &&
+                            fundMethod !== "qr-code" &&
+                            fundMethod !== "exchange"
+                              ? "opacity-70"
+                              : ""
+                          }`}
+                        >
+                          {symbol}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex-1 min-w-0 text-left">
+                    <h3
+                      className={`text-sm font-medium truncate text-gray-900 dark:text-white ${
+                        !isSufficientBalance &&
+                        fundMethod !== "qr-code" &&
+                        fundMethod !== "exchange"
+                          ? "opacity-70"
+                          : ""
+                      }`}
+                    >
+                      {tokenName}
+                    </h3>
+                    <p
+                      className={`text-xs text-gray-500 dark:text-gray-400 ${
+                        !isSufficientBalance &&
+                        fundMethod !== "qr-code" &&
+                        fundMethod !== "exchange"
+                          ? "opacity-70"
+                          : ""
+                      }`}
+                    >
+                      {symbol}
+                    </p>
+                  </div>
+
+                  {fundMethod !== "qr-code" && fundMethod !== "exchange" && (
+                    <div className="text-right flex-shrink-0">
+                      {priceUsd > 0 ? (
+                        <>
+                          <p
+                            className={`text-sm font-medium text-gray-900 dark:text-white ${
+                              !isSufficientBalance &&
+                              fundMethod !== "qr-code" &&
+                              fundMethod !== "exchange"
+                                ? "opacity-70"
+                                : ""
+                            }`}
+                          >
+                            {balanceUsdFormatted}
+                          </p>
+                          <p
+                            className={`text-xs text-gray-500 dark:text-gray-400 ${
+                              !isSufficientBalance &&
+                              fundMethod !== "qr-code" &&
+                              fundMethod !== "exchange"
+                                ? "opacity-70"
+                                : ""
+                            }`}
+                          >
+                            {balanceFormatted}
+                          </p>
+                        </>
+                      ) : (
+                        <p
+                          className={`text-sm font-medium text-gray-900 dark:text-white ${
+                            !isSufficientBalance &&
+                            fundMethod !== "qr-code" &&
+                            fundMethod !== "exchange"
+                              ? "opacity-70"
+                              : ""
+                          }`}
+                        >
+                          {balanceFormatted}
+                        </p>
+                      )}
+                    </div>
+                  )}
+                </motion.button>
+              )
+            })}
+          </AnimatePresence>
+        </div>
+      )}
+
+      {showInsufficientBalance &&
+        fundMethod !== "qr-code" &&
+        fundMethod !== "exchange" && (
+          <div
+            className={`text-left py-3 px-4 rounded-lg ${"bg-amber-500/10 border border-solid border-amber-500/30"}`}
+          >
+            <p className={`text-xs font-medium ${"text-amber-400"}`}>
+              Insufficient balance
+            </p>
+            <p className={`text-xs mt-1 ${"text-amber-300"}`}>
+              You do not have enough funds to reach the target amount
+            </p>
+          </div>
+        )}
+
+      {showContinueButton && onContinue && selectedToken && (
+        <div className="space-y-4">
+          <button
+            type="button"
+            onClick={() => onContinue(selectedToken)}
+            disabled={!selectedToken}
+            className={`w-full font-semibold py-3 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`}
+          >
+            Continue
+          </button>
+        </div>
+      )}
+
+      {/* Pay with another method button */}
+      {onNavigateToFundMethods && !isLoadingTokens && (
+        <div className="text-center pt-2 pb-1">
+          <button
+            type="button"
+            onClick={onNavigateToFundMethods}
+            className="inline-flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium trails-text-secondary trails-bg-secondary trails-hover-bg trails-border trails-border-radius-button transition-all duration-200 cursor-pointer"
+          >
+            <ChevronLeft className="h-4 w-4" />
+            <span>Pay with another method</span>
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/widget/components/WalletConnect.tsx

@@ -5,7 +5,7 @@ import { QrCode } from "./QrCode.js"
 import { TruncatedAddress } from "./TruncatedAddress.js"
 import { getWalletConnectProjectId } from "../../config.js"
 import { ScreenHeader } from "./ScreenHeader.js"
-import { getWalletLogo, getWalletName } from "../../wallets.js"
+import { getWalletIcon, getWalletName } from "../../wallets.js"
 
 export interface WalletConnectProps {
   onBack: () => void
@@ -186,7 +186,7 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
 
   const title = useMemo(() => {
     const walletName = getWalletName(selectedWalletId)
-    if (walletName) {
+    if (walletName && walletName !== "WalletConnect") {
       return `Scan code to connect to ${walletName}`
     }
 
@@ -265,10 +265,10 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
                 <div className="flex flex-col items-center">
                   <QrCode
                     url={wcUri}
-                    size={220}
+                    size={300}
                     imageUrl={
-                      getWalletLogo(selectedWalletId) ||
-                      getWalletLogo("walletconnect")
+                      getWalletIcon(selectedWalletId) ||
+                      getWalletIcon("walletconnect")
                     }
                   />
                   <button
@@ -298,7 +298,7 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
                 </div>
               ) : (
                 <div className="flex flex-col items-center">
-                  <div className="w-[220px] h-[220px] bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center trails-border-radius-container">
+                  <div className="w-[300px] h-[300px] bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center trails-border-radius-container">
                     <div className="text-center">
                       <div className="animate-spin rounded-full h-8 w-8 border-solid border-b-2 border-blue-600 mx-auto mb-2"></div>
                       <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -310,7 +310,9 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
               )}
 
               <div className="mt-3 text-xs text-gray-600 dark:text-gray-400">
-                {status === "pending" && <span>Waiting for confirmation…</span>}
+                {status === "pending" && wcUri && (
+                  <span>Waiting for confirmation…</span>
+                )}
               </div>
             </>
           )}

package/src/widget/components/WalletConnectionPending.tsx

@@ -0,0 +1,157 @@
+import { ChevronLeft } from "lucide-react"
+import type React from "react"
+import { useEffect, useState } from "react"
+import { useWallets } from "../../wallets.js"
+
+interface WalletConnectionPendingProps {
+  onBack: () => void
+  onRetry: () => void
+  selectedWalletId: string
+  isConnecting: boolean
+  error: string | null
+  showRetry?: boolean
+}
+
+export const WalletConnectionPending: React.FC<
+  WalletConnectionPendingProps
+> = ({
+  onBack,
+  onRetry,
+  selectedWalletId,
+  isConnecting,
+  error,
+  showRetry = false,
+}) => {
+  const [showContent, setShowContent] = useState(false)
+  const [showTimeoutWarning, setShowTimeoutWarning] = useState(false)
+  const { wallets: allWallets } = useWallets()
+
+  const walletConfig = allWallets.find((w) => w.id === selectedWalletId)
+  const walletName = walletConfig?.name || selectedWalletId
+
+  useEffect(() => {
+    setShowContent(true)
+  }, [])
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => {
+        if (isConnecting && !error) {
+          setShowTimeoutWarning(true)
+        }
+      },
+      2 * 60 * 1000,
+    ) // 2 minutes
+
+    return () => clearTimeout(timer)
+  }, [isConnecting, error])
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center relative">
+        <button
+          type="button"
+          onClick={onBack}
+          className="absolute left-0 top-0 p-2 rounded-full transition-colors cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 hover:trails-hover-bg text-gray-600 dark:text-gray-400"
+        >
+          <ChevronLeft className="h-6 w-6" />
+        </button>
+      </div>
+
+      <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
+        <div className="text-center">
+          <div
+            className={`mx-auto flex items-center justify-center transition-all duration-500 ease-out relative mb-4 ${showContent ? "transform -translate-y-8" : ""}`}
+          >
+            {error ? (
+              <div className={`h-24 w-24`} />
+            ) : (
+              <div className="animate-spin rounded-full h-24 w-24 border-solid border-b-2 border-blue-500 dark:border-blue-400" />
+            )}
+
+            <div className="absolute">
+              {walletConfig?.icon && typeof walletConfig.icon === "string" ? (
+                <img
+                  src={walletConfig.icon}
+                  alt={walletName}
+                  className="h-16 w-16"
+                />
+              ) : (
+                <div className="h-16 w-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                  <span className="text-2xl font-bold text-gray-600 dark:text-gray-400">
+                    {walletName.charAt(0).toUpperCase()}
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div
+            className={`mb-2 transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+          >
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+              {error ? "Connection failed" : `Waiting for ${walletName}…`}
+            </h2>
+            <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+              {error
+                ? "There was an issue connecting to your wallet. Please try again."
+                : "Please approve the connection request in your wallet"}
+            </p>
+          </div>
+        </div>
+
+        {/* Timeout Warning */}
+        {showTimeoutWarning && !error && (
+          <div
+            className={`transition-all duration-500 ease-out delay-150 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+          >
+            <div className="p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50">
+              <div className="flex items-start space-x-3">
+                <svg
+                  className="w-5 h-5 mt-0.5 flex-shrink-0 text-yellow-600 dark:text-yellow-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <title>Warning</title>
+                  <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>
+                  <p className="font-medium text-yellow-800 dark:text-yellow-300">
+                    Connection is taking longer than expected
+                  </p>
+                  <p className="mt-1 text-xs text-yellow-700 dark:text-yellow-400">
+                    This connection request is taking longer than expected.
+                    Please reach out to support for help if the issue persists.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Retry Button */}
+        {(error || showRetry) && (
+          <div
+            className={`mb-2 transition-all duration-500 ease-out delay-300 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+          >
+            <button
+              type="button"
+              onClick={onRetry}
+              className="w-full px-4 py-2 trails-border-radius-button font-medium transition-colors cursor-pointer bg-blue-500 hover:bg-blue-600 text-white dark:bg-blue-600 dark:hover:bg-blue-700"
+            >
+              Try Again
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default WalletConnectionPending

package/src/widget/components/WalletList.tsx

@@ -3,7 +3,7 @@ import type React from "react"
 import { ChevronRight, Search } from "lucide-react"
 import { Wallet } from "lucide-react"
 import { ScreenHeader } from "./ScreenHeader.js"
-import { featuredWallets } from "../../wallets.js"
+import { topShownWallets } from "../../wallets.js"
 import type { WalletConfig } from "../../wallets.js"
 
 export interface WalletListProps {
@@ -23,8 +23,8 @@ export const WalletList: React.FC<WalletListProps> = ({
     return walletOptions
       .filter((wallet) => wallet.id !== "injected")
       .sort((a, b) => {
-        const aIndex = featuredWallets.indexOf(a.id)
-        const bIndex = featuredWallets.indexOf(b.id)
+        const aIndex = topShownWallets.indexOf(a.id)
+        const bIndex = topShownWallets.indexOf(b.id)
 
         // If both are featured, maintain featured order
         if (aIndex !== -1 && bIndex !== -1) {
@@ -84,14 +84,15 @@ export const WalletList: React.FC<WalletListProps> = ({
             <button
               type="button"
               key={wallet.id}
+              data-wallet-id={wallet.id}
               onClick={() => handleWalletSelect(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.logo ? (
+                {wallet.icon ? (
                   <>
                     <img
-                      src={wallet.logo}
+                      src={wallet.icon}
                       alt={wallet.name}
                       className="h-6 w-6"
                     />

package/src/widget/hooks/useAmountUsd.ts

@@ -1,25 +1,20 @@
-import type { SequenceAPIClient } from "@0xsequence/api"
 import { useQuery } from "@tanstack/react-query"
 import { useTokenPrice } from "../../prices.js"
 import { formatUsdAmountDisplay } from "../../tokenBalances.js"
 import { useTokenAddress } from "../../tokens.js"
+import { useAPIClient } from "../../apiClient.js"
 
 type UseAmountUsdProps = {
   amount?: string | null
   token?: string | null
   chainId?: number | null
-  apiClient: SequenceAPIClient
 }
 
-export function useAmountUsd({
-  amount,
-  token,
-  chainId,
-  apiClient,
-}: UseAmountUsdProps): {
+export function useAmountUsd({ amount, token, chainId }: UseAmountUsdProps): {
   amountUsd: number | null
   amountUsdFormatted: string
 } {
+  const apiClient = useAPIClient()
   const isTokenAddress = token?.startsWith("0x")
   const resolvedTokenAddress = useTokenAddress({
     chainId,