0xtrails 0.2.5 → 0.3.0

package/src/widget/components/AccountSettings.tsx

@@ -1,10 +1,11 @@
-import { LogOut, User, ChevronRight, History } from "lucide-react"
+import { LogOut, User, ChevronRight, History, HelpCircle } from "lucide-react"
 import type React from "react"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
 import type { Screen } from "../hooks/useCurrentScreen.js"
 import { useBack } from "../hooks/useBack.js"
 import { ConnectedWallets } from "./ConnectedWallets.js"
 import { ScreenHeader } from "./ScreenHeader.js"
+import Tooltip from "./Tooltip.js"
 
 const ACTIONS = [
   {
@@ -26,57 +27,85 @@ interface AccountSettingsProps {
   onBack?: () => void
 }
 
+const onHelp = () => {
+  window.open("https://support.trails.build/en/", "_blank")
+}
+
 export const AccountSettings: React.FC<AccountSettingsProps> = ({ onBack }) => {
   const { hideDisconnect, decoupleWagmi } = useWidgetProps()
   const { setCurrentScreenWithBack } = useBack()
 
   return (
     <div className="flex flex-col h-full">
-      <ScreenHeader
-        headerContent="Settings"
-        headerContentAlign="left"
-        onBack={onBack}
-      />
-
-      {/* Connected Wallets */}
-      <div>
-        <ConnectedWallets
-          showConnectNewWallet={true}
-          showDisconnect={true}
-          backScreen="account-settings"
+      <div className="flex items-center justify-between h-full">
+        <ScreenHeader
+          headerContent="Settings"
+          headerContentAlign="left"
+          onBack={onBack}
         />
+        <Tooltip message="Get help" className="mb-4 mr-0">
+          <button
+            type="button"
+            onClick={onHelp}
+            className="flex h-8 w-8 justify-center items-center rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
+            title="Get help"
+          >
+            <HelpCircle className="w-4 h-4" />
+          </button>
+        </Tooltip>
       </div>
 
-      {/* Actions */}
-      <div className="space-y-0">
-        {ACTIONS.map((action) => {
-          if (action.disabled) return null
-          // Hide disconnect action if hideDisconnect is true
-          if (
-            (hideDisconnect || decoupleWagmi) &&
-            action.screen === "disconnect"
-          )
-            return null
+      <div className="flex-1">
+        <div className="space-y-4">
+          {/* Connected Wallets */}
+          <ConnectedWallets
+            showConnectNewWallet={true}
+            showDisconnect={true}
+            backScreen="account-settings"
+          />
+
+          {/* Divider */}
+          <div className="border-t border-gray-200 dark:border-gray-700"></div>
+
+          {/* Actions */}
+          <div className="trails-border-radius-container border trails-border-primary">
+            {ACTIONS.map((action, index) => {
+              if (action.disabled) return null
+              // Hide disconnect action if hideDisconnect is true
+              if (
+                (hideDisconnect || decoupleWagmi) &&
+                action.screen === "disconnect"
+              )
+                return null
+
+              const IconComponent = action.icon
+              const isLast = index === ACTIONS.length - 1
 
-          const IconComponent = action.icon
+              return (
+                <div key={action.screen}>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setCurrentScreenWithBack(action.screen as Screen)
+                    }}
+                    className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
+                  >
+                    <div className="flex items-center gap-3">
+                      <IconComponent className="w-4 h-4" />
+                      <span className="text-sm font-bold">{action.label}</span>
+                    </div>
+                    <ChevronRight className="w-5 h-5 text-gray-400" />
+                  </button>
 
-          return (
-            <button
-              key={action.screen}
-              type="button"
-              onClick={() => {
-                setCurrentScreenWithBack(action.screen as Screen)
-              }}
-              className={`w-full text-left px-0 py-3 text-sm trails-list-item flex items-center justify-between cursor-pointer transition-colors trails-text-primary`}
-            >
-              <div className="flex items-center gap-3">
-                <IconComponent className="w-4 h-4" />
-                {action.label}
-              </div>
-              <ChevronRight className="w-4 h-4 text-gray-400" />
-            </button>
-          )
-        })}
+                  {/* Divider between buttons (except for the last one) */}
+                  {!isLast && (
+                    <div className="border-b border-gray-200 dark:border-gray-700"></div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
       </div>
     </div>
   )

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,8 @@ import { RecipientSelectorButton } from "./RecipientSelectorButton.js"
 import { RefundWarning } from "./RefundWarning.js"
 import { Identicon } from "./Identicon.js"
 import { truncateAddress } from "../../utils.js"
+import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
+import { FeeOptions } from "./FeeOptions.js"
 
 interface ClassicSwapProps {
   selectedToken: Token | null
@@ -35,18 +37,17 @@ 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
   paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
@@ -85,7 +86,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   onError,
   onWaitingForWalletConfirm,
   paymasterUrls,
-  gasless,
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
@@ -143,10 +143,13 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     quoteError,
     quoteErrorPrettified,
     isSameTokenWithoutCustomCalldata,
+    feeOptions,
+    selectedFeeToken,
+    setSelectedFeeToken,
   } = useSendForm({
     account,
     toAmount: tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmount,
-    toRecipient: toRecipient || account.address,
+    toRecipient: toRecipient || account?.address,
     toChainId,
     toToken,
     toCalldata,
@@ -155,10 +158,9 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     onError,
     onWaitingForWalletConfirm,
     paymasterUrls,
-    gasless,
+    onSend,
     onConfirm,
     onComplete,
-    onSend,
     selectedToken: originToken as any,
     setWalletConfirmRetryHandler,
     tradeType: tradeType,
@@ -178,36 +180,16 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }, [sellAmount, buyAmount, lastInputType, setAmount])
 
-  // Handle sell amount input changes with decimal validation
+  // Handle sell amount input changes
   const handleSellAmountChange = useCallback((value: string) => {
-    // Limit total length to 16 characters
-    if (value.length > 16) {
-      return
-    }
-
-    // Validate decimal places (max 8 decimals)
-    const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
-    if (!decimalMatch && value !== "") {
-      return // Don't update if more than 8 decimals
-    }
     setTradeType(TradeType.EXACT_INPUT)
     setSellAmount(value)
     setBuyAmount("")
     setLastInputType("sell")
   }, [])
 
-  // Handle buy amount input changes with decimal validation
+  // Handle buy amount input changes
   const handleBuyAmountChange = useCallback((value: string) => {
-    // Limit total length to 16 characters
-    if (value.length > 16) {
-      return
-    }
-
-    // Validate decimal places (max 8 decimals)
-    const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
-    if (!decimalMatch && value !== "") {
-      return // Don't update if more than 8 decimals
-    }
     setTradeType(TradeType.EXACT_OUTPUT)
     setBuyAmount(value)
     setSellAmount("")
@@ -362,53 +344,6 @@ 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"
-    }
-
-    return {
-      fontSize,
-      transition: "all 0.1s ease-in-out",
-    }
-  }, [tradeType, buyAmount, toAmountDisplay])
-
   // Handle source token selection from full-screen selector
   const handleSourceTokenSelectorSelect = useCallback(
     (token: any) => {
@@ -585,10 +520,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 />
@@ -598,22 +533,17 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
             {/* Amount Input */}
             <div className="flex-1">
               <div className="flex items-center space-x-2">
-                <input
+                <DynamicSizeInputField
                   ref={inputRef}
-                  id="amount"
-                  type="text"
                   value={sellAmount}
                   onChange={(e) => handleSellAmountChange(e.target.value)}
-                  placeholder={`0 ${originToken?.symbol || ""}`}
-                  className={`w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${
+                  isLoading={
                     isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT
-                      ? "animate-pulse"
-                      : ""
-                  }`}
-                  style={sellInputStyles}
+                  }
                   readOnly={
                     tradeType === TradeType.EXACT_OUTPUT && isLoadingQuote
                   }
+                  variant="default"
                 />
                 {isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT && (
                   <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
@@ -632,10 +562,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 +580,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 +646,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 ? (
@@ -738,8 +668,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
             {/* Output Amount */}
             <div className="flex-1">
               <div className="flex items-center space-x-2">
-                <input
-                  type="text"
+                <DynamicSizeInputField
                   value={
                     tradeType === TradeType.EXACT_OUTPUT
                       ? buyAmount
@@ -747,17 +676,15 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   }
                   onChange={(e) => handleBuyAmountChange(e.target.value)}
                   onFocus={handleBuyInputFocus}
-                  placeholder={`0 ${selectedDestToken?.symbol || ""}`}
-                  className={`w-full bg-transparent font-bold placeholder:trails-text-muted border-none outline-none ${
-                    !amount
-                      ? "text-gray-400 dark:text-gray-500"
-                      : "trails-text-primary"
-                  } ${isLoadingQuote && tradeType === TradeType.EXACT_INPUT ? "animate-pulse" : ""}`}
-                  style={buyInputStyles}
+                  isLoading={
+                    isLoadingQuote && tradeType === TradeType.EXACT_INPUT
+                  }
                   readOnly={
                     (tradeType === TradeType.EXACT_INPUT && isLoadingQuote) ||
                     !!toAmount
                   }
+                  showPlaceholderStyle={!amount}
+                  variant="default"
                 />
                 {isLoadingQuote && tradeType === TradeType.EXACT_INPUT && (
                   <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
@@ -777,11 +704,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,15 +760,25 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
 
         {/* Quote Details */}
         {prepareSendQuote && (
-          <div className="space-y-2">
+          <div className="mb-4">
             <QuoteDetails
               quote={prepareSendQuote}
               showContent={true}
               swapMode={true}
+              isRefetching={isLoadingQuote}
             />
           </div>
         )}
 
+        {/* Fee Options */}
+        <FeeOptions
+          feeOptions={feeOptions || []}
+          selectedFeeToken={selectedFeeToken}
+          setSelectedFeeToken={(token) => setSelectedFeeToken(token as any)}
+          chainId={originToken?.chainId}
+          isRefetching={isLoadingQuote}
+        />
+
         <button
           type="submit"
           disabled={

package/src/widget/components/ConfigDisplay.tsx

@@ -10,8 +10,6 @@ import {
   getSlippageTolerance,
   getDebug,
 } from "../../config.js"
-import { getRelayerUrl } from "../../relayer.js"
-import type { RelayerEnv } from "../../relayer.js"
 import { getChainInfo } from "../../chains.js"
 import { mainnet } from "viem/chains"
 import { logger } from "../../logger.js"
@@ -48,9 +46,6 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
     getSlippageTolerance(),
   )
   const [debugMode, setDebugMode] = useState(getDebug())
-  const [relayerUrl, setRelayerUrl] = useState(
-    getRelayerUrl({ env: getSequenceEnv() as RelayerEnv }, 1),
-  )
   const [rpcNodeUrl, setRpcNodeUrl] = useState(() => {
     const mainnetChain = getChainInfo(mainnet.id)
     return mainnetChain?.rpcUrls?.default?.http?.[0] || "N/A"
@@ -67,7 +62,6 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
       setWalletConnectProjectId(getWalletConnectProjectId())
       setSlippageTolerance(getSlippageTolerance())
       setDebugMode(getDebug())
-      setRelayerUrl(getRelayerUrl({ env: getSequenceEnv() as RelayerEnv }, 1))
 
       // Update RPC Node URL for mainnet
       const mainnetChain = getChainInfo(mainnet.id)
@@ -99,11 +93,6 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
       value: sequenceIndexerUrl,
       display: truncateString(sequenceIndexerUrl),
     },
-    {
-      label: "Relayer URL (1)",
-      value: relayerUrl,
-      display: truncateString(relayerUrl),
-    },
     {
       label: "RPC Node URL (1)",
       value: rpcNodeUrl,

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