0xtrails 0.13.1 → 0.14.0

package/src/widget/components/EarnPools.tsx

@@ -1,417 +0,0 @@
-import { TrendingUp } from "lucide-react"
-import { motion } from "motion/react"
-import { useEffect, useMemo, useState } from "react"
-import { useAccount } from "wagmi"
-import { getChainInfo } from "../../chains.js"
-import { logger } from "../../logger.js"
-import { usePools, type Pool } from "../../pools.js"
-import { formatTvl, formatUsdAmountLocaleDisplay } from "../../utils/format.js"
-import {
-  useTokenBalances,
-  WIDGET_REFRESH_INTERVAL,
-} from "../../query/balance.hooks.js"
-import aaveLogo from "../assets/aave.svg"
-import morphoLogo from "../assets/morpho.svg"
-import { useChainFilter } from "../hooks/useChainFilter.js"
-import { ChainFilterDropdown } from "./ChainFilterDropdown.js"
-import { ChainList } from "./ChainList.js"
-import { EarnPoolsFilters, type SortOption } from "./EarnPoolsFilters.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { SearchInputField } from "./SearchInputField.js"
-import { TokenImage } from "./TokenImage.js"
-
-import { normalizeAddress } from "../../utils/address.js"
-interface EarnPoolsProps {
-  onBack?: () => void
-  onPoolSelect: (pool: Pool) => void
-}
-
-export const EarnPools: React.FC<EarnPoolsProps> = ({
-  onBack,
-  onPoolSelect,
-}) => {
-  const { data: pools, loading, error } = usePools()
-  const { address } = useAccount()
-  const { sortedTokens: userTokens } = useTokenBalances(
-    address || null,
-    undefined,
-    { refetchInterval: WIDGET_REFRESH_INTERVAL },
-  )
-  const [selectedProtocol, setSelectedProtocol] = useState<string>("all")
-  const [searchFilter, setSearchFilter] = useState<string>("")
-  const [filterByChainId, setFilterByChainId] = useState<number | null>(null)
-  const [sortBy, setSortBy] = useState<SortOption>("tvl")
-  const [showChainList, setShowChainList] = useState(false)
-  const { selectedChainId, setSelectedChainId } = useChainFilter()
-
-  // Sync chain filter context with local state
-  useEffect(() => {
-    if (selectedChainId !== filterByChainId) {
-      setFilterByChainId(selectedChainId)
-    }
-  }, [selectedChainId, filterByChainId])
-
-  // Update chain filter context when local state changes
-  const handleChainSelect = (chainId: number | null) => {
-    setFilterByChainId(chainId)
-    setSelectedChainId(chainId)
-  }
-
-  const protocols = useMemo(() => {
-    if (!pools || !Array.isArray(pools)) {
-      return ["all"]
-    }
-
-    try {
-      const uniqueProtocols = new Set(
-        pools.map((pool) => pool.protocol).filter(Boolean),
-      )
-      const sortedProtocols = Array.from(uniqueProtocols).sort((a, b) =>
-        a.localeCompare(b),
-      )
-      return ["all", ...sortedProtocols]
-    } catch (error) {
-      logger.console.error("[trails-sdk] Error computing protocols:", error)
-      return ["all"]
-    }
-  }, [pools])
-
-  // Get unique chains from all pools
-  const uniqueChains = useMemo(() => {
-    if (!pools || !Array.isArray(pools)) {
-      return []
-    }
-
-    try {
-      const chainIds = new Set(
-        pools.map((pool) => pool.chainId).filter(Boolean),
-      )
-      return Array.from(chainIds)
-        .map((chainId) => ({
-          chainId,
-          name: getChainInfo(chainId)?.name ?? "",
-        }))
-        .sort((a, b) => a.name.localeCompare(b.name))
-        .filter((chain) => chain.name) // Filter out chains without names
-    } catch (error) {
-      logger.console.error("[trails-sdk] Error computing unique chains:", error)
-      return []
-    }
-  }, [pools])
-
-  // Create a map to quickly lookup user balances by token address and chain
-  const userBalanceMap = useMemo(() => {
-    const map = new Map<string, (typeof userTokens)[0]>()
-    if (userTokens && Array.isArray(userTokens)) {
-      userTokens.forEach((token) => {
-        const key = `${normalizeAddress(token.contractAddress)}-${token.chainId}`
-        map.set(key, token)
-      })
-    }
-    return map
-  }, [userTokens])
-
-  const filteredPools = useMemo(() => {
-    if (!pools || !Array.isArray(pools)) {
-      return []
-    }
-
-    const filtered = pools.filter((pool) => {
-      try {
-        // Only show active pools
-        if (!pool.isActive) {
-          return false
-        }
-
-        // Protocol filter (case-insensitive)
-        const protocolMatch =
-          selectedProtocol === "all" ||
-          pool.protocol?.toLowerCase() === selectedProtocol?.toLowerCase()
-
-        // Chain filter
-        const chainMatch =
-          filterByChainId === null || pool.chainId === filterByChainId
-
-        // Search filter - split by spaces to allow "usdc base" type searches
-        const searchTerms = searchFilter
-          .trim()
-          .toLowerCase()
-          .split(/\s+/)
-          .filter((term) => term.length > 0)
-        const searchMatch =
-          !searchFilter.trim() ||
-          searchTerms.every(
-            (term) =>
-              pool.token?.symbol?.toLowerCase().includes(term) ||
-              pool.token?.name?.toLowerCase().includes(term) ||
-              pool.protocol?.toLowerCase().includes(term) ||
-              getChainInfo(pool.chainId)?.name?.toLowerCase().includes(term),
-          )
-
-        return protocolMatch && chainMatch && searchMatch
-      } catch (error) {
-        logger.console.error("[trails-sdk] Error filtering pool:", pool, error)
-        return false
-      }
-    })
-
-    // Add user balance data to pools and sort
-    const poolsWithBalances = filtered.map((pool) => {
-      const key = `${normalizeAddress(pool.depositAddress)}-${pool.chainId}`
-      const userBalance = userBalanceMap.get(key)
-
-      // Calculate USD value if we have balance and price
-      let calculatedUsdValue = userBalance?.balanceUsd || 0
-      if (userBalance?.balanceFormatted && userBalance?.priceUsd) {
-        calculatedUsdValue =
-          parseFloat(userBalance.balanceFormatted) * userBalance.priceUsd
-      }
-
-      return {
-        ...pool,
-        userBalance: userBalance?.balance,
-        userBalanceUsd: calculatedUsdValue,
-        userBalanceFormatted: userBalance?.balanceFormatted,
-        userBalanceDisplay: userBalance?.balanceDisplay,
-        userTokenSymbol: userBalance?.symbol,
-      }
-    })
-
-    // Sort the filtered pools - always prioritize by user balance
-    return poolsWithBalances.sort((a, b) => {
-      try {
-        const aHasBalance =
-          a.userBalanceFormatted && parseFloat(a.userBalanceFormatted) > 0
-        const bHasBalance =
-          b.userBalanceFormatted && parseFloat(b.userBalanceFormatted) > 0
-
-        // First prioritize pools with user balance
-        if (aHasBalance && !bHasBalance) return -1
-        if (!aHasBalance && bHasBalance) return 1
-
-        // If both have balance, sort by USD value first, then by token balance
-        if (aHasBalance && bHasBalance) {
-          // Sort by USD value if both have it
-          if (a.userBalanceUsd > 0 && b.userBalanceUsd > 0) {
-            return b.userBalanceUsd - a.userBalanceUsd
-          }
-
-          // Otherwise sort by token balance
-          const aBalance = parseFloat(a.userBalanceFormatted || "0")
-          const bBalance = parseFloat(b.userBalanceFormatted || "0")
-          return bBalance - aBalance
-        }
-
-        // For pools without user balance, use the selected sort
-        if (sortBy === "tvl") {
-          return (b.tvl || 0) - (a.tvl || 0)
-        } else if (sortBy === "apy") {
-          return (b.apy || 0) - (a.apy || 0)
-        }
-        return 0
-      } catch (error) {
-        logger.console.error("[trails-sdk] Error sorting pools:", error)
-        return 0
-      }
-    })
-  }, [
-    pools,
-    selectedProtocol,
-    filterByChainId,
-    searchFilter,
-    sortBy,
-    userBalanceMap,
-  ])
-
-  // Separate pools into user pools and other pools
-  const userPools = useMemo(() => {
-    return filteredPools.filter(
-      (pool) =>
-        pool.userBalanceFormatted && parseFloat(pool.userBalanceFormatted) > 0,
-    )
-  }, [filteredPools])
-
-  const otherPools = useMemo(() => {
-    return filteredPools.filter(
-      (pool) =>
-        !pool.userBalanceFormatted ||
-        parseFloat(pool.userBalanceFormatted) === 0,
-    )
-  }, [filteredPools])
-
-  // Function to render a pool item
-  const renderPoolItem = (pool: any) => (
-    <motion.div
-      key={pool.id}
-      whileHover={{ scale: 1 }}
-      whileTap={{ scale: 0.99 }}
-      onClick={() => onPoolSelect(pool)}
-      className="p-4 trails-border-radius-container trails-list-item cursor-pointer transition-all overflow-hidden"
-    >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-3">
-          <div style={{ width: "32px", height: "32px" }}>
-            <TokenImage
-              symbol={pool.token.symbol}
-              imageUrl={pool.token.logoUrl}
-              chainId={pool.chainId}
-              size={32}
-            />
-          </div>
-          <div>
-            <h3 className="font-medium text-gray-900 dark:text-white text-sm">
-              {pool.name}
-            </h3>
-            <div className="flex items-center space-x-1">
-              <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
-                {pool.protocol === "Aave" && (
-                  <img src={aaveLogo} alt="Aave" className="w-3 h-3 mr-1" />
-                )}
-                {pool.protocol === "Morpho" && (
-                  <img src={morphoLogo} alt="Morpho" className="w-3 h-3 mr-1" />
-                )}
-                {pool.protocol}
-              </span>
-            </div>
-          </div>
-        </div>
-        <div className="text-right">
-          <div className="flex items-center justify-end space-x-1 text-green-600 dark:text-green-400 mb-1 whitespace-nowrap">
-            <TrendingUp className="w-3 h-3" />
-            <span className="font-semibold text-sm">
-              {pool.apy.toFixed(1)}% APY
-            </span>
-          </div>
-          <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-            TVL: {formatTvl(pool.tvl)}
-          </p>
-          {/* User balance display below TVL */}
-          {pool.userBalanceFormatted &&
-            parseFloat(pool.userBalanceFormatted) > 0 && (
-              <p
-                className="text-xs font-bold mt-1 whitespace-nowrap notranslate"
-                style={{ color: "#71717A" }}
-                translate="no"
-              >
-                Balance:{" "}
-                {pool.userBalanceUsd > 0
-                  ? formatUsdAmountLocaleDisplay(pool.userBalanceUsd)
-                  : pool.userBalanceDisplay || pool.userBalanceFormatted}
-              </p>
-            )}
-        </div>
-      </div>
-    </motion.div>
-  )
-
-  // Show chain list screen
-  if (showChainList) {
-    return <ChainList onBack={() => setShowChainList(false)} />
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Select Vault"
-        headerContentAlign="left"
-      />
-
-      {/* Search Field */}
-      <SearchInputField
-        value={searchFilter}
-        onChange={(value) => {
-          try {
-            setSearchFilter(value || "")
-          } catch (error) {
-            logger.console.error(
-              "[trails-sdk] Error updating search filter:",
-              error,
-            )
-            setSearchFilter("")
-          }
-        }}
-        placeholder="Filter vaults"
-        autoFocus={true}
-        className="mb-4"
-        rightAlignedComponent={
-          <ChainFilterDropdown
-            chains={uniqueChains}
-            selectedChainId={filterByChainId}
-            onChainSelect={handleChainSelect}
-            chainListScreen={true}
-            onNavigateToChainList={() => setShowChainList(true)}
-          />
-        }
-      />
-
-      {/* Filters */}
-      {!loading && (
-        <EarnPoolsFilters
-          protocols={protocols}
-          selectedProtocol={selectedProtocol}
-          onProtocolChange={setSelectedProtocol}
-          sortBy={sortBy}
-          onSortChange={setSortBy}
-        />
-      )}
-
-      {/* Pools List */}
-      <div className="flex-1 overflow-y-auto overflow-x-hidden space-y-3 max-h-[250px] trails-scrollbar">
-        {loading ? (
-          <div className="flex flex-col items-center justify-center py-8 space-y-4">
-            <div className="animate-spin rounded-full h-8 w-8 border-solid border-b-2 border-blue-500"></div>
-            <p className="text-gray-600 dark:text-gray-400">
-              Loading vaults...
-            </p>
-          </div>
-        ) : error ? (
-          <div className="flex flex-col items-center justify-center py-8 space-y-4">
-            <div className="text-red-500 text-center">
-              <p className="text-sm">Failed to load pools</p>
-              <p className="text-xs text-gray-500 mt-1">
-                Please try again later
-              </p>
-            </div>
-          </div>
-        ) : filteredPools.length === 0 ? (
-          <div className="text-center py-8">
-            <p className="text-gray-500 dark:text-gray-400 text-sm">
-              No pools available for the selected protocol
-            </p>
-          </div>
-        ) : (
-          <>
-            {/* My Vaults Section */}
-            {userPools.length > 0 && (
-              <>
-                <div className="px-2 py-1">
-                  <p className="text-xs font-semibold text-gray-600 dark:text-gray-400 tracking-wider">
-                    My Vaults
-                  </p>
-                </div>
-                {userPools.map(renderPoolItem)}
-              </>
-            )}
-
-            {/* Other Vaults Section */}
-            {otherPools.length > 0 && (
-              <>
-                <div
-                  className={`px-2 py-1 ${userPools.length > 0 ? "mt-4" : ""}`}
-                >
-                  <p className="text-xs font-semibold text-gray-600 dark:text-gray-400 tracking-wider">
-                    {userPools.length > 0 ? "Other Vaults" : "Available Vaults"}
-                  </p>
-                </div>
-                {otherPools.map(renderPoolItem)}
-              </>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default EarnPools

package/src/widget/components/EarnPoolsFilters.tsx

@@ -1,165 +0,0 @@
-import { ChevronDown } from "lucide-react"
-import type React from "react"
-import { useRef, useState } from "react"
-import aaveLogo from "../assets/aave.svg"
-import morphoLogo from "../assets/morpho.svg"
-
-export type SortOption = "tvl" | "apy"
-
-interface EarnPoolsFiltersProps {
-  protocols: string[]
-  selectedProtocol: string
-  onProtocolChange: (protocol: string) => void
-  sortBy: SortOption
-  onSortChange: (sortBy: SortOption) => void
-}
-
-export const EarnPoolsFilters: React.FC<EarnPoolsFiltersProps> = ({
-  protocols,
-  selectedProtocol,
-  onProtocolChange,
-  sortBy,
-  onSortChange,
-}) => {
-  const [isProtocolDropdownOpen, setIsProtocolDropdownOpen] = useState(false)
-  const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false)
-  const protocolDropdownRef = useRef<HTMLDivElement>(null)
-  const sortDropdownRef = useRef<HTMLDivElement>(null)
-
-  const getProtocolDisplay = (protocol: string) => {
-    if (protocol === "all") return "All Protocols"
-    return protocol
-  }
-
-  const getSortDisplay = (sort: SortOption) => {
-    return sort === "tvl" ? "Sort by TVL" : "Sort by APY"
-  }
-
-  return (
-    <div className="flex items-center space-x-2 mb-3">
-      {/* Protocol Dropdown */}
-      <div className="relative" ref={protocolDropdownRef}>
-        <button
-          type="button"
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            setIsProtocolDropdownOpen(!isProtocolDropdownOpen)
-          }}
-          className="flex items-center justify-between px-2 py-1.5 trails-bg-secondary text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer text-xs min-w-[100px]"
-        >
-          <div className="flex items-center space-x-1">
-            {selectedProtocol === "all" ? (
-              <>
-                {protocols.includes("Aave") && (
-                  <img src={aaveLogo} alt="Aave" className="w-2.5 h-2.5" />
-                )}
-                {protocols.includes("Morpho") && (
-                  <img src={morphoLogo} alt="Morpho" className="w-2.5 h-2.5" />
-                )}
-              </>
-            ) : (
-              <>
-                {selectedProtocol === "Aave" && (
-                  <img src={aaveLogo} alt="Aave" className="w-2.5 h-2.5" />
-                )}
-                {selectedProtocol === "Morpho" && (
-                  <img src={morphoLogo} alt="Morpho" className="w-2.5 h-2.5" />
-                )}
-              </>
-            )}
-            <span className="text-xs font-medium">
-              {getProtocolDisplay(selectedProtocol)}
-            </span>
-          </div>
-          <ChevronDown className="w-4 h-4 ml-1" />
-        </button>
-
-        {isProtocolDropdownOpen && (
-          <div className="absolute top-full left-0 mt-0.5 w-full trails-bg-secondary border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-20">
-            {protocols.map((protocol) => (
-              <button
-                key={protocol}
-                type="button"
-                onClick={(e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  onProtocolChange(protocol)
-                  setIsProtocolDropdownOpen(false)
-                }}
-                className={`w-full flex items-center space-x-1 px-2 py-1.5 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer first:rounded-t-xl last:rounded-b-xl ${
-                  selectedProtocol === protocol
-                    ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
-                    : "text-gray-700 dark:text-gray-300"
-                }`}
-              >
-                {protocol === "Aave" && (
-                  <img src={aaveLogo} alt="Aave" className="w-2.5 h-2.5" />
-                )}
-                {protocol === "Morpho" && (
-                  <img src={morphoLogo} alt="Morpho" className="w-2.5 h-2.5" />
-                )}
-                <span className="text-xs">{getProtocolDisplay(protocol)}</span>
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Sort Dropdown */}
-      <div className="relative" ref={sortDropdownRef}>
-        <button
-          type="button"
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            setIsSortDropdownOpen(!isSortDropdownOpen)
-          }}
-          className="flex items-center justify-between px-2 py-1.5 trails-bg-secondary text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer text-xs min-w-[90px]"
-        >
-          <span className="text-xs font-medium">{getSortDisplay(sortBy)}</span>
-          <ChevronDown className="w-4 h-4 ml-1" />
-        </button>
-
-        {isSortDropdownOpen && (
-          <div className="absolute top-full left-0 mt-0.5 w-full trails-bg-secondary border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-20">
-            <button
-              type="button"
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                onSortChange("tvl")
-                setIsSortDropdownOpen(false)
-              }}
-              className={`w-full px-2 py-1.5 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer rounded-t-xl ${
-                sortBy === "tvl"
-                  ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
-                  : "text-gray-700 dark:text-gray-300"
-              }`}
-            >
-              <span className="text-xs">Sort by TVL</span>
-            </button>
-            <button
-              type="button"
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                onSortChange("apy")
-                setIsSortDropdownOpen(false)
-              }}
-              className={`w-full px-2 py-1.5 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer rounded-b-xl ${
-                sortBy === "apy"
-                  ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
-                  : "text-gray-700 dark:text-gray-300"
-              }`}
-            >
-              <span className="text-xs">Sort by APY</span>
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default EarnPoolsFilters