issue #27: fix power display

src/Components/BuyPositionBox/index.tsx

@@ -214,8 +214,8 @@ const Component = ({
           className='estimate-box swap-info-box mt-1 mb-1'
         >
           <span className={`estimate-box__leverage ${isLong ? 'long' : 'short'}`}>
-            {isLong ? 'Long ' : 'Short -'}
-            {barData?.x / 2}X
+            {isLong ? 'Long ' : 'Short'}
+            {barData?.x}x
           </span>
           <InfoRow>
             <span>

src/Components/SelectTokenModal/index.tsx

@@ -94,7 +94,6 @@ const Option = ({ onSelectToken, address, setVisible }: {
       {
         (lp && Number(lp) > 0)
           ? <div>
-            <Text>LP: </Text>
             <TextGrey>${formatLocalisedCompactNumber(formatFloat(lp, 2))}</TextGrey>
           </div>
           : ''

src/Components/ui/TokenIcon/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, Fragment, useMemo, useState } from 'react'
 import { CustomTokenIcon } from '../Icon'
 import { useHelper } from '../../../state/config/useHelper'
-import { decodeErc1155Address, isErc1155Address } from '../../../utils/helpers'
+import { decodeErc1155Address, getTokenPower, isErc1155Address } from '../../../utils/helpers'
 import './style.scss'
 import { POOL_IDS } from '../../../utils/constant'
 import { useListPool } from '../../../state/resources/hooks/useListPool'
@@ -34,8 +34,7 @@ export const TokenIcon = (props: {
       const { id, address } = decodeErc1155Address(props.tokenAddress)
       const pool = pools[address]
       if (!pool) return null
-      const k = pool?.k.toNumber()
-      const power = Number(id) === Number(POOL_IDS.A) ? (k / 2) : (-k / 2)
+      const power = getTokenPower(pool.TOKEN_R, pool.baseToken, Number(id), pool.k.toNumber())
       if (Number(id) === POOL_IDS.C) {
         return <div style={style} className='pool-token-logo pool-token-logo__cp'>LP</div>
       }

src/Components/ui/TokenSymbol/index.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import { useCurrentPool } from '../../../state/currentPool/hooks/useCurrentPool'
 import { useListTokens } from '../../../state/token/hook'
-import { decodeErc1155Address, isErc1155Address } from '../../../utils/helpers'
+import { decodeErc1155Address, getTokenPower, isErc1155Address } from '../../../utils/helpers'
 import { useListPool } from '../../../state/resources/hooks/useListPool'
 import { POOL_IDS } from '../../../utils/constant'
 import { useHelper } from '../../../state/config/useHelper'
@@ -24,7 +24,7 @@ export const TokenSymbol = ({ token }: { token: string }) => {
       return <React.Fragment>
         <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)}
+          {getTokenPower(pool.TOKEN_R, baseToken, Number(id), pool?.k.toNumber())}
         </sup>
         {
           (pool.TOKEN_R !== baseToken || Number(id) === POOL_IDS.C) &&

src/hooks/useGenerateLeverageData.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { POOL_IDS } from '../utils/constant'
 import { useCurrentPool } from '../state/currentPool/hooks/useCurrentPool'
 import { useTokenValue } from '../Components/SwapBox/hooks/useTokenValue'
-import { add, bn, numberToWei, weiToNumber } from '../utils/helpers'
+import { add, bn, getTokenPower, numberToWei, weiToNumber } from '../utils/helpers'
 import { useListTokens } from '../state/token/hook'
 
 const barColors = ['#01A7FA', '#FF98E5', '#4FBF67', '#3DBAA2']
@@ -21,31 +21,32 @@ export const useGenerateLeverageData = (isLong: boolean) => {
           weiToNumber(pool.states.R, tokens[pool.TOKEN_R]?.decimals)
         )))
 
-        if (!result[pool.k.toNumber()]) {
-          result[pool.k.toNumber()] = {
-            x: pool.k.toNumber(),
-            xDisplay: (pool.k.toNumber() / 2) + 'x',
+        const power = Math.abs(Number(getTokenPower(pool.TOKEN_R, pool.baseToken, isLong ? POOL_IDS.A : POOL_IDS.B, pool.k.toNumber())))
+
+        if (!result[power]) {
+          result[power] = {
+            x: power,
+            xDisplay: (power) + 'x',
             totalSize: size,
             bars: [
               {
-                x: pool.k.toNumber(),
+                x: power,
                 token: pool.poolAddress + '-' + (isLong ? POOL_IDS.A : POOL_IDS.B),
                 size,
                 color: barColors[0]
               }
             ]
           }
         } else {
-          const bars = result[pool.k.toNumber()].bars
-          console.log(bars)
+          const bars = result[power].bars
           bars.push({
-            x: pool.k.toNumber(),
+            x: power,
             token: pool.poolAddress + '-' + (isLong ? POOL_IDS.A : POOL_IDS.B),
             size,
             color: barColors[bars.length]
           })
-          result[pool.k.toNumber()].bars = bars
-          result[pool.k.toNumber()].totalSize = result[pool.k.toNumber()].totalSize.add(size)
+          result[power].bars = bars
+          result[power].totalSize = result[power].totalSize.add(size)
         }
       })
     }
@@ -74,8 +75,6 @@ export const useGenerateLeverageData = (isLong: boolean) => {
       }
     })
 
-    console.log('khanh', result, maxTotalSize.toString(), data)
-
     return data
   }, [pools, isLong])
 }

src/utils/helpers.ts

@@ -1,4 +1,5 @@
 import { BigNumber, ethers, utils } from 'ethers'
+import { POOL_IDS } from './constant'
 
 export const bn = ethers.BigNumber.from
 
@@ -223,3 +224,11 @@ export const detectDecimalFromPrice = (price: number | string) => {
     return rate.split('.')[0].length + 3
   }
 }
+
+export const getTokenPower = (
+  TOKEN_R: string,
+  baseToken: string,
+  id: number, k: number) => {
+  if (id === POOL_IDS.C) return '±' + k / 2
+  return (TOKEN_R === baseToken && id !== POOL_IDS.C ? 1 : 0) + (id === POOL_IDS.B ? -1 : 1) * k / 2
+}