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 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;