fix: improve formatting, add max handler

lifinance · Feb 22, 2022 · 45b12f8 · 45b12f8
1 parent 07e5d69
commit 45b12f8
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -14,12 +14,13 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.2.1",
+    "@types/big.js": "^6.1.3",
     "@types/node": "^17.0.18",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.12.0",
-    "@typescript-eslint/parser": "^5.12.0",
+    "@typescript-eslint/eslint-plugin": "^5.12.1",
+    "@typescript-eslint/parser": "^5.12.1",
     "eslint": "^8.9.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.4.0",

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -11,8 +11,8 @@
     "@ethersproject/providers": "^5.5.3",
     "@lifinance/sdk": "^0.4.5",
     "@mui/icons-material": "^5.4.2",
-    "@mui/lab": "^5.0.0-alpha.69",
-    "@mui/material": "^5.4.2",
+    "@mui/lab": "^5.0.0-alpha.70",
+    "@mui/material": "^5.4.3",
     "@web3-react/core": "^8.0.10-beta.0",
     "@web3-react/eip1193": "^8.0.5-beta.0",
     "@web3-react/empty": "^8.0.3-beta.0",
@@ -22,12 +22,12 @@
     "@web3-react/url": "^8.0.5-beta.0",
     "@web3-react/walletconnect": "^8.0.8-beta.0",
     "@web3-react/walletlink": "^8.0.10-beta.0",
-    "bignumber.js": "^9.0.2",
+    "big.js": "^6.1.1",
     "i18next": "^21.6.11",
     "react": "^18.0.0-rc.0",
     "react-dom": "^18.0.0-rc.0",
     "react-hook-form": "^7.27.1",
-    "react-i18next": "^11.15.4",
+    "react-i18next": "^11.15.5",
     "react-query": "^3.34.16",
     "react-resize-detector": "^7.0.0",
     "react-router-dom": "^6.2.1",

