src/features/accounts/components/AccountShow.jsx

   1 import React from 'react'
   2 import {
   3   BaseShow,
   4   CopyableBlock,
   5   KeyValueTable,
   6   PageContent,
   7   PageTitle,
   8   RawJsonButton,
   9 } from 'features/shared/components'
  10 import componentClassNames from 'utility/componentClassNames'
  11
  12 class AccountShow extends BaseShow {
  13   constructor(props) {
  14     super(props)
  15
  16     this.createReceiver = this.createReceiver.bind(this)
  17     this.createAddress = this.createAddress.bind(this)
  18     this.listAddress = this.listAddress.bind(this)
  19
  20     this.listAddress()
  21   }
  22
  23   listAddress() {
  24     this.props.listAddress(this.props.params.id).then(data => {
  25       if (data.status !== 'success') {
  26         return
  27       }
  28       const normalAddresses = data.data.filter(address => !address.change).map((address) => {return {address: address.address, program: address.controlProgram}})
  29       const changeAddresses = data.data.filter(address => address.change).map((address) => {return {address: address.address, program: address.controlProgram}})
  30
  31       this.setState({addresses: normalAddresses, changeAddresses})
  32     })
  33   }
  34
  35   createReceiver() {
  36     this.props.createReceiver({
  37       account_alias: this.props.item.alias
  38     }).then(({data: receiver}) => this.props.showModal(<div>
  39       <p>Copy this one-time use address to use in a transaction:</p>
  40       <CopyableBlock value={JSON.stringify({
  41         controlProgram: receiver.controlProgram,
  42         expiresAt: receiver.expiresAt
  43       }, null, 1)}/>
  44     </div>))
  45   }
  46
  47   createAddress() {
  48     const t = this.props.t
  49     this.props.createAddress({
  50       account_alias: this.props.item.alias
  51     }).then(({data}) => {
  52       this.listAddress()
  53       this.props.showModal(<div>
  54         <p>{t('account.copyAddress')}</p>
  55         <CopyableBlock value={data.address}/>
  56       </div>)
  57     })
  58   }
  59
  60   showProgram(program){
  61     const t = this.props.t
  62     this.props.showModal(
  63       <div>
  64         <p>{t('account.copyProgram')}</p>
  65         <CopyableBlock value={program}/>
  66       </div>
  67     )
  68   }
  69
  70   render() {
  71     const item = this.props.item
  72     const t = this.props.t
  73
  74     let view
  75     if (item) {
  76       const title = <span>
  77         {t('account.account')}
  78         <code>{item.alias ? item.alias : item.id}</code>
  79       </span>
  80
  81       view = <div className={componentClassNames(this)}>
  82         <PageTitle
  83           title={title}
  84           actions={[
  85             <button className='btn btn-link' onClick={this.createAddress}>
  86               {t('account.newAddress')}
  87             </button>,
  88           ]}
  89         />
  90
  91         <PageContent>
  92           <KeyValueTable
  93             id={item.id}
  94             object='account'
  95             title={t('form.detail')}
  96             actions={[
  97               // TODO: add back first 2 buttons
  98               // <button key='show-txs' className='btn btn-link' onClick={this.props.showTransactions.bind(this, item)}>Transactions</button>,
  99               // <button key='show-balances' className='btn btn-link' onClick={this.props.showBalances.bind(this, item)}>Balances</button>,
 100               <RawJsonButton key='raw-json' item={item}/>
 101             ]}
 102             items={[
 103               {label: 'ID', value: item.id},
 104               {label: t('form.alias'), value: item.alias},
 105               {label: t('form.xpubs'), value: (item.xpubs || []).length},
 106               {label: t('form.quorum') , value: item.quorum},
 107             ]}
 108           />
 109
 110           {(item.xpubs || []).map((key, index) =>
 111             <KeyValueTable
 112               key={index}
 113               title={t('account.xpubs', {id: index + 1})}
 114               items={[
 115                 {label: t('account.accountXpub'), value: key},
 116                 {label: t('account.keyIndex'), value: item.keyIndex},
 117               ]}
 118             />
 119           )}
 120
 121           {(this.state.addresses || []).length > 0 &&
 122           <KeyValueTable title={t('account.address')}
 123                          items={this.state.addresses.map((item, index) => ({
 124                            label: index,
 125                            value: item.address,
 126                            program: (e => this.showProgram(item.program))
 127                          }))}/>
 128           }
 129
 130           {(this.state.changeAddresses || []).length > 0 &&
 131           <KeyValueTable title={t('account.changeAddress')}
 132                          items={this.state.changeAddresses.map((item, index) => ({
 133                            label: index,
 134                            value: item.address,
 135                            program: (e => this.showProgram(item.program))
 136                          }))}/>
 137           }
 138         </PageContent>
 139       </div>
 140     }
 141     return this.renderIfFound(view)
 142   }
 143 }
 144
 145 // Container
 146
 147 import {connect} from 'react-redux'
 148 import actions from 'actions'
 149 import {withNamespaces} from 'react-i18next'
 150
 151 const mapStateToProps = (state, ownProps) => ({
 152   item: state.account.items[ownProps.params.id],
 153 })
 154
 155 const mapDispatchToProps = (dispatch) => ({
 156   fetchItem: (id) => dispatch(actions.account.fetchItems({id: `${id}`})),
 157   showTransactions: (item) => {
 158     let filter = `inputs(account_id='${item.id}') OR outputs(account_id='${item.id}')`
 159     if (item.alias) {
 160       filter = `inputs(account_alias='${item.alias}') OR outputs(account_alias='${item.alias}')`
 161     }
 162
 163     dispatch(actions.transaction.pushList({filter}))
 164   },
 165   showBalances: (item) => {
 166     let filter = `account_id='${item.id}'`
 167     if (item.alias) {
 168       filter = `account_alias='${item.alias}'`
 169     }
 170
 171     dispatch(actions.balance.pushList({filter}))
 172   },
 173   createReceiver: (data) => dispatch(actions.account.createReceiver(data)),
 174   createAddress: (data) => dispatch(actions.account.createAddress(data)),
 175   showModal: (body) => dispatch(actions.app.showModal(
 176     body,
 177     actions.app.hideModal
 178   )),
 179   listAddress: actions.account.listAddresses
 180 })
 181
 182 export default withNamespaces('translations') (connect(
 183   mapStateToProps,
 184   mapDispatchToProps
 185 )(AccountShow))