0xtrails 0.1.13 → 0.2.1

package/src/widget/components/FeeOptions.tsx

@@ -1,150 +1,215 @@
-import { TokenImage } from "./TokenImage.js"
 import { ChevronDown } from "lucide-react"
 import type React from "react"
-import { useEffect, useMemo, useRef, useState } from "react"
-import { formatRawAmount } from "../../tokenBalances.js"
-
-export type FeeOption = {
-  token: {
-    chainId: number
-    name: string
-    symbol: string
-    type: string
-    decimals: number
-    logoURL: string
-    contractAddress: string | null
-    tokenID: string | null
-  }
-  to: string
-  value: string
-  gasLimit: number
+import { useRef, useState } from "react"
+import { formatUsdAmountDisplay, formatRawAmount } from "../../tokenBalances.js"
+import {
+  FeeOption,
+  type FeeOption as EnhancedFeeOptionType,
+} from "./FeeOption.js"
+import { logger } from "../../logger.js"
+import { getChainInfo } from "../../chains.js"
+import { TokenImage } from "./TokenImage.js"
+import { getTokenImageUrl } from "../../tokens.js"
+import { zeroAddress } from "viem"
+
+// Original FeeOption type from useSendForm hook
+type OriginalFeeOption = {
+  tokenAddress: string
+  tokenSymbol: string
+  tokenDecimals: number
+  amount: string
+  amountUSD: number
+  notEnoughBalance?: boolean
+  tokenImageUrl?: string
+  chainId?: number
 }
 
 interface FeeOptionsProps {
-  options: FeeOption[]
-  selectedOption?: FeeOption
-  onSelect: (option: FeeOption) => void
+  feeOptions: OriginalFeeOption[]
+  selectedFeeToken: OriginalFeeOption | null
+  setSelectedFeeToken: (token: OriginalFeeOption | null) => void
+  chainId?: number
 }
 
-// Enable once we have a way to pay fees with other tokens
-const DISABLED_FEE_OPTIONS = true
-
 export const FeeOptions: React.FC<FeeOptionsProps> = ({
-  options,
-  selectedOption,
-  onSelect,
+  feeOptions,
+  selectedFeeToken,
+  setSelectedFeeToken,
+  chainId,
 }) => {
-  if (DISABLED_FEE_OPTIONS) return null
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-
-  const formattedFeeAmount = useMemo(() => {
-    if (!selectedOption) return "0.00"
-    return formatRawAmount(selectedOption.value, selectedOption.token.decimals)
-  }, [selectedOption])
-
-  // Calculate USD value of fee
-  const feeUsdValue = useMemo(() => {
-    if (!selectedOption) return ""
-    return "" // TODO
-  }, [selectedOption])
-
-  // Set first option as default if none selected
-  useEffect(() => {
-    if (!selectedOption && options.length > 0) {
-      onSelect(options[0]!)
-    }
-  }, [selectedOption, options, onSelect])
+  const [isOpen, setIsOpen] = useState(false)
+  const accordionRef = useRef<HTMLDivElement>(null)
 
-  if (!options?.length) {
+  // Don't render if no fee options available
+  if (!feeOptions || feeOptions.length === 0) {
     return null
   }
 
+  // Enhance ALL fee options with formatted values and image URLs (including native gas)
+  const enhancedFeeOptions: EnhancedFeeOptionType[] = feeOptions.map(
+    (option) => ({
+      ...option,
+      amountFormatted: `${formatRawAmount(option.amount, option.tokenDecimals)} ${option.tokenSymbol}`,
+      amountUsdDisplay: formatUsdAmountDisplay(option.amountUSD),
+      tokenImageUrl: getTokenImageUrl({
+        chainId: option.chainId || chainId, // Use fee option's chain ID, fallback to prop
+        contractAddress: option.tokenAddress,
+        symbol: option.tokenSymbol,
+      }),
+    }),
+  )
+
+  // Find native gas option (zero address) for header display
+  const nativeGasOption = enhancedFeeOptions.find(
+    (opt) => opt.tokenAddress.toLowerCase() === zeroAddress.toLowerCase(),
+  )
+
+  const handleFeeTokenSelect = (option: EnhancedFeeOptionType) => {
+    // Convert back to original format for the parent component
+    const originalOption: OriginalFeeOption = {
+      tokenAddress: option.tokenAddress,
+      tokenSymbol: option.tokenSymbol,
+      tokenDecimals: option.tokenDecimals,
+      amount: option.amount,
+      amountUSD: option.amountUSD,
+    }
+
+    // For native gas (zero address), set to null to trigger non-gasless flow
+    if (option.tokenAddress.toLowerCase() === zeroAddress.toLowerCase()) {
+      setSelectedFeeToken(null)
+      logger.console.log(
+        "[trails-sdk] [FEE-SELECT] Selected native gas fee option",
+      )
+    } else {
+      setSelectedFeeToken(originalOption)
+      logger.console.log(
+        "[trails-sdk] [FEE-SELECT] Selected ERC20 fee option:",
+        originalOption,
+      )
+    }
+
+    setIsOpen(false)
+  }
+
+  // Get display text and image for selected option
+  const getSelectedDisplayText = () => {
+    if (
+      selectedFeeToken === null ||
+      selectedFeeToken?.tokenAddress?.toLowerCase() ===
+        zeroAddress.toLowerCase()
+    ) {
+      // Native gas selected - use native gas option data
+      const nativeSymbol =
+        nativeGasOption?.tokenSymbol ||
+        (chainId ? getNativeSymbol(chainId) : "ETH")
+      const nativeImageUrl = getTokenImageUrl({
+        chainId,
+        contractAddress: zeroAddress,
+        symbol: nativeSymbol,
+      })
+      const amountDisplay = nativeGasOption
+        ? `${formatRawAmount(nativeGasOption.amount, nativeGasOption.tokenDecimals)} ${nativeGasOption.tokenSymbol}`
+        : ""
+      const usdDisplay = nativeGasOption
+        ? formatUsdAmountDisplay(nativeGasOption.amountUSD)
+        : ""
+      return {
+        title: nativeSymbol,
+        amountDisplay,
+        usdDisplay,
+        symbol: nativeSymbol,
+        imageUrl: nativeImageUrl,
+      }
+    } else {
+      const tokenImageUrl = getTokenImageUrl({
+        chainId: selectedFeeToken.chainId || chainId, // Use fee token's chain ID, fallback to prop
+        contractAddress: selectedFeeToken.tokenAddress,
+        symbol: selectedFeeToken.tokenSymbol,
+      })
+      const amountDisplay = `${formatRawAmount(selectedFeeToken.amount, selectedFeeToken.tokenDecimals)} ${selectedFeeToken.tokenSymbol}`
+      const usdDisplay = formatUsdAmountDisplay(selectedFeeToken.amountUSD)
+      return {
+        title: selectedFeeToken.tokenSymbol,
+        amountDisplay,
+        usdDisplay,
+        symbol: selectedFeeToken.tokenSymbol,
+        imageUrl: tokenImageUrl,
+      }
+    }
+  }
+
+  // Helper function to get native symbol for a chain
+  const getNativeSymbol = (chainId: number) => {
+    const chainInfo = getChainInfo(chainId)
+    return chainInfo?.nativeCurrency.symbol || "ETH"
+  }
+
+  const selectedDisplay = getSelectedDisplayText()
+
   return (
-    <div className="space-y-1" ref={dropdownRef}>
-      <div className="flex items-center justify-between">
-        <div className="block text-xs font-medium text-gray-700 dark:text-gray-300">
-          Pay fee with
-        </div>
-        {selectedOption && (
-          <div className="text-xs text-gray-500 dark:text-gray-400">
-            Fee {formattedFeeAmount} {selectedOption.token.symbol}
-            <div>
-              {feeUsdValue && (
-                <span className="ml-1 text-xs text-gray-500 dark:text-gray-400">
-                  ≈ {feeUsdValue}
-                </span>
-              )}
-            </div>
+    <div className="space-y-1" ref={accordionRef}>
+      <div className="p-2">
+        <div className="flex justify-between items-center mb-2">
+          <div className="text-xs font-medium trails-text-primary">
+            Gas Fee Options
           </div>
-        )}
-      </div>
-      <div className="relative flex justify-start">
+          <div className="text-xs trails-text-muted">
+            Choose how to pay for gas for transfer
+          </div>
+        </div>
+
+        {/* Accordion Header */}
         <button
           type="button"
-          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-          className="w-32 flex items-center px-3 py-2 border border-solid trails-border-radius-container hover:border-gray-400 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white border-gray-300 text-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-full flex items-center justify-between p-1.5 trails-border-radius-input border trails-border-primary hover:trails-hover-bg transition-colors cursor-pointer"
         >
-          {selectedOption ? (
-            <>
-              <TokenImage
-                symbol={selectedOption.token.symbol}
-                imageUrl={selectedOption.token.logoURL}
-                size={16}
-              />
-              <span className="ml-1.5 flex-1 text-left">
-                {selectedOption.token.symbol}
-              </span>
-            </>
-          ) : (
-            <span className="flex-1 text-left text-gray-400">
-              Select Fee Token
-            </span>
-          )}
-          <ChevronDown
-            className={`h-4 w-4 ${
-              isDropdownOpen ? "transform rotate-180" : ""
-            }`}
-          />
+          <div className="flex items-center space-x-2">
+            <TokenImage
+              imageUrl={selectedDisplay.imageUrl}
+              symbol={selectedDisplay.symbol}
+              chainId={selectedFeeToken?.chainId || chainId}
+              size={16}
+            />
+            <div className="text-left">
+              <div className="text-xs font-medium trails-text-primary">
+                {selectedDisplay.amountDisplay}
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center space-x-2">
+            <div className="text-right">
+              <div className="text-xs font-medium trails-text-primary">
+                {selectedDisplay.usdDisplay}
+              </div>
+            </div>
+            <ChevronDown
+              className={`w-3 h-3 trails-text-muted transition-transform ${
+                isOpen ? "transform rotate-180" : ""
+              }`}
+            />
+          </div>
         </button>
 
-        {isDropdownOpen && (
-          <div className="absolute z-10 mt-1 border border-solid trails-border-radius-container shadow-lg w-32 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
-            {options.map((option) => (
-              <button
-                key={option.token.symbol}
-                type="button"
-                onClick={() => {
-                  console.log("[trails] selected fee option", option)
-                  onSelect(option)
-                  setIsDropdownOpen(false)
-                }}
-                className={`w-full flex items-center px-3 py-2 cursor-pointer text-sm ${
-                  selectedOption?.token.symbol === option.token.symbol
-                    ? "bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-white"
-                    : "text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg"
-                }`}
-              >
-                <div
-                  className={`w-4 h-4 rounded-full flex items-center justify-center ${
-                    selectedOption?.token.symbol === option.token.symbol
-                      ? "bg-gray-200 dark:bg-gray-700"
-                      : "bg-gray-100 dark:bg-gray-600"
-                  }`}
-                >
-                  <TokenImage
-                    symbol={option.token.symbol}
-                    imageUrl={option.token.logoURL}
-                    size={16}
-                  />
-                </div>
-                <span className="ml-1.5">{option.token.symbol}</span>
-                {selectedOption?.token.symbol === option.token.symbol && (
-                  <span className="ml-auto text-gray-900 dark:text-white">
-                    •
-                  </span>
-                )}
-              </button>
+        {/* Accordion Content */}
+        {isOpen && (
+          <div className="mt-2 space-y-1">
+            {/* All Fee Options (including native gas) */}
+            {enhancedFeeOptions.map((option, index) => (
+              <FeeOption
+                key={`${option.tokenAddress}-${index}`}
+                option={option}
+                isSelected={
+                  option.tokenAddress.toLowerCase() ===
+                  zeroAddress.toLowerCase()
+                    ? selectedFeeToken === null ||
+                      selectedFeeToken?.tokenAddress?.toLowerCase() ===
+                        zeroAddress.toLowerCase()
+                    : selectedFeeToken?.tokenAddress === option.tokenAddress
+                }
+                onClick={() => handleFeeTokenSelect(option)}
+                chainId={option.chainId || chainId}
+              />
             ))}
           </div>
         )}