0xtrails 0.2.5 → 0.2.6

package/src/widget/components/ChainFilterDropdown.tsx

@@ -3,6 +3,7 @@ import type React from "react"
 import { useEffect, useMemo, useRef, useState } from "react"
 import { ChainImage } from "./ChainImage.js"
 import { AllChainsIcon } from "./AllChainsIcon.js"
+import { getChainInfo } from "../../chains.js"
 
 export interface Chain {
   chainId: number
@@ -94,9 +95,29 @@ export const ChainFilterDropdown: React.FC<ChainFilterDropdownProps> = ({
     }
   }
 
-  const selectedChain = chains.find(
-    (chain) => chain.chainId === selectedChainId,
-  )
+  // Find selected chain in the chains array, or get it from getChainInfo if not found
+  // This handles the case where user selects a chain with no tokens
+  const selectedChain = useMemo(() => {
+    if (selectedChainId === null) return null
+
+    const chainInList = chains.find(
+      (chain) => chain.chainId === selectedChainId,
+    )
+
+    if (chainInList) return chainInList
+
+    // If chain not in list (e.g., no tokens on that chain), get info from getChainInfo
+    const chainInfo = getChainInfo(selectedChainId)
+    if (chainInfo) {
+      return {
+        chainId: chainInfo.id,
+        name: chainInfo.name,
+        imageUrl: chainInfo.imageUrl,
+      }
+    }
+
+    return null
+  }, [chains, selectedChainId])
 
   return (
     <div className={`relative ${className}`} ref={dropdownRef}>

package/src/widget/components/ClassicSwap.tsx

@@ -1,6 +1,6 @@
 import { Loader2, ArrowDown } from "lucide-react"
 import type React from "react"
-import { useCallback, useEffect, useRef, useState, useMemo } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import type { Account, WalletClient } from "viem"
 import { zeroAddress } from "viem"
 import type { TransactionState } from "../../transactions.js"
@@ -28,6 +28,7 @@ import { RecipientSelectorButton } from "./RecipientSelectorButton.js"
 import { RefundWarning } from "./RefundWarning.js"
 import { Identicon } from "./Identicon.js"
 import { truncateAddress } from "../../utils.js"
+import { useDynamicInputStyles } from "./DynamicInputStyles.js"
 
 interface ClassicSwapProps {
   selectedToken: Token | null
@@ -35,13 +36,13 @@ interface ClassicSwapProps {
   onBack?: () => void
   onConfirm: () => void
   onComplete: (result: OnCompleteProps) => void
-  account: Account
+  account?: Account
   toRecipient?: string
   toAmount?: string
   toChainId?: number
   toToken?: string
   toCalldata?: string
-  walletClient: WalletClient
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
@@ -146,7 +147,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   } = useSendForm({
     account,
     toAmount: tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmount,
-    toRecipient: toRecipient || account.address,
+    toRecipient: toRecipient || account?.address,
     toChainId,
     toToken,
     toCalldata,
@@ -363,51 +364,12 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   }
 
   // Dynamic font size based on input length
-  const sellInputStyles = useMemo(() => {
-    const inputLength = sellAmount.length
-    let fontSize: string
-
-    if (inputLength > 12) {
-      fontSize = "1rem"
-    } else if (inputLength > 9) {
-      fontSize = "1.25rem"
-    } else if (inputLength > 6) {
-      fontSize = "1.5rem"
-    } else if (inputLength > 3) {
-      fontSize = "1.75rem"
-    } else {
-      fontSize = "2rem"
-    }
-
-    return {
-      fontSize,
-      transition: "all 0.1s ease-in-out",
-    }
-  }, [sellAmount.length])
-
-  const buyInputStyles = useMemo(() => {
-    const inputValue =
-      tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmountDisplay || ""
-    const inputLength = inputValue.length
-    let fontSize: string
-
-    if (inputLength > 12) {
-      fontSize = "1rem"
-    } else if (inputLength > 9) {
-      fontSize = "1.25rem"
-    } else if (inputLength > 6) {
-      fontSize = "1.5rem"
-    } else if (inputLength > 3) {
-      fontSize = "1.75rem"
-    } else {
-      fontSize = "2rem"
-    }
+  const sellInputStyles = useDynamicInputStyles({ inputValue: sellAmount })
 
-    return {
-      fontSize,
-      transition: "all 0.1s ease-in-out",
-    }
-  }, [tradeType, buyAmount, toAmountDisplay])
+  const buyInputStyles = useDynamicInputStyles({
+    inputValue:
+      tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmountDisplay || "",
+  })
 
   // Handle source token selection from full-screen selector
   const handleSourceTokenSelectorSelect = useCallback(
@@ -585,10 +547,10 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
 
       <form onSubmit={handleSubmit} className="space-y-1">
         {/* Input Section - Amount + Token Selection */}
-        <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 min-h-[120px] flex flex-col">
+        <div className="pt-4 pb-4 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 min-h-[120px] flex flex-col">
           {/* Sell Label */}
-          <div className="flex justify-between items-center mb-2">
-            <div className="text-sm font-medium trails-text-secondary text-left">
+          <div className="mb-4 flex justify-between items-center">
+            <div className="text-sm font-medium trails-text-secondary text-left m-0">
               {mode === "fund" ? "Payment method" : "Sell"}
             </div>
             <FundingMethodSelectorButton />
@@ -604,7 +566,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   type="text"
                   value={sellAmount}
                   onChange={(e) => handleSellAmountChange(e.target.value)}
-                  placeholder={`0 ${originToken?.symbol || ""}`}
+                  placeholder={"0"}
                   className={`w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${
                     isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT
                       ? "animate-pulse"
@@ -632,10 +594,10 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
           </div>
 
           {/* Bottom Info Row for sell */}
-          <div className="mt-2 flex justify-between items-center">
+          <div className="mt-4 flex justify-between items-center">
             {/* USD Amount */}
             {originToken?.symbol && (
-              <div className="text-xs trails-text-muted">
+              <div className="text-xs text-gray-500 dark:text-gray-400">
                 ≈{" "}
                 {tradeType === TradeType.EXACT_INPUT
                   ? amountUsdDisplay || "$0.00"
@@ -650,7 +612,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
               <div className="flex items-center space-x-2">
                 <button
                   type="button"
-                  className="text-xs trails-text-muted cursor-pointer hover:trails-hover-text transition-colors bg-transparent border-none p-0"
+                  className="text-xs text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors bg-transparent border-none p-0"
                   onClick={() => {
                     if (balanceFormatted) {
                       const balance = parseFloat(balanceFormatted)
@@ -716,10 +678,10 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
         </div>
 
         {/* Output Section - Amount + Token Selection */}
-        <div className="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary min-h-[120px] flex flex-col">
+        <div className="pt-4 pb-4 trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary min-h-[120px] flex flex-col mb-4">
           {/* Buy Label */}
-          <div className="flex justify-between items-center mb-2">
-            <div className="text-sm font-medium trails-text-secondary text-left">
+          <div className="mb-4 flex justify-between items-center mb-2">
+            <div className="text-sm font-medium trails-text-secondary text-left m-0">
               {mode === "fund" ? "Recipient" : "Buy"}
             </div>
             {toRecipient ? (
@@ -747,7 +709,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   }
                   onChange={(e) => handleBuyAmountChange(e.target.value)}
                   onFocus={handleBuyInputFocus}
-                  placeholder={`0 ${selectedDestToken?.symbol || ""}`}
+                  placeholder={"0"}
                   className={`w-full bg-transparent font-bold placeholder:trails-text-muted border-none outline-none ${
                     !amount
                       ? "text-gray-400 dark:text-gray-500"
@@ -777,11 +739,11 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
           </div>
 
           {/* Bottom Info Row */}
-          <div className="mt-2 flex justify-between items-center">
+          <div className="mt-4 flex justify-between items-center">
             {/* Destination Amount USD from Quote */}
             {(prepareSendQuote?.destinationAmountUsdDisplay ||
               (isLoadingQuote && tradeType === TradeType.EXACT_INPUT)) && (
-              <div className="text-xs trails-text-muted">
+              <div className="text-xs text-gray-500 dark:text-gray-400">
                 ≈{" "}
                 {isLoadingQuote && tradeType === TradeType.EXACT_INPUT
                   ? "$0.00"
@@ -833,7 +795,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
 
         {/* Quote Details */}
         {prepareSendQuote && (
-          <div className="space-y-2">
+          <div className="mb-4">
             <QuoteDetails
               quote={prepareSendQuote}
               showContent={true}

package/src/widget/components/ConnectWallet.tsx

@@ -36,7 +36,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   lastClickedWallet,
   showDisconnect = true,
 }) => {
-  const { isConnected, address, connector } = useAccount()
+  const { address, connector } = useAccount()
   const connections = useConnections()
   const { switchAccount } = useSwitchAccount()
   const { setCurrentScreen } = useCurrentScreen()
@@ -45,6 +45,9 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   const connectors = useConnectors()
   const [error, setError] = useState<string | null>(null)
 
+  // Check if there are any connected accounts across all connectors
+  const isConnected = connections.length > 0
+
   useEffect(() => {
     if (error) {
       if (onError) {

package/src/widget/components/ConnectedWallets.tsx

@@ -86,25 +86,8 @@ const WalletItem: React.FC<WalletItemProps> = ({
           {/* Identicon */}
           <Identicon value={wallet.address} size={32} />
           <div className="flex flex-col items-start space-y-1">
-            <div className="flex items-center space-x-2">
-              {/* Wallet Icon */}
-              {typeof wallet.walletConfig?.icon === "string" ? (
-                <img
-                  src={wallet.walletConfig.icon}
-                  alt={wallet.walletConfig.name}
-                  className="h-4 w-4"
-                />
-              ) : (
-                <Wallet className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-              )}
-              <span className="text-sm font-bold text-gray-900 dark:text-gray-100">
-                {wallet.walletConfig?.name ||
-                  wallet.connector?.name ||
-                  "Wallet"}
-              </span>
-            </div>
-            <div className="flex items-center space-x-1">
-              <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+            <div className="flex items-center space-x-1 m-0">
+              <span className="text-sm font-bold text-gray-900 dark:text-gray-100 whitespace-nowrap">
                 {truncateAddress(wallet.address)}
               </span>
               <div
@@ -147,6 +130,23 @@ const WalletItem: React.FC<WalletItemProps> = ({
                 )}
               </div>
             </div>
+            <div className="flex items-center space-x-2">
+              {/* Wallet Icon */}
+              {typeof wallet.walletConfig?.icon === "string" ? (
+                <img
+                  src={wallet.walletConfig.icon}
+                  alt={wallet.walletConfig.name}
+                  className="h-3.5 w-3.5 mr-1"
+                />
+              ) : (
+                <Wallet className="h-3.5 w-3.5 text-gray-600 dark:text-gray-400 mr-1" />
+              )}
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                {wallet.walletConfig?.name ||
+                  wallet.connector?.name ||
+                  "Wallet"}
+              </span>
+            </div>
           </div>
         </div>
 
@@ -156,7 +156,7 @@ const WalletItem: React.FC<WalletItemProps> = ({
               Active
             </span>
           ) : !onWalletSelect ? (
-            <span className="text-xs px-2 py-1 rounded font-medium bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+            <span className="whitespace-nowrap text-xs px-2 py-1 rounded font-medium bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
               Set as active
             </span>
           ) : null}
@@ -324,7 +324,7 @@ export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
   return (
     <div className={`space-y-2 ${className}`}>
       {/* Header */}
-      <div className="text-sm font-medium text-gray-700 dark:text-gray-300 text-left mb-3">
+      <div className="text-sm font-medium text-gray-900 dark:text-gray-100 text-left mb-2">
         Connected Wallets
       </div>
 

package/src/widget/components/DynamicInputStyles.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from "react"
+
+interface DynamicInputStylesProps {
+  inputValue: string
+  variant?: "default" | "smaller" | "inline"
+}
+
+export const useDynamicInputStyles = ({
+  inputValue,
+  variant = "default",
+}: DynamicInputStylesProps) => {
+  return useMemo(() => {
+    const inputLength = inputValue.length
+    let fontSize: string
+
+    if (variant === "smaller") {
+      // Used in Fund.tsx - smaller font sizes
+      if (inputLength > 15) {
+        fontSize = "1rem"
+      } else if (inputLength > 12) {
+        fontSize = "1.125rem"
+      } else if (inputLength > 9) {
+        fontSize = "1.25rem"
+      } else if (inputLength > 6) {
+        fontSize = "1.375rem"
+      } else {
+        fontSize = "1.5rem"
+      }
+    } else if (variant === "inline") {
+      // Used in PoolWithdraw.tsx and PoolDeposit.tsx - inline styles with width
+      if (inputLength > 15) {
+        fontSize = "1rem"
+      } else if (inputLength > 12) {
+        fontSize = "1.125rem"
+      } else if (inputLength > 9) {
+        fontSize = "1.25rem"
+      } else if (inputLength > 6) {
+        fontSize = "1.375rem"
+      } else {
+        fontSize = "1.5rem"
+      }
+    } else {
+      // Default variant - used in Pay.tsx and ClassicSwap.tsx
+      if (inputLength > 15) {
+        fontSize = "1.25rem"
+      } else if (inputLength > 12) {
+        fontSize = "1.5rem"
+      } else if (inputLength > 9) {
+        fontSize = "1.75rem"
+      } else if (inputLength > 6) {
+        fontSize = "2rem"
+      } else {
+        fontSize = "2.25rem"
+      }
+    }
+
+    const baseStyles = {
+      fontSize,
+      transition: "all 0.1s ease-in-out",
+    }
+
+    // Add width and other properties for inline variant
+    if (variant === "inline") {
+      return {
+        ...baseStyles,
+        width: `${Math.max((inputValue || "0").length, 1)}ch`,
+        minWidth: "1ch",
+        maxWidth: "270px",
+        padding: "0",
+        margin: "0",
+      }
+    }
+
+    return baseStyles
+  }, [inputValue, variant])
+}

package/src/widget/components/Earn.tsx

@@ -14,8 +14,8 @@ import type { SupportedToken } from "../../tokens.js"
 interface EarnProps {
   onBack?: () => void
   onContinue: () => void
-  account: Account
-  walletClient: WalletClient
+  account?: Account
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
@@ -64,6 +64,7 @@ export const Earn: React.FC<EarnProps> = ({
   onTrackToken,
 }) => {
   const [activeTab, setActiveTab] = useState<"deposit" | "withdraw">("deposit")
+  const [isShowingPoolSelector, setIsShowingPoolSelector] = useState(false) // Track if pool selector is shown
 
   return (
     <div className="space-y-2">
@@ -74,33 +75,35 @@ export const Earn: React.FC<EarnProps> = ({
         showAccountActions={true}
       />
 
-      {/* Tabs */}
-      <div className="flex justify-start space-x-2">
-        <button
-          type="button"
-          onClick={() => setActiveTab("deposit")}
-          className={`flex items-center space-x-2 py-2 px-4 text-xs font-bold cursor-pointer trails-border-radius-input ${
-            activeTab === "deposit"
-              ? "trails-bg-secondary text-blue-500"
-              : "trails-text-secondary"
-          }`}
-        >
-          <ArrowDownCircle className="w-4 h-4" />
-          <span>Deposit</span>
-        </button>
-        <button
-          type="button"
-          onClick={() => setActiveTab("withdraw")}
-          className={`flex items-center space-x-2 py-2 px-4 text-xs font-bold cursor-pointer trails-border-radius-input ${
-            activeTab === "withdraw"
-              ? "trails-bg-secondary text-blue-500"
-              : "trails-text-secondary"
-          }`}
-        >
-          <ArrowUpCircle className="w-4 h-4" />
-          <span>Withdraw</span>
-        </button>
-      </div>
+      {/* Tabs - only show when not in pool selector mode */}
+      {!isShowingPoolSelector && (
+        <div className="flex justify-start space-x-2">
+          <button
+            type="button"
+            onClick={() => setActiveTab("deposit")}
+            className={`flex items-center space-x-2 py-2 px-4 text-xs font-bold cursor-pointer trails-border-radius-input ${
+              activeTab === "deposit"
+                ? "trails-bg-secondary text-blue-500"
+                : "trails-text-secondary"
+            }`}
+          >
+            <ArrowDownCircle className="w-4 h-4" />
+            <span>Deposit</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab("withdraw")}
+            className={`flex items-center space-x-2 py-2 px-4 text-xs font-bold cursor-pointer trails-border-radius-input ${
+              activeTab === "withdraw"
+                ? "trails-bg-secondary text-blue-500"
+                : "trails-text-secondary"
+            }`}
+          >
+            <ArrowUpCircle className="w-4 h-4" />
+            <span>Withdraw</span>
+          </button>
+        </div>
+      )}
 
       {/* Content */}
       {activeTab === "deposit" ? (
@@ -123,6 +126,7 @@ export const Earn: React.FC<EarnProps> = ({
           recentTokens={recentTokens}
           onRecentTokenSelect={onRecentTokenSelect}
           onTrackToken={onTrackToken}
+          onPoolSelectorStateChange={setIsShowingPoolSelector}
         />
       ) : (
         <PoolWithdraw
@@ -144,6 +148,7 @@ export const Earn: React.FC<EarnProps> = ({
           recentTokens={recentTokens}
           onRecentTokenSelect={onRecentTokenSelect}
           onTrackToken={onTrackToken}
+          onPoolSelectorStateChange={setIsShowingPoolSelector}
         />
       )}
     </div>

package/src/widget/components/ErrorAnimationIcon.tsx

@@ -0,0 +1,130 @@
+import { type CSSProperties, useEffect, useState } from "react"
+
+export function ErrorAnimationIcon() {
+  const [animate, setAnimate] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnimate(true)
+    }, 100)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  const styles: Record<string, CSSProperties> = {
+    container: {
+      width: "80px",
+      height: "80px",
+      position: "relative" as const,
+    },
+    circleContainer: {
+      position: "relative" as const,
+      width: "100%",
+      height: "100%",
+    },
+    circleFill: {
+      position: "absolute" as const,
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      backgroundColor: "#ef4444",
+      transform: animate ? "scale(1)" : "scale(0)",
+      opacity: animate ? 1 : 0,
+      transition: "transform 0.15s ease-out 0.3s, opacity 0.15s ease-out 0.3s",
+    },
+    progressRing: {
+      position: "absolute" as const,
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      transform: "rotate(-90deg)",
+    },
+    circle: {
+      fill: "none",
+      stroke: "url(#redGradient)",
+      strokeWidth: 4,
+      strokeLinecap: "round" as const,
+      strokeDasharray: 226,
+      strokeDashoffset: animate ? 0 : 226,
+      transition: "stroke-dashoffset 0.3s ease-out",
+    },
+    xContainer: {
+      position: "absolute" as const,
+      top: "50%",
+      left: "50%",
+      transform: animate
+        ? "translate(-50%, -50%) scale(1)"
+        : "translate(-50%, -50%) scale(0)",
+      opacity: animate ? 1 : 0,
+      zIndex: 10,
+      transition: "transform 0.1s ease-out 0.4s, opacity 0.1s ease-out 0.4s",
+    },
+    xPath: {
+      fill: "none",
+      stroke: "white",
+      strokeWidth: 3,
+      strokeLinecap: "round" as const,
+      strokeLinejoin: "round" as const,
+      strokeDasharray: 15,
+      strokeDashoffset: animate ? 0 : 15,
+      transition: "stroke-dashoffset 0.15s ease-out 0.45s",
+    },
+    xPathSecond: {
+      fill: "none",
+      stroke: "white",
+      strokeWidth: 3,
+      strokeLinecap: "round" as const,
+      strokeLinejoin: "round" as const,
+      strokeDasharray: 15,
+      strokeDashoffset: animate ? 0 : 15,
+      transition: "stroke-dashoffset 0.15s ease-out 0.5s",
+    },
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.circleContainer}>
+        {/* Circle fill */}
+        <div style={styles.circleFill} />
+
+        {/* Progress ring */}
+        <svg style={styles.progressRing}>
+          <defs>
+            <radialGradient
+              id="redGradient"
+              cx="50%"
+              cy="50%"
+              r="50%"
+              gradientUnits="objectBoundingBox"
+            >
+              <stop
+                offset="0%"
+                style={{ stopColor: "#ef4444", stopOpacity: 0 }}
+              />
+              <stop
+                offset="70%"
+                style={{ stopColor: "#ef4444", stopOpacity: 0.3 }}
+              />
+              <stop
+                offset="100%"
+                style={{ stopColor: "#ef4444", stopOpacity: 1 }}
+              />
+            </radialGradient>
+          </defs>
+          <circle cx="40" cy="40" r="36" style={styles.circle} />
+        </svg>
+
+        {/* X icon */}
+        <div style={styles.xContainer}>
+          <svg width="48" height="48" viewBox="0 0 24 24">
+            <path d="M6 6L18 18" style={styles.xPath} />
+            <path d="M18 6L6 18" style={styles.xPathSecond} />
+          </svg>
+        </div>
+      </div>
+    </div>
+  )
+}