From 2e40accece71f7f68043ed5d8319450ab3c07eed Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Tue, 25 Mar 2025 05:35:48 +0800
Subject: [PATCH 1/2] feat: add tooltip for tokens

---
 .../stats/components/AssetMetricsTable.tsx    |   1 +
 app/history/components/HistoryTable.tsx       |  12 +-
 .../[marketid]/components/BorrowsTable.tsx    |   1 +
 .../components/LiquidationsTable.tsx          |   3 +
 .../[marketid]/components/SuppliesTable.tsx   |   1 +
 app/market/[chainId]/[marketid]/content.tsx   |   2 +
 app/markets/components/AssetFilter.tsx        |   2 +-
 app/markets/components/MarketTableBody.tsx    |   1 +
 app/markets/components/MarketTableUtils.tsx   |  10 +-
 app/markets/components/markets.tsx            | 127 +++++++++---------
 app/markets/components/utils.ts               |   3 +-
 app/positions/components/FromAndToMarkets.tsx |   2 +
 .../components/PositionsSummaryTable.tsx      |   2 +
 .../components/RebalanceActionInput.tsx       |   8 +-
 .../components/SuppliedMarketsDetail.tsx      |   1 +
 app/positions/components/agent/Main.tsx       |   2 +-
 app/positions/components/agent/SetupAgent.tsx |   1 +
 .../components/onboarding/AssetSelection.tsx  |   4 +-
 .../components/onboarding/RiskSelection.tsx   |   4 +-
 .../report/components/AssetSelector.tsx       |  11 +-
 .../report/components/ReportTable.tsx         |   1 +
 next.config.js                                |   4 +
 package.json                                  |   3 +-
 .../Borrow/AddCollateralAndBorrow.tsx         |   2 +
 .../Borrow/WithdrawCollateralAndRepay.tsx     |   2 +
 src/components/BorrowModal.tsx                |   1 +
 src/components/TokenIcon.tsx                  |  51 +++++--
 src/components/common/MarketInfoBlock.tsx     |  10 +-
 src/components/providers/ClientProviders.tsx  |  15 ++-
 src/components/providers/TokenProvider.tsx    | 118 ++++++++++++++++
 src/components/supplyModal.tsx                |   2 +
 src/components/withdrawModal.tsx              |   3 +
 src/hooks/useUserBalances.ts                  |   5 +-
 src/utils/positions.ts                        |   1 +
 src/utils/statsDataProcessing.ts              |   6 +-
 src/utils/tokens.ts                           |  29 ++--
 src/utils/types.ts                            |   1 +
 yarn.lock                                     |  14 +-
 38 files changed, 343 insertions(+), 123 deletions(-)
 create mode 100644 src/components/providers/TokenProvider.tsx

