From aa8fc554fe2b2ec440198336c50055efb946bedf Mon Sep 17 00:00:00 2001 From: Jannis R Date: Tue, 15 Nov 2016 16:59:10 +0100 Subject: [PATCH] sms verification: simplify code - moved the steps into named exports - moved the store creation into the Accounts component - fix a linting issue --- .../modals/SMSVerification/SMSVerification.js | 37 ++++--------- .../post-to-verification-server.js | 2 +- js/src/modals/SMSVerification/store.js | 54 +++++++++---------- js/src/views/Account/account.js | 19 ++++++- 4 files changed, 55 insertions(+), 57 deletions(-) diff --git a/js/src/modals/SMSVerification/SMSVerification.js b/js/src/modals/SMSVerification/SMSVerification.js index 7c31e00de..c3d02c95d 100644 --- a/js/src/modals/SMSVerification/SMSVerification.js +++ b/js/src/modals/SMSVerification/SMSVerification.js @@ -21,14 +21,13 @@ import ContentClear from 'material-ui/svg-icons/content/clear'; import { Button, IdentityIcon, Modal } from '../../ui'; -import VerificationStore from './store'; -const { +import { GATHERING_DATA, GATHERED_DATA, POSTING_REQUEST, POSTED_REQUEST, REQUESTING_SMS, REQUESTED_SMS, POSTING_CONFIRMATION, POSTED_CONFIRMATION, DONE -} = VerificationStore; +} from './store'; import GatherData from './GatherData'; import SendRequest from './SendRequest'; @@ -38,12 +37,9 @@ import Done from './Done'; @observer export default class SMSVerification extends Component { - static contextTypes = { - api: PropTypes.object.isRequired - } - static propTypes = { - account: PropTypes.string, + store: PropTypes.any.isRequired, + account: PropTypes.string.isRequired, onClose: PropTypes.func.isRequired } @@ -55,25 +51,13 @@ export default class SMSVerification extends Component { [DONE]: 4 } - state = { - store: null - } - componentDidMount () { - const { api } = this.context; - const { account } = this.props; - - const store = new VerificationStore(api, account); - this.setState({ store }, () => { - store.gatherData(); - }); + this.props.store.gatherData(); } render () { - const { store } = this.state; - if (!store) return null; - const step = SMSVerification.uiSteps[store.step]; - const { error, isStepValid } = store; + const step = SMSVerification.uiSteps[this.props.store.step]; + const { error, isStepValid } = this.props.store; return ( ); @@ -162,7 +145,7 @@ export default class SMSVerification extends Component { return (); } if (step === 0) { - const { setNumber, setConsentGiven } = this.state.store; + const { setNumber, setConsentGiven } = this.props.store; return ( { }) .catch((err) => { console.error('foooo', err.stack); - throw err + throw err; }); }; diff --git a/js/src/modals/SMSVerification/store.js b/js/src/modals/SMSVerification/store.js index f58f60142..01c775c3a 100644 --- a/js/src/modals/SMSVerification/store.js +++ b/js/src/modals/SMSVerification/store.js @@ -29,18 +29,18 @@ import postToVerificationServer from './post-to-verification-server'; const validCode = /^[A-Z0-9_-]{7,14}$/i; -export default class VerificationStore { - static GATHERING_DATA = 'gathering-data'; - static GATHERED_DATA = 'gathered-data'; - static POSTING_REQUEST = 'posting-request'; - static POSTED_REQUEST = 'posted-request'; - static REQUESTING_SMS = 'requesting-sms'; - static REQUESTED_SMS = 'requested-sms'; - static QUERY_CODE = 'query-code'; - static POSTING_CONFIRMATION = 'posting-confirmation'; - static POSTED_CONFIRMATION = 'posted-confirmation'; - static DONE = 'done'; +export const GATHERING_DATA = 'gathering-data'; +export const GATHERED_DATA = 'gathered-data'; +export const POSTING_REQUEST = 'posting-request'; +export const POSTED_REQUEST = 'posted-request'; +export const REQUESTING_SMS = 'requesting-sms'; +export const REQUESTED_SMS = 'requested-sms'; +export const QUERY_CODE = 'query-code'; +export const POSTING_CONFIRMATION = 'posting-confirmation'; +export const POSTED_CONFIRMATION = 'posted-confirmation'; +export const DONE = 'done'; +export default class VerificationStore { @observable step = null; @observable error = null; @@ -61,23 +61,23 @@ export default class VerificationStore { } @computed get isStepValid () { - if (this.step === VerificationStore.DONE) { + if (this.step === DONE) { return true; } if (this.error) { return false; } - if (this.step === VerificationStore.GATHERED_DATA) { + if (this.step === GATHERED_DATA) { return this.fee && this.isVerified === false && this.isNumberValid && this.consentGiven; } - if (this.step === VerificationStore.REQUESTED_SMS) { + if (this.step === REQUESTED_SMS) { return this.requestTx; } - if (this.step === VerificationStore.QUERY_CODE) { + if (this.step === QUERY_CODE) { return this.isCodeValid; } - if (this.step === VerificationStore.POSTED_CONFIRMATION) { + if (this.step === POSTED_CONFIRMATION) { return this.confirmationTx; } return false; @@ -107,7 +107,7 @@ export default class VerificationStore { @action gatherData = () => { const { contract, account } = this; - this.step = VerificationStore.GATHERING_DATA; + this.step = GATHERING_DATA; const fee = contract.instance.fee.call() .then((fee) => { @@ -135,7 +135,7 @@ export default class VerificationStore { Promise.all([ fee, isVerified, hasRequested ]) .then(() => { - this.step = VerificationStore.GATHERED_DATA; + this.step = GATHERED_DATA; }); } @@ -147,7 +147,7 @@ export default class VerificationStore { let chain = Promise.resolve(); if (!hasRequested) { - this.step = VerificationStore.POSTING_REQUEST; + this.step = POSTING_REQUEST; chain = request.estimateGas(options, []) .then((gas) => { options.gas = gas.mul(1.2).toFixed(0); @@ -160,18 +160,18 @@ export default class VerificationStore { }) .then((txHash) => { this.requestTx = txHash; - this.step = VerificationStore.POSTED_REQUEST; + this.step = POSTED_REQUEST; return waitForConfirmations(api, txHash, 1); }); } chain .then(() => { - this.step = VerificationStore.REQUESTING_SMS; + this.step = REQUESTING_SMS; return postToVerificationServer({ number, address: account }); }) .then(() => { - this.step = VerificationStore.REQUESTED_SMS; + this.step = REQUESTED_SMS; }) .catch((err) => { this.error = 'Failed to request a confirmation SMS: ' + err.message; @@ -179,7 +179,7 @@ export default class VerificationStore { } @action queryCode = () => { - this.step = VerificationStore.QUERY_CODE; + this.step = QUERY_CODE; } @action sendConfirmation = () => { @@ -190,7 +190,7 @@ export default class VerificationStore { const options = { from: account }; const values = [ token ]; - this.step = VerificationStore.POSTING_CONFIRMATION; + this.step = POSTING_CONFIRMATION; confirm.estimateGas(options, values) .then((gas) => { options.gas = gas.mul(1.2).toFixed(0); @@ -203,11 +203,11 @@ export default class VerificationStore { }) .then((txHash) => { this.confirmationTx = txHash; - this.step = VerificationStore.POSTED_CONFIRMATION; + this.step = POSTED_CONFIRMATION; return waitForConfirmations(api, txHash, 2); }) .then(() => { - this.step = VerificationStore.DONE; + this.step = DONE; }) .catch((err) => { this.error = 'Failed to send the verification code: ' + err.message; @@ -215,6 +215,6 @@ export default class VerificationStore { } @action done = () => { - this.step = VerificationStore.DONE; + this.step = DONE; } } diff --git a/js/src/views/Account/account.js b/js/src/views/Account/account.js index 24c0b44cb..86a76073e 100644 --- a/js/src/views/Account/account.js +++ b/js/src/views/Account/account.js @@ -30,9 +30,15 @@ import shapeshiftBtn from '../../../assets/images/shapeshift-btn.png'; import Header from './Header'; import Transactions from './Transactions'; +import VerificationStore from '../../modals/SMSVerification/store'; + import styles from './account.css'; class Account extends Component { + static contextTypes = { + api: PropTypes.object.isRequired + } + static propTypes = { params: PropTypes.object, accounts: PropTypes.object, @@ -47,10 +53,19 @@ class Account extends Component { showEditDialog: false, showFundDialog: false, showVerificationDialog: false, + verificationStore: null, showTransferDialog: false, showPasswordDialog: false } + componentDidMount () { + const { api } = this.context; + const { address } = this.props.params; + + const store = new VerificationStore(api, address); + this.setState({ verificationStore: store }); + } + render () { const { accounts, balances, isTest } = this.props; const { address } = this.props.params; @@ -162,12 +177,12 @@ class Account extends Component { return null; } + const store = this.state.verificationStore; const { address } = this.props.params; - // TODO: pass props return ( );