sms verification: bugfixes 🐛

- fixed imports
- renamed `uiSteps` to `phases` to make the distinction between
  actual (tiny) steps and visible UI steps clear
- lookup `requestTx` if request has already been sent
- change code regex to match ethcore/sms-verification@59acb73

js/src/modals/SMSVerification/SMSVerification.js

@@ -43,7 +43,7 @@ export default class SMSVerification extends Component {
     onClose: PropTypes.func.isRequired
   }
 
-  static uiSteps = { // mapping (store steps -> steps)
+  static phases = { // mapping (store steps -> steps)
     [GATHERING_DATA]: 0, [GATHERED_DATA]: 0,
     [POSTING_REQUEST]: 1, [POSTED_REQUEST]: 1, [REQUESTING_SMS]: 1,
     [REQUESTED_SMS]: 2,
@@ -56,24 +56,24 @@ export default class SMSVerification extends Component {
   }
 
   render () {
-    const step = SMSVerification.uiSteps[this.props.store.step];
+    const phase = SMSVerification.phases[this.props.store.step];
     const { error, isStepValid } = this.props.store;
 
     return (
       <Modal
-        actions={ this.renderDialogActions(step, error, isStepValid) }
+        actions={ this.renderDialogActions(phase, error, isStepValid) }
         title='verify your account via SMS'
         visible scroll
-        current={ step }
+        current={ phase }
         steps={ ['Enter Data', 'Request', 'Enter Code', 'Confirm', 'Done!'] }
         waiting={ [ 1, 3 ] }
       >
-        { this.renderStep(step, error) }
+        { this.renderStep(phase, error) }
       </Modal>
     );
   }
 
-  renderDialogActions (step, error, isStepValid) {
+  renderDialogActions (phase, error, isStepValid) {
     const { store, account, onClose } = this.props;
 
     const cancel = (
@@ -85,7 +85,7 @@ export default class SMSVerification extends Component {
     );
     if (error) return (<div>{ cancel }</div>);
 
-    if (step === 4) {
+    if (phase === 4) {
       return (
         <div>
           { cancel }
@@ -100,13 +100,13 @@ export default class SMSVerification extends Component {
     }
 
     let action;
-    if (step === 3) {
+    if (phase === 3) {
       action = store.done;
-    } else if (step === 2) {
+    } else if (phase === 2) {
       action = store.sendConfirmation;
-    } else if (step === 1) {
+    } else if (phase === 1) {
       action = store.queryCode;
-    } else if (step === 0) {
+    } else if (phase === 0) {
       action = store.sendRequest;
     }
 
@@ -123,28 +123,34 @@ export default class SMSVerification extends Component {
     );
   }
 
-  renderStep (step, error) {
+  renderStep (phase, error) {
     if (error) return (<p>{ error }</p>);
 
     const {
-      fee, isNumberValid, isVerified, hasRequested,
+      step,
+      fee, number, isNumberValid, isVerified, hasRequested,
       requestTx, isCodeValid, confirmationTx,
       setNumber, setConsentGiven, setCode
     } = this.props.store;
 
-    if (step === 4) {
+    if (phase === 4) {
       return (<Done />);
     }
-    if (step === 3) {
+    if (phase === 3) {
       return (<SendConfirmation step={ step } tx={ confirmationTx } />);
     }
-    if (step === 2) {
+    if (phase === 2) {
-      return (<QueryCode fee={ fee } isCodeValid={ isCodeValid } setCode={ setCode } />);
+      return (
+        <QueryCode
+          number={ number } fee={ fee } isCodeValid={ isCodeValid }
+          setCode={ setCode }
+        />
+      );
     }
-    if (step === 1) {
+    if (phase === 1) {
       return (<SendRequest step={ step } tx={ requestTx } />);
     }
-    if (step === 0) {
+    if (phase === 0) {
       const { setNumber, setConsentGiven } = this.props.store;
       return (
         <GatherData

js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.js

@@ -17,10 +17,9 @@
 import React, { Component, PropTypes } from 'react';
 
 import TxHash from '../../../ui/TxHash';
-import VerificationStore from '../store';
+import {
-const {
   POSTING_CONFIRMATION, POSTED_CONFIRMATION
-} = VerificationStore;
+} from '../store';
 
 import styles from './sendConfirmation.css';
 

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

@@ -17,10 +17,9 @@
 import React, { Component, PropTypes } from 'react';
 
 import TxHash from '../../../ui/TxHash';
-import VerificationStore from '../store';
+import {
-const {
   POSTING_REQUEST, POSTED_REQUEST, REQUESTING_SMS
-} = VerificationStore;
+} from '../store';
 
 import styles from './sendRequest.css';
 

js/src/modals/SMSVerification/check-if-requested.js

@@ -22,9 +22,10 @@ const checkIfRequested = (contract, account) => {
       if (err) {
         return reject(err);
       }
-      resolve(logs.some((l) => {
+      const e = logs.find((l) => {
         return l.type === 'mined' && l.params.who && l.params.who.value === account;
-      }));
+      });
+      resolve(e ? e.transactionHash : false);
     });
   });
 };

js/src/modals/SMSVerification/post-to-verification-server.js

@@ -28,10 +28,6 @@ const postToVerificationServer = (query) => {
       }
       throw new Error(data.message || 'unknown error');
     });
-  })
-  .catch((err) => {
-    console.error('foooo', err.stack);
-    throw err;
   });
 };
 

js/src/modals/SMSVerification/store.js

@@ -27,7 +27,7 @@ import checkIfRequested from './check-if-requested';
 import waitForConfirmations from './wait-for-confirmations';
 import postToVerificationServer from './post-to-verification-server';
 
-const validCode = /^[A-Z0-9_-]{7,14}$/i;
+const validCode = /^[A-Z\s]+$/i;
 
 export const GATHERING_DATA = 'gathering-data';
 export const GATHERED_DATA = 'gathered-data';
@@ -126,8 +126,11 @@ export default class VerificationStore {
       });
 
     const hasRequested = checkIfRequested(contract, account)
-      .then((hasRequested) => {
+      .then((txHash) => {
-        this.hasRequested = hasRequested;
+        this.hasRequested = !!txHash;
+        if (txHash) {
+          this.requestTx = txHash;
+        }
       })
       .catch((err) => {
         this.error = 'Failed to check if requested: ' + err.message;

js/src/modals/SMSVerification/wait-for-confirmations.js

@@ -27,7 +27,9 @@ const waitForConfirmations = (api, tx, confirmations) => {
         if (err) {
           reject(err);
         } else if (block.minus(confirmations - 1).gte(receipt.blockNumber)) {
+          if (subscription) {
             api.unsubscribe(subscription);
+          }
           resolve();
         }
       })