0xtrails 0.1.13 → 0.2.1

package/src/widget/components/DebugToast.tsx

@@ -0,0 +1,63 @@
+import type React from "react"
+import { useToast } from "./Toast.js"
+
+export const DebugToast: React.FC = () => {
+  const { showToast } = useToast()
+
+  const handleShowSuccess = () => {
+    showToast(
+      "Transaction Complete",
+      "Your transaction has been successfully processed",
+      "success",
+    )
+  }
+
+  const handleShowInfo = () => {
+    showToast(
+      "Info Toast",
+      "This is an info message for testing purposes",
+      "info",
+    )
+  }
+
+  const handleShowError = () => {
+    showToast(
+      "Transaction Failed",
+      "An error occurred while processing your transaction",
+      "error",
+    )
+  }
+
+  return (
+    <div className="p-3 border-b border-gray-200 dark:border-gray-700">
+      <div className="flex items-center gap-2">
+        <div className="text-xs font-semibold text-gray-600 dark:text-gray-400">
+          Toast
+        </div>
+        <div className="flex gap-1 flex-1">
+          <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 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 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 cursor-pointer"
+          >
+            error
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

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,10 +26,7 @@ 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"
 import aaveLogo from "../assets/aave.svg"
 import morphoLogo from "../assets/morpho.svg"
 import type { PrepareSendQuote } from "../../prepareSend.js"
@@ -154,10 +151,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 +174,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 +237,6 @@ export const Earn: React.FC<EarnProps> = ({
   if (showOriginChainList) {
     return (
       <ChainList
-        chains={uniqueChains}
         onBack={() => {
           setShowOriginChainList(false)
           setShowOriginTokenSelector(true)
@@ -313,7 +293,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">
@@ -358,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}
@@ -372,14 +355,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 +377,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 +469,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">
@@ -631,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}>

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) => {

package/src/widget/components/FeeOption.tsx

@@ -0,0 +1,78 @@
+import type React from "react"
+import { TokenImage } from "./TokenImage.js"
+
+export type FeeOption = {
+  tokenAddress: string
+  tokenSymbol: string
+  tokenDecimals: number
+  amount: string
+  amountUSD: number
+  amountFormatted: string
+  amountUsdDisplay: string
+  tokenImageUrl?: string
+  notEnoughBalance?: boolean
+  chainId?: number
+}
+
+interface FeeOptionProps {
+  option: FeeOption
+  isSelected: boolean
+  onClick: () => void
+  chainId?: number
+}
+
+export const FeeOption: React.FC<FeeOptionProps> = ({
+  option,
+  isSelected,
+  onClick,
+  chainId,
+}) => {
+  return (
+    <button
+      type="button"
+      className={`w-full flex items-center justify-between p-1.5 trails-border-radius-input border transition-colors ${
+        option.notEnoughBalance
+          ? "cursor-not-allowed opacity-50 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600"
+          : isSelected
+            ? "cursor-pointer trails-bg-primary/10 border-blue-500 bg-blue-50 dark:bg-blue-900/20"
+            : "cursor-pointer trails-bg-card trails-border-primary hover:trails-hover-bg"
+      }`}
+      onClick={option.notEnoughBalance ? undefined : onClick}
+      disabled={option.notEnoughBalance}
+    >
+      <div className="flex items-center space-x-2">
+        <TokenImage
+          imageUrl={option.tokenImageUrl}
+          symbol={option.tokenSymbol}
+          chainId={option.chainId || chainId}
+          size={16}
+        />
+        <div className="text-left">
+          <div
+            className={`text-xs font-medium ${
+              option.notEnoughBalance
+                ? "text-gray-400 dark:text-gray-500"
+                : "trails-text-primary"
+            }`}
+          >
+            {option.amountFormatted}
+          </div>
+        </div>
+      </div>
+
+      <div className="text-right">
+        <div
+          className={`text-xs font-medium ${
+            option.notEnoughBalance
+              ? "text-gray-400 dark:text-gray-500"
+              : "trails-text-primary"
+          }`}
+        >
+          {option.amountUsdDisplay}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+export default FeeOption