Improve PreparePayment view

Add custom fees control & Change default fees calc & Fix ui issues
GemWallet · Sep 19, 2023 · 4386404 · 4386404
1 parent 4bbfd61
commit 4386404
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 22 deletions.
diff --git a/packages/extension/src/components/pages/SendPayment/PreparePayment/PreparePayment.tsx b/packages/extension/src/components/pages/SendPayment/PreparePayment/PreparePayment.tsx
@@ -15,11 +15,17 @@ import {
 } from '@mui/material';
 import * as Sentry from '@sentry/react';
 import { useNavigate } from 'react-router-dom';
-import { isValidAddress } from 'xrpl';
+import { dropsToXrp, isValidAddress } from 'xrpl';
 
 import { Memo } from '@gemwallet/constants';
 
-import { DEFAULT_RESERVE, HOME_PATH, RESERVE_PER_OWNER, navigation } from '../../../../constants';
+import {
+  DEFAULT_FEE,
+  DEFAULT_RESERVE,
+  HOME_PATH,
+  navigation,
+  RESERVE_PER_OWNER
+} from '../../../../constants';
 import { useLedger, useNetwork, useServer, useWallet } from '../../../../contexts';
 import { convertHexCurrencyString } from '../../../../utils';
 import { buildDefaultMemos } from '../../../../utils/transaction';
@@ -63,6 +69,7 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
   const [errorAmount, setErrorAmount] = useState<string>('');
   const [errorMemo, setErrorMemo] = useState<string>('');
   const [errorDestinationTag, setErrorDestinationTag] = useState<string>('');
+  const [errorTransactionFee, setErrorTransactionFee] = useState<string>('');
   const [tokens, setTokens] = useState<
     | {
         value: string;
@@ -75,12 +82,15 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
   const [isWalletActivated, setIsWalletActivated] = useState<boolean>(true);
   const [ownerCount, setOwnerCount] = useState<number>(0);
   const tokenRef = useRef<HTMLInputElement | null>(null);
-  const [transactionFee, setTransactionFee] = useState<string>(
-    (
-      (serverInfo?.info.validated_ledger?.base_fee_xrp || DEFAULT_RESERVE) *
-      (serverInfo?.info.load_factor || 1)
-    ).toString()
-  );
+
+  let minimumFeeValue = Number(dropsToXrp(DEFAULT_FEE));
+  if (serverInfo?.info.validated_ledger?.base_fee_xrp && serverInfo?.info.load_factor) {
+    minimumFeeValue = Math.max(
+      serverInfo?.info.validated_ledger?.base_fee_xrp * serverInfo?.info.load_factor,
+      minimumFeeValue
+    );
+  }
+  const [transactionFee, setTransactionFee] = useState<string>(minimumFeeValue.toString());
 
   const baseReserve = useMemo(
     () => serverInfo?.info.validated_ledger?.reserve_base_xrp || DEFAULT_RESERVE,
@@ -95,9 +105,18 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
       errorAddress === '' &&
       errorAmount === '' &&
       errorMemo === '' &&
-      errorDestinationTag === ''
+      errorDestinationTag === '' &&
+      errorTransactionFee === ''
     );
-  }, [address, amount, errorAddress, errorAmount, errorDestinationTag, errorMemo]);
+  }, [
+    address,
+    amount,
+    errorAddress,
+    errorAmount,
+    errorDestinationTag,
+    errorMemo,
+    errorTransactionFee
+  ]);
 
   const reserve = useMemo(() => {
     return ownerCount * RESERVE_PER_OWNER + baseReserve;
@@ -279,13 +298,29 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
     [hasValidDestinationTag]
   );
 
-  const handleTransactionFeeChange = useCallback((e: FocusEvent<HTMLInputElement>) => {
-    // Int and decimal numbers only
-    const isValidNumber = /^\d*\.?\d*$/.test(e.target.value);
-    if (isValidNumber) {
+  const handleTransactionFeeChange = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      // Always update the transaction fee value. If it's invalid, the submit button will be disabled, but the user
+      // can still easily modify the value.
       setTransactionFee(e.target.value);
-    }
-  }, []);
+
+      const isValidNumber = /^\d*\.?\d*$/.test(e.target.value);
+      if (!isValidNumber) {
+        // Int and decimal numbers only
+        setErrorTransactionFee('The transaction fee is invalid');
+        return;
+      }
+
+      if (Number(e.target.value) < minimumFeeValue) {
+        // The transaction fee must be greater than the minimum fee, to prevent the transaction from pending forever.
+        setErrorTransactionFee(`The minimum transaction fee is ${minimumFeeValue}`);
+        return;
+      }
+
+      setErrorTransactionFee('');
+    },
+    [minimumFeeValue]
+  );
 
   const handleSendPayment = useCallback(() => {
     if (!isSendPaymentDisabled) {
@@ -362,6 +397,8 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
     );
   }
 
+  const defaultMarginBottom = '20px';
+
   return (
     <PageWithReturn
       title="Send Payment"
@@ -383,10 +420,13 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
           helperText={errorAddress}
           onChange={handleAddressChange}
           onBlur={handleAddressBlur}
-          style={{ marginTop: '20px', marginBottom: errorAddress === '' ? '33px' : '10px' }}
+          style={{
+            marginTop: '20px',
+            marginBottom: errorAddress === '' ? defaultMarginBottom : '10px'
+          }}
           autoComplete="off"
         />
-        <FormControl fullWidth style={{ marginBottom: '33px' }}>
+        <FormControl fullWidth style={{ marginBottom: defaultMarginBottom }}>
           <InputLabel id="token-label">Token</InputLabel>
           <Select
             labelId="token-label"
@@ -411,7 +451,7 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
           id="amount"
           name="amount"
           fullWidth
-          style={{ marginBottom: '33px' }}
+          style={{ marginBottom: defaultMarginBottom }}
           error={!!errorAmount}
           helperText={errorAmount}
           onChange={handleAmountChange}
@@ -422,7 +462,7 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
           id="memo"
           name="memo"
           fullWidth
-          style={{ marginBottom: '33px' }}
+          style={{ marginBottom: defaultMarginBottom }}
           error={!!errorMemo}
           helperText={errorMemo}
           onChange={handleMemoChange}
@@ -433,7 +473,7 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
           id="destination-tag"
           name="destination-tag"
           fullWidth
-          style={{ marginBottom: '33px' }}
+          style={{ marginBottom: defaultMarginBottom }}
           error={!!errorDestinationTag}
           helperText={errorDestinationTag}
           onChange={handleDestinationTagChange}
@@ -444,8 +484,10 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
           id="transaction-fee"
           name="transaction-fee"
           fullWidth
-          style={{ marginBottom: '33px' }}
           value={transactionFee}
+          style={{ marginBottom: defaultMarginBottom }}
+          error={!!errorTransactionFee}
+          helperText={errorTransactionFee}
           onChange={handleTransactionFeeChange}
           autoComplete="off"
         />

diff --git a/packages/extension/src/constants/server.ts b/packages/extension/src/constants/server.ts
@@ -1,2 +1,3 @@
 export const DEFAULT_RESERVE = 10;
 export const RESERVE_PER_OWNER = 2;
+export const DEFAULT_FEE = 15; // 15 drops