sms verification: show fee in consent form

This commit is contained in:
Jannis R 2016-11-09 13:23:07 +01:00
parent e84531f31c
commit e7113e7eb4
No known key found for this signature in database
GPG Key ID: 0FE83946296A88A5
3 changed files with 36 additions and 8 deletions

View File

@ -18,27 +18,41 @@ import React, { Component, PropTypes } from 'react';
import { Checkbox } from 'material-ui';
import phone from 'phoneformat.js';
import { fromWei } from '../../../api/util/wei';
import { Form, Input } from '../../../ui';
import styles from './gatherData.css';
export default class GatherData extends Component {
static propTypes = {
contract: PropTypes.object.isRequired,
data: PropTypes.object.isRequired,
onData: PropTypes.func.isRequired,
onDataIsValid: PropTypes.func.isRequired,
onDataIsInvalid: PropTypes.func.isRequired,
onData: PropTypes.func.isRequired
onDataIsInvalid: PropTypes.func.isRequired
}
state = {
init: true,
numberIsValid: null,
consentGiven: false
};
componentWillMount () {
const { init } = this.state;
if (init) {
this.queryFee();
this.setState({ init: false });
}
}
render () {
const { fee } = this.props.data;
const { numberIsValid } = this.state;
return (
<Form>
<p>{ fee ? `The fee is ${fromWei(fee).toFixed(3)} ETH.` : 'Fetching the fee…' }</p>
<Input
label={ 'phone number' }
hint={ 'the sms will be sent to this number' }
@ -55,6 +69,20 @@ export default class GatherData extends Component {
);
}
queryFee = () => {
const { contract, onData } = this.props;
contract.instance.fee.call()
.then((fee) => {
onData({ fee });
this.onChange();
})
.catch((err) => {
console.error('error fetching fee', err);
this.onChange();
});
}
numberOnSubmit = (value) => {
this.numberOnChange(null, value);
this.props.onData({ number: value });
@ -74,9 +102,10 @@ export default class GatherData extends Component {
}
onChange = () => {
const { fee } = this.props.data;
const { numberIsValid, consentGiven } = this.state;
if (numberIsValid && consentGiven) {
if (fee && numberIsValid && consentGiven) {
this.props.onDataIsValid();
} else {
this.props.onDataIsInvalid();

View File

@ -154,8 +154,11 @@ export default class SMSVerification extends Component {
}
renderSecondStep () {
const { contract, data } = this.state;
return (
<GatherData
contract={ contract } data={ data }
onData={ this.onData }
onDataIsValid={ this.onDataIsValid }
onDataIsInvalid={ this.onDataIsInvalid }

View File

@ -18,7 +18,6 @@ import React, { Component, PropTypes } from 'react';
import qs from 'querystring';
import TxHash from '../../../ui/TxHash';
import { toWei } from '../../../api/util/wei';
import styles from './sendRequest.css';
@ -121,10 +120,7 @@ export default class SendRequest extends Component {
send = () => {
const { api } = this.context;
const { account, contract, onData, onError, onSuccess } = this.props;
const { number } = this.props.data;
// TODO: redeploy SMSVerification.sol, it has a public fee prop now
const fee = toWei(0.01); // 0.01 Eth
const { fee, number } = this.props.data;
const request = contract.functions.find((fn) => fn.name === 'request');
const options = { from: account, value: fee.toString() };