grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sms verification: simplify code

Browse Source 
- moved the steps into named exports
- moved the store creation into the Accounts component
- fix a linting issue
This commit is contained in:
Jannis R 2016-11-15 16:59:10 +01:00
parent 3e879aac35
commit aa8fc554fe
No known key found for this signature in database
GPG Key ID: 0FE83946296A88A5
4 changed files with 55 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
js/src/modals/SMSVerification/SMSVerification.js
View File

@ -21,14 +21,13 @@ import ContentClear from 'material-ui/svg-icons/content/clear';
import { Button, IdentityIcon, Modal } from '../../ui'; import { Button, IdentityIcon, Modal } from '../../ui';
import VerificationStore from './store'; import {
const {
GATHERING_DATA, GATHERED_DATA, GATHERING_DATA, GATHERED_DATA,
POSTING_REQUEST, POSTED_REQUEST, POSTING_REQUEST, POSTED_REQUEST,
REQUESTING_SMS, REQUESTED_SMS, REQUESTING_SMS, REQUESTED_SMS,
POSTING_CONFIRMATION, POSTED_CONFIRMATION, POSTING_CONFIRMATION, POSTED_CONFIRMATION,
DONE DONE
} = VerificationStore; } from './store';
import GatherData from './GatherData'; import GatherData from './GatherData';
import SendRequest from './SendRequest'; import SendRequest from './SendRequest';
@ -38,12 +37,9 @@ import Done from './Done';
@observer @observer
export default class SMSVerification extends Component { export default class SMSVerification extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
}
static propTypes = { static propTypes = {
account: PropTypes.string, store: PropTypes.any.isRequired,
account: PropTypes.string.isRequired,
onClose: PropTypes.func.isRequired onClose: PropTypes.func.isRequired
} }
@ -55,25 +51,13 @@ export default class SMSVerification extends Component {
[DONE]: 4 [DONE]: 4
} }
state = {
store: null
}
componentDidMount () { componentDidMount () {
const { api } = this.context; this.props.store.gatherData();
const { account } = this.props;
const store = new VerificationStore(api, account);
this.setState({ store }, () => {
store.gatherData();
});
} }
render () { render () {
const { store } = this.state; const step = SMSVerification.uiSteps[this.props.store.step];
if (!store) return null; const { error, isStepValid } = this.props.store;
const step = SMSVerification.uiSteps[store.step];
const { error, isStepValid } = store;
return ( return (
<Modal <Modal
@ -90,8 +74,7 @@ export default class SMSVerification extends Component {
} }
renderDialogActions (step, error, isStepValid) { renderDialogActions (step, error, isStepValid) {
const { onClose, account } = this.props; const { store, account, onClose } = this.props;
const { store } = this.state;
const cancel = ( const cancel = (
<Button <Button
@ -147,7 +130,7 @@ export default class SMSVerification extends Component {
fee, isNumberValid, isVerified, hasRequested, fee, isNumberValid, isVerified, hasRequested,
requestTx, isCodeValid, confirmationTx, requestTx, isCodeValid, confirmationTx,
setNumber, setConsentGiven, setCode setNumber, setConsentGiven, setCode
} = this.state.store; } = this.props.store;
if (step === 4) { if (step === 4) {
return (<Done />); return (<Done />);
@ -162,7 +145,7 @@ export default class SMSVerification extends Component {
return (<SendRequest step={ step } tx={ requestTx } />); return (<SendRequest step={ step } tx={ requestTx } />);
} }
if (step === 0) { if (step === 0) {
const { setNumber, setConsentGiven } = this.state.store; const { setNumber, setConsentGiven } = this.props.store;
return ( return (
<GatherData <GatherData
fee={ fee } isNumberValid={ isNumberValid } fee={ fee } isNumberValid={ isNumberValid }

2
js/src/modals/SMSVerification/post-to-verification-server.js
View File

@ -31,7 +31,7 @@ const postToVerificationServer = (query) => {
}) })
.catch((err) => { .catch((err) => {
console.error('foooo', err.stack); console.error('foooo', err.stack);
throw err throw err;
}); });
}; };

54
js/src/modals/SMSVerification/store.js
View File

@ -29,18 +29,18 @@ import postToVerificationServer from './post-to-verification-server';
const validCode = /^[A-Z0-9_-]{7,14}$/i; const validCode = /^[A-Z0-9_-]{7,14}$/i;
export default class VerificationStore { export const GATHERING_DATA = 'gathering-data';
static GATHERING_DATA = 'gathering-data'; export const GATHERED_DATA = 'gathered-data';
static GATHERED_DATA = 'gathered-data'; export const POSTING_REQUEST = 'posting-request';
static POSTING_REQUEST = 'posting-request'; export const POSTED_REQUEST = 'posted-request';
static POSTED_REQUEST = 'posted-request'; export const REQUESTING_SMS = 'requesting-sms';
static REQUESTING_SMS = 'requesting-sms'; export const REQUESTED_SMS = 'requested-sms';
static REQUESTED_SMS = 'requested-sms'; export const QUERY_CODE = 'query-code';
static QUERY_CODE = 'query-code'; export const POSTING_CONFIRMATION = 'posting-confirmation';
static POSTING_CONFIRMATION = 'posting-confirmation'; export const POSTED_CONFIRMATION = 'posted-confirmation';
static POSTED_CONFIRMATION = 'posted-confirmation'; export const DONE = 'done';
static DONE = 'done';
export default class VerificationStore {
@observable step = null; @observable step = null;
@observable error = null; @observable error = null;
@ -61,23 +61,23 @@ export default class VerificationStore {
} }
@computed get isStepValid () { @computed get isStepValid () {
if (this.step === VerificationStore.DONE) { if (this.step === DONE) {
return true; return true;
} }
if (this.error) { if (this.error) {
return false; return false;
} }
if (this.step === VerificationStore.GATHERED_DATA) { if (this.step === GATHERED_DATA) {
return this.fee && this.isVerified === false && this.isNumberValid && this.consentGiven; return this.fee && this.isVerified === false && this.isNumberValid && this.consentGiven;
} }
if (this.step === VerificationStore.REQUESTED_SMS) { if (this.step === REQUESTED_SMS) {
return this.requestTx; return this.requestTx;
} }
if (this.step === VerificationStore.QUERY_CODE) { if (this.step === QUERY_CODE) {
return this.isCodeValid; return this.isCodeValid;
} }
if (this.step === VerificationStore.POSTED_CONFIRMATION) { if (this.step === POSTED_CONFIRMATION) {
return this.confirmationTx; return this.confirmationTx;
} }
return false; return false;
@ -107,7 +107,7 @@ export default class VerificationStore {
@action gatherData = () => { @action gatherData = () => {
const { contract, account } = this; const { contract, account } = this;
this.step = VerificationStore.GATHERING_DATA; this.step = GATHERING_DATA;
const fee = contract.instance.fee.call() const fee = contract.instance.fee.call()
.then((fee) => { .then((fee) => {
@ -135,7 +135,7 @@ export default class VerificationStore {
Promise.all([ fee, isVerified, hasRequested ]) Promise.all([ fee, isVerified, hasRequested ])
.then(() => { .then(() => {
this.step = VerificationStore.GATHERED_DATA; this.step = GATHERED_DATA;
}); });
} }
@ -147,7 +147,7 @@ export default class VerificationStore {
let chain = Promise.resolve(); let chain = Promise.resolve();
if (!hasRequested) { if (!hasRequested) {
this.step = VerificationStore.POSTING_REQUEST; this.step = POSTING_REQUEST;
chain = request.estimateGas(options, []) chain = request.estimateGas(options, [])
.then((gas) => { .then((gas) => {
options.gas = gas.mul(1.2).toFixed(0); options.gas = gas.mul(1.2).toFixed(0);
@ -160,18 +160,18 @@ export default class VerificationStore {
}) })
.then((txHash) => { .then((txHash) => {
this.requestTx = txHash; this.requestTx = txHash;
this.step = VerificationStore.POSTED_REQUEST; this.step = POSTED_REQUEST;
return waitForConfirmations(api, txHash, 1); return waitForConfirmations(api, txHash, 1);
}); });
} }
chain chain
.then(() => { .then(() => {
this.step = VerificationStore.REQUESTING_SMS; this.step = REQUESTING_SMS;
return postToVerificationServer({ number, address: account }); return postToVerificationServer({ number, address: account });
}) })
.then(() => { .then(() => {
this.step = VerificationStore.REQUESTED_SMS; this.step = REQUESTED_SMS;
}) })
.catch((err) => { .catch((err) => {
this.error = 'Failed to request a confirmation SMS: ' + err.message; this.error = 'Failed to request a confirmation SMS: ' + err.message;
@ -179,7 +179,7 @@ export default class VerificationStore {
} }
@action queryCode = () => { @action queryCode = () => {
this.step = VerificationStore.QUERY_CODE; this.step = QUERY_CODE;
} }
@action sendConfirmation = () => { @action sendConfirmation = () => {
@ -190,7 +190,7 @@ export default class VerificationStore {
const options = { from: account }; const options = { from: account };
const values = [ token ]; const values = [ token ];
this.step = VerificationStore.POSTING_CONFIRMATION; this.step = POSTING_CONFIRMATION;
confirm.estimateGas(options, values) confirm.estimateGas(options, values)
.then((gas) => { .then((gas) => {
options.gas = gas.mul(1.2).toFixed(0); options.gas = gas.mul(1.2).toFixed(0);
@ -203,11 +203,11 @@ export default class VerificationStore {
}) })
.then((txHash) => { .then((txHash) => {
this.confirmationTx = txHash; this.confirmationTx = txHash;
this.step = VerificationStore.POSTED_CONFIRMATION; this.step = POSTED_CONFIRMATION;
return waitForConfirmations(api, txHash, 2); return waitForConfirmations(api, txHash, 2);
}) })
.then(() => { .then(() => {
this.step = VerificationStore.DONE; this.step = DONE;
}) })
.catch((err) => { .catch((err) => {
this.error = 'Failed to send the verification code: ' + err.message; this.error = 'Failed to send the verification code: ' + err.message;
@ -215,6 +215,6 @@ export default class VerificationStore {
} }
@action done = () => { @action done = () => {
this.step = VerificationStore.DONE; this.step = DONE;
} }
} }

19
js/src/views/Account/account.js
View File

@ -30,9 +30,15 @@ import shapeshiftBtn from '../../../assets/images/shapeshift-btn.png';
import Header from './Header'; import Header from './Header';
import Transactions from './Transactions'; import Transactions from './Transactions';
import VerificationStore from '../../modals/SMSVerification/store';
import styles from './account.css'; import styles from './account.css';
class Account extends Component { class Account extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
}
static propTypes = { static propTypes = {
params: PropTypes.object, params: PropTypes.object,
accounts: PropTypes.object, accounts: PropTypes.object,
@ -47,10 +53,19 @@ class Account extends Component {
showEditDialog: false, showEditDialog: false,
showFundDialog: false, showFundDialog: false,
showVerificationDialog: false, showVerificationDialog: false,
verificationStore: null,
showTransferDialog: false, showTransferDialog: false,
showPasswordDialog: false showPasswordDialog: false
} }
componentDidMount () {
const { api } = this.context;
const { address } = this.props.params;
const store = new VerificationStore(api, address);
this.setState({ verificationStore: store });
}
render () { render () {
const { accounts, balances, isTest } = this.props; const { accounts, balances, isTest } = this.props;
const { address } = this.props.params; const { address } = this.props.params;
@ -162,12 +177,12 @@ class Account extends Component {
return null; return null;
} }
const store = this.state.verificationStore;
const { address } = this.props.params; const { address } = this.props.params;
// TODO: pass props
return ( return (
<SMSVerification <SMSVerification
account={ address } store={ store } account={ address }
onClose={ this.onVerificationClose } onClose={ this.onVerificationClose }
/> />
); );