/ embark-ui / src / components / Transactions.js
Transactions.js
 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 CardTitleIdenticon from './CardTitleIdenticon';
 7  import Pagination from "./Pagination";
 8  
 9  const Transactions = ({transactions, changePage, currentPage, numberOfPages}) => (
10    <Row>
11      <Col>
12        <Card>
13          <CardHeader>
14            <h2>Transactions</h2>
15          </CardHeader>
16          <CardBody>
17            {transactions.map(transaction => (
18              <div className="explorer-row border-top" key={transaction.hash}>
19                <CardTitleIdenticon id={transaction.hash}>Transaction&nbsp;
20                  <Link to={`/embark/explorer/transactions/${transaction.hash}`}>
21                    {transaction.hash}
22                  </Link>
23                </CardTitleIdenticon>
24                <Row>
25                  <Col md={6}>
26                    <strong>Block number</strong>
27                    <div>{transaction.blockNumber}</div>
28                  </Col>
29                  <Col md={6}>
30                    <strong>From</strong>
31                    <div>{transaction.from}</div>
32                  </Col>
33                  <Col md={6}>
34                    <strong>To</strong>
35                    <div>{transaction.to}</div>
36                  </Col>
37                  <Col md={6}>
38                    <strong>Type</strong>
39                    <div>{transaction.to ? "Contract Call" : "Contract Creation"}</div>
40                  </Col>
41                </Row>
42              </div>
43            ))}
44            <Pagination changePage={changePage} currentPage={currentPage} numberOfPages={numberOfPages}/>
45          </CardBody>
46        </Card>
47      </Col>
48    </Row>
49  );
50  
51  Transactions.propTypes = {
52    transactions: PropTypes.arrayOf(PropTypes.object),
53    changePage: PropTypes.func,
54    currentPage: PropTypes.number,
55    numberOfPages: PropTypes.number
56  };
57  
58  export default Transactions;