fix: token logo caching

Author: JuampiRombola

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.5.4] - 2025-12-02
+
+### Fixed
+
+- Fixed TokenLogo caching issue when switching between DTFs
+
 ## [1.5.3] - 2025-11-16
 
 ### Changed

demo/dtf-config.ts

@@ -29,8 +29,8 @@ export const DTF_BY_CHAIN: Record<number, DTFConfig[]> = {
   ],
   [bsc.id]: [
     {
-      address: '0xb1b317d781eacfeef75557c15708560e791cbd00',
-      symbol: 'TTCT',
+      address: '0x2f8a339b5889ffac4c5a956787cda593b3c36867',
+      symbol: 'CMC20',
     },
   ],
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reserve-protocol/react-zapper",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "type": "module",
   "description": "React component for DTF minting with zap functionality",
   "main": "dist/index.cjs.js",

src/components/token-logo.tsx

@@ -1,16 +1,14 @@
 import { indexDTFIconsAtom } from '../state/atoms'
 import { cn } from '../utils/cn'
 import { UNIVERSAL_ASSETS } from '../utils/universal'
-import { atom, useAtom, useAtomValue } from 'jotai'
+import { useAtomValue } from 'jotai'
 import * as React from 'react'
 import defaultLogoSvg from './icons/svgs/defaultLogo.svg'
 import ethSvg from './icons/svgs/eth.svg'
 import usdcSvg from './icons/svgs/usdc.svg'
 import wethSvg from './icons/svgs/weth.svg'
 import bnbSvg from './icons/svgs/bnb.svg'
 
-const routeCacheAtom = atom<Record<string, string>>({})
-
 type Sizes = 'sm' | 'md' | 'lg' | 'xl'
 
 const sizeMap: Record<Sizes, { width: number; height: number }> = {
@@ -29,7 +27,6 @@ interface Props extends React.ImgHTMLAttributes<HTMLImageElement> {
 
 const TokenLogo = React.forwardRef<HTMLImageElement, Props>((props, ref) => {
   const indexDTFIcons = useAtomValue(indexDTFIconsAtom)
-  const [routeCache, setRouteCache] = useAtom(routeCacheAtom)
   const {
     symbol,
     size = 'md',
@@ -68,43 +65,21 @@ const TokenLogo = React.forwardRef<HTMLImageElement, Props>((props, ref) => {
     })
   }
 
-  const cacheUrl = React.useCallback((url: string) => {
-    if (address && chain) {
-      setRouteCache((prev) => ({
-        ...prev,
-        [`${address.toLowerCase()}-${chain}`]: url,
-      }))
-    }
-  }, [address, chain, setRouteCache])
-
   const loadImage = React.useCallback(async () => {
     try {
-      // check cache first
-      if (address && chain) {
-        const cacheKey = `${address.toLowerCase()}-${chain}`
-        if (routeCache[cacheKey]) {
-          setCurrentSrc(routeCache[cacheKey])
-          return
-        }
-      }
-
-      // If we have a direct src, try to use it first
       if (propsSrc) {
         const url = await tryLoadImage(propsSrc)
-        cacheUrl(url)
         setCurrentSrc(url)
         return
       }
 
-      // If we have a symbol, try to load the logo according to convention
       if (symbol) {
         const symbolWithoutVault = symbol.endsWith('-VAULT')
           ? symbol.replace('-VAULT', '')
           : symbol
 
         const imgSrc = getKnownTokenLogo(symbolWithoutVault)
         if (imgSrc) {
-          cacheUrl(imgSrc)
           setCurrentSrc(imgSrc)
           return
         }
@@ -114,7 +89,6 @@ const TokenLogo = React.forwardRef<HTMLImageElement, Props>((props, ref) => {
         address && chain && indexDTFIcons[chain]?.[address.toLowerCase()]
       if (foundIndexDTFIcon) {
         const imgUrl = await tryLoadImage(foundIndexDTFIcon)
-        cacheUrl(imgUrl)
         setCurrentSrc(imgUrl)
         return
       }
@@ -125,7 +99,6 @@ const TokenLogo = React.forwardRef<HTMLImageElement, Props>((props, ref) => {
             .toUpperCase()
             .substring(1)}.svg`
           const url = await tryLoadImage(universalUrl)
-          // cacheUrl(url) // don't cache universal logos because of the wrapper... solve later
           setCurrentSrc(url)
           setIsWrapped(true)
           return
@@ -134,12 +107,10 @@ const TokenLogo = React.forwardRef<HTMLImageElement, Props>((props, ref) => {
         }
       }
 
-      // If we have address and chain, try external APIs
       if (address && chain) {
         try {
           const dexscreenerUrl = `https://dd.dexscreener.com/ds-data/tokens/base/${address?.toLowerCase()}.png?size=lg`
           const url = await tryLoadImage(dexscreenerUrl)
-          cacheUrl(url)
           setCurrentSrc(url)
           return
         } catch {
@@ -149,7 +120,6 @@ const TokenLogo = React.forwardRef<HTMLImageElement, Props>((props, ref) => {
         try {
           const llamaUrl = `https://token-icons.llamao.fi/icons/tokens/${chain}/${address?.toLowerCase()}?h=${h}&w=${w}`
           const url = await tryLoadImage(llamaUrl)
-          cacheUrl(url)
           setCurrentSrc(url)
           return
         } catch {
@@ -162,7 +132,7 @@ const TokenLogo = React.forwardRef<HTMLImageElement, Props>((props, ref) => {
       console.debug('Failed to load token logo:', error)
       setCurrentSrc(defaultLogoSvg)
     }
-  }, [propsSrc, symbol, address, chain, h, w, indexDTFIcons, routeCache, cacheUrl])
+  }, [propsSrc, symbol, address, chain, h, w, indexDTFIcons])
 
   React.useEffect(() => {
     setCurrentSrc('')