Components for Contract UI
This commit is contained in:
Richard Ramos
Pascal Precht
parent
6c88ebd874
commit
3de60ef0c7
|
|
@ -0,0 +1,102 @@
|
||||||
|
h2 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scenario p {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scenario p.note {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scenario p.error {
|
||||||
|
color: #ff0000;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
background: #dedeff;
|
||||||
|
padding: 0px 15px;
|
||||||
|
border: 1px dashed #a0a0ff;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 10px 3px 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code button:hover,
|
||||||
|
.code select:hover,
|
||||||
|
.code input:hover {
|
||||||
|
background: #a0a0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code select {
|
||||||
|
background: none;
|
||||||
|
border: 1px dashed #a0a0ff;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code input {
|
||||||
|
background: none;
|
||||||
|
border: 1px dashed #a0a0ff;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scenario {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
code .Highlight-boolean {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
code .Highlight-class {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
code .Highlight-comment {
|
||||||
|
color: #969896;
|
||||||
|
}
|
||||||
|
|
||||||
|
code .Highlight-constant {
|
||||||
|
color: #a71d5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
code .Highlight-function {
|
||||||
|
color: #795da3;
|
||||||
|
}
|
||||||
|
|
||||||
|
code .Highlight-keyword {
|
||||||
|
color: #a71d5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
code .Highlight-number {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
code .Highlight-operator {
|
||||||
|
color: #a71d5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
code .Highlight-punctuation {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
code .Highlight-string {
|
||||||
|
color: #df5000;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Contract UI</title>
|
||||||
|
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
|
||||||
|
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
|
||||||
|
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/javascript.min.js"></script>
|
||||||
|
<script src="./contracts-section.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="container-fluid">
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import 'bootstrap';
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
|
import './contracts-section.css';
|
||||||
|
|
||||||
|
import EmbarkJS from 'Embark/EmbarkJS';
|
||||||
|
import IdentityFactory from 'Embark/contracts/IdentityFactory'; // Import all contracts
|
||||||
|
|
||||||
|
import ContractUI from './contracts/contract-ui';
|
||||||
|
|
||||||
|
|
||||||
|
__embarkContext.execWhenReady(function(){
|
||||||
|
|
||||||
|
// Each contract should be available on window
|
||||||
|
window["IdentityFactory"] = IdentityFactory;
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<ContractUI name="IdentityFactory" contract={IdentityFactory} sourceURL="https://raw.githubusercontent.com/status-im/contracts/contracts-ui-demo/contracts/identity/IdentityFactory.sol" />,
|
||||||
|
document.getElementById('root')
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import ContractContext from './contract-context';
|
||||||
|
|
||||||
|
class AccountList extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
error: false,
|
||||||
|
errorMessage: "",
|
||||||
|
accounts: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async handleClick(e, updateAccountsCallback){
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
try {
|
||||||
|
updateAccountsCallback();
|
||||||
|
} catch(err) {
|
||||||
|
this.setState({
|
||||||
|
error: true,
|
||||||
|
errorMessage: e.name + ': ' + e.message
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
return <ContractContext.Consumer>
|
||||||
|
{(context) => (
|
||||||
|
<div>
|
||||||
|
<h3>Get Accounts</h3>
|
||||||
|
<div className="scenario">
|
||||||
|
<div id="getAccounts" className="code">
|
||||||
|
await web3.eth.getAccounts(); <button onClick={event => this.handleClick(event, context.updateAccounts)}>⏎</button>
|
||||||
|
</div>
|
||||||
|
<p className="note"><tt>accounts</tt> variable is available in the console</p>
|
||||||
|
{this.state.error ? '<p className="error">' + this.state.errorMessage + '</p>' : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ContractContext.Consumer>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AccountList;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
const ContractContext = React.createContext({
|
||||||
|
accounts: [],
|
||||||
|
instances: [],
|
||||||
|
updateAccounts: () => {},
|
||||||
|
updateInstances: (_instance) => {}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
export default ContractContext;
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
import Tab from './tab';
|
||||||
|
import AccountList from './account-list';
|
||||||
|
import SourceArea from './source-area';
|
||||||
|
import InstanceSelector from './instance-selector';
|
||||||
|
import FunctionArea from './function-area';
|
||||||
|
import ContractContext from './contract-context';
|
||||||
|
|
||||||
|
|
||||||
|
class ContractUI extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.updateInstances = this.updateInstances.bind(this);
|
||||||
|
this.updateAccounts = this.updateAccounts.bind(this);
|
||||||
|
this.handleInstanceSelection = this.handleInstanceSelection.bind(this);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
accounts: [],
|
||||||
|
instances: [],
|
||||||
|
selectedInstance: null,
|
||||||
|
updateAccounts: this.updateAccounts,
|
||||||
|
updateInstances: this.updateInstances
|
||||||
|
};
|
||||||
|
|
||||||
|
if(props.contract.options.address != null){
|
||||||
|
this.state.instances = [props.contract.options.address];
|
||||||
|
this.state.selectedInstance = props.contract.options.address;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount(){
|
||||||
|
this.updateAccounts();
|
||||||
|
}
|
||||||
|
|
||||||
|
async updateAccounts(){
|
||||||
|
let accounts = await web3.eth.getAccounts();
|
||||||
|
window.accounts = accounts;
|
||||||
|
|
||||||
|
console.log("%cawait web3.eth.getAccounts()", 'font-weight: bold');
|
||||||
|
console.log(accounts);
|
||||||
|
|
||||||
|
this.setState({accounts: accounts});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateInstances(_instance){
|
||||||
|
this.state.instances.push(_instance);
|
||||||
|
this.setState({
|
||||||
|
instances: this.state.instances
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleInstanceSelection(_instance){
|
||||||
|
this.props.contract.options.address = _instance;
|
||||||
|
this.setState({
|
||||||
|
selectedInstance: _instance
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<ContractContext.Provider value={this.state}>
|
||||||
|
<div>
|
||||||
|
<h1><span>{this.props.name}</span> <small>contract</small></h1>
|
||||||
|
<p>Open your browser's console: <code>Tools > Developer Tools</code></p>
|
||||||
|
<p>Remix: <a href="https://remix.ethereum.org">http://remix.ethereum.org</a></p>
|
||||||
|
<ul className="nav nav-tabs" role="tablist" id="myTabs">
|
||||||
|
<li role="presentation" className="active"><a href="#deploy" role="tab" data-toggle="tab">Instance</a></li>
|
||||||
|
<li role="presentation"><a href="#functions" role="tab" data-toggle="tab">Functions</a></li>
|
||||||
|
<li role="presentation"><a href="#contract" role="tab" data-toggle="tab">Contract</a></li>
|
||||||
|
</ul>
|
||||||
|
<div className="tab-content">
|
||||||
|
<Tab id="deploy" name="Deployment / Utils" active={true}>
|
||||||
|
<AccountList accountUpdate={this.updateAccounts} />
|
||||||
|
<h3>Deploy</h3>
|
||||||
|
<FunctionArea contractName={this.props.name} contract={this.props.contract} type="constructor" />
|
||||||
|
</Tab>
|
||||||
|
<Tab id="functions" name="Functions">
|
||||||
|
<InstanceSelector selectedInstance={this.state.selectedInstance} instanceUpdate={this.handleInstanceSelection} />
|
||||||
|
<FunctionArea contractName={this.props.name} contract={this.props.contract} type="function" />
|
||||||
|
<FunctionArea contractName={this.props.name} contract={this.props.contract} type="fallback" />
|
||||||
|
</Tab>
|
||||||
|
<Tab id="contract" name="Contract">
|
||||||
|
<SourceArea sourceURL={this.props.sourceURL} />
|
||||||
|
</Tab>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ContractContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ContractUI;
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import FunctionForm from './function-form';
|
||||||
|
|
||||||
|
class FunctionArea extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = { };
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
const type = this.props.type;
|
||||||
|
const contract = this.props.contract;
|
||||||
|
const contractName = this.props.contractName;
|
||||||
|
|
||||||
|
return <React.Fragment>
|
||||||
|
{
|
||||||
|
this.props.contract.options.jsonInterface
|
||||||
|
.filter(item => item.type == type)
|
||||||
|
.map((item, i) => <FunctionForm key={i} contract={contract} contractName={contractName} abi={item} instanceUpdate={this.props.instanceUpdate} />)
|
||||||
|
}
|
||||||
|
</React.Fragment>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FunctionArea;
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
import Function from './function';
|
||||||
|
|
||||||
|
class FunctionForm extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
fields: {},
|
||||||
|
error: false,
|
||||||
|
message: null,
|
||||||
|
receipt: null
|
||||||
|
};
|
||||||
|
|
||||||
|
this.showResults = this.showResults.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
_getFunctionParamFields(elem){
|
||||||
|
if(this.props.abi.type == 'fallback') return '';
|
||||||
|
|
||||||
|
return '(' + this.props.abi.inputs
|
||||||
|
.map((input, i) => <input type="text" data-var-type={input.type} data-type="inputParam" data-name={input.name} placeholder={input.name} title={input.type + ' ' + input.name} size={input.name.length} />)
|
||||||
|
.join(', ') + ')';
|
||||||
|
}
|
||||||
|
|
||||||
|
_getMethodType(elem){
|
||||||
|
return (this.props.abi.constant == true || this.props.abi.stateMutability == 'view' || this.props.abi.stateMutability == 'pure') ? 'call' : 'send';
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
const functionName = this.props.abi.name;
|
||||||
|
const isDuplicated = this.props.contract.options.jsonInterface.filter(x => x.name == functionName).length > 1;
|
||||||
|
const contract = this.props.contract;
|
||||||
|
const receipt = this.state.receipt;
|
||||||
|
|
||||||
|
return <div className="function">
|
||||||
|
<h4>{this.props.abi.type == 'function' ? this.props.abi.name : (this.props.abi.type == 'fallback' ? '(fallback)' : this.props.abi.name)}</h4>
|
||||||
|
<div className="scenario">
|
||||||
|
<div className="code">
|
||||||
|
<Function contract={this.props.contract} contractName={this.props.contractName} duplicated={isDuplicated} abi={this.props.abi} resultHandler={this.showResults} />
|
||||||
|
</div>
|
||||||
|
{ receipt != null ?
|
||||||
|
<ul>
|
||||||
|
<li>Status: {receipt.status}</li>
|
||||||
|
<li>Transaction Hash: {receipt.transactionHash}</li>
|
||||||
|
{
|
||||||
|
receipt.events != null ?
|
||||||
|
<li>Events:
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
Object.keys(receipt.events).map(function(ev, index) {
|
||||||
|
if(!isNaN(ev)) return null;
|
||||||
|
const eventAbi = contract.options.jsonInterface.filter(x => x.name == ev)[0];
|
||||||
|
let props = [];
|
||||||
|
for(let prop in receipt.events[ev].returnValues){
|
||||||
|
if(isNaN(prop)){
|
||||||
|
let input = eventAbi.inputs.filter(x => x.name == prop)[0];
|
||||||
|
props.push(prop + ': '
|
||||||
|
+ (input.type.indexOf('int') == -1 ? '"' : '')
|
||||||
|
+ receipt.events[ev].returnValues[prop]
|
||||||
|
+ (input.type.indexOf('int') == -1 ? '"' : ''));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return <li key={index}>{ev}({props.join(', ')})</li>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
{this.state.error ? <p className="error">{this.state.message}</p> : '' }
|
||||||
|
{!this.state.error && this.state.message != null ? <p className="note">{this.state.message}</p> : '' }
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
showResults(_error, _message, _receipt){
|
||||||
|
this.setState({
|
||||||
|
error: _error,
|
||||||
|
message: _message,
|
||||||
|
receipt: _receipt
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FunctionForm;
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
import ContractContext from './contract-context';
|
||||||
|
|
||||||
|
class Function extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
onRequest: false,
|
||||||
|
fields: {},
|
||||||
|
methodFields: {
|
||||||
|
from: '',
|
||||||
|
to: '',
|
||||||
|
value: 0,
|
||||||
|
data: '',
|
||||||
|
gasLimit: '7000000'
|
||||||
|
},
|
||||||
|
receipt: null
|
||||||
|
};
|
||||||
|
|
||||||
|
this.handleParameterChange = this.handleParameterChange.bind(this);
|
||||||
|
this.handleMethodFieldChange = this.handleMethodFieldChange.bind(this);
|
||||||
|
this.handleClick = this.handleClick.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleClick(e, instanceUpdateCallback){
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
this.setState({onRequest: true, receipt: null});
|
||||||
|
|
||||||
|
this.props.resultHandler(false, null, null);
|
||||||
|
|
||||||
|
let executionParams = {
|
||||||
|
from: this.state.methodFields.from,
|
||||||
|
gasLimit: this.state.methodFields.gasLimit
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.props.abi.payable)
|
||||||
|
executionParams.value = this.state.methodFields.value;
|
||||||
|
|
||||||
|
if(this.props.abi.type == 'fallback'){
|
||||||
|
executionParams.data = this.state.methodFields.data;
|
||||||
|
executionParams.to = this.props.contract.options.address;
|
||||||
|
}
|
||||||
|
|
||||||
|
let fields = this.state.fields;
|
||||||
|
|
||||||
|
let functionLabel = this._getFunctionLabel();
|
||||||
|
let functionParams = this._getFunctionParamString();
|
||||||
|
let methodParams = this._getMethodString();
|
||||||
|
if(this.props.abi.type == "constructor")
|
||||||
|
functionParams = `{arguments: [${functionParams}]}`;
|
||||||
|
|
||||||
|
console.log(`%cawait ${functionLabel}(${functionParams})${this.props.abi.type != 'fallback' ? '.' + this._getMethodType() : ''}${methodParams}`, 'font-weight: bold');
|
||||||
|
|
||||||
|
let _receipt;
|
||||||
|
|
||||||
|
try {
|
||||||
|
if(this.props.abi.type == 'constructor'){
|
||||||
|
let contractInstance = await this.props.contract.deploy({arguments: Object.keys(fields).map(val => fields[val])}).send(executionParams);
|
||||||
|
instanceUpdateCallback(contractInstance.options.address);
|
||||||
|
this.setState({onRequest: false});
|
||||||
|
console.log(contractInstance.options.address);
|
||||||
|
this.props.resultHandler(false, 'New instance: ' + contractInstance.options.address);
|
||||||
|
} else {
|
||||||
|
|
||||||
|
if(this.props.abi.type == 'fallback')
|
||||||
|
_receipt = await this.web3.eth.sendTransaction(executionParams);
|
||||||
|
else
|
||||||
|
_receipt = await this.props.contract
|
||||||
|
.methods[this.props.abi.name + '(' + this.props.abi.inputs.map(input => input.type).join(',') + ')']
|
||||||
|
.apply(null, Object.keys(fields).map(val => fields[val]))
|
||||||
|
[this._getMethodType()](executionParams)
|
||||||
|
|
||||||
|
if(this._getMethodType() == 'call'){
|
||||||
|
this.props.resultHandler(false, _receipt, null);
|
||||||
|
} else {
|
||||||
|
this.props.resultHandler(false, null, _receipt);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({onRequest: false, receipt: _receipt});
|
||||||
|
console.log(_receipt);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error('%s: %s', e.name, e.message);
|
||||||
|
this.setState({onRequest: false});
|
||||||
|
this.props.resultHandler(true, e.name + ": " + e.message, _receipt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleParameterChange(e){
|
||||||
|
let newState = this.state;
|
||||||
|
newState.fields[e.target.getAttribute('data-name')] = e.target.value;
|
||||||
|
this.setState(newState);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMethodFieldChange(e){
|
||||||
|
let newState = this.state;
|
||||||
|
newState.methodFields[e.target.getAttribute('data-param')] = e.target.value;
|
||||||
|
|
||||||
|
if(e.target.getAttribute('data-param') == 'from'){
|
||||||
|
newState.selectedAccount = e.target.options[e.target.selectedIndex].text;
|
||||||
|
}
|
||||||
|
this.setState(newState);
|
||||||
|
}
|
||||||
|
|
||||||
|
_getFunctionLabel(){
|
||||||
|
if(this.props.abi.type == 'function')
|
||||||
|
if(!this.props.duplicated)
|
||||||
|
return `${this.props.contractName}.methods.${this.props.abi.name}`;
|
||||||
|
else {
|
||||||
|
return `${this.props.contractName}.methods['${this.props.abi.name + '(' + (this.props.abi.inputs != null ? this.props.abi.inputs.map(input => input.type).join(',') : '') + ')'}']`;
|
||||||
|
}
|
||||||
|
else if(this.props.abi.type == 'fallback'){
|
||||||
|
return `web3.eth.sendTransaction`;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
return `${this.props.contractName}.deploy`;
|
||||||
|
}
|
||||||
|
|
||||||
|
_getMethodType(){
|
||||||
|
return (this.props.abi.constant == true || this.props.abi.stateMutability == 'view' || this.props.abi.stateMutability == 'pure') ? 'call' : 'send';
|
||||||
|
}
|
||||||
|
|
||||||
|
_getMethodFields(accounts){
|
||||||
|
let methodParams;
|
||||||
|
return <React.Fragment>
|
||||||
|
from: <select data-param="from" disabled={accounts.length == 0} value={this.state.from} onChange={this.handleMethodFieldChange}>
|
||||||
|
<option>-</option>
|
||||||
|
{
|
||||||
|
accounts.map(function (item, i) {
|
||||||
|
return <option key={i} value={item}>{`accounts[${i}]`}</option>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
{
|
||||||
|
this.props.abi.payable ?
|
||||||
|
<span>, value:
|
||||||
|
<input type="text" data-param="value" value={this.state.methodFields.value} size="6" onChange={this.handleMethodFieldChange} />
|
||||||
|
</span>
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
{
|
||||||
|
this._getMethodType() == 'send' ?
|
||||||
|
<span>, gasLimit:
|
||||||
|
<input type="text" data-param="gasLimit" value={this.state.methodFields.gasLimit} size="6" onChange={this.handleMethodFieldChange} />
|
||||||
|
</span>
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
{
|
||||||
|
this._getMethodType() == 'send' && this.props.abi.type == 'fallback' ?
|
||||||
|
<span>, data:
|
||||||
|
<input type="text" data-param="data" value={this.state.methodFields.data} size="6" onChange={this.handleMethodFieldChange} />
|
||||||
|
</span>
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
</React.Fragment>;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
_getFunctionParamFields(){
|
||||||
|
return <React.Fragment>
|
||||||
|
{
|
||||||
|
this.props.abi.inputs
|
||||||
|
.map((input, i) => <input key={i} type="text" data-var-type={input.type} data-type="inputParam" data-name={input.name} placeholder={input.name} title={input.type + ' ' + input.name} size={input.name.length} value={this.state.fields[input.name] || ''} size="6" onChange={this.handleParameterChange} />)
|
||||||
|
.reduce((accu, elem) => {
|
||||||
|
return accu === null ? [elem] : [...accu, ', ', elem]
|
||||||
|
}, null)
|
||||||
|
}
|
||||||
|
</React.Fragment>;
|
||||||
|
}
|
||||||
|
|
||||||
|
_getFunctionParamString(){
|
||||||
|
if(this.props.abi.type == 'fallback') return '';
|
||||||
|
return this.props.abi.inputs
|
||||||
|
.map((input, i) => (input.type.indexOf('int') == -1 ? '"' : '') + this.state.fields[input.name] + (input.type.indexOf('int') == -1 ? '"' : ''))
|
||||||
|
.join(', ');
|
||||||
|
}
|
||||||
|
|
||||||
|
_getMethodString(elem){
|
||||||
|
let methodParams = "({";
|
||||||
|
|
||||||
|
methodParams += `from: ` + this.state.selectedAccount;
|
||||||
|
if(this._getMethodType() == 'send'){
|
||||||
|
methodParams += ', gasLimit: ' + this.state.methodFields.gasLimit
|
||||||
|
if(this.props.abi.payable){
|
||||||
|
methodParams += ', value: ' + this.state.methodFields.value
|
||||||
|
}
|
||||||
|
if(this.props.abi.type == 'fallback'){
|
||||||
|
methodParams += ', data: "' + this.state.methodFields.data + '", to: "' + this.state.methodFields.to + '"'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return methodParams + "})";
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
return <ContractContext.Consumer>
|
||||||
|
{ (context) => (
|
||||||
|
<React.Fragment>
|
||||||
|
await {this._getFunctionLabel()}
|
||||||
|
{ this.props.abi.type != 'fallback' ? '(' : '' }
|
||||||
|
{ this.props.abi.type != 'fallback' ? this._getFunctionParamFields() : '' }
|
||||||
|
{ this.props.abi.type != 'fallback' ? ')' : '' }
|
||||||
|
{ this.props.abi.type != 'fallback' ? '.' + this._getMethodType() : '' }
|
||||||
|
({ this._getMethodFields(context.accounts) })
|
||||||
|
<button onClick={event => this.handleClick(event, context.updateInstances)} disabled={this.state.onRequest}>⏎</button>
|
||||||
|
{ this.state.onRequest ?
|
||||||
|
<img src="images/loading.gif" className="loading" alt="" />
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
</React.Fragment>
|
||||||
|
)}
|
||||||
|
</ContractContext.Consumer>;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Function;
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
import ContractContext from './contract-context';
|
||||||
|
|
||||||
|
class InstanceSelector extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
showInstances: false,
|
||||||
|
showCustomAddressField: false,
|
||||||
|
selectedInstance: props.selectedInstance,
|
||||||
|
customInstance: "",
|
||||||
|
error: false,
|
||||||
|
errorMessage: ""
|
||||||
|
};
|
||||||
|
|
||||||
|
this.handleShowInstances = this.handleShowInstances.bind(this);
|
||||||
|
this.handleChange = this.handleChange.bind(this);
|
||||||
|
this.handleClick = this.handleClick.bind(this);
|
||||||
|
this.handleTextChange = this.handleTextChange.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleTextChange(e){
|
||||||
|
this.setState({customInstance: e.target.value});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleShowInstances(e){
|
||||||
|
e.preventDefault();
|
||||||
|
this.setState({
|
||||||
|
showInstances: !this.state.showInstances
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClick(e){
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
let instance;
|
||||||
|
if(this.state.selectedInstance == "custom"){
|
||||||
|
instance = this.state.customInstance;
|
||||||
|
} else {
|
||||||
|
instance = this.state.selectedInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!/^0x[0-9a-f]{40}$/i.test(instance)){
|
||||||
|
this.setState({error: true, errorMessage: 'Not a valid Ethereum address.'});
|
||||||
|
console.log(this.state.errorMessage);
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.setState({error: false});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.instanceUpdate(instance);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
showInstances: false,
|
||||||
|
showCustomAddressField: false,
|
||||||
|
selectedInstance: instance,
|
||||||
|
customInstance: this.state.selectedInstance == "custom" ? this.state.customInstance : ""
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange(e){
|
||||||
|
this.setState({
|
||||||
|
showCustomAddressField: e.target.value == "custom",
|
||||||
|
selectedInstance: e.target.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
|
||||||
|
return <ContractContext.Consumer>
|
||||||
|
{ (context) => (<div className="contractSelection">
|
||||||
|
<h5>
|
||||||
|
<b>Instance Selected:</b> <span><b>{this.props.selectedInstance != null ? this.props.selectedInstance : 'none'}</b></span>
|
||||||
|
{!this.state.showInstances ? <a href="#" onClick={this.handleShowInstances}>Change</a> : <a href="#" onClick={this.handleShowInstances}>Cancel</a> }
|
||||||
|
</h5>
|
||||||
|
{this.state.showInstances ?
|
||||||
|
<div className="form-group control-group error">
|
||||||
|
<select className="form-control" id="contracts" value={this.state.selectedInstance} onChange={this.handleChange}>
|
||||||
|
<option value="custom">Specific contract address</option>
|
||||||
|
{
|
||||||
|
context.instances.map(function (item, i) {
|
||||||
|
return <option key={i} value={item}>{item}</option>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
{
|
||||||
|
this.state.showCustomAddressField ?
|
||||||
|
<input type="text" className="form-control" id="specificAddress" onChange={this.handleTextChange} placeholder="0x" />
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
<button className="btn btn-default" onClick={this.handleClick}>Change</button>
|
||||||
|
{
|
||||||
|
this.state.error ?
|
||||||
|
<p className="error">{this.state.errorMessage}</p>
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
</div> : "" }
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ContractContext.Consumer>;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default InstanceSelector;
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
class SourceArea extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
sourceCode: ""
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount(){
|
||||||
|
fetch(this.props.sourceURL)
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(text => {
|
||||||
|
let colorCodedText = hljs.highlight('javascript', text, true).value;
|
||||||
|
this.setState({sourceCode: colorCodedText});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
return <React.Fragment>
|
||||||
|
<h3 className="filename">{this.props.sourceURL.split('\\').pop().split('/').pop()}</h3>
|
||||||
|
<small className="url">{this.props.sourceURL}</small>
|
||||||
|
<pre dangerouslySetInnerHTML={{__html: this.state.sourceCode}}></pre>
|
||||||
|
</React.Fragment>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SourceArea;
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
class Tab extends React.Component {
|
||||||
|
render(){
|
||||||
|
return <div role="tabpanel" className={this.props.active || false ? 'tab-pane active' : 'tab-pane'} id={this.props.id}>
|
||||||
|
<h2>{this.props.name}</h2>
|
||||||
|
{ this.props.children }
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Tab;
|
||||||
Loading…
Reference in New Issue