0xtrails 0.13.2 → 0.14.0

package/src/widget/components/WaasFeeOptions.tsx

@@ -1,588 +0,0 @@
-import { useWaasFeeOptions } from "@0xsequence/connect"
-import { ChevronDown, ChevronUp } from "lucide-react"
-import { useCallback, useEffect, useMemo, useState } from "react"
-import { formatUnits } from "viem"
-import { logger, type Token } from "../../index.js"
-import { formatAmountDisplay } from "../../utils/format.js"
-import { normalizeAddress, truncateAddress } from "../../utils/address.js"
-import { CopyButton } from "./CopyButton.js"
-import { TokenImage } from "./TokenImage.js"
-import Tooltip from "./Tooltip.js"
-
-// Derive fee types from the hook's return type to ensure structural compatibility
-// with upstream FeeOption / FeeOptionExtended (which use the FeeTokenType enum)
-type WaasFeeConfirmation = NonNullable<ReturnType<typeof useWaasFeeOptions>[0]>
-type WaasFeeOptionBase = WaasFeeConfirmation["options"][number]
-type WaasFeeToken = WaasFeeOptionBase["token"]
-type WaasFeeOptionExtended = Extract<
-  WaasFeeOptionBase,
-  { hasEnoughBalanceForFee: boolean }
->
-
-const isExtendedFeeOption = (
-  option: WaasFeeOptionBase,
-): option is WaasFeeOptionExtended =>
-  "hasEnoughBalanceForFee" in option && "balance" in option
-
-const getTokenAddressLabel = (token?: WaasFeeToken) => {
-  if (token?.contractAddress) {
-    return truncateAddress(token.contractAddress)
-  }
-  return "Native Token"
-}
-
-type FeeDisplayValues = {
-  feeAmountFormatted: string
-}
-
-interface FeeOptionCardProps {
-  option: WaasFeeOptionExtended
-  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}
-      tabIndex={showRadio && !isDisabled ? 0 : undefined}
-      aria-disabled={isDisabled}
-      onClick={showRadio ? handleSelect : undefined}
-      onKeyDown={
-        showRadio
-          ? (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault()
-                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.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
-}
-
-export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
-  chainId,
-  originToken,
-  originTokenAmount,
-  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 =
-    !!pendingFeeOptionConfirmation &&
-    (!pendingFeeOptionConfirmation.options ||
-      pendingFeeOptionConfirmation.options.length === 0)
-
-  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: WaasFeeOptionExtended) => {
-      if (!originToken || !option?.token) {
-        return false
-      }
-
-      const optionAddress = option.token.contractAddress
-        ? normalizeAddress(option.token.contractAddress)
-        : null
-
-      if (originTokenAddress && optionAddress) {
-        return originTokenAddress === optionAddress
-      }
-
-      return false
-    },
-    [originToken, originTokenAddress],
-  )
-
-  const isFeeOptionDisabledForOriginBalance = useCallback(
-    (option: WaasFeeOptionExtended) => {
-      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: WaasFeeOptionExtended) => {
-    const decimals = option.token.decimals ?? 18
-
-    const rawValue = option.value || "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,
-    }
-  }, [])
-
-  // Initialize with first option when fee options become available
-  useEffect(() => {
-    if (pendingFeeOptionConfirmation) {
-      logger.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) =>
-            isExtendedFeeOption(option) && option.hasEnoughBalanceForFee,
-        )
-      ) {
-        onFeeOptionsLoaded()
-      }
-
-      if (
-        pendingFeeOptionConfirmation.options.length > 0 &&
-        !selectedFeeOptionTokenName
-      ) {
-        const firstAvailableOption = pendingFeeOptionConfirmation.options.find(
-          (option) =>
-            isExtendedFeeOption(option) && option.hasEnoughBalanceForFee,
-        )
-        if (firstAvailableOption?.token?.symbol) {
-          setSelectedFeeOptionTokenName(firstAvailableOption.token.symbol)
-        }
-      }
-    }
-  }, [
-    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) => {
-    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>
-    )
-  }
-
-  // Widen the union array (FeeOptionExtended[] | FeeOption[]) to a single
-  // array type so the isExtendedFeeOption type guard narrows correctly
-  const feeOptions: WaasFeeOptionBase[] = pendingFeeOptionConfirmation.options
-
-  const selectedOption = feeOptions
-    .filter(isExtendedFeeOption)
-    .filter((option) => option.hasEnoughBalanceForFee)
-    .find((option) => option.token.symbol === selectedFeeOptionTokenName)
-
-  const selectedOptionDisplayValues = selectedOption
-    ? getFeeDisplayValues(selectedOption)
-    : null
-
-  const shouldShowBalanceWarning = selectedOption
-    ? isFeeOptionDisabledForOriginBalance(selectedOption)
-    : false
-
-  const hasTokenForFee = feeOptions.find(
-    (option) => isExtendedFeeOption(option) && option.hasEnoughBalanceForFee,
-  )
-
-  if (!hasTokenForFee) {
-    setIsError?.(true)
-  }
-
-  if (!hasTokenForFee) {
-    return (
-      <div className="space-y-4 py-6">
-        {/* Warning Message */}
-        <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-          <div className="flex items-start space-x-2">
-            <svg
-              aria-hidden="true"
-              className="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              />
-            </svg>
-            <p className="text-sm text-red-800 dark:text-red-200 font-medium">
-              No available tokens for fees, please transfer any of these tokens
-              to your wallet.
-            </p>
-          </div>
-        </div>
-
-        <div className="flex flex-col space-y-2">
-          {feeOptions.map((option) => {
-            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.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>
-                      <CopyButton
-                        text={contractAddress}
-                        stopPropagation
-                        className="shrink-0 p-0.5"
-                        size="sm"
-                      />
-                    </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 &&
-        selectedOptionDisplayValues && (
-          <FeeOptionCard
-            option={selectedOption}
-            chainId={chainId}
-            feeDisplay={selectedOptionDisplayValues}
-            isSelected
-            isDisabled={shouldShowBalanceWarning}
-            showRadio={false}
-          />
-        )}
-
-      {/* Expanded Options */}
-      {isExpanded && (
-        <div className="space-y-2">
-          {feeOptions
-            .filter(isExtendedFeeOption)
-            .filter((option) => option.hasEnoughBalanceForFee)
-            .map((option) => {
-              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}
-                    feeDisplay={feeDisplay}
-                    isSelected={
-                      selectedFeeOptionTokenName === option.token.symbol
-                    }
-                    isDisabled={optionDisabled}
-                    showRadio
-                    onSelect={() =>
-                      setSelectedFeeOptionTokenName(option.token.symbol)
-                    }
-                  />
-                )
-              }
-            })}
-        </div>
-      )}
-
-      {/* Action Buttons */}
-      <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 ${
-            shouldShowBalanceWarning ? "w-full sm:flex-1" : ""
-          }`}
-        >
-          {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