0xtrails 0.13.2 → 0.14.0

package/src/widget/components/FundMethods.tsx

@@ -1,423 +0,0 @@
-import type React from "react"
-import { ChevronRight, CreditCard, Wallet, ZapIcon } from "lucide-react"
-import { wagmiConnectorToWalletId } from "@0xtrails/wallet-registry"
-import { useAccount, useConnections, useSwitchAccount } from "wagmi"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useWalletConnectionContext } from "../hooks/useWalletConnectionContext.js"
-import { useWallets } from "../../wallets.js"
-import ExchangeIcon from "../assets/Exchange-icon-black.svg"
-import WalletChange from "../assets/WalletChange-black.svg"
-import { truncateAddress } from "../../utils/address.js"
-import { useResolveEns } from "../../ens.js"
-import { AddressWalletIcon } from "./AddressWalletIcon.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import type { FundMethod } from "../../transactionIntent/types.js"
-import type { FundMethodListOption } from "../widget.js"
-
-export interface FundMethodsProps {
-  headerContent?: string
-  onBack?: () => void
-  onramp?: any // The onramp prop from the widget
-  onSelectOnrampMeld: () => void
-  onSelectOnrampExchange: () => void
-  onSelectWalletConnect: () => void
-  onSelectConnectedAccount: () => void
-  onSelectTransferCrypto: () => void
-}
-
-const disabledClassname =
-  "w-full text-left px-4 py-3 flex items-center justify-between cursor-not-allowed transition-colors trails-hover-bg rounded-xl opacity-50"
-
-const FundMethods: React.FC<FundMethodsProps> = ({
-  headerContent,
-  onramp,
-  onSelectTransferCrypto,
-  onSelectOnrampMeld,
-  onSelectOnrampExchange,
-  onSelectConnectedAccount,
-}) => {
-  const { address, connector } = useAccount()
-  const connections = useConnections()
-  const { switchAccount } = useSwitchAccount()
-  const { navigate, mode } = useViewManager()
-  const { selectedFundMethod, setSelectedFundMethod, setPaymentMethod } =
-    useSelectedFundMethod()
-  const { setConnectionContext } = useWalletConnectionContext()
-  const { wallets: allWallets } = useWallets()
-  const { fundOptions } = useWidgetProps()
-  const hideWallets = fundOptions?.hideWallets ?? []
-  const fundMethodsList = fundOptions?.fundMethodsList
-  const hideUnlistedFundMethods = fundOptions?.hideUnlistedFundMethods ?? false
-
-  // Check if onramp is enabled based on mode
-  const isOnrampEnabled = mode === "swap" || mode === "fund"
-
-  const { ensName } = useResolveEns({
-    address: address ?? "",
-  })
-
-  // Get all connected wallets with their details
-  const getConnectedWallets = () => {
-    const walletMap = new Map()
-
-    connections.forEach((connection) => {
-      // Check if connection and accounts exist before processing
-      if (!connection || !connection.accounts) return
-
-      // Process each account in the connection
-      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:
-              connection.connector.id === connector?.id && account === address,
-          })
-        }
-      })
-    })
-
-    return Array.from(walletMap.values())
-  }
-
-  const connectedWallets = getConnectedWallets()
-
-  const eligibleConnectedWallets = connectedWallets.filter((wallet) => {
-    if (
-      hideWallets.length > 0 &&
-      hideWallets.some(
-        (addr) => addr.toLowerCase() === wallet.address.toLowerCase(),
-      )
-    ) {
-      return false
-    }
-    return true
-  })
-
-  const activeConnection =
-    eligibleConnectedWallets.find((wallet) => wallet.isActive) ||
-    eligibleConnectedWallets[0]
-
-  const showWalletInline = !!activeConnection
-
-  const fundMethodAliases: Record<FundMethodListOption, FundMethod> = {
-    "connected-wallet": "wallet",
-    "crypto-transfer": "direct-transfer",
-    "cc-onramp": "onramp-meld",
-    exchange: "onramp-mesh",
-    "exchange-onramp": "onramp-mesh",
-  }
-
-  const defaultFundMethodsOrder: FundMethod[] = [
-    "wallet",
-    "onramp-meld",
-    "direct-transfer",
-    "onramp-mesh",
-  ]
-
-  const validFundMethods = new Set<FundMethod>([
-    "wallet",
-    "direct-transfer",
-    "onramp-mesh",
-    "onramp-meld",
-  ])
-
-  const mappedConfiguredOrder =
-    fundMethodsList?.map((method) => {
-      const key = method as FundMethodListOption
-      return fundMethodAliases[key]
-    }) ?? []
-
-  const listedInternalSet = new Set<FundMethod>(
-    mappedConfiguredOrder.filter((m): m is FundMethod =>
-      validFundMethods.has(m),
-    ),
-  )
-
-  // Empty list: always show all methods (ignore hideUnlistedFundMethods)
-  const orderedFundMethods: FundMethod[] = !fundMethodsList?.length
-    ? defaultFundMethodsOrder
-    : hideUnlistedFundMethods
-      ? Array.from(
-          new Set(
-            mappedConfiguredOrder.filter((method): method is FundMethod =>
-              validFundMethods.has(method),
-            ),
-          ),
-        )
-      : [
-          ...mappedConfiguredOrder.filter((m): m is FundMethod =>
-            validFundMethods.has(m),
-          ),
-          ...defaultFundMethodsOrder.filter((m) => !listedInternalSet.has(m)),
-        ]
-
-  const isUnlisted = (method: FundMethod): boolean =>
-    !hideUnlistedFundMethods &&
-    listedInternalSet.size > 0 &&
-    !listedInternalSet.has(method)
-
-  const displayMeshExchange = !!onramp
-
-  const renderFundMethod = (method: FundMethod) => {
-    const forceDisabled = isUnlisted(method)
-    if (method === "wallet") {
-      if (showWalletInline) {
-        // Inline row only shown when wallet has balance, so always selectable unless unlisted
-        const canSelectWallet = !forceDisabled
-        const rowDisabled = forceDisabled
-        return (
-          <div
-            key="wallet-inline"
-            onClick={
-              canSelectWallet
-                ? () => {
-                    setSelectedFundMethod("wallet")
-                    if (
-                      activeConnection &&
-                      activeConnection.address?.toLowerCase() !==
-                        address?.toLowerCase()
-                    ) {
-                      switchAccount({ connector: activeConnection.connector })
-                    }
-                    if (onSelectConnectedAccount) {
-                      onSelectConnectedAccount()
-                    }
-                  }
-                : undefined
-            }
-            onKeyDown={
-              canSelectWallet
-                ? (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault()
-                      setSelectedFundMethod("wallet")
-                      if (
-                        activeConnection &&
-                        activeConnection.address?.toLowerCase() !==
-                          address?.toLowerCase()
-                      ) {
-                        switchAccount({
-                          connector: activeConnection.connector,
-                        })
-                      }
-                      if (onSelectConnectedAccount) {
-                        onSelectConnectedAccount()
-                      }
-                    }
-                  }
-                : undefined
-            }
-            aria-disabled={!canSelectWallet}
-            className={`w-full text-left px-4 py-3 flex items-center justify-between transition-colors rounded-xl trails-hover-bg ${
-              rowDisabled
-                ? disabledClassname
-                : canSelectWallet
-                  ? `cursor-pointer ${
-                      selectedFundMethod === "wallet"
-                        ? "bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-600"
-                        : ""
-                    }`
-                  : "cursor-default"
-            }`}
-          >
-            <div className="flex items-center gap-3 flex-1">
-              <div className="flex items-center justify-center shrink-0">
-                <AddressWalletIcon
-                  size={30}
-                  walletAddress={activeConnection?.address as `0x${string}`}
-                />
-              </div>
-              <span className="text-sm font-medium">
-                {activeConnection?.address
-                  ? ensName ||
-                    `${truncateAddress(activeConnection.address)} wallet`
-                  : ""}{" "}
-              </span>
-              {!forceDisabled && (
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    navigate("select-funding-wallet")
-                  }}
-                  className="ml-auto mr-2 p-2 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer"
-                  title="Switch wallet"
-                >
-                  <img
-                    src={WalletChange}
-                    alt="Switch Wallet"
-                    className="w-5 h-5 dark:invert dark:brightness-150"
-                  />
-                </button>
-              )}
-            </div>
-            <ChevronRight className="w-5 h-5 text-gray-400 dark:text-white" />
-          </div>
-        )
-      }
-      return (
-        <button
-          key="wallet-button"
-          type="button"
-          disabled={forceDisabled}
-          onClick={
-            forceDisabled
-              ? undefined
-              : () => {
-                  if (!activeConnection) {
-                    setConnectionContext(
-                      "fund-method-selection",
-                      "fund-methods",
-                    )
-                  }
-                  navigate(
-                    activeConnection ? "select-funding-wallet" : "wallet-list",
-                  )
-                }
-          }
-          className={
-            forceDisabled
-              ? disabledClassname
-              : "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">
-            <Wallet className="w-8 h-8 text-gray-700 dark:text-gray-200" />
-            <span className="text-sm font-medium">Connect wallet</span>
-          </div>
-          <ChevronRight className="w-5 h-5 text-gray-400" />
-        </button>
-      )
-    }
-
-    if (method === "onramp-meld") {
-      if (!isOnrampEnabled) return null
-      const disabled = forceDisabled
-      return (
-        <button
-          key="onramp-meld"
-          type="button"
-          disabled={disabled}
-          onClick={
-            disabled
-              ? undefined
-              : () => {
-                  setSelectedFundMethod("onramp-meld")
-                  setPaymentMethod({
-                    id: "CREDIT_DEBIT_CARD",
-                    name: "Credit/Debit Card",
-                  })
-                  if (onSelectOnrampMeld) {
-                    onSelectOnrampMeld()
-                  }
-                }
-          }
-          className={
-            disabled
-              ? disabledClassname
-              : "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">
-            <CreditCard className="w-8 h-8 text-gray-700 dark:text-gray-100" />
-            <span className="text-sm font-medium">Credit/Debit Card</span>
-          </div>
-          <ChevronRight className="w-5 h-5 text-gray-400" />
-        </button>
-      )
-    }
-
-    if (method === "direct-transfer") {
-      const disabled = forceDisabled
-      return (
-        <button
-          key="direct-transfer"
-          type="button"
-          disabled={disabled}
-          onClick={disabled ? undefined : onSelectTransferCrypto}
-          className={
-            disabled
-              ? disabledClassname
-              : "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">
-            <ZapIcon className="w-8 h-8 text-gray-700 dark:text-gray-100" />
-            <span className="text-sm font-medium">Crypto transfer</span>
-          </div>
-          <ChevronRight className="w-5 h-5 text-gray-400" />
-        </button>
-      )
-    }
-
-    if (method === "onramp-mesh") {
-      if (mode === "pay") return null
-      const disabled = forceDisabled || !displayMeshExchange
-      return (
-        <button
-          key="onramp-mesh"
-          type="button"
-          disabled={disabled}
-          title={
-            displayMeshExchange && !forceDisabled ? undefined : "Coming soon"
-          }
-          onClick={
-            disabled
-              ? undefined
-              : () => {
-                  setSelectedFundMethod("onramp-mesh")
-                  if (onSelectOnrampExchange) {
-                    onSelectOnrampExchange()
-                  }
-                }
-          }
-          className={
-            disabled
-              ? "w-full text-left px-4 py-3 flex items-center justify-between cursor-not-allowed transition-colors trails-hover-bg rounded-xl opacity-50"
-              : "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">
-            <img
-              src={ExchangeIcon}
-              alt="Exchange"
-              className="w-8 h-8 dark:invert dark:brightness-150"
-            />
-            <span className="text-sm font-medium">From Exchange</span>
-          </div>
-          <ChevronRight className="w-5 h-5 text-gray-400" />
-        </button>
-      )
-    }
-
-    return null
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        headerContent={headerContent || "Choose a funding method"}
-        headerContentAlign="left"
-        rightSideContent={<div className="w-9" />}
-      />
-
-      <div className="flex-1">
-        <div className="flex flex-col gap-1">
-          {orderedFundMethods.map((method) => renderFundMethod(method))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default FundMethods

package/src/widget/components/FundWalletSelection.tsx

@@ -1,60 +0,0 @@
-import { useConnections, useSwitchAccount } from "wagmi"
-import { ConnectedWallets } from "./ConnectedWallets.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-
-export const FundWalletSelection: React.FC = () => {
-  const { navigate, backScreen, mode, goHome } = useViewManager()
-  const connections = useConnections()
-  const { switchAccount } = useSwitchAccount()
-  const { setSelectedFundMethod } = useSelectedFundMethod()
-  const { fundOptions, hideDisconnect, decoupleWagmi } = useWidgetProps()
-  const hideWallets = fundOptions?.hideWallets ?? []
-  const showDisconnect = !hideDisconnect && !decoupleWagmi
-
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        onBack={() => navigate(backScreen ?? "fund-methods")}
-        headerContent="Select a wallet"
-        headerContentAlign="left"
-        rightSideContent={<div className="w-9" />}
-      />
-      <div className="flex-1">
-        <div className="flex flex-col gap-1">
-          <ConnectedWallets
-            showConnectNewWallet={true}
-            showDisconnect={showDisconnect}
-            hiddenWallets={hideWallets as string[]}
-            disableZeroBalanceWallets={true}
-            showZeroBalanceMessage={true}
-            onWalletSelect={(walletAddress, walletConnector) => {
-              const connection = connections.find(
-                (conn) =>
-                  conn.accounts.includes(walletAddress as `0x${string}`) &&
-                  conn.connector.id === (walletConnector as { id: string }).id,
-              )
-
-              if (connection) {
-                switchAccount({
-                  connector: connection.connector,
-                })
-                // Set funding method to "wallet" since user selected a wallet
-                setSelectedFundMethod("wallet")
-
-                if (mode === "fund") {
-                  navigate("tokens")
-                } else {
-                  goHome()
-                }
-              }
-            }}
-            backScreen="fund-methods"
-          />
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/widget/components/FundingMethodSelectorButton.tsx

@@ -1,106 +0,0 @@
-import { ChevronRight, Send, ZapIcon } from "lucide-react"
-import type React from "react"
-import { useAccount, useConnections } from "wagmi"
-import { truncateAddress } from "../../utils/address.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
-import { AddressWalletIcon } from "./AddressWalletIcon.js"
-import { useResolveEns } from "../../ens.js"
-import type { Screen } from "../hooks/useViewManager.js"
-
-export const FundingMethodSelectorButton: React.FC<{
-  showWalletConnectorIcon?: boolean
-  sendToScreen?: {
-    screen: Screen
-    backScreen?: Screen
-  }
-}> = ({
-  showWalletConnectorIcon,
-  sendToScreen = { screen: "fund-methods" },
-}) => {
-  const connections = useConnections()
-  const { address } = useAccount()
-  const { navigate } = useViewManager()
-  const { selectedFundMethod, paymentMethod } = useSelectedFundMethod()
-
-  // Check if there are any connected accounts across all connectors
-  const isConnected = connections.length > 0
-  // Use the active account from useAccount(), fallback to first connection if needed
-  const activeAddress = address || connections[0]?.accounts[0]
-  const { ensName, ensAvatar } = useResolveEns({
-    address: activeAddress ?? "",
-  })
-  const hasEns = !!(ensName || ensAvatar)
-
-  const handleClick = () => {
-    if (isConnected && activeAddress) {
-      // If wallet is connected, go to fund methods
-      navigate(sendToScreen.screen, { backTarget: sendToScreen.backScreen })
-    } else {
-      // If no wallet connected, go to connect wallet
-      navigate("connect")
-    }
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      className="flex items-center space-x-2 text-polygon-500 hover:text-polygon-600 transition-colors cursor-pointer bg-transparent border-none p-0"
-      title={
-        isConnected && activeAddress
-          ? "Select funding method"
-          : "Connect wallet"
-      }
-    >
-      {isConnected && activeAddress ? (
-        selectedFundMethod === "direct-transfer" ? (
-          <>
-            <ZapIcon className="w-4 h-4 mr-1" />
-            <span className="text-sm font-medium m-0">Crypto Transfer</span>
-          </>
-        ) : selectedFundMethod === "onramp-mesh" ? (
-          <>
-            <Send className="w-4 h-4 mr-1" />
-            <span className="text-sm font-medium m-0">Exchange</span>
-          </>
-        ) : selectedFundMethod === "onramp-meld" ? (
-          <span className="text-sm font-medium m-0">
-            {paymentMethod.name || "Onramp"}
-          </span>
-        ) : hasEns ? (
-          <>
-            <div className="flex items-center mr-1">
-              <AddressWalletIcon
-                size={20}
-                walletAddress={activeAddress}
-                showWalletConnectorIcon={showWalletConnectorIcon}
-              />
-            </div>
-            <span className="text-sm font-medium m-0 truncate">
-              {ensName || truncateAddress(activeAddress, 4, 4)}
-            </span>
-          </>
-        ) : (
-          <>
-            <div className="flex items-center mr-1">
-              <AddressWalletIcon
-                size={20}
-                walletAddress={activeAddress}
-                showWalletConnectorIcon={showWalletConnectorIcon}
-              />
-            </div>
-            <span className="text-sm font-medium m-0">
-              {truncateAddress(activeAddress, 4, 4)}
-            </span>
-          </>
-        )
-      ) : (
-        <span className="text-sm font-medium mr-1">Connect Wallet</span>
-      )}
-      <ChevronRight className="w-4 h-4 m-0" />
-    </button>
-  )
-}
-
-export default FundingMethodSelectorButton