0xtrails 0.13.2 → 0.15.0

package/src/widget/components/AccountIntentTransactionHistoryButton.tsx

@@ -1,34 +0,0 @@
-import { HistoryIcon } from "lucide-react"
-import type React from "react"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useClickTracking } from "../hooks/useClickTracking.js"
-
-export const AccountIntentTransactionHistoryButton: React.FC = () => {
-  const { screen, navigate } = useViewManager()
-  const { trackClick } = useClickTracking()
-  // NOTE: Disable for now untill we find a better way to track this
-  // const { count: executingCount } = useExecutingIntentsCount()
-
-  return (
-    <button
-      type="button"
-      onClick={() => {
-        trackClick({
-          component: "AccountIntentTransactionHistoryButton",
-          action: "view_transaction_history",
-          metadata: {
-            fromScreen: screen,
-          },
-        })
-        navigate("account-history", { backTarget: screen })
-      }}
-      className="relative 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-50 dark:hover:bg-gray-600"
-      title={"View transaction history"}
-    >
-      <HistoryIcon className="w-4 h-4" />
-      {/* <ExecutingIntentsBadge count={executingCount} /> */}
-    </button>
-  )
-}
-
-export default AccountIntentTransactionHistoryButton

package/src/widget/components/AccountSettings.tsx

