sms verification: show fee in consent form

js/src/modals/SMSVerification/GatherData/gatherData.js

@@ -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();

js/src/modals/SMSVerification/SMSVerification.js

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

js/src/modals/SMSVerification/SendRequest/sendRequest.js

@@ -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() };