Merge pull request #320 from EYBlockchain/liju.jose/wallet-fixes-issu…

…e-217 wallet input validation added
EYBlockchain · Nov 22, 2021 · b9a555d · b9a555d
2 parents d780068 + e09842f
commit b9a555d
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 29 deletions.
diff --git a/wallet/src/views/transactions/components/header-menu/account-settings.view.jsx b/wallet/src/views/transactions/components/header-menu/account-settings.view.jsx
@@ -39,6 +39,8 @@ function AccountSettingsModal({
         <Form>
           <Form.Field>
             <Input
+              type="number"
+              min="0"
               label="Address Index"
               placeholder={login.nf3.mnemonic.addressIndex}
               onChange={event => setAddressIndex(event.target.value)}

diff --git a/wallet/src/views/transactions/components/transactions/transactions-modal.view.jsx b/wallet/src/views/transactions/components/transactions/transactions-modal.view.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Modal, Form, Icon, Checkbox, Dropdown } from 'semantic-ui-react';
+import { Button, Modal, Form, Icon, Checkbox, Dropdown, Input } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import * as txThunks from '../../../../store/transactions/transactions.thunks';
@@ -18,12 +18,20 @@ function TransactionsModal({ token, login, transactions, onSubmitTx, onCancelTx
   const [instantWithdrawFee, setInstantWithdrawFee] = React.useState(DEFAULT_INSTANT_WITHDRAW_FEE);
   const [instantWithdrawEnable, setInstantWithdrawEnable] = React.useState(false);
   const [directTransactionEnable, setDirectTransactionEnable] = React.useState(false);
-  const [pkdX, setPkdX] = React.useState('');
-  const [pkdY, setPkdY] = React.useState('');
+  const [pkdX, setPkdX] = React.useState({
+    value: '',
+    error: null,
+  });
+  const [pkdY, setPkdY] = React.useState({
+    value: '',
+    error: null,
+  });
 
   const toggleAll = () => {
     setInstantWithdrawEnable(false);
     setDirectTransactionEnable(false);
+    setPkdX({ value: '', error: null });
+    setPkdY({ value: '', error: null });
     onCancelTx();
   };
 
@@ -35,6 +43,21 @@ function TransactionsModal({ token, login, transactions, onSubmitTx, onCancelTx
     return tokenPool.filter(tokenEl => tokenEl.id === token.activeTokenRowId)[0];
   }
 
+  function validateContractAddress(key, value) {
+    const error = {
+      content: `Please enter a valid ${key}`,
+      pointing: 'above',
+    };
+    if (key === 'PK-Y') {
+      if (!/^0x([A-Fa-f0-9]{63,64})$/.test(value)) return setPkdY({ value: '', error });
+      setPkdY({ value, error: null });
+    }
+    if (transactions.txType === 'withdraw') {
+      if (!/^0x([A-Fa-f0-9]{40})$/.test(value)) return setPkdX({ value: '', error });
+    } else if (!/^0x([A-Fa-f0-9]{63,64})$/.test(value)) return setPkdX({ value: '', error });
+    return setPkdX({ value, error: null });
+  }
+
   const handleOnSubmit = () => {
     const tokenInfo = getTokenInfo();
     if (!tokenInfo) {
@@ -44,7 +67,7 @@ function TransactionsModal({ token, login, transactions, onSubmitTx, onCancelTx
       // TODO : pending select correct tokenId index. For now, i select 0, but it could be different
       case TX_TYPES.WITHDRAW:
         {
-          const ethereumAddress = pkdX === '' ? login.nf3.ethereumAddress : pkdX;
+          const ethereumAddress = pkdX.value === '' ? login.nf3.ethereumAddress : pkdX.value;
           const withdrawType = instantWithdrawEnable
             ? TX_TYPES.INSTANT_WITHDRAW
             : TX_TYPES.WITHDRAW;
@@ -62,7 +85,8 @@ function TransactionsModal({ token, login, transactions, onSubmitTx, onCancelTx
         break;
 
       default: {
-        const pkd = pkdX === '' || pkdY === '' ? login.nf3.zkpKeys.pkd : [pkdX, pkdY];
+        const pkd =
+          pkdX.value === '' || pkdY.value === '' ? login.nf3.zkpKeys.pkd : [pkdX.value, pkdY.value];
         const { txType } = transactions;
         onSubmitTx({
           txType,
@@ -127,29 +151,24 @@ function TransactionsModal({ token, login, transactions, onSubmitTx, onCancelTx
             </Form.Field>
           ) : null}
           <Form.Group widths="equal">
-            <Form.Field>
-              <label htmlFor="pkd-x">
-                {keyLabel}
-                <input
-                  type="text"
-                  placeholder={
-                    transactions.txType === TX_TYPES.WITHDRAW ? login.nf3.ethereumAddress : pkd[0]
-                  }
-                  onChange={event => setPkdX(event.target.value)}
-                />
-              </label>
-            </Form.Field>
+            <Form.Field
+              control={Input}
+              label={keyLabel}
+              placeholder={
+                transactions.txType === TX_TYPES.WITHDRAW ? login.nf3.ethereumAddress : pkd[0]
+              }
+              onChange={event => validateContractAddress(keyLabel, event.target.value)}
+              error={pkdX.error}
+            />
+
             {transactions.txType !== TX_TYPES.WITHDRAW ? (
-              <Form.Field>
-                <label htmlFor="pk-y">
-                  PK-Y
-                  <input
-                    type="text"
-                    placeholder={pkd[1]}
-                    onChange={event => setPkdY(event.target.value)}
-                  />
-                </label>
-              </Form.Field>
+              <Form.Field
+                control={Input}
+                label="PK-Y"
+                placeholder={pkd[1]}
+                onChange={event => validateContractAddress('PK-Y', event.target.value)}
+                error={pkdY.error}
+              />
             ) : null}
           </Form.Group>
           <Form.Group widths="equal">
@@ -186,7 +205,8 @@ function TransactionsModal({ token, login, transactions, onSubmitTx, onCancelTx
                 <label htmlFor="amount">
                   Amount
                   <input
-                    type="text"
+                    type="number"
+                    min="0"
                     id="amount"
                     onChange={event => setTokenAmount(event.target.value)}
                   />
@@ -197,7 +217,8 @@ function TransactionsModal({ token, login, transactions, onSubmitTx, onCancelTx
               <label htmlFor="fee">
                 Fee
                 <input
-                  type="text"
+                  type="number"
+                  min="0"
                   placeholder={fee}
                   onChange={event => setFee(event.target.value)}
                   id="fee"