0xtrails 0.6.6 → 0.7.0

package/src/analytics.ts

@@ -286,13 +286,17 @@ abstract class BaseAnalytics {
     originChainId?: number
     destinationChainId?: number
     originTokenAddress?: string
+    originTokenAmount?: string
+    originTokenDecimals?: number
     destinationTokenSymbol?: string
     destinationTokenAddress?: string
     destinationTokenAmount?: string
+    destinationTokenDecimals?: number
     mode?: string
     fundMethod?: string
     sourceTokenPriceUsd?: string
     destinationTokenPriceUsd?: string
+    tradeType?: string
   }) {
     resetCheckoutId()
 
@@ -310,24 +314,207 @@ abstract class BaseAnalytics {
         }),
         destinationChainId: data.destinationChainId?.toString(),
         originChainId: data.originChainId?.toString(),
+        originTokenAmount: data.originTokenAmount?.toString(),
+        originTokenDecimals: data.originTokenDecimals?.toString(),
         destinationTokenAmount: data.destinationTokenAmount?.toString(),
+        destinationTokenDecimals: data.destinationTokenDecimals?.toString(),
         sourceTokenPriceUsd: data.sourceTokenPriceUsd?.toString(),
         destinationTokenPriceUsd: data.destinationTokenPriceUsd?.toString(),
+        tradeType: data.tradeType,
       },
     })
   }
 
