feat: icons resolver (#58)

* feat: icons resolver

* chore: cleanup

* bump util-lib

---------

Co-authored-by: matjazonline <[email protected]>

Author: anukulpandey

package.json

@@ -33,7 +33,7 @@
     "@polkadot/react-identicon": "^3.6.6",
     "@reef-chain/evm-provider": "^2.0.3",
     "@reef-chain/ui-kit": "^3.0.2",
-    "@reef-chain/util-lib": "^2.5.7",
+    "@reef-chain/util-lib": "^2.5.12",
     "@types/react-router-dom": "^5.3.0",
     "axios": "^1.6.5",
     "bignumber.js": "^9.0.2",

src/hooks/useAllPools.ts

@@ -3,28 +3,48 @@ import { useState } from 'react';
 import { ALL_POOLS, PoolQueryObject } from '../graphql/pools';
 import { PoolWithReserves } from '../state';
 import { graphqlRequest } from '../graphql/utils';
-import { getIconUrl } from '../components/common/Icons';
 import { useAsyncEffect } from './useAsyncEffect';
+import { tokenIconUtils } from '@reef-chain/util-lib';
+import { getIconUrl } from '../components/common/Icons';
 
 export const getAllPoolsQuery = (): PoolQueryObject => ({
   query: ALL_POOLS,
   variables: {},
 });
 export const useAllPools = (httpClient: AxiosInstance): PoolWithReserves[] => {
   const [allPools, setAllPools] = useState([]);
-  const [poolsCount,setPoolsCount] = useState(0);
+  const [poolsCount, setPoolsCount] = useState(0);
+
   const getAllPoolsQry = getAllPoolsQuery();
 
-  useAsyncEffect(async()=>{
-       const response = await graphqlRequest(httpClient, getAllPoolsQry);
+  useAsyncEffect(async () => {
+    let emptyTokenIconsAddresses: string[] = []
+    let tokenIconsMap={};
+
+    const response = await graphqlRequest(httpClient, getAllPoolsQry);
+    response.data.data?.allPools.map((pool) => {
+      if (pool.iconUrl1 == "") emptyTokenIconsAddresses.push(pool.token1);
+      else tokenIconsMap[pool.token1]=pool.iconUrl1
+      if (pool.iconUrl2 == "") emptyTokenIconsAddresses.push(pool.token2);
+      else tokenIconsMap[pool.token2]=pool.iconUrl2
+    })
+
+    if(emptyTokenIconsAddresses.length){
+      const _tokenIconsMap = await tokenIconUtils.resolveTokenUrl(emptyTokenIconsAddresses);
+      tokenIconsMap={
+        ..._tokenIconsMap,
+        ...tokenIconsMap
+      }
+    }
+
     const pools = response.data.data?.allPools.map((pool) => ({
       ...pool,
-      iconUrl1: pool.iconUrl1 === '' ? getIconUrl(pool.token1) : pool.iconUrl1,
-      iconUrl2: pool.iconUrl2 === '' ? getIconUrl(pool.token2) : pool.iconUrl2,
+      iconUrl1: pool.iconUrl1 === '' ? tokenIconsMap[pool.token1]??getIconUrl(pool.token1)  : pool.iconUrl1,
+      iconUrl2: pool.iconUrl2 === '' ? tokenIconsMap[pool.token2]??getIconUrl(pool.token2)  : pool.iconUrl2,
     }));
-    if(allPools.length!==pools.length)setPoolsCount(pools.length);
+    if (allPools.length !== pools.length) setPoolsCount(pools.length);
     setAllPools(pools);
-  },[poolsCount])
+  }, [poolsCount])
 
   return allPools;
 };

src/hooks/usePoolLists.ts

@@ -15,8 +15,10 @@ import {
   PoolQueryObject, PoolQueryType,
 } from '../graphql/pools';
 import { TokenPrices } from '../state';
-import { getIconUrl } from '../components/common/Icons';
 import { graphqlRequest } from '../graphql/utils';
+import { tokenIconUtils } from '@reef-chain/util-lib';
+import { useAsyncEffect } from './useAsyncEffect';
+import { getIconUrl } from '../components/common/Icons';
 
 interface PoolItem {
   address: string;
@@ -126,6 +128,8 @@ export const usePoolsList = ({
   const [dataPoolsCount, setDataPoolsCount] = useState<AllPoolsListCountQuery | UserPoolsListCountQuery|undefined>();
   const [loadingPoolsList, setLoadingPoolsList] = useState<boolean>(true);
   const [loadingPoolsCount, setLoadingPoolsCount] = useState<boolean>(true);
+  const [tokenAddresses, setTokenAddresses] = useState<string[]>([]);
+  const [tokenIconsMap, setTokenIconsMap] = useState({});
 
   useEffect(() => {
     const handleResp = async (): Promise<void> => {
@@ -149,20 +153,47 @@ export const usePoolsList = ({
     handleResp();
   }, []);
 
+  useAsyncEffect(async()=>{
+    if(tokenAddresses.length){
+      const _fetchedTokenIconsMap = await tokenIconUtils.resolveTokenUrl(tokenAddresses);
+      setTokenIconsMap(_fetchedTokenIconsMap)
+    }
+  },[tokenAddresses])
+
   const processed = useMemo((): PoolItem[] => {
     if (!dataPoolsList) return [];
     const poolsList = queryType === 'User'
       ? (dataPoolsList as UserPoolsListQuery).userPoolsList
       : (dataPoolsList as AllPoolsListQuery).allPoolsList;
+    
+    let emptyTokenIconsAddresses: string[] = []
+    let _tokenIconsMap={};
+  
+    poolsList.map((pool) => {
+      if (!pool.iconUrl1) emptyTokenIconsAddresses.push(pool.token1);
+      else _tokenIconsMap[pool.token1]=pool.iconUrl1
+      if (!pool.iconUrl2) emptyTokenIconsAddresses.push(pool.token2);
+      else _tokenIconsMap[pool.token2]=pool.iconUrl2
+    })
+
+    if(tokenAddresses!=emptyTokenIconsAddresses){
+      setTokenAddresses(emptyTokenIconsAddresses);
+    }
+
+    const mergedTokenIconsMap = {
+      ...tokenIconsMap,
+      ..._tokenIconsMap
+    }
+
     return poolsList.map((pool) => ({
       address: pool.id,
       token1: {
-        image: !pool.iconUrl1 ? getIconUrl(pool.token1) : pool.iconUrl1,
+        image: !pool.iconUrl1 ? mergedTokenIconsMap[pool.token1]??getIconUrl(pool.token1) : pool.iconUrl1,
         name: pool.name1,
         address:pool.token1
       },
       token2: {
-        image: !pool.iconUrl2 ? getIconUrl(pool.token2) : pool.iconUrl2,
+        image: !pool.iconUrl2 ? mergedTokenIconsMap[pool.token2]??getIconUrl(pool.token2)  : pool.iconUrl2,
         name: pool.name2,
         address:pool.token2
             },
@@ -171,7 +202,7 @@ export const usePoolsList = ({
       volumeChange24h: calculateVolumeChange(pool, tokenPrices),
       myLiquidity: calculateUserLiquidity(pool, tokenPrices),
     }));
-  }, [dataPoolsList]);
+  }, [dataPoolsList,tokenIconsMap]);
 
   let count = 0;