Humanize the minSend amount before displaying it

frontend/src/pages/AccountSend.vue

@@ -170,7 +170,7 @@ import useWalletStore from 'src/store/wallet';
 // --- Other ---
 import { txNotify } from 'src/utils/alerts';
 import { BigNumber, Contract, formatUnits, getAddress, MaxUint256, parseUnits, Zero } from 'src/utils/ethers';
-import { round } from 'src/utils/utils';
+import { round, humanizeMinSendAmount } from 'src/utils/utils';
 import { generatePaymentLink, parsePaymentLink } from 'src/utils/payment-links';
 import { Provider, TokenInfo } from 'components/models';
 import { ERC20_ABI } from 'src/utils/constants';
@@ -321,18 +321,20 @@ function useSendForm() {
 
   const getMinSendAmount = (tokenAddress: string): number => {
     const chainId = BigNumber.from(currentChain.value?.chainId).toNumber();
+    let minSend;
     if (isNativeToken(tokenAddress)) {
       const defaultNativeMinSend = getNativeTokenMinSendAmountFallback(chainId);
       const relayerMinSend = relayer.value?.nativeTokenMinSendAmount;
       const dynamicMinSend = relayerMinSend && Number(formatUnits(relayerMinSend, 18));
-      return dynamicMinSend || defaultNativeMinSend;
+      minSend = dynamicMinSend || defaultNativeMinSend;
     } else {
       const relayerTokenInfo = relayer.value?.tokens.filter(
         (token) => token.address === tokenAddress
       )[0];
       const relayerMinSend = relayerTokenInfo?.minSendAmount && Number(
         formatUnits(
-          parseUnits(relayerTokenInfo?.minSendAmount, 'wei')
+          parseUnits(relayerTokenInfo?.minSendAmount, 'wei'),
+          relayerTokenInfo.decimals
         )
       );
       const defaultTokenMinSend = getTokenMinSendAmountFallback(tokenAddress, chainId);
@@ -341,8 +343,10 @@ function useSendForm() {
       // would also have the benefit of making it fairly mechanical to add support for new
       // tokens.
       const globalFallbackAmount = 100;
-      return relayerMinSend || defaultTokenMinSend || globalFallbackAmount;
+      minSend = relayerMinSend || defaultTokenMinSend || globalFallbackAmount;
     }
+
+    return humanizeMinSendAmount(minSend);
   };
 
   function isValidTokenAmount(val: string | undefined) {

frontend/src/utils/utils.ts

@@ -28,6 +28,18 @@ export const round = (value: number | string, decimals = 2) => {
   });
 };
 
+/**
+ * @notice Rounds the minSend amount so that it is the appropriate level of precision for
+ * UX. This number is shown to the user *and* used in validation.
+ * @param minSend the amount to be rounded
+ * @returns number the number used to validate the user is sending enough
+ */
+export const humanizeMinSendAmount = (minSend: number): number => {
+  let precision = 2;
+  if (minSend < 10 && minSend > 1) precision = 1;
+  return Number(minSend.toPrecision(precision));
+}
+
 /**
  * @notice Rounds to appropriate human readable decimals for the token
  * @param amount the amount to be formatted

frontend/test/utils.test.ts

@@ -1,4 +1,8 @@
-import { humanizeTokenAmount, roundReceivableAmountAfterFees } from '../src/utils/utils';
+import {
+  humanizeTokenAmount,
+  humanizeMinSendAmount,
+  roundReceivableAmountAfterFees,
+} from '../src/utils/utils';
 import { parseUnits, parseEther } from '@ethersproject/units';
 
 const usdc = {
@@ -144,4 +148,22 @@ describe('Utilities', () => {
       expect(roundReceivableAmountAfterFees(finalAmount, fee, eth)).toEqual('292.05');
     });
   });
+  describe('humanizeMinSendAmount', () => {
+    const tests = [
+     {input: 123, output: 120},
+     {input: 1235, output: 1200},
+     {input: 1295, output: 1300},
+     {input: 432498, output: 430000},
+     {input: 4.8956, output: 5},
+     {input: 4.1956, output: 4},
+     {input: 0.1956, output: 0.2},
+     {input: 0.0194, output: 0.019},
+    ]
+
+    tests.forEach((test) => {
+      it(`humanizes ${test.input} as ${test.output}`, () => {
+        expect(humanizeMinSendAmount(test.input)).toEqual(test.output);
+      });
+    });
+  });
 });