src/components/layout/save/index.jsx

   1 import React from 'react'
   2 import { FixedLimitDeposit} from './action'
   3 import { dueBlockHeight, gas } from '../../constants'
   4
   5 class Save extends React.Component {
   6
   7   constructor(props) {
   8     super(props);
   9     this.state = {
  10       amount: '',
  11       address: '',
  12       msg:'',
  13       error:''
  14     };
  15
  16     this.handleInputChange = this.handleInputChange.bind(this);
  17     this.handleSubmit = this.handleSubmit.bind(this);
  18   }
  19
  20   componentDidMount() {
  21     if (
  22       window.bytom
  23       && window.bytom.defaultAccount
  24     ) {
  25       this.setState({ account: window.bytom.defaultAccount })
  26     }
  27   }
  28
  29   handleInputChange(event) {
  30     const target = event.target;
  31     const value = target.value;
  32     const name = target.name;
  33
  34     this.setState({
  35       [name]: value
  36     });
  37   }
  38
  39   handleSubmit(event) {
  40     event.preventDefault();
  41
  42     const amount = Number(event.target.amount.value)
  43     const account = this.state.account
  44     const address = account.address
  45
  46     FixedLimitDeposit(account, amount, address)
  47       .then(()=> {
  48           this.setState({
  49             error:'',
  50             msg:`Submit success!!! you spent ${amount} deposite asset,and gain ${amount} bill asset.`
  51           })
  52         }).catch(err => {
  53           this.setState({
  54             error:err,
  55             msg: ''
  56           })
  57         })
  58   }
  59
  60   render() {
  61     return (
  62       <div>
  63         <h2>Deposit</h2>
  64         <div className="mt-3 mb-4">
  65           <p className='lead'>Deposit should happen under the block height {dueBlockHeight}.</p>
  66           <p className='lead' >Spend {this.state.amount} Deposit Asset from your current chrome extension account <b className="font-weight-bolder text-uppercase">{this.state.account&&this.state.account.alias}</b> and you will get the relevant {this.state.amount} Bill Asset.</p>
  67           <p>Please make sure that your account has enough Deposit Asset.</p>
  68         </div>
  69         <form onSubmit={this.handleSubmit}>
  70           <div className="form-group">
  71             <label>Deposit Asset Amount</label>
  72             <input
  73               type="amount"
  74               className="form-control"
  75               placeholder="Amount Saving"
  76               name="amount"
  77               value={this.state.amount}
  78               onChange={this.handleInputChange} />
  79           </div>
  80           <p>Fee:  {gas} BTM</p>
  81           <button type="submit" className="btn btn-primary">Spend Asset</button>
  82
  83           {this.state.msg && <div className="alert alert-success mt-4" role="alert">
  84             {this.state.msg}
  85           </div>}
  86           {this.state.error && <div className="alert alert-danger mt-4" role="alert">
  87             {this.state.error}
  88           </div>}
  89
  90         </form>
  91       </div>
  92     )
  93   }
  94 }
  95
  96 export default Save