0xtrails 0.2.2 → 0.2.5

package/src/widget/components/SwapSettings.tsx

@@ -1,12 +1,10 @@
 import { Settings } from "lucide-react"
 import type React from "react"
 import { useEffect, useRef, useState } from "react"
-import { SwapDisplayMode } from "./SwapDisplayMode.js"
+// 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/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() || "?"
 

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

@@ -120,7 +120,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
     // Then apply search filtering
     if (!searchQuery.trim()) return true
 
-    const query = searchQuery.toLowerCase()
+    const query = searchQuery.trim().toLowerCase()
     return (
       recentToken.symbol.toLowerCase().includes(query) ||
       recentToken.name.toLowerCase().includes(query) ||
@@ -295,6 +295,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                           symbol={symbol}
                           imageUrl={imageUrl}
                           chainId={chainId}
+                          contractAddress={contractAddress}
                           size={32}
                         />
                       ) : (

package/src/widget/components/TokenSelectorButton.tsx

@@ -0,0 +1,75 @@
+import { ChevronRight } from "lucide-react"
+import type React from "react"
+import { useMemo } from "react"
+import { TokenImage } from "./TokenImage.js"
+import { getChainInfo } from "../../chains.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-2 trails-border-radius-input px-2.5 py-1.5 border transition-colors",
+  unselectable = false,
+}) => {
+  const displayChainId = token?.chainId || chainId
+
+  const chainInfo = useMemo(() => {
+    return displayChainId ? getChainInfo(displayChainId) : null
+  }, [displayChainId])
+
+  return (
+    <button
+      type="button"
+      onClick={unselectable ? undefined : onSelect}
+      disabled={unselectable}
+      className={`${className} ${
+        token
+          ? "trails-bg-card hover:trails-hover-bg trails-border-primary"
+          : "bg-blue-500 hover:bg-blue-600 border-blue-500 text-white"
+      } ${unselectable ? "cursor-default" : "cursor-pointer"}`}
+    >
+      {token ? (
+        <>
+          <TokenImage
+            symbol={token.symbol}
+            imageUrl={token.imageUrl}
+            chainId={displayChainId}
+            contractAddress={token.contractAddress}
+            size={28}
+          />
+          <div className="flex flex-col items-start">
+            <span className="font-bold trails-text-primary text-sm">
+              {token.symbol}
+            </span>
+            {chainInfo && (
+              <span className="text-xs trails-text-muted">
+                {chainInfo.name}
+              </span>
+            )}
+          </div>
+          {!unselectable && (
+            <ChevronRight className="w-3.5 h-3.5 trails-text-muted" />
+          )}
+        </>
+      ) : (
+        <>
+          <span className="font-medium text-sm text-white">Select Token</span>
+          {!unselectable && <ChevronRight className="w-3.5 h-3.5 text-white" />}
+        </>
+      )}
+    </button>
+  )
+}

package/src/widget/components/UserPreferences.tsx

@@ -1,10 +1,10 @@
 import { ChevronDown, RotateCcw } from "lucide-react"
 import type React from "react"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
-import { useSwapSettings } from "../hooks/useSwapSettings.js"
 import { useThemePreference } from "../hooks/useTheme.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
 import { ScreenHeader } from "./ScreenHeader.js"
