Fix regressions (#890)

* default value custom fee is empty * resolve regressions
massalabs · Jan 25, 2024 · a1336f8 · a1336f8
1 parent f00ffc5
commit a1336f8
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 43 deletions.
diff --git a/web-frontend/src/i18n/en_US.json b/web-frontend/src/i18n/en_US.json
@@ -176,13 +176,13 @@
     "confirm-sign": "Confirm and sign with password",
     "advanced-message": "You pay gas fees to reward block validators and maximize your chances to see your transaction validated. It is a tip for people that support the blockchain network.",
     "confirm-fees": "Confirm fees ",
-    "fee-info": "{feeType} gas fees are {fees} nMAS, to set custom fees head to the Advanced section on the previous step.",
-    "gas-alert": "If this account is new you'll be charged 0.01 MAS for blockchain storage cost.",
+    "fee-info": "{feeType} gas fees are {fee} nMAS, to set custom fees head to the Advanced section on the previous step.",
+    "fee-alert": "If this account is new you'll be charged 0.01 MAS for blockchain storage cost.",
     "fee-standard": "Standard",
     "fee-low": "Low",
     "fee-high": "High",
     "fee-custom": "Custom",
-    "send-confirmation": "Amount ({amount}) + fees ({fees} nMAS)",
+    "send-confirmation": "Amount ({amount}) + fees ({fee} nMAS)",
     "amount-to-send": "Amount to send"
   },
   "receive-coins": {

diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/Advanced.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/Advanced.tsx
@@ -48,6 +48,9 @@ export default function Advanced(props: AdvancedProps) {
 
   const [error, setError] = useState<InputsErrors | null>(null);
   const [fees, setFees] = useState<bigint>(initialFees);
+  const [feesField, setFeesField] = useState<string>(
+    initialFees ? initialFees.toString() : '',
+  );
   const [customFees, setCustomFees] = useState<boolean>(initialCustomFees);
   const [presetFee, setPresetFee] = useState<bigint>(initialPresetFees);
 
@@ -103,12 +106,17 @@ export default function Advanced(props: AdvancedProps) {
       >
         {name}
         <label className="text-tertiary text-xs flex pl-1 items-center cursor-pointer">
-          ({presetFees[name].toString()}. nMAS)
+          ({presetFees[name].toString()} nMAS)
         </label>
       </Button>
     );
   }
 
+  function onFeeChange(event: { value: string }) {
+    setFees(BigInt(event.value));
+    setFeesField(event.value);
+  }
+
   return (
     <PopupModal
       fullMode={true}
@@ -164,9 +172,9 @@ export default function Advanced(props: AdvancedProps) {
               placeholder={Intl.t('send-coins.custom-fees')}
               name="fees"
               variant="nMAS"
-              value={fees.toString()}
+              value={feesField}
               disabled={!customFees}
-              onValueChange={(event) => setFees(BigInt(event.value))}
+              onValueChange={(event) => onFeeChange(event)}
               error={error?.fees}
             />
 

diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/SendCoins.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/SendCoins.tsx
@@ -27,10 +27,9 @@ export default function SendCoins(props: SendCoinsProps) {
   const [submit, setSubmit] = useState<boolean>(false);
   const [data, setData] = useState<SendConfirmationData>({
     amount: '',
-    fees: '',
-    recipient: '',
+    fee: '',
+    recipientAddress: '',
   });
-  const [payloadData, setPayloadData] = useState<object>();
 
   const { mutate, isSuccess, isLoading, error } =
     usePost<SendTransactionObject>(`accounts/${nickname}/transfer`);
@@ -39,11 +38,11 @@ export default function SendCoins(props: SendCoinsProps) {
     if (error) {
       toast.error(Intl.t(`errors.send-coins.sent`));
     } else if (isSuccess) {
-      let { amount, recipient } = data;
+      let { amount, recipientAddress } = data;
       toast.success(
-        Intl.t(`success.send-coins.sent`, {
+        Intl.t('success.send-coins.sent', {
           amount,
-          recipient: maskAddress(recipient),
+          recipient: maskAddress(recipientAddress),
         }),
       );
 
@@ -54,20 +53,18 @@ export default function SendCoins(props: SendCoinsProps) {
   function handleSubmit(data: SendConfirmationData) {
     setData(data);
 
-    setPayloadData({
-      fee: data.fees,
-      recipientAddress: data.recipient,
-      amount: toNanoMASS(data.amount).toString(),
-    });
-
     setSubmit(true);
   }
 
   function handleConfirm(confirmed: boolean) {
     if (!confirmed) {
       setSubmit(false);
     } else {
-      mutate(payloadData as SendTransactionObject);
+      mutate({
+        fee: data.fee,
+        recipientAddress: data.recipientAddress,
+        amount: toNanoMASS(data.amount).toString(),
+      });
     }
   }
 

diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx
@@ -9,8 +9,8 @@ import { maskAddress, formatStandard, toNanoMASS, toMASS } from '@/utils';
 
 export interface SendConfirmationData {
   amount: string;
-  fees: string;
-  recipient: string;
+  fee: string;
+  recipientAddress: string;
 }
 
 interface SendConfirmationProps {
@@ -21,21 +21,21 @@ interface SendConfirmationProps {
 
 export function SendConfirmation(props: SendConfirmationProps) {
   const { data, handleConfirm, isLoading } = props;
-  const { amount, fees, recipient } = data;
+  const { amount, fee, recipientAddress } = data;
 
-  const GAS_STANDARD = `${Intl.t('send-coins.fee-standard')}`;
-  const GAS_LOW = `${Intl.t('send-coins.fee-low')}`;
-  const GAS_HIGH = `${Intl.t('send-coins.fee-high')}`;
-  const GAS_CUSTOM = `${Intl.t('send-coins.fee-custom')}`;
+  const GAS_STANDARD = Intl.t('send-coins.fee-standard');
+  const GAS_LOW = Intl.t('send-coins.fee-low');
+  const GAS_HIGH = Intl.t('send-coins.fee-high');
+  const GAS_CUSTOM = Intl.t('send-coins.fee-custom');
 
-  const formattedRecipientAddress = maskAddress(recipient);
-  const total = toNanoMASS(amount) + BigInt(fees);
+  const formattedRecipientAddress = maskAddress(recipientAddress);
+  const total = toNanoMASS(amount) + BigInt(fee);
 
   const formattedTotal = formatStandard(toMASS(total));
   const [showTooltip, setShowTooltip] = useState(false);
   let selectedFees;
 
-  switch (fees) {
+  switch (fee) {
     case '1000':
       selectedFees = GAS_STANDARD;
       break;
@@ -50,10 +50,10 @@ export function SendConfirmation(props: SendConfirmationProps) {
       break;
   }
 
-  const feeInfo = `${Intl.t('send-coins.fee-info', {
+  const feeInfo = Intl.t('send-coins.fee-info', {
     feeType: selectedFees,
-    fees: fees,
-  })}`;
+    fee,
+  });
   const gasAlert = `  \u26A0  ${Intl.t('send-coins.fee-alert')}`;
   let content = selectedFees == GAS_STANDARD ? feeInfo + gasAlert : gasAlert;
 
@@ -73,7 +73,7 @@ export function SendConfirmation(props: SendConfirmationProps) {
       >
         <div className="flex flex-row items-center pb-3 ">
           <div data-testid="send-confirmation-info" className="pr-2 text-info">
-            {Intl.t('send-coins.send-confirmation', { amount, fees })}
+            {Intl.t('send-coins.send-confirmation', { amount, fee })}
           </div>
           <div
             className="flex flex-row relative items-center gap-1"

diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/SendForm.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/SendForm.tsx
@@ -42,7 +42,7 @@ export function SendForm(props: SendFormProps) {
     data,
     redirect,
   } = props;
-  const { amount: redirectAmount, to } = redirect;
+  const { amount: redirectAmount, to: redirectedTo } = redirect;
 
   const balance = BigInt(currentAccount.candidateBalance) || 0n;
   const formattedBalance = formatStandard(toMASS(balance));
@@ -54,18 +54,20 @@ export function SendForm(props: SendFormProps) {
     data.amount ? toMASS(toNanoMASS(data.amount)).toString() : '',
   );
   const [fees, setFees] = useState<bigint>(1000n);
-  const [recipient, setRecipient] = useState<string>(data?.recipient ?? '');
+  const [recipient, setRecipient] = useState<string>(data.recipientAddress);
   const { okAccounts: accounts } = fetchAccounts();
   const filteredAccounts = accounts?.filter(
     (account: AccountObject) => account?.nickname !== currentAccount?.nickname,
   );
+
   useEffect(() => {
-    setAmount(redirectAmount);
-    setRecipient(to);
-  }, []);
+    setAmount(redirectAmount || data.amount);
+    setRecipient(redirectedTo || data.recipientAddress);
+    setFees(BigInt(data.fee || 1000n));
+  }, [data]);
 
   function validate(formObject: IForm) {
-    const { amount, recipient } = formObject;
+    const { amount, recipientAddress } = formObject;
 
     setError(null);
 
@@ -91,12 +93,12 @@ export function SendForm(props: SendFormProps) {
       return false;
     }
 
-    if (!recipient) {
+    if (!recipientAddress) {
       setError({ recipient: Intl.t('errors.send-coins.no-address') });
       return false;
     }
 
-    if (!checkAddressFormat(recipient)) {
+    if (!checkAddressFormat(recipientAddress)) {
       setError({ recipient: Intl.t('errors.send-coins.invalid-address') });
       return false;
     }
@@ -112,7 +114,7 @@ export function SendForm(props: SendFormProps) {
 
     sendCoinsHandleSubmit({
       ...(formObject as SendConfirmationData),
-      fees: fees.toString(),
+      fee: fees.toString(),
     });
   }
 
@@ -185,7 +187,7 @@ export function SendForm(props: SendFormProps) {
           <Input
             placeholder={Intl.t('receive-coins.recipient')}
             value={recipient}
-            name="recipient"
+            name="recipientAddress"
             onChange={(e) => setRecipient(e.target.value)}
             error={error?.recipient}
           />