0xtrails 0.2.4 → 0.2.6

package/src/widget/components/Tooltip.tsx

@@ -0,0 +1,51 @@
+import type React from "react"
+import { TooltipPrimitive } from "@0xsequence/design-system"
+import { useTheme } from "./ThemeProvider.js"
+
+interface TooltipProps {
+  message: string
+  children: React.ReactNode
+  className?: string
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  message,
+  children,
+  className = "",
+}) => {
+  const { isDark } = useTheme()
+
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root delayDuration={0}>
+        <TooltipPrimitive.Trigger asChild>
+          <div className={className}>{children}</div>
+        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            className="trails-border-radius-container px-3 py-2 text-xs font-medium shadow-lg z-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+            style={{
+              maxWidth: "400px",
+              wordWrap: "break-word",
+              whiteSpace: "normal",
+              overflowWrap: "break-word",
+              backgroundColor: isDark ? "#111827" : "#ffffff", // gray-900 or white
+              color: isDark ? "#ffffff" : "#000000", // white or black
+            }}
+            side="top"
+            align="center"
+            sideOffset={4}
+            alignOffset={0}
+          >
+            {message}
+            <TooltipPrimitive.Arrow
+              style={{ fill: isDark ? "#111827" : "#ffffff" }} // gray-900 or white
+            />
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}
+
+export default Tooltip

package/src/widget/components/TransferPendingVertical.tsx

@@ -483,7 +483,7 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
         }`}
       >
         <div className="mt-4">
-          <QuoteDetails quote={quote} showContent={true} />
+          <QuoteDetails quote={quote} showContent={true} compact={true} />
         </div>
       </div>
 

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,450 @@
+import { useEffect, useState } from "react"
+import { useWaasFeeOptions } from "@0xsequence/connect"
+import { TokenImage } from "./TokenImage.js"
+import { ChevronDown, ChevronUp, Copy } 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
+  setIsError?: (isError: boolean) => void
+}
+
+export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
+  chainId,
+  setIsFeeOptionConfirmed,
+  onFeeOptionsLoaded,
+  setIsError,
+}) => {
+  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)
+  const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
+
+  // 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(() => {
+    setIsError?.(false)
+    if (pendingFeeOptionConfirmation) {
+      console.log(
+        "[trails-sdk] Pending fee options: ",
+        pendingFeeOptionConfirmation.options,
+      )
+
+      // Notify parent that fee options are loaded
+      if (
+        onFeeOptionsLoaded &&
+        pendingFeeOptionConfirmation.options?.length > 0 &&
+        pendingFeeOptionConfirmation.options.find(
+          (option: any) => option.hasEnoughBalanceForFee,
+        )
+      ) {
+        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, setIsError])
+
+  // 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)
+      }
+    }
+  }
+
+  // Handle copy address to clipboard
+  const handleCopyAddress = async (address: string, e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(address)
+      setCopiedAddress(address)
+      setTimeout(() => setCopiedAddress(null), 2000)
+    } catch (error) {
+      try {
+        const textArea = document.createElement("textarea")
+        textArea.value = address
+        document.body.appendChild(textArea)
+        textArea.select()
+        document.execCommand("copy")
+        document.body.removeChild(textArea)
+        setCopiedAddress(address)
+        setTimeout(() => setCopiedAddress(null), 2000)
+      } catch (fallbackError) {
+        console.error("Fallback copy failed:", fallbackError)
+      }
+    }
+  }
+
+  // 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
+
+  const hasTokenForFee = pendingFeeOptionConfirmation.options.find(
+    (option: any) => option.hasEnoughBalanceForFee,
+  )
+
+  if (!hasTokenForFee) {
+    setIsError?.(true)
+  }
+
+  if (!hasTokenForFee) {
+    return (
+      <div className="space-y-4 py-6">
+        <div className="text-center space-y-1">
+          <p className="text-xs trails-text-muted">
+            Fund your wallet with one of the following tokens
+          </p>
+        </div>
+
+        <div className="flex flex-col space-y-2">
+          {pendingFeeOptionConfirmation.options.map((option: any) => {
+            const contractAddress = option.token.contractAddress
+
+            return (
+              <div
+                key={option.token.symbol || contractAddress}
+                className="flex items-center space-x-3 p-3 trails-bg-secondary trails-border-radius-container border border-transparent"
+              >
+                <div className="flex items-center shrink-0">
+                  <TokenImage
+                    symbol={option.token.symbol}
+                    imageUrl={(option.token as any).logoURL}
+                    chainId={chainId}
+                    size={32}
+                  />
+                </div>
+                <div className="flex-1 min-w-0 flex flex-col items-start">
+                  <span className="text-sm font-bold trails-text-primary leading-tight">
+                    {option.token.symbol}
+                  </span>
+                  {contractAddress ? (
+                    <div className="flex items-center space-x-1.5 mt-0.5">
+                      <span className="text-xs trails-text-muted leading-tight">
+                        {contractAddress.slice(0, 4)}...
+                        {contractAddress.slice(-4)}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={(e) => handleCopyAddress(contractAddress, e)}
+                        className="shrink-0 p-0.5 rounded transition-colors cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center justify-center"
+                        title={
+                          copiedAddress === contractAddress
+                            ? "Copied!"
+                            : "Copy 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"
+                          >
+                            <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 trails-text-muted mt-0.5 leading-tight">
+                      Native Token
+                    </span>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+
+  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 text-gray-500 dark:text-gray-400">
+                  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 text-gray-500 dark:text-gray-400">
+                      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