0xtrails 0.1.13 → 0.2.0

package/src/widget/components/Earn.tsx

@@ -6,7 +6,7 @@ import {
   ChevronDown,
   Loader2,
 } from "lucide-react"
-import { useEffect, useState, useMemo, useRef } from "react"
+import { useEffect, useState, useRef } from "react"
 import type React from "react"
 import type { Account, WalletClient } from "viem"
 import type { TransactionState } from "../../transactions.js"
@@ -26,7 +26,6 @@ import { ScreenHeader } from "./ScreenHeader.js"
 import { ChainList } from "./ChainList.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { formatTvl } from "../../prices.js"
-import { getChainInfo } from "../../chains.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import { formatUsdAmountDisplay } from "../../tokenBalances.js"
 import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
@@ -154,10 +153,13 @@ export const Earn: React.FC<EarnProps> = ({
     ) {
       const highestValueToken = filteredTokensFormatted[0] // First token is highest USD value
       if (highestValueToken && Number(highestValueToken.balanceUsd) > 0) {
+        const decimals =
+          highestValueToken.contractInfo?.decimals ??
+          (highestValueToken as any)?.decimals
         setOriginToken({
           ...highestValueToken,
           contractInfo: {
-            decimals: highestValueToken.contractInfo?.decimals || 18,
+            decimals,
             contractAddress: highestValueToken.contractAddress,
             symbol: highestValueToken.symbol,
             name: highestValueToken.name,
@@ -174,25 +176,6 @@ export const Earn: React.FC<EarnProps> = ({
     }
   }, [])
 
-  // Get unique chains from filtered tokens for chain list
-  const uniqueChains = useMemo(() => {
-    if (!filteredTokensFormatted?.length) return []
-
-    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 ChainImage component for chain icons
-        }
-      })
-      .sort((a, b) => a.name.localeCompare(b.name))
-  }, [filteredTokensFormatted])
-
   const handleAmountChange = (value: string) => {
     // Validate decimal places (max 8 decimals)
     const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
@@ -256,7 +239,6 @@ export const Earn: React.FC<EarnProps> = ({
   if (showOriginChainList) {
     return (
       <ChainList
-        chains={uniqueChains}
         onBack={() => {
           setShowOriginChainList(false)
           setShowOriginTokenSelector(true)
@@ -313,7 +295,7 @@ export const Earn: React.FC<EarnProps> = ({
 
       <div className="space-y-1">
         {/* Origin Token Selection */}
-        <div className="trails-bg-secondary trails-border-radius-container p-3 group transition-all duration-200 border border-transparent hover:!bg-white dark:hover:!bg-gray-800 hover:border-gray-400 dark:hover:border-gray-500">
+        <div className="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary">
           {/* Deposit Label and Percentage Buttons */}
           <div className="flex justify-between items-center mb-2">
             <div className="text-sm font-semibold trails-text-secondary text-left">
@@ -372,14 +354,14 @@ export const Earn: React.FC<EarnProps> = ({
                     style={{
                       fontSize:
                         amount.length > 12
-                          ? "1rem"
+                          ? "0.875rem"
                           : amount.length > 9
-                            ? "1.25rem"
+                            ? "1rem"
                             : amount.length > 6
-                              ? "1.5rem"
+                              ? "1.125rem"
                               : amount.length > 3
-                                ? "1.75rem"
-                                : "2rem",
+                                ? "1.25rem"
+                                : "1.5rem",
                       width: `${Math.max((amount || "0").length, 1)}ch`,
                       minWidth: "1ch",
                       maxWidth: "270px",
@@ -394,15 +376,15 @@ export const Earn: React.FC<EarnProps> = ({
                     style={{
                       fontSize:
                         amount.length > 12
-                          ? "1rem"
+                          ? "0.875rem"
                           : amount.length > 9
-                            ? "1.25rem"
+                            ? "1rem"
                             : amount.length > 6
-                              ? "1.5rem"
+                              ? "1.125rem"
                               : amount.length > 3
-                                ? "1.75rem"
-                                : "2rem",
-                      marginLeft: amount && amount !== "0" ? "0.2em" : "0.3em",
+                                ? "1.25rem"
+                                : "1.5rem",
+                      marginLeft: "0.1em",
                       padding: "0",
                       transition: "all 0.2s ease-in-out",
                     }}
@@ -486,110 +468,120 @@ export const Earn: React.FC<EarnProps> = ({
 
         {/* Arrow Down Between Sections */}
         <div className="relative">
-          <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-1.5 trails-border-radius-button trails-bg-tertiary transition-colors cursor-pointer border-2 border-white dark:border-gray-800">
-            <ArrowDown className="w-4 h-4 trails-text-secondary" />
+          <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-1.5 trails-border-radius-button trails-bg-tertiary transition-colors border-2 border-white dark:border-gray-800 z-1">
+            <ArrowDown
+              className="w-5 h-5 text-gray-900 dark:text-white"
+              strokeWidth={2.5}
+            />
           </div>
         </div>
 
         {/* Destination Vault Selection */}
         <div className="trails-bg-secondary trails-border-radius-container transition-all duration-200 border border-transparent hover:!bg-white dark:hover:!bg-white hover:border-gray-400 dark:hover:border-gray-500">
           {selectedPool ? (
-            /* Pool Information Display */
-            <div className="p-4 trails-border-radius-container trails-bg-secondary 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" }}>
-                    <a
-                      href={getExplorerUrlForAddress({
-                        address: selectedPool.token.address,
-                        chainId: selectedPool.chainId,
-                      })}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="cursor-pointer"
-                    >
-                      <TokenImage
-                        symbol={selectedPool.token.symbol}
-                        imageUrl={selectedPool.token.logoUrl}
-                        chainId={selectedPool.chainId}
-                        size={32}
-                      />
-                    </a>
-                  </div>
-                  <div>
-                    <h3 className="font-medium text-gray-900 dark:text-white text-sm">
-                      {selectedPool.poolUrl ? (
-                        <a
-                          href={selectedPool.poolUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="hover:underline cursor-pointer"
-                        >
-                          {selectedPool.name}
-                        </a>
-                      ) : (
-                        selectedPool.name
-                      )}
-                    </h3>
-                    <div className="flex items-center space-x-2">
-                      <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
-                        {selectedPool.protocol === "Aave" && (
-                          <img
-                            src={aaveLogo}
-                            alt="Aave"
-                            className="w-3 h-3 mr-1"
-                          />
-                        )}
-                        {selectedPool.protocol === "Morpho" && (
-                          <img
-                            src={morphoLogo}
-                            alt="Morpho"
-                            className="w-3 h-3 mr-1"
-                          />
-                        )}
-                        {selectedPool.protocolUrl ? (
+            <div className="p-3 trails-border-radius-container trails-bg-secondary transition-all overflow-hidden">
+              {/* Vault Label */}
+              <div className="flex justify-between items-center mb-2">
+                <div className="text-sm font-semibold trails-text-secondary text-left">
+                  Vault
+                </div>
+              </div>
+
+              <div className="px-1">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-3">
+                    <div style={{ width: "32px", height: "32px" }}>
+                      <a
+                        href={getExplorerUrlForAddress({
+                          address: selectedPool.token.address,
+                          chainId: selectedPool.chainId,
+                        })}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="cursor-pointer"
+                      >
+                        <TokenImage
+                          symbol={selectedPool.token.symbol}
+                          imageUrl={selectedPool.token.logoUrl}
+                          chainId={selectedPool.chainId}
+                          size={32}
+                        />
+                      </a>
+                    </div>
+                    <div>
+                      <h3 className="font-medium text-gray-900 dark:text-white text-sm">
+                        {selectedPool.poolUrl ? (
                           <a
-                            href={selectedPool.protocolUrl}
+                            href={selectedPool.poolUrl}
                             target="_blank"
                             rel="noopener noreferrer"
                             className="hover:underline cursor-pointer"
                           >
-                            {selectedPool.protocol}
+                            {selectedPool.name}
                           </a>
                         ) : (
-                          selectedPool.protocol
+                          selectedPool.name
                         )}
-                      </span>
+                      </h3>
+                      <div className="flex items-center space-x-2">
+                        <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
+                          {selectedPool.protocol === "Aave" && (
+                            <img
+                              src={aaveLogo}
+                              alt="Aave"
+                              className="w-3 h-3 mr-1"
+                            />
+                          )}
+                          {selectedPool.protocol === "Morpho" && (
+                            <img
+                              src={morphoLogo}
+                              alt="Morpho"
+                              className="w-3 h-3 mr-1"
+                            />
+                          )}
+                          {selectedPool.protocolUrl ? (
+                            <a
+                              href={selectedPool.protocolUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="hover:underline cursor-pointer"
+                            >
+                              {selectedPool.protocol}
+                            </a>
+                          ) : (
+                            selectedPool.protocol
+                          )}
+                        </span>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <button
-                  type="button"
-                  title="Select Vault"
-                  onClick={() => setShowEarnPools(true)}
-                  className="text-right flex items-center space-x-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition-colors"
-                >
-                  <div>
-                    <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">
-                        {selectedPool.apy.toFixed(1)}% APY
-                      </span>
+                  <button
+                    type="button"
+                    title="Select Vault"
+                    onClick={() => setShowEarnPools(true)}
+                    className="text-right flex items-center space-x-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition-colors"
+                  >
+                    <div>
+                      <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">
+                          {selectedPool.apy.toFixed(1)}% APY
+                        </span>
+                      </div>
+                      <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                        TVL: {formatTvl(selectedPool.tvl)}
+                      </p>
                     </div>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-                      TVL: {formatTvl(selectedPool.tvl)}
-                    </p>
-                  </div>
-                  <ChevronRight className="w-4 h-4 text-gray-400" />
-                </button>
+                    <ChevronRight className="w-4 h-4 text-gray-400" />
+                  </button>
+                </div>
               </div>
             </div>
           ) : (
-            /* Select Vault Button */
             <button
               type="button"
               onClick={() => setShowEarnPools(true)}
-              className="w-full py-6 px-4 trails-bg-secondary trails-hover-bg trails-border-radius-container transition-all duration-200 cursor-pointer"
+              className="w-full py-6 px-4 trails-list-item trails-border-radius-container transition-all duration-200 cursor-pointer"
             >
               <div className="flex items-center justify-between">
                 <div className="flex items-center space-x-3 flex-1">

package/src/widget/components/EarnPools.tsx

@@ -147,9 +147,7 @@ export const EarnPools: React.FC<EarnPoolsProps> = ({
 
   // Show chain list screen
   if (showChainList) {
-    return (
-      <ChainList chains={uniqueChains} onBack={() => setShowChainList(false)} />
-    )
+    return <ChainList onBack={() => setShowChainList(false)} />
   }
 
   return (
@@ -230,7 +228,7 @@ export const EarnPools: React.FC<EarnPoolsProps> = ({
               whileHover={{ scale: 1 }}
               whileTap={{ scale: 0.99 }}
               onClick={() => onPoolSelect(pool)}
-              className="p-4 trails-border-radius-container trails-bg-secondary cursor-pointer hover:!bg-gray-200 dark:hover:!bg-gray-600 transition-all overflow-hidden"
+              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">

package/src/widget/components/EarnPoolsFilters.tsx

@@ -46,7 +46,7 @@ export const EarnPoolsFilters: React.FC<EarnPoolsFiltersProps> = ({
             e.stopPropagation()
             setIsProtocolDropdownOpen(!isProtocolDropdownOpen)
           }}
-          className="flex items-center justify-between px-2 py-1.5 bg-gray-100 dark:bg-gray-700 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]"
+          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" ? (
@@ -72,11 +72,11 @@ export const EarnPoolsFilters: React.FC<EarnPoolsFiltersProps> = ({
               {getProtocolDisplay(selectedProtocol)}
             </span>
           </div>
-          <ChevronDown className="w-3 h-3 ml-1" />
+          <ChevronDown className="w-4 h-4 ml-1" />
         </button>
 
         {isProtocolDropdownOpen && (
-          <div className="absolute top-full left-0 mt-0.5 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-20">
+          <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}
@@ -115,14 +115,14 @@ export const EarnPoolsFilters: React.FC<EarnPoolsFiltersProps> = ({
             e.stopPropagation()
             setIsSortDropdownOpen(!isSortDropdownOpen)
           }}
-          className="flex items-center justify-between px-2 py-1.5 bg-gray-100 dark:bg-gray-700 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]"
+          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-3 h-3 ml-1" />
+          <ChevronDown className="w-4 h-4 ml-1" />
         </button>
 
         {isSortDropdownOpen && (
-          <div className="absolute top-full left-0 mt-0.5 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-20">
+          <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) => {