sms verification: make SendRequest component dumb

js/src/modals/SMSVerification/SendRequest/sendRequest.js

@@ -15,115 +15,44 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import qs from 'querystring';
 
 import TxHash from '../../../ui/TxHash';
-import waitForConfirmations from '../wait-for-confirmations';
+import VerificationStore from '../store';
-import postToVerificationServer from '../post-to-verification-server';
+const {
+  POSTING_REQUEST, POSTED_REQUEST, REQUESTING_SMS
+} = VerificationStore;
 
 import styles from './sendRequest.css';
 
+// TODO: move this to a better place
+const nullable = (type) => PropTypes.oneOfType([ PropTypes.oneOf([ null ]), type ]);
+
 export default class SendRequest extends Component {
-  static contextTypes = {
-    api: PropTypes.object.isRequired
-  }
-
   static propTypes = {
-    account: PropTypes.string.isRequired,
+    step: PropTypes.any.isRequired,
-    contract: PropTypes.object.isRequired,
+    tx: nullable(PropTypes.any.isRequired)
-    data: PropTypes.object.isRequired,
-    onData: PropTypes.func.isRequired,
-    onSuccess: PropTypes.func.isRequired,
-    onError: PropTypes.func.isRequired,
-    nextStep: PropTypes.func.isRequired
-  }
-
-  state = {
-    init: true,
-    step: 'init'
-  };
-
-  componentWillMount () {
-    const { init } = this.state;
-    if (init) {
-      this.send();
-      this.setState({ init: false });
-    }
   }
 
   render () {
-    const { step } = this.state;
+    const { step, tx } = this.props;
 
-    if (step === 'error') {
+    if (step === POSTING_REQUEST) {
-      return (<p>{ this.state.error }</p>);
-    }
-
-    if (step === 'pending') {
       return (<p>A verification request will be sent to the contract. Please authorize this using the Parity Signer.</p>);
     }
 
-    if (step === 'posted') {
+    if (step === POSTED_REQUEST) {
       return (
         <div className={ styles.centered }>
-          <TxHash hash={ this.props.data.txHash } maxConfirmations={ 1 } />
+          <TxHash hash={ tx } maxConfirmations={ 1 } />
           <p>Please keep this window open.</p>
-        </div>);
+        </div>
+      );
     }
 
-    if (step === 'mined') {
+    if (step === REQUESTING_SMS) {
       return (<p>Requesting an SMS from the Parity server.</p>);
     }
 
     return null;
   }
-
-  send = () => {
-    const { api } = this.context;
-    const { account, contract, onData, onError, onSuccess, nextStep } = this.props;
-    const { fee, number, hasRequested } = this.props.data;
-
-    const request = contract.functions.find((fn) => fn.name === 'request');
-    const options = { from: account, value: fee.toString() };
-
-    let chain = Promise.resolve();
-    if (!hasRequested) {
-      chain = request.estimateGas(options, [])
-        .then((gas) => {
-          options.gas = gas.mul(1.2).toFixed(0);
-          // TODO: show message
-          this.setState({ step: 'pending' });
-          return request.postTransaction(options, []);
-        })
-        .then((handle) => {
-          // TODO: The "request rejected" error doesn't have any property to
-          // distinguish it from other errors, so we can't give a meaningful error here.
-          return api.pollMethod('parity_checkRequest', handle);
-        })
-        .then((txHash) => {
-          onData({ txHash: txHash });
-          this.setState({ step: 'posted' });
-          return waitForConfirmations(api, txHash, 1);
-        });
-    }
-
-    chain
-      .then(() => {
-        this.setState({ step: 'mined' });
-        return postToVerificationServer({ number, address: account });
-      })
-      .then(() => {
-        this.setState({ step: 'sms-sent' });
-        onSuccess();
-        nextStep();
-      })
-      .catch((err) => {
-        console.error('failed to request sms verification', err);
-        onError(err);
-        this.setState({
-          step: 'error',
-          error: 'Failed to request a confirmation SMS: ' + err.message
-        });
-        // TODO: show message in SnackBar
-      });
-  }
 }