0xtrails 0.12.2 → 0.13.0

package/src/widget/components/FundMethods.tsx

@@ -1,11 +1,10 @@
 import type React from "react"
 import { ChevronRight, CreditCard, Wallet, ZapIcon } from "lucide-react"
-import { useAccount } from "wagmi"
+import { useAccount, useConnections, useSwitchAccount } from "wagmi"
 import { ScreenHeader } from "./ScreenHeader.js"
-import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
-import { useConnections } from "wagmi"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
-import { useMode } from "../hooks/useMode.js"
+import { useViewManager } from "../hooks/useViewManager.js"
+import { useWalletConnectionContext } from "../hooks/useWalletConnectionContext.js"
 import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
 import ExchangeIcon from "../assets/Exchange-icon-black.svg"
 import WalletChange from "../assets/WalletChange-black.svg"
@@ -13,6 +12,7 @@ import { truncateAddress } from "../../utils/address.js"
 import { useResolveEns } from "../../ens.js"
 import { AddressWalletIcon } from "./AddressWalletIcon.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { useAccountTotalBalanceUsd } from "../../query/balance.hooks.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
 import type { FundMethodListOption } from "../widget.js"
 
@@ -40,14 +40,11 @@ const FundMethods: React.FC<FundMethodsProps> = ({
 }) => {
   const { address, connector } = useAccount()
   const connections = useConnections()
-  const { setCurrentScreen } = useCurrentScreen()
-  const {
-    selectedFundMethod,
-    setSelectedFundMethod,
-    setIsMeldOnRamp,
-    setPaymentMethod,
-  } = useSelectedFundMethod()
-  const { mode } = useMode()
+  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 ?? []
@@ -94,19 +91,28 @@ const FundMethods: React.FC<FundMethodsProps> = ({
 
   const connectedWallets = getConnectedWallets()
 
-  const activeConnection =
-    connectedWallets.find((wallet) => wallet.isActive) || connectedWallets[0]
+  const eligibleConnectedWallets = connectedWallets.filter((wallet) => {
+    if (
+      hideWallets.length > 0 &&
+      hideWallets.some(
+        (addr) => addr.toLowerCase() === wallet.address.toLowerCase(),
+      )
+    ) {
+      return false
+    }
+    return true
+  })
 
-  const isActiveWalletHidden =
-    hideWallets.length > 0 &&
-    activeConnection?.address &&
-    hideWallets.some(
-      (addr) => addr.toLowerCase() === activeConnection.address.toLowerCase(),
-    )
+  const activeConnection =
+    eligibleConnectedWallets.find((wallet) => wallet.isActive) ||
+    eligibleConnectedWallets[0]
 
-  const showWalletInline = activeConnection && !isActiveWalletHidden
+  const { data: activeWalletBalanceUsd = 0 } = useAccountTotalBalanceUsd(
+    activeConnection?.address || null,
+  )
+  const hasActiveWalletBalance = activeWalletBalanceUsd > 0
 
-  const displayMeshExchange = !!onramp // MeshConnect Exchange enabled when onramp prop is provided
+  const showWalletInline = !!activeConnection && hasActiveWalletBalance
 
   const fundMethodAliases: Record<FundMethodListOption, FundMethod> = {
     "connected-wallet": "wallet",
@@ -164,44 +170,68 @@ const FundMethods: React.FC<FundMethodsProps> = ({
     listedInternalSet.size > 0 &&
     !listedInternalSet.has(method)
 
+  const displayMeshExchange = !!onramp // MeshConnect Exchange enabled when onramp prop is provided
+
   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={
-              forceDisabled
-                ? undefined
-                : () => {
+              canSelectWallet
+                ? () => {
                     setSelectedFundMethod("wallet")
+                    if (
+                      activeConnection &&
+                      activeConnection.address?.toLowerCase() !==
+                        address?.toLowerCase()
+                    ) {
+                      switchAccount({ connector: activeConnection.connector })
+                    }
                     if (onSelectConnectedAccount) {
                       onSelectConnectedAccount()
                     }
                   }
+                : undefined
             }
             onKeyDown={
-              forceDisabled
-                ? undefined
-                : (e) => {
+              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 ${
-              forceDisabled
+              rowDisabled
                 ? disabledClassname
-                : `cursor-pointer ${
-                    selectedFundMethod === "wallet"
-                      ? "bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-600"
-                      : ""
-                  }`
+                : 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">
@@ -222,9 +252,9 @@ const FundMethods: React.FC<FundMethodsProps> = ({
                   type="button"
                   onClick={(e) => {
                     e.stopPropagation()
-                    setCurrentScreen("select-funding-wallet")
+                    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"
+                  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
@@ -239,7 +269,6 @@ const FundMethods: React.FC<FundMethodsProps> = ({
           </div>
         )
       }
-
       return (
         <button
           key="wallet-button"
@@ -249,7 +278,13 @@ const FundMethods: React.FC<FundMethodsProps> = ({
             forceDisabled
               ? undefined
               : () => {
-                  setCurrentScreen(
+                  if (!activeConnection) {
+                    setConnectionContext(
+                      "fund-method-selection",
+                      "fund-methods",
+                    )
+                  }
+                  navigate(
                     activeConnection ? "select-funding-wallet" : "wallet-list",
                   )
                 }
@@ -262,7 +297,7 @@ const FundMethods: React.FC<FundMethodsProps> = ({
         >
           <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">Connected wallet</span>
+            <span className="text-sm font-medium">Connect wallet</span>
           </div>
           <ChevronRight className="w-5 h-5 text-gray-400" />
         </button>
@@ -271,7 +306,7 @@ const FundMethods: React.FC<FundMethodsProps> = ({
 
     if (method === "onramp-meld") {
       if (!isOnrampEnabled) return null
-      const disabled = forceDisabled || !activeConnection
+      const disabled = forceDisabled
       return (
         <button
           key="onramp-meld"
@@ -282,7 +317,6 @@ const FundMethods: React.FC<FundMethodsProps> = ({
               ? undefined
               : () => {
                   setSelectedFundMethod("onramp-meld")
-                  setIsMeldOnRamp(true)
                   setPaymentMethod({
                     id: "CREDIT_DEBIT_CARD",
                     name: "Credit/Debit Card",
@@ -308,7 +342,7 @@ const FundMethods: React.FC<FundMethodsProps> = ({
     }
 
     if (method === "direct-transfer") {
-      const disabled = forceDisabled || !activeConnection
+      const disabled = forceDisabled
       return (
         <button
           key="direct-transfer"
@@ -361,7 +395,7 @@ const FundMethods: React.FC<FundMethodsProps> = ({
             <img
               src={ExchangeIcon}
               alt="Exchange"
-              className="w-8 h-8 text-gray-700 dark:text-gray-100"
+              className="w-8 h-8 dark:invert dark:brightness-150"
             />
             <span className="text-sm font-medium">From Exchange</span>
           </div>

package/src/widget/components/FundWalletSelection.tsx

@@ -1,47 +1,23 @@
-import { ChevronRight, Wallet, X } from "lucide-react"
-import { useEffect, useState } from "react"
-import {
-  useAccount,
-  useConnections,
-  useDisconnect,
-  useSwitchAccount,
-} from "wagmi"
-import { logger } from "../../logger.js"
-import { useAccountTotalBalanceUsd } from "../../query/balance.hooks.js"
-import {
-  formatUsdAmountDisplay,
-  formatUsdAmountLocaleDisplay,
-} from "../../utils/format.js"
-import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
-import { useBack } from "../hooks/useBack.js"
-import type { Screen } from "../hooks/useCurrentScreen.js"
-import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
-import { useMode } from "../hooks/useMode.js"
-import { usePreviousScreen } from "../hooks/usePreviousScreen.js"
+import { useConnections, useSwitchAccount } from "wagmi"
+import { ConnectedWallets } from "./ConnectedWallets.js"
+import { useViewManager } from "../hooks/useViewManager.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
-import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
-import { useWalletConnectionContext } from "../hooks/useWalletConnectionContext.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { AddressOrEnsName } from "./AddressOrEnsName.js"
-import { AddressWalletIcon } from "./AddressWalletIcon.js"
-import { CopyButton } from "./CopyButton.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 
 export const FundWalletSelection: React.FC = () => {
-  const { setCurrentScreen } = useCurrentScreen()
-  const { getPreviousScreen } = useBack()
-  const { setPreviousScreen } = usePreviousScreen()
+  const { navigate, backScreen, mode, goHome } = useViewManager()
   const connections = useConnections()
   const { switchAccount } = useSwitchAccount()
   const { setSelectedFundMethod } = useSelectedFundMethod()
-  const { mode } = useMode()
-  const { fundOptions } = useWidgetProps()
+  const { fundOptions, hideDisconnect, decoupleWagmi } = useWidgetProps()
   const hideWallets = fundOptions?.hideWallets ?? []
+  const showDisconnect = !hideDisconnect && !decoupleWagmi
 
   return (
     <div className="flex flex-col h-full">
       <ScreenHeader
-        onBack={() => setCurrentScreen(getPreviousScreen() ?? "fund-methods")}
+        onBack={() => navigate(backScreen ?? "fund-methods")}
         headerContent="Select a wallet"
         headerContentAlign="left"
         rightSideContent={<div className="w-9" />}
@@ -50,9 +26,11 @@ export const FundWalletSelection: React.FC = () => {
         <div className="flex flex-col gap-1">
           <ConnectedWallets
             showConnectNewWallet={true}
-            hiddenWallets={hideWallets}
+            showDisconnect={showDisconnect}
+            hiddenWallets={hideWallets as string[]}
+            disableZeroBalanceWallets={true}
+            showZeroBalanceMessage={true}
             onWalletSelect={(walletAddress, walletConnector) => {
-              // Find the connection for this wallet
               const connection = connections.find(
                 (conn) =>
                   conn.accounts.includes(walletAddress as `0x${string}`) &&
@@ -66,11 +44,10 @@ export const FundWalletSelection: React.FC = () => {
                 // Set funding method to "wallet" since user selected a wallet
                 setSelectedFundMethod("wallet")
 
-                setPreviousScreen("select-funding-wallet")
                 if (mode === "fund") {
-                  setCurrentScreen("tokens")
+                  navigate("tokens")
                 } else {
-                  setCurrentScreen("home")
+                  goHome()
                 }
               }
             }}
@@ -81,364 +58,3 @@ export const FundWalletSelection: React.FC = () => {
     </div>
   )
 }
-
-export interface ConnectedWalletsProps {
-  onWalletSwitch?: (address: string) => void
-  onWalletSelect?: (address: string, connector: any) => void
-  showActiveWallet?: boolean
-  showConnectNewWallet?: boolean
-  backScreen?: string
-  hiddenWallets?: string[]
-}
-
-const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
-  onWalletSwitch,
-  onWalletSelect,
-  showActiveWallet = true,
-  showConnectNewWallet = false,
-  backScreen = "connect",
-  hiddenWallets = [],
-}) => {
-  const { address, connector } = useAccount()
-  const connections = useConnections()
-  const { switchAccount } = useSwitchAccount()
-  const { wallets: allWallets } = useWallets()
-  const { disconnect } = useDisconnect()
-  const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
-  const { setCurrentScreenWithBack } = useBack()
-  const { setConnectionContext } = useWalletConnectionContext()
-  const [error, setError] = useState<string | null>(null)
-  const { hideAddWallet } = useWidgetProps()
-
-  // If no connections, go back to fund methods
-  useEffect(() => {
-    if (connections.length === 0) {
-      setCurrentScreenWithBack("fund-methods")
-    }
-  }, [connections.length, setCurrentScreenWithBack])
-
-  // Get all connected wallets with their details
-  const getConnectedWallets = () => {
-    if (connections.length === 0) {
-      return []
-    }
-
-    if (!address) {
-      return []
-    }
-
-    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:
-              connection.connector.id === connector?.id && account === address,
-          })
-        }
-      })
-    })
-
-    return Array.from(walletMap.values())
-  }
-
-  const connectedWallets = getConnectedWallets()
-
-  const visibleWallets = connectedWallets.filter((wallet) => {
-    if (!showActiveWallet && wallet.isActive) {
-      return false
-    }
-    if (
-      hiddenWallets.length > 0 &&
-      hiddenWallets.some(
-        (addr) => addr.toLowerCase() === wallet.address.toLowerCase(),
-      )
-    ) {
-      return false
-    }
-    return true
-  })
-
-  // Handle switching to a different connected wallet
-  const handleWalletSwitch = async (
-    walletAddress: string,
-    walletConnector: any,
-  ) => {
-    if (connections.length === 0) {
-      return
-    }
-
-    if (!address) {
-      return
-    }
-
-    try {
-      setError(null)
-      // Find the connection for this wallet
-      const connection = connections.find(
-        (conn) =>
-          conn.accounts.includes(walletAddress as `0x${string}`) &&
-          conn.connector.id === walletConnector.id,
-      )
-
-      if (connection) {
-        switchAccount({
-          connector: connection.connector,
-        })
-
-        // Call the optional callback
-        if (onWalletSwitch) {
-          onWalletSwitch(walletAddress)
-        }
-      }
-    } catch (error) {
-      setError(
-        error instanceof Error ? error.message : "Failed to switch wallet",
-      )
-    }
-  }
-
-  const handleDisconnect = async (
-    walletConnector: any,
-    e: React.MouseEvent,
-  ) => {
-    // Check connections first to avoid race condition
-    if (connections.length === 0) {
-      return
-    }
-
-    if (!address) {
-      return
-    }
-
-    e.preventDefault()
-    e.stopPropagation()
-    try {
-      setError(null)
-
-      let disconnectedAddress: string | undefined
-      try {
-        const accounts = await walletConnector.getAccounts()
-        disconnectedAddress = accounts?.[0]
-      } catch (err) {
-        logger.console.error("[trails-sdk] Failed to get accounts:", err)
-        const connection = connections.find(
-          (conn) => conn.connector.id === walletConnector.id,
-        )
-        disconnectedAddress = connection?.accounts[0]
-      }
-
-      disconnect({ connector: walletConnector })
-
-      if (disconnectedAddress && selectedRecipient === disconnectedAddress) {
-        const remainingWallets = getConnectedWallets()
-        if (remainingWallets.length > 0) {
-          const firstRemainingWallet = remainingWallets.find(
-            (wallet) => wallet.address !== disconnectedAddress,
-          )
-          if (firstRemainingWallet) {
-            setSelectedRecipient(firstRemainingWallet.address)
-          }
-        }
-      }
-    } catch (error) {
-      setError(
-        error instanceof Error ? error.message : "Failed to disconnect wallet",
-      )
-    }
-  }
-
-  if (connections.length === 0 || connectedWallets.length === 0) {
-    return null
-  }
-
-  return (
-    <>
-      {error && (
-        <div className="border rounded-lg p-4 bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800 mx-4 mb-2">
-          <p className="text-sm wrap-break-word text-red-600 dark:text-red-200">
-            {error}
-          </p>
-        </div>
-      )}
-
-      {/* Connected Wallets List */}
-      {connectedWallets.map((wallet) => {
-        // Skip active wallet if showActiveWallet is false
-        if (!showActiveWallet && wallet.isActive) {
-          return null
-        }
-        if (
-          hiddenWallets.length > 0 &&
-          hiddenWallets.some(
-            (addr) => addr.toLowerCase() === wallet.address.toLowerCase(),
-          )
-        ) {
-          return null
-        }
-
-        return (
-          <WalletItem
-            key={wallet.address}
-            wallet={wallet}
-            onWalletSwitch={handleWalletSwitch}
-            onWalletSelect={onWalletSelect}
-            onDisconnect={handleDisconnect}
-            hideActiveState={backScreen === "recipients"}
-          />
-        )
-      })}
-
-      {/* Divider */}
-      {showConnectNewWallet && !hideAddWallet && visibleWallets.length > 0 && (
-        <div className="relative flex items-center justify-center my-4 px-4">
-          <div className="flex-1 border-t border-gray-200 dark:border-gray-700"></div>
-          <span className="px-4 text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900">
-            or
-          </span>
-          <div className="flex-1 border-t border-gray-200 dark:border-gray-700"></div>
-        </div>
-      )}
-
-      {/* Connect new wallet Button */}
-      {showConnectNewWallet && !hideAddWallet && (
-        <button
-          type="button"
-          onClick={() => {
-            setConnectionContext("fund-method-selection", backScreen as Screen)
-            setCurrentScreenWithBack(
-              "wallet-list",
-              "select-funding-wallet" as 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">
-            <Wallet className="w-8 h-8" />
-            <span className="text-sm font-medium">Connect new wallet</span>
-          </div>
-          <ChevronRight className="w-5 h-5 text-gray-400" />
-        </button>
-      )}
-    </>
-  )
-}
-
-interface WalletItemProps {
-  wallet: {
-    address: string
-    connector: any
-    walletConfig: any
-    walletId: string
-    isActive: boolean
-  }
-  onWalletSwitch: (address: string, connector: any) => void
-  onWalletSelect?: (address: string, connector: any) => void
-  onDisconnect: (connector: any, e: React.MouseEvent) => void
-  hideActiveState?: boolean
-}
-
-const WalletItem: React.FC<WalletItemProps> = ({
-  wallet,
-  onWalletSwitch,
-  onWalletSelect,
-  onDisconnect,
-}) => {
-  const { data: totalBalanceUsd = 0, isLoading: isLoadingTotalBalanceUsd } =
-    useAccountTotalBalanceUsd(wallet.address)
-  const totalBalanceUsdFormatted = formatUsdAmountDisplay(totalBalanceUsd)
-  const totalBalanceUsdLocaleDisplay =
-    formatUsdAmountLocaleDisplay(totalBalanceUsd)
-
-  const hasZeroBalance = !isLoadingTotalBalanceUsd && totalBalanceUsd === 0
-
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: span used to avoid invalid nested button (row is already a button)
-    <div
-      role="button"
-      tabIndex={hasZeroBalance ? -1 : 0}
-      aria-disabled={hasZeroBalance}
-      onClick={() => {
-        if (hasZeroBalance) return
-        if (onWalletSelect) {
-          onWalletSelect(wallet.address, wallet.connector)
-        } else if (!wallet.isActive) {
-          onWalletSwitch(wallet.address, wallet.connector)
-        }
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault()
-          if (hasZeroBalance) return
-          if (onWalletSelect) {
-            onWalletSelect(wallet.address, wallet.connector)
-          } else if (!wallet.isActive) {
-            onWalletSwitch(wallet.address, wallet.connector)
-          }
-        }
-      }}
-      className={`w-full text-left px-4 py-3 flex items-center justify-between transition-colors rounded-xl ${hasZeroBalance ? "cursor-not-allowed opacity-50" : "cursor-pointer trails-hover-bg"} ${wallet.isActive ?? "bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300"}`}
-    >
-      <div className="flex items-center gap-3 flex-1">
-        <div className="flex items-center justify-center shrink-0">
-          <AddressWalletIcon
-            size={30}
-            walletAddress={wallet.address as `0x${string}`}
-          />
-        </div>
-        <div className="flex flex-col min-w-0">
-          <div className="flex items-center gap-1">
-            <AddressOrEnsName
-              address={wallet.address}
-              className="text-sm font-medium"
-            />
-            <CopyButton
-              text={wallet.address}
-              size="sm"
-              stopPropagation={true}
-              className="p-1"
-              as="span"
-            />
-          </div>
-          {!isLoadingTotalBalanceUsd && hasZeroBalance ? (
-            <span className="text-xs text-gray-400 dark:text-gray-500">
-              No balance available for funding
-            </span>
-          ) : (
-            !isLoadingTotalBalanceUsd &&
-            totalBalanceUsdFormatted && (
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                {totalBalanceUsdLocaleDisplay || totalBalanceUsdFormatted}
-              </span>
-            )
-          )}
-        </div>
-      </div>
-      <div className="flex items-center gap-2">
-        {onDisconnect && (
-          <button
-            type="button"
-            onClick={(e) => onDisconnect(wallet.connector, e)}
-            className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer"
-            title="Disconnect wallet"
-          >
-            <X className="w-4 h-4 text-gray-500 dark:text-gray-400" />
-          </button>
-        )}
-      </div>
-      {!hasZeroBalance && <ChevronRight className="w-5 h-5 text-gray-400" />}
-    </div>
-  )
-}