0xtrails 0.2.4 → 0.2.5

package/src/widget/components/QuoteDetails.tsx

@@ -83,7 +83,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
 
       {/* More Details Button - only visible when collapsed */}
       {!isExpanded && (
-        <div className={`flex justify-center ${swapMode ? "" : "mb-4"}`}>
+        <div className={`flex justify-center`}>
           {swapMode ? (
             <button
               type="button"
@@ -161,10 +161,10 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
             <button
               type="button"
               onClick={() => setIsExpanded(true)}
-              className="w-full flex items-center justify-center gap-2 py-1 px-4 trails-border-radius-button transition-colors cursor-pointer text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-              aria-label="Show more details"
+              className="w-full max-w-md flex items-center justify-between gap-2 py-1 px-1 trails-border-radius-button transition-colors cursor-pointer text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+              aria-label="Show transaction details"
             >
-              <span>More Details</span>
+              <span>Transaction details</span>
               <svg
                 className="w-3 h-3 transition-transform duration-300 ease-out"
                 fill="none"
@@ -191,9 +191,13 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
           isExpanded ? "max-h-[250px] opacity-100" : "max-h-0 opacity-0"
         }`}
       >
-        <div className="p-4 rounded-lg text-sm space-y-4 trails-bg-secondary">
+        <div
+          className={`text-sm ${swapMode ? "p-2 space-y-2" : "p-4 rounded-lg space-y-4 trails-bg-secondary"}`}
+        >
           {/* Close Button - only visible when expanded, at top center */}
-          <div className="flex justify-center mb-4 -mt-2">
+          <div
+            className={`flex justify-center ${swapMode ? "mb-2 -mt-1" : "mb-4 -mt-2"}`}
+          >
             {swapMode ? (
               <button
                 type="button"
@@ -367,6 +371,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                             imageUrl={quote.originToken.imageUrl}
                             symbol={quote.originToken.symbol}
                             chainId={quote.originChain.id}
+                            contractAddress={quote.originToken.contractAddress}
                             size={16}
                           />
                           {quote.originAmountDisplay} {quote.originToken.symbol}
@@ -393,6 +398,9 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                               imageUrl={quote.originToken.imageUrl}
                               symbol={quote.originToken.symbol}
                               chainId={quote.originChain.id}
+                              contractAddress={
+                                quote.originToken.contractAddress
+                              }
                               size={16}
                             />
                             {quote.originAmountDisplay}{" "}
@@ -430,6 +438,9 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                             imageUrl={quote.destinationToken.imageUrl}
                             symbol={quote.destinationToken.symbol}
                             chainId={quote.destinationChain.id}
+                            contractAddress={
+                              quote.destinationToken.contractAddress
+                            }
                             size={16}
                           />
                           {quote.destinationAmountDisplay}{" "}
@@ -457,6 +468,9 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                               imageUrl={quote.destinationToken.imageUrl}
                               symbol={quote.destinationToken.symbol}
                               chainId={quote.destinationChain.id}
+                              contractAddress={
+                                quote.destinationToken.contractAddress
+                              }
                               size={16}
                             />
                             {quote.destinationAmountDisplay}{" "}
@@ -665,7 +679,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
               </div>
             )}
 
-            {quote?.quoteProvider && (
+            {quote?.quoteProvider?.name && (
               <div className="flex justify-between items-center">
                 <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
                   {quote.originChain.id === quote.destinationChain.id
@@ -766,7 +780,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
             )}
 
             {/* Children content */}
-            {children && <div className="space-y-2">{children}</div>}
+            {children && <div className="mb-0">{children}</div>}
           </div>
         </div>
       </div>

package/src/widget/components/Receive.tsx

@@ -60,7 +60,6 @@ export const Receive: React.FC<ReceiveProps> = ({
           onBack={onBack}
           headerContent="Receive"
           headerContentAlign="left"
-          showAccountActions={true}
         />
 
         <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
@@ -97,7 +96,6 @@ export const Receive: React.FC<ReceiveProps> = ({
         onBack={onBack}
         headerContent={`Pay ${ensName ? ensName : truncateAddress(resolvedAddress)}`}
         headerContentAlign="left"
-        showAccountActions={true}
       />
 
       <div className="flex flex-col justify-center min-h-full space-y-6 pt-2">

package/src/widget/components/RecipientSelectorButton.tsx

@@ -0,0 +1,42 @@
+import { ChevronRight } from "lucide-react"
+import type React from "react"
+import { truncateAddress } from "../../utils.js"
+import { Identicon } from "./Identicon.js"
+import { useBack } from "../hooks/useBack.js"
+import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
+
+export const RecipientSelectorButton: React.FC = () => {
+  const { setCurrentScreenWithBack } = useBack()
+  const { selectedRecipient } = useSelectedRecipient()
+
+  const handleClick = () => {
+    setCurrentScreenWithBack("recipients")
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className="flex items-center space-x-2 text-blue-500 hover:text-blue-600 transition-colors cursor-pointer bg-transparent border-none p-0"
+      title={
+        selectedRecipient
+          ? `Selected: ${selectedRecipient}`
+          : "Select recipient"
+      }
+    >
+      {selectedRecipient ? (
+        <>
+          <Identicon value={selectedRecipient} size={16} />
+          <span className="text-sm font-medium">
+            {truncateAddress(selectedRecipient, 4, 2)}
+          </span>
+        </>
+      ) : (
+        <span className="text-sm font-medium">Select Recipient</span>
+      )}
+      <ChevronRight className="w-4 h-4" />
+    </button>
+  )
+}
+
+export default RecipientSelectorButton

package/src/widget/components/Recipients.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useCallback } from "react"
 import type React from "react"
 import { isAddress } from "viem"
-import { Copy, RotateCcw } from "lucide-react"
+import { Copy, RotateCcw, ChevronRight } from "lucide-react"
 import { useAccount, useConnections } from "wagmi"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { SearchInputField } from "./SearchInputField.js"
@@ -12,8 +12,8 @@ import { useRecipients, type RecentRecipient } from "../hooks/useRecipients.js"
 import { useResolveEnsAddress, useResolveEnsName } from "../../ens.js"
 import { truncateAddress } from "../../utils.js"
 import { logger } from "../../logger.js"
-import { useMode } from "../hooks/useMode.js"
 import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
+import { ConnectedWallets } from "./ConnectedWallets.js"
 
 interface RecipientsProps {
   onBack?: () => void
@@ -26,7 +26,6 @@ export const Recipients: React.FC<RecipientsProps> = ({
   selectedRecipient = "",
   onRecipientSelect,
 }) => {
-  const { mode } = useMode()
   const { setCurrentScreen } = useCurrentScreen()
   const { setSelectedRecipient } = useSelectedRecipient()
   const { recentRecipients, addRecentRecipient, clearRecentRecipients } =
@@ -136,9 +135,9 @@ export const Recipients: React.FC<RecipientsProps> = ({
       logger.console.log("[trails-sdk] Selected recent recipient:", recipient)
       setSelectedRecipient(recipient.address)
       onRecipientSelect?.(recipient.address)
-      setCurrentScreen(mode === "pay" ? "send-form" : "fund-form")
+      setCurrentScreen("home")
     },
-    [setSelectedRecipient, onRecipientSelect, setCurrentScreen, mode],
+    [setSelectedRecipient, onRecipientSelect, setCurrentScreen],
   )
 
   // Handle connected wallet selection
@@ -150,9 +149,9 @@ export const Recipients: React.FC<RecipientsProps> = ({
       )
       setSelectedRecipient(walletAddress)
       onRecipientSelect?.(walletAddress)
-      setCurrentScreen(mode === "pay" ? "send-form" : "fund-form")
+      setCurrentScreen("home")
     },
-    [setSelectedRecipient, onRecipientSelect, setCurrentScreen, mode],
+    [setSelectedRecipient, onRecipientSelect, setCurrentScreen],
   )
 
   // Handle copy to clipboard with success indication
@@ -202,7 +201,6 @@ export const Recipients: React.FC<RecipientsProps> = ({
         onBack={onBack}
         headerContent="Recipient address"
         headerContentAlign="left"
-        showAccountActions={true}
       />
 
       <div className="space-y-4">
@@ -223,14 +221,23 @@ export const Recipients: React.FC<RecipientsProps> = ({
           )}
         </div>
 
+        {/* Connected Wallets - only show when no input */}
+        {connectedWallets.length > 0 && !recipientInput.trim() && (
+          <ConnectedWallets
+            showConnectNewWallet={true}
+            onWalletSelect={handleConnectedWalletSelect}
+            backScreen="recipients"
+          />
+        )}
+
         {/* Recent Recipients */}
         {recentRecipients.length > 0 && (
           <div className="space-y-2">
             <div className="text-sm font-medium text-gray-700 dark:text-gray-300 text-left">
-              Recents
+              Recent wallets
             </div>
-            <div className="space-y-1 max-h-48 overflow-y-auto trails-scrollbar">
-              {recentRecipients.map((recipient) => {
+            <div className="trails-border-radius-container border trails-border-primary">
+              {recentRecipients.map((recipient, index) => {
                 // Only highlight if search field contains a valid address that matches this recipient
                 const searchQuery = recipientInput.trim()
                 const isHighlighted =
@@ -240,53 +247,51 @@ export const Recipients: React.FC<RecipientsProps> = ({
                     searchQuery.trim().toLowerCase()
 
                 return (
-                  <button
-                    key={recipient.address}
-                    type="button"
-                    className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-border-radius-list-button cursor-pointer group ${
-                      isHighlighted
-                        ? "trails-list-item-selected border border-blue-200 dark:border-blue-800"
-                        : "trails-list-item"
-                    }`}
-                    onClick={() => handleRecentRecipientSelect(recipient)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault()
-                        handleRecentRecipientSelect(recipient)
-                      }
-                    }}
-                    aria-label={`Select recipient ${recipient.ensName || recipient.address}`}
-                  >
-                    {/* Identicon */}
-                    <div className="relative flex-shrink-0 mr-2">
-                      <Identicon
-                        value={recipient.address}
-                        size={32}
-                        className="flex-shrink-0"
-                      />
-                    </div>
-
-                    <div className="flex-1 min-w-0 text-left">
-                      <div className="flex items-start">
-                        <div className="flex-1">
-                          <div className="flex items-center">
-                            <span className="text-sm font-medium text-gray-900 dark:text-white">
+                  <div key={recipient.address}>
+                    <button
+                      type="button"
+                      className={`w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors ${
+                        isHighlighted
+                          ? "trails-list-item-selected border border-blue-200 dark:border-blue-800"
+                          : "trails-text-primary trails-hover-bg"
+                      }`}
+                      onClick={() => handleRecentRecipientSelect(recipient)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault()
+                          handleRecentRecipientSelect(recipient)
+                        }
+                      }}
+                      aria-label={`Select recipient ${recipient.ensName || recipient.address}`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <Identicon
+                          value={recipient.address}
+                          size={32}
+                          className="flex-shrink-0"
+                        />
+                        <div className="text-left">
+                          <div className="flex items-center space-x-1">
+                            <span className="text-sm font-bold">
                               {truncateAddress(recipient.address, 8, 4)}
                             </span>
-                            <button
-                              type="button"
-                              onClick={(e) =>
+                            <div
+                              onClick={(e) => {
+                                e.preventDefault()
+                                e.stopPropagation()
                                 handleCopyAddress(recipient.address, e)
-                              }
-                              className={`ml-1 p-0.5 rounded opacity-0 group-hover:opacity-100 transition-all duration-200 cursor-pointer ${
+                              }}
+                              onMouseDown={(e) => e.stopPropagation()}
+                              onMouseUp={(e) => e.stopPropagation()}
+                              className={`p-0.5 rounded transition-all duration-200 cursor-pointer z-10 relative ${
                                 copiedAddress === recipient.address
-                                  ? "bg-green-100 dark:bg-green-900/30 opacity-100"
+                                  ? "bg-green-100 dark:bg-green-900/30"
                                   : "hover:bg-gray-200 dark:hover:bg-gray-600"
                               }`}
                               title={
                                 copiedAddress === recipient.address
                                   ? "Copied!"
-                                  : "Copy address"
+                                  : "Copy full address"
                               }
                             >
                               {copiedAddress === recipient.address ? (
@@ -308,7 +313,7 @@ export const Recipients: React.FC<RecipientsProps> = ({
                               ) : (
                                 <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
                               )}
-                            </button>
+                            </div>
                           </div>
                           {recipient.ensName && (
                             <div className="text-xs text-gray-500 dark:text-gray-400">
@@ -317,112 +322,13 @@ export const Recipients: React.FC<RecipientsProps> = ({
                           )}
                         </div>
                       </div>
-                    </div>
-                  </button>
-                )
-              })}
-            </div>
-          </div>
-        )}
-
-        {/* Connected Wallets - only show when no input */}
-        {connectedWallets.length > 0 && !recipientInput.trim() && (
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <div className="text-sm font-medium text-gray-700 dark:text-gray-300 text-left">
-                Connected Wallets
-              </div>
-            </div>
-            <div className="space-y-1 max-h-48 overflow-y-auto trails-scrollbar">
-              {connectedWallets.map((wallet) => {
-                // Only highlight if search field contains a valid address that matches this wallet
-                const searchQuery = recipientInput.trim()
-                const isHighlighted =
-                  searchQuery &&
-                  isAddress(searchQuery) &&
-                  wallet.address.toLowerCase() ===
-                    searchQuery.trim().toLowerCase()
-
-                return (
-                  <button
-                    key={wallet.address}
-                    type="button"
-                    className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-border-radius-list-button cursor-pointer group ${
-                      isHighlighted
-                        ? "trails-list-item-selected border border-blue-200 dark:border-blue-800"
-                        : "trails-list-item"
-                    }`}
-                    onClick={() => handleConnectedWalletSelect(wallet.address)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault()
-                        handleConnectedWalletSelect(wallet.address)
-                      }
-                    }}
-                    aria-label={`Select wallet ${wallet.walletConfig?.name || "Wallet"} - ${wallet.address}`}
-                  >
-                    {/* Identicon */}
-                    <div className="relative flex-shrink-0 mr-2">
-                      <Identicon
-                        value={wallet.address}
-                        size={32}
-                        className="flex-shrink-0"
-                      />
-                    </div>
-
-                    <div className="flex-1 min-w-0 text-left">
-                      <div className="flex items-start">
-                        <div className="flex-1">
-                          <div className="flex items-center">
-                            <span className="text-sm font-medium text-gray-900 dark:text-white">
-                              {truncateAddress(wallet.address, 8, 4)}
-                            </span>
-                            <button
-                              type="button"
-                              onClick={(e) =>
-                                handleCopyAddress(wallet.address, e)
-                              }
-                              className={`ml-1 p-0.5 rounded opacity-0 group-hover:opacity-100 transition-all duration-200 cursor-pointer ${
-                                copiedAddress === wallet.address
-                                  ? "bg-green-100 dark:bg-green-900/30 opacity-100"
-                                  : "hover:bg-gray-200 dark:hover:bg-gray-600"
-                              }`}
-                              title={
-                                copiedAddress === wallet.address
-                                  ? "Copied!"
-                                  : "Copy address"
-                              }
-                            >
-                              {copiedAddress === wallet.address ? (
-                                <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 className="text-xs text-gray-500 dark:text-gray-400">
-                            {wallet.walletConfig?.name ||
-                              wallet.connector?.name ||
-                              "Wallet"}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </button>
+                      <ChevronRight className="w-5 h-5 text-gray-400" />
+                    </button>
+                    {/* Add divider between items */}
+                    {index < recentRecipients.length - 1 && (
+                      <div className="border-b border-gray-200 dark:border-gray-700"></div>
+                    )}
+                  </div>
                 )
               })}
             </div>

