0xtrails 0.13.1 → 0.14.0

package/src/widget/components/FeeOptions.tsx

@@ -1,247 +0,0 @@
-import { ChevronDown } from "lucide-react"
-import type React from "react"
-import { useRef, useState } from "react"
-import { TokenImage } from "./TokenImage.js"
-import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
-import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
-import { logger } from "../../logger.js"
-import type { FeeOption } from "@0xtrails/api"
-import {
-  FeeOption as FeeOptionComponent,
-  isFeeOptionDisabled,
-} from "./FeeOption.js"
-import { isNativeToken, normalizeAddress } from "../../utils/address.js"
-import type { Token } from "../../tokens.js"
-import { useClickTracking } from "../hooks/useClickTracking.js"
-
-interface FeeOptionsProps {
-  processedFeeOptions: ProcessedFeeOption[]
-  selectedFeeOption: FeeOption | null
-  setSelectedFeeOption: (token: FeeOption | null) => void
-  chainId?: number
-  isRefetching?: boolean // When true, the fee quote is stale and being refreshed, so hide the component
-  originTokenInfo?: {
-    originToken: Token
-    originTokenBalance: string
-    originTokenAmount: string
-    isLoadingBalance?: boolean
-  }
-}
-
-export const FeeOptions: React.FC<FeeOptionsProps> = ({
-  processedFeeOptions,
-  selectedFeeOption,
-  setSelectedFeeOption,
-  chainId,
-  isRefetching,
-  originTokenInfo,
-}) => {
-  // All hooks must be called before any early returns
-  const { selectedFundMethod } = useSelectedFundMethod()
-  const [isOpen, setIsOpen] = useState(false)
-  const accordionRef = useRef<HTMLDivElement>(null)
-  const { trackClick } = useClickTracking()
-
-  // Early returns AFTER all hooks - this is safe because hooks are always called first
-  // Hide component when fundMethod is qr-code or exchange
-  if (
-    selectedFundMethod === "direct-transfer" ||
-    selectedFundMethod === "onramp-mesh"
-  ) {
-    return null
-  }
-
-  // Hide component when fee quote is stale and being refreshed
-  if (isRefetching) {
-    return null
-  }
-
-  // Don't render if no fee options available
-  if (!processedFeeOptions || processedFeeOptions.length === 0) {
-    return null
-  }
-
-  // Check if there are non-native options before calling hooks
-  const hasNonNativeOptions = processedFeeOptions.some(
-    (opt) => !isNativeToken(opt.tokenAddress),
-  )
-
-  // Don't render if only native token is available
-  if (!hasNonNativeOptions) {
-    return null
-  }
-
-  // Find native gas option (zero address) for header display
-  const nativeGasOption = processedFeeOptions.find((opt) =>
-    isNativeToken(opt.tokenAddress),
-  )
-
-  // Find the currently selected option from enhancedFeeOptions for header display
-  const getSelectedOption = (): ProcessedFeeOption | undefined => {
-    if (
-      selectedFeeOption === null ||
-      isNativeToken(selectedFeeOption?.tokenAddress)
-    ) {
-      return nativeGasOption
-    }
-
-    if (!selectedFeeOption) {
-      return undefined
-    }
-
-    const selectedAddress = normalizeAddress(selectedFeeOption.tokenAddress)
-
-    return processedFeeOptions.find(
-      (opt) => normalizeAddress(opt.tokenAddress) === selectedAddress,
-    )
-  }
-
-  const selectedOption = getSelectedOption()
-
-  // Use nativeGasOption as fallback when selectedOption is null/undefined
-  const displayOption = selectedOption
-    ? isFeeOptionDisabled(selectedOption as ProcessedFeeOption, originTokenInfo)
-      ? nativeGasOption
-      : selectedOption
-    : nativeGasOption
-
-  const handleFeeOptionSelect = (option: FeeOption) => {
-    const isNative = isNativeToken(option.tokenAddress)
-
-    trackClick({
-      component: "FeeOptions",
-      action: "select_fee_option",
-      label: isNative ? "native_gas" : option.tokenSymbol,
-      metadata: {
-        tokenSymbol: option.tokenSymbol,
-        tokenAddress: option.tokenAddress,
-        chainId: (
-          (option as ProcessedFeeOption).chainId || chainId
-        )?.toString(),
-        isNativeToken: isNative.toString(),
-        amountFormatted: (option as ProcessedFeeOption).amountFormatted,
-        amountUsd: (option as ProcessedFeeOption).amountUsdDisplay,
-      },
-    })
-
-    // For native gas (zero/ETH address), set to null to trigger non-gasless flow
-    if (isNative) {
-      setSelectedFeeOption(null)
-      logger.console.log(
-        "[trails-sdk] [fee-select] Selected native gas fee option",
-      )
-    } else {
-      // Use the option directly - it already has all required fields
-      setSelectedFeeOption(option)
-      logger.console.log(
-        "[trails-sdk] [fee-select] Selected ERC20 fee option:",
-        option,
-      )
-    }
-
-    setIsOpen(false)
-  }
-
-  if (processedFeeOptions.length === 1 && selectedOption) {
-    return (
-      <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 Option
-            </div>
-          </div>
-          <div className="mt-2 space-y-1">
-            <FeeOptionComponent
-              key={`${selectedOption?.tokenAddress}-0`}
-              option={selectedOption as ProcessedFeeOption}
-              isSelected={
-                isNativeToken(selectedOption?.tokenAddress)
-                  ? selectedFeeOption === null ||
-                    isNativeToken(selectedFeeOption?.tokenAddress)
-                  : normalizeAddress(selectedFeeOption?.tokenAddress) ===
-                    normalizeAddress(selectedOption?.tokenAddress)
-              }
-              chainId={selectedOption?.chainId || chainId}
-              originTokenInfo={originTokenInfo}
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div ref={accordionRef}>
-      <div className="p-2">
-        <button
-          className="w-full flex justify-between items-center mb-2 cursor-pointer"
-          type="button"
-          onClick={
-            processedFeeOptions.length === 1
-              ? undefined
-              : () => setIsOpen(!isOpen)
-          }
-          disabled={processedFeeOptions.length === 1}
-        >
-          <div className="text-sm font-semibold text-gray-900 dark:text-white">
-            Gas Fee Options
-          </div>
-          <div className="flex items-center gap-1">
-            {displayOption && (
-              <TokenImage
-                imageUrl={displayOption.tokenImageUrl}
-                symbol={displayOption.tokenSymbol}
-                chainId={displayOption.chainId || chainId}
-                size={16}
-              />
-            )}
-            {displayOption && (
-              <div
-                className="text-sm font-medium text-gray-600 dark:text-gray-400"
-                title={displayOption.amountUsdDisplay}
-              >
-                {displayOption.amountUsdLocaleDisplay ||
-                  displayOption.amountUsdDisplay}
-              </div>
-            )}
-            {processedFeeOptions.length > 1 && (
-              <ChevronDown
-                className={`w-3 h-3 transition-transform text-gray-600 dark:text-gray-400 ${
-                  isOpen ? "transform rotate-180" : ""
-                }`}
-              />
-            )}
-          </div>
-        </button>
-
-        {/* Accordion Header */}
-
-        {/* Accordion Content */}
-        {isOpen && processedFeeOptions.length > 1 && (
-          <div className="mt-2 space-y-1">
-            {/* All Fee Options (including native gas) */}
-            {processedFeeOptions.map((option, index) => (
-              <FeeOptionComponent
-                key={`${option.tokenAddress}-${index}`}
-                option={option}
-                isSelected={
-                  isNativeToken(option.tokenAddress)
-                    ? selectedFeeOption === null ||
-                      isNativeToken(selectedFeeOption?.tokenAddress)
-                    : normalizeAddress(selectedFeeOption?.tokenAddress) ===
-                      normalizeAddress(option.tokenAddress)
-                }
-                onClick={() => handleFeeOptionSelect(option)}
-                chainId={option.chainId || chainId}
-                originTokenInfo={originTokenInfo}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default FeeOptions

package/src/widget/components/FiatSelector.tsx

@@ -1,308 +0,0 @@
-import { ChevronLeft } from "lucide-react"
-import { AnimatePresence, motion } from "motion/react"
-import React, { useEffect, useMemo, useState } from "react"
-import { logger } from "../../logger.js"
-import { useCountryList } from "../../query/geo.hooks.js"
-import type { OnrampFiatCurrency } from "../hooks/useFiatOnRampCurrencies.js"
-import { useFiatOnRampCurrencies } from "../hooks/useFiatOnRampCurrencies.js"
-import { useOnRampCountryDefaults } from "../hooks/useOnRampCountryDefaults.js"
-import { CountryFilterDropdown } from "./CountryFilterDropdown.js"
-import { SearchInputField } from "./SearchInputField.js"
-
-interface FiatSelectorProps {
-  onCurrencySelect: (selectedCurrency: OnrampFiatCurrency) => void
-  onError: (error: Error | string | null) => void
-  selectedCurrency?: OnrampFiatCurrency | null
-  onNavigateToFundMethods?: () => void
-  showContinueButton?: boolean
-  onContinue?: (selectedCurrency: OnrampFiatCurrency) => void
-  compactMode?: boolean
-  apiUrl?: string
-  trailsClient?: any
-  onAutoSelect?: (selectedCurrency: OnrampFiatCurrency) => void
-  onSelectCountry?: (countryCode: string | null) => void
-}
-
-export const FiatSelector: React.FC<FiatSelectorProps> = ({
-  onCurrencySelect,
-  onError,
-  selectedCurrency,
-  onNavigateToFundMethods,
-  showContinueButton = false,
-  onContinue,
-  compactMode = false,
-  trailsClient,
-  onAutoSelect,
-  onSelectCountry,
-}) => {
-  const [searchQuery, setSearchQuery] = useState("")
-  const [selectedCountryCode, setSelectedCountryCode] = useState<string | null>(
-    null,
-  )
-
-  // Get country list from API
-  const { data: countries = [] } = useCountryList()
-
-  // Handle country selection
-  const handleCountrySelect = (countryCode: string | null) => {
-    setSelectedCountryCode(countryCode)
-    onSelectCountry?.(countryCode)
-  }
-
-  // Get country defaults (country code + default currency) using dedicated hook
-  const {
-    countryCode: detectedCountryCode,
-    defaultCurrencyCode,
-    isLoading: isLoadingDefaults,
-    error: defaultsError,
-  } = useOnRampCountryDefaults({
-    enabled: true,
-  })
-
-  // Use selected country if available, otherwise use detected country
-  const countryCode = selectedCountryCode || detectedCountryCode
-
-  // Fetch fiat currencies for the current country
-  const { fiatCurrencies, isLoading, error } = useFiatOnRampCurrencies({
-    countryCode: countryCode || "US",
-    trailsClient,
-    enabled: true,
-  })
-
-  // Track if we've already auto-selected to avoid re-selecting
-  const hasAutoSelectedRef = React.useRef(false)
-
-  // Auto-select default currency when currencies are loaded and no currency is selected
-  useEffect(() => {
-    if (
-      !selectedCurrency &&
-      fiatCurrencies.length > 0 &&
-      !isLoading &&
-      !isLoadingDefaults &&
-      !hasAutoSelectedRef.current
-    ) {
-      // Use detected currency code, or fallback to USD if not detected
-      const currencyCodeToSelect = defaultCurrencyCode || "USD"
-
-      // Find the currency matching the currency code
-      const defaultCurrency = fiatCurrencies.find(
-        (currency) => currency.currencyCode === currencyCodeToSelect,
-      )
-
-      if (defaultCurrency) {
-        logger.console.log(
-          "[FiatSelector] Auto-selecting default currency:",
-          defaultCurrency,
-          defaultCurrencyCode ? "(detected)" : "(fallback to USD)",
-        )
-        hasAutoSelectedRef.current = true
-        // Use onAutoSelect if provided (doesn't close selector), otherwise use onCurrencySelect
-        if (onAutoSelect) {
-          onAutoSelect(defaultCurrency)
-        } else {
-          onCurrencySelect(defaultCurrency)
-        }
-      }
-    }
-  }, [
-    selectedCurrency,
-    defaultCurrencyCode,
-    fiatCurrencies,
-    isLoading,
-    isLoadingDefaults,
-    onCurrencySelect,
-    onAutoSelect,
-  ])
-
-  // Reset auto-select flag when selectedCurrency changes externally
-  useEffect(() => {
-    if (selectedCurrency) {
-      hasAutoSelectedRef.current = true
-    }
-  }, [selectedCurrency])
-
-  // Reset auto-select flag when country changes so we can auto-select the new country's default currency
-  useEffect(() => {
-    hasAutoSelectedRef.current = false
-  }, [])
-
-  // Filter currencies based on search query
-  const filteredCurrencies = useMemo(() => {
-    if (!searchQuery.trim()) {
-      return fiatCurrencies
-    }
-
-    const query = searchQuery.trim().toLowerCase()
-    return fiatCurrencies.filter(
-      (currency) =>
-        currency.currencyCode.toLowerCase().includes(query) ||
-        currency.name.toLowerCase().includes(query),
-    )
-  }, [fiatCurrencies, searchQuery])
-
-  // Check if currency is selected
-  const isCurrencySelected = (currency: OnrampFiatCurrency) => {
-    return selectedCurrency?.currencyCode === currency.currencyCode
-  }
-
-  // Handle currency selection
-  const handleCurrencySelect = (currency: OnrampFiatCurrency) => {
-    onCurrencySelect(currency)
-  }
-
-  // Determine error message
-  let errorMessage = ""
-  if (error || defaultsError) {
-    errorMessage = "Failed to load currencies"
-  } else if (!countryCode && isLoadingDefaults) {
-    errorMessage = "Detecting your location..."
-  } else if (searchQuery.trim() && filteredCurrencies.length === 0) {
-    errorMessage = "No currencies found matching your search."
-  } else if (fiatCurrencies.length === 0 && !isLoading) {
-    errorMessage = "No currencies available for your location"
-  }
-
-  // Report errors to parent
-  useEffect(() => {
-    if (error) {
-      onError(error)
-    }
-  }, [error, onError])
-
-  return (
-    <div className="space-y-2">
-      {/* Search Field */}
-      <SearchInputField
-        value={searchQuery}
-        onChange={setSearchQuery}
-        placeholder="Search currencies"
-        autoFocus={true}
-        className="mb-2"
-        rightAlignedComponent={
-          <CountryFilterDropdown
-            countries={countries}
-            selectedCountryCode={selectedCountryCode}
-            onCountrySelect={handleCountrySelect}
-            compactMode={compactMode}
-            nestedMode={true}
-          />
-        }
-      />
-
-      {/* Loading State */}
-      {isLoading && filteredCurrencies.length === 0 && (
-        <div className="text-center py-4">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 mx-auto border-solid border-black dark:border-white"></div>
-          <p className="mt-2 text-gray-500 dark:text-gray-400">
-            Loading currencies...
-          </p>
-        </div>
-      )}
-
-      {/* Error or Empty State */}
-      {!isLoading && filteredCurrencies.length === 0 && errorMessage && (
-        <div className="text-center py-4 rounded-lg trails-bg-secondary">
-          <p className="text-gray-500 dark:text-gray-400">{errorMessage}</p>
-        </div>
-      )}
-
-      {/* Currency List */}
-      {filteredCurrencies.length > 0 && (
-        <div
-          className={`${compactMode ? "max-h-48" : "max-h-[400px]"} overflow-y-auto trails-scrollbar space-y-1`}
-        >
-          <AnimatePresence mode="popLayout">
-            {filteredCurrencies.map((currency: OnrampFiatCurrency) => {
-              const { currencyCode, name, symbolImageUrl } = currency
-              const isSelected = isCurrencySelected(currency)
-
-              return (
-                <motion.div
-                  key={currencyCode}
-                  layout
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -20 }}
-                  transition={{
-                    duration: 0.05,
-                    ease: "easeOut",
-                    layout: { duration: 0.08, ease: "easeOut" },
-                  }}
-                  onClick={() => handleCurrencySelect(currency)}
-                  onKeyDown={(e: React.KeyboardEvent) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault()
-                      handleCurrencySelect(currency)
-                    }
-                  }}
-                  tabIndex={0}
-                  aria-label={`Select ${name} currency`}
-                  title={`Select ${name} currency`}
-                  className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-list-item trails-border-radius-list-button ${
-                    isSelected ? "trails-list-item-selected" : ""
-                  } cursor-pointer`}
-                >
-                  <div className="relative flex-shrink-0 mr-2">
-                    <div className="rounded-full flex items-center justify-center bg-gray-100 dark:bg-gray-700">
-                      {symbolImageUrl ? (
-                        <img
-                          src={symbolImageUrl}
-                          alt={currencyCode}
-                          className="w-8 h-8 rounded-full object-cover"
-                        />
-                      ) : (
-                        <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
-                          <span className="text-xs font-medium text-gray-600 dark:text-gray-300">
-                            {currencyCode.substring(0, 2)}
-                          </span>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-
-                  <div className="flex-1 min-w-0 text-left">
-                    <h3 className="text-sm font-medium truncate text-gray-900 dark:text-white">
-                      {name}
-                    </h3>
-                    <div className="flex items-center gap-1.5">
-                      <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-                        {currencyCode}
-                      </span>
-                    </div>
-                  </div>
-                </motion.div>
-              )
-            })}
-          </AnimatePresence>
-        </div>
-      )}
-
-      {showContinueButton && onContinue && selectedCurrency && (
-        <div className="space-y-4">
-          <button
-            type="button"
-            onClick={() => onContinue(selectedCurrency)}
-            disabled={!selectedCurrency}
-            className={`w-full font-semibold py-3 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer`}
-          >
-            Continue
-          </button>
-        </div>
-      )}
-
-      {/* Pay with another method button */}
-      {onNavigateToFundMethods && !isLoading && (
-        <div className="text-center pt-1">
-          <button
-            type="button"
-            onClick={onNavigateToFundMethods}
-            className="inline-flex items-center justify-center space-x-1 px-2 py-1 text-xs font-medium trails-text-secondary trails-bg-secondary trails-hover-bg trails-border trails-border-radius-button transition-all duration-200 cursor-pointer"
-          >
-            <ChevronLeft className="h-3 w-3" />
-            <span>Pay with another method</span>
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/widget/components/FiatSelectorButton.tsx

@@ -1,68 +0,0 @@
-import { ChevronRight } from "lucide-react"
-import type React from "react"
-import type { OnrampFiatCurrency } from "../hooks/useFiatOnRampCurrencies.js"
-
-interface FiatSelectorButtonProps {
-  currency?: OnrampFiatCurrency | null
-  onSelect: () => void
-  className?: string
-  unselectable?: boolean
-}
-
-export const FiatSelectorButton: React.FC<FiatSelectorButtonProps> = ({
-  currency,
-  onSelect,
-  className = "flex items-center space-x-1.5 trails-border-radius-input px-2.5 py-1.5 border transition-all duration-200",
-  unselectable = false,
-}) => {
-  return (
-    <button
-      type="button"
-      onClick={onSelect}
-      disabled={unselectable}
-      className={`${className} ${currency ? "max-w-[150px]" : ""} ${
-        currency
-          ? "bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600"
-          : "bg-blue-500 hover:bg-blue-600 border-blue-500 text-white"
-      } ${unselectable ? "cursor-default" : "cursor-pointer"}`}
-    >
-      {currency ? (
-        <>
-          <div className="flex items-center shrink-0">
-            {currency.symbolImageUrl ? (
-              <img
-                src={currency.symbolImageUrl}
-                alt={currency.currencyCode}
-                className="w-6 h-6 rounded-full object-cover"
-              />
-            ) : (
-              <div className="w-10 h-7 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
-                <span className="text-xs font-medium text-gray-600 dark:text-gray-300">
-                  {currency.currencyCode.substring(0, 2)}
-                </span>
-              </div>
-            )}
-          </div>
-          <div className="flex flex-col items-start min-w-0 overflow-hidden">
-            <span className="font-bold trails-text-primary text-sm leading-tight truncate max-w-full text-left">
-              {currency.currencyCode}
-            </span>
-            <span className="text-xs trails-text-muted leading-tight truncate max-w-full text-left">
-              {currency.name}
-            </span>
-          </div>
-          {!unselectable && (
-            <ChevronRight className="w-3.5 h-3.5 trails-text-muted flex-shrink-0" />
-          )}
-        </>
-      ) : (
-        <>
-          <span className="font-medium text-sm text-white">
-            Select Currency
-          </span>
-          {!unselectable && <ChevronRight className="w-3.5 h-3.5 text-white" />}
-        </>
-      )}
-    </button>
-  )
-}

package/src/widget/components/Footer.tsx

@@ -1,67 +0,0 @@
-import { motion } from "motion/react"
-import type React from "react"
-import { SITE_URL } from "../../constants.js"
-import { SDK_VERSION } from "../../version.js"
-import TrailsLogoBlack from "../assets/Trails-logo-black.svg"
-import TrailsLogoWhite from "../assets/Trails-logo-white.svg"
-import { useClickTracking } from "../hooks/useClickTracking.js"
-import { DebugMenu } from "./DebugMenu.js"
-
-interface FooterProps {
-  onDebugScreenSelect?: (screen: string) => void
-}
-
-export const Footer: React.FC<FooterProps> = ({ onDebugScreenSelect }) => {
-  const { trackClick } = useClickTracking()
-
-  const handleLogoClick = () => {
-    trackClick({
-      component: "Footer",
-      action: "click_trails_logo",
-      label: "powered_by_trails",
-      metadata: {
-        destination: SITE_URL,
-        version: SDK_VERSION,
-      },
-    })
-  }
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.15 }}
-      className="mt-auto pt-2 text-center text-xs relative flex items-center justify-center text-gray-400 dark:text-gray-500"
-      layout
-    >
-      <div className="absolute right-0 flex items-center h-full">
-        <span className="text-[9px] opacity-15 mr-1.5 select-none">
-          v{SDK_VERSION}
-        </span>
-        <DebugMenu onScreenSelect={onDebugScreenSelect} />
-      </div>
-      Powered by&nbsp;
-      <a
-        href={SITE_URL}
-        target="_blank"
-        rel="noopener noreferrer"
-        title="Visit the Trails website"
-        onClick={handleLogoClick}
-        className="font-medium transition-colors hover:opacity-80 leading-none text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
-      >
-        <img
-          src={TrailsLogoBlack}
-          alt="Trails"
-          className="h-3 inline-block dark:hidden"
-        />
-        <img
-          src={TrailsLogoWhite}
-          alt="Trails"
-          className="h-3 hidden dark:inline-block"
-        />
-      </a>
-    </motion.div>
-  )
-}
-
-export default Footer