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 index bdb6f5dee..647513304 100644 --- 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({
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 index af7919893..514bae6e8 100644 --- 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 ) : null} - - - + validateContractAddress(keyLabel, event.target.value)} + error={pkdX.error} + /> + {transactions.txType !== TX_TYPES.WITHDRAW ? ( - - - + validateContractAddress('PK-Y', event.target.value)} + error={pkdY.error} + /> ) : null} @@ -186,7 +205,8 @@ function TransactionsModal({ token, login, transactions, onSubmitTx, onCancelTx