refactor(embark-ui): filter silent contracts from contracts listings (#1444)

Filter silent contracts in the views that display contracts lists rather than
with `formatContractForDisplay` because the old approach prevents interaction
with a silent contract if a link to it is followed from the blocks or
transactions explorer, which is not desirable.
This commit is contained in:
Michael Bradley 2019-03-15 15:22:15 -05:00 committed by André Medeiros
parent 9afdbd9848
commit f60c979c75
4 changed files with 45 additions and 44 deletions

View File

@ -15,32 +15,34 @@ const Contracts = ({contracts, title = "Contracts"}) => (
</CardHeader> </CardHeader>
<CardBody> <CardBody>
{ {
contracts.map((contract, key) => { contracts
const contractDisplay = formatContractForDisplay(contract); .filter(contract => !contract.silent)
if (!contractDisplay) { .map((contract, key) => {
return ''; const contractDisplay = formatContractForDisplay(contract);
} if (!contractDisplay) {
return '';
}
return ( return (
<div className="explorer-row border-top" key={`contract-${key}`}> <div className="explorer-row border-top" key={`contract-${key}`}>
<CardTitleIdenticon id={contract.className}> <CardTitleIdenticon id={contract.className}>
<Link to={`/explorer/contracts/${contract.className}`}>{contract.className}</Link> <Link to={`/explorer/contracts/${contract.className}`}>{contract.className}</Link>
</CardTitleIdenticon> </CardTitleIdenticon>
<Row> <Row>
<Col> <Col>
<strong>Address</strong> <strong>Address</strong>
<div>{contract.address}</div> <div>{contract.address}</div>
</Col> </Col>
<Col> <Col>
<strong>State</strong> <strong>State</strong>
<div className={contractDisplay.stateColor}> <div className={contractDisplay.stateColor}>
{contractDisplay.state} {contractDisplay.state}
</div> </div>
</Col> </Col>
</Row> </Row>
</div> </div>
) )
}) })
} }
</CardBody> </CardBody>
</Card> </Card>

View File

@ -15,19 +15,21 @@ const ContractsList = ({contracts}) => (
</thead> </thead>
<tbody> <tbody>
{ {
contracts.map((contract) => { contracts
const contractDisplay = formatContractForDisplay(contract); .filter(contract => !contract.silent)
if (!contractDisplay) { .map((contract) => {
return null; const contractDisplay = formatContractForDisplay(contract);
} if (!contractDisplay) {
return ( return null;
<tr key={contract.className} className={contractDisplay.stateColor}> }
<td><Link to={`/explorer/contracts/${contract.className}`}>{contract.className}</Link></td> return (
<td>{contractDisplay.address}</td> <tr key={contract.className} className={contractDisplay.stateColor}>
<td>{contractDisplay.state}</td> <td><Link to={`/explorer/contracts/${contract.className}`}>{contract.className}</Link></td>
</tr> <td>{contractDisplay.address}</td>
); <td>{contractDisplay.state}</td>
}) </tr>
);
})
} }
</tbody> </tbody>
</Table> </Table>

View File

@ -29,7 +29,7 @@ class ContractsContainer extends Component {
{this.props.updatePageHeader && <PageHead title="Contracts" description="Summary of all deployed contracts" />} {this.props.updatePageHeader && <PageHead title="Contracts" description="Summary of all deployed contracts" />}
<DataWrapper shouldRender={this.props.contracts.length > 0} {...this.props} render={({contracts}) => { <DataWrapper shouldRender={this.props.contracts.length > 0} {...this.props} render={({contracts}) => {
if (this.props.mode === "list") return <ContractsList contracts={contracts} />; if (this.props.mode === "list") return <ContractsList contracts={contracts} />;
if (this.props.mode === "detail") return <Contracts contracts={contracts} />; if (this.props.mode === "detail") return <Contracts contracts={contracts} />;
}} /> }} />
</React.Fragment> </React.Fragment>
); );
@ -38,8 +38,8 @@ class ContractsContainer extends Component {
function mapStateToProps(state) { function mapStateToProps(state) {
return { return {
contracts: getContracts(state), contracts: getContracts(state),
error: state.errorMessage, error: state.errorMessage,
loading: state.loading}; loading: state.loading};
} }

View File

@ -1,7 +1,4 @@
export function formatContractForDisplay(contract) { export function formatContractForDisplay(contract) {
if (contract.silent) {
return;
}
let address = (contract.address || contract.deployedAddress); let address = (contract.address || contract.deployedAddress);
let state = 'Deployed'; let state = 'Deployed';
let stateColor = 'success'; let stateColor = 'success';