Add useTokenColors and useUniswapPools hooks

earn/src/components/advanced/SmartWalletButton.tsx

@@ -1,11 +1,11 @@
 import TokenIcons from 'shared/lib/components/common/TokenIcons';
 import { Display } from 'shared/lib/components/common/Typography';
 import { Token } from 'shared/lib/data/Token';
+import { rgba } from 'shared/lib/util/Colors';
 import styled from 'styled-components';
 
 import { ReactComponent as PlusIcon } from '../../assets/svg/plus.svg';
 import useProminentColor from '../../data/hooks/UseProminentColor';
-import { rgba } from '../../util/Colors';
 
 const Container = styled.button.attrs(
   (props: { backgroundGradient: string; active: boolean; $animate: boolean }) => props

earn/src/components/advanced/TokenAllocationPieChartWidget.tsx

@@ -5,11 +5,11 @@ import { sqrtRatioToPrice, sqrtRatioToTick } from 'shared/lib/data/BalanceSheet'
 import { RESPONSIVE_BREAKPOINT_MD } from 'shared/lib/data/constants/Breakpoints';
 import { GREY_800 } from 'shared/lib/data/constants/Colors';
 import { GN } from 'shared/lib/data/GoodNumber';
+import { rgb, rgba } from 'shared/lib/util/Colors';
 import styled from 'styled-components';
 import tw from 'twin.macro';
 
 import { BorrowerNftBorrower } from '../../data/BorrowerNft';
-import { rgb, rgba } from '../../util/Colors';
 
 // MARK: Capturing Mouse Data on container div ---------------------------------------
 

earn/src/components/markets/borrow/BorrowingWidget.tsx

@@ -14,13 +14,13 @@ import { useChainDependentState } from 'shared/lib/data/hooks/UseChainDependentS
 import { LendingPair, LendingPairBalancesMap } from 'shared/lib/data/LendingPair';
 import { Token } from 'shared/lib/data/Token';
 import { fetchUniswapNFTPositions, UniswapNFTPosition } from 'shared/lib/data/Uniswap';
+import { rgba } from 'shared/lib/util/Colors';
 import { formatTokenAmount, roundPercentage } from 'shared/lib/util/Numbers';
 import styled from 'styled-components';
 import { Address, Chain } from 'viem';
 import { Config, useClient } from 'wagmi';
 
 import { BorrowerNftBorrower } from '../../../data/BorrowerNft';
-import { rgba } from '../../../util/Colors';
 import { useEthersProvider } from '../../../util/Provider';
 import HealthGauge from '../../common/HealthGauge';
 import BorrowModal from '../modal/BorrowModal';

earn/src/components/portfolio/AssetBar.tsx

@@ -3,12 +3,12 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { RESPONSIVE_BREAKPOINT_SM } from 'shared/lib/data/constants/Breakpoints';
 import useHover from 'shared/lib/data/hooks/UseHover';
 import { Token } from 'shared/lib/data/Token';
+import { rgb } from 'shared/lib/util/Colors';
 import styled from 'styled-components';
 
 import { SearchBar } from './SearchBar';
 import { ReactComponent as MoreIcon } from '../../assets/svg/more_ellipsis.svg';
 import { TokenBalance } from '../../pages/PortfolioPage';
-import { rgb } from '../../util/Colors';
 
 export type AssetBarItem = {
   token: Token;

earn/src/components/portfolio/PortfolioGrid.tsx

@@ -1,13 +1,13 @@
 import { Display, Text } from 'shared/lib/components/common/Typography';
 import { GREY_800 } from 'shared/lib/data/constants/Colors';
 import { Token } from 'shared/lib/data/Token';
+import { rgb } from 'shared/lib/util/Colors';
 import styled from 'styled-components';
 
 import AssetPriceChartWidget from './AssetPriceChartWidget';
 import PortfolioMetrics from './PortfolioMetrics';
 import { RESPONSIVE_BREAKPOINT_SM } from '../../data/constants/Breakpoints';
 import { TokenBalance, TokenPriceData, TokenQuote } from '../../pages/PortfolioPage';
-import { rgb } from '../../util/Colors';
 
 const STATUS_GREEN = 'rgba(0, 196, 140, 1)';
 const STATUS_GREEN_LIGHT = 'rgba(0, 196, 140, 0.75)';

earn/src/components/portfolio/PortfolioMetrics.tsx

@@ -2,12 +2,12 @@ import { useState } from 'react';
 
 import { Display, Text } from 'shared/lib/components/common/Typography';
 import { Token } from 'shared/lib/data/Token';
+import { rgba } from 'shared/lib/util/Colors';
 import { formatTokenAmount, roundPercentage } from 'shared/lib/util/Numbers';
 
 import { APYContainer, BalanceContainer, PieChartContainer } from './PortfolioGrid';
 import PortfolioPieChartWidget, { PortfolioPieChartSlice } from './PortfolioPieChartWidget';
 import { TokenBalance } from '../../pages/PortfolioPage';
-import { rgba } from '../../util/Colors';
 
 export type PortfolioMetricsProps = {
   balances: TokenBalance[];

earn/src/components/portfolio/SearchBar.tsx

@@ -3,13 +3,13 @@ import { useMemo, useState } from 'react';
 import { DropdownOption } from 'shared/lib/components/common/Dropdown';
 import { RESPONSIVE_BREAKPOINT_TABLET } from 'shared/lib/data/constants/Breakpoints';
 import { Token } from 'shared/lib/data/Token';
+import { rgb } from 'shared/lib/util/Colors';
 import styled from 'styled-components';
 
 import { AssetBarItem, AssetChunk } from './AssetBar';
 import SearchInput from './TokenSearchInput';
 import { ReactComponent as BackArrowIcon } from '../../assets/svg/back_arrow.svg';
 import { TokenBalance } from '../../pages/PortfolioPage';
-import { rgb } from '../../util/Colors';
 
 const Container = styled.div`
   position: relative;

earn/src/data/MarginAccount.ts

@@ -127,7 +127,7 @@ export async function fetchBorrowerDatas(
   // Fetch all the data for the margin accounts
   addresses.forEach((accountAddress) => {
     const uniswapPool = borrowerUniswapPools[accountAddress].callsReturnContext[0].returnValues[0];
-    const uniswapPoolInfo = uniswapPoolDataMap.get(uniswapPool.toLowerCase()) ?? null;
+    const uniswapPoolInfo = uniswapPoolDataMap.get(uniswapPool) ?? null;
 
     if (uniswapPoolInfo === null) return;
 

earn/src/data/hooks/UseProminentColor.ts

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 
-import { getProminentColor } from '../../util/Colors';
+import { getProminentColor } from 'shared/lib/util/Colors';
 
+// TODO: deprecate this in favor of useTokenColors
 export default function useProminentColor(iconPath: string) {
   const [prominentColor, setProminentColor] = useState<string>('0, 0, 0');
   useEffect(() => {

earn/src/pages/AdvancedPage.tsx

@@ -13,6 +13,8 @@ import { GN } from 'shared/lib/data/GoodNumber';
 import useChain from 'shared/lib/data/hooks/UseChain';
 import { useChainDependentState } from 'shared/lib/data/hooks/UseChainDependentState';
 import { useLendingPair, useLendingPairs } from 'shared/lib/data/hooks/UseLendingPairs';
+import { useTokenColors } from 'shared/lib/data/hooks/UseTokenColors';
+import { useUniswapPools } from 'shared/lib/data/hooks/UseUniswapPools';
 import { Token } from 'shared/lib/data/Token';
 import { fetchUniswapNFTPositions, UniswapNFTPosition } from 'shared/lib/data/Uniswap';
 import { getEtherscanUrlForChain } from 'shared/lib/util/Chains';
@@ -37,9 +39,7 @@ import { UniswapPositionList } from '../components/advanced/UniswapPositionList'
 import PendingTxnModal, { PendingTxnModalStatus } from '../components/common/PendingTxnModal';
 import { BorrowerNftBorrower, fetchListOfBorrowerNfts } from '../data/BorrowerNft';
 import { RESPONSIVE_BREAKPOINT_SM } from '../data/constants/Breakpoints';
-import useAvailablePools from '../data/hooks/UseAvailablePools';
 import { fetchBorrowerDatas } from '../data/MarginAccount';
-import { getProminentColor } from '../util/Colors';
 import { useEthersProvider } from '../util/Provider';
 
 const BORROW_TITLE_TEXT_COLOR = 'rgba(130, 160, 182, 1)';
@@ -157,7 +157,6 @@ export default function AdvancedPage() {
   const [openedModal, setOpenedModal] = useState(OpenedModal.NONE);
   const [pendingTxn, setPendingTxn] = useState<WriteContractReturnType | null>(null);
   const [pendingTxnModalStatus, setPendingTxnModalStatus] = useState<PendingTxnModalStatus | null>(null);
-  const [tokenColors, setTokenColors] = useChainDependentState<Map<Address, string>>(new Map(), activeChain.id);
 
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -172,13 +171,14 @@ export default function AdvancedPage() {
   }, [borrowerNftBorrowers, searchParams]);
 
   const { lendingPairs } = useLendingPairs(activeChain.id);
+  const { data: tokenColors } = useTokenColors(lendingPairs);
   const market = useLendingPair(
     lendingPairs,
     selectedMarginAccount?.token0.address,
     selectedMarginAccount?.token1.address
   );
 
-  const availablePools = useAvailablePools();
+  const availablePools = useUniswapPools(lendingPairs);
 
   // MARK: Fetch margin accounts
   useEffect(() => {
@@ -204,29 +204,6 @@ export default function AdvancedPage() {
     })();
   }, [userAddress, provider, availablePools, setBorrowerNftBorrowers]);
 
-  const uniqueTokens = useMemo(() => {
-    const tokenSet = new Set<Token>();
-    borrowerNftBorrowers?.forEach((borrower) => {
-      tokenSet.add(borrower.token0);
-      tokenSet.add(borrower.token1);
-    });
-    return Array.from(tokenSet.values());
-  }, [borrowerNftBorrowers]);
-
-  // MARK: Computing token colors
-  useEffect(() => {
-    (async () => {
-      // Compute colors for each token logo (local, but still async)
-      const colorPromises = uniqueTokens.map((token) => getProminentColor(token.logoURI || ''));
-      const colors = await Promise.all(colorPromises);
-
-      // Convert response to the desired Map format
-      const addressToColorMap: Map<Address, string> = new Map();
-      uniqueTokens.forEach((token, index) => addressToColorMap.set(token.address, colors[index]));
-      setTokenColors(addressToColorMap);
-    })();
-  }, [uniqueTokens, setTokenColors]);
-
   // MARK: Reset search param if margin account doesn't exist
   useEffect(() => {
     if (
@@ -387,7 +364,7 @@ export default function AdvancedPage() {
               withdrawableUniswapNFTs={withdrawableUniswapNFTPositions}
               setPendingTxn={setPendingTxn}
             />
-            <TokenAllocationWidget borrower={selectedMarginAccount} tokenColors={tokenColors} />
+            <TokenAllocationWidget borrower={selectedMarginAccount} tokenColors={tokenColors!} />
             <GlobalStatsTable market={market} />
             {selectedMarginAccount && (
               <div className='flex flex-col gap-4 mb-8'>

earn/src/pages/BoostPage.tsx

@@ -12,6 +12,7 @@ import { GN } from 'shared/lib/data/GoodNumber';
 import useChain from 'shared/lib/data/hooks/UseChain';
 import { useChainDependentState } from 'shared/lib/data/hooks/UseChainDependentState';
 import { UniswapNFTPosition, computePoolAddress, fetchUniswapNFTPositions } from 'shared/lib/data/Uniswap';
+import { getProminentColor, rgb } from 'shared/lib/util/Colors';
 import styled from 'styled-components';
 import { Address } from 'viem';
 import { Config, useAccount, useClient, useReadContracts } from 'wagmi';
@@ -20,7 +21,6 @@ import BoostCard from '../components/boost/BoostCard';
 import { BoostCardPlaceholder } from '../components/boost/BoostCardPlaceholder';
 import NoPositions from '../components/boost/NoPositions';
 import { BoostCardInfo, BoostCardType, fetchBoostBorrower, fetchBoostBorrowersList } from '../data/Uniboost';
-import { getProminentColor, rgb } from '../util/Colors';
 import { useEthersProvider } from '../util/Provider';
 
 const DEFAULT_COLOR0 = 'white';
@@ -197,6 +197,7 @@ export default function BoostPage() {
   /*//////////////////////////////////////////////////////////////
                            COMPUTE COLORS
   //////////////////////////////////////////////////////////////*/
+  // TODO: useTokenColors
   useEffect(() => {
     (async () => {
       const tokenLogos = new Set<string>();

earn/src/pages/MarketsPage.tsx

@@ -6,16 +6,16 @@ import AppPage from 'shared/lib/components/common/AppPage';
 import { Display, Text } from 'shared/lib/components/common/Typography';
 import { getChainLogo } from 'shared/lib/data/constants/ChainSpecific';
 import { GREY_400, GREY_600 } from 'shared/lib/data/constants/Colors';
-import { GetNumericFeeTier } from 'shared/lib/data/FeeTier';
 import useChain from 'shared/lib/data/hooks/UseChain';
 import { useChainDependentState } from 'shared/lib/data/hooks/UseChainDependentState';
 import { useLendingPairsBalances } from 'shared/lib/data/hooks/UseLendingPairBalances';
 import { useLendingPairs } from 'shared/lib/data/hooks/UseLendingPairs';
 import { useLatestPriceRelay } from 'shared/lib/data/hooks/UsePriceRelay';
+import { useTokenColors } from 'shared/lib/data/hooks/UseTokenColors';
+import { useUniswapPools } from 'shared/lib/data/hooks/UseUniswapPools';
 import { Token } from 'shared/lib/data/Token';
 import { formatUSDAuto } from 'shared/lib/util/Numbers';
 import styled from 'styled-components';
-import { Address } from 'viem';
 import { linea } from 'viem/chains';
 import { Config, useAccount, useBlockNumber, useClient, usePublicClient, useWatchBlockNumber } from 'wagmi';
 
@@ -26,8 +26,7 @@ import InfoTab from '../components/markets/monitor/InfoTab';
 import SupplyTable, { SupplyTableRow } from '../components/markets/supply/SupplyTable';
 import { BorrowerNftBorrower, fetchListOfFuse2BorrowNfts } from '../data/BorrowerNft';
 import { ZERO_ADDRESS } from '../data/constants/Addresses';
-import { fetchBorrowerDatas, UniswapPoolInfo } from '../data/MarginAccount';
-import { getProminentColor } from '../util/Colors';
+import { fetchBorrowerDatas } from '../data/MarginAccount';
 import { useEthersProvider } from '../util/Provider';
 
 const SECONDARY_COLOR = 'rgba(130, 160, 182, 1)';
@@ -80,7 +79,6 @@ export default function MarketsPage() {
   const activeChain = useChain();
   // MARK: component state
   const [borrowers, setBorrowers] = useChainDependentState<BorrowerNftBorrower[] | null>(null, activeChain.id);
-  const [tokenColors, setTokenColors] = useChainDependentState<Map<Address, string>>(new Map(), activeChain.id);
   const [pendingTxn, setPendingTxn] = useState<WriteContractReturnType | null>(null);
   const [isPendingTxnModalOpen, setIsPendingTxnModalOpen] = useState(false);
   const [pendingTxnModalStatus, setPendingTxnModalStatus] = useState<PendingTxnModalStatus | null>(null);
@@ -100,6 +98,7 @@ export default function MarketsPage() {
 
   // MARK: custom hooks
   const { lendingPairs, refetchOracleData, refetchLenderData } = useLendingPairs(activeChain.id);
+  const { data: tokenColors } = useTokenColors(lendingPairs);
   const { data: tokenQuotes } = useLatestPriceRelay(lendingPairs);
   const { balances: balancesMap, refetch: refetchBalances } = useLendingPairsBalances(lendingPairs, activeChain.id);
 
@@ -111,19 +110,7 @@ export default function MarketsPage() {
     },
   });
 
-  // NOTE: Instead of `useAvailablePools()`, we're able to compute `availablePools` from `lendingPairs`.
-  // This saves a lot of data.
-  const availablePools = useMemo(() => {
-    const poolInfoMap = new Map<string, UniswapPoolInfo>();
-    lendingPairs.forEach((pair) =>
-      poolInfoMap.set(pair.uniswapPool.toLowerCase(), {
-        token0: pair.token0,
-        token1: pair.token1,
-        fee: GetNumericFeeTier(pair.uniswapFeeTier),
-      })
-    );
-    return poolInfoMap;
-  }, [lendingPairs]);
+  const availablePools = useUniswapPools(lendingPairs);
 
   const doesGuardianSenseManipulation = useMemo(() => {
     return lendingPairs.some((pair) => pair.oracleData.manipulationMetric > pair.manipulationThreshold);
@@ -163,20 +150,6 @@ export default function MarketsPage() {
     })();
   }, [publicClient, pendingTxn, setIsPendingTxnModalOpen, setPendingTxnModalStatus]);
 
-  // MARK: Computing token colors
-  useEffect(() => {
-    (async () => {
-      // Compute colors for each token logo (local, but still async)
-      const colorPromises = uniqueTokens.map((token) => getProminentColor(token.logoURI || ''));
-      const colors = await Promise.all(colorPromises);
-
-      // Convert response to the desired Map format
-      const addressToColorMap: Map<Address, string> = new Map();
-      uniqueTokens.forEach((token, index) => addressToColorMap.set(token.address, colors[index]));
-      setTokenColors(addressToColorMap);
-    })();
-  }, [uniqueTokens, setTokenColors]);
-
   // MARK: Fetch margin accounts
   useEffect(() => {
     (async () => {
@@ -282,7 +255,7 @@ export default function MarketsPage() {
           uniqueTokens={uniqueTokens}
           tokenBalances={balancesMap}
           tokenQuotes={tokenQuotes!}
-          tokenColors={tokenColors}
+          tokenColors={tokenColors!}
           setPendingTxn={setPendingTxn}
         />
       );
@@ -294,7 +267,7 @@ export default function MarketsPage() {
           provider={provider}
           blockNumber={blockNumber}
           lendingPairs={lendingPairs}
-          tokenColors={tokenColors}
+          tokenColors={tokenColors!}
           setPendingTxn={setPendingTxn}
         />
       );