diff --git a/js/src/modals/SMSVerification/SMSVerification.js b/js/src/modals/SMSVerification/SMSVerification.js
index ce2549ebc..7c31e00de 100644
--- a/js/src/modals/SMSVerification/SMSVerification.js
+++ b/js/src/modals/SMSVerification/SMSVerification.js
@@ -15,14 +15,20 @@
// along with Parity. If not, see .
import React, { Component, PropTypes } from 'react';
+import { observer } from 'mobx-react';
import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
import ContentClear from 'material-ui/svg-icons/content/clear';
import { Button, IdentityIcon, Modal } from '../../ui';
-import ABI from '../../contracts/abi/sms-verification.json';
-// TODO: move this to a better place
-const contract = '0xcE381B876A85A72303f7cA7b3a012f58F4CEEEeB';
+import VerificationStore from './store';
+const {
+ GATHERING_DATA, GATHERED_DATA,
+ POSTING_REQUEST, POSTED_REQUEST,
+ REQUESTING_SMS, REQUESTED_SMS,
+ POSTING_CONFIRMATION, POSTED_CONFIRMATION,
+ DONE
+} = VerificationStore;
import GatherData from './GatherData';
import SendRequest from './SendRequest';
@@ -30,6 +36,7 @@ import QueryCode from './QueryCode';
import SendConfirmation from './SendConfirmation';
import Done from './Done';
+@observer
export default class SMSVerification extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
@@ -40,41 +47,51 @@ export default class SMSVerification extends Component {
onClose: PropTypes.func.isRequired
}
+ static uiSteps = { // mapping (store steps -> steps)
+ [GATHERING_DATA]: 0, [GATHERED_DATA]: 0,
+ [POSTING_REQUEST]: 1, [POSTED_REQUEST]: 1, [REQUESTING_SMS]: 1,
+ [REQUESTED_SMS]: 2,
+ [POSTING_CONFIRMATION]: 3, [POSTED_CONFIRMATION]: 3,
+ [DONE]: 4
+ }
+
state = {
- contract: null,
- step: 0,
- stepIsValid: false,
- data: {}
+ store: null
}
componentDidMount () {
const { api } = this.context;
+ const { account } = this.props;
- this.setState({
- contract: api.newContract(ABI, contract)
+ const store = new VerificationStore(api, account);
+ this.setState({ store }, () => {
+ store.gatherData();
});
}
render () {
- const { step } = this.state;
+ const { store } = this.state;
+ if (!store) return null;
+ const step = SMSVerification.uiSteps[store.step];
+ const { error, isStepValid } = store;
return (
- { this.renderStep() }
+ { this.renderStep(step, error) }
);
}
- renderDialogActions () {
+ renderDialogActions (step, error, isStepValid) {
const { onClose, account } = this.props;
- const { step, stepIsValid } = this.state;
+ const { store } = this.state;
const cancel = (
);
+ if (error) return (
{ cancel }
);
if (step === 4) {
return (
@@ -90,7 +108,7 @@ export default class SMSVerification extends Component {
{ cancel }
}
onClick={ onClose }
/>
@@ -98,116 +116,62 @@ export default class SMSVerification extends Component {
);
}
+ let action;
+ if (step === 3) {
+ action = store.done;
+ } else if (step === 2) {
+ action = store.sendConfirmation;
+ } else if (step === 1) {
+ action = store.queryCode;
+ } else if (step === 0) {
+ action = store.sendRequest;
+ }
+
return (
{ cancel }
}
- onClick={ this.next }
+ onClick={ action }
/>
);
}
- renderStep () {
- const { contract } = this.state;
- if (!contract) {
- return null;
- }
+ renderStep (step, error) {
+ if (error) return ({ error }
);
+
+ const {
+ fee, isNumberValid, isVerified, hasRequested,
+ requestTx, isCodeValid, confirmationTx,
+ setNumber, setConsentGiven, setCode
+ } = this.state.store;
- const { step } = this.state;
if (step === 4) {
- return this.renderFifthStep();
- } else if (step === 3) {
- return this.renderFourthStep();
- } else if (step === 2) {
- return this.renderThirdStep();
- } else if (step === 1) {
- return this.renderSecondStep();
- } else {
- return this.renderFirstStep();
+ return ();
}
- }
-
- onDataIsValid = () => {
- this.setState({ stepIsValid: true });
- }
- onDataIsInvalid = () => {
- this.setState({ stepIsValid: false });
- }
- onData = (data) => {
- this.setState({
- data: Object.assign({}, this.state.data, data)
- });
- }
-
- next = () => {
- const { stepIsValid } = this.state;
- if (stepIsValid) {
- this.setState({ step: this.state.step + 1, stepIsValid: false });
+ if (step === 3) {
+ return ();
+ }
+ if (step === 2) {
+ return ();
+ }
+ if (step === 1) {
+ return ();
+ }
+ if (step === 0) {
+ const { setNumber, setConsentGiven } = this.state.store;
+ return (
+
+ );
}
- }
- renderFirstStep () {
- const { account } = this.props;
- const { contract, data } = this.state;
-
- return (
-
- );
- }
-
- renderSecondStep () {
- const { account } = this.props;
- const { contract, data } = this.state;
-
- return (
-
- );
- }
-
- renderThirdStep () {
- const { data } = this.state;
-
- return (
-
- );
- }
-
- renderFourthStep () {
- const { account } = this.props;
- const { contract, data } = this.state;
-
- return (
-
- );
- }
-
- renderFifthStep () {
- return ();
+ return null;
}
}
diff --git a/js/src/modals/SMSVerification/store.js b/js/src/modals/SMSVerification/store.js
index 669a168e6..f58f60142 100644
--- a/js/src/modals/SMSVerification/store.js
+++ b/js/src/modals/SMSVerification/store.js
@@ -60,6 +60,39 @@ export default class VerificationStore {
return phone.isValidNumber(this.number);
}
+ @computed get isStepValid () {
+ if (this.step === VerificationStore.DONE) {
+ return true;
+ }
+ if (this.error) {
+ return false;
+ }
+
+ if (this.step === VerificationStore.GATHERED_DATA) {
+ return this.fee && this.isVerified === false && this.isNumberValid && this.consentGiven;
+ }
+ if (this.step === VerificationStore.REQUESTED_SMS) {
+ return this.requestTx;
+ }
+ if (this.step === VerificationStore.QUERY_CODE) {
+ return this.isCodeValid;
+ }
+ if (this.step === VerificationStore.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) {
this.api = api;
this.account = account;
@@ -106,14 +139,6 @@ export default class VerificationStore {
});
}
- @action setNumber = (number) => {
- this.number = number;
- }
-
- @action setConsentGiven = (consentGiven) => {
- this.consentGiven = consentGiven;
- }
-
@action sendRequest = () => {
const { api, account, contract, fee, number, hasRequested } = this;
@@ -153,8 +178,8 @@ export default class VerificationStore {
});
}
- @action setCode = (code) => {
- this.code = code;
+ @action queryCode = () => {
+ this.step = VerificationStore.QUERY_CODE;
}
@action sendConfirmation = () => {
@@ -188,4 +213,8 @@ export default class VerificationStore {
this.error = 'Failed to send the verification code: ' + err.message;
});
}
+
+ @action done = () => {
+ this.step = VerificationStore.DONE;
+ }
}