0xtrails 0.12.0 → 0.12.2

package/src/index.ts

@@ -137,6 +137,17 @@ export {
   formatUsdAmountLocaleDisplay,
 } from "./utils/format.js"
 export { balanceQueries } from "./query/balance.queries.js"
+export { fiatQueries } from "./query/fiat.queries.js"
+export {
+  useFiatCurrencyList,
+  useExchangeRate,
+} from "./query/fiat.hooks.js"
+export { meldQueries } from "./query/meld.queries.js"
+export {
+  useMeldPaymentMethods,
+  useMeldServiceProviders,
+} from "./query/meld.hooks.js"
+export { getCurrencyInfo } from "./utils/fiat.js"
 export {
   getTokenPrice,
   getTokenPrices,

package/src/localeUtils.ts

@@ -3,6 +3,8 @@
  * Handles European format (1.234,56) vs US format (1,234.56)
  */
 
+import { isValidNumber } from "./utils/validation.js"
+
 /**
  * Detects if a string uses European number format
  * European: uses comma as decimal separator and period/space for thousands
@@ -238,5 +240,5 @@ export function isValidLocaleNumber(value: string): boolean {
   }
 
   const parsed = parseLocaleNumber(value)
-  return !Number.isNaN(parsed) && Number.isFinite(parsed)
+  return isValidNumber(parsed)
 }

package/src/meld/components/MeldCountriesList.tsx

@@ -1,9 +1,9 @@
 import { Search } from "lucide-react"
 import type React from "react"
 import { useMemo, useState } from "react"
-import { useCountryCode } from "../../query/geo.hooks.js"
-import type { TrailsOnramp } from "../../onrampClient.js"
-import { useMeldCountries, type Country } from "../utils/meld.js"
+import { useCountryCode, useCountryList } from "../../query/geo.hooks.js"
+import { getMeldSupportedCountries } from "../../widget/utils/countryUtils.js"
+import type { Country } from "../utils/meld.js"
 import { SimpleHeader } from "./SimpleHeader.js"
 
 // Convert country code (e.g., "US") to flag emoji
@@ -22,17 +22,25 @@ export interface MeldCountriesListProps {
   onBack?: () => void
   onSelectCountry?: (country: Country) => void
   selectedCountry?: Country | null
-  trailsClient: TrailsOnramp | null
 }
 
 export const MeldCountriesList: React.FC<MeldCountriesListProps> = ({
   onBack,
   onSelectCountry,
   selectedCountry,
-  trailsClient,
 }) => {
-  const { countries, isLoading, error, refetch } =
-    useMeldCountries(trailsClient)
+  const {
+    data: apiCountries = [],
+    isLoading,
+    error,
+    refetch,
+  } = useCountryList()
+
+  const countries = useMemo(
+    () => getMeldSupportedCountries(apiCountries),
+    [apiCountries],
+  )
+
   const [searchTerm, setSearchTerm] = useState("")
 
   // Use proper geolocation hook
@@ -48,7 +56,7 @@ export const MeldCountriesList: React.FC<MeldCountriesListProps> = ({
       filtered = countries.filter(
         (country) =>
           country.name.toLowerCase().includes(lowerSearchTerm) ||
-          country.code.toLowerCase().includes(lowerSearchTerm),
+          country.countryCode.toLowerCase().includes(lowerSearchTerm),
       )
     }
 
@@ -56,10 +64,16 @@ export const MeldCountriesList: React.FC<MeldCountriesListProps> = ({
     return filtered.sort((a, b) => {
       // If we have a detected user country, prioritize it
       if (userCountryCode) {
-        if (a.code === userCountryCode && b.code !== userCountryCode) {
+        if (
+          a.countryCode === userCountryCode &&
+          b.countryCode !== userCountryCode
+        ) {
           return -1 // a (user's country) comes first
         }
-        if (b.code === userCountryCode && a.code !== userCountryCode) {
+        if (
+          b.countryCode === userCountryCode &&
+          a.countryCode !== userCountryCode
+        ) {
           return 1 // b (user's country) comes first
         }
       }
@@ -123,7 +137,7 @@ export const MeldCountriesList: React.FC<MeldCountriesListProps> = ({
               )}
               <button
                 type="button"
-                onClick={refetch}
+                onClick={() => refetch()}
                 className="mt-3 px-4 py-2 text-sm bg-red-100 hover:bg-red-200 dark:bg-red-800 dark:hover:bg-red-700 text-red-700 dark:text-red-200 rounded-md transition-colors"
               >
                 Retry
@@ -143,12 +157,13 @@ export const MeldCountriesList: React.FC<MeldCountriesListProps> = ({
               </div>
             ) : (
               filteredCountries.map((country) => {
-                const isSelected = selectedCountry?.code === country.code
-                const isUserCountry = userCountryCode === country.code
+                const isSelected =
+                  selectedCountry?.countryCode === country.countryCode
+                const isUserCountry = userCountryCode === country.countryCode
 
                 return (
                   <button
-                    key={country.code}
+                    key={country.countryCode}
                     type="button"
                     onClick={() => handleCountrySelect(country)}
                     className={`w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 rounded-lg transition-all duration-200 ${
@@ -159,7 +174,7 @@ export const MeldCountriesList: React.FC<MeldCountriesListProps> = ({
                   >
                     <div className="flex items-center space-x-3 flex-1">
                       <div className="w-10 h-10 rounded-lg flex items-center justify-center text-2xl">
-                        {getCountryFlag(country.code)}
+                        {getCountryFlag(country.countryCode)}
                       </div>
                       <div className="flex-1 text-left">
                         <div className="flex items-center gap-2">

package/src/meld/components/MeldFundMethods.tsx

@@ -3,7 +3,8 @@ import type React from "react"
 import { useMemo, useState } from "react"
 import { logger } from "../../logger.js"
 import type { TrailsOnramp } from "../../onrampClient.js"
-import { useMeldPaymentMethods } from "../utils/meld.js"
+import { useQuery } from "@tanstack/react-query"
+import { meldQueries } from "../../query/meld.queries.js"
 import { SimpleHeader } from "./SimpleHeader.js"
 
 export type MeldPaymentMethod =
@@ -33,9 +34,12 @@ export const MeldFundMethods: React.FC<MeldFundMethodsProps> = ({
   fiatCurrency = "USD",
   onNavigateToFund,
 }) => {
-  const { paymentMethods, isLoading, error } = useMeldPaymentMethods(
-    trailsClient || null,
-    fiatCurrency,
+  const {
+    data: paymentMethods = [],
+    isLoading,
+    error,
+  } = useQuery(
+    meldQueries.paymentMethodList(trailsClient || null, fiatCurrency),
   )
   const [searchTerm, setSearchTerm] = useState("")
   const [failedImages, setFailedImages] = useState<Set<string>>(new Set())

package/src/meld/components/MeldTokensList.tsx

@@ -1,9 +1,15 @@
 import { Search } from "lucide-react"
 import type React from "react"
 import { useMemo, useState } from "react"
+import { useQuery } from "@tanstack/react-query"
+import { zeroAddress } from "viem"
 import type { TrailsOnramp } from "../../onrampClient.js"
 import { TokenImage } from "../../widget/components/TokenImage.js"
-import { useMeldTokens, type MeldToken } from "../utils/meld.js"
+import { getChainInfo } from "../../chains.js"
+import { commonTokens } from "../../tokens.js"
+import { useSupportedChains } from "../../query/chains.hooks.js"
+import { meldQueries } from "../../query/meld.queries.js"
+import { MELD_CHAIN_SUFFIX_TO_ID, type MeldToken } from "../utils/meld.js"
 import { SimpleHeader } from "./SimpleHeader.js"
 
 // Get chain badge color
@@ -40,7 +46,89 @@ export const MeldTokensList: React.FC<MeldTokensListProps> = ({
   trailsClient,
   countryCode,
 }) => {
-  const { tokens, isLoading, error } = useMeldTokens(trailsClient, countryCode)
+  const {
+    data: rawCurrencies = [],
+    isLoading: isLoadingCurrencies,
+    error: currenciesError,
+  } = useQuery(
+    meldQueries.cryptoCurrencyList(trailsClient, countryCode ?? null),
+  )
+  const { data: supportedChains = [] } = useSupportedChains()
+  const supportedChainIds = useMemo(
+    () => supportedChains.map((c) => c.id),
+    [supportedChains],
+  )
+
+  // Transform raw API data into MeldToken[] with filtering
+  const tokens = useMemo(() => {
+    const allowedSymbols = new Set([
+      "ETH",
+      "MATIC",
+      "AVAX",
+      "BNB",
+      "USDC",
+      "USDT",
+      "DAI",
+    ])
+    const stablecoins = ["USDC", "USDT", "DAI"]
+
+    return rawCurrencies
+      .map((crypto) => {
+        const code = crypto.currencyCode || ""
+        const name = crypto.name || code
+        const parts = code.split("_")
+        const symbol = parts[0] || code
+        const chain = parts[1] || ""
+        const chainId = MELD_CHAIN_SUFFIX_TO_ID[chain]
+        let contractAddress: string | undefined
+
+        if (chainId && symbol) {
+          const isNativeToken =
+            (symbol === "ETH" && [1, 10, 8453, 42161].includes(chainId)) ||
+            (symbol === "MATIC" && chainId === 137) ||
+            (symbol === "AVAX" && chainId === 43114) ||
+            (symbol === "BNB" && chainId === 56)
+
+          if (isNativeToken) {
+            contractAddress = zeroAddress
+          } else {
+            const commonToken = commonTokens.find(
+              (token) => token.symbol === symbol && token.chainId === chainId,
+            )
+            contractAddress = commonToken?.contractAddress
+          }
+        }
+
+        return {
+          code,
+          name,
+          symbol,
+          chain,
+          chainName: chainId ? (getChainInfo(chainId)?.name ?? chain) : chain,
+          chainId,
+          contractAddress,
+        } satisfies MeldToken
+      })
+      .filter((token) => allowedSymbols.has(token.symbol))
+      .filter(
+        (token) =>
+          token.chainId != null && supportedChainIds.includes(token.chainId),
+      )
+      .filter(
+        (token, index, self) =>
+          index === self.findIndex((t) => t.code === token.code),
+      )
+      .sort((a, b) => {
+        const aIsStable = stablecoins.includes(a.symbol)
+        const bIsStable = stablecoins.includes(b.symbol)
+        if (aIsStable && !bIsStable) return -1
+        if (!aIsStable && bIsStable) return 1
+        return a.symbol.localeCompare(b.symbol)
+      })
+  }, [rawCurrencies, supportedChainIds])
+
+  const isLoading = isLoadingCurrencies
+  const error = currenciesError
   const [searchTerm, setSearchTerm] = useState("")
 
   // Filter tokens based on search term and put selected token at the top

package/src/meld/utils/meld.ts

@@ -2,17 +2,7 @@
  * Utility functions for Meld integration
  */
 
-import { useState, useEffect, useRef, useMemo } from "react"
-import { useQuery } from "@tanstack/react-query"
-import { DAY_MS } from "../../utils/time.js"
-import {
-  getOnrampClient,
-  useOnrampClient,
-  type TrailsOnramp,
-} from "../../onrampClient.js"
-import { getChainInfo, getSupportedSequenceChains } from "../../chains.js"
-import { commonTokens } from "../../tokens.js"
-import { zeroAddress } from "viem"
+import { getOnrampClient, type TrailsOnramp } from "../../onrampClient.js"
 import {
   mainnet,
   base,
@@ -24,15 +14,8 @@ import {
 } from "viem/chains"
 import { getConfig } from "../../config.js"
 import { PROD_TRAILS_API_URL } from "../../constants.js"
-import { useCountryList } from "../../query/geo.hooks.js"
-import { getMeldSupportedCountries } from "../../widget/utils/countryUtils.js"
-import type {
-  MeldServiceProvider,
-  GetMeldServiceProvidersRequest,
-} from "../../onramp-client/trails-onramp.gen.js"
-import { logger } from "../../index.js"
 
-const MELD_CHAIN_SUFFIX_TO_ID: Record<string, number> = {
+export const MELD_CHAIN_SUFFIX_TO_ID: Record<string, number> = {
   ETH: mainnet.id,
   BASE: base.id,
   OP: optimism.id,
@@ -57,127 +40,10 @@ export function getMeldOnrampClient(
 }
 
 export interface Country {
-  code: string
+  countryCode: string
   name: string
 }
 
-/**
- * Hook to fetch list of countries from API
- * Returns a list of countries that support Meld
- */
-export function useMeldCountries(_trailsClient: TrailsOnramp | null): {
-  countries: Country[]
-  isLoading: boolean
-  error: Error | null
-  refetch: () => void
-} {
-  // Use the country list from the API
-  const {
-    data: apiCountries = [],
-    isLoading,
-    error,
-    refetch,
-  } = useCountryList()
-
-  // Convert API countries to Meld format and filter for Meld-supported countries
-  const countries = useMemo(() => {
-    const meldSupportedCountries = getMeldSupportedCountries(apiCountries)
-    return meldSupportedCountries.map((country) => ({
-      code: country.countryCode,
-      name: country.name,
-    }))
-  }, [apiCountries])
-
-  return {
-    countries,
-    isLoading,
-    error: error as Error | null,
-    refetch,
-  }
-}
-
-/**
- * Hook to fetch payment methods for Meld (for use in MeldFundMethods component)
- * Uses a default fiat currency (USD) or can accept a country code to get the default currency
- *
- * @note Results are cached for 24 hours as payment methods are stable and don't change frequently.
- */
-export function useMeldPaymentMethods(
-  trailsClient: TrailsOnramp | null,
-  fiatCurrency: string = "USD",
-): {
-  paymentMethods: Array<{
-    paymentMethod: string
-    name: string
-    paymentType: string
-    logos?: { dark?: string; light?: string }
-  }>
-  isLoading: boolean
-  error: Error | null
-} {
-  const { data, isLoading, error } = useQuery({
-    queryKey: ["meld-payment-methods", fiatCurrency],
-    queryFn: async () => {
-      if (!trailsClient) {
-        throw new Error("No trails client available")
-      }
-
-      logger.console.log(
-        "[useMeldPaymentMethods] Fetching payment methods for:",
-        fiatCurrency,
-      )
-      const response = await trailsClient.getMeldPaymentMethods({
-        fiatCurrency,
-      })
-
-      // Parse payment methods from response
-      const methods = Array.isArray(response.paymentMethods)
-        ? response.paymentMethods
-        : []
-
-      const parsedMethods = methods.map(
-        (method: {
-          paymentMethod?: string
-          payment_method?: string
-          name?: string
-          paymentType?: string
-          payment_type?: string
-          logos?: { dark?: string; light?: string }
-        }) => ({
-          paymentMethod: method.paymentMethod || method.payment_method || "",
-          name: method.name || "",
-          paymentType: method.paymentType || method.payment_type || "",
-          logos: method.logos
-            ? {
-                dark: method.logos.dark,
-                light: method.logos.light,
-              }
-            : undefined,
-        }),
-      )
-
-      logger.console.log(
-        "[useMeldPaymentMethods] Fetched",
-        parsedMethods.length,
-        "methods",
-      )
-      return parsedMethods
-    },
-    enabled: !!trailsClient,
-    staleTime: DAY_MS, // 24 hours - payment methods don't change frequently
-    gcTime: DAY_MS, // 24 hours cache time
-    retry: 2,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false, // Don't refetch on reconnect since data is stable for 24h
-  })
-
-  return {
-    paymentMethods: data || [],
-    isLoading,
-    error: error as Error | null,
-  }
-}
-
 export interface MeldToken {
   code: string // e.g., "USDC_ETH"
   name: string // e.g., "USD Coin"
@@ -209,266 +75,3 @@ export interface MeldQuote {
   lowKyc: boolean | null
   partnerFee: number
 }
-
-/**
- * Hook to fetch and filter crypto tokens from Meld
- * Filters to show only: Native tokens (ETH, MATIC, AVAX, BNB) + stablecoins (USDC, USDT, DAI)
- */
-export function useMeldTokens(
-  trailsClient: TrailsOnramp | null,
-  countryCode?: string,
-): {
-  tokens: MeldToken[]
-  isLoading: boolean
-  error: Error | null
-} {
-  const [tokens, setTokens] = useState<MeldToken[]>([])
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<Error | null>(null)
-  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const abortControllerRef = useRef<AbortController | null>(null)
-
-  useEffect(() => {
-    if (!trailsClient) {
-      setTokens([])
-      return
-    }
-
-    // Clear any existing debounce timer
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current)
-    }
-
-    // Abort any in-flight requests
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort()
-    }
-
-    // Create new abort controller
-    abortControllerRef.current = new AbortController()
-
-    // Debounce the fetch
-    debounceTimerRef.current = setTimeout(() => {
-      setIsLoading(true)
-      setError(null)
-
-      const fetchTokens = async () => {
-        try {
-          // If no country code provided, don't fetch
-          if (!countryCode) {
-            logger.console.log("[useMeldTokens] No country code provided")
-            setTokens([])
-            setIsLoading(false)
-            return
-          }
-
-          logger.console.log(
-            "[useMeldTokens] Fetching tokens for country:",
-            countryCode,
-          )
-          const response = await trailsClient.getMeldCryptoCurrencies({
-            countryCode: countryCode,
-          })
-          logger.console.log("[useMeldTokens] API response:", response)
-
-          // Check if request was aborted
-          if (abortControllerRef.current?.signal.aborted) {
-            return
-          }
-
-          // Parse crypto currencies from response
-          const cryptos = Array.isArray(response.cryptoCurrencies)
-            ? response.cryptoCurrencies
-            : []
-
-          // Allowed tokens: native tokens + major stablecoins
-          const allowedSymbols = new Set([
-            "ETH",
-            "MATIC",
-            "AVAX",
-            "BNB",
-            "USDC",
-            "USDT",
-            "DAI",
-          ])
-
-          // Get supported Sequence chain IDs
-          const supportedChainIds = (await getSupportedSequenceChains()).map(
-            (chain) => chain.id,
-          )
-
-          const parsedTokens: MeldToken[] = cryptos
-            .map((crypto) => {
-              const code = crypto.currencyCode || ""
-              const name = crypto.name || code
-
-              // Parse token code (e.g., "USDC_ETH" -> symbol: "USDC", chain: "ETH")
-              const parts = code.split("_")
-              const symbol = parts[0] || code
-              const chain = parts[1] || ""
-
-              const chainId = MELD_CHAIN_SUFFIX_TO_ID[chain]
-              let contractAddress: string | undefined
-
-              if (chainId && symbol) {
-                // For native tokens, use zero address
-                const isNativeToken =
-                  (symbol === "ETH" &&
-                    [1, 10, 8453, 42161].includes(chainId)) ||
-                  (symbol === "MATIC" && chainId === 137) ||
-                  (symbol === "AVAX" && chainId === 43114) ||
-                  (symbol === "BNB" && chainId === 56)
-
-                if (isNativeToken) {
-                  contractAddress = zeroAddress
-                } else {
-                  // Look up contract address in commonTokens
-                  const commonToken = commonTokens.find(
-                    (token) =>
-                      token.symbol === symbol && token.chainId === chainId,
-                  )
-                  contractAddress = commonToken?.contractAddress
-                }
-              }
-
-              return {
-                code,
-                name,
-                symbol,
-                chain,
-                chainName: chainId
-                  ? (getChainInfo(chainId)?.name ?? chain)
-                  : chain,
-                chainId,
-                contractAddress,
-              }
-            })
-            .filter((token) => allowedSymbols.has(token.symbol)) // Only allowed tokens
-            .filter(
-              (token) =>
-                token.chainId && supportedChainIds.includes(token.chainId),
-            ) // Only Sequence-supported chains
-            .filter(
-              (token, index, self) =>
-                // Remove duplicates by code
-                index === self.findIndex((t) => t.code === token.code),
-            )
-            // Sort: Stablecoins first (USDC, USDT, DAI), then native tokens
-            .sort((a, b) => {
-              const stablecoins = ["USDC", "USDT", "DAI"]
-              const aIsStable = stablecoins.includes(a.symbol)
-              const bIsStable = stablecoins.includes(b.symbol)
-
-              if (aIsStable && !bIsStable) return -1
-              if (!aIsStable && bIsStable) return 1
-
-              // Within same category, sort alphabetically
-              return a.symbol.localeCompare(b.symbol)
-            })
-
-          // Check if aborted before setting state
-          if (abortControllerRef.current?.signal.aborted) {
-            return
-          }
-
-          logger.console.log(
-            "[useMeldTokens] Setting tokens:",
-            parsedTokens.length,
-            "tokens",
-          )
-          logger.console.log("[useMeldTokens] Tokens:", parsedTokens)
-          setTokens(parsedTokens)
-        } catch (err) {
-          // Ignore abort errors
-          if (err instanceof Error && err.name === "AbortError") {
-            return
-          }
-
-          // Check if aborted before setting error
-          if (abortControllerRef.current?.signal.aborted) {
-            return
-          }
-
-          setError(err instanceof Error ? err : new Error(String(err)))
-          setTokens([])
-        } finally {
-          // Only update loading state if not aborted
-          if (!abortControllerRef.current?.signal.aborted) {
-            setIsLoading(false)
-          }
-        }
-      }
-
-      fetchTokens()
-    }, 300)
-
-    // Cleanup function
-    return () => {
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current)
-      }
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort()
-      }
-    }
-  }, [trailsClient, countryCode])
-
-  return { tokens, isLoading, error }
-}
-
-/**
- * Hook to fetch list of Meld service providers
- * Supports filtering by country, currencies, payment methods, etc.
- *
- * @note Results are cached for 24 hours as service providers are stable and don't change frequently.
- */
-export function useMeldProviders(
-  trailsClient?: TrailsOnramp | null,
-  options?: Partial<GetMeldServiceProvidersRequest>,
-): {
-  providers: MeldServiceProvider[]
-  isLoading: boolean
-  error: Error | null
-  refetch: () => void
-} {
-  const defaultOnrampClient = useOnrampClient()
-  const onrampClient = trailsClient ?? defaultOnrampClient
-
-  const { data, isLoading, error, refetch } = useQuery({
-    queryKey: ["meld-service-providers", options],
-    queryFn: async () => {
-      if (!onrampClient) {
-        throw new Error("No onramp client available")
-      }
-
-      logger.console.log(
-        "[useMeldProviders] Fetching service providers with options:",
-        options,
-      )
-
-      const response = await onrampClient.getMeldServiceProviders(options || {})
-
-      const providersData = response.serviceProviders || []
-
-      logger.console.log(
-        `[useMeldProviders] Found ${providersData.length} providers:`,
-        providersData,
-      )
-
-      return providersData
-    },
-    enabled: !!onrampClient,
-    staleTime: DAY_MS, // 24 hours - service providers don't change frequently
-    gcTime: DAY_MS, // 24 hours cache time
-    retry: 2,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false, // Don't refetch on reconnect since data is stable for 24h
-  })
-
-  return {
-    providers: data || [],
-    isLoading,
-    error: error as Error | null,
-    refetch,
-  }
-}