diff --git a/app/admin/stats/components/AssetMetricsTable.tsx b/app/admin/stats/components/AssetMetricsTable.tsx
index e51e4a8e..aaaad6a9 100644
--- a/app/admin/stats/components/AssetMetricsTable.tsx
+++ b/app/admin/stats/components/AssetMetricsTable.tsx
@@ -200,6 +200,7 @@ export function AssetMetricsTable({ data, selectedNetwork }: AssetMetricsTablePr
                         <TokenIcon
                           address={asset.assetAddress}
                           chainId={displayChainId}
+                          symbol={asset.assetSymbol}
                           width={20}
                           height={20}
                         />
diff --git a/app/history/components/HistoryTable.tsx b/app/history/components/HistoryTable.tsx
index 0fb8cb57..ea298faa 100644
--- a/app/history/components/HistoryTable.tsx
+++ b/app/history/components/HistoryTable.tsx
@@ -54,11 +54,11 @@ export function HistoryTable({ account, positions, rebalancerInfo }: HistoryTabl
   // Get unique assets with their chain IDs
   const uniqueAssets = useMemo(() => {
     const assetMap = new Map<string, AssetKey>();
-    positions.forEach((pos) => {
+    positions.forEach((pos, idx) => {
       const market = markets.find((m) => m.uniqueKey === pos.market.uniqueKey);
       if (!market) return;
 
-      const key = `${market.loanAsset.symbol}-${market.morphoBlue.chain.id}`;
+      const key = `${market.loanAsset.symbol}-${market.morphoBlue.chain.id}-${idx}`;
       if (!assetMap.has(key)) {
         assetMap.set(key, {
           symbol: market.loanAsset.symbol,
@@ -151,6 +151,7 @@ export function HistoryTable({ account, positions, rebalancerInfo }: HistoryTabl
                 <TokenIcon
                   address={selectedAsset.address}
                   chainId={selectedAsset.chainId}
+                  symbol={selectedAsset.symbol}
                   width={18}
                   height={18}
                 />
@@ -187,9 +188,9 @@ export function HistoryTable({ account, positions, rebalancerInfo }: HistoryTabl
             />
             <div className="relative">
               <ul className="custom-scrollbar max-h-60 overflow-auto pb-12" role="listbox">
-                {filteredAssets.map((asset) => (
+                {filteredAssets.map((asset, idx) => (
                   <li
-                    key={`${asset.symbol}-${asset.chainId}`}
+                    key={`${asset.symbol}-${asset.chainId}-${idx}`}
                     className={`m-2 flex cursor-pointer items-center justify-between rounded-md p-2 text-sm hover:bg-gray-300 dark:hover:bg-gray-700 ${
                       selectedAsset?.symbol === asset.symbol &&
                       selectedAsset?.chainId === asset.chainId
@@ -222,6 +223,7 @@ export function HistoryTable({ account, positions, rebalancerInfo }: HistoryTabl
                       <TokenIcon
                         address={asset.address}
                         chainId={asset.chainId}
+                        symbol={asset.symbol}
                         width={18}
                         height={18}
                       />
@@ -318,6 +320,7 @@ export function HistoryTable({ account, positions, rebalancerInfo }: HistoryTabl
                         <TokenIcon
                           address={market.loanAsset.address}
                           chainId={market.morphoBlue.chain.id}
+                          symbol={market.loanAsset.symbol}
                           width={20}
                           height={20}
                         />
@@ -353,6 +356,7 @@ export function HistoryTable({ account, positions, rebalancerInfo }: HistoryTabl
                         <TokenIcon
                           address={market.collateralAsset.address}
                           chainId={market.morphoBlue.chain.id}
+                          symbol={market.collateralAsset.symbol}
                           width={16}
                           height={16}
                         />
diff --git a/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx b/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx
index 151c97ed..4a56250a 100644
--- a/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx
+++ b/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx
@@ -110,6 +110,7 @@ export function BorrowsTable({ chainId, market }: BorrowsTableProps) {
                     <TokenIcon
                       address={market.loanAsset.address}
                       chainId={market.morphoBlue.chain.id}
+                      symbol={market.loanAsset.symbol}
                       width={16}
                       height={16}
                     />
diff --git a/app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx b/app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx
index 59697ecc..15f86d14 100644
--- a/app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx
+++ b/app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx
@@ -112,6 +112,7 @@ export function LiquidationsTable({ chainId, market }: LiquidationsTableProps) {
                       <TokenIcon
                         address={market.loanAsset.address}
                         chainId={market.morphoBlue.chain.id}
+                        symbol={market.loanAsset.symbol}
                         width={16}
                         height={16}
                       />
@@ -128,6 +129,7 @@ export function LiquidationsTable({ chainId, market }: LiquidationsTableProps) {
                       <TokenIcon
                         address={market.collateralAsset.address}
                         chainId={market.morphoBlue.chain.id}
+                        symbol={market.collateralAsset.symbol}
                         width={16}
                         height={16}
                       />
@@ -146,6 +148,7 @@ export function LiquidationsTable({ chainId, market }: LiquidationsTableProps) {
                           <TokenIcon
                             address={market.loanAsset.address}
                             chainId={market.morphoBlue.chain.id}
+                            symbol={market.loanAsset.symbol}
                             width={16}
                             height={16}
                           />
diff --git a/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx b/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx
index 1ff601de..816969f7 100644
--- a/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx
+++ b/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx
@@ -110,6 +110,7 @@ export function SuppliesTable({ chainId, market }: SuppliesTableProps) {
                     <TokenIcon
                       address={market.loanAsset.address}
                       chainId={market.morphoBlue.chain.id}
+                      symbol={market.loanAsset.symbol}
                       width={16}
                       height={16}
                     />
diff --git a/app/market/[chainId]/[marketid]/content.tsx b/app/market/[chainId]/[marketid]/content.tsx
index e595a7b4..eb182f42 100644
--- a/app/market/[chainId]/[marketid]/content.tsx
+++ b/app/market/[chainId]/[marketid]/content.tsx
@@ -188,6 +188,7 @@ function MarketContent() {
                     <TokenIcon
                       address={market.loanAsset.address}
                       chainId={market.morphoBlue.chain.id}
+                      symbol={market.loanAsset.symbol}
                       width={20}
                       height={20}
                     />
@@ -207,6 +208,7 @@ function MarketContent() {
                     <TokenIcon
                       address={market.collateralAsset.address}
                       chainId={market.morphoBlue.chain.id}
+                      symbol={market.collateralAsset.symbol}
                       width={20}
                       height={20}
                     />
diff --git a/app/markets/components/AssetFilter.tsx b/app/markets/components/AssetFilter.tsx
index 850979c6..d1aebe27 100644
--- a/app/markets/components/AssetFilter.tsx
+++ b/app/markets/components/AssetFilter.tsx
@@ -145,7 +145,7 @@ export default function AssetFilter({
               <ul className="custom-scrollbar max-h-60 overflow-auto pb-12" role="listbox">
                 {filteredItems.map((token) => (
                   <li
-                    key={token.symbol}
+                    key={`${token.symbol}-${token.networks[0].address}`}
                     className={`m-2 flex cursor-pointer items-center justify-between rounded-md p-2 text-sm hover:bg-gray-300 dark:hover:bg-gray-700 ${
                       selectedAssets.includes(
                         token.networks.map((n) => infoToKey(n.address, n.chain.id)).join('|'),
diff --git a/app/markets/components/MarketTableBody.tsx b/app/markets/components/MarketTableBody.tsx
index 67a187f0..6fe74692 100644
--- a/app/markets/components/MarketTableBody.tsx
+++ b/app/markets/components/MarketTableBody.tsx
@@ -48,6 +48,7 @@ export function MarketTableBody({
         return (
           <React.Fragment key={index}>
             <tr
+              key={item.uniqueKey}
               onClick={() =>
                 setExpandedRowId(item.uniqueKey === expandedRowId ? null : item.uniqueKey)
               }
diff --git a/app/markets/components/MarketTableUtils.tsx b/app/markets/components/MarketTableUtils.tsx
index a56bcafb..88b1667e 100644
--- a/app/markets/components/MarketTableUtils.tsx
+++ b/app/markets/components/MarketTableUtils.tsx
@@ -51,14 +51,20 @@ export function TDAsset({
   return (
     <td data-label={dataLabel ?? symbol} className="z-50">
       <div className="flex items-center justify-center gap-1">
-        <TokenIcon address={asset} chainId={chainId} width={18} height={18} />
+        <TokenIcon
+          address={asset}
+          chainId={chainId}
+          width={18}
+          height={18}
+          symbol={symbol}
+        />
         <a
           className="group flex items-center gap-1 no-underline hover:underline"
           href={getAssetURL(asset, chainId)}
           target="_blank"
           onClick={(e) => e.stopPropagation()}
         >
-          <p> {symbol} </p>
+          <p> {symbol.length > 5 ? `${symbol.slice(0, 5)}...` : symbol} </p>
           <p className="opacity-0 group-hover:opacity-100">
             <ExternalLinkIcon />
           </p>
diff --git a/app/markets/components/markets.tsx b/app/markets/components/markets.tsx
index 8ea84cd4..ab7baaca 100644
--- a/app/markets/components/markets.tsx
+++ b/app/markets/components/markets.tsx
@@ -8,6 +8,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { FaSync } from 'react-icons/fa';
 import { Button } from '@/components/common';
 import Header from '@/components/layout/header/Header';
+import { useTokens } from '@/components/providers/TokenProvider';
 import EmptyScreen from '@/components/Status/EmptyScreen';
 import LoadingScreen from '@/components/Status/LoadingScreen';
 import { SupplyModal } from '@/components/supplyModal';
@@ -19,7 +20,7 @@ import { useStyledToast } from '@/hooks/useStyledToast';
 import { SupportedNetworks } from '@/utils/networks';
 import { OracleVendors, parseOracleVendors } from '@/utils/oracle';
 import * as keys from '@/utils/storageKeys';
-import { ERC20Token, getUniqueTokens, UnknownERC20Token } from '@/utils/tokens';
+import { ERC20Token, UnknownERC20Token } from '@/utils/tokens';
 import { Market } from '@/utils/types';
 
 import AdvancedSearchBar, { ShortcutType } from './AdvancedSearchBar';
@@ -91,6 +92,8 @@ export default function Markets() {
   const [includeUnknownTokens] = useLocalStorage('includeUnknownTokens', false);
   const [showUnknownOracle] = useLocalStorage('showUnknownOracle', false);
 
+  const { allTokens, findToken } = useTokens();
+
   useEffect(() => {
     const currentParams = searchParams.toString();
     if (currentParams !== prevParamsRef.current) {
@@ -131,67 +134,68 @@ export default function Markets() {
   );
 
   useEffect(() => {
-    if (rawMarkets) {
-      const processTokens = (
-        tokenInfoList: { address: string; chainId: number; symbol: string; decimals: number }[],
-      ) => {
-        const knownTokens = getUniqueTokens(tokenInfoList);
-
-        if (!includeUnknownTokens) return knownTokens;
-
-        // Process unknown tokens
-        const unknownTokensBySymbol = tokenInfoList.reduce(
-          (acc, token) => {
-            if (
-              !knownTokens.some((known) =>
-                known.networks.some(
-                  (n) =>
-                    n.address.toLowerCase() === token.address.toLowerCase() &&
-                    n.chain.id === token.chainId,
-                ),
-              )
-            ) {
-              if (!acc[token.symbol]) {
-                acc[token.symbol] = {
-                  symbol:
-                    token.symbol.length > 10 ? `${token.symbol.slice(0, 10)}...` : token.symbol,
-                  img: undefined,
-                  decimals: token.decimals,
-                  networks: [],
-                  isUnknown: true,
-                };
-              }
-              acc[token.symbol].networks.push({
-                chain: { id: token.chainId } as Chain,
-                address: token.address,
-              });
+
+    // return if no markets
+    if (!rawMarkets) return;
+    
+    const processTokens = (
+      tokenInfoList: { address: string; chainId: number; symbol: string; decimals: number }[],
+    ) => {
+      if (!includeUnknownTokens) return allTokens;
+
+      // Process unknown tokens
+      const unknownTokensBySymbol = tokenInfoList.reduce(
+        (acc, token) => {
+          if (
+            !allTokens.some((known) =>
+              known.networks.some(
+                (n) =>
+                  n.address.toLowerCase() === token.address.toLowerCase() &&
+                  n.chain.id === token.chainId,
+              ),
+            )
+          ) {
+            if (!acc[token.symbol]) {
+              acc[token.symbol] = {
+                symbol:
+                  token.symbol.length > 10 ? `${token.symbol.slice(0, 10)}...` : token.symbol,
+                img: undefined,
+                decimals: token.decimals,
+                networks: [],
+                isUnknown: true,
+              };
             }
-            return acc;
-          },
-          {} as Record<string, UnknownERC20Token>,
-        );
-
-        return [...knownTokens, ...Object.values(unknownTokensBySymbol)];
-      };
-
-      const collatList = rawMarkets.map((m) => ({
-        address: m.collateralAsset.address,
-        chainId: m.morphoBlue.chain.id,
-        symbol: m.collateralAsset.symbol,
-        decimals: m.collateralAsset.decimals,
-      }));
-
-      const loanList = rawMarkets.map((m) => ({
-        address: m.loanAsset.address,
-        chainId: m.morphoBlue.chain.id,
-        symbol: m.loanAsset.symbol,
-        decimals: m.loanAsset.decimals,
-      }));
-
-      setUniqueCollaterals(processTokens(collatList));
-      setUniqueLoanAssets(processTokens(loanList));
-    }
-  }, [rawMarkets, includeUnknownTokens]);
+            acc[token.symbol].networks.push({
+              chain: { id: token.chainId } as Chain,
+              address: token.address,
+            });
+          }
+          return acc;
+        },
+        {} as Record<string, UnknownERC20Token>,
+      );
+
+      return [...allTokens, ...Object.values(unknownTokensBySymbol)];
+    };
+
+    const collatList = rawMarkets.map((m) => ({
+      address: m.collateralAsset.address,
+      chainId: m.morphoBlue.chain.id,
+      symbol: m.collateralAsset.symbol,
+      decimals: m.collateralAsset.decimals,
+    }));
+
+    const loanList = rawMarkets.map((m) => ({
+      address: m.loanAsset.address,
+      chainId: m.morphoBlue.chain.id,
+      symbol: m.loanAsset.symbol,
+      decimals: m.loanAsset.decimals,
+    }));
+
+    setUniqueCollaterals(processTokens(collatList));
+    setUniqueLoanAssets(processTokens(loanList));
+    
+  }, [rawMarkets, includeUnknownTokens, allTokens]);
 
   const updateUrlParams = useCallback(
     (collaterals: string[], loanAssets: string[], network: SupportedNetworks | null) => {
@@ -234,6 +238,7 @@ export default function Markets() {
       selectedLoanAssets,
       selectedOracles,
       staredIds,
+      findToken,
     ).filter((market) => {
       if (!searchQuery) return true; // If no search query, show all markets
       const lowercaseQuery = searchQuery.toLowerCase();
diff --git a/app/markets/components/utils.ts b/app/markets/components/utils.ts
index f2c829c3..5b25aa5b 100644
--- a/app/markets/components/utils.ts
+++ b/app/markets/components/utils.ts
@@ -2,7 +2,7 @@
 
 import { SupportedNetworks } from '@/utils/networks';
 import { parseOracleVendors, OracleVendors } from '@/utils/oracle';
-import { findToken } from '@/utils/tokens';
+import { ERC20Token } from '@/utils/tokens';
 import { Market } from '@/utils/types';
 import { SortColumn } from './constants';
 
@@ -57,6 +57,7 @@ export function applyFilterAndSort(
   selectedLoanAssets: string[],
   selectedOracles: OracleVendors[],
   staredIds: string[],
+  findToken: (address: string, chainId: number) => ERC20Token | undefined,
 ): Market[] {
   return markets
     .filter((market) => {
diff --git a/app/positions/components/FromAndToMarkets.tsx b/app/positions/components/FromAndToMarkets.tsx
index 558ac361..9b5b44b2 100644
--- a/app/positions/components/FromAndToMarkets.tsx
+++ b/app/positions/components/FromAndToMarkets.tsx
@@ -135,6 +135,7 @@ export function FromAndToMarkets({
                           <TokenIcon
                             address={marketPosition.market.collateralAsset.address}
                             chainId={marketPosition.market.morphoBlue.chain.id}
+                            symbol={marketPosition.market.collateralAsset.symbol}
                             width={18}
                             height={18}
                           />
@@ -270,6 +271,7 @@ export function FromAndToMarkets({
                           <TokenIcon
                             address={market.collateralAsset.address}
                             chainId={market.morphoBlue.chain.id}
+                            symbol={market.collateralAsset.symbol}
                             width={18}
                             height={18}
                           />
diff --git a/app/positions/components/PositionsSummaryTable.tsx b/app/positions/components/PositionsSummaryTable.tsx
index a3fa7694..4afcd514 100644
--- a/app/positions/components/PositionsSummaryTable.tsx
+++ b/app/positions/components/PositionsSummaryTable.tsx
@@ -218,6 +218,7 @@ export function PositionsSummaryTable({
                         <TokenIcon
                           address={groupedPosition.loanAssetAddress}
                           chainId={groupedPosition.chainId}
+                          symbol={groupedPosition.loanAssetSymbol}
                           width={16}
                           height={16}
                         />
@@ -262,6 +263,7 @@ export function PositionsSummaryTable({
                                 key={`${collateral.address}-${index}`}
                                 address={collateral.address}
                                 chainId={groupedPosition.chainId}
+                                symbol={collateral.symbol}
                                 width={20}
                                 height={20}
                                 opacity={collateral.amount > 0 ? 1 : 0.5}
diff --git a/app/positions/components/RebalanceActionInput.tsx b/app/positions/components/RebalanceActionInput.tsx
index cf978d3f..8155efff 100644
--- a/app/positions/components/RebalanceActionInput.tsx
+++ b/app/positions/components/RebalanceActionInput.tsx
@@ -40,7 +40,13 @@ export function RebalanceActionInput({
       />
       <div className="mx-2 flex items-center">
         <span className="mr-1 font-bold">{groupedPosition.loanAsset}</span>
-        <TokenIcon address={token.address} chainId={token.chainId} width={24} height={24} />
+        <TokenIcon
+          address={token.address}
+          chainId={token.chainId}
+          symbol={groupedPosition.loanAssetSymbol}
+          width={24}
+          height={24}
+        />
       </div>
       <span className="mr-2">From </span>
       <div className="w-48">
diff --git a/app/positions/components/SuppliedMarketsDetail.tsx b/app/positions/components/SuppliedMarketsDetail.tsx
index 03d6edb4..9804e5e8 100644
--- a/app/positions/components/SuppliedMarketsDetail.tsx
+++ b/app/positions/components/SuppliedMarketsDetail.tsx
@@ -164,6 +164,7 @@ export function SuppliedMarketsDetail({
                         <TokenIcon
                           address={position.market.collateralAsset.address}
                           chainId={position.market.morphoBlue.chain.id}
+                          symbol={position.market.collateralAsset.symbol}
                           width={18}
                           height={18}
                         />
diff --git a/app/positions/components/agent/Main.tsx b/app/positions/components/agent/Main.tsx
index ef7dc7c1..17016bcf 100644
--- a/app/positions/components/agent/Main.tsx
+++ b/app/positions/components/agent/Main.tsx
@@ -110,7 +110,7 @@ export function Main({ account, onNext, userRebalancerInfo }: MainProps) {
                       key={address}
                       className="bg-surface flex items-center gap-2 rounded px-3 py-2"
                     >
-                      <TokenIcon address={address} chainId={chainId} width={18} height={18} />
+                      <TokenIcon address={address} chainId={chainId} symbol={symbol} width={18} height={18} />
                       <span className="text-sm">
                         {symbol ?? 'Unknown'} ({marketsForLoanAsset.length})
                       </span>
diff --git a/app/positions/components/agent/SetupAgent.tsx b/app/positions/components/agent/SetupAgent.tsx
index b23382b8..93ef93b7 100644
--- a/app/positions/components/agent/SetupAgent.tsx
+++ b/app/positions/components/agent/SetupAgent.tsx
@@ -237,6 +237,7 @@ export function SetupAgent({
                   <TokenIcon
                     address={group.loanAsset.address}
                     chainId={SupportedNetworks.Base}
+                    symbol={group.loanAsset.symbol}
                     width={24}
                     height={24}
                   />
diff --git a/app/positions/components/onboarding/AssetSelection.tsx b/app/positions/components/onboarding/AssetSelection.tsx
index a0c28b98..804f925d 100644
--- a/app/positions/components/onboarding/AssetSelection.tsx
+++ b/app/positions/components/onboarding/AssetSelection.tsx
@@ -106,11 +106,11 @@ export function AssetSelection() {
         </div>
       ) : (
         <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-1 lg:grid-cols-2">
-          {tokensWithMarkets.map((token) => (
+          {tokensWithMarkets.map((token, idx) => (
             <motion.button
               aria-label={`Select ${token.symbol} on ${getNetworkName(token.network)}`}
               role="button"
-              key={`${token.symbol}-${token.network}`}
+              key={`${token.symbol}-${token.network}-${idx}`}
               onClick={() => handleTokenSelect(token)}
               className="group relative flex items-start gap-4 rounded border border-gray-200 bg-white p-4 text-left transition-all duration-300 hover:border-primary dark:border-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-800"
               transition={{ type: 'spring', stiffness: 300, damping: 20 }}
diff --git a/app/positions/components/onboarding/RiskSelection.tsx b/app/positions/components/onboarding/RiskSelection.tsx
index 38e70cfb..da2f4b8a 100644
--- a/app/positions/components/onboarding/RiskSelection.tsx
+++ b/app/positions/components/onboarding/RiskSelection.tsx
@@ -4,9 +4,9 @@ import { motion } from 'framer-motion';
 import { formatUnits } from 'viem';
 import { Button } from '@/components/common/Button';
 import { MarketInfoBlock } from '@/components/common/MarketInfoBlock';
+import { useTokens } from '@/components/providers/TokenProvider';
 import { formatReadable } from '@/utils/balance';
 import { OracleVendors, parseOracleVendors } from '@/utils/oracle';
-import { findToken, getUniqueTokens } from '@/utils/tokens';
 import { Market } from '@/utils/types';
 import AssetFilter from 'app/markets/components/AssetFilter';
 import OracleFilter from 'app/markets/components/OracleFilter';
@@ -29,6 +29,8 @@ export function RiskSelection() {
   const [selectedCollaterals, setSelectedCollaterals] = useState<string[]>([]);
   const [selectedOracles, setSelectedOracles] = useState<OracleVendors[]>([]);
 
+  const { findToken, getUniqueTokens } = useTokens();
+
   const collateralTokens = useMemo(() => {
     if (!selectedToken?.markets) return [];
     const tokens = selectedToken.markets.map((market) => ({
diff --git a/app/positions/report/components/AssetSelector.tsx b/app/positions/report/components/AssetSelector.tsx
index 4375bacf..1df1f634 100644
--- a/app/positions/report/components/AssetSelector.tsx
+++ b/app/positions/report/components/AssetSelector.tsx
@@ -64,6 +64,7 @@ export function AssetSelector({ selectedAsset, assets, onSelect }: AssetSelector
                 <TokenIcon
                   address={selectedAsset.address}
                   chainId={selectedAsset.chainId}
+                  symbol={selectedAsset.symbol}
                   width={20}
                   height={20}
                 />
@@ -105,7 +106,7 @@ export function AssetSelector({ selectedAsset, assets, onSelect }: AssetSelector
             {filteredAssets.map((asset) => (
               <button
                 type="button"
-                key={`${asset.symbol}-${asset.chainId}`}
+                key={`${asset.address}-${asset.chainId}`}
                 role="option"
                 aria-selected={
                   selectedAsset?.symbol === asset.symbol && selectedAsset?.chainId === asset.chainId
@@ -127,7 +128,13 @@ export function AssetSelector({ selectedAsset, assets, onSelect }: AssetSelector
                   }
                 }}
               >
-                <TokenIcon address={asset.address} chainId={asset.chainId} width={20} height={20} />
+                <TokenIcon
+                  address={asset.address}
+                  chainId={asset.chainId}
+                  symbol={asset.symbol}
+                  width={20}
+                  height={20}
+                />
                 <span className="font-medium">{asset.symbol}</span>
                 <div className="badge">
                   <NetworkIcon networkId={asset.chainId} />
diff --git a/app/positions/report/components/ReportTable.tsx b/app/positions/report/components/ReportTable.tsx
index b4f02681..0cc4d287 100644
--- a/app/positions/report/components/ReportTable.tsx
+++ b/app/positions/report/components/ReportTable.tsx
@@ -75,6 +75,7 @@ function MarketSummaryBlock({
           <TokenIcon
             address={market.collateralAsset.address}
             chainId={market.morphoBlue.chain.id}
+            symbol={market.collateralAsset.symbol}
             width={24}
             height={24}
           />
diff --git a/next.config.js b/next.config.js
index d8d54fa8..be1c119b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -18,6 +18,10 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'api.dicebear.com',
       },
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
     ],
   },
 };
diff --git a/package.json b/package.json
index 06c434bb..466c1a00 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,8 @@
     "unified": "^11.0.4",
     "viem": "2.x",
     "wagmi": "^2.10.2",
-    "workbox-webpack-plugin": "^7.0.0"
+    "workbox-webpack-plugin": "^7.0.0",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.5",
diff --git a/src/components/Borrow/AddCollateralAndBorrow.tsx b/src/components/Borrow/AddCollateralAndBorrow.tsx
index 585d4233..ceb43da1 100644
--- a/src/components/Borrow/AddCollateralAndBorrow.tsx
+++ b/src/components/Borrow/AddCollateralAndBorrow.tsx
@@ -178,6 +178,7 @@ export function AddCollateralAndBorrow({
                   <TokenIcon
                     address={market.collateralAsset.address}
                     chainId={market.morphoBlue.chain.id}
+                    symbol={market.collateralAsset.symbol}
                     width={16}
                     height={16}
                   />
@@ -196,6 +197,7 @@ export function AddCollateralAndBorrow({
                   <TokenIcon
                     address={market.loanAsset.address}
                     chainId={market.morphoBlue.chain.id}
+                    symbol={market.loanAsset.symbol}
                     width={16}
                     height={16}
                   />
diff --git a/src/components/Borrow/WithdrawCollateralAndRepay.tsx b/src/components/Borrow/WithdrawCollateralAndRepay.tsx
index 808d5e77..002887eb 100644
--- a/src/components/Borrow/WithdrawCollateralAndRepay.tsx
+++ b/src/components/Borrow/WithdrawCollateralAndRepay.tsx
@@ -185,6 +185,7 @@ export function WithdrawCollateralAndRepay({
                 <TokenIcon
                   address={market.collateralAsset.address}
                   chainId={market.morphoBlue.chain.id}
+                  symbol={market.collateralAsset.symbol}
                   width={16}
                   height={16}
                 />
@@ -203,6 +204,7 @@ export function WithdrawCollateralAndRepay({
                 <TokenIcon
                   address={market.loanAsset.address}
                   chainId={market.morphoBlue.chain.id}
+                  symbol={market.loanAsset.symbol}
                   width={16}
                   height={16}
                 />
diff --git a/src/components/BorrowModal.tsx b/src/components/BorrowModal.tsx
index ac62c540..7f47c01b 100644
--- a/src/components/BorrowModal.tsx
+++ b/src/components/BorrowModal.tsx
@@ -68,6 +68,7 @@ export function BorrowModal({ market, onClose }: BorrowModalProps): JSX.Element
               <TokenIcon
                 address={market.loanAsset.address}
                 chainId={market.morphoBlue.chain.id}
+                symbol={market.loanAsset.symbol}
                 width={20}
                 height={20}
               />
diff --git a/src/components/TokenIcon.tsx b/src/components/TokenIcon.tsx
index 7bbdb0db..94f2af51 100644
--- a/src/components/TokenIcon.tsx
+++ b/src/components/TokenIcon.tsx
@@ -1,30 +1,57 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import Image from 'next/image';
-import { findToken } from '@/utils/tokens';
-
+import { useTokens } from '@/components/providers/TokenProvider';
+import { Tooltip } from '@nextui-org/tooltip';
+import { TooltipContent } from './TooltipContent';
 type TokenIconProps = {
   address: string;
   chainId: number;
   width: number;
   height: number;
   opacity?: number;
+  symbol?: string;
 };
 
 export function TokenIcon({ address, chainId, width, height, opacity }: TokenIconProps) {
-  const token = findToken(address, chainId);
 
-  if (!token?.img) {
-    return <div className="rounded-full bg-gray-300 dark:bg-gray-700" style={{ width, height }} />;
-  }
+  const { findToken } = useTokens();
 
-  return (
-    <Image
+  const token = useMemo(() => findToken(address, chainId), [address, chainId, findToken]);
+
+  // If we have a token with an image, use that
+  if (token?.img) {
+    const img = <Image
       className="rounded-full"
       src={token.img}
-      alt={token.symbol || 'Token'}
+      alt={token.symbol}
       width={width}
       height={height}
-      style={{ opacity }}
     />
-  );
+
+    const detail = token.isFactoryToken
+      ? `This token is auto-detected from protocol ${token.protocol?.name} `
+      : `This token is trusted by Monarch whitelist`;
+
+    return (
+      <Tooltip
+        content={<TooltipContent
+          title={token.symbol}
+          detail={detail}
+          icon={img}
+        />}
+      >
+        <Image
+          className="rounded-full"
+          src={token.img}
+          alt={token.symbol}
+          width={width}
+          height={height}
+          style={{ opacity }}
+        />
+      </Tooltip>
+    );
+  }
+
+  // Fallback to placeholder
+  return <div className="rounded-full bg-gray-300 dark:bg-gray-700" style={{ width, height }} />;
 }
diff --git a/src/components/common/MarketInfoBlock.tsx b/src/components/common/MarketInfoBlock.tsx
index b53084b3..43af1739 100644
--- a/src/components/common/MarketInfoBlock.tsx
+++ b/src/components/common/MarketInfoBlock.tsx
@@ -23,8 +23,9 @@ export function MarketInfoBlock({ market, amount, className }: MarketInfoBlockPr
         <TokenIcon
           address={market.collateralAsset.address}
           chainId={market.morphoBlue.chain.id}
-          width={16}
-          height={16}
+          symbol={market.collateralAsset.symbol}
+          width={20}
+          height={20}
         />
         <div className="flex flex-col">
           <div className="flex items-center gap-2">
@@ -64,8 +65,9 @@ export function MarketInfoBlockCompact({
         <TokenIcon
           address={market.collateralAsset.address}
           chainId={market.morphoBlue.chain.id}
-          width={16}
-          height={16}
+          symbol={market.collateralAsset.symbol}
+          width={20}
+          height={20}
         />
         <div className="flex flex-col">
           <div className="flex items-center gap-2">
diff --git a/src/components/providers/ClientProviders.tsx b/src/components/providers/ClientProviders.tsx
index 899514b7..de5389a6 100644
--- a/src/components/providers/ClientProviders.tsx
+++ b/src/components/providers/ClientProviders.tsx
@@ -3,6 +3,9 @@
 import { ReactNode } from 'react';
 import { MarketsProvider } from '@/contexts/MarketsContext';
 import { OnboardingProvider } from 'app/positions/components/onboarding/OnboardingContext';
+import { ConnectRedirectProvider } from './ConnectRedirectProvider';
+import { ThemeProviders } from './ThemeProvider';
+import { TokenProvider } from './TokenProvider';
 
 type ClientProvidersProps = {
   children: ReactNode;
@@ -10,8 +13,14 @@ type ClientProvidersProps = {
 
 export function ClientProviders({ children }: ClientProvidersProps) {
   return (
-    <MarketsProvider>
-      <OnboardingProvider>{children}</OnboardingProvider>
-    </MarketsProvider>
+    <ThemeProviders>
+      <TokenProvider>
+        <ConnectRedirectProvider>
+          <MarketsProvider>
+            <OnboardingProvider>{children}</OnboardingProvider>
+          </MarketsProvider>
+        </ConnectRedirectProvider>
+      </TokenProvider>
+    </ThemeProviders>
   );
 }
diff --git a/src/components/providers/TokenProvider.tsx b/src/components/providers/TokenProvider.tsx
new file mode 100644
index 00000000..938bc6d1
--- /dev/null
+++ b/src/components/providers/TokenProvider.tsx
@@ -0,0 +1,118 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { mainnet, base } from 'viem/chains';
+import { z } from 'zod';
+import { supportedTokens } from '@/utils/tokens';
+import type { ERC20Token } from '@/utils/tokens';
+
+// Only parse the fields we need
+const PendleAssetSchema = z.object({
+  address: z.string(),
+  chainId: z.number(),
+  symbol: z.string(),
+  decimals: z.number(),
+  proIcon: z.string().nullable(),
+});
+
+type PendleAsset = z.infer<typeof PendleAssetSchema>;
+
+type TokenContextType = {
+  allTokens: ERC20Token[];
+  findToken: (address: string, chainId: number) => ERC20Token | undefined;
+  getUniqueTokens: (tokenList: { address: string; chainId: number }[]) => ERC20Token[];
+}
+
+const TokenContext = createContext<TokenContextType | null>(null);
+
+async function fetchPendleAssets(chainId: number): Promise<PendleAsset[]> {
+  try {
+    const response = await fetch(`https://api-v2.pendle.finance/core/v1/${chainId}/assets/all`);
+    if (!response.ok) return [];
+    const data = await response.json() as PendleAsset[];
+    return z.array(PendleAssetSchema).parse(data);
+  } catch (error) {
+    console.error(`Error fetching Pendle assets for chain ${chainId}:`, error);
+    return [];
+  }
+}
+
+function convertPendleAssetToToken(asset: PendleAsset): ERC20Token {
+  return {
+    symbol: asset.symbol,
+    decimals: asset.decimals,
+    img: asset.proIcon ?? undefined,
+    networks: [
+      {
+        chain: asset.chainId === 1 ? mainnet : base,
+        address: asset.address,
+      },
+    ],
+    isFactoryToken: true,
+    protocol: {
+      name: 'Pendle',
+    },
+  };
+}
+
+export function TokenProvider({ children }: { children: React.ReactNode }) {
+  const [allTokens, setAllTokens] = useState<ERC20Token[]>(supportedTokens);
+
+  useEffect(() => {
+    async function fetchAllAssets() {
+      try {
+        const [mainnetAssets, baseAssets] = await Promise.all([
+          fetchPendleAssets(1),
+          fetchPendleAssets(8453),
+        ]);
+        const pendleTokens = [
+          ...mainnetAssets.map(convertPendleAssetToToken),
+          ...baseAssets.map(convertPendleAssetToToken),
+        ];
+
+        setAllTokens([...supportedTokens, ...pendleTokens]);
+      } catch (err) {
+        console.error('Error fetching Pendle assets:', err);
+      }
+    }
+
+    void fetchAllAssets();
+  }, []);
+
+  const findToken = useCallback((address: string, chainId: number) => {
+    return allTokens.find((token) =>
+      token.networks.some(
+        (network) =>
+          network.address.toLowerCase() === address.toLowerCase() && network.chain.id === chainId,
+      ),
+      );
+    },
+    [allTokens],
+  );
+
+  const getUniqueTokens = useCallback((tokenList: { address: string; chainId: number }[]) => {
+    return allTokens.filter((token) => {
+      return tokenList.find((item) =>
+        token.networks.find(
+          (network) =>
+            network.address.toLowerCase() === item.address.toLowerCase() &&
+            network.chain.id === item.chainId,
+        ),
+      );
+    });
+  }, [allTokens]);
+
+  const value = useMemo(() => ({ allTokens, findToken, getUniqueTokens }), [allTokens, findToken, getUniqueTokens]);
+
+  return (
+    <TokenContext.Provider value={value}>
+      {children}
+    </TokenContext.Provider>
+  );
+}
+
+export function useTokens() {
+  const context = useContext(TokenContext);
+  if (!context) {
+    throw new Error('useTokens must be used within a TokenProvider');
+  }
+  return context;
+} 
\ No newline at end of file
diff --git a/src/components/supplyModal.tsx b/src/components/supplyModal.tsx
index cae60f62..99f487a4 100644
--- a/src/components/supplyModal.tsx
+++ b/src/components/supplyModal.tsx
@@ -89,6 +89,7 @@ export function SupplyModal({ market, onClose }: SupplyModalProps): JSX.Element
               <TokenIcon
                 address={market.loanAsset.address}
                 chainId={market.morphoBlue.chain.id}
+                symbol={market.loanAsset.symbol}
                 width={18}
                 height={18}
               />
@@ -185,6 +186,7 @@ export function SupplyModal({ market, onClose }: SupplyModalProps): JSX.Element
                       <TokenIcon
                         address={market.loanAsset.address}
                         chainId={market.morphoBlue.chain.id}
+                        symbol={market.loanAsset.symbol}
                         width={18}
                         height={18}
                       />
diff --git a/src/components/withdrawModal.tsx b/src/components/withdrawModal.tsx
index 20a6eaae..5c39177a 100644
--- a/src/components/withdrawModal.tsx
+++ b/src/components/withdrawModal.tsx
@@ -116,6 +116,7 @@ export function WithdrawModal({ position, onClose, refetch }: ModalProps): JSX.E
           <TokenIcon
             address={position.market.loanAsset.address}
             chainId={position.market.morphoBlue.chain.id}
+            symbol={position.market.loanAsset.symbol}
             width={16}
             height={16}
           />
@@ -145,6 +146,7 @@ export function WithdrawModal({ position, onClose, refetch }: ModalProps): JSX.E
                 <TokenIcon
                   address={position.market.loanAsset.address}
                   chainId={position.market.morphoBlue.chain.id}
+                  symbol={position.market.loanAsset.symbol}
                   width={16}
                   height={16}
                 />
@@ -166,6 +168,7 @@ export function WithdrawModal({ position, onClose, refetch }: ModalProps): JSX.E
                 <TokenIcon
                   address={position.market.loanAsset.address}
                   chainId={position.market.morphoBlue.chain.id}
+                  symbol={position.market.loanAsset.symbol}
                   width={16}
                   height={16}
                 />
diff --git a/src/hooks/useUserBalances.ts b/src/hooks/useUserBalances.ts
index c6729bd6..bbc7c688 100644
--- a/src/hooks/useUserBalances.ts
+++ b/src/hooks/useUserBalances.ts
@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
+import { useTokens } from '@/components/providers/TokenProvider';
 import { SupportedNetworks } from '@/utils/networks';
-import { findToken } from '@/utils/tokens';
-
 type TokenBalance = {
   address: string;
   balance: string;
@@ -25,6 +24,8 @@ export function useUserBalances() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
+  const { findToken } = useTokens();
+
   const fetchBalances = useCallback(
     async (chainId: number): Promise<TokenResponse['tokens']> => {
       try {
diff --git a/src/utils/positions.ts b/src/utils/positions.ts
index 6e9152dc..9cc53165 100644
--- a/src/utils/positions.ts
+++ b/src/utils/positions.ts
@@ -251,6 +251,7 @@ export function groupPositionsByLoanAsset(
           loanAsset: position.market.loanAsset.symbol || 'Unknown',
           loanAssetAddress,
           loanAssetDecimals,
+          loanAssetSymbol: position.market.loanAsset.symbol || 'Unknown',
           chainId,
           totalSupply: 0,
           totalWeightedApy: 0,
diff --git a/src/utils/statsDataProcessing.ts b/src/utils/statsDataProcessing.ts
index f97c7063..bf1b6c94 100644
--- a/src/utils/statsDataProcessing.ts
+++ b/src/utils/statsDataProcessing.ts
@@ -1,7 +1,7 @@
 import { formatUnits } from 'viem';
 import { SupportedNetworks } from './networks';
 import { AssetVolumeData, Transaction } from './statsUtils';
-import { findToken } from './tokens';
+import { findToken as findTokenStatic } from './tokens';
 
 /**
  * Process transaction data to extract detailed asset metrics
@@ -27,7 +27,7 @@ export const processTransactionData = (
 
     if (!assetMetrics[assetKey]) {
       // Try to find token info using findToken
-      const token = findToken(assetAddress, chainId);
+      const token = findTokenStatic(assetAddress, chainId);
 
       const symbol = token?.symbol ?? assetSymbolMap[assetAddress] ?? 'Unknown';
 
@@ -205,7 +205,7 @@ export const calculateHumanReadableVolumes = (
 })[] => {
   return assetMetrics.map((asset) => {
     // Find token to get decimals
-    const token = findToken(asset.assetAddress, asset.chainId ?? SupportedNetworks.Base);
+    const token = findTokenStatic(asset.assetAddress, asset.chainId ?? SupportedNetworks.Base);
     const decimals = token?.decimals ?? 18;
 
     // Calculate formatted values
diff --git a/src/utils/tokens.ts b/src/utils/tokens.ts
index 37575650..366033ae 100644
--- a/src/utils/tokens.ts
+++ b/src/utils/tokens.ts
@@ -14,8 +14,8 @@ export type ERC20Token = {
   networks: { chain: Chain; address: string }[];
   protocol?: {
     name: string;
-    isProxy: boolean;
   };
+  isFactoryToken?: boolean;
 };
 
 export type UnknownERC20Token = {
@@ -34,15 +34,15 @@ const MORPHO_LEGACY = '0x9994E35Db50125E0DF82e4c2dde62496CE330999';
 const MORPHO_TOKEN_WRAPPER = '0x9d03bb2092270648d7480049d0e58d2fcf0e5123';
 
 const supportedTokens = [
-  // {
-  //   symbol: 'USDC',
-  //   img: require('../imgs/tokens/usdc.webp') as string,
-  //   decimals: 6,
-  //   networks: [
-  //     { chain: mainnet, address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' },
-  //     { chain: base, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
-  //   ],
-  // },
+  {
+    symbol: 'USDC',
+    img: require('../imgs/tokens/usdc.webp') as string,
+    decimals: 6,
+    networks: [
+      { chain: mainnet, address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' },
+      { chain: base, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
+    ],
+  },
   {
     symbol: 'USDT',
     img: require('../imgs/tokens/usdt.webp') as string,
@@ -485,14 +485,6 @@ const supportedTokens = [
   },
 ];
 
-const isWhitelisted = (address: string, chainId: number) => {
-  return supportedTokens.some((token) =>
-    token.networks.some(
-      (network) =>
-        network.address.toLowerCase() === address.toLowerCase() && network.chain.id === chainId,
-    ),
-  );
-};
 
 const findToken = (address: string, chainId: number) => {
   return supportedTokens.find((token) =>
@@ -542,7 +534,6 @@ const isWETH = (address: string, chainId: number) => {
 export {
   supportedTokens,
   isWETH,
-  isWhitelisted,
   findTokenWithKey,
   findToken,
   getUniqueTokens,
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 8935b121..f5a5017b 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -218,6 +218,7 @@ export type GroupedPosition = {
   loanAssetAddress: string;
   loanAssetDecimals: number;
   chainId: number;
+  loanAssetSymbol: string;
   totalSupply: number;
   totalWeightedApy: number;
 
diff --git a/yarn.lock b/yarn.lock
index b2e2256a..a4502061 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9579,9 +9579,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001524, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001646":
-  version: 1.0.30001646
-  resolution: "caniuse-lite@npm:1.0.30001646"
-  checksum: 10c0/ecdd87c08cd63fa32e11311dfa3543a52613b0b99498b6fe6f2c66af65cc27e2f7436fa5b2bc2bcf72174448a7670715b284d420de838bcf3e811864371a2465
+  version: 1.0.30001707
+  resolution: "caniuse-lite@npm:1.0.30001707"
+  checksum: 10c0/a1beaf84bad4f6617bbc5616d6bc0c9cab73e73f7e9e09b6466af5195b1bc393e0f6f19643d7a1c88bd3f4bfa122d7bea81cf6225ec3ade57d5b1dd3478c1a1b
   languageName: node
   linkType: hard
 
@@ -15315,6 +15315,7 @@ __metadata:
     viem: "npm:2.x"
     wagmi: "npm:^2.10.2"
     workbox-webpack-plugin: "npm:^7.0.0"
+    zod: "npm:^3.24.2"
   languageName: unknown
   linkType: soft
 
@@ -20303,6 +20304,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zod@npm:^3.24.2":
+  version: 3.24.2
+  resolution: "zod@npm:3.24.2"
+  checksum: 10c0/c638c7220150847f13ad90635b3e7d0321b36cce36f3fc6050ed960689594c949c326dfe2c6fa87c14b126ee5d370ccdebd6efb304f41ef5557a4aaca2824565
+  languageName: node
+  linkType: hard
+
 "zustand@npm:4.4.1":
   version: 4.4.1
   resolution: "zustand@npm:4.4.1"

From 30b358cfd295ff821087f789a08b4130f5aeb310 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Tue, 25 Mar 2025 05:42:49 +0800
Subject: [PATCH 2/2] chore: lint

---
 app/markets/components/NetworkFilter.tsx | 1 +
 src/components/TokenIcon.tsx             | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/markets/components/NetworkFilter.tsx b/app/markets/components/NetworkFilter.tsx
index ed505ab1..62d98341 100644
--- a/app/markets/components/NetworkFilter.tsx
+++ b/app/markets/components/NetworkFilter.tsx
@@ -10,6 +10,7 @@ type FilterProps = {
 export default function NetworkFilter({ setSelectedNetwork, selectedNetwork }: FilterProps) {
   return (
     <Select
+      suppressHydrationWarning
       label="Network"
       selectionMode="single"
       placeholder="All networks"
diff --git a/src/components/TokenIcon.tsx b/src/components/TokenIcon.tsx
index 94f2af51..c97a0fa5 100644
--- a/src/components/TokenIcon.tsx
+++ b/src/components/TokenIcon.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
+import { Tooltip } from '@nextui-org/tooltip';
 import Image from 'next/image';
 import { useTokens } from '@/components/providers/TokenProvider';
-import { Tooltip } from '@nextui-org/tooltip';
 import { TooltipContent } from './TooltipContent';
 type TokenIconProps = {
   address: string;
@@ -29,7 +29,7 @@ export function TokenIcon({ address, chainId, width, height, opacity }: TokenIco
     />
 
     const detail = token.isFactoryToken
-      ? `This token is auto-detected from protocol ${token.protocol?.name} `
+      ? `This token is auto-detected from ${token.protocol?.name} `
       : `This token is trusted by Monarch whitelist`;
 
     return (