Skip to content

Commit

Permalink
Add 'edit contract' feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@olekon
olekon committed Oct 8, 2021
1 parent b379644 commit 29531f0
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 117 deletions.
4 changes: 2 additions & 2 deletions src/components/common/FormattedValue.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class FormattedValue extends React.Component {
) : (
<CloseOutlined />
)}
<span class={styles.right}>{this.props.value ? 'True' : 'False'}</span>
<span className={styles.right}>{this.props.value ? 'True' : 'False'}</span>
</div>
);
case 'address':
Expand All @@ -40,7 +40,7 @@ class FormattedValue extends React.Component {
size={8}
scale={2}
/>
<span class={styles.right}>{this.props.value.toString()}</span>
<span className={styles.right}>{this.props.value.toString()}</span>
</div>
);
case 'uint256':
Expand Down
108 changes: 66 additions & 42 deletions src/components/contract/ContractBrowser.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import {Row, Col} from 'antd';
import { Row, Col } from 'antd';

import ContractView from './ContractView.jsx';
import ContractList from './ContractsList.jsx';
Expand All @@ -8,10 +8,9 @@ import ErrorBoundary from '../base/ErrorBoundary.jsx';
import Web3Provider from '../../scripts/web3provider.js';
import * as contractLogic from '../../scripts/contractLogic.js';

import {gridConfig} from '../layout.js';
import { gridConfig } from '../layout.js';
import * as message from '../common/errorMessage.js';


