From b4037a2c0bef331051dccaaf9a248886a4edde92 Mon Sep 17 00:00:00 2001
From: khanhpham <khanhpham08121996@gmail.com>
Date: Tue, 6 Jun 2023 21:51:56 +0700
Subject: [PATCH] issue #27: token symbol: update power when TOKEN_R =
 baseToken

---
 src/Components/ui/TokenSymbol/index.tsx | 27 +++++++++----------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/Components/ui/TokenSymbol/index.tsx b/src/Components/ui/TokenSymbol/index.tsx
index 3770d620..0a727cb2 100644
--- a/src/Components/ui/TokenSymbol/index.tsx
+++ b/src/Components/ui/TokenSymbol/index.tsx
@@ -3,42 +3,35 @@ import { useCurrentPool } from '../../../state/currentPool/hooks/useCurrentPool'
 import { useListTokens } from '../../../state/token/hook'
 import { decodeErc1155Address, isErc1155Address } from '../../../utils/helpers'
 import { useListPool } from '../../../state/resources/hooks/useListPool'
-import { useConfigs } from '../../../state/config/useConfigs'
 import { POOL_IDS } from '../../../utils/constant'
+import { useHelper } from '../../../state/config/useHelper'
 
 export const TokenSymbol = ({ token }: { token: string }) => {
   const { baseToken } = useCurrentPool()
   const { tokens } = useListTokens()
   const { pools } = useListPool()
-  const { configs } = useConfigs()
+  const { wrapToNativeAddress } = useHelper()
 
   const result = useMemo(() => {
     const symbol = tokens[token]?.symbol
     if (isErc1155Address(token)) {
       const { address: poolAddress, id } = decodeErc1155Address(token)
-      let baseSymbol = tokens[baseToken]?.symbol ?? 'ETH'
       const pool = pools[poolAddress]
       if (!pool) {
         return <span className='font-size-14'>{symbol}</span>
       }
-      if (configs.addresses.wrapToken === baseToken) {
-        baseSymbol = baseSymbol.substring(1)
-      }
-
-      let tokenR = tokens[pool.TOKEN_R]?.symbol
-      if (configs.addresses.wrapToken === pool.TOKEN_R) {
-        tokenR = tokenR.substring(1)
-      }
 
       return <React.Fragment>
-        <span className='font-size-14'>{Number(id) === POOL_IDS.C && 'DLP-'}{baseSymbol}</span>
-        <sup className='font-size-12'>{Number(id) === POOL_IDS.B && '-'}{pool?.k.toNumber() / 2}</sup>
-        <span className='font-size-14'>.{tokenR}</span>
+        <span className='font-size-14'>{Number(id) === POOL_IDS.C && 'DLP-'}{tokens[wrapToNativeAddress(pool.TOKEN_R)]?.symbol}</span>
+        <sup className='font-size-12'>
+          {Number(id) === POOL_IDS.B && '-'}{(pool.TOKEN_R === baseToken && Number(id) !== POOL_IDS.C ? 1 : 0) + (pool?.k.toNumber() / 2)}
+        </sup>
+        {
+          (pool.TOKEN_R !== baseToken && Number(id) !== POOL_IDS.C) &&
+          <span className='font-size-14'>.{tokens[wrapToNativeAddress(pool.TOKEN_R)]?.symbol}</span>
+        }
       </React.Fragment>
     }
-    // else if (token?.address === cToken) {
-    //   return <span className='font-size-14'>{symbol}_{tokens[baseToken]?.symbol}_{tokens[quoteToken]?.symbol}</span>
-    // }
     return <span className='font-size-14'>{symbol}</span>
   }, [tokens, token, pools])