1  import React from 'react';
 2  import {Link} from 'react-router-dom';
 3  import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
 4  import PropTypes from 'prop-types';
 5  
 6  import Description from './Description';
 7  import CardTitleIdenticon from './CardTitleIdenticon';
 8  import {utils} from 'web3';
 9  
10  
11  const Transaction = ({transaction}) => (
12    <Row>
13      <Col>
14        <Card>
15          <CardHeader>
16            <CardTitleIdenticon id={transaction.hash}>Transaction {transaction.hash}</CardTitleIdenticon>
17          </CardHeader>
18          <CardBody>
19            <dl className="row">
20              <Description label="Block" value={<Link to={`/embark/explorer/blocks/${transaction.blockNumber}`}>{transaction.blockNumber}</Link>} />
21              <Description label="From" value={transaction.from} />
22              <Description label="To" value={transaction.to} />
23              <Description label="Value" value={`${utils.fromWei(transaction.value)} Ether`}/>
24              <Description label="Input" value={transaction.input} />
25              <Description label="Gas" value={transaction.gas} />
26              <Description label="Gas price" value={`${transaction.gasPrice} Wei`} />
27              <Description label="Nonce" value={transaction.nonce} />
28            </dl>
29          </CardBody>
30        </Card>
31      </Col>
32    </Row>
33  );
34  
35  Transaction.propTypes = {
36    transaction: PropTypes.object
37  };
38  
39  export default Transaction;