0xtrails 0.2.6 → 0.4.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,17 +27,33 @@ 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}
-      />
+      <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>
 
       <div className="flex-1">
         <div className="space-y-4">

package/src/widget/components/ClassicSwap.tsx

@@ -28,7 +28,8 @@ 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"
+import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
+import { FeeOptions } from "./FeeOptions.js"
 
 interface ClassicSwapProps {
   selectedToken: Token | null
@@ -47,7 +48,6 @@ interface ClassicSwapProps {
   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
@@ -86,7 +86,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   onError,
   onWaitingForWalletConfirm,
   paymasterUrls,
-  gasless,
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
@@ -144,6 +143,9 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     quoteError,
     quoteErrorPrettified,
     isSameTokenWithoutCustomCalldata,
+    feeOptions,
+    selectedFeeToken,
+    setSelectedFeeToken,
   } = useSendForm({
     account,
     toAmount: tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmount,
@@ -156,10 +158,9 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     onError,
     onWaitingForWalletConfirm,
     paymasterUrls,
-    gasless,
+    onSend,
     onConfirm,
     onComplete,
-    onSend,
     selectedToken: originToken as any,
     setWalletConfirmRetryHandler,
     tradeType: tradeType,
@@ -179,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("")
@@ -363,14 +344,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }
 
-  // Dynamic font size based on input length
-  const sellInputStyles = useDynamicInputStyles({ inputValue: sellAmount })
-
-  const buyInputStyles = useDynamicInputStyles({
-    inputValue:
-      tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmountDisplay || "",
-  })
-
   // Handle source token selection from full-screen selector
   const handleSourceTokenSelectorSelect = useCallback(
     (token: any) => {
@@ -560,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"}
-                  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" />
@@ -700,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
@@ -709,17 +676,15 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   }
                   onChange={(e) => handleBuyAmountChange(e.target.value)}
                   onFocus={handleBuyInputFocus}
-                  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"
-                      : "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" />
@@ -800,10 +765,20 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
               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/ConnectedWallets.tsx

@@ -14,6 +14,7 @@ import { useAccountTotalBalanceUsd } from "../../tokenBalances.js"
 import { Identicon } from "./Identicon.js"
 import { useBack } from "../hooks/useBack.js"
 import type { Screen } from "../hooks/useCurrentScreen.js"
+import { useWalletConnectionContext } from "../hooks/useWalletConnectionContext.js"
 
 export interface ConnectedWalletsProps {
   onWalletSwitch?: (address: string) => void
@@ -39,6 +40,7 @@ interface WalletItemProps {
   onCopyAddress: (address: string, e: React.MouseEvent) => void
   copiedAddress: string | null
   showDisconnect?: boolean
+  hideActiveState?: boolean
 }
 
 const WalletItem: React.FC<WalletItemProps> = ({
@@ -49,10 +51,14 @@ const WalletItem: React.FC<WalletItemProps> = ({
   onCopyAddress,
   copiedAddress,
   showDisconnect = false,
+  hideActiveState = false,
 }) => {
   const { totalBalanceUsdFormatted, isLoadingTotalBalanceUsd } =
     useAccountTotalBalanceUsd(wallet.address)
 
+  // Determine if this wallet should show active state
+  const showAsActive = wallet.isActive && !hideActiveState
+
   return (
     <div className="space-y-1">
       {/* Wallet Button */}
@@ -75,9 +81,9 @@ const WalletItem: React.FC<WalletItemProps> = ({
             }
           }
         }}
-        tabIndex={wallet.isActive ? -1 : 0}
+        tabIndex={showAsActive ? -1 : 0}
         className={`group w-full flex items-center justify-between font-medium py-2 px-3 transition-all duration-200 ${
-          wallet.isActive
+          showAsActive
             ? "bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300 cursor-pointer"
             : "bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
         }`}
@@ -151,11 +157,11 @@ const WalletItem: React.FC<WalletItemProps> = ({
         </div>
 
         <div className="flex items-center gap-2">
-          {wallet.isActive ? (
+          {showAsActive ? (
             <span className="text-xs px-2 py-1 rounded font-medium bg-blue-500 text-white">
               Active
             </span>
-          ) : !onWalletSelect ? (
+          ) : !onWalletSelect && !hideActiveState ? (
             <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>
@@ -198,6 +204,7 @@ export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
   const { disconnect } = useDisconnect()
   const { wallets: allWallets } = useWallets()
   const { setCurrentScreenWithBack } = useBack()
+  const { setConnectionContext } = useWalletConnectionContext()
   const [error, setError] = useState<string | null>(null)
   const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
 
@@ -355,6 +362,7 @@ export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
                 onCopyAddress={handleCopyAddress}
                 copiedAddress={copiedAddress}
                 showDisconnect={showDisconnect}
+                hideActiveState={backScreen === "recipients"}
               />
               {/* Add divider between wallet items */}
               {index < connectedWallets.length - 1 && (
@@ -377,6 +385,24 @@ export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
                 logger.console.log(
                   "[trails-sdk] Navigating from connected-wallets to wallet-list",
                 )
+
+                // Set wallet connection context based on the origin screen
+                if (backScreen === "recipients") {
+                  logger.console.log(
+                    "[trails-sdk] Setting wallet connection context for recipient selection",
+                  )
+                  // Store the current active wallet info so we can switch back later
+                  setConnectionContext(
+                    "recipient-selection",
+                    backScreen as Screen,
+                    address,
+                    connector,
+                  )
+                } else {
+                  // Default behavior for other screens
+                  setConnectionContext("general", backScreen as Screen)
+                }
+
                 setCurrentScreenWithBack("wallet-list", backScreen 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 hover:trails-hover-bg"

package/src/widget/components/DynamicSizeInputField.tsx

@@ -0,0 +1,109 @@
+import { forwardRef, useCallback } from "react"
+import type React from "react"
+import { useDynamicInputStyles } from "./DynamicInputStyles.js"
+
+interface DynamicSizeInputFieldProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "onChange" | "value" | "type" | "style"
+  > {
+  value: string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  isLoading?: boolean
+  variant?: "default" | "smaller" | "inline"
+  maxDecimals?: number
+  maxDigits?: number
+  showPlaceholderStyle?: boolean
+}
+
+export const DynamicSizeInputField = forwardRef<
+  HTMLInputElement,
+  DynamicSizeInputFieldProps
+>(
+  (
+    {
+      id = "amount",
+      value,
+      onChange,
+      placeholder = "0",
+      isLoading = false,
+      className,
+      variant = "default",
+      maxDecimals = 8,
+      maxDigits = 16,
+      showPlaceholderStyle = false,
+      onFocus,
+      onBlur,
+      ...restProps
+    },
+    ref,
+  ) => {
+    // Dynamic font size based on input length
+    const inputStyles = useDynamicInputStyles({
+      inputValue: value,
+      variant: variant,
+    })
+
+    // Handle input change with validation
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!onChange) return
+
+        const newValue = e.target.value
+
+        // Allow empty string
+        if (newValue === "") {
+          onChange(e)
+          return
+        }
+
+        // Limit total length to maxDigits characters
+        if (newValue.length > maxDigits) {
+          return
+        }
+
+        // Validate decimal places (max maxDecimals decimals) and allow single decimal point
+        const decimalRegex = new RegExp(`^\\d*\\.?\\d{0,${maxDecimals}}$`)
+        if (!decimalRegex.test(newValue)) {
+          return // Don't update if invalid format
+        }
+
+        // If validation passes, call the parent's onChange
+        onChange(e)
+      },
+      [onChange, maxDecimals, maxDigits],
+    )
+
+    // Determine text color based on showPlaceholderStyle
+    const textColorClass = showPlaceholderStyle
+      ? "text-gray-400 dark:text-gray-500"
+      : "trails-text-primary"
+
+    return (
+      <input
+        ref={ref}
+        id={id}
+        type="text"
+        value={value}
+        onChange={handleChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        placeholder={placeholder}
+        autoComplete="off"
+        className={
+          className ||
+          `w-full bg-transparent font-bold ${textColorClass} placeholder:trails-text-muted border-none outline-none ${
+            isLoading ? "animate-pulse" : ""
+          }`
+        }
+        style={inputStyles}
+        inputMode="decimal"
+        {...restProps}
+      />
+    )
+  },
+)
+
+DynamicSizeInputField.displayName = "DynamicSizeInputField"
+
+export default DynamicSizeInputField

package/src/widget/components/Earn.tsx

@@ -23,7 +23,6 @@ interface EarnProps {
   onComplete: (result: OnCompleteProps) => void
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
@@ -53,7 +52,6 @@ export const Earn: React.FC<EarnProps> = ({
   onComplete,
   onSend,
   paymasterUrls,
-  gasless,
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
@@ -117,7 +115,6 @@ export const Earn: React.FC<EarnProps> = ({
           onComplete={onComplete}
           onSend={onSend}
           paymasterUrls={paymasterUrls}
-          gasless={gasless}
           setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
           quoteProvider={quoteProvider}
           fundMethod={fundMethod}
@@ -134,20 +131,7 @@ export const Earn: React.FC<EarnProps> = ({
           walletClient={walletClient}
           onTransactionStateChange={onTransactionStateChange}
           onError={onError}
-          onWaitingForWalletConfirm={onWaitingForWalletConfirm}
-          onConfirm={onConfirm}
           onComplete={onComplete}
-          onSend={onSend}
-          paymasterUrls={paymasterUrls}
-          gasless={gasless}
-          setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-          quoteProvider={quoteProvider}
-          fundMethod={fundMethod}
-          onNavigateToMeshConnect={onNavigateToMeshConnect}
-          checkoutOnHandlers={checkoutOnHandlers}
-          recentTokens={recentTokens}
-          onRecentTokenSelect={onRecentTokenSelect}
-          onTrackToken={onTrackToken}
           onPoolSelectorStateChange={setIsShowingPoolSelector}
         />
       )}

package/src/widget/components/FeeBreakdown.tsx

@@ -38,7 +38,7 @@ const FeeRow: React.FC<FeeRowProps> = ({ label, feeItem, tooltip }) => (
         {feeItem.amount} {feeItem.tokenSymbol}
       </div>
       <div className="text-xs text-gray-500 dark:text-gray-400">
-        ~{feeItem.usdValue}
+        ≈ {feeItem.usdValue}
       </div>
     </div>
   </div>
@@ -120,9 +120,9 @@ export const FeeBreakdown: React.FC<FeeBreakdownProps> = ({
           )}
           {feeBreakdown.providerFee && (
             <FeeRow
-              label="Provider Fee"
+              label="Liquidity Provider Fee"
               feeItem={feeBreakdown.providerFee}
-              tooltip="Fee charged by the bridge/swap provider for executing the transaction"
+              tooltip="Fee charged by the bridge/swap liquidity provider for executing the transaction"
             />
           )}
           {feeBreakdown.trailsFee && (

package/src/widget/components/FeeOption.tsx

@@ -47,7 +47,7 @@ export const FeeOption: React.FC<FeeOptionProps> = ({
           chainId={option.chainId || chainId}
           size={16}
         />
-        <div className="text-left">
+        <div className="ml-2 text-left">
           <div
             className={`text-xs font-medium ${
               option.notEnoughBalance
@@ -68,7 +68,7 @@ export const FeeOption: React.FC<FeeOptionProps> = ({
               : "trails-text-primary"
           }`}
         >
-          {option.amountUsdDisplay}
+          ≈ {option.amountUsdDisplay}
         </div>
       </div>
     </button>