refactor: usd format on position list (#323)

* refactor: usd format on position list * resolve git comment * resolve git comment
gnoswap-labs · Apr 24, 2024 · 06560a9 · 06560a9
1 parent 81045bb
commit 06560a9
Show file tree

Hide file tree

Showing 7 changed files with 206 additions and 65 deletions.
diff --git a/...mponents/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.styles.ts b/...mponents/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%;
 `;
diff --git a/...src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx b/...src/components/remove/remove-liquidity-select-list-item/RemoveLiquiditySelectListItem.tsx
@@ -1,17 +1,17 @@
 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";
 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 {
@@ -26,28 +26,40 @@ interface TooltipProps {
   disabled: boolean;
 }
 
+
+
 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 <TokenValueWrapper>
+      <div className="value">
+        <img src={imgUri} alt="token logo" />
+        {tokeSymbol}
+      </div>
+      <div className="value">{tokenBalanceByTokenDecimal}</div>
+    </TokenValueWrapper>;
+  };
+
   return (
     <TooltipWrapperContent>
       <div css={tooltipWrapper()}>
-        <div>
+        <TokenTitleWrapper>
           <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>
+        </TokenTitleWrapper>
+        {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 && (
@@ -79,8 +91,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, { prefix: "$"});
+
+    return convertLiquidityUsdValue(Number(position.positionUsdValue));
   }, [position.positionUsdValue, width]);
 
   const feeStr = useMemo(() => {

diff --git a/...es/web/src/components/stake/select-lilquidity-list-item/SelectLiquidityListItem.styles.ts b/...es/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%;
 `;
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
@@ -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 { TokenTitleWrapper, TokenValueWrapper, 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;
@@ -17,27 +17,40 @@ interface SelectLiquidityListItemProps {
   onCheckedItem: (checked: boolean, path: string) => void;
 }
 
+
+
 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 <TokenValueWrapper>
+      <div className="value">
+        <img src={imgUri} alt="token logo" />
+        {tokeSymbol}
+      </div>
+      <div className="value">{tokenBalanceByTokenDecimal}</div>
+    </TokenValueWrapper>;
+  };
+
+
   return (
     <div css={tooltipWrapper()}>
-      <div>
+      <TokenTitleWrapper>
         <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>
+      </TokenTitleWrapper>
+      {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">
@@ -69,8 +82,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, { prefix: "$"});
+
+    return convertLiquidityUsdValue(Number(position.positionUsdValue));
   }, [position.positionUsdValue, width]);
 
   return (

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
@@ -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%;
 `;
diff --git 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 { TokenTitleWrapper, TokenValueWrapper, 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 <TokenValueWrapper>
+      <div className="value">
+        <img src={imgUri} alt="token logo" />
+        {tokeSymbol}
+      </div>
+      <div className="value">{tokenBalanceByTokenDecimal}</div>
+    </TokenValueWrapper>;
+  };
+
+
   return (
     <div css={tooltipWrapper()}>
-      <div>
+      <TokenTitleWrapper>
         <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>
+      </TokenTitleWrapper>
+      {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>
   );
 };
@@ -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, { prefix: "$"});
+
+    return convertLiquidityUsdValue(Number(position.positionUsdValue));
   }, [position.positionUsdValue, width]);
 
   return (