0xtrails 0.2.4 → 0.2.6

package/src/widget/components/ScreenHeader.tsx

@@ -1,7 +1,10 @@
-import { ChevronLeft } from "lucide-react"
+import { ChevronLeft, X } from "lucide-react"
 import type React from "react"
-import { useAccount } from "wagmi"
+import { useConnections } from "wagmi"
 import AccountActionsDropdown from "./AccountActionsDropdown.js"
+import AccountIntentTransactionHistoryButton from "./AccountIntentTransactionHistoryButton.js"
+import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { useModal } from "../widget.js"
 
 interface ScreenHeaderProps {
   onBack?: () => void
@@ -19,42 +22,67 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
   headerContentAlign = "left",
   showAccountActions = false,
 }) => {
-  const { isConnected } = useAccount()
+  const connections = useConnections()
+  const { renderInline } = useWidgetProps()
+  const { closeModal, isModalOpen } = useModal()
+
+  // Check if there are any connected accounts across all connectors
+  const isConnected = connections.length > 0
+
+  // Show close button when in modal mode (not renderInline) and modal is open
+  const showCloseButton = !renderInline && isModalOpen
   return (
-    <div className="relative w-full mb-4">
-      {/* Left side - Back button (absolute positioned) */}
-      {onBack && (
-        <button
-          type="button"
-          onClick={onBack}
-          className="absolute -left-2 top-1/2 -translate-y-1/2 -translate-x-0 w-6 h-6 flex-shrink-0 rounded-full transition-colors cursor-pointer text-gray-400 z-10 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800"
+    <div className="flex items-center justify-between w-full mb-4">
+      {/* Left side - Back button */}
+      <div className="flex items-center">
+        {onBack && (
+          <button
+            type="button"
+            onClick={onBack}
+            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 mr-2"
+            title="Back"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+        )}
+
+        {/* Header content */}
+        <h2
+          className={`text-lg font-semibold ${
+            headerContentAlign === "center" ? "text-center" : "text-left"
+          } text-gray-900 dark:text-white`}
         >
-          <ChevronLeft className="h-4 w-4" />
-        </button>
-      )}
+          {headerContent}
+        </h2>
+      </div>
 
-      {/* Center - Header content */}
-      <h2
-        className={`text-lg font-semibold ${
-          headerContentAlign === "left"
-            ? onBack
-              ? "text-left ml-8" // Add margin when back button exists to prevent overlap
-              : "text-left" // No margin when no back button
-            : "text-center" // Perfect center when center-aligned
-        } ${"text-gray-900 dark:text-white"}`}
-      >
-        {headerContent}
-      </h2>
+      {/* Right side - Content, Account Actions, and Close button */}
+      <div className="flex items-center gap-2">
+        {/* Right side content and Account Actions */}
+        {rightSideContent && (
+          <div className="text-right max-w-[280px]">{rightSideContent}</div>
+        )}
+        {isConnected && showAccountActions && (
+          <>
+            <div className="m-0">
+              <AccountIntentTransactionHistoryButton />
+            </div>
+            <AccountActionsDropdown />
+          </>
+        )}
 
-      {/* Right side - Optional content and Account Actions */}
-      {(rightSideContent || (isConnected && showAccountActions)) && (
-        <div className="absolute right-0 top-1/2 -translate-y-1/2 -translate-x-0 flex items-center gap-2 z-10">
-          {rightSideContent && (
-            <div className="text-right max-w-[280px]">{rightSideContent}</div>
-          )}
-          {isConnected && showAccountActions && <AccountActionsDropdown />}
-        </div>
-      )}
+        {/* Close button (always rightmost) */}
+        {showCloseButton && (
+          <button
+            type="button"
+            onClick={closeModal}
+            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="Close"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
     </div>
   )
 }

package/src/widget/components/SlippageToleranceSettings.tsx

@@ -142,7 +142,8 @@ export const SlippageToleranceSettings: React.FC<
             onBlur={handleInputBlur}
             onKeyDown={handleKeyDown}
             placeholder="5"
-            className="w-full px-2 py-1.5 text-sm border border-solid border-gray-200 dark:border-gray-700 trails-border-radius-input focus:ring-2 focus:ring-blue-500 focus:border-blue-500 trails-input pr-6"
+            className="w-full px-2 py-1.5 text-sm border border-solid border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 trails-input pr-6"
+            style={{ borderRadius: "10px" }}
           />
           <div className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
             <span className="text-xs text-gray-500 dark:text-gray-400">%</span>

package/src/widget/components/Swap.tsx

@@ -1,15 +1,11 @@
 import type React from "react"
-import { useEffect } from "react"
 import type { Account, WalletClient } from "viem"
 import type { TransactionState } from "../../transactions.js"
 import type { OnCompleteProps, Token } from "../hooks/useSendForm.js"
 import type { SupportedToken } from "../../tokens.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
-import { SimpleSwap } from "./SimpleSwap.js"
 import { ClassicSwap } from "./ClassicSwap.js"
-import { useSwapSettings } from "../hooks/useSwapSettings.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
 
 interface SwapProps {
   selectedToken: Token | null
@@ -17,13 +13,13 @@ interface SwapProps {
   onBack?: () => void
   onConfirm: () => void
   onComplete: (result: OnCompleteProps) => void
-  account: Account
+  account?: Account
   toRecipient?: string
   toAmount?: string
   toChainId?: number
   toToken?: string
   toCalldata?: string
-  walletClient: WalletClient
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
@@ -46,48 +42,11 @@ interface SwapProps {
   recentTokens?: SupportedToken[]
   onRecentTokenSelect?: (token: SupportedToken) => void
   onTrackToken?: (token: any) => void
+  isSequenceWallet?: boolean
 }
 
 export const Swap: React.FC<SwapProps> = (props) => {
-  const { swapMode } = useWidgetProps()
-  const {
-    isSimpleSwapMode: isSimpleMode,
-    setIsSimpleSwapMode: setIsSimpleMode,
-  } = useSwapSettings()
-
-  // Update isSimpleMode when swapMode changes
-  useEffect(() => {
-    if (swapMode === "simple") {
-      setIsSimpleMode(true)
-    }
-  }, [swapMode, setIsSimpleMode])
-
-  // Render SimpleSwap or ClassicSwap based on mode
-  if (isSimpleMode) {
-    return (
-      <SimpleSwap
-        onBack={props.onBack}
-        account={props.account}
-        walletClient={props.walletClient}
-        onTransactionStateChange={props.onTransactionStateChange}
-        onError={props.onError}
-        onWaitingForWalletConfirm={props.onWaitingForWalletConfirm}
-        onConfirm={props.onConfirm}
-        onComplete={props.onComplete}
-        onSend={props.onSend}
-        paymasterUrls={props.paymasterUrls}
-        gasless={props.gasless}
-        setWalletConfirmRetryHandler={props.setWalletConfirmRetryHandler}
-        quoteProvider={props.quoteProvider}
-        fundMethod={props.fundMethod}
-        checkoutOnHandlers={props.checkoutOnHandlers}
-        showHeader={true}
-        onTokenSelectorVisibilityChange={() => {}}
-      />
-    )
-  }
-
-  // Default to ClassicSwap
+  // Always render ClassicSwap
   return <ClassicSwap {...props} />
 }
 

package/src/widget/components/SwapSettings.tsx

@@ -3,10 +3,8 @@ import type React from "react"
 import { useEffect, useRef, useState } from "react"
 // import { SwapDisplayMode } from "./SwapDisplayMode.js"
 import { SlippageToleranceSettings } from "./SlippageToleranceSettings.js"
-// import { useSwapSettings } from "../hooks/useSwapSettings.js"
 
 export const SwapSettings: React.FC = () => {
-  //const { isSimpleSwapMode, setIsSimpleSwapModeWithStorage } = useSwapSettings()
   const [isSettingsDropdownOpen, setIsSettingsDropdownOpen] = useState(false)
   const settingsDropdownRef = useRef<HTMLDivElement>(null)
 
@@ -27,13 +25,8 @@ export const SwapSettings: React.FC = () => {
     }
   }, [isSettingsDropdownOpen])
 
-  // const handleModeSelect = (isSimple: boolean) => {
-  //   setIsSimpleSwapModeWithStorage(isSimple)
-  //   setIsSettingsDropdownOpen(false)
-  // }
-
   return (
-    <div className="relative" ref={settingsDropdownRef}>
+    <div ref={settingsDropdownRef}>
       <button
         type="button"
         onClick={() => setIsSettingsDropdownOpen(!isSettingsDropdownOpen)}
@@ -47,12 +40,7 @@ export const SwapSettings: React.FC = () => {
       {isSettingsDropdownOpen && (
         <div className="absolute right-0 top-full mt-2 w-80 trails-bg-card rounded-lg shadow-lg border trails-border-primary z-20">
           <div className="p-4 space-y-4">
-            {/* <SwapDisplayMode
-              isSimpleMode={isSimpleSwapMode}
-              onModeChange={handleModeSelect}
-            /> */}
-
-            <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
+            <div>
               <SlippageToleranceSettings />
             </div>
           </div>

package/src/widget/components/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { createContext, useContext, useEffect, useState } from "react"
 import type { Theme } from "../../theme.js"
 import { ThemeProvider as DesignSystemThemeProvider } from "@0xsequence/design-system"
 import { logger } from "../../logger.js"
+import { DEFAULT_THEME } from "../../constants.js"
 
 interface ThemeContextType {
   theme: Theme
@@ -31,7 +32,7 @@ const getIsDark = (theme: Theme): boolean => {
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   children,
-  initialTheme = "auto",
+  initialTheme = DEFAULT_THEME,
 }) => {
   const [theme, setTheme] = useState<Theme>(initialTheme)
   const [isDark, setIsDark] = useState(getIsDark(initialTheme))

package/src/widget/components/TokenDisplayNonSelectable.tsx

@@ -0,0 +1,40 @@
+import type React from "react"
+import { TokenImage } from "./TokenImage.js"
+
+interface TokenDisplayNonSelectableProps {
+  symbol: string
+  imageUrl?: string
+  chainId: number
+  contractAddress: string
+  chainName?: string
+}
+
+export const TokenDisplayNonSelectable: React.FC<
+  TokenDisplayNonSelectableProps
+> = ({ symbol, imageUrl, chainId, contractAddress, chainName }) => {
+  return (
+    <div className="relative max-w-[120px]">
+      <div className="flex items-center space-x-1.5 trails-bg-card trails-border-radius-input px-2.5 py-1.5 border trails-border-primary">
+        <div className="flex items-center flex-shrink-0">
+          <TokenImage
+            symbol={symbol}
+            imageUrl={imageUrl}
+            chainId={chainId}
+            contractAddress={contractAddress}
+            size={28}
+          />
+        </div>
+        <div className="flex flex-col items-start min-w-0 overflow-hidden">
+          <span className="font-bold trails-text-primary text-sm leading-tight truncate max-w-full text-left">
+            {symbol}
+          </span>
+          {chainName && (
+            <span className="text-xs trails-text-muted leading-tight truncate max-w-full text-left">
+              {chainName}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/widget/components/TokenImage.tsx

@@ -1,19 +1,28 @@
 import React, { useMemo } from "react"
 import { ChainImage } from "./ChainImage.js"
 import { getCommonTokenImageUrl } from "../../tokens.js"
+import { logger } from "../../logger.js"
 
 function normalizeImageUrl(
   imageUrl?: string | null,
   symbol?: string | null,
   chainId?: number | null,
+  contractAddress?: string | null,
 ) {
   if (symbol === "ETH") {
     return "https://assets.sequence.info/images/tokens/large/1/0x0000000000000000000000000000000000000000.webp"
   }
+  const commonImageUrl = getCommonTokenImageUrl({
+    symbol,
+    chainId,
+    contractAddress,
+  })
+  if (commonImageUrl) {
+    return commonImageUrl
+  }
+
   if (imageUrl) {
     return imageUrl.replace("/small/", "/large/")
-  } else if (symbol) {
-    return getCommonTokenImageUrl({ symbol, chainId })
   }
 
   return null
@@ -23,6 +32,7 @@ interface TokenImageProps {
   imageUrl?: string | null
   symbol?: string | null
   chainId?: number | null
+  contractAddress?: string | null
   size?: number
 }
 
@@ -30,12 +40,19 @@ export const TokenImage: React.FC<TokenImageProps> = ({
   imageUrl,
   symbol,
   chainId,
+  contractAddress,
   size = 24,
 }) => {
   const [imageError, setImageError] = React.useState(false)
   const effectiveImageUrl = useMemo(() => {
-    return normalizeImageUrl(imageUrl, symbol, chainId)
-  }, [imageUrl, symbol, chainId])
+    logger.console.log("[TokenImage] normalizeImageUrl", {
+      imageUrl,
+      symbol,
+      chainId,
+      contractAddress,
+    })
+    return normalizeImageUrl(imageUrl, symbol, chainId, contractAddress)
+  }, [imageUrl, symbol, chainId, contractAddress])
 
   const displaySymbol = symbol?.[0]?.toUpperCase() || "?"
 
@@ -47,7 +64,7 @@ export const TokenImage: React.FC<TokenImageProps> = ({
 
   return (
     <div
-      className={`rounded-full flex items-center justify-center text-sm relative ${
+      className={`rounded-full flex items-center justify-center text-sm relative m-0 ${
         symbol !== "ETH" ? "bg-gray-400 dark:bg-gray-900" : ""
       }`}
       style={{

package/src/widget/components/TokenList.tsx

@@ -72,7 +72,6 @@ export const TokenList: React.FC<TokenListProps> = ({
     <div className="space-y-2">
       <ScreenHeader
         onBack={mode !== "fund" ? onBack : undefined}
-        showAccountActions={true}
         headerContent={
           mode === "fund"
             ? "Fund with any token"

package/src/widget/components/TokenSelector.tsx

@@ -2,6 +2,7 @@ import { ChevronLeft, Copy } from "lucide-react"
 import type React from "react"
 import { useState, useMemo } from "react"
 import { AnimatePresence, motion } from "framer-motion"
+import { zeroAddress } from "viem"
 import type { Token, TokenFormatted } from "../hooks/useTokenList.js"
 import { useTokenList } from "../hooks/useTokenList.js"
 import { useChainFilter } from "../hooks/useChainFilter.js"
@@ -14,6 +15,7 @@ import { ChainFilterDropdown } from "./ChainFilterDropdown.js"
 import { SearchInputField } from "./SearchInputField.js"
 import { truncateAddress } from "../../utils.js"
 import { logger } from "../../logger.js"
+import { useAccount } from "wagmi"
 
 interface TokenSelectorProps {
   onTokenSelect: (selectedToken: Token) => void
@@ -55,6 +57,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
 }) => {
   const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
   const { isBalanceVisible } = useBalanceVisible()
+  const { address } = useAccount()
 
   const {
     searchQuery,
@@ -224,7 +227,9 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
               ? "No tokens found matching your search."
               : fundMethod === "qr-code" || fundMethod === "exchange"
                 ? ""
-                : "No available tokens found"}
+                : address
+                  ? "No available tokens found"
+                  : ""}
           </p>
         </div>
       )}
@@ -295,6 +300,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                           symbol={symbol}
                           imageUrl={imageUrl}
                           chainId={chainId}
+                          contractAddress={contractAddress}
                           size={32}
                         />
                       ) : (
@@ -329,7 +335,9 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                       {/* Default state: show symbol */}
                       <div
                         className={`flex items-center transition-all duration-300 ease-in-out ${
-                          contractAddress
+                          contractAddress &&
+                          contractAddress.toLowerCase() !==
+                            zeroAddress.toLowerCase()
                             ? "group-hover:opacity-0 group-hover:transform group-hover:-translate-x-2"
                             : ""
                         } ${
@@ -345,58 +353,60 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                         </span>
                       </div>
 
-                      {/* Hover state: show address with copy button */}
-                      {contractAddress && (
-                        <div
-                          className={`absolute top-0 left-0 flex items-center transition-all duration-300 ease-in-out opacity-0 transform translate-x-2 ${
-                            !isSufficientBalance &&
-                            fundMethod !== "qr-code" &&
-                            fundMethod !== "exchange"
-                              ? "group-hover:opacity-70"
-                              : "group-hover:opacity-100"
-                          } group-hover:translate-x-0`}
-                        >
-                          <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-                            {truncateAddress(contractAddress)}
-                          </span>
-                          <button
-                            type="button"
-                            onClick={(e) =>
-                              handleCopyAddress(contractAddress, e)
-                            }
-                            className={`ml-1 p-0.5 rounded transition-all duration-200 cursor-pointer ${
-                              copiedAddress === contractAddress
-                                ? "bg-green-100 dark:bg-green-900/30"
-                                : "hover:bg-gray-200 dark:hover:bg-gray-600"
-                            }`}
-                            title={
-                              copiedAddress === contractAddress
-                                ? "Copied!"
-                                : "Copy full address"
-                            }
+                      {/* Hover state: show address with copy button (only for non-zero addresses) */}
+                      {contractAddress &&
+                        contractAddress.toLowerCase() !==
+                          zeroAddress.toLowerCase() && (
+                          <div
+                            className={`absolute top-0 left-0 flex items-center transition-all duration-300 ease-in-out opacity-0 transform translate-x-2 ${
+                              !isSufficientBalance &&
+                              fundMethod !== "qr-code" &&
+                              fundMethod !== "exchange"
+                                ? "group-hover:opacity-70"
+                                : "group-hover:opacity-100"
+                            } group-hover:translate-x-0`}
                           >
-                            {copiedAddress === contractAddress ? (
-                              <svg
-                                className="w-3 h-3 text-green-600 dark:text-green-400"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                                aria-label="Copied"
-                              >
-                                <title>Copied</title>
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  strokeWidth={2}
-                                  d="M5 13l4 4L19 7"
-                                />
-                              </svg>
-                            ) : (
-                              <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
-                            )}
-                          </button>
-                        </div>
-                      )}
+                            <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                              {truncateAddress(contractAddress)}
+                            </span>
+                            <button
+                              type="button"
+                              onClick={(e) =>
+                                handleCopyAddress(contractAddress, e)
+                              }
+                              className={`ml-1 p-0.5 rounded transition-all duration-200 cursor-pointer ${
+                                copiedAddress === contractAddress
+                                  ? "bg-green-100 dark:bg-green-900/30"
+                                  : "hover:bg-gray-200 dark:hover:bg-gray-600"
+                              }`}
+                              title={
+                                copiedAddress === contractAddress
+                                  ? "Copied!"
+                                  : "Copy full address"
+                              }
+                            >
+                              {copiedAddress === contractAddress ? (
+                                <svg
+                                  className="w-3 h-3 text-green-600 dark:text-green-400"
+                                  fill="none"
+                                  viewBox="0 0 24 24"
+                                  stroke="currentColor"
+                                  aria-label="Copied"
+                                >
+                                  <title>Copied</title>
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M5 13l4 4L19 7"
+                                  />
+                                </svg>
+                              ) : (
+                                <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
+                              )}
+                            </button>
+                          </div>
+                        )}
                     </div>
                   </div>
 

package/src/widget/components/TokenSelectorButton.tsx

@@ -0,0 +1,98 @@
+import { ChevronRight } from "lucide-react"
+import type React from "react"
+import { useMemo } from "react"
+import { useConnections } from "wagmi"
+import { TokenImage } from "./TokenImage.js"
+import { getChainInfo } from "../../chains.js"
+import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
+
+interface TokenSelectorButtonProps {
+  token?: {
+    symbol: string
+    imageUrl?: string
+    contractAddress?: string
+    chainId?: number | null
+  } | null
+  chainId?: number | null
+  onSelect: () => void
+  className?: string
+  unselectable?: boolean
+}
+
+export const TokenSelectorButton: React.FC<TokenSelectorButtonProps> = ({
+  token,
+  chainId,
+  onSelect,
+  className = "flex items-center space-x-1.5 trails-border-radius-input px-2.5 py-1.5 border transition-all duration-200",
+  unselectable = false,
+}) => {
+  const connections = useConnections()
+  const { setCurrentScreen } = useCurrentScreen()
+  const { selectedFundMethod } = useSelectedFundMethod()
+  const displayChainId = token?.chainId || chainId
+
+  // Check if there are any connected accounts across all connectors
+  const isConnected = connections.length > 0
+
+  const chainInfo = useMemo(() => {
+    return displayChainId ? getChainInfo(displayChainId) : null
+  }, [displayChainId])
+
+  const handleClick = () => {
+    if (unselectable) return
+
+    // If no wallet connected and fund method is "wallet", redirect to connect screen
+    if (!isConnected && selectedFundMethod === "wallet") {
+      setCurrentScreen("connect")
+      return
+    }
+
+    onSelect()
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={unselectable}
+      className={`${className} ${token ? "max-w-[120px]" : ""} ${
+        token
+          ? "bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600"
+          : "bg-blue-500 hover:bg-blue-600 border-blue-500 text-white"
+      } ${unselectable ? "cursor-default" : "cursor-pointer"}`}
+    >
+      {token ? (
+        <>
+          <div className="flex items-center flex-shrink-0">
+            <TokenImage
+              symbol={token.symbol}
+              imageUrl={token.imageUrl}
+              chainId={displayChainId}
+              contractAddress={token.contractAddress}
+              size={28}
+            />
+          </div>
+          <div className="flex flex-col items-start min-w-0 overflow-hidden">
+            <span className="font-bold trails-text-primary text-sm leading-tight truncate max-w-full text-left">
+              {token.symbol}
+            </span>
+            {chainInfo && (
+              <span className="text-xs trails-text-muted leading-tight truncate max-w-full text-left">
+                {chainInfo.name}
+              </span>
+            )}
+          </div>
+          {!unselectable && (
+            <ChevronRight className="w-3.5 h-3.5 trails-text-muted flex-shrink-0" />
+          )}
+        </>
+      ) : (
+        <>
+          <span className="font-medium text-sm text-white">Select Token</span>
+          {!unselectable && <ChevronRight className="w-3.5 h-3.5 text-white" />}
+        </>
+      )}
+    </button>
+  )
+}