1  import PropTypes from "prop-types";
 2  import React from 'react';
 3  import {Table} from "reactstrap";
 4  import {Link} from 'react-router-dom';
 5  import {formatContractForDisplay} from '../utils/presentation';
 6  
 7  const ContractsList = ({contracts}) => (
 8    <Table hover responsive className="table-outline mb-0 d-none d-sm-table text-nowrap">
 9      <thead className="thead-light">
10        <tr>
11          <th>Name</th>
12          <th>Address</th>
13          <th>State</th>
14        </tr>
15      </thead>
16      <tbody>
17        {
18          contracts.map((contract) => {
19            const contractDisplay = formatContractForDisplay(contract);
20            return (
21              <tr key={contract.className} className={contractDisplay.stateColor}>
22                <td><Link to={`/embark/explorer/contracts/${contract.className}`}>{contract.className}</Link></td>
23                <td>{contractDisplay.address}</td>
24                <td>{contractDisplay.state}</td>
25              </tr>
26            );
27          })
28        }
29      </tbody>
30    </Table>
31  )
32  
33  ContractsList.propTypes = {
34    contracts: PropTypes.array,
35  };
36  
37  export default ContractsList;