0xtrails 0.13.1 → 0.14.0

package/src/widget/components/DynamicSizeInputField.tsx

@@ -1,245 +0,0 @@
-import { forwardRef, useCallback } from "react"
-import type React from "react"
-import { useDynamicInputStyles } from "./DynamicInputStyles.js"
-import { FIAT_CURRENCY_SYMBOLS } from "../../constants.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"
-  inputSize?: "standard" | "large"
-  textAlign?: "left" | "center" | "right"
-  maxDecimals?: number
-  maxDigits?: number
-  showPlaceholderStyle?: boolean
-  currencySymbol?: string
-  isFiatInput?: boolean
-}
-
-export const DynamicSizeInputField = forwardRef<
-  HTMLInputElement,
-  DynamicSizeInputFieldProps
->(
-  (
-    {
-      id = "amount",
-      value,
-      onChange,
-      placeholder = "0",
-      isLoading = false,
-      className,
-      variant = "default",
-      inputSize = "standard",
-      textAlign = "left",
-      maxDecimals = 18,
-      maxDigits = 30,
-      showPlaceholderStyle = false,
-      currencySymbol,
-      onFocus,
-      onBlur,
-      disabled,
-      isFiatInput = false,
-      ...restProps
-    },
-    ref,
-  ) => {
-    // Dynamic font size based on input length
-    const inputStyles = useDynamicInputStyles({
-      inputValue: value,
-      variant: variant,
-      size: inputSize,
-      textAlign: textAlign,
-    })
-
-    const displayValue = value || placeholder
-
-    // Calculate width using ch units - 1ch = width of "0" in current font
-    // "." is much narrower than digits, so count it as 0.3ch instead of 1ch
-    const dotCount = (displayValue.match(/\./g) || []).length
-    const digitCount = displayValue.length - dotCount
-    const inputWidthCh = Math.max(digitCount + dotCount * 0.3 + 0.1, 1)
-
-    // Handle input change with validation
-    const handleChange = useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (!onChange) return
-
-        let newValue = e.target.value
-
-        // Allow empty string
-        if (newValue === "") {
-          onChange(e)
-          return
-        }
-
-        // Handle special case: if input is empty and user starts with ".", prepend "0"
-        if (newValue.startsWith(".")) {
-          newValue = `0${newValue}`
-          // Create a new event with the modified value
-          const syntheticEvent = {
-            ...e,
-            target: { ...e.target, value: newValue },
-          } as React.ChangeEvent<HTMLInputElement>
-          onChange(syntheticEvent)
-          return
-        }
-
-        // Handle special case: if current value is "0" and user types a digit, convert to "0." + digit
-        if (value === "0" && newValue.length === 2 && /^0\d$/.test(newValue)) {
-          const digit = newValue[1]
-          newValue = `0.${digit}`
-          // Create a new event with the modified value
-          const syntheticEvent = {
-            ...e,
-            target: { ...e.target, value: newValue },
-          } as React.ChangeEvent<HTMLInputElement>
-          onChange(syntheticEvent)
-          return
-        }
-
-        // Strip leading zeros except for "0" itself or "0." patterns
-        // This prevents values like "001", "032", etc.
-        // But allows "0", "0.", "0.5", etc.
-        if (
-          newValue.length > 1 &&
-          newValue.startsWith("0") &&
-          newValue[1] !== "."
-        ) {
-          // Remove all leading zeros
-          const stripped = newValue.replace(/^0+/, "")
-          newValue = stripped === "" ? "0" : stripped
-        }
-
-        // 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 (newValue !== e.target.value) {
-          const syntheticEvent = {
-            ...e,
-            target: { ...e.target, value: newValue },
-          } as React.ChangeEvent<HTMLInputElement>
-          onChange(syntheticEvent)
-          return
-        }
-
-        // If validation passes, call the parent's onChange
-        onChange(e)
-      },
-      [onChange, maxDecimals, maxDigits, value],
-    )
-
-    // Determine text color based on showPlaceholderStyle
-    const textColorClass = showPlaceholderStyle
-      ? "text-gray-400 dark:text-gray-500"
-      : "trails-text-primary"
-
-    // If no currency symbol, render the simple input
-    if (!currencySymbol) {
-      return (
-        <input
-          ref={ref}
-          id={id}
-          type="text"
-          value={value}
-          onChange={handleChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          disabled={disabled}
-          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}
-        />
-      )
-    }
-
-    return (
-      <div
-        className={`inline-flex items-end ${
-          textAlign === "center"
-            ? "justify-center"
-            : textAlign === "right"
-              ? "justify-end"
-              : "justify-start"
-        }`}
-      >
-        {isFiatInput && (
-          <span
-            className={`font-bold ${isLoading ? "animate-pulse" : ""} select-none`}
-            style={{
-              fontSize: inputStyles.fontSize,
-              fontWeight: "bold",
-              color: "#a3a3a8",
-              marginRight: "0.1ch",
-            }}
-          >
-            {FIAT_CURRENCY_SYMBOLS[
-              currencySymbol as keyof typeof FIAT_CURRENCY_SYMBOLS
-            ] || currencySymbol}
-          </span>
-        )}
-
-        <input
-          ref={ref}
-          id={id}
-          type="text"
-          value={value}
-          onChange={handleChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          disabled={disabled}
-          placeholder={placeholder}
-          autoComplete="off"
-          className={`bg-transparent font-bold ${textColorClass} placeholder:trails-text-muted border-none outline-none ${
-            isLoading ? "animate-pulse" : ""
-          }`}
-          style={{
-            ...inputStyles,
-            width: `${inputWidthCh}ch`,
-          }}
-          inputMode="decimal"
-          {...restProps}
-        />
-
-        {!isFiatInput && (
-          <span
-            className={`font-bold ${isLoading ? "animate-pulse" : ""} select-none self-end`}
-            style={{
-              fontSize: "1.2rem",
-              fontWeight: "bold",
-              color: "#a3a3a8",
-              marginLeft: "2px",
-              marginBottom: "17px",
-            }}
-          >
-            {currencySymbol}
-          </span>
-        )}
-      </div>
-    )
-  },
-)
-
-DynamicSizeInputField.displayName = "DynamicSizeInputField"
-
-export default DynamicSizeInputField

