Fix number overflow in max button

libs/moloch-v3-fields/src/fields/RequestERC20.tsx

@@ -2,10 +2,10 @@ import { useEffect, useMemo } from 'react';
 import { RegisterOptions, useFormContext } from 'react-hook-form';
 
 import {
-  formatValueTo,
   handleBaseUnits,
   ignoreEmptyVal,
   toWholeUnits,
+  truncValue,
   ValidateField,
 } from '@daohaus/utils';
 import { isValidNetwork } from '@daohaus/keychain-utils';
@@ -74,17 +74,21 @@ export const RequestERC20 = (
     return erc20s.find(({ address }) => address === paymentTokenAddr);
   }, [paymentTokenAddr, erc20s]);
 
-  const tokenBalance = selectedToken?.daoBalance
-    ? formatValueTo({
-        value: toWholeUnits(selectedToken?.daoBalance, selectedToken?.decimals),
-        decimals: 6,
-        format: 'number',
-      })
-    : '0';
+  const displayBalance = useMemo(() => {
+    if (!selectedToken || BigInt(selectedToken.daoBalance) === BigInt(0))
+      return '0';
+    return truncValue(
+      toWholeUnits(selectedToken.daoBalance, selectedToken.decimals),
+      6
+    );
+  }, [selectedToken]);
 
   const setMax = () => {
     if (!selectedToken) return;
-    setValue(amtId, tokenBalance.trim());
+    setValue(
+      amtId,
+      toWholeUnits(selectedToken?.daoBalance || '0', selectedToken?.decimals)
+    );
   };
 
   const newRules: RegisterOptions = {
@@ -116,7 +120,7 @@ export const RequestERC20 = (
       options={selectOptions || []}
       rightAddon={
         <Button color="secondary" size="sm" onClick={setMax}>
-          Max: {tokenBalance}
+          Max: {displayBalance}
         </Button>
       }
       rules={newRules}

libs/moloch-v3-fields/src/fields/RequestNativeToken.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { RegisterOptions, useFormContext } from 'react-hook-form';
 
-import { toWholeUnits, handleBaseUnits } from '@daohaus/utils';
+import { handleBaseUnits, toWholeUnits, truncValue } from '@daohaus/utils';
 import { Buildable, Button, WrappedInput } from '@daohaus/ui';
 import { isValidNetwork } from '@daohaus/keychain-utils';
 import { useDaoData, useCurrentDao } from '@daohaus/moloch-v3-hooks';
@@ -29,6 +29,15 @@ export const RequestNativeToken = (
     return getNetworkToken(dao, daoChain, safeAddress);
   }, [dao, daoChain, safeAddress]);
 
+  const displayBalance = useMemo(() => {
+    if (!networkTokenData || BigInt(networkTokenData.daoBalance) === BigInt(0))
+      return '0';
+    return truncValue(
+      toWholeUnits(networkTokenData.daoBalance, networkTokenData.decimals),
+      6
+    );
+  }, [networkTokenData]);
+
   const label = networkTokenData?.name
     ? `Request ${networkTokenData.name}`
     : `Request Network Token`;
@@ -56,11 +65,7 @@ export const RequestNativeToken = (
       defaultValue="0"
       rightAddon={
         <Button color="secondary" size="sm" onClick={setMax}>
-          Max:{' '}
-          {toWholeUnits(
-            networkTokenData?.daoBalance || '0',
-            networkTokenData?.decimals
-          )}
+          Max: {displayBalance}
         </Button>
       }
       rules={newRules}

libs/utils/src/utils/units.ts

@@ -9,6 +9,10 @@ export const toBaseUnits = (amount: string, decimals = 18) =>
 export const toWholeUnits = (amount: string, decimals = 18) =>
   formatUnits(BigInt(amount), decimals).toString();
 
+export const truncValue = (amount: string, decimals = 6) =>
+  // wrapped again into Number to strip any trailing zeroes
+  Number(Number(amount).toFixed(decimals));
+
 type NumericalFormat =
   | 'currency'
   | 'currencyShort'