diff --git a/packages/widget/src/components/SettingsDrawer/SlippageInput.tsx b/packages/widget/src/components/SettingsDrawer/SlippageInput.tsx
@@ -22,7 +22,6 @@ export const SlippageInput = () => {
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const { value } = event.target;
-    console.log(formatSlippage(value, defaultValue.current));
     setValue(
       SwapFormKey.Slippage,
       formatSlippage(value, defaultValue.current, true),
@@ -33,7 +32,6 @@ export const SlippageInput = () => {
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const { value } = event.target;
-    console.log(formatSlippage(value, defaultValue.current));
     setValue(SwapFormKey.Slippage, formatSlippage(value, defaultValue.current));
   };
 

diff --git a/packages/widget/src/components/SwapInput/SwapInput.tsx b/packages/widget/src/components/SwapInput/SwapInput.tsx
@@ -6,7 +6,7 @@ import {
   SwapFormKeyHelper,
   SwapFormTypeProps,
 } from '../../providers/SwapFormProvider';
-import { formatAmount, formatTokenAmount } from '../../utils/format';
+import { formatAmount } from '../../utils/format';
 import { SwapInputAdornment } from '../SwapInputAdornment';
 import { Input } from './SwapInput.style';
 
@@ -25,7 +25,6 @@ export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
   useEffect(() => {
     register(amountKey, { required: true });
   }, [amountKey, register]);
-  console.log(formatTokenAmount('5'));
 
   const handleChange = (
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,

diff --git a/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.style.tsx b/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.style.tsx
@@ -10,7 +10,7 @@ export const SwapPriceTypography = styled(Typography)(({ theme }) => ({
 
 export const SwapMaxAmountTypography = styled(Typography)({
   textDecoration: 'underline',
-  marginRight: 8,
+  padding: '4px 8px 4px 0',
   '&:hover': {
     cursor: 'pointer',
   },

diff --git a/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.tsx b/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.tsx
@@ -1,6 +1,6 @@
 import { InputAdornment, Skeleton, Typography } from '@mui/material';
 import { useMemo } from 'react';
-import { useWatch } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useTokenBalance } from '../../hooks/useTokenBalance';
 import {
@@ -17,13 +17,14 @@ export const SwapInputAdornment: React.FC<SwapFormTypeProps> = ({
   formType,
 }) => {
   const { t } = useTranslation();
+  const { setValue } = useFormContext();
   const [chainKey, tokenAddress] = useWatch({
     name: [
       SwapFormKeyHelper.getChainKey(formType),
       SwapFormKeyHelper.getTokenKey(formType),
     ],
   });
-  const { token, tokenWithBalance, isFetching } = useTokenBalance(
+  const { token, tokenWithBalance, isLoading } = useTokenBalance(
     chainKey,
     tokenAddress,
   );
@@ -34,9 +35,13 @@ export const SwapInputAdornment: React.FC<SwapFormTypeProps> = ({
     [tokenWithBalance],
   );
 
+  const handleMax = () => {
+    setValue(SwapFormKeyHelper.getAmountKey(formType), amount);
+  };
+
   return (
     <InputAdornment position="end">
-      {isFetching ? (
+      {isLoading ? (
         <Skeleton
           variant="rectangular"
           width={formType === 'from' ? 160 : 96}
@@ -47,10 +52,18 @@ export const SwapInputAdornment: React.FC<SwapFormTypeProps> = ({
         <>
           {formType === 'from' && token && amount ? (
             <>
-              <SwapMaxAmountTypography variant="body2" color="text.primary">
+              <SwapMaxAmountTypography
+                variant="body2"
+                color="text.primary"
+                onClick={handleMax}
+              >
                 {t(`swap.max`)}
               </SwapMaxAmountTypography>
-              <Typography variant="body2" color="text.secondary">
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                data-amount={tokenWithBalance?.amount}
+              >
                 {t(`swap.maxAmount`, {
                   amount,
                 })}

diff --git a/packages/widget/src/hooks/useTokenBalance.ts b/packages/widget/src/hooks/useTokenBalance.ts
@@ -7,7 +7,7 @@ export const useTokenBalance = (chainKey: ChainKey, tokenAddress: string) => {
   const account = usePriorityAccount();
   const { token } = useToken(chainKey, tokenAddress);
 
-  const { data: tokenWithBalance, isFetching } = useQuery(
+  const { data: tokenWithBalance, isLoading } = useQuery(
     ['token', token?.symbol, account],
     async ({ queryKey: [_, tokenSymbol, account] }) => {
       if (!account || !token) {
@@ -27,6 +27,6 @@ export const useTokenBalance = (chainKey: ChainKey, tokenAddress: string) => {
   return {
     token,
     tokenWithBalance,
-    isFetching,
+    isLoading,
   };
 };
diff --git a/packages/widget/src/utils/format.ts b/packages/widget/src/utils/format.ts
@@ -1,3 +1,15 @@
+import Big from 'big.js';
+
+// JavaScript numbers use exponential notation for positive exponents of 21 and above.
+Big.PE = 21;
+// JavaScript numbers use exponential notation for negative exponents of -7 and below. We need more.
+Big.NE = -21;
+
+/**
+ * Format token amount to at least 4 decimals.
+ * @param amount amount to format.
+ * @returns formatted amount.
+ */
 export const formatTokenAmount = (amount: string = '0') => {
   const parsedAmount = parseFloat(amount);
   if (parsedAmount === 0 || isNaN(Number(amount))) {
@@ -6,15 +18,13 @@ export const formatTokenAmount = (amount: string = '0') => {
 
   let decimalPlaces = 3;
   const absAmount = Math.abs(parsedAmount);
-  while (
-    absAmount < 0.1 ** decimalPlaces ||
-    // to avoid showing greater than actual amount after round up
-    parseFloat(parsedAmount.toFixed(decimalPlaces + 1)) > parsedAmount
-  ) {
+  while (absAmount < 1 / 10 ** decimalPlaces) {
     decimalPlaces++;
   }
 
-  return parsedAmount.toFixed(decimalPlaces + 1);
+  return Big(
+    parseFloat(Big(parsedAmount).toFixed(decimalPlaces + 1, 0)),
+  ).toString();
 };
 
 export const formatSlippage = (
@@ -44,7 +54,6 @@ export const formatSlippage = (
   return parsedSlippage.toString();
 };
 
-// TODO: improve exp handling
 export const formatAmount = (
   amount: string = '',
   returnInitial: boolean = false,
@@ -65,5 +74,5 @@ export const formatAmount = (
   if (returnInitial) {
     return amount;
   }
-  return parsedAmount.toString();
+  return Big(parsedAmount).toString();
 };