1  import PropTypes from "prop-types";
 2  import React from 'react';
 3  import {Row, Col, Card, CardHeader, CardBody} from "reactstrap";
 4  import {Link} from 'react-router-dom';
 5  import {formatContractForDisplay} from '../utils/presentation';
 6  
 7  import CardTitleIdenticon from './CardTitleIdenticon';
 8  
 9  const Contracts = ({contracts, title = "Contracts"}) => (
10    <Row>
11      <Col>
12        <Card>
13          <CardHeader>
14            <h2>{title}</h2>
15          </CardHeader>
16          <CardBody>
17            {
18              contracts.map(contract => {
19                const contractDisplay = formatContractForDisplay(contract);
20  
21                return (
22                  <div className="explorer-row border-top" key={contract.address}>
23                    <CardTitleIdenticon id={contract.className}>
24                      <Link to={`/embark/explorer/contracts/${contract.className}`}>{contract.className}</Link>
25                    </CardTitleIdenticon>
26                    <Row>
27                      <Col>
28                        <strong>Address</strong>
29                        <div>{contract.address}</div>
30                      </Col>
31                      <Col>
32                        <strong>State</strong>
33                        <div className={contractDisplay.stateColor}>
34                          {formatContractForDisplay(contract).state}
35                        </div>
36                      </Col>
37                    </Row>
38                  </div>
39                )
40              })
41            }
42          </CardBody>
43        </Card>
44      </Col>
45    </Row>
46  );
47  
48  Contracts.propTypes = {
49    contracts: PropTypes.array,
50    title: PropTypes.string
51  };
52  
53  export default Contracts;