Refactor custom fees logic

GemWallet · Nov 24, 2023 · ca4b8d9 · ca4b8d9
1 parent 7caecf3
commit ca4b8d9
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 12 deletions.
diff --git a/packages/constants/src/network/network.constant.ts b/packages/constants/src/network/network.constant.ts
@@ -1,3 +1,5 @@
+import { xrpToDrops } from 'xrpl';
+
 export enum Chain {
   XRPL = 'XRPL'
 }
@@ -101,3 +103,10 @@ export function getNetwork(chain: Chain, network: Network): NetworkNode {
 
   throw new Error(`Network ${network} is not valid for chain ${chain}`);
 }
+
+export const getMaxFeeInDrops = (chain: Chain): number => {
+  switch (chain) {
+    default:
+      return Number(xrpToDrops(1));
+  }
+};
diff --git a/packages/extension/src/components/organisms/BaseTransaction/BaseTransaction.tsx b/packages/extension/src/components/organisms/BaseTransaction/BaseTransaction.tsx
@@ -1,7 +1,9 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 
 import ErrorIcon from '@mui/icons-material/Error';
 import { IconButton, Paper, Tooltip, Typography } from '@mui/material';
+import MuiInput from '@mui/material/Input';
+import { dropsToXrp, xrpToDrops } from 'xrpl';
 
 import {
   CreateNFTOfferFlags,
@@ -10,10 +12,12 @@ import {
   MintNFTFlags,
   PaymentFlags,
   SetAccountFlags,
-  TrustSetFlags
+  TrustSetFlags,
+  getMaxFeeInDrops
 } from '@gemwallet/constants';
 
 import { ERROR_RED } from '../../../constants';
+import { useNetwork } from '../../../contexts';
 import { formatAmount, formatFlags, formatToken } from '../../../utils';
 import { TileLoader } from '../../atoms';
 
@@ -39,6 +43,7 @@ type FeeProps = {
   errorFees: string | undefined;
   estimatedFees: string;
   isBulk?: boolean;
+  onFeeChange?: (newFee: number) => void;
   useLegacy?: boolean;
 };
 
@@ -82,7 +87,34 @@ export const BaseTransaction: FC<BaseTransactionProps> = ({
   </>
 );
 
-export const Fee: FC<FeeProps> = ({ errorFees, estimatedFees, fee, isBulk, useLegacy = true }) => {
+export const Fee: FC<FeeProps> = ({
+  errorFees,
+  estimatedFees,
+  fee,
+  isBulk,
+  onFeeChange,
+  useLegacy = true
+}) => {
+  const { chainName } = useNetwork();
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleFeeClick = () => {
+    if (onFeeChange !== undefined) {
+      setIsEditing(true);
+    }
+  };
+
+  const handleFeeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newFee = Number(event.target.value);
+    if (onFeeChange) {
+      onFeeChange(Number(xrpToDrops(newFee)));
+    }
+  };
+
+  const handleBlur = () => {
+    setIsEditing(false);
+  };
+
   if (useLegacy) {
     return (
       <Paper elevation={24} style={{ padding: '10px', marginBottom: '5px' }}>
@@ -134,16 +166,38 @@ export const Fee: FC<FeeProps> = ({ errorFees, estimatedFees, fee, isBulk, useLe
         {isBulk ? 'Total network fees' : 'Network fees'}
       </Typography>
       <Typography variant="body2" gutterBottom align="right">
-        {errorFees ? (
-          <Typography variant="caption" style={{ color: ERROR_RED }}>
+        {isEditing ? (
+          <MuiInput
+            value={fee !== null ? dropsToXrp(fee) : dropsToXrp(estimatedFees)}
+            onChange={handleFeeChange}
+            onBlur={handleBlur}
+            autoFocus
+            size="small"
+            inputProps={{
+              step: dropsToXrp(1),
+              min: dropsToXrp(1),
+              max: dropsToXrp(getMaxFeeInDrops(chainName)),
+              type: 'number'
+            }}
+          />
+        ) : errorFees ? (
+          <Typography
+            variant="caption"
+            style={{ color: ERROR_RED, cursor: 'pointer' }}
+            onClick={handleFeeClick}
+          >
             {errorFees}
           </Typography>
         ) : estimatedFees === DEFAULT_FEES ? (
           <TileLoader secondLineOnly />
-        ) : fee ? (
-          formatToken(fee, 'XRP (manual)', true)
+        ) : fee !== null ? (
+          <span onClick={handleFeeClick} style={{ cursor: 'pointer' }}>
+            {formatToken(fee, 'XRP (manual)', true)}
+          </span>
         ) : (
-          formatAmount(estimatedFees)
+          <span onClick={handleFeeClick} style={{ cursor: 'pointer' }}>
+            {formatAmount(estimatedFees)}
+          </span>
         )}
       </Typography>
     </>

diff --git a/packages/extension/src/components/organisms/TransactionDetails/TransactionDetails.tsx b/packages/extension/src/components/organisms/TransactionDetails/TransactionDetails.tsx
@@ -12,14 +12,16 @@ interface TransactionDetailsProps {
   errorFees?: string;
   isConnectionFailed?: boolean;
   displayTransactionType?: boolean;
+  onFeeChange?: (newFee: number) => void;
 }
 
 export const TransactionDetails: FC<TransactionDetailsProps> = ({
   txParam,
   errorFees,
   estimatedFees,
   isConnectionFailed,
-  displayTransactionType
+  displayTransactionType,
+  onFeeChange
 }) => {
   const [isTxExpanded, setIsTxExpanded] = useState(false);
   const [isRawTxExpanded, setIsRawTxExpanded] = useState(false);
@@ -65,6 +67,7 @@ export const TransactionDetails: FC<TransactionDetailsProps> = ({
               estimatedFees={estimatedFees}
               fee={txParam?.Fee ? Number(txParam?.Fee) : null}
               useLegacy={false}
+              onFeeChange={onFeeChange}
             />
           }
           isExpanded={isFeeExpanded}

diff --git a/packages/extension/src/components/pages/SendPayment/ConfirmPayment/ConfirmPayment.tsx b/packages/extension/src/components/pages/SendPayment/ConfirmPayment/ConfirmPayment.tsx
@@ -106,9 +106,10 @@ export const ConfirmPayment: FC<ConfirmPaymentProps> = ({
   }, []);
 
   const handleConfirm = useCallback(() => {
-    const [currency, issuer] = token.split('-');
     setTransaction(TransactionStatus.Pending);
-    sendPayment(buildPaymentFromProps({ value, currency, issuer, address, memos, destinationTag }))
+    // Amount and Destination will be present because if not,
+    // we won't be able to go to the confirm transaction state
+    sendPayment(params.transaction as Payment)
       .then(() => {
         setTransaction(TransactionStatus.Success);
       })
@@ -117,12 +118,26 @@ export const ConfirmPayment: FC<ConfirmPaymentProps> = ({
         setTransaction(TransactionStatus.Rejected);
         Sentry.captureException(e);
       });
-  }, [address, buildPaymentFromProps, destinationTag, memos, sendPayment, token, value]);
+  }, [params.transaction, sendPayment]);
 
   const handleTransactionClick = useCallback(() => {
     navigate(HOME_PATH);
   }, [navigate]);
 
+  const handleFeeChange = useCallback(
+    (fee: number) => {
+      if (params.transaction) {
+        setParams({
+          transaction: {
+            ...params.transaction,
+            Fee: fee.toString()
+          }
+        });
+      }
+    },
+    [params.transaction]
+  );
+
   if (transaction === TransactionStatus.Success || transaction === TransactionStatus.Pending) {
     return (
       <AsyncTransaction
@@ -178,6 +193,7 @@ export const ConfirmPayment: FC<ConfirmPaymentProps> = ({
         estimatedFees={estimatedFees}
         errorFees={errorFees}
         displayTransactionType={false}
+        onFeeChange={handleFeeChange}
       />
     </TransactionPage>
   );