From 39e1435b951e9c7a97422672d2699d03c198b0e2 Mon Sep 17 00:00:00 2001
From: Yunip Shrestha <yunipshrestha@gmail.com>
Date: Mon, 15 Apr 2024 11:00:40 +0545
Subject: [PATCH 1/6] add ValueWithPrice component to ActionAccordion

---
 src/assets/scss/components/_modal.scss        | 13 ++++++-
 src/components/Actions/Borrow.component.tsx   |  2 +-
 src/components/Actions/Repay.component.tsx    |  2 +-
 src/components/Actions/Supply.component.tsx   |  3 +-
 src/components/Actions/Withdraw.component.tsx |  2 +-
 src/components/Price/Price.component.tsx      |  5 ++-
 .../actions/ActionAccordion.component.tsx     | 38 ++++++++++++++++---
 7 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss
index 671ff88..7cb27a6 100644
--- a/src/assets/scss/components/_modal.scss
+++ b/src/assets/scss/components/_modal.scss
@@ -377,6 +377,15 @@
           .value {
             font-weight: 600;
           }
+
+          .price.secondary {
+            .price-label span {
+              font-size: 14px;
+            }
+            .price-value {
+              font-size: 12px;
+            }
+          }
         }
       }
       .old-value {
@@ -401,13 +410,13 @@
           padding: 6px 10px;
 
           .field-left {
-            font-size: 15px;
+            font-size: 16px;
             font-weight: 600;
             color: $text-color-primary;
           }
 
           .field-right {
-            font-size: 15px;
+            font-size: 16px;
             .value {
               font-weight: 700;
             }
diff --git a/src/components/Actions/Borrow.component.tsx b/src/components/Actions/Borrow.component.tsx
index 083ba39..21a41bf 100644
--- a/src/components/Actions/Borrow.component.tsx
+++ b/src/components/Actions/Borrow.component.tsx
@@ -252,7 +252,7 @@ export const BorrowModal: FC<IProtocolActionModalProps> = ({
 
             <ActionAccordion
               fieldName="You Will Receive"
-              token={selectedTokenInfo.symbol}
+              pool={poolId}
               values={{
                 gasOnDestination: 'string',
                 fee: convertBigIntValueToNormal(
diff --git a/src/components/Actions/Repay.component.tsx b/src/components/Actions/Repay.component.tsx
index 150e876..a8c0ce9 100644
--- a/src/components/Actions/Repay.component.tsx
+++ b/src/components/Actions/Repay.component.tsx
@@ -267,7 +267,7 @@ export const RepayModal: FC<IProtocolActionModalProps> = ({
 
             <ActionAccordion
               fieldName="You Will Pay"
-              token={selectedTokenInfo.symbol}
+              pool={poolId}
               values={{
                 gasOnDestination: 'string',
                 fee: convertBigIntValueToNormal(
diff --git a/src/components/Actions/Supply.component.tsx b/src/components/Actions/Supply.component.tsx
index d0c6d75..529463d 100644
--- a/src/components/Actions/Supply.component.tsx
+++ b/src/components/Actions/Supply.component.tsx
@@ -23,7 +23,6 @@ import {
   ActionAccordion,
   RewardInfo,
   Alert
-  // Alert
 } from '@/components'
 import {
   DEFAULT_WEI_DECIMAL,
@@ -276,7 +275,7 @@ export const SupplyModal: FC<IProtocolActionModalProps> = ({
 
             <ActionAccordion
               fieldName="Your total deposit"
-              token={selectedTokenInfo.symbol}
+              pool={poolId}
               values={{
                 gasOnDestination: 'string',
                 fee: convertBigIntValueToNormal(
diff --git a/src/components/Actions/Withdraw.component.tsx b/src/components/Actions/Withdraw.component.tsx
index 20d46a9..eab9fd1 100644
--- a/src/components/Actions/Withdraw.component.tsx
+++ b/src/components/Actions/Withdraw.component.tsx
@@ -237,7 +237,7 @@ export const WithdrawModal: FC<IProtocolActionModalProps> = ({
 
             <ActionAccordion
               fieldName="You Will Receive"
-              token={selectedTokenInfo.symbol}
+              pool={poolId}
               values={{
                 gasOnDestination: 'string',
                 fee: convertBigIntValueToNormal(
diff --git a/src/components/Price/Price.component.tsx b/src/components/Price/Price.component.tsx
index 5e2e9ef..3cccd06 100644
--- a/src/components/Price/Price.component.tsx
+++ b/src/components/Price/Price.component.tsx
@@ -36,9 +36,10 @@ export interface IValueWithPriceProps {
   displayUnit?: boolean
   variant?: 'primary' | 'secondary'
   unit?: string
+  prefix?: string
 }
 
-export const ValueWithPrice: FC<IValueWithPriceProps> = ({ pool, value, displayUnit = false, unit, variant = 'primary' }) => {
+export const ValueWithPrice: FC<IValueWithPriceProps> = ({ pool, value, displayUnit = false, unit, variant = 'primary', prefix = '' }) => {
   const { oraclePrices } = useAppSelector(state => state.pool)
 
   const poolPrice = useMemo(() => {
@@ -58,7 +59,7 @@ export const ValueWithPrice: FC<IValueWithPriceProps> = ({ pool, value, displayU
       <div>
         {/* TODO should the precision be 4 for tokens?  */}
         <div className="price-label" style={{ fontWeight: 600 }}>
-          <span className="number">{toFixedNumber(value, 4, true)}</span>{' '}
+          <span className="number">{prefix} {toFixedNumber(value, 4, true)}</span>
           <span className="unit">{displayUnit ? unit ?? getTokenSymbol(pool) : ''}</span>
         </div>
         <div className="price-value">${toFixedCutZero(dollarEquivalent, 2, true)}</div>
diff --git a/src/components/shared/actions/ActionAccordion.component.tsx b/src/components/shared/actions/ActionAccordion.component.tsx
index 24577aa..972caf1 100644
--- a/src/components/shared/actions/ActionAccordion.component.tsx
+++ b/src/components/shared/actions/ActionAccordion.component.tsx
@@ -1,9 +1,11 @@
 import React, { type FC } from 'react'
 import { Accordion } from './Accordion.component'
+import { ValueWithPrice } from '@/components/Price'
+import { type tPoolIds } from '@cedro-finance/sdk'
 
 interface ActionAccordionProps {
   fieldName: string
-  token: string
+  pool: tPoolIds
   values: {
     gasOnDestination: string
     fee: string
@@ -13,7 +15,7 @@ interface ActionAccordionProps {
   }
   children: React.ReactNode
 }
-export const ActionAccordion: FC<ActionAccordionProps> = ({ fieldName, token, children, values }) => {
+export const ActionAccordion: FC<ActionAccordionProps> = ({ fieldName, pool, children, values }) => {
   // const [airdropAmount, setAirdropAmount] = useState<number>()
   // const handleAirdropAmountChange = (e: ChangeEvent<HTMLInputElement>): void => {
   //   setAirdropAmount(Number(e.target.value))
@@ -32,7 +34,13 @@ export const ActionAccordion: FC<ActionAccordionProps> = ({ fieldName, token, ch
       <div className="borrow-limit field-row">
         <div className="field-left">Rebalancing Reward</div>
         <div className="field-right">
-          + {values.reward} {token}
+          <ValueWithPrice
+            pool={pool}
+            value={values.reward}
+            variant='secondary'
+            displayUnit={true}
+            prefix='+'
+          />
         </div>
       </div>
       {/* <div className="borrow-limit field-row">
@@ -55,7 +63,13 @@ export const ActionAccordion: FC<ActionAccordionProps> = ({ fieldName, token, ch
       <div className="borrow-limit field-row">
         <div className="field-left">Rebalancing Fee</div>
         <div className="field-right">
-          - {values.fee} {token}
+          <ValueWithPrice
+            pool={pool}
+            value={values.fee}
+            variant='secondary'
+            displayUnit={true}
+            prefix='-'
+          />
         </div>
       </div>
 
@@ -63,7 +77,13 @@ export const ActionAccordion: FC<ActionAccordionProps> = ({ fieldName, token, ch
       <div className="borrow-limit field-row">
         <div className="field-left">Transaction Fee</div>
         <div className="field-right">
-          - {values.gasFee} {token}
+          <ValueWithPrice
+            pool={pool}
+            value={values.gasFee}
+            variant='secondary'
+            displayUnit={true}
+            prefix='-'
+          />
         </div>
       </div>)}
 
@@ -71,7 +91,13 @@ export const ActionAccordion: FC<ActionAccordionProps> = ({ fieldName, token, ch
       <div className="borrow-limit field-row">
         <div className="field-left">LayerZero Fee</div>
         <div className="field-right">
-          - {values.layerzero} {token}
+          <ValueWithPrice
+            pool={pool}
+            value={values.layerzero}
+            variant='secondary'
+            displayUnit={true}
+            prefix='-'
+          />
         </div>
       </div>)}
     </>

From adb44a7a833273c509f90903c1265a2ab1024c17 Mon Sep 17 00:00:00 2001
From: Yunip Shrestha <yunipshrestha@gmail.com>
Date: Mon, 15 Apr 2024 11:22:29 +0545
Subject: [PATCH 2/6] add tooltip to action accordion

---
 .../actions/ActionAccordion.component.tsx     | 23 +++++++++++++++----
 src/constants/tooltip.ts                      |  6 ++++-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/shared/actions/ActionAccordion.component.tsx b/src/components/shared/actions/ActionAccordion.component.tsx
index 972caf1..faf2749 100644
--- a/src/components/shared/actions/ActionAccordion.component.tsx
+++ b/src/components/shared/actions/ActionAccordion.component.tsx
@@ -2,6 +2,8 @@ import React, { type FC } from 'react'
 import { Accordion } from './Accordion.component'
 import { ValueWithPrice } from '@/components/Price'
 import { type tPoolIds } from '@cedro-finance/sdk'
+import { AboutTooltip } from '@/components/AboutTooltip'
+import { TooltipText } from '@/constants'
 
 interface ActionAccordionProps {
   fieldName: string
@@ -32,8 +34,12 @@ export const ActionAccordion: FC<ActionAccordionProps> = ({ fieldName, pool, chi
   const accordionContent = (
     <>
       <div className="borrow-limit field-row">
-        <div className="field-left">Rebalancing Reward</div>
+        <div className="field-left about-tooltip-parent">
+          Rebalancing Reward
+          <AboutTooltip id="rebalancing-reward" message={TooltipText.rebalancingReward} />
+        </div>
         <div className="field-right">
+          {/* TODO add loading to value with price */}
           <ValueWithPrice
             pool={pool}
             value={values.reward}
@@ -61,7 +67,10 @@ export const ActionAccordion: FC<ActionAccordionProps> = ({ fieldName, pool, chi
         </div>
       </div> */}
       <div className="borrow-limit field-row">
-        <div className="field-left">Rebalancing Fee</div>
+        <div className="field-left about-tooltip-parent">
+          Rebalancing Fee
+          <AboutTooltip id="rebalancing-fee" message={TooltipText.rebalancingFee} />
+        </div>
         <div className="field-right">
           <ValueWithPrice
             pool={pool}
@@ -75,7 +84,10 @@ export const ActionAccordion: FC<ActionAccordionProps> = ({ fieldName, pool, chi
 
       {values.gasFee && (
       <div className="borrow-limit field-row">
-        <div className="field-left">Transaction Fee</div>
+        <div className="field-left about-tooltip-parent">
+          Gas Fee
+          <AboutTooltip id="gas-fee" message={TooltipText.gasFee} />
+        </div>
         <div className="field-right">
           <ValueWithPrice
             pool={pool}
@@ -89,7 +101,10 @@ export const ActionAccordion: FC<ActionAccordionProps> = ({ fieldName, pool, chi
 
       {values.layerzero && (
       <div className="borrow-limit field-row">
-        <div className="field-left">LayerZero Fee</div>
+        <div className="field-left about-tooltip-parent">
+          LayerZero Fee
+          <AboutTooltip id="layerzero-fee" message={TooltipText.rebalancingFee} />
+        </div>
         <div className="field-right">
           <ValueWithPrice
             pool={pool}
diff --git a/src/constants/tooltip.ts b/src/constants/tooltip.ts
index 2e6c46c..6d7d01b 100644
--- a/src/constants/tooltip.ts
+++ b/src/constants/tooltip.ts
@@ -5,5 +5,9 @@ export const TooltipText = {
   netApy: 'The APY you’re earning or paying across all of your supplies and borrows.',
   interestEarned: 'Total interest earned minus total interest payable.',
   transactionFee: 'Fee required to pay gas on source chain, messaging protocol, and destination chain.',
-  availableLiquidity: 'Total supplied liquidity minus total borrowed liquidity.'
+  availableLiquidity: 'Total supplied liquidity minus total borrowed liquidity.',
+  rebalancingReward: 'Rebalancing Reward', // TODO - Add tooltip text
+  rebalancingFee: 'Fee required to rebalance the pool.', // TODO - Add tooltip text
+  layerZeroFee: 'Fee required to pay gas on LayerZero', // TODO - Add tooltip text
+  gasFee: 'Fee required to pay gas on source chain' // TODO - Add tooltip text
 }

From e9202ec674b402d11d8b28698ed2ad597fec3dd8 Mon Sep 17 00:00:00 2001
From: Yunip Shrestha <yunipshrestha@gmail.com>
Date: Mon, 15 Apr 2024 11:57:55 +0545
Subject: [PATCH 3/6] change address truncate type

---
 src/components/Navbar/AvailableTokens.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navbar/AvailableTokens.component.tsx b/src/components/Navbar/AvailableTokens.component.tsx
index e70e558..da6441a 100644
--- a/src/components/Navbar/AvailableTokens.component.tsx
+++ b/src/components/Navbar/AvailableTokens.component.tsx
@@ -22,7 +22,7 @@ export const AvailableTokens: FC = () => {
     <Dropdown.Toggler id="tokenDropDown">
       <button className={'dropdown-toggler-btn'}>
         <Icon name={getIconName(connector?.name ?? '')} height={25} width={25} />
-        {truncateString(address as string, 3, 4)}
+        {truncateString(address as string, 4, 3)}
         <Icon name="arrowDown" stroke="black" />
       </button>
     </Dropdown.Toggler>

From 450e756a063e9c7ee5c4305b43dba1cd159603fc Mon Sep 17 00:00:00 2001
From: Yunip Shrestha <yunipshrestha@gmail.com>
Date: Mon, 15 Apr 2024 13:23:13 +0545
Subject: [PATCH 4/6] use getter for network and chain icon mappings

---
 .../LiquidityTooltip.component.tsx            |  4 ++--
 .../Navbar/NavbarSharedCompoent.tsx           |  8 +++----
 .../modal/SwitchNetwork.component.tsx         |  6 ++---
 .../ChainlistCheckbox.component.tsx           |  4 ++--
 .../actions/DestinationChain.component.tsx    |  8 +++----
 .../shared/actions/RewardInfo.component.tsx   |  4 ++--
 src/constants/icons.ts                        | 24 ++++++++++++-------
 7 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/components/LiquidityTooltip/LiquidityTooltip.component.tsx b/src/components/LiquidityTooltip/LiquidityTooltip.component.tsx
index c560d86..b8c18d0 100644
--- a/src/components/LiquidityTooltip/LiquidityTooltip.component.tsx
+++ b/src/components/LiquidityTooltip/LiquidityTooltip.component.tsx
@@ -2,7 +2,7 @@ import type { tSupportedChains } from '@cedro-finance/sdk'
 import { type FC } from 'react'
 import { Tooltip } from 'react-tooltip'
 import { Icon } from '../icon'
-import { ChainIconMapping, getChainConfig } from '@/constants'
+import { getChainConfig, getChainIcon } from '@/constants'
 import { NETWORK_TYPE } from '@/configs/env'
 
 interface ILiquidityTooltipProps {
@@ -35,7 +35,7 @@ export const LiquidityTooltip: FC<ILiquidityTooltipProps> = ({ id }) => {
                 <div className="liquidity-tooltip-item field-row" key={chain}>
                   <div className="field-left">
                     <Icon
-                      name={ChainIconMapping[chain as tSupportedChains]}
+                      name={getChainIcon(chain as tSupportedChains)}
                       height={24}
                       width={24}
                     />
diff --git a/src/components/Navbar/NavbarSharedCompoent.tsx b/src/components/Navbar/NavbarSharedCompoent.tsx
index 2d4a0d2..067c984 100644
--- a/src/components/Navbar/NavbarSharedCompoent.tsx
+++ b/src/components/Navbar/NavbarSharedCompoent.tsx
@@ -4,7 +4,7 @@ import { toFixedCutZero } from '@/utils'
 import { useAvailableBalance } from '@/hooks/useAvailableBalance'
 import { Dropdown } from '@/components/Dropdown'
 import { Icon, type TIcons } from '@/components/icon'
-import { ChainIconMapping, TokenIconMapping } from '@/constants'
+import { getChainIcon } from '@/constants'
 import { WalletConnect } from '@/components/wallet'
 import { Button } from '../Button'
 import { useChainContext } from '@/context/chain.context'
@@ -31,9 +31,7 @@ export const SwitchNetworkDropdown: FC = () => {
 
   const iconName = useMemo<TIcons>(() => {
     return (
-      ChainIconMapping[(connectedChain as ConnectedChain)?.chain ?? 'eth'] ||
-      TokenIconMapping.unknown
-    )
+      getChainIcon((connectedChain as ConnectedChain)?.chain ?? 'eth'))
   }, [connectedChain?.id])
 
   return (
@@ -59,7 +57,7 @@ export const SwitchNetworkDropdown: FC = () => {
                 }}
               >
                 <Icon
-                  name={ChainIconMapping[chain]}
+                  name={getChainIcon(chain)}
                   height={30}
                   width={30}
                 />
diff --git a/src/components/modal/SwitchNetwork.component.tsx b/src/components/modal/SwitchNetwork.component.tsx
index 8fd4f7d..0a4105c 100644
--- a/src/components/modal/SwitchNetwork.component.tsx
+++ b/src/components/modal/SwitchNetwork.component.tsx
@@ -3,7 +3,7 @@ import { type FC } from 'react'
 import { Button, Modal, Icon } from '@/components'
 import { type IChainConfig } from '@/@types'
 import { useNetwork } from 'wagmi'
-import { NETWORK_SWITCH_TYPE, NetworkIconMapping } from '@/constants'
+import { getNetworkIcon, NETWORK_SWITCH_TYPE } from '@/constants'
 
 interface SwitchNetworkProps {
   isVisible: boolean
@@ -70,7 +70,7 @@ export const SwitchNetwork: FC<SwitchNetworkProps> = ({ switchType, isVisible, t
             <div className="switch-network-content">
               {switchType !== NETWORK_SWITCH_TYPE.UNSUPPORTED
                 ? <> <div className="switch-network-item">
-                <Icon name={NetworkIconMapping[currentNetwork?.id]} width={65} height={65}/>
+                <Icon name={getNetworkIcon(currentNetwork?.id)} width={65} height={65}/>
                 <div className="switch-network-item__name">
                   {currentNetwork?.name}
                 </div>
@@ -82,7 +82,7 @@ export const SwitchNetwork: FC<SwitchNetworkProps> = ({ switchType, isVisible, t
                 : null}
 
               <div className="switch-network-item">
-                <Icon name={NetworkIconMapping[switchToNetwork?.chainId]} width={65} height={65}/>
+                <Icon name={getNetworkIcon(switchToNetwork?.chainId)} width={65} height={65}/>
                 <div className="switch-network-item__name">
                   {switchToNetwork?.name}
                   </div>
diff --git a/src/components/shared/ChainlistCheckbox/ChainlistCheckbox.component.tsx b/src/components/shared/ChainlistCheckbox/ChainlistCheckbox.component.tsx
index b3c7b9d..32c4076 100644
--- a/src/components/shared/ChainlistCheckbox/ChainlistCheckbox.component.tsx
+++ b/src/components/shared/ChainlistCheckbox/ChainlistCheckbox.component.tsx
@@ -3,7 +3,7 @@ import { Dropdown } from '@/components/Dropdown'
 import { Icon } from '@/components/icon'
 import { Button } from '@/components/Button'
 import { type tSupportedChains } from '@cedro-finance/sdk'
-import { ChainIconMapping } from '@/constants'
+import { getChainIcon } from '@/constants'
 import { cedroClient } from '@/configs/chainConfig'
 
 interface IChainlistCheckboxProps {
@@ -85,7 +85,7 @@ export const ChainListCheckbox: FC<IChainlistCheckboxProps> = ({ checkedChainLis
                 readOnly
                 id={chainInfo.symbol}
               />
-              <Icon name={ChainIconMapping[chain]} height={30} width={30} />
+              <Icon name={getChainIcon(chain)} height={30} width={30} />
               <span className="item-txt">{chainInfo.name}</span>
             </button>
           </Dropdown.Item>
diff --git a/src/components/shared/actions/DestinationChain.component.tsx b/src/components/shared/actions/DestinationChain.component.tsx
index d4454e4..e8c47eb 100644
--- a/src/components/shared/actions/DestinationChain.component.tsx
+++ b/src/components/shared/actions/DestinationChain.component.tsx
@@ -6,7 +6,7 @@ import {
   type tPoolIds,
   type tSupportedChains
 } from '@cedro-finance/sdk'
-import { ChainIconMapping, DEFAULT_WEI_DECIMAL } from '@/constants'
+import { DEFAULT_WEI_DECIMAL, getChainIcon } from '@/constants'
 import { usePoolDetails } from '@/hooks/usePoolDetails'
 import { convertBigIntValueToNormal, weiMultiply } from '@/utils'
 import { cedroClient } from '@/configs/chainConfig'
@@ -49,7 +49,7 @@ export const DestinationChain: FC<DestinationChainProps> = ({
                 <Dropdown.Toggler id="chainDropdown">
                   <button className={'dropdown-toggler-btn'}>
                     <Icon
-                      name={ChainIconMapping[selectedChain]}
+                      name={getChainIcon(selectedChain)}
                       height={24}
                       width={24}
                     />
@@ -83,7 +83,7 @@ export const DestinationChain: FC<DestinationChainProps> = ({
                               }}
                             >
                               <Icon
-                                name={ChainIconMapping[chain as tSupportedChains]}
+                                name={getChainIcon(chain as tSupportedChains)}
                                 height={24}
                                 width={24}
                               />
@@ -120,7 +120,7 @@ export const DestinationChain: FC<DestinationChainProps> = ({
             <div className="single-chain">
               <div className='selected-chain'>
                 <Icon
-                  name={ChainIconMapping[selectedChain]}
+                  name={getChainIcon(selectedChain)}
                   height={24}
                   width={24}
                   className="chain-img"
diff --git a/src/components/shared/actions/RewardInfo.component.tsx b/src/components/shared/actions/RewardInfo.component.tsx
index 20e7b8d..bec3713 100644
--- a/src/components/shared/actions/RewardInfo.component.tsx
+++ b/src/components/shared/actions/RewardInfo.component.tsx
@@ -3,7 +3,7 @@ import { Icon } from '@/components'
 import type { tPoolIds, tSupportedChains } from '@cedro-finance/sdk'
 import { type FC } from 'react'
 import { Tooltip } from 'react-tooltip'
-import { ChainIconMapping, DEFAULT_WEI_DECIMAL } from '@/constants'
+import { DEFAULT_WEI_DECIMAL, getChainIcon } from '@/constants'
 import { convertBigIntValueToNormal, weiMultiply } from '@/utils'
 import { usePoolDetails } from '@/hooks/usePoolDetails'
 import { cedroClient } from '@/configs/chainConfig'
@@ -49,7 +49,7 @@ export const RewardInfo: FC<RewardInfoProps> = ({
                 <div className="field-row">
                   <div className="switch-chain-list-item field-left">
                     <Icon
-                      name={ChainIconMapping[chain as tSupportedChains]}
+                      name={getChainIcon(chain as tSupportedChains)}
                       height={24}
                       width={24}
                     />
diff --git a/src/constants/icons.ts b/src/constants/icons.ts
index 7e2aec1..ca5b0eb 100644
--- a/src/constants/icons.ts
+++ b/src/constants/icons.ts
@@ -38,16 +38,22 @@ export const TokenIconMapping: Record<string, TIcons> = {
 export const NetworkIconMapping: Record<number, TIcons> = {
   [eChainIds.AVALANCHE_MAIN]: 'network.avax',
   [eChainIds.AVALANCHE_TEST]: 'network.avax',
-  97: 'network.bsc',
-  5: 'network.ethereum',
-  4002: 'network.ftm',
-  80001: 'network.polygon',
-  421613: 'token.arbitrum',
-  3441005: 'token.manta',
-  1: 'network.ethereum',
-  [eChainIds.BSC_MAIN]: 'network.bsc',
   [eChainIds.ARBITRUM_MAIN]: 'token.arbitrum',
-  [cedroClient.Config.getChainId(eSupportedChains.OPTIMISM)]: 'network.optimism'
+  [eChainIds.ARBITRUM_TEST]: 'token.arbitrum',
+  [eChainIds.BSC_MAIN]: 'network.bsc',
+  [eChainIds.BSC_TEST]: 'network.bsc',
+  [eChainIds.ETH]: 'network.ethereum',
+  [eChainIds.GOERLI]: 'network.ethereum',
+  [eChainIds.FANTOM_MAIN]: 'network.ftm',
+  [eChainIds.FANOTOM_TEST]: 'network.ftm',
+  [eChainIds.MANTA_MAIN]: 'token.manta',
+  [eChainIds.MANTA_TEST]: 'token.manta',
+  [eChainIds.POLYGON]: 'network.polygon',
+  [eChainIds.MUMBAI]: 'network.polygon',
+  // [eChainIds.OPTIMISM_MAIN]: 'network.optimism',
+  [eChainIds.OPTIMISM_TEST]: 'network.optimism',
+  [eChainIds.ZKSYNC_MAIN]: 'network.zksync',
+  [eChainIds.ZKSYNC_TEST]: 'network.zksync'
 }
 
 export const ChainIconMapping: Record<tSupportedChains, TIcons> = {

From 1bbfcbad036b267c829237ead34432b55b6ee868 Mon Sep 17 00:00:00 2001
From: Yunip Shrestha <yunipshrestha@gmail.com>
Date: Tue, 23 Apr 2024 14:17:22 +0545
Subject: [PATCH 5/6] update tokenIconMapping to getPoolIcon

---
 src/components/Drawer/TokenInfo.component.tsx        |  4 ++--
 src/components/EnableToken/EnableToken.component.tsx |  4 ++--
 src/components/Navbar/AvailableTokens.component.tsx  |  4 ++--
 src/components/modal/LiquidationList.component.tsx   |  6 +++---
 src/components/modal/TestTokens.component.tsx        |  6 ++++--
 src/constants/tableColumns.tsx                       | 11 ++++++-----
 src/containers/market.tsx                            |  4 ++--
 7 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/Drawer/TokenInfo.component.tsx b/src/components/Drawer/TokenInfo.component.tsx
index 20fe470..dcbf765 100644
--- a/src/components/Drawer/TokenInfo.component.tsx
+++ b/src/components/Drawer/TokenInfo.component.tsx
@@ -12,7 +12,7 @@ import { type IChain } from '@/@types'
 import { useNetwork } from 'wagmi'
 import { cedroClient } from '@/configs/chainConfig'
 import { usePoolDetails } from '@/hooks/usePoolDetails'
-import { DEFAULT_WEI_DECIMAL, TokenIconMapping, TooltipText } from '@/constants'
+import { DEFAULT_WEI_DECIMAL, getPoolIcon, TooltipText } from '@/constants'
 import { type IAPYTrendData } from '@/@types/pool.types'
 import { AboutTooltip } from '../AboutTooltip'
 import { ProtocolActionButton } from '../Actions/ActionButton.component'
@@ -63,7 +63,7 @@ export const TokenInfo: FC<TokenInfoProps> = ({ isOpen, onClose, data }) => {
             <div className="info">
               <div className="network">
                 <span>
-                  <Icon name={TokenIconMapping[data.pool]} height={44} width={44} />
+                  <Icon name={getPoolIcon(data.pool)} height={44} width={44} />
                 </span>
                 <span>{tokenConfig.symbol}</span>
               </div>
diff --git a/src/components/EnableToken/EnableToken.component.tsx b/src/components/EnableToken/EnableToken.component.tsx
index 381a94a..cdff5be 100644
--- a/src/components/EnableToken/EnableToken.component.tsx
+++ b/src/components/EnableToken/EnableToken.component.tsx
@@ -2,7 +2,7 @@
 import { type FC, useMemo, useCallback, useState } from 'react'
 import { Button, Modal, Icon } from '@/components'
 import type { tPoolIds, tSupportedChains, tSupportedTokens } from '@cedro-finance/sdk'
-import { TokenIconMapping } from '@/constants'
+import { getPoolIcon } from '@/constants'
 import { toast } from 'react-toastify'
 import { cedroClient } from '@/configs/chainConfig'
 
@@ -50,7 +50,7 @@ export const EnableToken: FC<EnableTokenProps> = ({ poolId, onApprove, selectedC
           </div>
           <div className="modal-body">
             <div className="enable-token-content">
-              <Icon name={TokenIconMapping[selectedToken]} width={80} height={80}/>
+              <Icon name={getPoolIcon(poolId)} width={80} height={80}/>
 
               <div className="modal-subtitle">
                 To Supply {token} to Cedro Protocol as
diff --git a/src/components/Navbar/AvailableTokens.component.tsx b/src/components/Navbar/AvailableTokens.component.tsx
index da6441a..717d752 100644
--- a/src/components/Navbar/AvailableTokens.component.tsx
+++ b/src/components/Navbar/AvailableTokens.component.tsx
@@ -1,4 +1,4 @@
-import { TokenIconMapping } from '@/constants'
+import { getPoolIcon } from '@/constants'
 import { truncateString, toFixedCutZero, toFixedNumber } from '@/utils'
 import { getIconName } from '@/utils/misc'
 import { Dropdown } from '../Dropdown'
@@ -39,7 +39,7 @@ export const AvailableTokens: FC = () => {
                   <div className='token'>
                     <div className="token-name">
                       <div>
-                        <Icon name={TokenIconMapping[token.poolId]} height={30} width={30} />
+                        <Icon name={getPoolIcon(token.poolId)} height={30} width={30} />
                       </div>
                       <div>
                         <div className='token-symbol'>{tokenSymbol}</div>
diff --git a/src/components/modal/LiquidationList.component.tsx b/src/components/modal/LiquidationList.component.tsx
index 9a67b4f..78fd303 100644
--- a/src/components/modal/LiquidationList.component.tsx
+++ b/src/components/modal/LiquidationList.component.tsx
@@ -5,7 +5,7 @@ import { type ColumnDef } from '@tanstack/react-table'
 import { type Address, type ILiquidationData } from '@cedro-finance/sdk'
 import { cedroClient } from '@/configs/chainConfig'
 import { useAccount } from 'wagmi'
-import { DEFAULT_WEI_DECIMAL, TokenIconMapping, ZERO_ADDRESS } from '@/constants'
+import { DEFAULT_WEI_DECIMAL, getPoolIcon, ZERO_ADDRESS } from '@/constants'
 import { convertBigIntValueToNormal } from '@/utils'
 
 interface LiquidationListProps {
@@ -44,7 +44,7 @@ const liquidationListColumnDefinition: Array<ColumnDef<unknown>> = [
     header: 'Asset',
     cell: (props) => {
       const pool = (props.row.original as ILiquidationData).collateralId
-      return <Icon name={TokenIconMapping[pool]} height={25}/>
+      return <Icon name={getPoolIcon(pool)} height={25}/>
     },
     meta: {
       getCellContext () {
@@ -84,7 +84,7 @@ const liquidationListColumnDefinition: Array<ColumnDef<unknown>> = [
     header: 'Asset',
     cell: (props) => {
       const pool = (props.row.original as ILiquidationData).debtId
-      return <Icon name={TokenIconMapping[pool]} height={25}/>
+      return <Icon name={getPoolIcon(pool)} height={25}/>
     },
     meta: {
       getCellContext: () => {
diff --git a/src/components/modal/TestTokens.component.tsx b/src/components/modal/TestTokens.component.tsx
index e679c8f..6511ba7 100644
--- a/src/components/modal/TestTokens.component.tsx
+++ b/src/components/modal/TestTokens.component.tsx
@@ -9,12 +9,13 @@ import { useChainContext } from '@/context/chain.context'
 import { useAccount } from 'wagmi'
 import { erc20MockAbi } from '@/abis'
 import { Faucet, getTokenSymbol } from '@/constants'
-import { TokenIconMapping } from '@/constants/icons'
+import { getPoolIcon } from '@/constants/icons'
 import { type IChainConfig } from '@/@types'
 import { Tooltip } from 'react-tooltip'
 import { truncateString } from '@/utils'
 import { toast } from 'react-toastify'
 import { cedroClient } from '@/configs/chainConfig'
+import { type tPoolIds } from '@cedro-finance/sdk'
 
 interface IToken {
   symbol: string
@@ -47,6 +48,7 @@ export const TestTokens: FC<TestTokensProps> = ({
         const chainInfo = cedroClient.Config.getChainConfig(
           token.chain
         )
+        console.log('🚀 ~ Object.values ~ chainInfo:', chainInfo)
         return {
           symbol: token.symbol,
           tokenAddress: token.tokenAddress,
@@ -111,7 +113,7 @@ export const TestTokens: FC<TestTokensProps> = ({
                 <div className="left">
                   {/* // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
                   <Icon
-                    name={TokenIconMapping[tokenData.symbol]}
+                    name={getPoolIcon(tokenData.symbol as tPoolIds)} // TODO fix this assertion
                     height={30}
                     width={30}
                   />
diff --git a/src/constants/tableColumns.tsx b/src/constants/tableColumns.tsx
index 45269c4..ac7e43f 100644
--- a/src/constants/tableColumns.tsx
+++ b/src/constants/tableColumns.tsx
@@ -19,14 +19,14 @@ import {
   getChainConfig,
   getChainIcon,
   getTokenSymbol,
-  TokenIconMapping,
   getChainNameFromChainId,
   getTokenSymbol as getTokenSymbolFromHex,
   TxTypeIconMapping,
   type TxType,
   type TxStatus,
   TxStatusIconMapping,
-  DEFAULT_WEI_DECIMAL
+  DEFAULT_WEI_DECIMAL,
+  getPoolIcon
 } from '@/constants'
 import { type ILiquidationHistoryData } from '@/graphql/hooks'
 import { type ILiquidableUsers } from '@/components/Liquidation/LiquidationTable'
@@ -45,7 +45,7 @@ export const borrowListColumns: Array<ColumnDef<IDashboardData>> = [
       return (
         <div className="asset">
           <Icon
-            name={TokenIconMapping[(props.row.original).pool]}
+            name={getPoolIcon((props.row.original).pool)}
             height={35}
             width={35}
             style={{ borderRadius: '50%' }}
@@ -162,7 +162,7 @@ export const supplyListColumns: Array<ColumnDef<IDashboardData>> = [
       return (
         <div className="asset">
           <Icon
-            name={TokenIconMapping[(props.row.original).pool]}
+            name={getPoolIcon((props.row.original).pool)}
             height={35}
             width={35}
             style={{ borderRadius: '50%' }}
@@ -302,7 +302,8 @@ export const HistoryTableColumns: Array<ColumnDef<unknown>> =
 
             return (
               <span className='datatable-assets'>
-              <Icon name={TokenIconMapping[iconName]} height={30} width={30} />
+              <Icon name={getPoolIcon(iconName as tPoolIds)} height={30} width={30} />
+              {iconName}
               {/* // @ts-expect-error Unsafe any value as index */}
               {/* {CHAINNAME_MAP[chainName]?.name || chainName} */}
             </span>)
diff --git a/src/containers/market.tsx b/src/containers/market.tsx
index 204c41a..899837e 100644
--- a/src/containers/market.tsx
+++ b/src/containers/market.tsx
@@ -20,9 +20,9 @@ import { useMemo, type FC, useState } from 'react'
 import { type ColumnDef } from '@tanstack/react-table'
 import {
   DEFAULT_WEI_DECIMAL,
-  TokenIconMapping,
   getChainConfig,
   getChainIcon,
+  getPoolIcon,
   getTokenSymbol
 } from '@/constants'
 import { ValueWithPrice } from '@/components/Price/Price.component'
@@ -54,7 +54,7 @@ export const MarketColumnDefinition: Array<ColumnDef<IDashboardData>> = [
       return (
         <div className="asset">
           <Icon
-            name={TokenIconMapping[(props.row.original).pool]}
+            name={getPoolIcon((props.row.original).pool)}
             height={40}
             width={40}
             style={{ borderRadius: '50%' }}

From 7f585656a68a6f3518e8339d91d3c86c082fb7e2 Mon Sep 17 00:00:00 2001
From: Yunip Shrestha <yunipshrestha@gmail.com>
Date: Tue, 23 Apr 2024 14:26:09 +0545
Subject: [PATCH 6/6] remove console log

---
 src/components/Actions/Supply.component.tsx             | 2 --
 src/components/modal/TestTokens.component.tsx           | 1 -
 src/components/shared/actions/AmountInput.component.tsx | 2 --
 src/containers/market.tsx                               | 2 --
 4 files changed, 7 deletions(-)

diff --git a/src/components/Actions/Supply.component.tsx b/src/components/Actions/Supply.component.tsx
index 529463d..386203e 100644
--- a/src/components/Actions/Supply.component.tsx
+++ b/src/components/Actions/Supply.component.tsx
@@ -95,8 +95,6 @@ export const SupplyModal: FC<IProtocolActionModalProps> = ({
     validationError
   } = useProtocolAction(poolId, chain, eProtocolAction.DEPOSIT)
 
-  console.log({ selectedTokenInfo })
-
   const healthFactor = useHealthFactor(
     poolId,
     eProtocolAction.DEPOSIT,
diff --git a/src/components/modal/TestTokens.component.tsx b/src/components/modal/TestTokens.component.tsx
index 6511ba7..a8e9451 100644
--- a/src/components/modal/TestTokens.component.tsx
+++ b/src/components/modal/TestTokens.component.tsx
@@ -48,7 +48,6 @@ export const TestTokens: FC<TestTokensProps> = ({
         const chainInfo = cedroClient.Config.getChainConfig(
           token.chain
         )
-        console.log('🚀 ~ Object.values ~ chainInfo:', chainInfo)
         return {
           symbol: token.symbol,
           tokenAddress: token.tokenAddress,
diff --git a/src/components/shared/actions/AmountInput.component.tsx b/src/components/shared/actions/AmountInput.component.tsx
index b1efa31..72fa4e7 100644
--- a/src/components/shared/actions/AmountInput.component.tsx
+++ b/src/components/shared/actions/AmountInput.component.tsx
@@ -69,8 +69,6 @@ export const AmountInput: FC<AmountInputProps> = ({ inputType, switchInputType,
     newNativeBalance = bigIntMin(newNativeBalance, maxNativeAmount)
     newDollarBalance = bigIntMin(newDollarBalance, maxDollarAmount)
 
-    console.log({ newNativeBalance, newDollarBalance })
-
     setInputValues(prev => ({ ...prev, native: formatUnits(newNativeBalance, 18), usdc: formatUnits(newDollarBalance, 18) }))
   }
 
diff --git a/src/containers/market.tsx b/src/containers/market.tsx
index 899837e..0bddb45 100644
--- a/src/containers/market.tsx
+++ b/src/containers/market.tsx
@@ -307,8 +307,6 @@ export const Market: FC = () => {
     return ((changedValue < 0.01) && (changedValue >= 0.00)) ? 'neutral' : (changedValue > 0 ? 'up' : 'down')
   }
 
-  console.log({ borrowChange, v: getChipRateDirection(-1.00) })
-
   return (
     <Layout>
       <div className="market">