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