+  /**
+   * Validates USD amounts are reasonable before sending to analytics
+   * Returns undefined if the value is invalid or suspicious
+   */
+  private validateUsdAmount(
+    usdAmount: string | number | undefined | null,
+    context: {
+      rawAmount?: string
+      formattedAmount?: string
+      decimals?: number
+      priceUsd?: string | number | null
+      tokenSymbol?: string
+    },
+  ): string | undefined {
+    if (!usdAmount) return undefined
+
+    const numValue = Number(usdAmount)
+
+    // Check for invalid numbers
+    if (!Number.isFinite(numValue) || Number.isNaN(numValue) || numValue < 0) {
+      logger.console.warn(
+        "[trails-sdk] Invalid USD amount detected, not sending to analytics:",
+        {
+          usdAmount,
+          context,
+        },
+      )
+      return undefined
+    }
+
+    // Check for suspiciously large values (more than 1 billion USD)
+    const MAX_REASONABLE_USD = 1_000_000_000
+    if (numValue > MAX_REASONABLE_USD) {
+      logger.console.warn(
+        "[trails-sdk] Suspiciously large USD amount detected, not sending to analytics:",
+        {
+          usdAmount,
+          context,
+        },
+      )
+      return undefined
+    }
+
+    // Validate raw amount matches formatted amount (using decimals)
+    // This catches cases where wrong decimals were used
+    if (
+      context.rawAmount &&
+      context.formattedAmount &&
+      context.decimals !== undefined &&
+      context.decimals >= 0 &&
+      context.decimals <= 18
+    ) {
+      try {
+        const rawAmountBig = BigInt(context.rawAmount)
+        const decimals = context.decimals
+        const divisor = BigInt(10 ** decimals)
+        const expectedFormatted = Number(rawAmountBig) / Number(divisor)
+        const actualFormatted = Number(context.formattedAmount)
+        const ratio = actualFormatted / expectedFormatted
+
+        // If formatted amount is more than 2x or less than 0.5x the expected value, it's suspicious
+        // (allowing some tolerance for rounding differences)
+        if (ratio > 2 || ratio < 0.5) {
+          logger.console.warn(
+            "[trails-sdk] Formatted amount doesn't match raw amount with decimals, not sending USD to analytics:",
+            {
+              usdAmount,
+              rawAmount: context.rawAmount,
+              formattedAmount: context.formattedAmount,
+              decimals: context.decimals,
+              expectedFormatted,
+              actualFormatted,
+              ratio,
+              context,
+            },
+          )
+          return undefined
+        }
+      } catch (err) {
+        // If parsing fails, log but don't block (might be edge case)
+        logger.console.warn(
+          "[trails-sdk] Error validating raw amount against formatted amount:",
+          err,
+        )
+      }
+    }
+
+    // If we have formatted amount and price, validate the calculation makes sense
+    if (
+      context.formattedAmount &&
+      context.priceUsd &&
+      Number(context.formattedAmount) > 0 &&
+      Number(context.priceUsd) > 0
+    ) {
+      const expectedUsd =
+        Number(context.formattedAmount) * Number(context.priceUsd)
+      const ratio = numValue / expectedUsd
+
+      // If the actual USD is more than 10x or less than 0.1x the expected value, it's suspicious
+      if (ratio > 10 || ratio < 0.1) {
+        logger.console.warn(
+          "[trails-sdk] USD amount doesn't match expected calculation, not sending to analytics:",
+          {
+            usdAmount,
+            expectedUsd,
+            ratio,
+            context,
+          },
+        )
+        return undefined
+      }
+    }
+
+    return numValue.toString()
+  }
+
   trackPaymentCompleted(data: {
     userAddress?: string
     intentAddress?: string
     mode?: string
     fundMethod?: string
+    originTokenAddress?: string
+    originTokenSymbol?: string
+    originTokenAmount?: string
+    originTokenAmountFormatted?: string
+    depositTokenAmount?: string
+    depositTokenAmountFormatted?: string
     depositTokenAmountUsd?: string
+    destinationTokenAmount?: string
+    destinationTokenAmountFormatted?: string
     destinationTokenAmountUsd?: string
+    originTokenDecimals?: number
+    destinationTokenDecimals?: number
     originChainId?: number
     destinationChainId?: number
+    tradeType?: string
+    sourceTokenPriceUsd?: string | number | null
+    destinationTokenPriceUsd?: string | number | null
     [key: string]: any
   }) {
+    // Validate USD amounts before sending
+    const validatedDepositTokenAmountUsd = this.validateUsdAmount(
+      data.depositTokenAmountUsd,
+      {
+        rawAmount: data.depositTokenAmount,
+        formattedAmount: data.depositTokenAmountFormatted,
+        decimals: data.originTokenDecimals,
+        priceUsd: data.sourceTokenPriceUsd,
+        tokenSymbol: data.originTokenSymbol,
+      },
+    )
+
+    const validatedDestinationTokenAmountUsd = this.validateUsdAmount(
+      data.destinationTokenAmountUsd,
+      {
+        rawAmount: data.destinationTokenAmount,
+        formattedAmount: data.destinationTokenAmountFormatted,
+        decimals: data.destinationTokenDecimals,
+        priceUsd: data.destinationTokenPriceUsd,
+        tokenSymbol: data.destinationTokenSymbol,
+      },
+    )
+
+    // Cross-validate: destination USD shouldn't be wildly different from deposit USD
+    // (unless there's a huge price difference, but even then, 100x difference is suspicious)
+    let finalDestinationTokenAmountUsd = validatedDestinationTokenAmountUsd
+    if (validatedDepositTokenAmountUsd && validatedDestinationTokenAmountUsd) {
+      const depositUsd = Number(validatedDepositTokenAmountUsd)
+      const destUsd = Number(validatedDestinationTokenAmountUsd)
+      const ratio = destUsd / depositUsd
+
+      // If destination USD is more than 100x or less than 0.01x the deposit USD, it's suspicious
+      if (ratio > 100 || ratio < 0.01) {
+        logger.console.warn(
+          "[trails-sdk] Suspicious USD ratio between deposit and destination, not sending destination USD:",
+          {
+            depositTokenAmountUsd: validatedDepositTokenAmountUsd,
+            destinationTokenAmountUsd: validatedDestinationTokenAmountUsd,
+            ratio,
+            depositTokenAmount: data.depositTokenAmount,
+            destinationTokenAmount: data.destinationTokenAmount,
+            originTokenSymbol: data.originTokenSymbol,
+            destinationTokenSymbol: data.destinationTokenSymbol,
+          },
+        )
+        // Don't send the suspicious destination USD value
+        finalDestinationTokenAmountUsd = undefined
+      }
+    }
+
     this.track({
       event: EventType.PAYMENT_COMPLETED,
       props: {
@@ -342,8 +529,23 @@ abstract class BaseAnalytics {
         ...(data.intentAddress && {
           intentAddress: data.intentAddress,
         }),
-        depositTokenAmountUsd: data.depositTokenAmountUsd?.toString(),
-        destinationTokenAmountUsd: data.destinationTokenAmountUsd?.toString(),
+        originTokenAddress: data.originTokenAddress,
+        originTokenSymbol: data.originTokenSymbol,
+        originTokenAmount: data.originTokenAmount?.toString(),
+        originTokenAmountFormatted: data.originTokenAmountFormatted?.toString(),
+        depositTokenAmount: data.depositTokenAmount?.toString(),
+        depositTokenAmountFormatted:
+          data.depositTokenAmountFormatted?.toString(),
+        depositTokenAmountUsd: validatedDepositTokenAmountUsd,
+        destinationTokenAmount: data.destinationTokenAmount?.toString(),
+        destinationTokenAmountFormatted:
+          data.destinationTokenAmountFormatted?.toString(),
+        destinationTokenAmountUsd: finalDestinationTokenAmountUsd,
+        originTokenDecimals: data.originTokenDecimals?.toString(),
+        destinationTokenDecimals: data.destinationTokenDecimals?.toString(),
+        tradeType: data.tradeType,
+        sourceTokenPriceUsd: data.sourceTokenPriceUsd?.toString(),
+        destinationTokenPriceUsd: data.destinationTokenPriceUsd?.toString(),
       },
     })
     resetCheckoutId()
@@ -1049,13 +1251,17 @@ export const trackPaymentStarted = (data: {
   originChainId?: number
   destinationChainId?: number
   originTokenAddress?: string
+  originTokenAmount?: string
+  originTokenDecimals?: number
   destinationTokenAddress?: string
   destinationTokenSymbol?: string
   destinationTokenAmount?: string
+  destinationTokenDecimals?: number
   mode?: string
   fundMethod?: string
   sourceTokenPriceUsd?: string
   destinationTokenPriceUsd?: string
+  tradeType?: string
 }) => {
   const analytics = getAnalytics()
   analytics.trackPaymentStarted(data)

package/src/chains.ts

@@ -36,10 +36,9 @@ import {
   xaiTestnet,
   etherlinkTestnet,
   somniaTestnet,
+  monad,
+  monadTestnet,
 } from "viem/chains"
-import { getRelaySupportedChains } from "./relaySdk.js"
-import { getLifiSupportedChains } from "./lifi.js"
-import type { QuoteProvider } from "./intents.js"
 import { somnia } from "./customChains.js"
 
 // Extended Chain type with imageUrl
@@ -47,12 +46,34 @@ export interface Chain extends ViemChain {
   imageUrl?: string
 }
 
+/**
+ * Simplified chain info type for UI components.
+ * Uses `chainId` instead of `id` for consistency with component props.
+ */
+export interface ChainListItem {
+  chainId: number
+  name: string
+  imageUrl?: string
+}
+
 // Function to get chain image URL
 export function getChainImageUrl(chainId: number): string {
   // Use Sequence's chain image assets
   return `https://assets.sequence.info/images/networks/large/${chainId}.webp`
 }
 
+/**
+ * Hook to get chain image URL for a given chain ID
+ * @param chainId - The chain ID to get the image URL for
+ * @returns Chain image URL or empty string if chainId is not provided
+ */
+export function useChainImageUrl(chainId?: number): string {
+  return React.useMemo(() => {
+    if (!chainId) return ""
+    return getChainImageUrl(chainId)
+  }, [chainId])
+}
+
 export function getAllChains(): Chain[] {
   return [
     arbitrum,
@@ -86,6 +107,8 @@ export function getAllChains(): Chain[] {
     xaiTestnet,
     etherlinkTestnet,
     somniaTestnet,
+    monad,
+    monadTestnet,
   ]
 }
 
@@ -136,6 +159,7 @@ function getSequenceRpcUrls(
       "etherlink",
       sequenceNodeGatewayUrl,
     ),
+    [monad.id]: getSequenceRpcUrlFromSlug("monad", sequenceNodeGatewayUrl),
   }
 }
 
@@ -235,6 +259,7 @@ export const supportedSequenceChains: Record<number, Chain> = {
   [xai.id]: getChainInfo(xai.id)!,
   [katana.id]: getChainInfo(katana.id)!,
   [etherlink.id]: getChainInfo(etherlink.id)!,
+  [monad.id]: getChainInfo(monad.id)!,
 }
 
 export const supportedSequenceTestnetChains: Record<number, Chain> = {
@@ -252,6 +277,7 @@ export const supportedSequenceTestnetChains: Record<number, Chain> = {
   [xaiTestnet.id]: getChainInfo(xaiTestnet.id)!,
   [etherlinkTestnet.id]: getChainInfo(etherlinkTestnet.id)!,
   [somniaTestnet.id]: getChainInfo(somniaTestnet.id)!,
+  [monadTestnet.id]: getChainInfo(monadTestnet.id)!,
 }
 
 export const mainnetChainsToTestnetChains: Record<number, Chain> = {
@@ -271,6 +297,7 @@ export const mainnetChainsToTestnetChains: Record<number, Chain> = {
   [apeChain.id]: sepolia,
   [etherlink.id]: etherlinkTestnet,
   [somnia.id]: somniaTestnet,
+  [monad.id]: monadTestnet,
 }
 
 // Helper to get chain info
@@ -351,23 +378,24 @@ export async function getSupportedSequenceChains(): Promise<Chain[]> {
 }
 
 // Chain order for sorting (in the desired display order)
-const CHAIN_ORDER = [
-  1, // Ethereum
-  8453, // Base
-  42161, // Arbitrum
-  137, // Polygon
-  747474, // Katana
-  56, // BNB Smart Chain
-  10, // Optimism
-  43114, // Avalanche
-  42170, // Arbitrum Nova
-  42793, // Etherlink
-  100, // Gnosis
-  8333, // B3
-  33139, // Ape Chain
-  1868, // Soneium
-  5031, // Somnia
-  660279, // Xai
+const CHAIN_ORDER: number[] = [
+  mainnet.id,
+  base.id,
+  arbitrum.id,
+  polygon.id,
+  katana.id,
+  bsc.id,
+  optimism.id,
+  avalanche.id,
+  arbitrumNova.id,
+  etherlink.id,
+  gnosis.id,
+  b3.id,
+  apeChain.id,
+  soneium.id,
+  somnia.id,
+  xai.id,
+  monad.id,
 ]
 
 // Mapping of chain ID to normalized display name
@@ -397,7 +425,7 @@ export function getNormalizedChainName(
  * @returns The sorted list of chains
  */
 export function sortChainsByOrder(chainList: Chain[]): Chain[] {
-  return chainList.sort((a, b) => {
+  return chainList.sort((a: Chain, b: Chain) => {
     const aIndex = CHAIN_ORDER.indexOf(a.id)
     const bIndex = CHAIN_ORDER.indexOf(b.id)
 
@@ -415,58 +443,19 @@ export function sortChainsByOrder(chainList: Chain[]): Chain[] {
   })
 }
 
-export async function getAllQuoteProviderChains(): Promise<Chain[]> {
-  const relayChains = await getRelaySupportedChains()
-  const lifiChains = await getLifiSupportedChains()
-  const allChains = [...relayChains, ...lifiChains]
-  return allChains.filter(
-    (chain, index, self) => index === self.findIndex((c) => c.id === chain.id),
-  )
-}
-
-export async function getSupportedChains({
-  quoteProvider,
-}: {
-  quoteProvider?: QuoteProvider | string
-} = {}): Promise<Chain[]> {
-  let quoteProviderChains: Chain[] = []
-  if (quoteProvider === "relay") {
-    quoteProviderChains = await getRelaySupportedChains()
-  } else if (quoteProvider === "lifi") {
-    quoteProviderChains = await getLifiSupportedChains()
-  } else {
-    quoteProviderChains = await getAllQuoteProviderChains()
-  }
-
+export async function getSupportedChains(): Promise<Chain[]> {
   const sequenceChains = await getSupportedSequenceChains()
-
-  // Find intersection of sequence chains and relay chains
-  const supportedChains = sequenceChains.filter((sequenceChain) =>
-    quoteProviderChains.some(
-      (quoteProviderChain) => quoteProviderChain.id === sequenceChain.id,
-    ),
-  )
-
-  // Ensure unique chain IDs by filtering duplicates
-  const uniqueChains = supportedChains.filter(
-    (chain, index, self) => index === self.findIndex((c) => c.id === chain.id),
-  )
-
   // Sort chains by predefined order
-  return sortChainsByOrder(uniqueChains)
+  return sortChainsByOrder(sequenceChains)
 }
 
-export function useSupportedChains({
-  quoteProvider,
-}: {
-  quoteProvider?: QuoteProvider | string
-} = {}): {
+export function useSupportedChains(): {
   supportedChains: Chain[]
   isLoadingChains: boolean
 } {
   const { data: supportedChains = [], isLoading: isLoadingChains } = useQuery({
     queryKey: ["supportedChains"],
-    queryFn: () => getSupportedChains({ quoteProvider }),
+    queryFn: () => getSupportedChains(),
     staleTime: 60 * 60 * 1000, // 1 hour - chains rarely change
     gcTime: 24 * 60 * 60 * 1000, // 24 hours - keep in cache for a full day
     refetchOnWindowFocus: false, // Don't refetch when window regains focus
@@ -483,3 +472,15 @@ export function getIsTestnetChainId(chainId: number): boolean {
   const testnetChainIds = Object.keys(supportedSequenceTestnetChains)
   return testnetChainIds.includes(chainId.toString())
 }
+
+/**
+ * Hook to get chain info for a given chain ID
+ * @param chainId - The chain ID to get info for
+ * @returns Chain info or null if not found
+ */
+export function useChainInfo(chainId?: number): Chain | null {
+  return React.useMemo(() => {
+    if (!chainId) return null
+    return getChainInfo(chainId)
+  }, [chainId])
+}

package/src/constants.ts

@@ -1,11 +1,15 @@
-import type { TrailsAddressOverrides } from "@0xsequence/trails-api"
+import type { TrailsAddressOverrides, TrailsContracts } from "@0xtrails/api"
 import type { Context as ContextLike } from "@0xsequence/wallet-primitives"
 import type { Address } from "ox"
 
-export const SEQUENCE_V3_CONTRACT_ADDRESSES: ContextLike.Context = {
+// Sequence Wallet V3 `rc-4` contract addresses
+export const SEQUENCE_V3_CONTRACT_ADDRESSES: ContextLike.Context & {
+  guestModule?: Address.Address
+} = {
   factory: "0x00000000000018A77519fcCCa060c2537c9D6d3F" as Address.Address,
-  stage1: "0x00000000000084fA81809Dd337311297C5594d62" as Address.Address,
-  stage2: "0x7438718F9E4b9B834e305A620EEeCf2B9E6eBE79" as Address.Address,
+  stage1: "0x0000000000003DF093bc4257E6dCE45D937EF161" as Address.Address,
+  stage2: "0x10bE1Abf3cD0918bb1079ECc6b8220c177F34088" as Address.Address,
+  guestModule: "0x0000000000601fcA38f0cCA649453F6739436d6C" as Address.Address,
   creationCode:
     "0x6041600e3d396021805130553df33d3d36153402601f57363d3d373d363d30545af43d82803e903d91601f57fd5bf3" as Address.Address,
 }
@@ -16,16 +20,16 @@ export const SEQUENCE_V3_CONTRACT_ADDRESSES_OVERRIDES: TrailsAddressOverrides =
     sequenceWalletMainModuleAddress: SEQUENCE_V3_CONTRACT_ADDRESSES.stage1,
     sequenceWalletMainModuleUpgradableAddress:
       SEQUENCE_V3_CONTRACT_ADDRESSES.stage2,
-  } as TrailsAddressOverrides
-
-export const TRAILS_ROUTER_ADDRESS: Address.Address =
-  "0xc4415c5CabD726bA06042af752a528B3dbc263F7"
-
-export const TRAILS_INTENT_ENTRYPOINT_ADDRESS: Address.Address =
-  "0x9470D883bac170116d397Db3dA71B2e57d567583"
-
-export const ATTESATION_SIGNER_ADDRESS: Address.Address =
-  "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"
+    sequenceWalletGuestModuleAddress:
+      SEQUENCE_V3_CONTRACT_ADDRESSES.guestModule,
+  }
+
+// Trails `rc-3` contract addresses
+export const TRAILS_CONTRACTS: TrailsContracts = {
+  trailsIntentEntrypointAddress: "0x91E9e3Fe369CF005dB2857Ef24955A66d1E692Cf",
+  trailsRouterAddress: "0xF8A739B9F24E297a98b7aba7A9cdFDBD457F6fF8",
+  trailsRouterShimAddress: "0x1306aF05bA556839885B9B8c758f1d2F33d3571E",
+}
 
 export const PROD_SEQUENCE_NODE_GATEWAY_URL = "https://nodes.sequence.app"
 export const PROD_SEQUENCE_INDEXER_URL = "https://indexer.sequence.app"

package/src/customTokens.ts

@@ -0,0 +1,151 @@
+import { useState, useCallback, useEffect } from "react"
+import type { Token } from "./tokens.js"
+import { logger } from "./logger.js"
+
+const cacheVersion = "01"
+
+// Custom tokens storage key
+const CUSTOM_TOKENS_KEY = `trails-sdk:custom-tokens:${cacheVersion}`
+
+// Custom tokens storage utilities
+function getCustomTokensFromStorage(): Token[] {
+  if (typeof window === "undefined") return []
+
+  try {
+    const cached = localStorage.getItem(CUSTOM_TOKENS_KEY)
+    if (!cached) return []
+
+    const parsed = JSON.parse(cached) as Token[]
+    // Validate that it's an array
+    if (!Array.isArray(parsed)) {
+      logger.console.warn(
+        "[trails-sdk] Invalid custom tokens format in localStorage, clearing",
+      )
+      localStorage.removeItem(CUSTOM_TOKENS_KEY)
+      return []
+    }
+
+    // Validate each token has required fields
+    return parsed.filter((token) => {
+      const isValid =
+        token &&
+        typeof token.contractAddress === "string" &&
+        typeof token.symbol === "string" &&
+        typeof token.name === "string" &&
+        typeof token.decimals === "number"
+      if (!isValid) {
+        logger.console.warn(
+          "[trails-sdk] Invalid custom token found, skipping:",
+          token,
+        )
+      }
+      return isValid
+    }) as Token[]
+  } catch (error) {
+    logger.console.error(
+      "[trails-sdk] Error reading custom tokens from localStorage:",
+      error,
+    )
+    // Clear corrupted data
+    try {
+      localStorage.removeItem(CUSTOM_TOKENS_KEY)
+    } catch {
+      // Ignore errors when clearing
+    }
+    return []
+  }
+}
+
+function saveCustomTokensToStorage(tokens: Token[]): void {
+  if (typeof window === "undefined") return
+
+  try {
+    localStorage.setItem(CUSTOM_TOKENS_KEY, JSON.stringify(tokens))
+  } catch (error) {
+    logger.console.error(
+      "[trails-sdk] Error saving custom tokens to localStorage:",
+      error,
+    )
+    // Handle quota exceeded error gracefully
+    if (error instanceof DOMException && error.name === "QuotaExceededError") {
+      logger.console.warn(
+        "[trails-sdk] localStorage quota exceeded, cannot save custom tokens",
+      )
+    }
+  }
+}
+
+/**
+ * Hook to manage custom tokens stored in localStorage
+ * Custom tokens persist across sessions and are merged with supported tokens
+ */
+export function useCustomTokens(): {
+  customTokens: Token[]
+  addCustomToken: (token: Token) => void
+  removeCustomToken: (chainId: number, contractAddress: string) => void
+  clearCustomTokens: () => void
+} {
+  const [customTokens, setCustomTokens] = useState<Token[]>(() => {
+    return getCustomTokensFromStorage()
+  })
+
+  // Sync with localStorage on mount
+  useEffect(() => {
+    const stored = getCustomTokensFromStorage()
+    setCustomTokens(stored)
+  }, [])
+
+  const addCustomToken = useCallback((token: Token) => {
+    setCustomTokens((prev) => {
+      // Check if token already exists (same chainId + contractAddress)
+      const tokenKey = `${token.chainId || 0}-${token.contractAddress.toLowerCase()}`
+      const existingIndex = prev.findIndex(
+        (t) =>
+          `${t.chainId || 0}-${t.contractAddress.toLowerCase()}` === tokenKey,
+      )
+
+      // Ensure isCustomToken is set to true
+      const tokenWithFlag = { ...token, isCustomToken: true }
+
+      let updated: Token[]
+      if (existingIndex >= 0) {
+        // Update existing token
+        updated = [...prev]
+        updated[existingIndex] = tokenWithFlag
+      } else {
+        // Add new token
+        updated = [...prev, tokenWithFlag]
+      }
+
+      saveCustomTokensToStorage(updated)
+      return updated
+    })
+  }, [])
+
+  const removeCustomToken = useCallback(
+    (chainId: number, contractAddress: string) => {
+      setCustomTokens((prev) => {
+        const updated = prev.filter(
+          (t) =>
+            t.chainId !== chainId ||
+            t.contractAddress.toLowerCase() !== contractAddress.toLowerCase(),
+        )
+        saveCustomTokensToStorage(updated)
+        return updated
+      })
+    },
+    [],
+  )
+
+  const clearCustomTokens = useCallback(() => {
+    setCustomTokens([])
+    saveCustomTokensToStorage([])
+  }, [])
+
+  return {
+    customTokens,
+    addCustomToken,
+    removeCustomToken,
+    clearCustomTokens,
+  }
+}