package/src/widget/components/ENSAvatar.tsx

@@ -1,33 +0,0 @@
-import type React from "react"
-import { useResolveEns } from "../../ens.js"
-import { Identicon } from "./Identicon.js"
-
-interface EnsAvatarProps {
-  address: string
-  size?: number
-  className?: string
-}
-
-/**
- * Shows ENS avatar when available for the address, otherwise falls back to Identicon.
- */
-export const EnsAvatar: React.FC<EnsAvatarProps> = ({
-  address,
-  size = 32,
-  className,
-}) => {
-  const { ensAvatar, ensName } = useResolveEns({ address })
-
-  if (ensAvatar) {
-    return (
-      <img
-        src={ensAvatar}
-        alt={ensName || address}
-        className={`shrink-0 rounded-full object-cover ${className ?? ""}`}
-        style={{ width: size, height: size }}
-      />
-    )
-  }
-
-  return <Identicon value={address} size={size} className={className} />
-}

package/src/widget/components/Earn.tsx

@@ -1,160 +0,0 @@
-import { ArrowDownCircle, ArrowLeftRight, ArrowUpCircle } from "lucide-react"
-import type React from "react"
-import { useEffect, useState } from "react"
-import type { Account, WalletClient } from "viem"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import type { Token } from "../../tokens.js"
-import type { FundMethod } from "../../transactionIntent/types.js"
-import type { TransactionState } from "../../transactions.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
-import type { OnCompleteProps } from "../hooks/useSendForm.js"
-import { useSwapState } from "../hooks/useSwapState.js"
-import { PoolDeposit } from "./PoolDeposit.js"
-import { PoolWithdraw } from "./PoolWithdraw.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-
-interface EarnProps {
-  onBack?: () => void
-  onContinue: () => void
-  account?: Account
-  walletClient?: WalletClient
-  onTransactionStateChange: (transactionStates: TransactionState[]) => void
-  onError: (error: Error | string | null) => void
-  onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
-  onConfirm: () => void
-  onComplete: (result: OnCompleteProps) => void
-  onSend: (amount: string, recipient: string) => void
-  paymasterUrls?: Array<{ chainId: number; url: string }>
-  setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  swapProvider?: string
-  bridgeProvider?: string
-  swapProviderFallback?: boolean
-  bridgeProviderFallback?: boolean
-  fundMethod?: FundMethod
-  checkoutOnHandlers?: CheckoutOnHandlers
-  recentTokens?: Token[]
-  onRecentTokenSelect?: (token: Token) => void
-  onTrackToken?: (token: any) => void
-}
-
-export const Earn: React.FC<EarnProps> = ({
-  onBack,
-  account,
-  walletClient,
-  onTransactionStateChange,
-  onError,
-  onWaitingForWalletConfirm,
-  onConfirm,
-  onComplete,
-  onSend,
-  paymasterUrls,
-  setWalletConfirmRetryHandler,
-  swapProvider,
-  bridgeProvider,
-  swapProviderFallback,
-  bridgeProviderFallback,
-  fundMethod,
-  checkoutOnHandlers,
-  recentTokens,
-  onRecentTokenSelect,
-  onTrackToken,
-}) => {
-  const [activeTab, setActiveTab] = useState<"deposit" | "withdraw">("deposit")
-  const [isShowingPoolSelector, setIsShowingPoolSelector] = useState(false) // Track if pool selector is shown
-  const { navigate } = useViewManager()
-  const { enterFormMode } = useSwapState()
-
-  // Register form mode so switching from Earn to other modes resets the swap state
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Only run on mount to register form mode
-  useEffect(() => {
-    enterFormMode("earn")
-  }, [])
-
-  return (
-    <div className="space-y-2">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Earn"
-        headerContentAlign="left"
-        showAccountActions={true}
-        customActions={
-          <button
-            type="button"
-            onClick={() => navigate("swap", { backTarget: "earn" })}
-            className="flex h-8 px-3 justify-center items-center gap-1.5 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="Swap"
-          >
-            <ArrowLeftRight className="h-4 w-4" />
-            <span className="text-sm font-medium">Swap</span>
-          </button>
-        }
-      />
-
-      {/* 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" ? (
-        <PoolDeposit
-          account={account}
-          walletClient={walletClient}
-          onTransactionStateChange={onTransactionStateChange}
-          onError={onError}
-          onWaitingForWalletConfirm={onWaitingForWalletConfirm}
-          onConfirm={onConfirm}
-          onComplete={onComplete}
-          onSend={onSend}
-          paymasterUrls={paymasterUrls}
-          setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-          swapProvider={swapProvider}
-          bridgeProvider={bridgeProvider}
-          swapProviderFallback={swapProviderFallback}
-          bridgeProviderFallback={bridgeProviderFallback}
-          fundMethod={fundMethod}
-          checkoutOnHandlers={checkoutOnHandlers}
-          recentTokens={recentTokens}
-          onRecentTokenSelect={onRecentTokenSelect}
-          onTrackToken={onTrackToken}
-          onPoolSelectorStateChange={setIsShowingPoolSelector}
-        />
-      ) : (
-        <PoolWithdraw
-          account={account}
-          walletClient={walletClient}
-          onTransactionStateChange={onTransactionStateChange}
-          onError={onError}
-          onComplete={onComplete}
-          onPoolSelectorStateChange={setIsShowingPoolSelector}
-        />
-      )}
-    </div>
-  )
-}