0xtrails 0.13.1 → 0.14.0

package/src/widget/components/ReceiptRecoverableFunds.tsx

@@ -1,135 +0,0 @@
-import type React from "react"
-import { getChainInfo } from "../../chains.js"
-import { ChainImage } from "./ChainImage.js"
-
-export type RecoverableToken = {
-  chainId: number
-  contractAddress: string
-  symbol: string
-  decimals: number
-  rawBalance: string
-  formattedBalance: string
-}
-
-export type RecoverableChainGroup = {
-  intentAddress: string
-  chainId: number
-  tokens: RecoverableToken[]
-}
-
-interface ReceiptRecoverableFundsProps {
-  hasRecoverableFunds: boolean
-  chainGroups: RecoverableChainGroup[]
-  isLoading?: boolean
-  error?: string | null
-  trailsIntentUrl?: string | null
-  onRefresh?: () => void
-}
-
-export const ReceiptRecoverableFunds: React.FC<
-  ReceiptRecoverableFundsProps
-> = ({
-  hasRecoverableFunds,
-  chainGroups,
-  isLoading = false,
-  error = null,
-  trailsIntentUrl,
-  onRefresh,
-}) => {
-  if (isLoading) return null
-
-  if (error) {
-    return (
-      <div className="rounded-xl bg-gray-100 dark:bg-gray-800 p-3">
-        <p className="text-sm text-gray-600 dark:text-gray-400">
-          Could not verify remaining funds right now.
-        </p>
-        {onRefresh && (
-          <button
-            type="button"
-            onClick={onRefresh}
-            className="mt-2 text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 cursor-pointer"
-          >
-            Retry
-          </button>
-        )}
-      </div>
-    )
-  }
-
-  if (!hasRecoverableFunds || chainGroups.length === 0) {
-    return null
-  }
-
-  return (
-    <div className="rounded-xl bg-warning p-[1px]">
-      <div className="rounded-xl bg-background-overlay p-4">
-        <div className="flex items-center justify-between gap-3">
-          <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
-            Funds available to recover
-          </h3>
-          {trailsIntentUrl && (
-            <a
-              href={trailsIntentUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 text-xs font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-            >
-              Recover
-              <svg
-                className="w-3 h-3 text-blue-600 dark:text-blue-400"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true"
-              >
-                <title>External Link</title>
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            </a>
-          )}
-        </div>
-
-        <div className="mt-3 space-y-3">
-          {chainGroups.map((group) => {
-            const chainName = getChainInfo(group.chainId)?.name || "Unknown"
-
-            return (
-              <div key={`${group.intentAddress}-${group.chainId}`}>
-                <div className="mb-2 flex items-center gap-2">
-                  <ChainImage chainId={group.chainId} size={14} />
-                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">
-                    {chainName}
-                  </span>
-                </div>
-
-                <div className="space-y-1">
-                  {group.tokens.map((token) => (
-                    <div
-                      key={`${token.chainId}-${token.contractAddress}`}
-                      className="flex items-center justify-between rounded-lg bg-gray-100 dark:bg-gray-800 px-2 py-1.5"
-                    >
-                      <span className="text-xs text-gray-600 dark:text-gray-400 truncate">
-                        {token.symbol}
-                      </span>
-                      <span className="text-xs font-medium text-gray-900 dark:text-white">
-                        {token.formattedBalance}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ReceiptRecoverableFunds

package/src/widget/components/RecentTokens.tsx

@@ -1,66 +0,0 @@
-import type React from "react"
-import type { Token } from "../../tokens.js"
-import { TokenImage } from "./TokenImage.js"
-
-import { addressEqual } from "../../utils/address.js"
-interface RecentTokensProps {
-  recentTokens: Token[]
-  onTokenSelect: (token: Token) => void
-  selectedToken?: Token | null
-}
-
-export const RecentTokens: React.FC<RecentTokensProps> = ({
-  recentTokens,
-  onTokenSelect,
-  selectedToken,
-}) => {
-  if (recentTokens.length === 0) {
-    return null
-  }
-
-  const isTokenSelected = (token: Token) => {
-    if (!selectedToken) return false
-    return (
-      addressEqual(token.contractAddress, selectedToken.contractAddress) &&
-      (token.chainId || 0) === (selectedToken.chainId || 0)
-    )
-  }
-
-  return (
-    <div className="mb-0">
-      <h3 className="text-[10px] font-medium text-gray-500 dark:text-gray-500 text-left mb-1">
-        Recently Used
-      </h3>
-      <div className="flex gap-1 overflow-x-auto trails-scrollbar">
-        {recentTokens.map((token) => {
-          const isSelected = isTokenSelected(token)
-
-          return (
-            <button
-              key={`${token.chainId || 0}-${token.contractAddress}`}
-              type="button"
-              onClick={() => onTokenSelect(token)}
-              title={`${token.symbol} - ${token.name}`}
-              className={`flex-shrink-0 p-1 border-solid trails-border-radius-button transition-colors cursor-pointer ${
-                isSelected
-                  ? "bg-blue-100 dark:bg-blue-900/30 border-2 border-blue-500"
-                  : "trails-bg-secondary border-2 border-transparent hover:trails-hover-bg"
-              }`}
-            >
-              <div className="rounded-full flex items-center justify-center bg-white dark:bg-gray-600">
-                <TokenImage
-                  symbol={token.symbol}
-                  imageUrl={token.imageUrl}
-                  chainId={token.chainId || 0}
-                  size={28}
-                />
-              </div>
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-export default RecentTokens

package/src/widget/components/RecipientSelectorButton.tsx

@@ -1,50 +0,0 @@
-import { ChevronRight } from "lucide-react"
-import type React from "react"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { AddressOrEnsName } from "./AddressOrEnsName.js"
-import { AddressWalletIcon } from "./AddressWalletIcon.js"
-
-export const RecipientSelectorButton: React.FC<{
-  selectedRecipient: string | null
-}> = ({ selectedRecipient }) => {
-  const { navigate, screen } = useViewManager()
-
-  const handleClick = () => {
-    navigate("recipients", { backTarget: screen })
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      className="flex items-center space-x-2 text-blue-500 hover:text-blue-600 transition-colors cursor-pointer bg-transparent border-none p-0"
-      title={
-        selectedRecipient
-          ? `Selected: ${selectedRecipient}`
-          : "Select recipient"
-      }
-    >
-      {selectedRecipient ? (
-        <>
-          <div className="flex items-center mr-1">
-            <AddressWalletIcon
-              size={20}
-              walletAddress={selectedRecipient as `0x${string}`}
-            />
-          </div>
-          <AddressOrEnsName
-            address={selectedRecipient}
-            startChars={4}
-            endChars={4}
-            className="text-sm font-medium m-0"
-          />
-        </>
-      ) : (
-        <span className="text-sm font-medium m-0">Select Recipient</span>
-      )}
-      <ChevronRight className="w-4 h-4 m-0" />
-    </button>
-  )
-}
-
-export default RecipientSelectorButton

package/src/widget/components/Recipients.tsx

@@ -1,412 +0,0 @@
-import { Plus, X } from "lucide-react"
-import type React from "react"
-import { useCallback, useEffect, useState } from "react"
-import { isAddress } from "viem"
-import { useAccount, useConnections } from "wagmi"
-import { useResolveEnsAddress, useResolveEnsName } from "../../ens.js"
-import { logger } from "../../logger.js"
-import { addressEqual, truncateAddress } from "../../utils/address.js"
-import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
-import {
-  useViewManager,
-  type Mode,
-  type Screen,
-} from "../hooks/useViewManager.js"
-import { useRecipients, type RecentRecipient } from "../hooks/useRecipients.js"
-import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
-import { AddressOrEnsName } from "./AddressOrEnsName.js"
-import { AddressWalletIcon } from "./AddressWalletIcon.js"
-import { CopyButton } from "./CopyButton.js"
-import { EnsAvatar } from "./ENSAvatar.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { SimpleRecipientInputScreen } from "./SimpleRecipientInputScreen.js"
-
-/** Renders primary label (ENS name or truncated address), optional connector name when no ENS, and optional children (e.g. CopyButton) on the first line. */
-const ConnectedWalletLabel: React.FC<{
-  address: string
-  connectorName?: string | null
-  children?: React.ReactNode
-}> = ({ address, connectorName, children }) => {
-  return (
-    <div className="flex flex-col min-w-0 flex-1">
-      <div className="flex items-center space-x-1">
-        <AddressOrEnsName
-          address={address}
-          className="text-sm font-medium trails-text-primary"
-        />
-        {children}
-      </div>
-      {connectorName && (
-        <div className="text-xs text-gray-400 truncate">{connectorName}</div>
-      )}
-    </div>
-  )
-}
-
-interface RecipientsProps {
-  onBack?: () => void
-  selectedRecipient?: string
-  onRecipientSelect?: (address: string) => void
-}
-
-type RecipientReturnScreen = Exclude<Screen, "recipients">
-type RecipientFallbackScreen = Extract<
-  RecipientReturnScreen,
-  "send-form" | "fund-form" | "earn" | "swap" | "withdraw"
->
-
-const isRecipientReturnScreen = (
-  screen: Screen | null,
-): screen is RecipientReturnScreen => {
-  return screen !== null && screen !== "recipients"
-}
-
-const fallbackRecipientTargetByMode = {
-  pay: "send-form",
-  fund: "fund-form",
-  earn: "earn",
-  swap: "swap",
-  withdraw: "withdraw",
-} satisfies Record<Mode, RecipientFallbackScreen>
-
-export const Recipients: React.FC<RecipientsProps> = ({
-  onBack,
-  selectedRecipient = "",
-  onRecipientSelect,
-}) => {
-  const { navigate, mode, backScreen } = useViewManager()
-  const { setSelectedRecipient } = useSelectedRecipient()
-  const { recentRecipients, addRecentRecipient, clearRecentRecipients } =
-    useRecipients()
-  const [recipientInput, setRecipientInput] = useState(selectedRecipient)
-  const [isValidAddress, setIsValidAddress] = useState(false)
-
-  // Connected wallets functionality
-  const { address } = useAccount()
-  const connections = useConnections()
-  const { wallets: allWallets } = useWallets()
-  const isWithdrawBack = backScreen === "withdraw"
-
-  // Use wagmi ENS resolution for both directions
-  const trimmedInput = recipientInput.trim()
-
-  // Forward resolution: ENS name → address
-  const { ensAddress, isLoading: isLoadingEnsAddress } = useResolveEnsAddress({
-    textInput: trimmedInput,
-  })
-
-  // Reverse resolution: address → ENS name
-  const { ensName, isLoading: isLoadingEnsName } = useResolveEnsName({
-    address: isAddress(trimmedInput) ? trimmedInput : "",
-  })
-
-  const isLoadingEns = isLoadingEnsAddress || isLoadingEnsName
-
-  // Get all connected wallets with their details
-  const getConnectedWallets = () => {
-    const walletMap = new Map()
-
-    connections.forEach((connection) => {
-      // Process each account in the connection
-      if (!connection || !connection.accounts) return
-      connection.accounts.forEach((account) => {
-        if (account && !walletMap.has(account)) {
-          const walletId = wagmiConnectorToWalletId(connection.connector)
-          const walletConfig = allWallets.find(
-            (wallet) => wallet.id === walletId,
-          )
-
-          walletMap.set(account, {
-            address: account,
-            connector: connection.connector,
-            walletConfig,
-            walletId,
-            isActive: account === address,
-          })
-        }
-      })
-    })
-
-    return Array.from(walletMap.values())
-  }
-
-  const connectedWallets = getConnectedWallets()
-
-  // Validate address and handle ENS resolution
-  useEffect(() => {
-    const validateAddress = async () => {
-      if (!recipientInput || recipientInput.trim() === "") {
-        setIsValidAddress(false)
-        return
-      }
-
-      const trimmedInput = recipientInput.trim()
-
-      // Check if it's a valid hex address
-      if (isAddress(trimmedInput)) {
-        setIsValidAddress(true)
-        // Add to recent recipients with reverse ENS resolution if available
-        if (ensName) {
-          await addRecentRecipient(trimmedInput, trimmedInput, ensName)
-        } else {
-          await addRecentRecipient(trimmedInput, trimmedInput)
-        }
-        return
-      }
-
-      // Check if it looks like an ENS name
-      if (trimmedInput.includes(".") && trimmedInput.endsWith(".eth")) {
-        // ENS validation will be handled by the wagmi hook
-        // If we have a resolved address, it's valid
-        if (ensAddress) {
-          setIsValidAddress(true)
-          await addRecentRecipient(trimmedInput, ensAddress, trimmedInput)
-        } else if (!isLoadingEns) {
-          // Not loading and no address means resolution failed or not implemented
-          setIsValidAddress(false)
-        }
-      } else {
-        setIsValidAddress(false)
-      }
-    }
-
-    const timeoutId = setTimeout(validateAddress, 300) // Debounce validation
-    return () => clearTimeout(timeoutId)
-  }, [recipientInput, ensAddress, ensName, isLoadingEns, addRecentRecipient])
-
-  const handleInputChange = useCallback((value: string) => {
-    setRecipientInput(value)
-  }, [])
-
-  const handleUseConnected = useCallback(() => {
-    if (address) {
-      setRecipientInput(address)
-    }
-  }, [address])
-
-  // Determine the screen to navigate to after selection
-  const getTargetScreen = useCallback(() => {
-    if (isRecipientReturnScreen(backScreen)) {
-      return backScreen
-    }
-
-    return fallbackRecipientTargetByMode[mode]
-  }, [mode, backScreen])
-
-  // Handle recent recipient selection
-  const handleRecentRecipientSelect = useCallback(
-    (recipient: RecentRecipient) => {
-      logger.console.log("[trails-sdk] Selected recent recipient:", recipient)
-      setSelectedRecipient(recipient.address)
-      onRecipientSelect?.(recipient.address)
-      navigate(getTargetScreen())
-    },
-    [setSelectedRecipient, onRecipientSelect, navigate, getTargetScreen],
-  )
-
-  // Handle connected wallet selection
-  const handleConnectedWalletSelect = useCallback(
-    (walletAddress: string) => {
-      logger.console.log(
-        "[trails-sdk] Selected connected wallet:",
-        walletAddress,
-      )
-      setSelectedRecipient(walletAddress)
-      onRecipientSelect?.(walletAddress)
-      navigate(getTargetScreen())
-    },
-    [setSelectedRecipient, onRecipientSelect, navigate, getTargetScreen],
-  )
-
-  const getValidationMessage = () => {
-    if (!recipientInput || recipientInput.trim() === "") {
-      return null
-    }
-
-    if (isLoadingEns) {
-      return "Resolving ENS name..."
-    }
-
-    return null
-  }
-
-  const getValidationColor = () => {
-    if (isLoadingEns) {
-      return "text-blue-500"
-    }
-    if (isValidAddress) {
-      return "text-green-500"
-    }
-    if (recipientInput && recipientInput.trim() !== "") {
-      return "text-red-500"
-    }
-    return "text-gray-500"
-  }
-
-  return (
-    <div className="space-y-4">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent={
-          isWithdrawBack ? "Withdraw to" : "Select recipient address"
-        }
-        headerContentAlign="center"
-      />
-
-      <div className="space-y-4">
-        {/* Connected Wallets + Add new wallet - same vertical spacing between rows */}
-        {!recipientInput.trim() && !isWithdrawBack && (
-          <div className="space-y-2">
-            {connectedWallets.map((wallet) => (
-              <button
-                key={wallet.address}
-                type="button"
-                className="w-full text-left px-4 py-2 text-sm flex items-center cursor-pointer transition-colors rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700"
-                onClick={() => handleConnectedWalletSelect(wallet.address)}
-              >
-                <div className="flex items-center gap-3">
-                  <AddressWalletIcon
-                    size={30}
-                    walletAddress={wallet.address as `0x${string}`}
-                  />
-                  <ConnectedWalletLabel
-                    address={wallet.address}
-                    connectorName={wallet.walletConfig?.name}
-                  >
-                    <CopyButton
-                      text={wallet.address}
-                      stopPropagation
-                      className="p-0.5 z-10 relative"
-                      size="sm"
-                      as="span"
-                    />
-                  </ConnectedWalletLabel>
-                </div>
-              </button>
-            ))}
-            <button
-              type="button"
-              onClick={() => navigate("connect")}
-              className="w-full text-left px-4 py-2 text-sm flex items-center justify-between cursor-pointer transition-colors rounded-xl trails-text-primary trails-hover-bg"
-            >
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 shrink-0 flex items-center justify-center">
-                  <Plus className="w-8 h-8 text-gray-600 dark:text-gray-400" />
-                </div>
-                <span className="font-medium">Add new wallet</span>
-              </div>
-            </button>
-          </div>
-        )}
-
-        {/* Separator */}
-        {!recipientInput.trim() && !isWithdrawBack && (
-          <div className="border-b border-gray-200 dark:border-gray-700" />
-        )}
-
-        {/* Input Section - at the bottom */}
-        <div className="space-y-2">
-          {isWithdrawBack ? (
-            <SimpleRecipientInputScreen
-              recipientInput={recipientInput}
-              onChange={handleInputChange}
-              validationMessage={getValidationMessage()}
-              validationColor={getValidationColor()}
-              onUseConnected={handleUseConnected}
-              canUseConnected={Boolean(address)}
-            />
-          ) : (
-            <>
-              <input
-                type="text"
-                value={recipientInput}
-                onChange={(e) => handleInputChange(e.target.value)}
-                placeholder="Or input recipient address"
-                className="w-full px-4 py-4 text-sm rounded-xl border trails-border-primary bg-transparent trails-text-primary placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-grey-500 focus:border-transparent"
-              />
-
-              {/* Validation Message */}
-              {getValidationMessage() && (
-                <p className={`text-xs ${getValidationColor()} text-left`}>
-                  {getValidationMessage()}
-                </p>
-              )}
-            </>
-          )}
-        </div>
-
-        {/* Recent Recipients - show whenever there are recent recipients */}
-        {recentRecipients.length > 0 && (
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <div className="text-sm font-medium text-gray-900 dark:text-gray-100 text-left">
-                Recent recipient addresses
-              </div>
-              <button
-                type="button"
-                onClick={clearRecentRecipients}
-                className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors cursor-pointer"
-              >
-                Clear
-                <X className="w-3 h-3" />
-              </button>
-            </div>
-            <div className="trails-border-radius-container">
-              {recentRecipients.map((recipient) => {
-                const searchQuery = recipientInput.trim()
-                const isHighlighted =
-                  searchQuery &&
-                  isAddress(searchQuery) &&
-                  addressEqual(recipient.address, searchQuery)
-
-                return (
-                  <div key={recipient.address}>
-                    <button
-                      type="button"
-                      className={`w-full text-left px-4 py-3 text-sm flex items-center justify-between cursor-pointer transition-colors rounded-xl ${
-                        isHighlighted
-                          ? "bg-gray-100 dark:bg-gray-700"
-                          : "trails-text-primary trails-hover-bg"
-                      }`}
-                      onClick={() => handleRecentRecipientSelect(recipient)}
-                      aria-label={`Select recipient ${recipient.ensName || recipient.address}`}
-                    >
-                      <div className="flex items-center gap-3">
-                        <EnsAvatar
-                          address={recipient.address}
-                          size={28}
-                          className="shrink-0"
-                        />
-                        <div className="text-left">
-                          <div className="flex items-center space-x-1">
-                            <span className="text-sm font-medium">
-                              {truncateAddress(recipient.address, 6, 4)}
-                            </span>
-                            <CopyButton
-                              text={recipient.address}
-                              stopPropagation
-                              className="p-0.5 z-10 relative"
-                              size="sm"
-                              as="span"
-                            />
-                          </div>
-                          {recipient.ensName && (
-                            <div className="text-xs text-gray-500 dark:text-gray-400">
-                              {recipient.ensName}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    </button>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default Recipients