fix(embark-ui): detect fallback functions in the contracts explorer

When a fallback function is encountered give its signature as `function()`,
disable row expansion, and omit the interaction form. Also label with a
`fallback` badge.
This commit is contained in:
Michael Bradley, Jr 2019-03-18 12:51:25 -05:00 committed by Iuri Matias
parent 9d34355994
commit 832f16ae08
1 changed files with 21 additions and 10 deletions

View File

@ -39,6 +39,10 @@ class ContractFunction extends Component {
return !this.isPureCall(method) && (method.type === 'event'); return !this.isPureCall(method) && (method.type === 'event');
} }
static isFallback(method) {
return method.type === 'fallback';
}
buttonTitle() { buttonTitle() {
const {method} = this.props; const {method} = this.props;
if (method.name === 'constructor') { if (method.name === 'constructor') {
@ -140,24 +144,31 @@ class ContractFunction extends Component {
'border-bottom-0': !this.state.functionCollapse, 'border-bottom-0': !this.state.functionCollapse,
'rounded': !this.state.functionCollapse 'rounded': !this.state.functionCollapse
})} })}
onClick={() => this.toggleFunction()}> onClick={ContractFunction.isFallback(this.props.method)
? () => {}
: () => this.toggleFunction()}>
<CardTitle> <CardTitle>
<span className="contract-function-signature"> <span className="contract-function-signature">
{`${this.props.method.name}` + {ContractFunction.isFallback(this.props.method)
? 'function()'
: `${this.props.method.name}` +
`(${this.props.method.inputs.map(i => i.name).join(', ')})`} `(${this.props.method.inputs.map(i => i.name).join(', ')})`}
</span> </span>
<div> <div>
{(ContractFunction.isPureCall(this.props.method) && {ContractFunction.isFallback(this.props.method)
? this.makeBadge('light', 'black', 'fallback')
: (ContractFunction.isPureCall(this.props.method) &&
this.makeBadge('success', 'white', 'call')) || this.makeBadge('success', 'white', 'call')) ||
this.makeBadge('warning', 'black', 'send')} this.makeBadge('warning', 'black', 'send')}
</div> </div>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
{!ContractFunction.isFallback(this.props.method) &&
<Collapse isOpen={this.state.functionCollapse} className="relative"> <Collapse isOpen={this.state.functionCollapse} className="relative">
<CardBody> <CardBody>
<Form inline> <Form inline>
{this.props.method.inputs.map(input => ( {this.props.method.inputs.map((input, idx) => (
<FormGroup key={input.name}> <FormGroup key={idx}>
<Label for={input.name} className="mr-2 font-weight-bold contract-function-input"> <Label for={input.name} className="mr-2 font-weight-bold contract-function-input">
{input.name} {input.name}
</Label> </Label>
@ -240,7 +251,7 @@ class ContractFunction extends Component {
))} ))}
</ListGroup> </ListGroup>
</CardFooter>} </CardFooter>}
</Collapse> </Collapse>}
</Card> </Card>
); );
} }
@ -275,7 +286,7 @@ const ContractOverview = (props) => {
.filter((method) => { .filter((method) => {
return props.onlyConstructor ? method.type === 'constructor' : method.type !== 'constructor'; return props.onlyConstructor ? method.type === 'constructor' : method.type !== 'constructor';
}) })
.map(method => <ContractFunction key={method.name} .map((method, idx) => <ContractFunction key={idx}
contractName={contract.className} contractName={contract.className}
method={method} method={method}
contractFunctions={filterContractFunctions(props.contractFunctions, contract.className, method.name)} contractFunctions={filterContractFunctions(props.contractFunctions, contract.className, method.name)}