src/components/layout/account/index.jsx

   1 import React, {
   2   Component
   3 } from 'react'
   4 import { connect } from "react-redux"
   5 import jdenticon from "jdenticon"
   6 import action from "./action";
   7 import GetContractArgs from "../../constants";
   8 import { listBalances } from '../../util/api'
   9
  10 class Account extends Component {
  11   constructor(props) {
  12     super(props)
  13     this.state = {
  14       record: '',
  15       account:''
  16     };
  17
  18     this.listBalance = this.listBalance.bind(this)
  19   }
  20
  21   componentDidMount() {
  22     const bytom = this.props.bytom
  23     if (
  24       bytom
  25       && bytom.default_account
  26     ) {
  27       const account = bytom.default_account
  28       this.setState({ account })
  29       if(account){
  30         if(global.bytomAPI){
  31           this.props.updateBalances(account.accountId)
  32         }
  33         this.listBalance(account, GetContractArgs().assetDeposited)
  34       }
  35     }
  36   }
  37
  38   listBalance(account, assetId){
  39     listBalances({address: account.address, asset:assetId})
  40       .then(resp =>{
  41         this.setState({
  42           record: resp.data
  43         })
  44       })
  45   }
  46
  47   render () {
  48     if(!this.state.account){
  49       return <div></div>
  50     }
  51
  52     const account = this.state.account
  53     const svg = jdenticon.toSvg(account.alias, 100)
  54
  55     let record = <div></div>
  56     if(this.state.record !== '' && this.state.record.length !== 0){
  57       let list = []
  58       this.state.record.forEach(
  59         (re, i) =>{
  60           list.push( <tr key={'record'+i}>
  61             <th scope="row">{i}</th>
  62             <td>{re.amount}</td>
  63             <td>{new Date(re.create_at * 1000).toLocaleString()}</td>
  64           </tr>)
  65         }
  66       )
  67       record= <table className="table">
  68         <thead>
  69         <tr>
  70           <th scope="col">#</th>
  71           <th scope="col">Amount</th>
  72           <th scope="col">Time</th>
  73         </tr>
  74         </thead>
  75         <tbody>
  76           {list}
  77         </tbody>
  78       </table>
  79     }else{
  80       record = <p>No Record Found.</p>
  81     }
  82
  83     return (
  84       <div className="container">
  85         <div className="row">
  86           <div className="col-2">
  87             <div className="mr-2" dangerouslySetInnerHTML={{__html:svg}} />
  88           </div>
  89           <div className="col">
  90             <h1 className="text-uppercase">{account.alias}</h1>
  91             <div>Address: {account.address}</div>
  92             <div>Deposit Asset balance: {this.props.depositAssetBalance || 0}</div>
  93             <div>Bill Asset Balance: {this.props.billAssetBalance || 0}</div>
  94
  95             <hr/>
  96             <h4>History</h4>
  97             <ul className="nav nav-pills mb-3" id="pills-tab" role="tablist">
  98               <li className="nav-item">
  99                 <a className="nav-link active" id="pills-home-tab" data-toggle="pill"
 100                    href="#pills-deposit" onClick={() => this.listBalance(account, GetContractArgs().assetDeposited)} role="tab" aria-controls="pills-deposit" aria-selected="true">Deposit Asset Record</a>
 101               </li>
 102               <li className="nav-item">
 103                 <a className="nav-link" id="pills-profile-tab" data-toggle="pill"
 104                    href="#pills-profit" onClick={() => this.listBalance(account, GetContractArgs().assetBill)} role="tab" aria-controls="pills-profit" aria-selected="false">Bill Asset Record</a>
 105               </li>
 106             </ul>
 107             <div className="tab-content" id="pills-tabContent">
 108               <div className="tab-pane fade show active" id="pills-deposit" role="tabpanel" aria-labelledby="pills-deposit-tab">
 109                 {record}
 110               </div>
 111               <div className="tab-pane fade" id="pills-profit" role="tabpanel" aria-labelledby="pills-profit-tab">
 112                 {record}
 113               </div>
 114             </div>
 115           </div>
 116         </div>
 117
 118       </div>
 119     )
 120   }
 121 }
 122
 123 const mapStateToProps = state => ({
 124   depositAssetBalance: state.depositAssetBalance,
 125   billAssetBalance: state.billAssetBalance,
 126   bytom: state.bytom
 127 })
 128
 129 const mapDispatchToProps = dispatch => ({
 130   updateBalances: (guid) => dispatch(action.updateBalances(guid)),
 131 })
 132
 133 export default connect(mapStateToProps, mapDispatchToProps)(Account)