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/**"],
|
||||
"app": {
|
||||
"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",
|
||||
"react-version.html": "app/react-version.html",
|
||||
"contracts-section.html": "app/react/contracts-section.html",
|
||||
"images/": ["app/images/**"]
|
||||
},
|
||||
"buildDir": "dist/",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user