package/src/widget/components/RequiredPropsError.tsx

@@ -0,0 +1,33 @@
+import type React from "react"
+import { ErrorDisplay } from "./ErrorDisplay.js"
+
+interface RequiredPropsErrorProps {
+  missingProps: string[]
+  componentName: string
+}
+
+export const RequiredPropsError: React.FC<RequiredPropsErrorProps> = ({
+  missingProps,
+  componentName,
+}) => {
+  if (missingProps.length === 0) {
+    return null
+  }
+
+  const isMultiple = missingProps.length > 1
+
+  const prettifiedMessage = `Missing required ${componentName} prop${isMultiple ? "s" : ""}`
+
+  const detailedMessage = `The following required props are missing for the ${componentName} component:
+${missingProps.map((prop) => `- ${prop}`).join("\n")}
+
+Please ensure all required props are provided when rendering the ${componentName} component.`
+
+  return (
+    <ErrorDisplay
+      errorPrettified={prettifiedMessage}
+      error={detailedMessage}
+      severity="error"
+    />
+  )
+}

package/src/widget/components/ScreenHeader.tsx

@@ -2,6 +2,7 @@ import { ChevronLeft } from "lucide-react"
 import type React from "react"
 import { useAccount } from "wagmi"
 import AccountActionsDropdown from "./AccountActionsDropdown.js"
+import { useWidgetProps } from "../hooks/useWidgetProps.js"
 
 interface ScreenHeaderProps {
   onBack?: () => void
@@ -20,6 +21,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
   showAccountActions = false,
 }) => {
   const { isConnected } = useAccount()
+  const { renderInline } = useWidgetProps()
   return (
     <div className="relative w-full mb-4">
       {/* Left side - Back button (absolute positioned) */}
@@ -48,7 +50,9 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
 
       {/* 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">
+        <div
+          className={`absolute ${renderInline ? "right-0" : "right-8"} 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>
           )}

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
@@ -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>