0xtrails 0.2.5 → 0.3.0

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"
         }`}
@@ -86,25 +92,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,16 +136,33 @@ 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>
 
         <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 ? (
-            <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">
+          ) : !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>
           ) : null}
@@ -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)
 
@@ -324,7 +331,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>
 
@@ -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/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/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

@@ -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
@@ -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,
@@ -64,6 +62,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 +73,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" ? (
@@ -114,7 +115,6 @@ export const Earn: React.FC<EarnProps> = ({
           onComplete={onComplete}
           onSend={onSend}
           paymasterUrls={paymasterUrls}
-          gasless={gasless}
           setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
           quoteProvider={quoteProvider}
           fundMethod={fundMethod}
@@ -123,6 +123,7 @@ export const Earn: React.FC<EarnProps> = ({
           recentTokens={recentTokens}
           onRecentTokenSelect={onRecentTokenSelect}
           onTrackToken={onTrackToken}
+          onPoolSelectorStateChange={setIsShowingPoolSelector}
         />
       ) : (
         <PoolWithdraw
@@ -130,20 +131,8 @@ 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}
         />
       )}
     </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>
+  )
+}