Compute availablePools locally instead of re-fetching them; more tokens

earn/src/data/hooks/UseAvailablePools.ts

@@ -46,7 +46,7 @@ export default function useAvailablePools() {
           const poolContract = new ethers.Contract(addr, uniswapV3PoolAbi, provider);
           return Promise.all([poolContract.token0(), poolContract.token1(), poolContract.fee()]);
         })
-      );
+      ); // TODO: multicall
 
       const poolInfoMap = new Map<string, UniswapPoolInfo>();
       poolAddresses.forEach((addr, i) => {

earn/src/pages/MarketsPage.tsx

@@ -5,6 +5,7 @@ import axios, { AxiosResponse } from 'axios';
 import AppPage from 'shared/lib/components/common/AppPage';
 import { Text } from 'shared/lib/components/common/Typography';
 import { GREY_400, GREY_600 } from 'shared/lib/data/constants/Colors';
+import { GetNumericFeeTier } from 'shared/lib/data/FeeTier';
 import { useChainDependentState } from 'shared/lib/data/hooks/UseChainDependentState';
 import { Token } from 'shared/lib/data/Token';
 import styled from 'styled-components';
@@ -17,10 +18,9 @@ import BorrowingWidget from '../components/lend/BorrowingWidget';
 import SupplyTable, { SupplyTableRow } from '../components/lend/SupplyTable';
 import { BorrowerNftBorrower, fetchListOfFuse2BorrowNfts } from '../data/BorrowerNft';
 import { API_PRICE_RELAY_LATEST_URL } from '../data/constants/Values';
-import useAvailablePools from '../data/hooks/UseAvailablePools';
 import { useLendingPairs } from '../data/hooks/UseLendingPairs';
 import { getLendingPairBalances, LendingPairBalancesMap } from '../data/LendingPair';
-import { fetchBorrowerDatas } from '../data/MarginAccount';
+import { fetchBorrowerDatas, UniswapPoolInfo } from '../data/MarginAccount';
 import { PriceRelayLatestResponse } from '../data/PriceRelayResponse';
 import { getProminentColor } from '../util/Colors';
 
@@ -82,9 +82,22 @@ export default function MarketsPage() {
   const [selectedHeaderOption, setSelectedHeaderOption] = useState<HeaderOptions>(HeaderOptions.Supply);
 
   // MARK: custom hooks
-  const availablePools = useAvailablePools();
   const { lendingPairs } = useLendingPairs();
 
+  // 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]);
+
   // MARK: wagmi hooks
   const { address: userAddress } = useAccount();
   const provider = useProvider({ chainId: activeChain.id });

shared/src/assets/svg/tokens/index.tsx

@@ -16,8 +16,10 @@ import MaticLogo from './matic.svg';
 import MimLogo from './mim.svg';
 import OpLogo from './op.svg';
 import PerpLogo from './perp.svg';
+import PoolTogetherLogo from './pooltogether.svg';
 import RaiLogo from './rai.svg';
 import RplLogo from './rpl.svg';
+import SnxLogo from './snx.svg';
 import TribeLogo from './tribe.svg';
 import UniLogo from './uni.svg';
 import UnknownTokenLogo from './unknown_token.svg';
@@ -44,6 +46,8 @@ export {
   MaticLogo,
   OpLogo,
   PerpLogo,
+  PoolTogetherLogo,
+  SnxLogo,
   UsdcLogo,
   WbtcLogo,
   WethLogo,

shared/src/data/TokenData.ts

@@ -21,7 +21,9 @@ import {
   MimLogo,
   OpLogo,
   PerpLogo,
+  PoolTogetherLogo,
   RplLogo,
+  SnxLogo,
   UniLogo,
   UsdcLogo,
   UsdtLogo,
@@ -256,6 +258,24 @@ const WSTETH_OPTIMISM = new Token(
   WstEthLogo
 );
 
+const POOLTOGETHER_OPTIMISM = new Token(
+  optimism.id,
+  '0x395ae52bb17aef68c2888d941736a71dc6d4e125',
+  18,
+  'POOL',
+  'PoolTogether',
+  PoolTogetherLogo
+);
+
+const SNX_OPTIMISM = new Token(
+  optimism.id,
+  '0x8700daec35af8ff88c16bdf0418774cb3d7599b4',
+  18,
+  'SNX',
+  'Synthetix Network Token',
+  SnxLogo
+);
+
 const DAI_ARBITRUM = new Token(
   arbitrum.id,
   '0xda10009cbd5d07dd0cecc66161fc93d7c9000da1',
@@ -395,6 +415,8 @@ const TOKEN_DATA: { [chainId: number]: { [address: Address]: Token } } = {
     [LYRA_OPTIMISM.address]: LYRA_OPTIMISM,
     [OP_OPTIMISM.address]: OP_OPTIMISM,
     [PERP_OPTIMISM.address]: PERP_OPTIMISM,
+    [POOLTOGETHER_OPTIMISM.address]: POOLTOGETHER_OPTIMISM,
+    [SNX_OPTIMISM.address]: SNX_OPTIMISM,
     [UNI_OPTIMISM.address]: UNI_OPTIMISM,
     [USDC_OPTIMISM.address]: USDC_OPTIMISM,
     [USDT_OPTIMISM.address]: USDT_OPTIMISM,