mirror of
https://github.com/status-im/contracts.git
synced 2025-02-23 03:58:42 +00:00
Removing unused files
This commit is contained in:
Richard Ramos
parent
1136e4273a
commit
2b8c533a4c
@ -1,53 +0,0 @@
|
|||||||
class AccountList extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
error: false,
|
|
||||||
errorMessage: "",
|
|
||||||
accounts: []
|
|
||||||
};
|
|
||||||
|
|
||||||
this.handleClick = this.handleClick.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
async handleClick(e){
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
try {
|
|
||||||
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});
|
|
||||||
|
|
||||||
this.props.accountUpdate(accounts);
|
|
||||||
} catch(err) {
|
|
||||||
this.setState({
|
|
||||||
error: true,
|
|
||||||
errorMessage: e.name + ': ' + e.message
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
render(){
|
|
||||||
return <div>
|
|
||||||
<h3>Get Accounts</h3>
|
|
||||||
<div className="scenario">
|
|
||||||
<div id="getAccounts" className="code">
|
|
||||||
await web3.eth.getAccounts(); <button onClick={this.handleClick}>⏎</button>
|
|
||||||
</div>
|
|
||||||
{
|
|
||||||
this.state.accounts.length > 0 ?
|
|
||||||
<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>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AccountList;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import Tab from './tab';
|
|
||||||
import AccountList from './account-list';
|
|
||||||
import SourceArea from './source-area';
|
|
||||||
import InstanceSelector from './instance-selector';
|
|
||||||
import FunctionArea from './function-area';
|
|
||||||
|
|
||||||
class ContractUI extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
accounts: [],
|
|
||||||
instances: [],
|
|
||||||
selectedInstance: null
|
|
||||||
};
|
|
||||||
|
|
||||||
if(props.contract.options.address != null){
|
|
||||||
this.state.instances = [props.contract.options.address];
|
|
||||||
this.state.selectedInstance = props.contract.options.address;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.handleAccountUpdate = this.handleAccountUpdate.bind(this);
|
|
||||||
this.handleInstanceSelection = this.handleInstanceSelection.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleAccountUpdate(_accounts){
|
|
||||||
this.setState({
|
|
||||||
accounts: _accounts
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleInstanceSelection(_instance){
|
|
||||||
this.props.contract.options.address = _instance;
|
|
||||||
this.setState({
|
|
||||||
selectedInstance: _instance
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return <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.handleAccountUpdate} />
|
|
||||||
<h3>Deploy</h3>
|
|
||||||
<FunctionArea accounts={this.state.accounts} contractName={this.props.name} contract={this.props.contract} type="constructor" />
|
|
||||||
</Tab>
|
|
||||||
<Tab id="functions" name="Functions">
|
|
||||||
<InstanceSelector selectedInstance={this.state.selectedInstance} instances={this.state.instances} instanceUpdate={this.handleInstanceSelection} />
|
|
||||||
<FunctionArea accounts={this.state.accounts} contractName={this.props.name} contract={this.props.contract} type="function" />
|
|
||||||
<FunctionArea accounts={this.state.accounts} contractName={this.props.name} contract={this.props.contract} type="fallback" />
|
|
||||||
</Tab>
|
|
||||||
<Tab id="contract" name="Contract">
|
|
||||||
<SourceArea sourceURL={this.props.sourceURL} />
|
|
||||||
</Tab>
|
|
||||||
</div>
|
|
||||||
</div>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ContractUI;
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
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;
|
|
||||||
const accounts = this.props.accounts;
|
|
||||||
|
|
||||||
return <div>
|
|
||||||
{
|
|
||||||
this.props.contract.options.jsonInterface
|
|
||||||
.filter(item => item.type == type)
|
|
||||||
.map((item, i) => <FunctionForm key={i} accounts={accounts} contract={contract} contractName={contractName} abi={item} />)
|
|
||||||
}
|
|
||||||
</div>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default FunctionArea;
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
import Function from './function';
|
|
||||||
|
|
||||||
class FunctionForm extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
fields: {}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
_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;
|
|
||||||
|
|
||||||
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 accounts={this.props.accounts} contract={this.props.contractName} duplicated={isDuplicated} abi={this.props.abi} />
|
|
||||||
</div>
|
|
||||||
<p className="error"></p>
|
|
||||||
<p className="note"></p>
|
|
||||||
</div>
|
|
||||||
</div>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default FunctionForm;
|
|
||||||
@ -1,116 +0,0 @@
|
|||||||
class Function extends React.Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
fields: {},
|
|
||||||
methodFields: {
|
|
||||||
from: '',
|
|
||||||
to: '',
|
|
||||||
value: 0,
|
|
||||||
data: '',
|
|
||||||
gasLimit: '700000'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
this.handleParameterChange = this.handleParameterChange.bind(this);
|
|
||||||
this.handleMethodFieldChange = this.handleMethodFieldChange.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
this.setState(newState);
|
|
||||||
}
|
|
||||||
|
|
||||||
_getFunctionLabel(){
|
|
||||||
if(this.props.abi.type == 'function')
|
|
||||||
if(!this.props.duplicated)
|
|
||||||
return `${this.props.contract}.methods.${this.props.abi.name}`;
|
|
||||||
else {
|
|
||||||
return `${this.props.contract}.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.contract}.deploy`;
|
|
||||||
}
|
|
||||||
|
|
||||||
_getMethodType(){
|
|
||||||
return (this.props.abi.constant == true || this.props.abi.stateMutability == 'view' || this.props.abi.stateMutability == 'pure') ? 'call' : 'send';
|
|
||||||
}
|
|
||||||
|
|
||||||
_getMethodFields(){
|
|
||||||
let methodParams;
|
|
||||||
return <span>
|
|
||||||
from: <select data-param="from" disabled={this.props.accounts.length == 0} onChange={this.handleMethodFieldChange}>
|
|
||||||
{
|
|
||||||
this.props.accounts.length == 0 ?
|
|
||||||
<option>No accounts</option>
|
|
||||||
:
|
|
||||||
this.props.accounts.map(function (item, i) {
|
|
||||||
return <option key={i} value={item}>{`account[${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>
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
</span>;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
_getFunctionParamFields(){
|
|
||||||
return <span>
|
|
||||||
{
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
</span>;
|
|
||||||
}
|
|
||||||
|
|
||||||
render(){
|
|
||||||
return <span>
|
|
||||||
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() })
|
|
||||||
<button>⏎</button>
|
|
||||||
<img src="images/loading.gif" className="loading" alt="" />
|
|
||||||
</span>;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Function;
|
|
||||||
@ -1,100 +0,0 @@
|
|||||||
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 <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>
|
|
||||||
{
|
|
||||||
this.props.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>;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default InstanceSelector;
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
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 <div>
|
|
||||||
<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>
|
|
||||||
</div>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SourceArea;
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
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;
|
|
||||||
21
app/react-dapp.js
vendored
21
app/react-dapp.js
vendored
@ -1,21 +0,0 @@
|
|||||||
import 'bootstrap';
|
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
||||||
import './dapp.css';
|
|
||||||
|
|
||||||
import EmbarkJS from 'Embark/EmbarkJS';
|
|
||||||
import IdentityFactory from 'Embark/contracts/IdentityFactory';
|
|
||||||
|
|
||||||
import ContractUI from './components/contract-ui';
|
|
||||||
|
|
||||||
|
|
||||||
__embarkContext.execWhenReady(function(){
|
|
||||||
|
|
||||||
// Each contract should be awailable 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')
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<!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="js/react-dapp.js"></script>
|
|
||||||
</head>
|
|
||||||
<body class="container-fluid">
|
|
||||||
<div id="root"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -2,9 +2,9 @@
|
|||||||
"contracts": ["contracts/**"],
|
"contracts": ["contracts/**"],
|
||||||
"app": {
|
"app": {
|
||||||
"js/dapp.js": ["app/dapp.js"],
|
"js/dapp.js": ["app/dapp.js"],
|
||||||
"js/react-dapp.js": ["app/react-dapp.js"],
|
"contracts-section.js": ["app/react/contracts-section.js"],
|
||||||
"index.html": "app/index.html",
|
"index.html": "app/index.html",
|
||||||
"react-version.html": "app/react-version.html",
|
"contracts-section.html": "app/react/contracts-section.html",
|
||||||
"images/": ["app/images/**"]
|
"images/": ["app/images/**"]
|
||||||
},
|
},
|
||||||
"buildDir": "dist/",
|
"buildDir": "dist/",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user