antoncoding · antoncoding · Mar 24, 2025 · Mar 24, 2025 · Mar 24, 2025
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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/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
@@ -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
@@ -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
@@ -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
@@ -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">