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;
-}
-.terms li {
+  }
+
+  li {
     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>
       );
-    }
-    if (isVerified === false) {
+    } else 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) {
-      action = store.done;
-    } else if (phase === 2) {
-      action = store.sendConfirmation;
-    } else if (phase === 1) {
-      action = store.queryCode;
-    } else if (phase === 0) {
+    switch (phase) {
+      case 0:
         action = store.sendRequest;
+        break;
+      case 1:
+        action = store.queryCode;
+        break;
+      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) {
+      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 (
           <div className={ styles.centered }>
             <TxHash hash={ tx } maxConfirmations={ 1 } />
             <p>Please keep this window open.</p>
           </div>
         );
-    }
 
-    if (step === REQUESTING_SMS) {
-      return (<p>Requesting an SMS from the Parity server.</p>);
-    }
+      case REQUESTING_SMS:
+        return (
+          <p>Requesting an SMS from the Parity server.</p>
+        );
 
+      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) {
+      case GATHERED_DATA:
         return this.fee && this.isVerified === false && this.isNumberValid && this.consentGiven;
-    }
-    if (this.step === REQUESTED_SMS) {
+      case REQUESTED_SMS:
         return this.requestTx;
-    }
-    if (this.step === QUERY_CODE) {
+      case QUERY_CODE:
         return this.isCodeValid;
-    }
-    if (this.step === POSTED_CONFIRMATION) {
+      case POSTED_CONFIRMATION:
         return this.confirmationTx;
-    }
+      default:
         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,7 +138,8 @@ export default class VerificationStore {
         this.error = 'Failed to check if requested: ' + err.message;
       });
 
-    Promise.all([ fee, isVerified, hasRequested ])
+    Promise
+      .all([ fee, isVerified, hasRequested ])
       .then(() => {
         this.step = GATHERED_DATA;
       });

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 }>