Fix Adv Input Prb (#389)

* Fix Adv Input PRb

* Fix button preset

web-frontend/src/pages/TransferCoins/SendCoins.tsx

@@ -17,8 +17,6 @@ function SendCoins() {
 
   const tabIndex = parseInt(query.get('tabIndex') || '0');
 
-  console.log(tabIndex);
-
   const { nickname } = useParams();
   const { data: account } = useResource<AccountObject>(`accounts/${nickname}`);
 

web-frontend/src/pages/TransferCoins/SendCoins/Advanced.tsx

@@ -52,6 +52,8 @@ function Modal({ ...props }) {
   function handlePresetGas() {
     setCustomFees(false);
     setPresetGasFees(true);
+    handleFees('1000');
+    setErrorAdvanced(null);
   }
 
   function handleCustomGas() {
@@ -71,12 +73,18 @@ function Modal({ ...props }) {
   function handleClose() {
     setModal(!modal);
     setErrorAdvanced(null);
+    handleFees('1000');
+  }
+
+  function handleOpen() {
+    handleFees('1000');
   }
 
   return (
     <PopupModal
       fullMode={true}
       onClose={handleClose}
+      onOpen={handleOpen}
       customClass="!w-1/2 min-w-[775px]"
     >
       <PopupModalHeader>
@@ -119,8 +127,7 @@ function Modal({ ...props }) {
             type="text"
             placeholder="Gas fees amount (nMAS)"
             name="fees"
-            defaultValue=""
-            value={customGasFees ? fees : ''}
+            value={!customGasFees ? '' : fees}
             disabled={!customGasFees}
             onChange={(e) => handleFees(e.target.value)}
             error={errorAdvanced?.amount}

web-frontend/src/pages/TransferCoins/SendCoins/Send.tsx

@@ -2,8 +2,8 @@ import { useState, ChangeEvent, FormEvent } from 'react';
 
 import {
   validateInputs,
-  validateAmount,
   SendInputsErrors,
+  validateAmount,
 } from '../../../validation/sendInputs';
 import { formatStandard, Unit } from '../../../utils/MassaFormating';
 import { parseForm } from '../../../utils/parseForm';
@@ -46,7 +46,7 @@ function Send(props: SendProps) {
     const errors = validateInputs(
       amount,
       recipient,
-      'recipient',
+      'Recipient',
       unformattedBalance,
     );
     setError(errors);

web-frontend/src/pages/TransferCoins/SendCoins/SendForm.tsx

@@ -46,76 +46,82 @@ export function SendForm({ ...props }) {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      {/* Balance Section */}
-      <p className="mas-subtitle mb-5">{Intl.t('sendcoins.account-balance')}</p>
-      <Balance customClass="mb-5" amount={formattedBalance} />
-      <div className="flex flex-row justify-between w-full pb-3.5 ">
-        <p className="mas-body2"> {Intl.t('sendcoins.send-action')} </p>
-        <p className="mas-body2">
-          {Intl.t('sendcoins.available-balance')} <u>{formattedBalance}</u>
+    <div>
+      <form onSubmit={handleSubmit}>
+        {/* Balance Section */}
+        <p className="mas-subtitle mb-5">
+          {Intl.t('sendcoins.account-balance')}
         </p>
-      </div>
-      <div className="pb-3.5">
-        <Input
-          placeholder={'Amount to send'}
-          value={amount}
-          name="amount"
-          onChange={(e) => handleChange(e)}
-          error={error?.amount}
-        />
-      </div>
-      <div className="flex flex-row-reverse">
-        <ul className="flex flex-row mas-body2">
-          <SendPercentage percentage={25} />
-          <SendPercentage percentage={50} />
-          <SendPercentage percentage={75} />
-          <SendPercentage percentage={100} />
-        </ul>
-      </div>
-      <p className="pb-3.5 mas-body2">{Intl.t('sendcoins.recipient')}</p>
-      <div className="pb-3.5">
-        <Input
-          placeholder={'Recipient'}
-          value={recipient}
-          onChange={(e) => setRecipient(e.target.value)}
-          name="recipient"
-          error={error?.address}
-        />
-      </div>
-      <div className="flex flex-row-reverse pb-3.5">
-        <p
-          className="hover:cursor-pointer"
-          onClick={() => setModalAccounts(!modalAccounts)}
-        >
-          <u className="mas-body2">
-            {Intl.t('sendcoins.transfer-between-acc')}
-          </u>
-        </p>
-      </div>
-      {/* Button Section */}
-      <div className="flex flex-col w-full gap-3.5">
-        <Button
-          onClick={() => setModal(!modal)}
-          variant={'secondary'}
-          posIcon={<FiPlus />}
-        >
-          {Intl.t('sendcoins.advanced')}
-        </Button>
-
-        <div>
-          <Button type="submit" posIcon={<FiArrowUpRight />}>
-            {Intl.t('sendcoins.send')}
+        <Balance customClass="mb-5" amount={formattedBalance} />
+        <div className="flex flex-row justify-between w-full pb-3.5 ">
+          <p className="mas-body2"> {Intl.t('sendcoins.send-action')} </p>
+          <p className="mas-body2">
+            {Intl.t('sendcoins.available-balance')} <u>{formattedBalance}</u>
+          </p>
+        </div>
+        <div className="pb-3.5">
+          <Input
+            placeholder={'Amount to send'}
+            value={amount}
+            name="amount"
+            onChange={(e) => handleChange(e)}
+            error={error?.amount}
+          />
+        </div>
+        <div className="flex flex-row-reverse">
+          <ul className="flex flex-row mas-body2">
+            <SendPercentage percentage={25} />
+            <SendPercentage percentage={50} />
+            <SendPercentage percentage={75} />
+            <SendPercentage percentage={100} />
+          </ul>
+        </div>
+        <p className="pb-3.5 mas-body2">{Intl.t('sendcoins.recipient')}</p>
+        <div className="pb-3.5">
+          <Input
+            placeholder={'Recipient'}
+            value={recipient}
+            onChange={(e) => setRecipient(e.target.value)}
+            name="recipient"
+            error={error?.address}
+          />
+        </div>
+        <div className="flex flex-row-reverse pb-3.5">
+          <p
+            className="hover:cursor-pointer"
+            onClick={() => setModalAccounts(!modalAccounts)}
+          >
+            <u className="mas-body2">
+              {Intl.t('sendcoins.transfer-between-acc')}
+            </u>
+          </p>
+        </div>
+        {/* Button Section */}
+        <div className="flex flex-col w-full gap-3.5">
+          <Button
+            onClick={() => setModal(!modal)}
+            variant={'secondary'}
+            posIcon={<FiPlus />}
+          >
+            {Intl.t('sendcoins.advanced')}
           </Button>
+
+          <div>
+            <Button type="submit" posIcon={<FiArrowUpRight />}>
+              {Intl.t('sendcoins.send')}
+            </Button>
+          </div>
         </div>
-      </div>
+      </form>
       <div>
-        {modal ? (
-          <Modal {...modalArgsAdvanced} />
-        ) : modalAccounts ? (
-          <ContactList {...modalArgsAccounts} />
-        ) : null}
+        <div>
+          {modal ? (
+            <Modal {...modalArgsAdvanced} />
+          ) : modalAccounts ? (
+            <ContactList {...modalArgsAccounts} />
+          ) : null}
+        </div>
       </div>
-    </form>
+    </div>
   );
 }

web-frontend/src/validation/sendInputs.tsx

@@ -9,6 +9,7 @@ export interface SendInputsErrors {
   unexpectedError?: string;
   amount?: string;
   address?: string;
+  fees?: string;
 }
 
 /**
@@ -21,7 +22,7 @@ export interface SendInputsErrors {
 export function validateInputs(
   amount: string,
   address: string,
-  addressType = 'recipient',
+  addressType = 'Recipient',
   balance?: string,
 ): SendInputsErrors | null {
   let errorsAmount = null;
@@ -46,8 +47,16 @@ export function validateAmount(
   balance?: string,
   amountType = 'Amount',
 ): SendInputsErrors | null {
-  let amountInNanoMassa = reverseFormatStandard(amount);
   let verb = amountType == 'Amount' ? 'is' : 'are';
+
+  if (Number.isNaN(+amount)) {
+    return {
+      amount: Intl.t('errors.send.invalid-amount', { type: amountType, verb }),
+    };
+  }
+
+  let amountInNanoMassa = reverseFormatStandard(amount);
+
   if (Number.isNaN(amountInNanoMassa)) {
     return {
       amount: Intl.t('errors.send.invalid-amount', { type: amountType, verb }),