openethereum/js/src/views/Contract/contract.js

365 lines
8.9 KiB
JavaScript
Raw Normal View History

Initial new UI source code import (#2607) * address -> name mappings * expanding, loading all coin details * send use only actual BasicCoin tokens registered (any reg) * sending token & accounts * form styling updates * send form layout in place * coin send working as expected * api subscriptions on multiple addresses * bring in events * simplify * basic events display in-place, functionally complete * basic functionality in-place * fix horrible event address issue * rwork display of events slightly * test TLA availability * table for owner -> tokens * fix signature lookup address * fix signature lookup address * basic overview styling * txhash links * page layout adjustments * background import * adjust colors * no global registration, simplify color selection * updated styling * connection dialog for "busy connecting" * initial token connection - WIP * init token updates take place * basic test for manual token * rework connection display * allow updates of the secure token * first stab at making the build build * update runner tags * fix linting issues * skip tests requiring network (should be e2e, TODO) * re-enable javascript tag/runner * release push does the trick * push to any branch, CI name * javscript-test runner as well * swap dependencies build requires test * revert stages swap * retrieve images associated with tokens * remove js build deps order * null image when hash = 0x0 * 6x64 images (hashes for registries) * don't pass tokens as prop to IdentityIcon * check images against content hash pictures * cleanup signer after connection changes * fix naming typo * display unknownImages for balances (not available as content hash) * unknownImage for transfer dialog * basic githubhint layout * single input for commit/filename * ethcore_hashContent call * lookup hash * registration in place * fixes * events is using a proper table * pass value through as-is * stop wrongly using main app IdentityIcon * NEVER export class instance functions * alignment back to normal * typo in definition * set & get images working (mostly) * show content retrieval info * set exitcode via || * use javascript:latest images * disable npm progress bar * rename phase I * rename phase II * only send build output to GitHub on major branches * also run the build step as part of the test (until comprehensive) * ci-specific build (no webpack progress) * allow for account creation via recovery phrase * display account uuid (where available), closes #2546 * connection dialog now shows up in dapps as well, closes #2538 * token images show up as expected * IdentityName component added and deployed * fix padding tests * adjust tests to map to stricter 0x-prefixed hex * render names via common component for the address -> name * split lint into seperate script (early exit) * test phases changed to lint, test & pack * pack part of test phase * remove files marked for deletion (cleanup) * Signer cleanups, start moving in the direction of the rest * add personal signer methods * basic signer request subscription * don't poll blockNumber when not connected * missing return, creating massive ws queue backlogs * ΞTH -> ETH * fix failing tests * registry uses setAddress to actually set addresses now * bytes mapping operates on lowerCase hex strings * sha3 ids for each application * add dappreg to list of contracts * adjust alignment of queries * show gas estimation log * abi with payable for register function * add key as required * image retrieval from dappreg * use proper Image urls * embed and link apps from Parity, retrieved via /api/apps * filter apps that has been replaced * proxy entry for parity-utils * add basiccoin abi * add support for fallback abi type * capture constructor paramaters * merge master into js * move images to assets/images/ * add font assets * import fonts as part of build * don't inline woff files * Revert "merge master into js" This reverts commit cfcfa81bd26f1b3cbc748d3afa1eb5c670b363fe. * remove unused npm packages * information on gas estimates (like almost everywhere else) * don't pass gas & gasPrice to estimation * display account passwordhint when available * signer subscriptions based on polling & function trapping * pending requests retrieved via jsapi * update signer middleware * remove all web3 instances * remove web3 package * last web3 dependencies removed * no need to toChecksumAddress - api takes care of it * expand description for personal_confirmRequest * Signer conversion from web3 -> parity.js completed * explicit in no return * green circle background * remove generated background * convert /api/* paths to localhost:8080/api/* paths (hard-coded, temporary) * change dapps to load from localhost:8080/ui/* * remove dangling web3 files * update manager test for signer * /api/ping -> / * additional token images * additional token images * add missing styles.css for 8180 error pages * cater for txhash returning null/empty object * adjust output directories * Release merge with origin with ours strategy * additional token images * cater for development server * s/localhost/127.0.0.1/ (cater for origin) * Fix address selection for contract deployment * Adjust z-index for error overlay * better text on unique background pattern * fix signer rejections * Don't allow gavcoin transfer with no balance * fix txhash rendering in signer * remove unnecessary ParityBackground * script to update js-precompiled * Redirect from :8080 to :8180 * Remove extra return * Dapp logo images
2016-10-18 11:52:56 +02:00
// Copyright 2015, 2016 Ethcore (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ActionDelete from 'material-ui/svg-icons/action/delete';
import AvPlayArrow from 'material-ui/svg-icons/av/play-arrow';
import ContentCreate from 'material-ui/svg-icons/content/create';
import { newError } from '../../redux/actions';
import { EditMeta, ExecuteContract } from '../../modals';
import { Actionbar, Button, Page } from '../../ui';
import Header from '../Account/Header';
import Delete from '../Address/Delete';
import Events from './Events';
import Queries from './Queries';
import styles from './contract.css';
class Contract extends Component {
static contextTypes = {
api: React.PropTypes.object.isRequired
}
static propTypes = {
accounts: PropTypes.object,
balances: PropTypes.object,
contracts: PropTypes.object,
isTest: PropTypes.bool,
params: PropTypes.object
}
state = {
contract: null,
fromAddress: '',
showDeleteDialog: false,
showEditDialog: false,
showExecuteDialog: false,
subscriptionId: -1,
blockSubscriptionId: -1,
allEvents: [],
minedEvents: [],
pendingEvents: [],
queryValues: {}
}
componentDidMount () {
const { api } = this.context;
this.attachContract(this.props);
this.setBaseAccount(this.props);
api
.subscribe('eth_blockNumber', this.queryContract)
.then(blockSubscriptionId => this.setState({ blockSubscriptionId }));
}
componentWillReceiveProps (newProps) {
const { accounts, contracts } = newProps;
if (Object.keys(contracts).length !== Object.keys(this.props.contracts).length) {
this.attachContract(newProps);
}
if (Object.keys(accounts).length !== Object.keys(this.props.accounts).length) {
this.setBaseAccount(newProps);
}
}
componentWillUnmount () {
const { api } = this.context;
const { subscriptionId, blockSubscriptionId, contract } = this.state;
api.unsubscribe(blockSubscriptionId);
Initial new UI source code import (#2607) * address -> name mappings * expanding, loading all coin details * send use only actual BasicCoin tokens registered (any reg) * sending token & accounts * form styling updates * send form layout in place * coin send working as expected * api subscriptions on multiple addresses * bring in events * simplify * basic events display in-place, functionally complete * basic functionality in-place * fix horrible event address issue * rwork display of events slightly * test TLA availability * table for owner -> tokens * fix signature lookup address * fix signature lookup address * basic overview styling * txhash links * page layout adjustments * background import * adjust colors * no global registration, simplify color selection * updated styling * connection dialog for "busy connecting" * initial token connection - WIP * init token updates take place * basic test for manual token * rework connection display * allow updates of the secure token * first stab at making the build build * update runner tags * fix linting issues * skip tests requiring network (should be e2e, TODO) * re-enable javascript tag/runner * release push does the trick * push to any branch, CI name * javscript-test runner as well * swap dependencies build requires test * revert stages swap * retrieve images associated with tokens * remove js build deps order * null image when hash = 0x0 * 6x64 images (hashes for registries) * don't pass tokens as prop to IdentityIcon * check images against content hash pictures * cleanup signer after connection changes * fix naming typo * display unknownImages for balances (not available as content hash) * unknownImage for transfer dialog * basic githubhint layout * single input for commit/filename * ethcore_hashContent call * lookup hash * registration in place * fixes * events is using a proper table * pass value through as-is * stop wrongly using main app IdentityIcon * NEVER export class instance functions * alignment back to normal * typo in definition * set & get images working (mostly) * show content retrieval info * set exitcode via || * use javascript:latest images * disable npm progress bar * rename phase I * rename phase II * only send build output to GitHub on major branches * also run the build step as part of the test (until comprehensive) * ci-specific build (no webpack progress) * allow for account creation via recovery phrase * display account uuid (where available), closes #2546 * connection dialog now shows up in dapps as well, closes #2538 * token images show up as expected * IdentityName component added and deployed * fix padding tests * adjust tests to map to stricter 0x-prefixed hex * render names via common component for the address -> name * split lint into seperate script (early exit) * test phases changed to lint, test & pack * pack part of test phase * remove files marked for deletion (cleanup) * Signer cleanups, start moving in the direction of the rest * add personal signer methods * basic signer request subscription * don't poll blockNumber when not connected * missing return, creating massive ws queue backlogs * ΞTH -> ETH * fix failing tests * registry uses setAddress to actually set addresses now * bytes mapping operates on lowerCase hex strings * sha3 ids for each application * add dappreg to list of contracts * adjust alignment of queries * show gas estimation log * abi with payable for register function * add key as required * image retrieval from dappreg * use proper Image urls * embed and link apps from Parity, retrieved via /api/apps * filter apps that has been replaced * proxy entry for parity-utils * add basiccoin abi * add support for fallback abi type * capture constructor paramaters * merge master into js * move images to assets/images/ * add font assets * import fonts as part of build * don't inline woff files * Revert "merge master into js" This reverts commit cfcfa81bd26f1b3cbc748d3afa1eb5c670b363fe. * remove unused npm packages * information on gas estimates (like almost everywhere else) * don't pass gas & gasPrice to estimation * display account passwordhint when available * signer subscriptions based on polling & function trapping * pending requests retrieved via jsapi * update signer middleware * remove all web3 instances * remove web3 package * last web3 dependencies removed * no need to toChecksumAddress - api takes care of it * expand description for personal_confirmRequest * Signer conversion from web3 -> parity.js completed * explicit in no return * green circle background * remove generated background * convert /api/* paths to localhost:8080/api/* paths (hard-coded, temporary) * change dapps to load from localhost:8080/ui/* * remove dangling web3 files * update manager test for signer * /api/ping -> / * additional token images * additional token images * add missing styles.css for 8180 error pages * cater for txhash returning null/empty object * adjust output directories * Release merge with origin with ours strategy * additional token images * cater for development server * s/localhost/127.0.0.1/ (cater for origin) * Fix address selection for contract deployment * Adjust z-index for error overlay * better text on unique background pattern * fix signer rejections * Don't allow gavcoin transfer with no balance * fix txhash rendering in signer * remove unnecessary ParityBackground * script to update js-precompiled * Redirect from :8080 to :8180 * Remove extra return * Dapp logo images
2016-10-18 11:52:56 +02:00
contract.unsubscribe(subscriptionId);
}
render () {
const { balances, contracts, params, isTest } = this.props;
const { allEvents, contract, queryValues } = this.state;
const account = contracts[params.address];
const balance = balances[params.address];
if (!account) {
return null;
}
return (
<div className={ styles.contract }>
{ this.renderActionbar(account) }
{ this.renderDeleteDialog(account) }
{ this.renderEditDialog(account) }
{ this.renderExecuteDialog() }
<Page>
<Header
isTest={ isTest }
account={ account }
balance={ balance } />
<Queries
contract={ contract }
values={ queryValues } />
<Events
events={ allEvents } />
</Page>
</div>
);
}
renderActionbar (account) {
const buttons = [
<Button
key='execute'
icon={ <AvPlayArrow /> }
label='execute'
onClick={ this.showExecuteDialog } />,
<Button
key='editmeta'
icon={ <ContentCreate /> }
label='edit'
onClick={ this.onEditClick } />,
<Button
key='delete'
icon={ <ActionDelete /> }
label='delete contract'
onClick={ this.showDeleteDialog } />
];
return (
<Actionbar
title='Contract Information'
buttons={ !account || account.meta.deleted ? [] : buttons } />
);
}
renderDeleteDialog (account) {
const { showDeleteDialog } = this.state;
return (
<Delete
account={ account }
visible={ showDeleteDialog }
route='/contracts'
onClose={ this.closeDeleteDialog } />
);
}
renderEditDialog (account) {
const { showEditDialog } = this.state;
if (!showEditDialog) {
return null;
}
return (
<EditMeta
account={ account }
keys={ ['description'] }
onClose={ this.onEditClick } />
);
}
renderExecuteDialog () {
const { contract, fromAddress, showExecuteDialog } = this.state;
const { accounts } = this.props;
if (!showExecuteDialog) {
return null;
}
return (
<ExecuteContract
accounts={ accounts }
contract={ contract }
fromAddress={ fromAddress }
onClose={ this.closeExecuteDialog }
onFromAddressChange={ this.onFromAddressChange } />
);
}
queryContract = () => {
const { contract } = this.state;
if (!contract) {
return;
}
const queries = contract.functions
.filter((fn) => fn.constant)
.filter((fn) => !fn.inputs.length);
Promise
.all(queries.map((query) => query.call()))
.then(results => {
const values = queries.reduce((object, fn, idx) => {
const key = fn.name;
object[key] = results[idx];
return object;
}, {});
this.setState({ queryValues: values });
})
.catch((error) => {
console.error('queryContract', error);
});
}
onEditClick = () => {
this.setState({
showEditDialog: !this.state.showEditDialog
});
}
closeDeleteDialog = () => {
this.setState({ showDeleteDialog: false });
}
showDeleteDialog = () => {
this.setState({ showDeleteDialog: true });
}
closeExecuteDialog = () => {
this.setState({ showExecuteDialog: false });
}
showExecuteDialog = () => {
this.setState({ showExecuteDialog: true });
}
_sortEvents = (a, b) => {
return b.blockNumber.cmp(a.blockNumber) || b.logIndex.cmp(a.logIndex);
}
_logToEvent = (log) => {
const { api } = this.context;
const key = api.util.sha3(JSON.stringify(log));
const { address, blockNumber, logIndex, transactionHash, transactionIndex, params, type } = log;
return {
type: log.event,
state: type,
address,
blockNumber,
logIndex,
transactionHash,
transactionIndex,
params,
key
};
}
_receiveEvents = (error, logs) => {
if (error) {
console.error('_receiveEvents', error);
return;
}
const events = logs.map(this._logToEvent);
const minedEvents = events
.filter((event) => event.state === 'mined')
.reverse()
.concat(this.state.minedEvents)
.sort(this._sortEvents);
const pendingEvents = events
.filter((event) => event.state === 'pending')
.reverse()
.concat(this.state.pendingEvents.filter((pending) => {
return !events.find((event) => {
const isMined = (event.state === 'mined') && (event.transactionHash === pending.transactionHash);
const isPending = (event.state === 'pending') && (event.key === pending.key);
return isMined || isPending;
});
}))
.sort(this._sortEvents);
const allEvents = pendingEvents.concat(minedEvents);
this.setState({
allEvents,
minedEvents,
pendingEvents
});
}
attachContract (props) {
if (!props) {
return;
}
const { api } = this.context;
const { contracts, params } = props;
const account = contracts[params.address];
if (!account) {
return;
}
const contract = api.newContract(account.meta.abi, params.address);
contract
.subscribe(null, { limit: 25, fromBlock: 0, toBlock: 'pending' }, this._receiveEvents)
Initial new UI source code import (#2607) * address -> name mappings * expanding, loading all coin details * send use only actual BasicCoin tokens registered (any reg) * sending token & accounts * form styling updates * send form layout in place * coin send working as expected * api subscriptions on multiple addresses * bring in events * simplify * basic events display in-place, functionally complete * basic functionality in-place * fix horrible event address issue * rwork display of events slightly * test TLA availability * table for owner -> tokens * fix signature lookup address * fix signature lookup address * basic overview styling * txhash links * page layout adjustments * background import * adjust colors * no global registration, simplify color selection * updated styling * connection dialog for "busy connecting" * initial token connection - WIP * init token updates take place * basic test for manual token * rework connection display * allow updates of the secure token * first stab at making the build build * update runner tags * fix linting issues * skip tests requiring network (should be e2e, TODO) * re-enable javascript tag/runner * release push does the trick * push to any branch, CI name * javscript-test runner as well * swap dependencies build requires test * revert stages swap * retrieve images associated with tokens * remove js build deps order * null image when hash = 0x0 * 6x64 images (hashes for registries) * don't pass tokens as prop to IdentityIcon * check images against content hash pictures * cleanup signer after connection changes * fix naming typo * display unknownImages for balances (not available as content hash) * unknownImage for transfer dialog * basic githubhint layout * single input for commit/filename * ethcore_hashContent call * lookup hash * registration in place * fixes * events is using a proper table * pass value through as-is * stop wrongly using main app IdentityIcon * NEVER export class instance functions * alignment back to normal * typo in definition * set & get images working (mostly) * show content retrieval info * set exitcode via || * use javascript:latest images * disable npm progress bar * rename phase I * rename phase II * only send build output to GitHub on major branches * also run the build step as part of the test (until comprehensive) * ci-specific build (no webpack progress) * allow for account creation via recovery phrase * display account uuid (where available), closes #2546 * connection dialog now shows up in dapps as well, closes #2538 * token images show up as expected * IdentityName component added and deployed * fix padding tests * adjust tests to map to stricter 0x-prefixed hex * render names via common component for the address -> name * split lint into seperate script (early exit) * test phases changed to lint, test & pack * pack part of test phase * remove files marked for deletion (cleanup) * Signer cleanups, start moving in the direction of the rest * add personal signer methods * basic signer request subscription * don't poll blockNumber when not connected * missing return, creating massive ws queue backlogs * ΞTH -> ETH * fix failing tests * registry uses setAddress to actually set addresses now * bytes mapping operates on lowerCase hex strings * sha3 ids for each application * add dappreg to list of contracts * adjust alignment of queries * show gas estimation log * abi with payable for register function * add key as required * image retrieval from dappreg * use proper Image urls * embed and link apps from Parity, retrieved via /api/apps * filter apps that has been replaced * proxy entry for parity-utils * add basiccoin abi * add support for fallback abi type * capture constructor paramaters * merge master into js * move images to assets/images/ * add font assets * import fonts as part of build * don't inline woff files * Revert "merge master into js" This reverts commit cfcfa81bd26f1b3cbc748d3afa1eb5c670b363fe. * remove unused npm packages * information on gas estimates (like almost everywhere else) * don't pass gas & gasPrice to estimation * display account passwordhint when available * signer subscriptions based on polling & function trapping * pending requests retrieved via jsapi * update signer middleware * remove all web3 instances * remove web3 package * last web3 dependencies removed * no need to toChecksumAddress - api takes care of it * expand description for personal_confirmRequest * Signer conversion from web3 -> parity.js completed * explicit in no return * green circle background * remove generated background * convert /api/* paths to localhost:8080/api/* paths (hard-coded, temporary) * change dapps to load from localhost:8080/ui/* * remove dangling web3 files * update manager test for signer * /api/ping -> / * additional token images * additional token images * add missing styles.css for 8180 error pages * cater for txhash returning null/empty object * adjust output directories * Release merge with origin with ours strategy * additional token images * cater for development server * s/localhost/127.0.0.1/ (cater for origin) * Fix address selection for contract deployment * Adjust z-index for error overlay * better text on unique background pattern * fix signer rejections * Don't allow gavcoin transfer with no balance * fix txhash rendering in signer * remove unnecessary ParityBackground * script to update js-precompiled * Redirect from :8080 to :8180 * Remove extra return * Dapp logo images
2016-10-18 11:52:56 +02:00
.then((subscriptionId) => {
this.setState({ subscriptionId });
});
this.setState({ contract }, this.queryContract);
}
setBaseAccount (props) {
const { fromAccount } = this.state;
if (!props || fromAccount) {
return;
}
const { accounts } = props;
this.setState({
fromAddress: Object.keys(accounts)[0]
});
}
onFromAddressChange = (event, fromAddress) => {
this.setState({
fromAddress
});
}
}
function mapStateToProps (state) {
const { accounts, contracts } = state.personal;
const { balances } = state.balances;
const { isTest } = state.nodeStatus;
return {
isTest,
accounts,
contracts,
balances
};
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({ newError }, dispatch);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Contract);