Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: usd format on position list #323

Merged
merged 3 commits into from
Apr 24, 2024
Merged

refactor: usd format on position list #323

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7db037e
refactor: usd format on position list
phucvarmeta Apr 17, 2024
6e53637
resolve git comment
phucvarmeta Apr 24, 2024
a99670d
resolve git comment
phucvarmeta Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/swap-router/.ultra.cache.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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":{}}
{"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":{}}
47 changes: 29 additions & 18 deletions ...src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -27,27 +27,37 @@ interface TooltipProps {
}

const TooltipContent: React.FC<TooltipProps> = ({ position, disabled }) => {
const renderTokenValue = (imgUri: string, tokeSymbol: string, token: TokenModel, tokenBalance: bigint ) => {
const tokenBalanceByTokenDecimal = BigNumber(makeDisplayTokenAmount(token, tokenBalance) || 0).toFormat();

return <div>
<div className="value">
<img src={imgUri} alt="token logo" />
{tokeSymbol}
</div>
<div className="value">{tokenBalanceByTokenDecimal}</div>
</div>;
};

return (
<TooltipWrapperContent>
<div css={tooltipWrapper()}>
<div>
<div className="title">Token ID</div>
<div className="title">#{position.id}</div>
</div>
<div>
<div className="value">
<img src={position.pool.tokenA.logoURI} alt="token logo" />
{position.pool.tokenA.symbol}
</div>
<div className="value">{BigNumber(makeDisplayTokenAmount(position.pool.tokenA, position.token0Balance) || 0).toFormat(2)}</div>
</div>
<div>
<div className="value">
<img src={position.pool.tokenB.logoURI} alt="token logo" />
{position.pool.tokenB.symbol}
</div>
<div className="value">{BigNumber(makeDisplayTokenAmount(position.pool.tokenB, position.token1Balance) || 0).toFormat(2)}</div>
</div>
{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,
)}
</div>
{disabled && <div className="divider"></div>}
{disabled && (
Expand Down Expand Up @@ -79,8 +89,9 @@ const RemoveLiquiditySelectListItem: React.FC<RemoveLiquiditySelectListItemProps
}, [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]);

const feeStr = useMemo(() => {
Expand Down
48 changes: 30 additions & 18 deletions packages/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 <div>
<div className="value">
<img src={imgUri} alt="token logo" />
{tokeSymbol}
</div>
<div className="value">{tokenBalanceByTokenDecimal}</div>
</div>;
};


return (
<div css={tooltipWrapper()}>
<div>
<div className="title">Token ID</div>
<div className="title">#{position.id}</div>
</div>
<div>
<div className="value">
<img src={position.pool.tokenA.logoURI} />
{position.pool.tokenA.symbol}
</div>
<div className="value">{BigNumber(makeDisplayTokenAmount(position.pool.tokenA, position.token0Balance) || 0).toFormat(2)}</div>
</div>
<div>
<div className="value">
<img src={position.pool.tokenB.logoURI} />
{position.pool.tokenB.symbol}
</div>
<div className="value">{BigNumber(makeDisplayTokenAmount(position.pool.tokenB, position.token1Balance) || 0).toFormat(2)}</div>
</div>
{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 && <div className="divider"></div>}
{disabled && (
<div className="unstake-description">
Expand Down Expand Up @@ -69,8 +80,9 @@ const SelectLiquidityListItem: React.FC<SelectLiquidityListItemProps> = ({
}, [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 (
Expand Down
48 changes: 30 additions & 18 deletions packages/web/src/components/unstake/select-liquidity-item/SelectLiquidityItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 <div>
<div className="value">
<img src={imgUri} alt="token logo" />
{tokeSymbol}
</div>
<div className="value">{tokenBalanceByTokenDecimal}</div>
</div>;
};


return (
<div css={tooltipWrapper()}>
<div>
<div className="title">Token ID</div>
<div className="title">#{position.id}</div>
</div>
<div>
<div className="value">
<img src={position.pool.tokenA.logoURI} />
{position.pool.tokenA.symbol}
</div>
<div className="value">{BigNumber(makeDisplayTokenAmount(position.pool.tokenA, position.token0Balance) || 0).toFormat(2)}</div>
</div>
<div>
<div className="value">
<img src={position.pool.tokenB.logoURI} />
{position.pool.tokenB.symbol}
</div>
<div className="value">{BigNumber(makeDisplayTokenAmount(position.pool.tokenB, position.token1Balance) || 0).toFormat(2)}</div>
</div>
{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,
)}
</div>
);
};
Expand All @@ -63,8 +74,9 @@ const SelectLiquidityItem: React.FC<SelectLiquidityItemProps> = ({
}, [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 (
Expand Down
72 changes: 72 additions & 0 deletions packages/web/src/utils/stake-position-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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,
Expand All @@ -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);
}


Loading