feat: update getPathInfo to use chainInfos and improve icon handling …

…in SwapComponent
oraidex · Dec 5, 2024 · 21ae706 · 21ae706
1 parent 9c987e2
commit 21ae706
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/src/pages/UniversalSwap/Swap/index.tsx b/src/pages/UniversalSwap/Swap/index.tsx
@@ -630,16 +630,20 @@ const SwapComponent: React.FC<{
         <div key={ind} className={cx('smart-router-item')}>
           <div className={cx('smart-router-item-volumn')}>{volumn.toFixed(0)}%</div>
           {route.paths.map((path, i, acc) => {
-            const { NetworkFromIcon, NetworkToIcon } = getPathInfo(path, chainInfosWithIcon, assets);
+            const { NetworkFromIcon, NetworkToIcon } = getPathInfo(path, assets);
             return (
               <React.Fragment key={i}>
                 <div className={cx('smart-router-item-line')}>
                   <div className={cx('smart-router-item-line-detail')} />
                 </div>
                 <div className={cx('smart-router-item-pool')} onClick={() => setOpenSmartRoute(!openSmartRoute)}>
                   <div className={cx('smart-router-item-pool-wrap')} onClick={() => setIndSmartRoute([ind, i])}>
-                    <div className={cx('smart-router-item-pool-wrap-img')}>{<NetworkFromIcon />}</div>
-                    <div className={cx('smart-router-item-pool-wrap-img')}>{<NetworkToIcon />}</div>
+                    <div className={cx('smart-router-item-pool-wrap-img')}>
+                      <img src={NetworkFromIcon} alt="NetworkFromIcon" />
+                    </div>
+                    <div className={cx('smart-router-item-pool-wrap-img')}>
+                      <img src={NetworkToIcon} alt="NetworkToIcon" />
+                    </div>
                   </div>
                 </div>
                 {i === acc.length - 1 && (
@@ -915,7 +919,7 @@ const SwapComponent: React.FC<{
               [routersSwapData?.routes[indSmartRoute[0]]?.paths[indSmartRoute[1]]].map((path) => {
                 if (!path) return null;
                 // TODO: chainIcons => chainInfosWithIcon to get correct icon
-                const { NetworkFromIcon, NetworkToIcon, pathChainId } = getPathInfo(path, chainIcons, assets);
+                const { NetworkFromIcon, NetworkToIcon, pathChainId } = getPathInfo(path, assets);
                 const flattenSmartRouters = UniversalSwapHelper.flattenSmartRouters([
                   {
                     swapAmount: '0',

diff --git a/src/pages/UniversalSwap/helpers.ts b/src/pages/UniversalSwap/helpers.ts
@@ -11,7 +11,8 @@ import {
   BigDecimal,
   toAmount,
   COSMOS_CHAIN_ID_COMMON,
-  PAIRS_CHART
+  PAIRS_CHART,
+  OraiIcon
 } from '@oraichain/oraidex-common';
 import {
   getSwapFromTokens,
@@ -29,7 +30,14 @@ import { formatDate, formatTimeWithPeriod } from 'pages/CoHarvest/helpers';
 import { endOfMonth, endOfWeek } from 'pages/Pools/helpers';
 import { FILTER_TIME_CHART, PairToken } from 'reducer/type';
 import { assets } from 'chain-registry';
-import { flattenTokens, flattenTokensWithIcon, oraichainTokens, oraichainTokensWithIcon, tokenMap } from 'initCommon';
+import {
+  chainInfos,
+  flattenTokens,
+  flattenTokensWithIcon,
+  oraichainTokens,
+  oraichainTokensWithIcon,
+  tokenMap
+} from 'initCommon';
 import { NetworkChainId } from '@oraichain/common';
 
 export enum SwapDirection {
@@ -460,28 +468,20 @@ export const transformSwapInfo = (data) => {
   return transformedData;
 };
 
-export const getPathInfo = (path, chainIcons, assets) => {
-  let [NetworkFromIcon, NetworkToIcon] = [DefaultIcon, DefaultIcon];
+export const getPathInfo = (path, assets) => {
+  let [NetworkFromIcon, NetworkToIcon] = [null, null];
 
   const pathChainId = path.chainId.split('-')[0].toLowerCase();
-  // const pathTokenOut = path.tokenOutChainId.split('-')[0].toLowerCase();
 
   if (path.chainId) {
-    const chainFrom = chainIcons.find((cosmos) => cosmos.chainId === path.chainId);
-    NetworkFromIcon = chainFrom ? chainFrom.Icon : DefaultIcon;
+    const chainFrom = chainInfos.find((cosmos) => cosmos.chainId === path.chainId);
+    NetworkFromIcon = chainFrom ? chainFrom.chainSymbolImageUrl : OraiIcon;
   }
 
   if (path.tokenOutChainId) {
-    const chainTo = chainIcons.find((cosmos) => cosmos.chainId === path.tokenOutChainId);
-    NetworkToIcon = chainTo ? chainTo.Icon : DefaultIcon;
+    const chainTo = chainInfos.find((cosmos) => cosmos.chainId === path.tokenOutChainId);
+    NetworkToIcon = chainTo ? chainTo.chainSymbolImageUrl : OraiIcon;
   }
-
-  // const getAssetsByChainName = (chainName) => assets.find(({ chain_name }) => chain_name === chainName)?.assets || [];
-
-  // const assetList = {
-  //   assets: [...getAssetsByChainName(pathChainId), ...getAssetsByChainName(pathTokenOut)]
-  // };
-
   return { NetworkFromIcon, NetworkToIcon, pathChainId };
 };