sms verification: fix styling ✨

js/src/contracts/abi/index.js

@@ -23,6 +23,7 @@ import githubhint from './githubhint.json';
 import owned from './owned.json';
 import registry from './registry.json';
 import signaturereg from './signaturereg.json';
+import smsVerification from './sms-verification.json';
 import tokenreg from './tokenreg.json';
 import wallet from './wallet.json';
 
@@ -36,6 +37,7 @@ export {
   owned,
   registry,
   signaturereg,
+  smsVerification,
   tokenreg,
   wallet
 };

js/src/modals/SMSVerification/Done/done.css

@@ -23,6 +23,7 @@
   display: flex;
   align-items: center;
 }
+
 .message {
   margin-top: 0;
   margin-bottom: 0;

js/src/modals/SMSVerification/GatherData/gatherData.css

@@ -37,11 +37,13 @@
 .terms {
   line-height: 1.3;
   opacity: .7;
-}
+
-.terms ul {
+  ul {
-  padding-left: 1.5em;
+    padding-left: 1.5em;
-}
+  }
-.terms li {
+
-  margin-top: .2em;
+  li {
-  margin-bottom: .2em;
+    margin-top: .2em;
+    margin-bottom: .2em;
+  }
 }

js/src/modals/SMSVerification/GatherData/gatherData.js

@@ -96,8 +96,7 @@ export default class GatherData extends Component {
           <p className={ styles.message }>Your account is already verified.</p>
         </div>
       );
-    }
+    } else if (isVerified === false) {
-    if (isVerified === false) {
       return (
         <div className={ styles.container }>
           <SuccessIcon />
@@ -105,7 +104,9 @@ export default class GatherData extends Component {
         </div>
       );
     }
-    return (<p className={ styles.message }>Checking if your account is verified…</p>);
+    return (
+      <p className={ styles.message }>Checking if your account is verified…</p>
+    );
   }
 
   renderRequested () {
@@ -132,7 +133,9 @@ export default class GatherData extends Component {
         </div>
       );
     }
-    return (<p className={ styles.message }>Checking if you requested verification…</p>);
+    return (
+      <p className={ styles.message }>Checking if you requested verification…</p>
+    );
   }
 
   numberOnSubmit = (value) => {

js/src/modals/SMSVerification/QueryCode/queryCode.js

@@ -45,6 +45,7 @@ export default class QueryCode extends Component {
   onChange = (_, code) => {
     this.props.setCode(code.trim());
   }
+
   onSubmit = (code) => {
     this.props.setCode(code.trim());
   }

js/src/modals/SMSVerification/SMSVerification.js

@@ -83,7 +83,9 @@ export default class SMSVerification extends Component {
         onClick={ onClose }
       />
     );
-    if (error) return (<div>{ cancel }</div>);
+    if (error) {
+      return (<div>{ cancel }</div>);
+    }
 
     if (phase === 4) {
       return (
@@ -100,14 +102,19 @@ export default class SMSVerification extends Component {
     }
 
     let action;
-    if (phase === 3) {
+    switch (phase) {
-      action = store.done;
+      case 0:
-    } else if (phase === 2) {
+        action = store.sendRequest;
-      action = store.sendConfirmation;
+        break;
-    } else if (phase === 1) {
+      case 1:
-      action = store.queryCode;
+        action = store.queryCode;
-    } else if (phase === 0) {
+        break;
-      action = store.sendRequest;
+      case 2:
+        action = store.sendConfirmation;
+        break;
+      case 3:
+        action = store.done;
+        break;
     }
 
     return (
@@ -124,7 +131,9 @@ export default class SMSVerification extends Component {
   }
 
   renderStep (phase, error) {
-    if (error) return (<p>{ error }</p>);
+    if (error) {
+      return (<p>{ error }</p>);
+    }
 
     const {
       step,

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

@@ -35,23 +35,25 @@ export default class SendRequest extends Component {
   render () {
     const { step, tx } = this.props;
 
-    if (step === POSTING_REQUEST) {
+    switch (step) {
-      return (<p>A verification request will be sent to the contract. Please authorize this using the Parity Signer.</p>);
+      case POSTING_REQUEST:
-    }
+        return (<p>A verification request will be sent to the contract. Please authorize this using the Parity Signer.</p>);
 
-    if (step === POSTED_REQUEST) {
+      case POSTED_REQUEST:
-      return (
+        return (
-        <div className={ styles.centered }>
+          <div className={ styles.centered }>
-          <TxHash hash={ tx } maxConfirmations={ 1 } />
+            <TxHash hash={ tx } maxConfirmations={ 1 } />
-          <p>Please keep this window open.</p>
+            <p>Please keep this window open.</p>
-        </div>
+          </div>
-      );
+        );
-    }
 
-    if (step === REQUESTING_SMS) {
+      case REQUESTING_SMS:
-      return (<p>Requesting an SMS from the Parity server.</p>);
+        return (
-    }
+          <p>Requesting an SMS from the Parity server.</p>
+        );
 
-    return null;
+      default:
+        return null;
+    }
   }
 }

js/src/modals/SMSVerification/store.js

@@ -69,29 +69,18 @@ export default class VerificationStore {
       return false;
     }
 
-    if (this.step === GATHERED_DATA) {
+    switch (this.step) {
-      return this.fee && this.isVerified === false && this.isNumberValid && this.consentGiven;
+      case GATHERED_DATA:
+        return this.fee && this.isVerified === false && this.isNumberValid && this.consentGiven;
+      case REQUESTED_SMS:
+        return this.requestTx;
+      case QUERY_CODE:
+        return this.isCodeValid;
+      case POSTED_CONFIRMATION:
+        return this.confirmationTx;
+      default:
+        return false;
     }
-    if (this.step === REQUESTED_SMS) {
-      return this.requestTx;
-    }
-    if (this.step === QUERY_CODE) {
-      return this.isCodeValid;
-    }
-    if (this.step === POSTED_CONFIRMATION) {
-      return this.confirmationTx;
-    }
-    return false;
-  }
-
-  @action setNumber = (number) => {
-    this.number = number;
-  }
-  @action setConsentGiven = (consentGiven) => {
-    this.consentGiven = consentGiven;
-  }
-  @action setCode = (code) => {
-    this.code = code;
   }
 
   constructor (api, account) {
@@ -106,6 +95,18 @@ export default class VerificationStore {
     });
   }
 
+  @action setNumber = (number) => {
+    this.number = number;
+  }
+
+  @action setConsentGiven = (consentGiven) => {
+    this.consentGiven = consentGiven;
+  }
+
+  @action setCode = (code) => {
+    this.code = code;
+  }
+
   @action gatherData = () => {
     const { contract, account } = this;
     this.step = GATHERING_DATA;
@@ -137,10 +138,11 @@ export default class VerificationStore {
         this.error = 'Failed to check if requested: ' + err.message;
       });
 
-    Promise.all([ fee, isVerified, hasRequested ])
+    Promise
-    .then(() => {
+      .all([ fee, isVerified, hasRequested ])
-      this.step = GATHERED_DATA;
+      .then(() => {
-    });
+        this.step = GATHERED_DATA;
+      });
   }
 
   @action sendRequest = () => {
@@ -165,13 +167,13 @@ export default class VerificationStore {
         .then((txHash) => {
           this.requestTx = txHash;
           return checkIfTxFailed(api, txHash, options.gas)
-          .then((hasFailed) => {
+            .then((hasFailed) => {
-            if (hasFailed) {
+              if (hasFailed) {
-              throw new Error('Transaction failed, all gas used up.');
+                throw new Error('Transaction failed, all gas used up.');
-            }
+              }
-            this.step = POSTED_REQUEST;
+              this.step = POSTED_REQUEST;
-            return waitForConfirmations(api, txHash, 1);
+              return waitForConfirmations(api, txHash, 1);
-          });
+            });
         });
     }
 
@@ -214,13 +216,13 @@ export default class VerificationStore {
       .then((txHash) => {
         this.confirmationTx = txHash;
         return checkIfTxFailed(api, txHash, options.gas)
-        .then((hasFailed) => {
+          .then((hasFailed) => {
-          if (hasFailed) {
+            if (hasFailed) {
-            throw new Error('Transaction failed, all gas used up.');
+              throw new Error('Transaction failed, all gas used up.');
-          }
+            }
-          this.step = POSTED_CONFIRMATION;
+            this.step = POSTED_CONFIRMATION;
-          return waitForConfirmations(api, txHash, 1);
+            return waitForConfirmations(api, txHash, 1);
-        });
+          });
       })
       .then(() => {
         this.step = DONE;

js/src/ui/TxHash/txHash.js

@@ -102,7 +102,9 @@ class TxHash extends Component {
       <div className={ styles.confirm }>
         <LinearProgress
           className={ styles.progressbar }
-          min={ 0 } max={ maxConfirmations } value={ value }
+          min={ 0 }
+          max={ maxConfirmations }
+          value={ value }
           color='white'
           mode='determinate' />
         <div className={ styles.progressinfo }>