feat: create new number/date formatters (#217)

* feat: create new number/date formatters - created `formatDateRange` - created `CurrencyFormatter` - created `PercentageFormatter` - created `OverflowTooltip` to display a tooltip when the text overflows - created `AssetValueFormatter` - and more... * fix: show tooltip content without rounding * fix: wrap the text in the tooltip * refactor: use nullish coalescing operator
dezswap · Feb 19, 2024 · 4ac3137 · 4ac3137
1 parent 65eee1e
commit 4ac3137
Show file tree

Hide file tree

Showing 35 changed files with 654 additions and 453 deletions.
diff --git a/src/components/Breadcrumb/index.tsx b/src/components/Breadcrumb/index.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import HoverUnderline from "components/HoverUnderline";
+import HoverUnderline from "components/utils/HoverUnderline";
 import Typography from "components/Typography";
 import { Link, LinkProps } from "react-router-dom";
 

diff --git a/src/components/DashboardPoolTable/MobilePoolItem.tsx b/src/components/DashboardPoolTable/MobilePoolItem.tsx
@@ -2,7 +2,7 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Numeric } from "@xpla/xpla.js";
 import AssetIcon from "components/AssetIcon";
-import HoverUnderline from "components/HoverUnderline";
+import HoverUnderline from "components/utils/HoverUnderline";
 import Typography from "components/Typography";
 import useAssets from "hooks/useAssets";
 import useModal from "hooks/useModal";
@@ -12,7 +12,8 @@ import React, { useMemo } from "react";
 import { Row, Col } from "react-grid-system";
 import { Link } from "react-router-dom";
 import { DashboardPool } from "types/dashboard-api";
