Design/update action modal fees

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;
             }

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(

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(

src/components/Actions/Supply.component.tsx

@@ -23,7 +23,6 @@ import {
   ActionAccordion,
   RewardInfo,
   Alert
-  // Alert
 } from '@/components'
 import {
   DEFAULT_WEI_DECIMAL,
@@ -96,8 +95,6 @@ export const SupplyModal: FC<IProtocolActionModalProps> = ({
     validationError
   } = useProtocolAction(poolId, chain, eProtocolAction.DEPOSIT)
 
-  console.log({ selectedTokenInfo })
-
   const healthFactor = useHealthFactor(
     poolId,
     eProtocolAction.DEPOSIT,
@@ -276,7 +273,7 @@ export const SupplyModal: FC<IProtocolActionModalProps> = ({
 
             <ActionAccordion
               fieldName="Your total deposit"
-              token={selectedTokenInfo.symbol}
+              pool={poolId}
               values={{
                 gasOnDestination: 'string',
                 fee: convertBigIntValueToNormal(

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(

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>

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

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}
                     />

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'
@@ -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>
@@ -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>

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}
                 />

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>

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: () => {

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>

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
@@ -111,7 +112,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}
                   />

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>