+import { SlippageToleranceSettings } from "./SlippageToleranceSettings.js"
 import { logger } from "../../logger.js"
 
 interface UserPreferencesProps {
@@ -14,7 +14,6 @@ interface UserPreferencesProps {
 export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
   const { isBalanceVisible, toggleBalanceVisible, resetBalanceVisible } =
     useBalanceVisible()
-  const { resetSwapSettings } = useSwapSettings()
   const { selectedTheme, setSelectedTheme, resetThemePreference } =
     useThemePreference()
   const { customCss, theme: widgetTheme } = useWidgetProps()
@@ -31,7 +30,6 @@ export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
     try {
       // Reset all preferences using their respective hook methods
       resetBalanceVisible()
-      resetSwapSettings()
       resetThemePreference()
 
       logger.console.log(
@@ -51,7 +49,6 @@ export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
         headerContent="User Preferences"
         headerContentAlign="left"
         onBack={onBack}
-        showAccountActions={false}
       />
 
       <div className="space-y-6">
@@ -75,26 +72,6 @@ export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
           </button>
         </div>
 
-        {/* Simple Swap UI Setting */}
-        {/* <div className="flex items-center justify-between">
-          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-            Simple Swap UI
-          </span>
-          <button
-            type="button"
-            onClick={toggleSimpleSwapMode}
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
-              isSimpleSwapMode ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-700"
-            }`}
-          >
-            <span
-              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                isSimpleSwapMode ? "translate-x-6" : "translate-x-1"
-              }`}
-            />
-          </button>
-        </div> */}
-
         {/* Theme Setting */}
         <div className="flex items-center justify-between">
           <span
@@ -136,6 +113,11 @@ export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
           </div>
         </div>
 
+        {/* Slippage Tolerance Settings */}
+        <div className="pt-2">
+          <SlippageToleranceSettings />
+        </div>
+
         {/* Reset Preferences Button */}
         <div className="pt-4 dark:border-gray-700">
           <button

package/src/widget/components/WaasFeeOptions.tsx

@@ -0,0 +1,331 @@
+import { useEffect, useState } from "react"
+import { useWaasFeeOptions } from "@0xsequence/connect"
+import { TokenImage } from "./TokenImage.js"
+import { ChevronDown, ChevronUp } from "lucide-react"
+import { formatUnits } from "viem"
+
+// Define types based on the @0xsequence/connect documentation
+interface FeeToken {
+  symbol: string
+  contractAddress?: string
+  name?: string
+  decimals?: number
+  imageUrl?: string
+}
+
+interface FeeOption {
+  token: FeeToken
+  amount?: string
+  amountUSD?: number
+}
+
+interface FeeOptionExtended extends FeeOption {
+  balance: string
+  balanceFormatted: string
+  hasEnoughBalanceForFee: boolean
+}
+
+interface WaasFeeOptionsProps {
+  chainId?: number
+  setIsFeeOptionConfirmed: (isFeeOptionConfirmed: boolean) => void
+  onFeeOptionsLoaded?: () => void
+}
+
+export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
+  chainId,
+  setIsFeeOptionConfirmed,
+  onFeeOptionsLoaded,
+}) => {
+  const [
+    pendingFeeOptionConfirmation,
+    confirmPendingFeeOption,
+    rejectPendingFeeOption,
+  ] = useWaasFeeOptions({ chainIdOverride: chainId })
+
+  const [selectedFeeOptionTokenName, setSelectedFeeOptionTokenName] =
+    useState<string>()
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  // Debug logging
+  useEffect(() => {
+    console.log("[trails-sdk] WaasFeeOptions component mounted/updated:", {
+      chainId,
+      pendingFeeOptionConfirmation: !!pendingFeeOptionConfirmation,
+      optionsCount: pendingFeeOptionConfirmation?.options?.length || 0,
+      hasOptions: !!pendingFeeOptionConfirmation?.options,
+      confirmationId: pendingFeeOptionConfirmation?.id,
+      isLoading,
+      isProcessing,
+    })
+  }, [chainId, pendingFeeOptionConfirmation, isLoading, isProcessing])
+
+  // Log when component renders but has no pending confirmation
+  useEffect(() => {
+    if (!pendingFeeOptionConfirmation) {
+      console.log(
+        "[trails-sdk] WaasFeeOptions: No pending fee confirmation - this is normal until a transaction requires fee payment",
+      )
+    }
+  }, [pendingFeeOptionConfirmation])
+
+  // Manage loading state
+  useEffect(() => {
+    if (
+      pendingFeeOptionConfirmation &&
+      pendingFeeOptionConfirmation.options?.length > 0
+    ) {
+      setIsLoading(false)
+    } else if (
+      pendingFeeOptionConfirmation &&
+      (!pendingFeeOptionConfirmation.options ||
+        pendingFeeOptionConfirmation.options.length === 0)
+    ) {
+      setIsLoading(true)
+    }
+  }, [pendingFeeOptionConfirmation])
+
+  // Initialize with first option when fee options become available
+  useEffect(() => {
+    if (pendingFeeOptionConfirmation) {
+      console.log(
+        "[trails-sdk] Pending fee options: ",
+        pendingFeeOptionConfirmation.options,
+      )
+
+      // Notify parent that fee options are loaded
+      if (
+        onFeeOptionsLoaded &&
+        pendingFeeOptionConfirmation.options?.length > 0
+      ) {
+        onFeeOptionsLoaded()
+      }
+
+      // Select the first fee option by default
+      if (pendingFeeOptionConfirmation.options.length > 0) {
+        const firstOption = pendingFeeOptionConfirmation.options.filter(
+          (option: any) => option.hasEnoughBalanceForFee,
+        )[0]
+        if (firstOption?.token?.symbol) {
+          setSelectedFeeOptionTokenName(firstOption.token.symbol)
+        }
+      }
+    }
+  }, [pendingFeeOptionConfirmation, onFeeOptionsLoaded])
+
+  // Handle fee option selection and confirmation
+  const handleConfirmFee = async (tokenAddress: string | null) => {
+    if (pendingFeeOptionConfirmation && !isProcessing) {
+      setIsProcessing(true)
+      try {
+        confirmPendingFeeOption(pendingFeeOptionConfirmation.id, tokenAddress)
+        setIsFeeOptionConfirmed(true)
+      } finally {
+        setIsProcessing(false)
+      }
+    }
+  }
+
+  // Handle fee option rejection
+  const handleRejectFee = async () => {
+    if (pendingFeeOptionConfirmation && !isProcessing) {
+      setIsProcessing(true)
+      try {
+        rejectPendingFeeOption(pendingFeeOptionConfirmation.id)
+      } finally {
+        setIsProcessing(false)
+      }
+    }
+  }
+
+  // Don't render if no pending fee confirmation
+  if (!pendingFeeOptionConfirmation) {
+    return null
+  }
+
+  // Show loading when we have confirmation but no options yet
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <div className="flex flex-col items-center space-y-3">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-trails-primary"></div>
+          <p className="text-sm trails-text-muted">Loading fee options...</p>
+        </div>
+      </div>
+    )
+  }
+
+  const selectedOption = pendingFeeOptionConfirmation.options
+    .filter((option: any) => option.hasEnoughBalanceForFee)
+    .find((option) => option.token.symbol === selectedFeeOptionTokenName) as
+    | FeeOptionExtended
+    | undefined
+
+  return (
+    <div className="space-y-2">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="text-sm font-medium trails-text-primary">
+          Select Fee Payment Token
+        </div>
+        <button
+          type="button"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex items-center space-x-1 text-xs trails-text-muted hover:trails-text-primary transition-colors cursor-pointer"
+        >
+          <span>{isExpanded ? "Hide" : "Show"} options</span>
+          {isExpanded ? (
+            <ChevronUp className="w-3 h-3" />
+          ) : (
+            <ChevronDown className="w-3 h-3" />
+          )}
+        </button>
+      </div>
+
+      {/* Selected Option Display */}
+      {selectedOption?.hasEnoughBalanceForFee && (
+        <div className="trails-bg-secondary trails-border-radius-container p-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <TokenImage
+                symbol={selectedOption.token.symbol}
+                imageUrl={(selectedOption.token as any).logoURL}
+                chainId={chainId}
+                size={20}
+              />
+              <div className="text-left">
+                <div className="font-medium trails-text-primary text-sm">
+                  {selectedOption.token.symbol}
+                </div>
+                <div className="text-xs trails-text-muted">
+                  {selectedOption.token.contractAddress
+                    ? `${selectedOption.token.contractAddress.slice(0, 6)}...${selectedOption.token.contractAddress.slice(-4)}`
+                    : "Native Token"}
+                </div>
+              </div>
+            </div>
+            {/* Display balance info if available */}
+            {selectedOption && "balanceFormatted" in selectedOption && (
+              <div className="text-right">
+                <div className="text-xs trails-text-muted">
+                  Balance: {String(selectedOption.balanceFormatted)}
+                </div>
+                {!selectedOption.hasEnoughBalanceForFee && (
+                  <div className="text-xs text-red-500">
+                    Insufficient balance
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Expanded Options */}
+      {isExpanded && (
+        <div className="space-y-2">
+          {pendingFeeOptionConfirmation.options
+            .filter((option: any) => option.hasEnoughBalanceForFee)
+            .map((option) => (
+              <label
+                key={option.token.symbol || option.token.contractAddress}
+                className={`flex items-center space-x-3 p-3 rounded-lg border cursor-pointer transition-colors ${
+                  selectedFeeOptionTokenName === option.token.symbol
+                    ? "trails-bg-primary/10 border-trails-primary"
+                    : "trails-bg-secondary hover:trails-hover-bg border-transparent"
+                }`}
+              >
+                <input
+                  type="radio"
+                  name="feeOption"
+                  checked={selectedFeeOptionTokenName === option.token.symbol}
+                  onChange={() =>
+                    setSelectedFeeOptionTokenName(option.token.symbol)
+                  }
+                  className="w-4 h-4 text-trails-primary focus:ring-trails-primary"
+                />
+                <div className="flex items-center space-x-2 flex-1">
+                  <TokenImage
+                    symbol={option.token.symbol}
+                    imageUrl={(option.token as any).logoURL}
+                    chainId={chainId}
+                    size={20}
+                  />
+                  <div className="flex-1 text-left">
+                    <div className="font-medium trails-text-primary text-sm">
+                      {option.token.symbol}
+                    </div>
+                    <div className="text-xs trails-text-muted">
+                      {option.token.contractAddress
+                        ? `${option.token.contractAddress.slice(0, 6)}...${option.token.contractAddress.slice(-4)}`
+                        : "Native Token"}
+                    </div>
+                  </div>
+                </div>
+                {/* Display balance info if available */}
+                {"balanceFormatted" in option && (
+                  <div className="text-right">
+                    <div className="text-xs trails-text-muted">
+                      Balance: {String(option.balanceFormatted)}
+                    </div>
+                    <div className="text-xs trails-text-muted">
+                      Cost:{" "}
+                      {String(
+                        formatUnits(
+                          BigInt(option.value),
+                          option.token.decimals || 18,
+                        ),
+                      )}
+                    </div>
+                    {!("hasEnoughBalanceForFee" in option) ||
+                    !option.hasEnoughBalanceForFee ? (
+                      <div className="text-xs text-red-500">Insufficient</div>
+                    ) : null}
+                  </div>
+                )}
+              </label>
+            ))}
+        </div>
+      )}
+
+      {/* Action Buttons */}
+      <div className="flex space-x-3">
+        <button
+          type="button"
+          onClick={() =>
+            handleConfirmFee(selectedOption?.token.contractAddress || null)
+          }
+          disabled={!selectedOption || isProcessing}
+          className="flex-1 py-3 px-6 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 disabled:text-gray-500 text-white font-semibold rounded-lg transition-all duration-200 cursor-pointer disabled:cursor-not-allowed shadow-sm hover:shadow-md disabled:shadow-none flex items-center justify-center"
+        >
+          {isProcessing ? (
+            <>
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+              Processing...
+            </>
+          ) : (
+            "Confirm Fee"
+          )}
+        </button>
+        <button
+          type="button"
+          onClick={handleRejectFee}
+          disabled={isProcessing}
+          className="px-6 py-3 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 text-gray-700 font-semibold rounded-lg transition-all duration-200 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 flex items-center justify-center border border-gray-300"
+        >
+          {isProcessing ? (
+            <>
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-500 mr-2"></div>
+              Processing...
+            </>
+          ) : (
+            "Cancel"
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default WaasFeeOptions