From 7db037ec277f431be6c97ea37320a005589b26e8 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Wed, 17 Apr 2024 16:10:59 +0700 Subject: [PATCH 1/3] refactor: usd format on position list --- packages/swap-router/.ultra.cache.json | 2 +- .../RemoveLiquiditySelectListItem.tsx | 47 +++++++----- .../SelectLiquidityListItem.tsx | 48 ++++++++----- .../SelectLiquidityItem.tsx | 48 ++++++++----- .../web/src/utils/stake-position-utils.ts | 72 +++++++++++++++++++ 5 files changed, 162 insertions(+), 55 deletions(-) diff --git a/packages/swap-router/.ultra.cache.json b/packages/swap-router/.ultra.cache.json index de45e9d77..4fa99a0c3 100644 --- a/packages/swap-router/.ultra.cache.json +++ b/packages/swap-router/.ultra.cache.json @@ -1 +1 @@ -{"files":{".vscode":"1700971955685.2515","build":"1707361962257.1062","node_modules":"1700891704503.8325",".eslintignore":"7de3bd702df2dee92c033c49abbedd0b0f7452e6",".eslintrc.js":"ca4815a5cf5cffa1d3fb4a014c8c602f852b002a",".gitignore":"c87c9b392c0200d9c9dafc444386ad3e15a85c64",".prettierignore":"47bb4656eb55860a075be7799cba7fa955b68141",".prettierrc":"fe5f744c7a08b128c935d1e1aed3e8a577e74507","jest.config.json":"2e496ee6bd64eb237161dcd69a6957eff2df584d","package.json":"4dda70ca76fb6022f6cb20852ecd8d2d95d638d2","src/common/array.util.ts":"9482ab121d34cc7e08a0cd33b49173b0b85823d8","src/common/bigint.util.ts":"343f4c85ca1f6c840ade68c259ed82bf5b159fb0","src/common/index.ts":"861a3167cddfc93e9eb1b6a4ae8229bb9dc2f8fd","src/common/mapper.ts":"f7d7b491dff443911a978b34e4cb378bee46c2b7","src/common/queue.ts":"ad096fefbe1c5a7339b536b0b8d39dba661b520e","src/common/test.util.ts":"3e500df6ec27ba98606acbfcaec9243e22862e43","src/constants/index.ts":"9605b149deb525c25f6e93420bbc433ff1c75cd0","src/constants/math.constant.ts":"b617851527cabcc9c3bce2c8e39208001d379ad6","src/constants/swap.constant.ts":"53e280147c68acfba490bc1f9a0b7bb1580e7280","src/index.ts":"691efb21a28bd3f0e6437edcb16192789dbbb7f6","src/swap-router/index.ts":"effaf28a826bdf1441437643e8343e7fbd8026b1","src/swap-router/swap-router-default.spec.ts":"e78d6591f15c38821bd701796c5281a5000a98ce","src/swap-router/swap-router-multi-higher-range-position-pool.spec.ts":"683ce3a82d73e915018e772723700905c3ff7c92","src/swap-router/swap-router-multi-lower-range-position-pool.spec.ts":"93bfd18d0a297f3c66743cddcf2fe10c3764e250","src/swap-router/swap-router-multi-pair-pools.spec.ts":"642a9f24dc06b4ef5fb6f099b21b1dbec7f09d8f","src/swap-router/swap-router-multi-route.spec.ts":"2b37b87049e38971482716b93be7eb2d739ed135","src/swap-router/swap-router-single-pair-pools.spec.ts":"8508da991d741ce394e663680b87f56a5c9af30d","src/swap-router/swap-router.ts":"97c4ee1a2cb563be921352b60bbd7bff9535fb21","src/swap-router/swap-router.types.ts":"2a48987217df238256a0721d227952142a37ce08","src/swap-router/utility/index.ts":"4973874904dd9d77d037d72b1ec8aed397716a38","src/swap-router/utility/route.util.ts":"d492418c9184e42d3ef29d7760eb18fa013f54c6","src/swap-simulator/index.ts":"ef493c5977bdf1123d1197b804f2344ee463870c","src/swap-simulator/swap-simulator-default.spec.ts":"867788b12ccc70abe676010aeed5d6b2b58e8036","src/swap-simulator/swap-simulator.ts":"48cc4c90a2622d806659fa2f8c4f48d600a2b2db","src/swap-simulator/swap-simulator.types.ts":"11d929d55a895b0305375b3b69ac27c49a985ce0","src/swap-simulator/utility/cache.util.ts":"c5af86d350610a80a6690846657a35635bbc752a","src/swap-simulator/utility/index.ts":"7272f5d23dfa7af2895fca9bb0b17985234ab6e1","src/swap-simulator/utility/math.util.ts":"96fbe38cbabe344f6f58220f46c20103e6df4225","src/swap-simulator/utility/swap-util.spec.ts":"b7fe082f3fef7e5a912959925924f56f8c36e020","src/swap-simulator/utility/swap.util.ts":"f49236f0d22f72b9283244e870d34401d42fe009","src/swap-simulator/utility/tick.util.ts":"01d1fc86a1cfcf81aa8932c52bca9738916feab5","tsconfig.json":"55467bd5c5eb1b501abe50b952d5f2d9fa0a0d69"},"deps":{}} \ No newline at end of file +{"files":{"build":"1713170489386.185",".eslintignore":"7de3bd702df2dee92c033c49abbedd0b0f7452e6",".eslintrc.js":"ca4815a5cf5cffa1d3fb4a014c8c602f852b002a",".gitignore":"c87c9b392c0200d9c9dafc444386ad3e15a85c64",".prettierignore":"47bb4656eb55860a075be7799cba7fa955b68141",".prettierrc":"fe5f744c7a08b128c935d1e1aed3e8a577e74507","jest.config.json":"2e496ee6bd64eb237161dcd69a6957eff2df584d","package.json":"4dda70ca76fb6022f6cb20852ecd8d2d95d638d2","src/common/array.util.ts":"9482ab121d34cc7e08a0cd33b49173b0b85823d8","src/common/bigint.util.ts":"343f4c85ca1f6c840ade68c259ed82bf5b159fb0","src/common/index.ts":"861a3167cddfc93e9eb1b6a4ae8229bb9dc2f8fd","src/common/mapper.ts":"f7d7b491dff443911a978b34e4cb378bee46c2b7","src/common/queue.ts":"ad096fefbe1c5a7339b536b0b8d39dba661b520e","src/common/test.util.ts":"3e500df6ec27ba98606acbfcaec9243e22862e43","src/constants/index.ts":"9605b149deb525c25f6e93420bbc433ff1c75cd0","src/constants/math.constant.ts":"b617851527cabcc9c3bce2c8e39208001d379ad6","src/constants/swap.constant.ts":"53e280147c68acfba490bc1f9a0b7bb1580e7280","src/index.ts":"691efb21a28bd3f0e6437edcb16192789dbbb7f6","src/swap-router/index.ts":"effaf28a826bdf1441437643e8343e7fbd8026b1","src/swap-router/swap-router-default.spec.ts":"e78d6591f15c38821bd701796c5281a5000a98ce","src/swap-router/swap-router-multi-higher-range-position-pool.spec.ts":"683ce3a82d73e915018e772723700905c3ff7c92","src/swap-router/swap-router-multi-lower-range-position-pool.spec.ts":"93bfd18d0a297f3c66743cddcf2fe10c3764e250","src/swap-router/swap-router-multi-pair-pools.spec.ts":"642a9f24dc06b4ef5fb6f099b21b1dbec7f09d8f","src/swap-router/swap-router-multi-route.spec.ts":"2b37b87049e38971482716b93be7eb2d739ed135","src/swap-router/swap-router-single-pair-pools.spec.ts":"8508da991d741ce394e663680b87f56a5c9af30d","src/swap-router/swap-router.ts":"97c4ee1a2cb563be921352b60bbd7bff9535fb21","src/swap-router/swap-router.types.ts":"2a48987217df238256a0721d227952142a37ce08","src/swap-router/utility/index.ts":"4973874904dd9d77d037d72b1ec8aed397716a38","src/swap-router/utility/route.util.ts":"d492418c9184e42d3ef29d7760eb18fa013f54c6","src/swap-simulator/index.ts":"ef493c5977bdf1123d1197b804f2344ee463870c","src/swap-simulator/swap-simulator-default.spec.ts":"867788b12ccc70abe676010aeed5d6b2b58e8036","src/swap-simulator/swap-simulator.ts":"48cc4c90a2622d806659fa2f8c4f48d600a2b2db","src/swap-simulator/swap-simulator.types.ts":"11d929d55a895b0305375b3b69ac27c49a985ce0","src/swap-simulator/utility/cache.util.ts":"c5af86d350610a80a6690846657a35635bbc752a","src/swap-simulator/utility/index.ts":"7272f5d23dfa7af2895fca9bb0b17985234ab6e1","src/swap-simulator/utility/math.util.ts":"96fbe38cbabe344f6f58220f46c20103e6df4225","src/swap-simulator/utility/swap-util.spec.ts":"b7fe082f3fef7e5a912959925924f56f8c36e020","src/swap-simulator/utility/swap.util.ts":"f49236f0d22f72b9283244e870d34401d42fe009","src/swap-simulator/utility/tick.util.ts":"01d1fc86a1cfcf81aa8932c52bca9738916feab5","tsconfig.json":"55467bd5c5eb1b501abe50b952d5f2d9fa0a0d69"},"deps":{}} \ No newline at end of file diff --git a/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx b/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx index b8a3adbc5..278aef677 100644 --- a/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx +++ b/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx @@ -7,11 +7,11 @@ import Badge, { BADGE_TYPE } from "@components/common/badge/Badge"; import { PoolPositionModel } from "@models/position/pool-position-model"; import { tooltipWrapper } from "@components/stake/select-lilquidity-list-item/SelectLiquidityListItem.styles"; import { makeDisplayTokenAmount } from "@utils/token-utils"; -import { numberToUSD } from "@utils/number-utils"; import { SwapFeeTierInfoMap } from "@constants/option.constant"; import { makeSwapFeeTier } from "@utils/swap-utils"; import { useWindowSize } from "@hooks/common/use-window-size"; -import { convertToKMB } from "@utils/stake-position-utils"; +import { convertLiquidityUsdToKMB, convertLiquidityUsdValue } from "@utils/stake-position-utils"; +import { TokenModel } from "@models/token/token-model"; import BigNumber from "bignumber.js"; interface RemoveLiquiditySelectListItemProps { @@ -27,6 +27,18 @@ interface TooltipProps { } const TooltipContent: React.FC = ({ position, disabled }) => { + const renderTokenValue = (imgUri: string, tokeSymbol: string, token: TokenModel, tokenBalance: bigint ) => { + const tokenBalanceByTokenDecimal = BigNumber(makeDisplayTokenAmount(token, tokenBalance) || 0).toFormat(); + + return
+
+ token logo + {tokeSymbol} +
+
{tokenBalanceByTokenDecimal}
+
; + }; + return (
@@ -34,20 +46,18 @@ const TooltipContent: React.FC = ({ position, disabled }) => {
Token ID
#{position.id}
-
-
- token logo - {position.pool.tokenA.symbol} -
-
{BigNumber(makeDisplayTokenAmount(position.pool.tokenA, position.token0Balance) || 0).toFormat(2)}
-
-
-
- token logo - {position.pool.tokenB.symbol} -
-
{BigNumber(makeDisplayTokenAmount(position.pool.tokenB, position.token1Balance) || 0).toFormat(2)}
-
+ {renderTokenValue( + position.pool.tokenA.logoURI, + position.pool.tokenA.symbol, + position.pool.tokenA, + position.token0Balance, + )} + {renderTokenValue( + position.pool.tokenB.logoURI, + position.pool.tokenB.symbol, + position.pool.tokenB, + position.token1Balance, + )} {disabled &&
} {disabled && ( @@ -79,8 +89,9 @@ const RemoveLiquiditySelectListItem: React.FC { - if (width < 400) return `$${convertToKMB(position.positionUsdValue)}`; - return numberToUSD(Number(position.positionUsdValue)); + if (width < 400) return convertLiquidityUsdToKMB(position.positionUsdValue, undefined, undefined, "$"); + + return convertLiquidityUsdValue(Number(position.positionUsdValue)); }, [position.positionUsdValue, width]); const feeStr = useMemo(() => { diff --git a/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx b/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx index 7abe976ca..6832c4125 100644 --- a/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx +++ b/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx @@ -2,13 +2,13 @@ import Badge, { BADGE_TYPE } from "@components/common/badge/Badge"; import DoubleLogo from "@components/common/double-logo/DoubleLogo"; import Tooltip from "@components/common/tooltip/Tooltip"; import { PoolPositionModel } from "@models/position/pool-position-model"; -import { numberToUSD } from "@utils/number-utils"; import { makeDisplayTokenAmount } from "@utils/token-utils"; import React, { useMemo } from "react"; import { tooltipWrapper, wrapper } from "./SelectLiquidityListItem.styles"; import { useWindowSize } from "@hooks/common/use-window-size"; -import { convertToKMB } from "@utils/stake-position-utils"; +import { convertLiquidityUsdToKMB, convertLiquidityUsdValue } from "@utils/stake-position-utils"; import BigNumber from "bignumber.js"; +import { TokenModel } from "@models/token/token-model"; interface SelectLiquidityListItemProps { disabled?: boolean; @@ -18,26 +18,37 @@ interface SelectLiquidityListItemProps { } const TooltipContent: React.FC<{ position: PoolPositionModel, disabled: boolean }> = ({ position, disabled }) => { + const renderTokenValue = (imgUri: string, tokeSymbol: string, token: TokenModel, tokenBalance: bigint ) => { + const tokenBalanceByTokenDecimal = BigNumber(makeDisplayTokenAmount(token, tokenBalance) || 0).toFormat(); + + return
+
+ token logo + {tokeSymbol} +
+
{tokenBalanceByTokenDecimal}
+
; + }; + + return (
Token ID
#{position.id}
-
-
- - {position.pool.tokenA.symbol} -
-
{BigNumber(makeDisplayTokenAmount(position.pool.tokenA, position.token0Balance) || 0).toFormat(2)}
-
-
-
- - {position.pool.tokenB.symbol} -
-
{BigNumber(makeDisplayTokenAmount(position.pool.tokenB, position.token1Balance) || 0).toFormat(2)}
-
+ {renderTokenValue( + position.pool.tokenA.logoURI, + position.pool.tokenA.symbol, + position.pool.tokenA, + position.token0Balance, + )} + {renderTokenValue( + position.pool.tokenB.logoURI, + position.pool.tokenB.symbol, + position.pool.tokenB, + position.token1Balance, + )} {disabled &&
} {disabled && (
@@ -69,8 +80,9 @@ const SelectLiquidityListItem: React.FC = ({ }, [position.pool.tokenB]); const liquidityUSD = useMemo(() => { - if (width < 400) return `$${convertToKMB(position.positionUsdValue)}`; - return numberToUSD(Number(position.positionUsdValue)); + if (width < 400) return convertLiquidityUsdToKMB(position.positionUsdValue, undefined, undefined, "$"); + + return convertLiquidityUsdValue(Number(position.positionUsdValue)); }, [position.positionUsdValue, width]); return ( diff --git a/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx b/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx index 862731978..19feea6fd 100644 --- a/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx +++ b/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx @@ -2,13 +2,13 @@ import Badge, { BADGE_TYPE } from "@components/common/badge/Badge"; import DoubleLogo from "@components/common/double-logo/DoubleLogo"; import Tooltip from "@components/common/tooltip/Tooltip"; import { PoolPositionModel } from "@models/position/pool-position-model"; -import { numberToUSD } from "@utils/number-utils"; import { makeDisplayTokenAmount } from "@utils/token-utils"; import React, { useMemo } from "react"; import { tooltipWrapper, wrapper } from "./SelectLiquidityItem.styles"; import { useWindowSize } from "@hooks/common/use-window-size"; -import { convertToKMB } from "@utils/stake-position-utils"; +import { convertLiquidityUsdToKMB, convertLiquidityUsdValue } from "@utils/stake-position-utils"; import BigNumber from "bignumber.js"; +import { TokenModel } from "@models/token/token-model"; interface SelectLiquidityItemProps { position: PoolPositionModel; @@ -18,26 +18,37 @@ interface SelectLiquidityItemProps { } const TooltipContent: React.FC<{ position: PoolPositionModel }> = ({ position }) => { + const renderTokenValue = (imgUri: string, tokeSymbol: string, token: TokenModel, tokenBalance: bigint ) => { + const tokenBalanceByTokenDecimal = BigNumber(makeDisplayTokenAmount(token, tokenBalance) || 0).toFormat(); + + return
+
+ token logo + {tokeSymbol} +
+
{tokenBalanceByTokenDecimal}
+
; + }; + + return (
Token ID
#{position.id}
-
-
- - {position.pool.tokenA.symbol} -
-
{BigNumber(makeDisplayTokenAmount(position.pool.tokenA, position.token0Balance) || 0).toFormat(2)}
-
-
-
- - {position.pool.tokenB.symbol} -
-
{BigNumber(makeDisplayTokenAmount(position.pool.tokenB, position.token1Balance) || 0).toFormat(2)}
-
+ {renderTokenValue( + position.pool.tokenA.logoURI, + position.pool.tokenA.symbol, + position.pool.tokenA, + position.token0Balance, + )} + {renderTokenValue( + position.pool.tokenB.logoURI, + position.pool.tokenB.symbol, + position.pool.tokenB, + position.token1Balance, + )}
); }; @@ -63,8 +74,9 @@ const SelectLiquidityItem: React.FC = ({ }, [position.pool.tokenB]); const liquidityUSD = useMemo(() => { - if (width < 400) return `$${convertToKMB(position.positionUsdValue)}`; - return numberToUSD(Number(position.positionUsdValue)); + if (width < 400) return convertLiquidityUsdToKMB(position.positionUsdValue, undefined, undefined, "$"); + + return convertLiquidityUsdValue(Number(position.positionUsdValue)); }, [position.positionUsdValue, width]); return ( diff --git a/packages/web/src/utils/stake-position-utils.ts b/packages/web/src/utils/stake-position-utils.ts index 192a3f952..d3b8fc996 100644 --- a/packages/web/src/utils/stake-position-utils.ts +++ b/packages/web/src/utils/stake-position-utils.ts @@ -1,3 +1,5 @@ +import BigNumber from "bignumber.js"; + export const convertToMB = (price: string, maximumFractionDigits?: number) => { if (Number.isNaN(Number(price))) return "-"; if (Math.floor(Number(price)).toString().length < 7) { @@ -80,6 +82,62 @@ export const convertToKMB = ( } }; +export const convertLiquidityUsdToKMB = ( + price: string, + maximumFractionDigits?: number, + minimumFractionDigits?: number, + prefix?: string, +) => { + function withPrefix(value: string) { + if(prefix) return prefix + value; + + return value; + } + + if (Number.isNaN(Number(price))) return "-"; + + if (Math.floor(Number(price)).toString().length < 4) { + if (Number.isInteger(Number(price))) return withPrefix(`${Number(price)}`); + if (Number(price) < 0.01 && Number(price) !== 0) return `<${prefix}0.01`; + if (Number(price) < 1) return withPrefix(`${Number(Number(price).toFixed(6))}`); + return withPrefix(Number(price).toLocaleString("en-US", { + maximumFractionDigits: maximumFractionDigits ?? 2, + minimumFractionDigits: minimumFractionDigits ?? 2, + })); + } + + const temp = Math.floor(Number(price)); + if (temp >= 1e9) { + if (temp > 999.99 * 1e9) return withPrefix("999.99B"); + return withPrefix( + (temp / 1e9).toLocaleString("en-US", { + maximumFractionDigits: 2, + minimumFractionDigits: 2, + }) + "B" + ); + } + if (temp >= 1e6) { + return withPrefix( + (temp / 1e6).toLocaleString("en-US", { + maximumFractionDigits: 2, + minimumFractionDigits: 2, + }) + "M" + ); + } + if (temp >= 1e3) { + return withPrefix( + (temp / 1e3).toLocaleString("en-US", { + maximumFractionDigits: 2, + minimumFractionDigits: 2, + }) + "K" + ); + } + return withPrefix(Number.isInteger(price) ? `${Number(price)}` : Number(price).toLocaleString("en-US", { + maximumFractionDigits: maximumFractionDigits ?? 2, + minimumFractionDigits: minimumFractionDigits ?? 2, + })); +}; + export const formatUsdNumber = ( price: string, maximumFractionDigits?: number, @@ -91,3 +149,17 @@ export const formatUsdNumber = ( } return `$${func(price, maximumFractionDigits)}`; }; + +export function convertLiquidityUsdValue(value: number) { + if(Number.isNaN(value)) return "-"; + + const valueInNumber = Number(value); + + if(valueInNumber === 0) return "$0"; + + if(valueInNumber > 0 && valueInNumber < 0.01) return "<$0.01"; + + return "$" + BigNumber(value).toFormat(2); +} + + From 6e53637208976f4b90e153fc23fbe0650dbffac4 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Wed, 24 Apr 2024 17:00:53 +0700 Subject: [PATCH 2/3] resolve git comment --- .../RemoveLiquiditySelectListItem.tsx | 14 +++++++++----- .../SelectLiquidityListItem.tsx | 14 +++++++++----- .../select-liquidity-item/SelectLiquidityItem.tsx | 14 +++++++++----- packages/web/src/utils/stake-position-utils.ts | 11 +++++++---- 4 files changed, 34 insertions(+), 19 deletions(-) diff --git a/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx b/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx index 278aef677..133a59ec4 100644 --- a/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx +++ b/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx @@ -13,6 +13,7 @@ import { useWindowSize } from "@hooks/common/use-window-size"; import { convertLiquidityUsdToKMB, convertLiquidityUsdValue } from "@utils/stake-position-utils"; import { TokenModel } from "@models/token/token-model"; import BigNumber from "bignumber.js"; +import styled from "@emotion/styled"; interface RemoveLiquiditySelectListItemProps { position: PoolPositionModel; @@ -26,26 +27,29 @@ interface TooltipProps { disabled: boolean; } +const TokenValueWrapper = styled.div``; +const TokenTitleWrapper = styled.div``; + const TooltipContent: React.FC = ({ position, disabled }) => { const renderTokenValue = (imgUri: string, tokeSymbol: string, token: TokenModel, tokenBalance: bigint ) => { const tokenBalanceByTokenDecimal = BigNumber(makeDisplayTokenAmount(token, tokenBalance) || 0).toFormat(); - return
+ return
token logo {tokeSymbol}
{tokenBalanceByTokenDecimal}
-
; + ; }; return (
-
+
Token ID
#{position.id}
-
+ {renderTokenValue( position.pool.tokenA.logoURI, position.pool.tokenA.symbol, @@ -89,7 +93,7 @@ const RemoveLiquiditySelectListItem: React.FC { - if (width < 400) return convertLiquidityUsdToKMB(position.positionUsdValue, undefined, undefined, "$"); + if (width < 400) return convertLiquidityUsdToKMB(position.positionUsdValue, { prefix: "$"}); return convertLiquidityUsdValue(Number(position.positionUsdValue)); }, [position.positionUsdValue, width]); diff --git a/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx b/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx index 6832c4125..22089c76e 100644 --- a/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx +++ b/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx @@ -9,6 +9,7 @@ import { useWindowSize } from "@hooks/common/use-window-size"; import { convertLiquidityUsdToKMB, convertLiquidityUsdValue } from "@utils/stake-position-utils"; import BigNumber from "bignumber.js"; import { TokenModel } from "@models/token/token-model"; +import styled from "@emotion/styled"; interface SelectLiquidityListItemProps { disabled?: boolean; @@ -17,26 +18,29 @@ interface SelectLiquidityListItemProps { onCheckedItem: (checked: boolean, path: string) => void; } +const TokenValueWrapper = styled.div``; +const TokenTitleWrapper = styled.div``; + const TooltipContent: React.FC<{ position: PoolPositionModel, disabled: boolean }> = ({ position, disabled }) => { const renderTokenValue = (imgUri: string, tokeSymbol: string, token: TokenModel, tokenBalance: bigint ) => { const tokenBalanceByTokenDecimal = BigNumber(makeDisplayTokenAmount(token, tokenBalance) || 0).toFormat(); - return
+ return
token logo {tokeSymbol}
{tokenBalanceByTokenDecimal}
-
; + ; }; return (
-
+
Token ID
#{position.id}
-
+ {renderTokenValue( position.pool.tokenA.logoURI, position.pool.tokenA.symbol, @@ -80,7 +84,7 @@ const SelectLiquidityListItem: React.FC = ({ }, [position.pool.tokenB]); const liquidityUSD = useMemo(() => { - if (width < 400) return convertLiquidityUsdToKMB(position.positionUsdValue, undefined, undefined, "$"); + if (width < 400) return convertLiquidityUsdToKMB(position.positionUsdValue, { prefix: "$"}); return convertLiquidityUsdValue(Number(position.positionUsdValue)); }, [position.positionUsdValue, width]); diff --git a/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx b/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx index 19feea6fd..bdc9a413b 100644 --- a/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx +++ b/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx @@ -9,6 +9,7 @@ import { useWindowSize } from "@hooks/common/use-window-size"; import { convertLiquidityUsdToKMB, convertLiquidityUsdValue } from "@utils/stake-position-utils"; import BigNumber from "bignumber.js"; import { TokenModel } from "@models/token/token-model"; +import styled from "@emotion/styled"; interface SelectLiquidityItemProps { position: PoolPositionModel; @@ -17,26 +18,29 @@ interface SelectLiquidityItemProps { disabled?: boolean; } +const TokenValueWrapper = styled.div``; +const TokenTitleWrapper = styled.div``; + const TooltipContent: React.FC<{ position: PoolPositionModel }> = ({ position }) => { const renderTokenValue = (imgUri: string, tokeSymbol: string, token: TokenModel, tokenBalance: bigint ) => { const tokenBalanceByTokenDecimal = BigNumber(makeDisplayTokenAmount(token, tokenBalance) || 0).toFormat(); - return
+ return
token logo {tokeSymbol}
{tokenBalanceByTokenDecimal}
-
; + ; }; return (
-
+
Token ID
#{position.id}
-
+ {renderTokenValue( position.pool.tokenA.logoURI, position.pool.tokenA.symbol, @@ -74,7 +78,7 @@ const SelectLiquidityItem: React.FC = ({ }, [position.pool.tokenB]); const liquidityUSD = useMemo(() => { - if (width < 400) return convertLiquidityUsdToKMB(position.positionUsdValue, undefined, undefined, "$"); + if (width < 400) return convertLiquidityUsdToKMB(position.positionUsdValue, { prefix: "$"}); return convertLiquidityUsdValue(Number(position.positionUsdValue)); }, [position.positionUsdValue, width]); diff --git a/packages/web/src/utils/stake-position-utils.ts b/packages/web/src/utils/stake-position-utils.ts index d3b8fc996..c4de42e3d 100644 --- a/packages/web/src/utils/stake-position-utils.ts +++ b/packages/web/src/utils/stake-position-utils.ts @@ -84,10 +84,13 @@ export const convertToKMB = ( export const convertLiquidityUsdToKMB = ( price: string, - maximumFractionDigits?: number, - minimumFractionDigits?: number, - prefix?: string, -) => { + options?: { + maximumFractionDigits?: number, + minimumFractionDigits?: number, + prefix?: string, + }) => { + const { prefix, maximumFractionDigits, minimumFractionDigits } = options ?? {}; + function withPrefix(value: string) { if(prefix) return prefix + value; From a99670d9faca39b1ee7bd5cf8ad90da838522b83 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Wed, 24 Apr 2024 17:54:24 +0700 Subject: [PATCH 3/3] resolve git comment --- .../RemoveLiquiditySelectListItem.styles.ts | 11 +++++++++-- .../RemoveLiquiditySelectListItem.tsx | 6 ++---- .../SelectLiquidityListItem.styles.ts | 10 ++++++++++ .../SelectLiquidityListItem.tsx | 6 ++---- .../SelectLiquidityItem.styles.ts | 10 ++++++++++ .../select-liquidity-item/SelectLiquidityItem.tsx | 6 +----- 6 files changed, 34 insertions(+), 15 deletions(-) diff --git a/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.styles.ts b/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.styles.ts index 29bb4966e..c2ea64cdd 100644 --- a/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.styles.ts +++ b/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.styles.ts @@ -79,8 +79,6 @@ export const TooltipWrapperContent = styled.div` &:not(:first-of-type) { padding: 4px 0; } - width: 100%; - ${mixins.flexbox("column", "center", "space-between")}; .title { color: ${({ theme }) => theme.color.text04}; } @@ -106,4 +104,13 @@ export const TooltipWrapperContent = styled.div` text-align: left; align-items: start; } +`; + +export const TokenValueWrapper = styled.div` + ${mixins.flexbox("row", "center", "space-between")}; + width: 100%; +`; +export const TokenTitleWrapper = styled.div` + ${mixins.flexbox("row", "center", "space-between")}; + width: 100%; `; \ No newline at end of file diff --git a/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx b/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx index 133a59ec4..f81169fcf 100644 --- a/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx +++ b/packages/web/src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx @@ -1,7 +1,7 @@ import DoubleLogo from "@components/common/double-logo/DoubleLogo"; import Tooltip from "@components/common/tooltip/Tooltip"; import React, { useMemo } from "react"; -import { RemoveLiquiditySelectListItemWrapper, TooltipWrapperContent } from "./RemoveLiquiditySelectListItem.styles"; +import { RemoveLiquiditySelectListItemWrapper, TokenTitleWrapper, TokenValueWrapper, TooltipWrapperContent } from "./RemoveLiquiditySelectListItem.styles"; import Badge, { BADGE_TYPE } from "@components/common/badge/Badge"; // import { convertToMB } from "@utils/stake-position-utils"; import { PoolPositionModel } from "@models/position/pool-position-model"; @@ -13,7 +13,6 @@ import { useWindowSize } from "@hooks/common/use-window-size"; import { convertLiquidityUsdToKMB, convertLiquidityUsdValue } from "@utils/stake-position-utils"; import { TokenModel } from "@models/token/token-model"; import BigNumber from "bignumber.js"; -import styled from "@emotion/styled"; interface RemoveLiquiditySelectListItemProps { position: PoolPositionModel; @@ -27,8 +26,7 @@ interface TooltipProps { disabled: boolean; } -const TokenValueWrapper = styled.div``; -const TokenTitleWrapper = styled.div``; + const TooltipContent: React.FC = ({ position, disabled }) => { const renderTokenValue = (imgUri: string, tokeSymbol: string, token: TokenModel, tokenBalance: bigint ) => { diff --git a/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.styles.ts b/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.styles.ts index 222bae964..61a506489 100644 --- a/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.styles.ts +++ b/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.styles.ts @@ -3,6 +3,7 @@ import { css, type Theme } from "@emotion/react"; import mixins from "@styles/mixins"; import { media } from "@styles/media"; import { inputStyle } from "@components/stake/stake-position/StakePosition.styles"; +import styled from "@emotion/styled"; export const wrapper = (checked: boolean) => (theme: Theme) => css` @@ -103,4 +104,13 @@ export const tooltipWrapper = () => (theme: Theme) => padding: 0 !important; ${fonts.p4} } +`; + +export const TokenValueWrapper = styled.div` + ${mixins.flexbox("row", "center", "space-between")}; + width: 100%; +`; +export const TokenTitleWrapper = styled.div` + ${mixins.flexbox("row", "center", "space-between")}; + width: 100%; `; \ No newline at end of file diff --git a/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx b/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx index 22089c76e..2eb214df5 100644 --- a/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx +++ b/packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx @@ -4,12 +4,11 @@ import Tooltip from "@components/common/tooltip/Tooltip"; import { PoolPositionModel } from "@models/position/pool-position-model"; import { makeDisplayTokenAmount } from "@utils/token-utils"; import React, { useMemo } from "react"; -import { tooltipWrapper, wrapper } from "./SelectLiquidityListItem.styles"; +import { TokenTitleWrapper, TokenValueWrapper, tooltipWrapper, wrapper } from "./SelectLiquidityListItem.styles"; import { useWindowSize } from "@hooks/common/use-window-size"; import { convertLiquidityUsdToKMB, convertLiquidityUsdValue } from "@utils/stake-position-utils"; import BigNumber from "bignumber.js"; import { TokenModel } from "@models/token/token-model"; -import styled from "@emotion/styled"; interface SelectLiquidityListItemProps { disabled?: boolean; @@ -18,8 +17,7 @@ interface SelectLiquidityListItemProps { onCheckedItem: (checked: boolean, path: string) => void; } -const TokenValueWrapper = styled.div``; -const TokenTitleWrapper = styled.div``; + const TooltipContent: React.FC<{ position: PoolPositionModel, disabled: boolean }> = ({ position, disabled }) => { const renderTokenValue = (imgUri: string, tokeSymbol: string, token: TokenModel, tokenBalance: bigint ) => { diff --git a/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.styles.ts b/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.styles.ts index 742763ecb..160ce1a3b 100644 --- a/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.styles.ts +++ b/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.styles.ts @@ -3,6 +3,7 @@ import { css, type Theme } from "@emotion/react"; import mixins from "@styles/mixins"; import { inputStyle } from "@components/unstake/unstake-liquidity/UnstakeLiquidity.styles"; import { media } from "@styles/media"; +import styled from "@emotion/styled"; export const wrapper = (checked: boolean) => (theme: Theme) => css` @@ -100,4 +101,13 @@ ${fonts.body12} } } } +`; + +export const TokenValueWrapper = styled.div` + ${mixins.flexbox("row", "center", "space-between")}; + width: 100%; +`; +export const TokenTitleWrapper = styled.div` + ${mixins.flexbox("row", "center", "space-between")}; + width: 100%; `; \ No newline at end of file diff --git a/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx b/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx index bdc9a413b..5d32a1a94 100644 --- a/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx +++ b/packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx @@ -4,12 +4,11 @@ import Tooltip from "@components/common/tooltip/Tooltip"; import { PoolPositionModel } from "@models/position/pool-position-model"; import { makeDisplayTokenAmount } from "@utils/token-utils"; import React, { useMemo } from "react"; -import { tooltipWrapper, wrapper } from "./SelectLiquidityItem.styles"; +import { TokenTitleWrapper, TokenValueWrapper, tooltipWrapper, wrapper } from "./SelectLiquidityItem.styles"; import { useWindowSize } from "@hooks/common/use-window-size"; import { convertLiquidityUsdToKMB, convertLiquidityUsdValue } from "@utils/stake-position-utils"; import BigNumber from "bignumber.js"; import { TokenModel } from "@models/token/token-model"; -import styled from "@emotion/styled"; interface SelectLiquidityItemProps { position: PoolPositionModel; @@ -18,9 +17,6 @@ interface SelectLiquidityItemProps { disabled?: boolean; } -const TokenValueWrapper = styled.div``; -const TokenTitleWrapper = styled.div``; - const TooltipContent: React.FC<{ position: PoolPositionModel }> = ({ position }) => { const renderTokenValue = (imgUri: string, tokeSymbol: string, token: TokenModel, tokenBalance: bigint ) => { const tokenBalanceByTokenDecimal = BigNumber(makeDisplayTokenAmount(token, tokenBalance) || 0).toFormat();