From 971f8d726f68083697ec9b0f808978fc1ce1c038 Mon Sep 17 00:00:00 2001 From: khanhpham Date: Tue, 6 Jun 2023 23:27:25 +0700 Subject: [PATCH] issue #27: fix power display --- src/Components/BuyPositionBox/index.tsx | 4 ++-- src/Components/SelectTokenModal/index.tsx | 1 - src/Components/ui/TokenIcon/index.tsx | 5 ++--- src/Components/ui/TokenSymbol/index.tsx | 4 ++-- src/hooks/useGenerateLeverageData.ts | 25 +++++++++++------------ src/utils/helpers.ts | 9 ++++++++ 6 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/Components/BuyPositionBox/index.tsx b/src/Components/BuyPositionBox/index.tsx index f42bcc66..4d5cf29f 100644 --- a/src/Components/BuyPositionBox/index.tsx +++ b/src/Components/BuyPositionBox/index.tsx @@ -214,8 +214,8 @@ const Component = ({ className='estimate-box swap-info-box mt-1 mb-1' > - {isLong ? 'Long ' : 'Short -'} - {barData?.x / 2}X + {isLong ? 'Long ' : 'Short'} + {barData?.x}x diff --git a/src/Components/SelectTokenModal/index.tsx b/src/Components/SelectTokenModal/index.tsx index b76d1f51..522b95fa 100644 --- a/src/Components/SelectTokenModal/index.tsx +++ b/src/Components/SelectTokenModal/index.tsx @@ -94,7 +94,6 @@ const Option = ({ onSelectToken, address, setVisible }: { { (lp && Number(lp) > 0) ?
- LP: ${formatLocalisedCompactNumber(formatFloat(lp, 2))}
: '' diff --git a/src/Components/ui/TokenIcon/index.tsx b/src/Components/ui/TokenIcon/index.tsx index 1e96b72f..d200b95e 100644 --- a/src/Components/ui/TokenIcon/index.tsx +++ b/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
LP
} diff --git a/src/Components/ui/TokenSymbol/index.tsx b/src/Components/ui/TokenSymbol/index.tsx index 4f434aab..f3e73272 100644 --- a/src/Components/ui/TokenSymbol/index.tsx +++ b/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 {Number(id) === POOL_IDS.C && 'DLP-'}{tokens[wrapToNativeAddress(pool.TOKEN_R)]?.symbol} - {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())} { (pool.TOKEN_R !== baseToken || Number(id) === POOL_IDS.C) && diff --git a/src/hooks/useGenerateLeverageData.ts b/src/hooks/useGenerateLeverageData.ts index a476faf9..91f0f001 100644 --- a/src/hooks/useGenerateLeverageData.ts +++ b/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,14 +21,16 @@ 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] @@ -36,16 +38,15 @@ export const useGenerateLeverageData = (isLong: boolean) => { ] } } 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]) } diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index f29f9aef..c7ab8217 100644 --- a/src/utils/helpers.ts +++ b/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 +}