1  import React from 'react';
 2  import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
 3  import {Link} from 'react-router-dom';
 4  import PropTypes from 'prop-types';
 5  
 6  import CardTitleIdenticon from './CardTitleIdenticon';
 7  
 8  const Accounts = ({accounts}) => (
 9    <Row>
10      <Col>
11        <Card>
12          <CardHeader>
13            <h2>Accounts</h2>
14          </CardHeader>
15          <CardBody>
16            {accounts.map(account => (
17              <div className="explorer-row border-top" key={account.address}>
18                <CardTitleIdenticon id={account.address}>Account&nbsp;
19                  <Link to={`/embark/explorer/accounts/${account.address}`}>{account.address}</Link>
20                </CardTitleIdenticon>
21                <Row>
22                  <Col>
23                    <strong>Balance</strong>
24                    <div>{account.balance} Ether</div>
25                  </Col>
26                  <Col>
27                    <strong>Tx Count</strong>
28                    <div>{account.transactionCount}</div>
29                  </Col>
30                  <Col>
31                    <strong>Index</strong>
32                    <div>{account.index}</div>
33                  </Col>
34                </Row>
35              </div>
36            ))}
37          </CardBody>
38        </Card>
39      </Col>
40    </Row>
41  );
42  
43  Accounts.propTypes = {
44    accounts: PropTypes.arrayOf(PropTypes.object)
45  };
46  
47  export default Accounts;