0xtrails 0.1.2 → 0.1.4

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" : filteredRecentTokens.length > 0 ? "max-h-[17vh]" : "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>
+  )
+}