0xtrails 0.6.6 → 0.7.0

package/src/widget/components/WaasFeeOptions.tsx

@@ -1,11 +1,15 @@
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { useWaasFeeOptions } from "@0xsequence/connect"
 import { TokenImage } from "./TokenImage.js"
 import { ChevronDown, ChevronUp, Copy } from "lucide-react"
 import { formatUnits } from "viem"
+import { logger, type Token } from "../../index.js"
+import { formatAmountDisplay } from "../../tokenBalances.js"
+import Tooltip from "./Tooltip.js"
+import { truncateAddress } from "../../utils.js"
 
-// Define types based on the @0xsequence/connect documentation
-interface FeeToken {
+// WaaS-specific fee types based on the @0xsequence/connect documentation
+interface WaasFeeToken {
   symbol: string
   contractAddress?: string
   name?: string
@@ -13,20 +17,115 @@ interface FeeToken {
   imageUrl?: string
 }
 
-interface FeeOption {
-  token: FeeToken
+interface WaasFeeOption {
+  token: WaasFeeToken
   amount?: string
   amountUSD?: number
 }
 
-interface FeeOptionExtended extends FeeOption {
+interface WaasFeeOptionExtended extends WaasFeeOption {
   balance: string
   balanceFormatted: string
   hasEnoughBalanceForFee: boolean
 }
 
+const getTokenAddressLabel = (token?: WaasFeeToken) => {
+  if (token?.contractAddress) {
+    return truncateAddress(token.contractAddress)
+  }
+  return "Native Token"
+}
+
+type FeeDisplayValues = {
+  feeAmountFormatted: string
+}
+
+interface FeeOptionCardProps {
+  option: any
+  chainId?: number
+  feeDisplay: FeeDisplayValues
+  isSelected?: boolean
+  isDisabled?: boolean
+  showRadio?: boolean
+  radioName?: string
+  onSelect?: () => void
+}
+
+const FeeOptionCard: React.FC<FeeOptionCardProps> = ({
+  option,
+  chainId,
+  feeDisplay,
+  isSelected = false,
+  isDisabled = false,
+  showRadio = false,
+  radioName = "feeOption",
+  onSelect,
+}) => {
+  const handleSelect = (
+    event?:
+      | React.MouseEvent<HTMLDivElement>
+      | React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    event?.stopPropagation()
+    if (isDisabled) return
+    onSelect?.()
+  }
+
+  return (
+    <div
+      className={`px-4 py-3 flex flex-col space-y-3 border border-gray-200 dark:border-gray-800 rounded-lg transition-all duration-200 ${
+        isDisabled
+          ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900/30"
+          : "bg-white dark:bg-gray-900 hover:shadow-sm"
+      }`}
+      role={showRadio ? "radio" : undefined}
+      aria-disabled={isDisabled}
+      onClick={showRadio ? handleSelect : undefined}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-center space-x-3">
+          <TokenImage
+            symbol={option.token.symbol}
+            imageUrl={(option.token as any).logoURL}
+            chainId={chainId}
+            size={32}
+          />
+          <div className="ml-2 text-left">
+            <div className="text-sm font-semibold">{option.token.symbol}</div>
+            <div className="text-xs trails-text-muted">
+              {getTokenAddressLabel(option.token)}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center space-x-3">
+          <div className="text-right">
+            <div className="text-[10px] uppercase tracking-wide trails-text-muted">
+              Fee to pay
+            </div>
+            <div className="text-base font-semibold">
+              {feeDisplay.feeAmountFormatted} {option.token.symbol}
+            </div>
+          </div>
+          {showRadio && (
+            <input
+              type="radio"
+              name={radioName}
+              checked={isSelected}
+              disabled={isDisabled}
+              onChange={handleSelect}
+              className="w-4 h-4 text-trails-primary focus:ring-trails-primary"
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 interface WaasFeeOptionsProps {
   chainId?: number
+  originToken?: Token
+  originTokenAmount?: string
   setIsFeeOptionConfirmed: (isFeeOptionConfirmed: boolean) => void
   onFeeOptionsLoaded?: () => void
   setIsError?: (isError: boolean) => void
@@ -34,6 +133,8 @@ interface WaasFeeOptionsProps {
 
 export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
   chainId,
+  originToken,
+  originTokenAmount,
   setIsFeeOptionConfirmed,
   onFeeOptionsLoaded,
   setIsError,
@@ -51,23 +152,130 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
   const [isLoading, setIsLoading] = useState(false)
   const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
 
+  const originTokenAddress = useMemo(
+    () => originToken?.contractAddress?.toLowerCase() || null,
+    [originToken?.contractAddress],
+  )
+  const originAmountBigInt = useMemo(() => {
+    if (!originTokenAmount) {
+      return null
+    }
+
+    try {
+      return BigInt(originTokenAmount)
+    } catch (error) {
+      logger.console.error(
+        "[trails-sdk] Failed to parse origin token amount for fee comparison",
+        {
+          originTokenAmount,
+          error,
+        },
+      )
+      return null
+    }
+  }, [originTokenAmount])
+
+  const isFeeOptionSameAsOriginToken = useCallback(
+    (option: any) => {
+      if (!originToken || !option?.token) {
+        return false
+      }
+
+      const optionAddress = option.token.contractAddress
+        ? option.token.contractAddress.toLowerCase()
+        : null
+
+      if (originTokenAddress && optionAddress) {
+        return originTokenAddress === optionAddress
+      }
+
+      return false
+    },
+    [originToken, originTokenAddress],
+  )
+
+  const isFeeOptionDisabledForOriginBalance = useCallback(
+    (option: any) => {
+      if (!originAmountBigInt || originAmountBigInt <= 0n) {
+        return false
+      }
+
+      if (!isFeeOptionSameAsOriginToken(option)) {
+        return false
+      }
+
+      if (!option?.balance || !option?.value) {
+        return false
+      }
+
+      try {
+        const optionBalance = BigInt(option.balance)
+        const optionFeeValue = BigInt(option.value)
+        const combinedRequirement = optionFeeValue + originAmountBigInt
+
+        return optionBalance < combinedRequirement
+      } catch (error) {
+        logger.console.error(
+          "[trails-sdk] Failed to compare origin amount plus fee with balance",
+          {
+            balance: option?.balance,
+            value: option?.value,
+            originAmount: originTokenAmount,
+            error,
+          },
+        )
+        return false
+      }
+    },
+    [isFeeOptionSameAsOriginToken, originAmountBigInt, originTokenAmount],
+  )
+
+  const getFeeDisplayValues = useCallback((option: any) => {
+    const decimals = option.token.decimals ?? 18
+
+    const rawValue = option.value ?? option.amount ?? "0"
+
+    let feeAmountFormatted = "0"
+    try {
+      const formattedUnits = formatUnits(BigInt(rawValue), decimals)
+      feeAmountFormatted = formatAmountDisplay(formattedUnits, {
+        maxFractionDigits: Math.min(decimals, 6),
+        minFractionDigits: 0,
+      })
+    } catch (error) {
+      logger.console.warn("[trails-sdk] Failed to format fee option amount", {
+        error,
+        value: rawValue,
+        decimals,
+        token: option?.token?.symbol,
+      })
+    }
+
+    return {
+      feeAmountFormatted,
+    }
+  }, [])
+
   // 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,
-    })
+    logger.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(
+      logger.console.log(
         "[trails-sdk] WaasFeeOptions: No pending fee confirmation - this is normal until a transaction requires fee payment",
       )
     }
@@ -92,7 +300,7 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
   // Initialize with first option when fee options become available
   useEffect(() => {
     if (pendingFeeOptionConfirmation) {
-      console.log(
+      logger.console.log(
         "[trails-sdk] Pending fee options: ",
         pendingFeeOptionConfirmation.options,
       )
@@ -108,17 +316,31 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
         onFeeOptionsLoaded()
       }
 
-      // Select the first fee option by default
-      if (pendingFeeOptionConfirmation.options.length > 0) {
-        const firstOption = pendingFeeOptionConfirmation.options.filter(
+      if (
+        pendingFeeOptionConfirmation.options.length > 0 &&
+        !selectedFeeOptionTokenName
+      ) {
+        const firstAvailableOption = pendingFeeOptionConfirmation.options.find(
           (option: any) => option.hasEnoughBalanceForFee,
-        )[0]
-        if (firstOption?.token?.symbol) {
-          setSelectedFeeOptionTokenName(firstOption.token.symbol)
+        )
+        if (firstAvailableOption?.token?.symbol) {
+          setSelectedFeeOptionTokenName(firstAvailableOption.token.symbol)
         }
       }
     }
-  }, [pendingFeeOptionConfirmation, onFeeOptionsLoaded])
+  }, [
+    pendingFeeOptionConfirmation,
+    onFeeOptionsLoaded,
+    selectedFeeOptionTokenName,
+  ])
+
+  // Reset parent confirmation state whenever a new fee confirmation arrives
+  useEffect(() => {
+    if (pendingFeeOptionConfirmation?.id) {
+      setIsFeeOptionConfirmed(false)
+      setSelectedFeeOptionTokenName(undefined)
+    }
+  }, [pendingFeeOptionConfirmation?.id, setIsFeeOptionConfirmed])
 
   // Handle fee option selection and confirmation
   const handleConfirmFee = async (tokenAddress: string | null) => {
@@ -189,9 +411,17 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
   const selectedOption = pendingFeeOptionConfirmation.options
     .filter((option: any) => option.hasEnoughBalanceForFee)
     .find((option) => option.token.symbol === selectedFeeOptionTokenName) as
-    | FeeOptionExtended
+    | WaasFeeOptionExtended
     | undefined
 
+  const selectedOptionDisplayValues = selectedOption
+    ? getFeeDisplayValues(selectedOption)
+    : null
+
+  const shouldShowBalanceWarning = selectedOption
+    ? isFeeOptionDisabledForOriginBalance(selectedOption)
+    : false
+
   const hasTokenForFee = pendingFeeOptionConfirmation.options.find(
     (option: any) => option.hasEnoughBalanceForFee,
   )
@@ -319,135 +549,100 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
       </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>
-      )}
+      {selectedOption?.hasEnoughBalanceForFee &&
+        selectedOptionDisplayValues && (
+          <FeeOptionCard
+            option={selectedOption}
+            chainId={chainId}
+            feeDisplay={selectedOptionDisplayValues}
+            isSelected
+            isDisabled={shouldShowBalanceWarning}
+            showRadio={false}
+          />
+        )}
 
       {/* 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}
+            .map((option: any) => {
+              const optionDisabled = isFeeOptionDisabledForOriginBalance(option)
+              const feeDisplay = getFeeDisplayValues(option)
+              if (optionDisabled) {
+                return (
+                  <Tooltip
+                    key={option.token.symbol}
+                    message="Not enough balance to cover sell amount and fee"
+                  >
+                    <FeeOptionCard
+                      key={option.token.symbol || option.token.contractAddress}
+                      option={option}
+                      chainId={chainId}
+                      feeDisplay={feeDisplay}
+                      isSelected={
+                        selectedFeeOptionTokenName === option.token.symbol
+                      }
+                      isDisabled={optionDisabled}
+                      showRadio
+                      onSelect={() =>
+                        setSelectedFeeOptionTokenName(option.token.symbol)
+                      }
+                    />
+                  </Tooltip>
+                )
+              } else {
+                return (
+                  <FeeOptionCard
+                    key={option.token.symbol || option.token.contractAddress}
+                    option={option}
                     chainId={chainId}
-                    size={20}
+                    feeDisplay={feeDisplay}
+                    isSelected={
+                      selectedFeeOptionTokenName === option.token.symbol
+                    }
+                    isDisabled={optionDisabled}
+                    showRadio
+                    onSelect={() =>
+                      setSelectedFeeOptionTokenName(option.token.symbol)
+                    }
                   />
-                  <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>
+      <div className="flex flex-col space-y-3 sm:flex-row sm:space-y-0 sm:space-x-3">
+        {!shouldShowBalanceWarning && (
+          <div className="flex-1">
+            <button
+              type="button"
+              onClick={() =>
+                handleConfirmFee(selectedOption?.token.contractAddress || null)
+              }
+              disabled={!selectedOption || isProcessing}
+              className="w-full 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>
+          </div>
+        )}
         <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"
+          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 ${
+            shouldShowBalanceWarning ? "w-full sm:flex-1" : ""
+          }`}
         >
           {isProcessing ? (
             <>

package/src/widget/components/WalletConfirmation.tsx

@@ -7,6 +7,7 @@ import type { PrepareSendQuote } from "../../prepareSend.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { WaasFeeOptions } from "./WaasFeeOptions.js"
 import { useAccount } from "wagmi"
+import { logger } from "../../logger.js"
 
 interface WalletConfirmationProps {
   onBack?: () => void
@@ -56,7 +57,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
       connectorId.includes("waas") ||
       connectorId === "sequence-waas"
 
-    console.log("[trails-sdk] Sequence WaaS detection:", {
+    logger.console.log("[trails-sdk] Sequence WaaS detection:", {
       connectorName,
       connectorId,
       isSequenceWaas,
@@ -135,10 +136,14 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
             >
               <WaasFeeOptions
                 chainId={quote?.originChain.id}
+                originTokenAmount={quote?.originAmount}
+                originToken={quote?.originToken}
                 setIsFeeOptionConfirmed={setIsFeeOptionConfirmed}
                 setIsError={setFeeOptionsError}
                 onFeeOptionsLoaded={() => {
-                  console.log("[trails-sdk] Fee options loaded callback called")
+                  logger.console.log(
+                    "[trails-sdk] Fee options loaded callback called",
+                  )
                   setAreFeeOptionsLoaded(true)
                 }}
               />