/**
* Renders stored contracts in side panel with selected contract in content panel
* Props :
Expand All @@ -21,52 +20,75 @@ import * as message from '../common/errorMessage.js';
class ContractBrowser extends React.Component {
constructor(props) {
super(props);
let contractList = contractLogic.getContractList();
let contractList = contractLogic.getContractList();
this.state = {
contractList : contractList,
activeContract : contractLogic.getInitialContract(contractList)
}
contractList: contractList,
activeContract: contractLogic.getInitialContract(contractList),
};
this.changeContract = this.changeContract.bind(this);
this.addContract = this.addContract.bind(this);
this.editContract = this.editContract.bind(this);
this.deleteContract = this.deleteContract.bind(this);
}

changeContract(name)
{
changeContract(name) {
let newActiveContract = contractLogic.getContract(this.state.contractList, name, this.props.networkId);
this.setState({
activeContract: newActiveContract
})
activeContract: newActiveContract,
});
contractLogic.saveActiveContract(newActiveContract);
}

addContract(name, address, networkId, abi) {
if(contractLogic.existContract(this.state.contractList, name, networkId)) {
if (contractLogic.existContract(this.state.contractList, name, networkId, address)) {
message.showContractExist();
} else {
let contractList = contractLogic.addContract(this.state.contractList, name, address, networkId, abi);
this.setState({
contractList: contractList
})
contractList: contractLogic.addContract(this.state.contractList, name, address, networkId, abi),
});
}
}

editContract(contract, name, address, networkId, abi) {
if (
contractLogic.existContract(
this.state.contractList.filter((c) => contract.address != c.address),
name,
networkId,
address
)
) {
message.showContractExist();
} else {
this.setState({
contractList: contractLogic.editContract(
this.state.contractList,
contract,
name,
address,
networkId,
abi
),
});
}
}

deleteContract(networkId, name) {
let contract = contractLogic.getContract(this.state.contractList, name, networkId);
let contract = contractLogic.getContract(this.state.contractList, name, networkId);
let isDeletingActive = contract === this.state.activeContract;
let contractList = contractLogic.deleteContract(this.state.contractList, contract);

let newActiveContract = {};
if(isDeletingActive) {
contract = contractLogic.getFirstContract(contractList, this.state.prevNetworkId);
newActiveContract = {activeContract: contract}
if (isDeletingActive) {
contract = contractLogic.getFirstContract(contractList, this.state.prevNetworkId);
newActiveContract = { activeContract: contract };
contractLogic.saveActiveContract(contract);
}

let data = {
...{contractList: contractList},
...newActiveContract
}
...{ contractList: contractList },
...newActiveContract,
};
this.setState(data);
}

Expand All @@ -75,44 +97,46 @@ class ContractBrowser extends React.Component {
if (nextProps.endpoint !== prevState.prevEndpoint) {
data.prevEndpoint = nextProps.endpoint;
data.web3Provider = new Web3Provider(nextProps.endpoint, nextProps.networkId);
}
}
if (nextProps.networkId !== prevState.prevNetworkId) {
let contracts = prevState.contractList.filter(contract=>contract.networkId === nextProps.networkId);
if(prevState.prevNetworkId) {
let contracts = prevState.contractList.filter((contract) => contract.networkId === nextProps.networkId);
if (prevState.prevNetworkId) {
data.activeContract = contracts.length > 0 ? contracts[0] : undefined;
}
data.prevNetworkId = nextProps.networkId;
}
return data;
}

render() {
render() {
return (
<Row>
<Col span={gridConfig.ContractListSpan} style={{marginTop: "50px"}}>
<ContractList
contracts={this.state.contractList.filter(contract=>contract.networkId===this.props.networkId)}
web3Provider={this.state.web3Provider}
onChangeContract = {this.changeContract}
onAddContract ={this.addContract}
onDeleteContract = {this.deleteContract}
activeContract = {this.state.activeContract}
<Col span={gridConfig.ContractListSpan} style={{ marginTop: '50px' }}>
<ContractList
contracts={this.state.contractList.filter(
(contract) => contract.networkId === this.props.networkId
)}
web3Provider={this.state.web3Provider}
onChangeContract={this.changeContract}
onAddContract={this.addContract}
onEditContract={this.editContract}
onDeleteContract={this.deleteContract}
activeContract={this.state.activeContract}
/>
</Col>

<Col span={gridConfig.ContractViewSpan} offset="1">
<ErrorBoundary>
<ContractView
web3Provider={this.state.web3Provider}
contract={this.state.activeContract}
key={this.state.activeContract ? this.state.activeContract.address : 'empty'}
/>
<ContractView
web3Provider={this.state.web3Provider}
contract={this.state.activeContract}
key={this.state.activeContract ? this.state.activeContract.address : 'empty'}
/>
</ErrorBoundary>
</Col>
</Row>
);
}
}


export default ContractBrowser;
export default ContractBrowser;
20 changes: 17 additions & 3 deletions src/components/contract/ContractForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,12 +90,16 @@ class ContractForm extends React.Component {
render() {
return (
<Form
key={this.props.contract ? this.props.contract.address : ''}
name="contractForm"
onFinish={this.handleSubmit}
onFinishFailed={this.handleSubmitFailed}
ref={this.formRef}
>
<FormItem
initialValue={
this.props.contract ? this.props.contract.name : ''
}
name="name"
label="Name"
rules={[
Expand All @@ -107,6 +111,9 @@ class ContractForm extends React.Component {
<FormItem
name="address"
label="Address"
initialValue={
this.props.contract ? this.props.contract.address : ''
}
rules={[
{
required: true,
Expand All @@ -120,14 +127,21 @@ class ContractForm extends React.Component {
<FormItem
label="Network id"
name="networkId"
initialValue={this.state.networkId}
initialValue={
this.props.contract
? this.props.contract.networkId
: this.state.networkId
}
>
<NetworkIdSelect />
</FormItem>
<FormItem label="ABI">
<FormItem>
<FormItem
name="abi"
label="ABI"
initialValue={
this.props.contract ? JSON.stringify(this.props.contract.abi) : '[]'
}
rules={[
{ required: true, message: 'Please input the ABI' },
]}
Expand All @@ -154,7 +168,7 @@ class ContractForm extends React.Component {

<Form.Item>
<Button type="primary" htmlType="submit">
Add
{this.props.contract ? "Edit" : "Add"}
</Button>
</Form.Item>
</Form>
Expand Down
Loading

0 comments on commit 29531f0

Please sign in to comment.