refactor: formatter usage, adapt balance units

OriginProtocol · Sep 13, 2023 · 234223b · 234223b
1 parent 2150d7c
commit 234223b
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 43 deletions.
diff --git a/.eslintcache b/.eslintcache
@@ -0,0 +1 @@
+[{"/home/tonio/Workspaces/Origin/origin-defi/libs/shared/utils/src/formatters.ts":"1"},{"size":1067,"mtime":1694612446615,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","suppressedMessages":"6","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"pshlvk","/home/tonio/Workspaces/Origin/origin-defi/libs/shared/utils/src/formatters.ts",[],[]]
diff --git a/libs/oeth/history/src/components/APYContainer.tsx b/libs/oeth/history/src/components/APYContainer.tsx
@@ -1,7 +1,8 @@
 import { Divider, Stack, Typography } from '@mui/material';
-import { valueFormat } from '@origin/shared/components';
+import { valueFormat } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount } from 'wagmi';
+
 import { useHistoryTableQuery } from '../queries.generated';
 
 export function APYContainer() {

diff --git a/libs/oeth/history/src/components/HistoryTable.tsx b/libs/oeth/history/src/components/HistoryTable.tsx
@@ -2,15 +2,15 @@ import { useMemo } from 'react';
 
 import {
   Box,
-  Button,
   Stack,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
 } from '@mui/material';
-import { LinkIcon, quantityFormat } from '@origin/shared/components';
+import { LinkIcon } from '@origin/shared/components';
+import { quantityFormat } from '@origin/shared/utils';
 import {
   createColumnHelper,
   flexRender,
@@ -19,11 +19,11 @@ import {
 } from '@tanstack/react-table';
 import { useIntl } from 'react-intl';
 
-import type { HistoryTableQuery } from '../queries.generated';
-import usePagination from '@mui/material/usePagination/usePagination';
 import { HistoryFilterButton } from './HistoryButton';
 import { HistoryCell } from './HistoryCell';
 
+import type { HistoryTableQuery } from '../queries.generated';
+
 export type Rows = HistoryTableQuery['addressById']['history'];
 
 interface Props {

diff --git a/libs/oeth/swap/src/components/SwapRouteAccordionItem.tsx b/libs/oeth/swap/src/components/SwapRouteAccordionItem.tsx
@@ -1,7 +1,7 @@
 import { alpha, Box, Stack, Typography } from '@mui/material';
-import { currencyFormat, quantityFormat } from '@origin/shared/components';
 import { tokens } from '@origin/shared/contracts';
 import { usePrices } from '@origin/shared/providers';
+import { currencyFormat, quantityFormat } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { formatUnits } from 'viem';
 

diff --git a/libs/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx
@@ -1,7 +1,7 @@
 import { alpha, Box, Card, CardHeader, Stack, Typography } from '@mui/material';
-import { currencyFormat, quantityFormat } from '@origin/shared/components';
 import { tokens } from '@origin/shared/contracts';
 import { usePrices } from '@origin/shared/providers';
+import { currencyFormat, quantityFormat } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { formatUnits } from 'viem';
 

diff --git a/libs/oeth/swap/src/components/TokenSelectModal.tsx b/libs/oeth/swap/src/components/TokenSelectModal.tsx
@@ -8,6 +8,7 @@ import {
   Typography,
 } from '@mui/material';
 import { usePrices } from '@origin/shared/providers';
+import { currencyFormat, formatAmount } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount, useBalance } from 'wagmi';
 
@@ -141,18 +142,11 @@ function TokenListItem({ token, ...rest }: TokenListItemProps) {
           {isBalanceLoading ? (
             <Skeleton width={30} />
           ) : (
-            intl.formatNumber(bal, {
-              minimumFractionDigits: 0,
-              maximumFractionDigits: 4,
-            })
+            formatAmount(balance.value, balance.decimals)
           )}
         </Typography>
         <Typography color="text.secondary" variant="body2">
-          {intl.formatNumber(balUsd, {
-            style: 'currency',
-            currency: 'USD',
-            minimumFractionDigits: 2,
-          })}
+          {intl.formatNumber(balUsd, currencyFormat)}
         </Typography>
       </Box>
     </MenuItem>

diff --git a/libs/shared/components/src/Cards/SwapCard/Input.tsx b/libs/shared/components/src/Cards/SwapCard/Input.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
 
 import { alpha, Box, InputBase, Stack, Typography } from '@mui/material';
+import { currencyFormat } from '@origin/shared/utils';
 import { useDebouncedEffect } from '@react-hookz/web';
 import { useIntl } from 'react-intl';
 
 import { Loader } from '../../Loader';
 import { cardStyles } from '../Card';
-import { currencyFormat } from './SwapCard';
 import { SwapItem } from './SwapItem';
 import { styles } from './utils';
 

diff --git a/libs/shared/components/src/Cards/SwapCard/Output.tsx b/libs/shared/components/src/Cards/SwapCard/Output.tsx
@@ -1,9 +1,9 @@
 import { alpha, Box, Typography } from '@mui/material';
+import { currencyFormat, valueFormat } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 
 import { Loader } from '../../Loader';
 import { cardStyles } from '../Card';
-import { currencyFormat, valueFormat } from './SwapCard';
 import { SwapItem } from './SwapItem';
 import { styles } from './utils';
 

diff --git a/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx b/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx
@@ -7,21 +7,6 @@ import { Input } from './Input';
 import { Output } from './Output';
 import { SwapButton } from './SwapButton';
 
-import type { FormatNumberOptions } from 'react-intl';
-
-export const valueFormat: FormatNumberOptions = {
-  minimumFractionDigits: 2,
-};
-export const currencyFormat: FormatNumberOptions = {
-  style: 'currency',
-  currency: 'USD',
-  minimumFractionDigits: 2,
-};
-export const quantityFormat: FormatNumberOptions = {
-  minimumFractionDigits: 0,
-  maximumFractionDigits: 4,
-};
-
 interface Props {
   title: string | React.ReactNode;
   baseTokenName: string;

diff --git a/libs/shared/components/src/Cards/SwapCard/TokenListItem.tsx b/libs/shared/components/src/Cards/SwapCard/TokenListItem.tsx
@@ -1,8 +1,8 @@
 import { Box, MenuItem, Stack, Typography } from '@mui/material';
+import { currencyFormat, quantityFormat } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 
 import { Mix } from '../../Mix';
-import { currencyFormat, quantityFormat } from './SwapCard';
 
 import type { Option } from './TokenListModal';
 

diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx
@@ -1,10 +1,10 @@
 import { forwardRef } from 'react';
 
 import { alpha, Box, IconButton, Stack, Typography } from '@mui/material';
+import { formatAmount } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { formatUnits } from 'viem';
 
-import { currencyFormat } from '../Cards';
 import { Loader } from '../Loader';
 import { BigIntInput } from './BigIntInput';
 
@@ -60,13 +60,6 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
   ) => {
     const intl = useIntl();
 
-    // const handleMaxClick = () => {
-    //   if (onAmountChange) {
-    //     onAmountChange(balance);
-    //   }
-    // };
-
-    const bal = +formatUnits(balance, decimals);
     const amountUsd = +formatUnits(amount, decimals) * tokenPriceUsd;
 
     return (
@@ -127,7 +120,7 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
                 {intl.formatMessage(
                   { defaultMessage: 'Balance: {number}' },
                   {
-                    number: intl.formatNumber(bal || 0, currencyFormat),
+                    number: formatAmount(balance, decimals),
                   },
                 )}
               </Typography>