@@ -1,168 +0,0 @@
-import {
-  LogOut,
-  User,
-  ChevronRight,
-  History,
-  HelpCircle,
-  CreditCard,
-} from "lucide-react"
-import type React from "react"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import type { Screen, Mode } from "../hooks/useViewManager.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
-import { ConnectedWallets } from "./ConnectedWallets.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import Tooltip from "./Tooltip.js"
-
-interface SettingsAction {
-  label: string
-  screen: Screen
-  icon: React.ComponentType<{ className?: string }>
-  disabled: boolean
-  subtitle: string | undefined
-  /** When set, overrideMode is called before navigating and backTarget is set to account-settings */
-  modeOverride?: Mode
-}
-
-const ACTIONS: SettingsAction[] = [
-  {
-    label: "Buy Crypto",
-    screen: "fund-form",
-    icon: CreditCard,
-    disabled: false,
-    subtitle: undefined,
-    modeOverride: "fund",
-  },
-  {
-    label: "History",
-    screen: "account-history",
-    icon: History,
-    disabled: false,
-    subtitle: undefined,
-  },
-  {
-    label: "User preferences",
-    screen: "user-preferences",
-    icon: User,
-    disabled: false,
-    subtitle: undefined,
-  },
-  {
-    label: "Disconnect",
-    screen: "disconnect",
-    icon: LogOut,
-    disabled: false,
-    subtitle: undefined,
-  },
-]
-
-interface AccountSettingsProps {
-  onBack?: () => void
-}
-
-const onHelp = () => {
-  window.open("https://support.trails.build/en/", "_blank")
-}
-
-export const AccountSettings: React.FC<AccountSettingsProps> = ({ onBack }) => {
-  const { hideDisconnect, decoupleWagmi, fundOptions } = useWidgetProps()
-  const { overrideMode, navigate } = useViewManager()
-  const { setSelectedFundMethod, setPaymentMethod } = useSelectedFundMethod()
-
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        headerContent="Settings"
-        headerContentAlign="left"
-        onBack={onBack}
-        rightSideContent={
-          <Tooltip message="Get help">
-            <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 className="flex-1">
-        <div className="flex flex-col gap-1">
-          {/* Connected Wallets Section */}
-
-          <ConnectedWallets
-            showConnectNewWallet={true}
-            showDisconnect={true}
-            backScreen="account-settings"
-            hiddenWallets={(fundOptions?.hideWallets ?? []) as string[]}
-          />
-
-          {/* Divider between wallet section and settings actions */}
-          <div className="my-3 border-t border-gray-200 dark:border-gray-700"></div>
-
-          {/* Actions - No border container, no divider lines */}
-          <div className="flex flex-col gap-1">
-            {ACTIONS.map((action) => {
-              if (action.disabled) return null
-              // Hide disconnect action if hideDisconnect is true
-              if (
-                (hideDisconnect || decoupleWagmi) &&
-                action.screen === "disconnect"
-              )
-                return null
-
-              const IconComponent = action.icon
-
-              return (
-                <button
-                  key={action.screen}
-                  type="button"
-                  onClick={() => {
-                    if (action.label === "Buy Crypto") {
-                      setSelectedFundMethod("onramp-meld")
-                      setPaymentMethod({
-                        id: "CREDIT_DEBIT_CARD",
-                        name: "Credit/Debit Card",
-                      })
-                    }
-
-                    if (action.modeOverride) {
-                      overrideMode(action.modeOverride)
-                      navigate(action.screen, {
-                        backTarget: "account-settings",
-                      })
-                    } else {
-                      navigate(action.screen)
-                    }
-                  }}
-                  className="w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
-                >
-                  <div className="flex items-center gap-3">
-                    <IconComponent className="w-5 h-5 text-gray-700 dark:text-gray-200" />
-                    <div>
-                      <span className="text-sm font-medium">
-                        {action.label}
-                      </span>
-                      {action.subtitle && (
-                        <p className="text-xs text-gray-500 dark:text-gray-400">
-                          {action.subtitle}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                  <ChevronRight className="w-5 h-5 text-gray-400" />
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default AccountSettings

package/src/widget/components/AddressOrEnsName.tsx

@@ -1,24 +0,0 @@
-import type React from "react"
-import { useResolveEns } from "../../ens.js"
-import { truncateAddress } from "../../utils/address.js"
-
-interface AddressOrEnsNameProps {
-  address: string
-  startChars?: number
-  endChars?: number
-  className?: string
-}
-
-/**
- * Displays ENS name when available for the address, otherwise truncated address.
- */
-export const AddressOrEnsName: React.FC<AddressOrEnsNameProps> = ({
-  address,
-  startChars = 6,
-  endChars = 4,
-  className,
-}) => {
-  const { ensName } = useResolveEns({ address })
-  const display = ensName || truncateAddress(address, startChars, endChars)
-  return <span className={className}>{display}</span>
-}

package/src/widget/components/AddressWalletIcon.tsx

@@ -1,49 +0,0 @@
-import { useAccount } from "wagmi"
-import { useConnectedAddressWalletIcon } from "../hooks/useAddressWalletIcon.js"
-import { useResolveEns } from "../../ens.js"
-import { Identicon } from "./Identicon.js"
-
-export type AddressWalletIconProps = {
-  walletAddress: `0x${string}`
-  size?: number | undefined
-  className?: string
-  showWalletConnectorIcon?: boolean
-}
-
-export const AddressWalletIcon = ({
-  walletAddress,
-  size = 16,
-  className,
-  showWalletConnectorIcon,
-}: AddressWalletIconProps) => {
-  const { connector } = useAccount()
-  const { ensAvatar, ensName } = useResolveEns({ address: walletAddress })
-  const addressWalletIcon = useConnectedAddressWalletIcon(
-    walletAddress,
-    connector,
-  )
-
-  if (ensAvatar && !showWalletConnectorIcon) {
-    return (
-      <img
-        src={ensAvatar}
-        alt={ensName || "Wallet"}
-        className={`shrink-0 rounded-full object-cover ${className ?? ""}`}
-        style={{ width: size, height: size }}
-      />
-    )
-  }
-
-  if (addressWalletIcon) {
-    return (
-      <img
-        src={addressWalletIcon}
-        alt="Wallet icon"
-        className={`shrink-0 ${className ?? ""}`}
-        style={{ width: size, height: size }}
-      />
-    )
-  }
-
-  return <Identicon value={walletAddress} size={size} className={className} />
-}

package/src/widget/components/AllChainsIcon.tsx

@@ -1,54 +0,0 @@
-import type React from "react"
-import { ChainImage } from "./ChainImage.js"
-
-interface AllChainsIconProps {
-  size?: number
-  className?: string
-  chainIds?: number[]
-}
-
-export const AllChainsIcon: React.FC<AllChainsIconProps> = ({
-  size = 20,
-  className = "",
-  chainIds,
-}) => {
-  // Default chain IDs for the 4 main chains
-  const defaultChains = [
-    1, // Ethereum Mainnet
-    8453, // Base
-    42161, // Arbitrum
-    137, // Polygon
-  ]
-
-  // Use provided chainIds if there are 4 or more, otherwise use defaults
-  const chains =
-    chainIds && chainIds.length >= 4 ? chainIds.slice(0, 4) : defaultChains
-
-  // Calculate individual chain icon size (half of the container size)
-  const chainIconSize = Math.max(size / 2 - 1, 8) // Minimum 8px, with 1px gap
-
-  return (
-    <div
-      className={`grid grid-cols-2 gap-0.5 ${className}`}
-      style={{
-        width: size,
-        height: size,
-      }}
-    >
-      {chains.map((chainId) => (
-        <div
-          key={chainId}
-          className="flex items-center justify-center"
-          style={{
-            width: chainIconSize,
-            height: chainIconSize,
-          }}
-        >
-          <ChainImage chainId={chainId} size={chainIconSize} />
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default AllChainsIcon

package/src/widget/components/ChainFilterDropdown.tsx

@@ -1,220 +0,0 @@
-import { ChevronDown } from "lucide-react"
-import type React from "react"
-import { useEffect, useMemo, useRef, useState } from "react"
-import { getChainInfo, type ChainListItem } from "../../chains.js"
-import { AllChainsIcon } from "./AllChainsIcon.js"
-import { ChainImage } from "./ChainImage.js"
-
-export interface ChainFilterDropdownProps {
-  chains: ChainListItem[]
-  selectedChainId: number | null
-  onChainSelect: (chainId: number | null) => void
-  className?: string
-  buttonClassName?: string
-  dropdownClassName?: string
-  compactMode?: boolean
-  nestedMode?: boolean
-  chainListScreen?: boolean
-  onNavigateToChainList?: () => void
-}
-
-export const ChainFilterDropdown: React.FC<ChainFilterDropdownProps> = ({
-  chains,
-  selectedChainId,
-  onChainSelect,
-  className = "",
-  buttonClassName = "",
-  dropdownClassName = "",
-  compactMode = false,
-  nestedMode = false,
-  chainListScreen = false,
-  onNavigateToChainList,
-}) => {
-  const dropdownRef = useRef<HTMLDivElement>(null)
-  const chainFilterInputRef = useRef<HTMLInputElement>(null)
-  const [isOpen, setIsOpen] = useState(false)
-  const [filterQuery, setFilterQuery] = useState("")
-
-  // Filter chains based on search query
-  const filteredChains = useMemo(() => {
-    if (!filterQuery.trim()) {
-      return chains
-    }
-    const query = filterQuery.trim().toLowerCase()
-    return chains.filter(
-      (chain) =>
-        chain.name.toLowerCase().includes(query) ||
-        chain.chainId.toString().includes(query),
-    )
-  }, [chains, filterQuery])
-
-  // Focus chain filter input when dropdown opens
-  useEffect(() => {
-    if (isOpen && chainFilterInputRef.current) {
-      setTimeout(() => {
-        chainFilterInputRef.current?.focus()
-      }, 100)
-    }
-  }, [isOpen])
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false)
-        setFilterQuery("")
-      }
-    }
-
-    document.addEventListener("mousedown", handleClickOutside)
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside)
-    }
-  }, [])
-
-  const handleChainSelect = (chainId: number | null) => {
-    onChainSelect(chainId)
-    setIsOpen(false)
-    setFilterQuery("")
-  }
-
-  const handleButtonClick = () => {
-    if (chainListScreen && onNavigateToChainList) {
-      onNavigateToChainList()
-    } else {
-      setIsOpen(!isOpen)
-    }
-  }
-
-  // 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}>
-      <button
-        type="button"
-        onMouseDown={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-          handleButtonClick()
-        }}
-        className={`h-full px-3 flex items-center gap-2 cursor-pointer transition-colors ${buttonClassName}`}
-        title="Select a chain"
-      >
-        {selectedChain ? (
-          <ChainImage chainId={selectedChain.chainId} size={20} />
-        ) : (
-          <AllChainsIcon
-            size={20}
-            chainIds={chains.map((chain) => chain.chainId)}
-          />
-        )}
-        <ChevronDown
-          className={`h-5 w-5 text-gray-400 transition-all duration-200 ${
-            isOpen ? "rotate-180" : ""
-          }`}
-        />
-      </button>
-
-      {/* Only show dropdown if not using chainListScreen mode */}
-      {!chainListScreen && isOpen && (
-        <div
-          className={`absolute right-0 top-full mt-1 min-w-[280px] trails-bg-secondary trails-border trails-border-radius-list token-list-border shadow-lg z-50 ${nestedMode ? "max-h-80" : compactMode ? "max-h-48" : "max-h-[400px]"} ${dropdownClassName}`}
-        >
-          {/* Chain Filter Input - Static at top */}
-          <div className="p-2 border-b border-gray-200 dark:border-gray-700">
-            <input
-              ref={chainFilterInputRef}
-              type="text"
-              value={filterQuery}
-              onChange={(e) => setFilterQuery(e.target.value)}
-              placeholder="Search chains"
-              className="w-full px-3 py-2 text-sm border border-solid trails-border-radius-input focus:ring-2 focus:ring-blue-500 focus:border-blue-500 trails-input"
-              onMouseDown={(e) => e.stopPropagation()}
-            />
-          </div>
-
-          {/* Scrollable Chain List */}
-          <div
-            className={`p-2 ${nestedMode ? "max-h-52" : compactMode ? "max-h-32" : "max-h-[320px]"} overflow-y-auto trails-scrollbar`}
-          >
-            {/* All option */}
-            <button
-              type="button"
-              onMouseDown={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                handleChainSelect(null)
-              }}
-              className={`w-full flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors rounded text-left ${
-                selectedChainId === null ? "bg-blue-50 dark:bg-blue-900/20" : ""
-              }`}
-              title="Show tokens from all chains"
-            >
-              <div className="w-6 h-6 rounded-full bg-gray-400 flex items-center justify-center">
-                <span className="text-white text-xs font-bold">A</span>
-              </div>
-              <span className="text-sm font-medium">All Chains</span>
-            </button>
-
-            {/* Chain options */}
-            {filteredChains.map((chain) => (
-              <button
-                key={chain.chainId}
-                type="button"
-                onMouseDown={(e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  handleChainSelect(chain.chainId)
-                }}
-                className={`w-full flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors rounded text-left ${
-                  selectedChainId === chain.chainId
-                    ? "bg-blue-50 dark:bg-blue-900/20"
-                    : ""
-                }`}
-                title={`${chain.name} (Chain ID: ${chain.chainId})`}
-              >
-                <ChainImage chainId={chain.chainId} size={24} />
-                <span className="text-sm font-medium">{chain.name}</span>
-              </button>
-            ))}
-
-            {filteredChains.length === 0 && filterQuery.trim() && (
-              <div className="text-center py-4">
-                <p className="text-sm text-gray-500 dark:text-gray-400">
-                  No chains found matching "{filterQuery}"
-                </p>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default ChainFilterDropdown

package/src/widget/components/ChainImage.tsx

@@ -1,40 +0,0 @@
-import type React from "react"
-import { getChainInfo, getChainImageUrl } from "../../chains.js"
-
-interface TokenImageProps {
-  chainId?: number
-  size?: number
-}
-
-export const ChainImage: React.FC<TokenImageProps> = ({
-  chainId,
-  size = 24,
-}) => {
-  const chainInfo = chainId ? getChainInfo(chainId) : null
-  const chainImageUrl = chainId ? getChainImageUrl(chainId) : ""
-  const chainName = chainInfo?.name || (chainId ? `Chain ${chainId}` : "")
-  const title = chainId ? `${chainName} (Chain ID: ${chainId})` : ""
-
-  if (!chainId) return null
-
-  return (
-    <div
-      className="rounded-full flex items-center justify-center text-sm relative bg-black-100 bg-opacity-90 overflow-hidden"
-      style={{
-        width: size,
-        height: size,
-      }}
-      title={title}
-    >
-      <div className="flex items-center justify-center overflow-hidden shrink-0 rounded-full absolute w-full h-full text-white bg-white dark:bg-black-100">
-        <img
-          className="max-w-full max-h-full object-cover w-full"
-          src={chainImageUrl}
-          alt={title}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default ChainImage