-import { formatCurrency, formatPercentage } from "utils";
+import CurrencyFormatter from "components/utils/CurrencyFormatter";
+import PercentageFormatter from "components/utils/PercentageFormatter";
 
 interface MobilePoolItemProps {
   pool: DashboardPool;
@@ -135,26 +136,33 @@ function MobilePoolItem({ pool, number }: MobilePoolItemProps) {
           {expand.isOpen && (
             <div>
               <Label>TVL</Label>
-              <Value>{formatCurrency(pool.tvl)}</Value>
+              <Value>
+                <CurrencyFormatter value={pool.tvl} />
+              </Value>
             </div>
           )}
           <div>
             <Label>Volume 24H</Label>
-            <Value>{formatCurrency(pool.volume)}</Value>
+            <Value>
+              <CurrencyFormatter value={pool.volume} />
+            </Value>
           </div>
         </Content>
       }
     >
       <Content>
         <div>
           <Label>Fees 24H</Label>
-          <Value>{formatCurrency(pool.fee)}</Value>
+          <Value>
+            <CurrencyFormatter value={pool.fee} />
+          </Value>
         </div>
         <div>
           <Label>APR 7D</Label>
           <Value>
-            {!Number.isNaN(Number(pool.apr)) &&
-              formatPercentage(Numeric.parse(pool.apr).mul(100))}
+            {!Number.isNaN(Number(pool.apr)) && (
+              <PercentageFormatter value={Numeric.parse(pool.apr).mul(100)} />
+            )}
           </Value>
         </div>
       </Content>

diff --git a/src/components/DashboardPoolTable/index.tsx b/src/components/DashboardPoolTable/index.tsx
@@ -1,5 +1,5 @@
 import { css } from "@emotion/react";
-import HoverUnderline from "components/HoverUnderline";
+import HoverUnderline from "components/utils/HoverUnderline";
 import Input from "components/Input";
 import Pagination from "components/Pagination";
 import Panel from "components/Panel";
@@ -10,12 +10,13 @@ import useAssets from "hooks/useAssets";
 import { useEffect, useMemo, useState } from "react";
 import { Col, Row, useScreenClass } from "react-grid-system";
 import { DashboardPool } from "types/dashboard-api";
-import { formatCurrency, formatPercentage } from "utils";
 import { Numeric } from "@xpla/xpla.js";
 import { getBasicSortFunction } from "utils/table";
 import usePairs from "hooks/usePairs";
 import AssetIcon from "components/AssetIcon";
 import { Link } from "react-router-dom";
+import CurrencyFormatter from "components/utils/CurrencyFormatter";
+import PercentageFormatter from "components/utils/PercentageFormatter";
 import MobilePoolItem from "./MobilePoolItem";
 
 interface DashboardPoolTableProps {
@@ -235,7 +236,7 @@ function DashboardPoolTable({
               width: 220,
               hasSort: true,
               render(value) {
-                return value && formatCurrency(value);
+                return value && <CurrencyFormatter value={value} />;
               },
             },
             {
@@ -244,7 +245,7 @@ function DashboardPoolTable({
               width: 220,
               hasSort: true,
               render(value) {
-                return value && formatCurrency(value);
+                return value && <CurrencyFormatter value={value} />;
               },
             },
             {
@@ -253,7 +254,7 @@ function DashboardPoolTable({
               width: 220,
               hasSort: true,
               render(value) {
-                return value && formatCurrency(value);
+                return value && <CurrencyFormatter value={value} />;
               },
             },
             {
@@ -264,8 +265,11 @@ function DashboardPoolTable({
               render(value) {
                 return (
                   value &&
-                  !Number.isNaN(Number(value)) &&
-                  formatPercentage(Numeric.parse(value).mul(100))
+                  !Number.isNaN(Number(value)) && (
+                    <PercentageFormatter
+                      value={Numeric.parse(value).mul(100)}
+                    />
+                  )
                 );
               },
             },

diff --git a/src/components/DashboardTransactionTable/MobileTransactionItem.tsx b/src/components/DashboardTransactionTable/MobileTransactionItem.tsx
@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import HoverUnderline from "components/HoverUnderline";
+import HoverUnderline from "components/utils/HoverUnderline";
 import Typography from "components/Typography";
 import useAssets from "hooks/useAssets";
 import useModal from "hooks/useModal";
@@ -9,14 +9,13 @@ import Expand from "pages/Earn/Expand";
 import React, { useMemo } from "react";
 import { DashboardTransaction } from "types/dashboard-api";
 import {
-  amountToValue,
   ellipsisCenter,
-  formatCurrency,
-  formatNumber,
   getAddressLink,
   getFromNow,
   getTransactionLink,
 } from "utils";
+import CurrencyFormatter from "components/utils/CurrencyFormatter";
+import AssetValueFormatter from "components/utils/AssetValueFormatter";
 
 interface MobileTransactionItemProps {
   transaction: DashboardTransaction;
@@ -83,30 +82,26 @@ function MobileTransactionItem({ transaction }: MobileTransactionItemProps) {
             <>
               <div>
                 <Label>Total Value</Label>
-                <Value>{formatCurrency(transaction.totalValue)}</Value>
+                <Value>
+                  <CurrencyFormatter value={transaction.totalValue} />
+                </Value>
               </div>
               <div>
                 <Label>Token Amount</Label>
                 <Value>
-                  {formatNumber(
-                    amountToValue(
-                      `${transaction.asset0amount}`,
-                      asset0?.decimals,
-                    ) || "",
-                  )}
-                  &nbsp;{asset0?.symbol}
+                  <AssetValueFormatter
+                    asset={asset0}
+                    amount={transaction.asset0amount}
+                  />
                 </Value>
               </div>
               <div>
                 <Label>Token Amount</Label>
                 <Value>
-                  {formatNumber(
-                    amountToValue(
-                      `${transaction.asset1amount}`,
-                      asset1?.decimals,
-                    ) || "",
-                  )}
-                  &nbsp;{asset1?.symbol}
+                  <AssetValueFormatter
+                    asset={asset1}
+                    amount={transaction.asset1amount}
+                  />
                 </Value>
               </div>
               <div>

diff --git a/src/components/DashboardTransactionTable/index.tsx b/src/components/DashboardTransactionTable/index.tsx
@@ -1,5 +1,5 @@
 import { css } from "@emotion/react";
-import HoverUnderline from "components/HoverUnderline";
+import HoverUnderline from "components/utils/HoverUnderline";
 import Input from "components/Input";
 import Pagination from "components/Pagination";
 import Panel from "components/Panel";
@@ -14,15 +14,15 @@ import { useEffect, useMemo, useState } from "react";
 import { Col, Row, useScreenClass } from "react-grid-system";
 import { DashboardTransaction } from "types/dashboard-api";
 import {
-  amountToValue,
   ellipsisCenter,
-  formatCurrency,
-  formatNumber,
   getAddressLink,
   getFromNow,
   getTransactionLink,
 } from "utils";
 import { getBasicSortFunction } from "utils/table";
+import OverflowTooltip from "components/utils/OverflowTooltip";
+import CurrencyFormatter from "components/utils/CurrencyFormatter";
+import AssetValueFormatter from "components/utils/AssetValueFormatter";
 import MobileTransactionItem from "./MobileTransactionItem";
 
 interface DashboardTransactionTableProps {
@@ -224,16 +224,18 @@ function DashboardTransactionTable({ data }: DashboardTransactionTableProps) {
               },
               render(actionDisplay, row) {
                 return (
-                  <a
-                    href={getTransactionLink(row.hash, network.name)}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    css={css`
-                      white-space: nowrap;
-                    `}
-                  >
-                    <HoverUnderline>{actionDisplay}</HoverUnderline>
-                  </a>
+                  <OverflowTooltip content={actionDisplay}>
+                    <a
+                      href={getTransactionLink(row.hash, network.name)}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      css={css`
+                        white-space: nowrap;
+                      `}
+                    >
+                      <HoverUnderline>{actionDisplay}</HoverUnderline>
+                    </a>
+                  </OverflowTooltip>
                 );
               },
             },
@@ -243,7 +245,7 @@ function DashboardTransactionTable({ data }: DashboardTransactionTableProps) {
               width: 185,
               hasSort: true,
               render(value) {
-                return formatCurrency(`${value}`);
+                return value && <CurrencyFormatter value={value} />;
               },
             },
             {
@@ -253,9 +255,11 @@ function DashboardTransactionTable({ data }: DashboardTransactionTableProps) {
               hasSort: true,
               render(amount, row) {
                 const asset = getAsset(row.asset0);
-                return `${formatNumber(
-                  amountToValue(`${amount}`, asset?.decimals) || "",
-                )} ${asset?.symbol}`;
+                return (
+                  amount && (
+                    <AssetValueFormatter asset={asset} amount={amount} />
+                  )
+                );
               },
             },
             {
@@ -265,9 +269,11 @@ function DashboardTransactionTable({ data }: DashboardTransactionTableProps) {
               hasSort: true,
               render(amount, row) {
                 const asset = getAsset(row.asset1);
-                return `${formatNumber(
-                  amountToValue(`${amount}`, asset?.decimals) || "",
-                )} ${asset?.symbol}`;
+                return (
+                  amount && (
+                    <AssetValueFormatter asset={asset} amount={amount} />
+                  )
+                );
               },
             },
             {

diff --git a/src/components/SelectAssetForm/AssetItem.tsx b/src/components/SelectAssetForm/AssetItem.tsx
@@ -8,12 +8,13 @@ import useBalance from "hooks/useBalance";
 import useIsInViewport from "hooks/useIsInViewport";
 import { useRef } from "react";
 import { Token } from "types/api";
-import { formatNumber, cutDecimal, amountToValue, ellipsisCenter } from "utils";
+import { ellipsisCenter } from "utils";
 
 import iconToken from "assets/icons/icon-default-token.svg";
 import iconVerified from "assets/icons/icon-verified.svg";
 import iconBookmark from "assets/icons/icon-bookmark-default.svg";
 import iconBookmarkSelected from "assets/icons/icon-bookmark-selected.svg";
+import AssetValueFormatter from "components/utils/AssetValueFormatter";
 
 interface WrapperProps {
   selected?: boolean;
@@ -121,9 +122,7 @@ function Balance({ asset }: { asset?: Partial<Token> }) {
         padding-left: 10px;
       `}
     >
-      {formatNumber(
-        cutDecimal(amountToValue(balance || 0, asset?.decimals) || 0, 3),
-      )}
+      <AssetValueFormatter asset={asset} amount={balance} showSymbol={false} />
     </Typography>
   );
 }

diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
@@ -1,5 +1,5 @@
 import Tippy, { TippyProps } from "@tippyjs/react";
-import { useEffect } from "react";
+import { ComponentRef, forwardRef, useEffect } from "react";
 import SimpleBar from "simplebar";
 import { hideAll } from "tippy.js";
 
@@ -12,25 +12,34 @@ function handleScroll() {
   hideAll();
 }
 
-function Tooltip({ children, ...props }: TippyProps) {
-  useEffect(() => {
-    const simpleBar = SimpleBar.instances.get(document.body);
+const Tooltip = forwardRef<ComponentRef<typeof Tippy>, TippyProps>(
+  function Tooltip({ children, ...props }, ref) {
+    useEffect(() => {
+      const simpleBar = SimpleBar.instances.get(document.body);
 
-    window.addEventListener("scroll", handleScroll);
-    try {
-      simpleBar.getScrollElement().addEventListener("scroll", handleScroll);
-    } catch (error) {
-      console.log(error);
-    }
+      window.addEventListener("scroll", handleScroll);
+      try {
+        simpleBar.getScrollElement().addEventListener("scroll", handleScroll);
+      } catch (error) {
+        console.log(error);
+      }
 
-    // No need to remove event listener since the browser does not add duplicate event listeners
-  }, []);
+      // No need to remove event listener since the browser does not add duplicate event listeners
+    }, []);
 
-  return (
-    <Tippy maxWidth="250px" arrow {...props} theme="light-border" duration={0}>
-      {children}
-    </Tippy>
-  );
-}
+    return (
+      <Tippy
+        ref={ref}
+        maxWidth="250px"
+        arrow
+        {...props}
+        theme="light-border"
+        duration={0}
+      >
+        {children}
+      </Tippy>
+    );
+  },
+);
 
 export default Tooltip;