embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/embark-ui/src/components/Contracts.js
View File

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

28
packages/embark-ui/src/components/ContractsList.js
View File

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

6
packages/embark-ui/src/containers/ContractsContainer.js
View File

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

3
packages/embark-ui/src/utils/presentation.js
View File

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