openethereum/js/src/views/Wallet/wallet.js

// Copyright 2015, 2016 Ethcore (UK) Ltd.
// This file is part of Parity.

// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.

// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.

// You should have received a copy of the GNU General Public License
// along with Parity.  If not, see <http://www.gnu.org/licenses/>.

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import moment from 'moment';

import ContentCreate from 'material-ui/svg-icons/content/create';
import ActionDelete from 'material-ui/svg-icons/action/delete';
import ContentSend from 'material-ui/svg-icons/content/send';

import { nullableProptype } from '~/util/proptypes';
import { EditMeta, Transfer } from '~/modals';
import { Actionbar, Button, Page, Loading } from '~/ui';

import Delete from '../Address/Delete';
import Header from '../Account/Header';
import WalletDetails from './Details';
import WalletConfirmations from './Confirmations';
import WalletTransactions from './Transactions';

import { setVisibleAccounts } from '~/redux/providers/personalActions';

import styles from './wallet.css';

class WalletContainer extends Component {
  static propTypes = {
    isTest: PropTypes.any
  };

  render () {
    const { isTest, ...others } = this.props;

    if (isTest !== false && isTest !== true) {
      return (
        <Loading size={ 4 } />
      );
    }

    return (
      <Wallet isTest={ isTest } { ...others } />
    );
  }
}

class Wallet extends Component {
  static contextTypes = {
    api: PropTypes.object.isRequired
  };

  static propTypes = {
    setVisibleAccounts: PropTypes.func.isRequired,
    balance: nullableProptype(PropTypes.object.isRequired),
    images: PropTypes.object.isRequired,
    address: PropTypes.string.isRequired,
    wallets: PropTypes.object.isRequired,
    wallet: PropTypes.object.isRequired,
    isTest: PropTypes.bool.isRequired
  };

  state = {
    showEditDialog: false,
    showTransferDialog: false,
    showDeleteDialog: false
  };

  componentDidMount () {
    this.setVisibleAccounts();
  }

  componentWillReceiveProps (nextProps) {
    const prevAddress = this.props.address;
    const nextAddress = nextProps.address;

    if (prevAddress !== nextAddress) {
      this.setVisibleAccounts(nextProps);
    }
  }

  componentWillUnmount () {
    this.props.setVisibleAccounts([]);
  }

  setVisibleAccounts (props = this.props) {
    const { address, setVisibleAccounts } = props;
    const addresses = [ address ];
    setVisibleAccounts(addresses);
  }

  render () {
    const { wallets, balance, address } = this.props;

    const wallet = (wallets || {})[address];

    if (!wallet) {
      return null;
    }

    const { owners, require, dailylimit } = this.props.wallet;

    return (
      <div className={ styles.wallet }>
        { this.renderEditDialog(wallet) }
        { this.renderTransferDialog() }
        { this.renderDeleteDialog(wallet) }
        { this.renderActionbar() }
        <Page>
          <div className={ styles.info }>
            <Header
              className={ styles.header }
              account={ wallet }
              balance={ balance }
            >
              { this.renderInfos() }
            </Header>

            <WalletDetails
              className={ styles.details }
              owners={ owners }
              require={ require }
              dailylimit={ dailylimit }
            />
          </div>
          { this.renderDetails() }
        </Page>
      </div>
    );
  }

  renderInfos () {
    const { dailylimit } = this.props.wallet;
    const { api } = this.context;

    if (!dailylimit || !dailylimit.limit) {
      return null;
    }

    const limit = api.util.fromWei(dailylimit.limit).toFormat(3);
    const spent = api.util.fromWei(dailylimit.spent).toFormat(3);
    const date = moment(dailylimit.last.toNumber() * 24 * 3600 * 1000);

    return (
      <div>
        <br />
        <p>
          <span className={ styles.detail }>{ spent }<span className={ styles.eth } /></span>
          <span>has been spent today, out of</span>
          <span className={ styles.detail }>{ limit }<span className={ styles.eth } /></span>
          <span>set as the daily limit, which has been reset on</span>
          <span className={ styles.detail }>{ date.format('LL') }</span>
        </p>
      </div>
    );
  }

  renderDetails () {
    const { address, isTest, wallet } = this.props;
    const { owners, require, confirmations, transactions } = wallet;

    if (!isTest || !owners || !require) {
      return (
        <div style={ { marginTop: '4em' } }>
          <Loading size={ 4 } />
        </div>
      );
    }

    return [
      <WalletConfirmations
        key='confirmations'
        owners={ owners }
        require={ require }
        confirmations={ confirmations }
        isTest={ isTest }
        address={ address }
      />,

      <WalletTransactions
        key='transactions'
        transactions={ transactions }
        address={ address }
        isTest={ isTest }
      />
    ];
  }

  renderActionbar () {
    const { balance } = this.props;
    const showTransferButton = !!(balance && balance.tokens);

    const buttons = [
      <Button
        key='transferFunds'
        icon={ <ContentSend /> }
        label='transfer'
        disabled={ !showTransferButton }
        onClick={ this.onTransferClick } />,
      <Button
        key='delete'
        icon={ <ActionDelete /> }
        label='delete wallet'
        onClick={ this.showDeleteDialog } />,
      <Button
        key='editmeta'
        icon={ <ContentCreate /> }
        label='edit'
        onClick={ this.onEditClick } />
    ];

    return (
      <Actionbar
        title='Wallet Management'
        buttons={ buttons } />
    );
  }

  renderDeleteDialog (account) {
    const { showDeleteDialog } = this.state;

    return (
      <Delete
        account={ account }
        visible={ showDeleteDialog }
        route='/accounts'
        onClose={ this.closeDeleteDialog } />
    );
  }

  renderEditDialog (wallet) {
    const { showEditDialog } = this.state;

    if (!showEditDialog) {
      return null;
    }

    return (
      <EditMeta
        account={ wallet }
        keys={ ['description', 'passwordHint'] }
        onClose={ this.onEditClick } />
    );
  }

  renderTransferDialog () {
    const { showTransferDialog } = this.state;

    if (!showTransferDialog) {
      return null;
    }

    const { wallets, balance, images, address } = this.props;
    const wallet = wallets[address];

    return (
      <Transfer
        account={ wallet }
        balance={ balance }
        images={ images }
        onClose={ this.onTransferClose }
      />
    );
  }

  onEditClick = () => {
    this.setState({
      showEditDialog: !this.state.showEditDialog
    });
  }

  onTransferClick = () => {
    this.setState({
      showTransferDialog: !this.state.showTransferDialog
    });
  }

  onTransferClose = () => {
    this.onTransferClick();
  }

  closeDeleteDialog = () => {
    this.setState({ showDeleteDialog: false });
  }

  showDeleteDialog = () => {
    this.setState({ showDeleteDialog: true });
  }
}

function mapStateToProps (_, initProps) {
  const { address } = initProps.params;

  return (state) => {
    const { isTest } = state.nodeStatus;
    const { wallets } = state.personal;
    const { balances } = state.balances;
    const { images } = state;

    const wallet = state.wallet.wallets[address] || {};
    const balance = balances[address] || null;

    return {
      isTest,
      wallets,
      balance,
      images,
      address,
      wallet
    };
  };
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators({
    setVisibleAccounts
  }, dispatch);
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(WalletContainer);