Handle Signer Rejection // Real Custom Errors #3153

js/src/modals/DeployContract/deployContract.js

@@ -26,6 +26,8 @@ import ErrorStep from './ErrorStep';
 
 import styles from './deployContract.css';
 
+import { ERROR_CODES } from '../../api/transport/error';
+
 const steps = ['contract details', 'deployment', 'completed'];
 
 export default class DeployContract extends Component {
@@ -63,7 +65,8 @@ export default class DeployContract extends Component {
     params: [],
     paramsError: [],
     step: 0,
-    deployError: null
+    deployError: null,
+    rejected: false
   }
 
   componentWillMount () {
@@ -92,15 +95,20 @@ export default class DeployContract extends Component {
   }
 
   render () {
-    const { step, deployError } = this.state;
+    const { step, deployError, rejected } = this.state;
+
+    const realSteps = deployError || rejected ? null : steps;
+    const title = realSteps
+      ? null
+      : (deployError ? 'deployment failed' : 'rejected');
 
     return (
       <Modal
         actions={ this.renderDialogActions() }
         current={ step }
-        steps={ deployError ? null : steps }
-        title={ deployError ? 'deployment failed' : null }
-        waiting={ [1] }
+        steps={ realSteps }
+        title={ title }
+        waiting={ realSteps ? [1] : null }
         visible
         scroll>
         { this.renderStep() }
@@ -158,7 +166,7 @@ export default class DeployContract extends Component {
 
   renderStep () {
     const { accounts, readOnly } = this.props;
-    const { address, deployError, step, deployState, txhash } = this.state;
+    const { address, deployError, step, deployState, txhash, rejected } = this.state;
 
     if (deployError) {
       return (
@@ -166,6 +174,15 @@ export default class DeployContract extends Component {
       );
     }
 
+    if (rejected) {
+      return (
+        <BusyStep
+          title='The deployment has been rejected'
+          state='You can safely close this window, the contract deployment will not occur.'
+        />
+      );
+    }
+
     switch (step) {
       case 0:
         return (
@@ -273,6 +290,11 @@ export default class DeployContract extends Component {
         });
       })
       .catch((error) => {
+        if (error.code === ERROR_CODES.REQUEST_REJECTED) {
+          this.setState({ rejected: true });
+          return false;
+        }
+
         console.error('error deploying contract', error);
         this.setState({ deployError: error });
         store.dispatch({ type: 'newError', error });

js/src/modals/ExecuteContract/executeContract.js

@@ -23,6 +23,8 @@ import { validateAddress, validateUint } from '../../util/validation';
 
 import DetailsStep from './DetailsStep';
 
+import { ERROR_CODES } from '../../api/transport/error';
+
 export default class ExecuteContract extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired,
@@ -49,7 +51,8 @@ export default class ExecuteContract extends Component {
     step: 0,
     sending: false,
     busyState: null,
-    txhash: null
+    txhash: null,
+    rejected: false
   }
 
   componentDidMount () {
@@ -80,6 +83,7 @@ export default class ExecuteContract extends Component {
     const { onClose, fromAddress } = this.props;
     const { sending, step, fromAddressError, valuesError } = this.state;
     const hasError = fromAddressError || valuesError.find((error) => error);
+
     const cancelBtn = (
       <Button
         key='cancel'
@@ -115,7 +119,16 @@ export default class ExecuteContract extends Component {
 
   renderStep () {
     const { onFromAddressChange } = this.props;
-    const { step, busyState, txhash } = this.state;
+    const { step, busyState, txhash, rejected } = this.state;
+
+    if (rejected) {
+      return (
+        <BusyStep
+          title='The execution has been rejected'
+          state='You can safely close this window, the function execution will not occur.'
+        />
+      );
+    }
 
     if (step === 0) {
       return (
@@ -221,7 +234,17 @@ export default class ExecuteContract extends Component {
       })
       .then((requestId) => {
         this.setState({ busyState: 'Waiting for authorization in the Parity Signer' });
-        return api.pollMethod('parity_checkRequest', requestId);
+
+        return api
+          .pollMethod('parity_checkRequest', requestId)
+          .catch((e) => {
+            if (e.code === ERROR_CODES.REQUEST_REJECTED) {
+              this.setState({ rejected: true });
+              return false;
+            }
+
+            throw e;
+          });
       })
       .then((txhash) => {
         this.setState({ sending: false, step: 2, txhash, busyState: 'Your transaction has been posted to the network' });

js/src/modals/Transfer/transfer.js

@@ -28,13 +28,16 @@ import Extras from './Extras';
 import ERRORS from './errors';
 import styles from './transfer.css';
 
+import { ERROR_CODES } from '../../api/transport/error';
+
 const DEFAULT_GAS = '21000';
 const DEFAULT_GASPRICE = '20000000000';
 const TITLES = {
   transfer: 'transfer details',
   sending: 'sending',
   complete: 'complete',
-  extras: 'extra information'
+  extras: 'extra information',
+  rejected: 'rejected'
 };
 const STAGES_BASIC = [TITLES.transfer, TITLES.sending, TITLES.complete];
 const STAGES_EXTRA = [TITLES.transfer, TITLES.extras, TITLES.sending, TITLES.complete];
@@ -74,7 +77,8 @@ export default class Transfer extends Component {
     valueAll: false,
     valueError: null,
     isEth: true,
-    busyState: null
+    busyState: null,
+    rejected: false
   }
 
   componentDidMount () {
@@ -82,13 +86,19 @@ export default class Transfer extends Component {
   }
 
   render () {
-    const { stage, extras } = this.state;
+    const { stage, extras, rejected } = this.state;
+
+    const steps = [].concat(extras ? STAGES_EXTRA : STAGES_BASIC);
+
+    if (rejected) {
+      steps[steps.length - 1] = TITLES.rejected;
+    }
 
     return (
       <Modal
         actions={ this.renderDialogActions() }
         current={ stage }
-        steps={ extras ? STAGES_EXTRA : STAGES_BASIC }
+        steps={ steps }
         waiting={ extras ? [2] : [1] }
         visible
         scroll
@@ -133,7 +143,16 @@ export default class Transfer extends Component {
   }
 
   renderCompletePage () {
-    const { sending, txhash, busyState } = this.state;
+    const { sending, txhash, busyState, rejected } = this.state;
+
+    if (rejected) {
+      return (
+        <BusyStep
+          title='The transaction has been rejected'
+          state='You can safely close this window, the transfer will not occur.'
+        />
+      );
+    }
 
     if (sending) {
       return (
@@ -455,7 +474,17 @@ export default class Transfer extends Component {
         : this._sendToken()
       ).then((requestId) => {
         this.setState({ busyState: 'Waiting for authorization in the Parity Signer' });
-        return api.pollMethod('parity_checkRequest', requestId);
+
+        return api
+          .pollMethod('parity_checkRequest', requestId)
+          .catch((e) => {
+            if (e.code === ERROR_CODES.REQUEST_REJECTED) {
+              this.setState({ rejected: true });
+              return false;
+            }
+
+            throw e;
+          });
       })
       .then((txhash) => {
         this.onNext();