grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Better GHH event display & tracking

Browse Source
This commit is contained in:
Jaco Greeff 2016-11-17 19:37:08 +01:00
parent 7b866b4a1b
commit 0c26eddd7f
5 changed files with 256 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
js/src/dapps/githubhint/Application/application.css
View File

@ -15,12 +15,17 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.container {
.body {
text-align: center;
background: #333;
color: #fff;
}
.container {
font-family: 'Roboto';
vertical-align: middle;
padding: 4em 0;
text-align: center;
margin: 0 0 2em 0;
}
.form {
@ -98,7 +103,7 @@
color: #333;
background: #eee;
border: none;
border-radius: 5px;
border-radius: 0.5em;
width: 100%;
font-size: 1em;
text-align: center;
@ -113,20 +118,29 @@
}
.hashError, .hashWarning, .hashOk {
padding-top: 0.5em;
margin: 0.5em 0;
text-align: center;
padding: 1em 0;
border: 0.25em solid #333;
border-radius: 0.5em;
}
.hashError {
border-color: #f66;
color: #f66;
background: rgba(255, 102, 102, 0.25);
}
.hashWarning {
border-color: #f80;
color: #f80;
background: rgba(255, 236, 0, 0.25);
}
.hashOk {
opacity: 0.5;
border-color: #6f6;
color: #6f6;
background: rgba(102, 255, 102, 0.25);
}
.typeButtons {

171
js/src/dapps/githubhint/Application/application.js
View File

@ -19,6 +19,7 @@ import React, { Component } from 'react';
import { api } from '../parity';
import { attachInterface } from '../services';
import Button from '../Button';
import Events from '../Events';
import IdentityIcon from '../IdentityIcon';
import Loading from '../Loading';
@ -27,6 +28,8 @@ import styles from './application.css';
const INVALID_URL_HASH = '0xc5d2460186f7233c927e7db2dcc703c0e500b653ca82273b7bfad8045d85a470';
const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
let nextEventId = 0;
export default class Application extends Component {
state = {
fromAddress: null,
@ -43,7 +46,9 @@ export default class Application extends Component {
registerState: '',
registerType: 'file',
repo: '',
repoError: null
repoError: null,
events: {},
eventIds: []
}
componentDidMount () {
@ -75,7 +80,7 @@ export default class Application extends Component {
let hashClass = null;
if (contentHashError) {
hashClass = contentHashOwner !== fromAddress ? styles.hashError : styles.hashWarning;
} else {
} else if (contentHash) {
hashClass = styles.hashOk;
}
@ -116,29 +121,34 @@ export default class Application extends Component {
}
return (
<div className={ styles.container }>
<div className={ styles.form }>
<div className={ styles.typeButtons }>
<Button
disabled={ registerBusy }
invert={ registerType !== 'file' }
onClick={ this.onClickTypeNormal }>File Link</Button>
<Button
disabled={ registerBusy }
invert={ registerType !== 'content' }
onClick={ this.onClickTypeContent }>Content Bundle</Button>
</div>
<div className={ styles.box }>
<div className={ styles.description }>
Provide a valid URL to register. The content information can be used in other contracts that allows for reverse lookups, e.g. image registries, dapp registries, etc.
<div className={ styles.body }>
<div className={ styles.container }>
<div className={ styles.form }>
<div className={ styles.typeButtons }>
<Button
disabled={ registerBusy }
invert={ registerType !== 'file' }
onClick={ this.onClickTypeNormal }>File Link</Button>
<Button
disabled={ registerBusy }
invert={ registerType !== 'content' }
onClick={ this.onClickTypeContent }>Content Bundle</Button>
</div>
{ valueInputs }
<div className={ hashClass }>
{ contentHashError || contentHash }
<div className={ styles.box }>
<div className={ styles.description }>
Provide a valid URL to register. The content information can be used in other contracts that allows for reverse lookups, e.g. image registries, dapp registries, etc.
</div>
{ valueInputs }
<div className={ hashClass }>
{ contentHashError || contentHash }
</div>
{ registerBusy ? this.renderProgress() : this.renderButtons() }
</div>
{ registerBusy ? this.renderProgress() : this.renderButtons() }
</div>
</div>
<Events
eventIds={ this.state.eventIds }
events={ this.state.events } />
</div>
);
}
@ -285,15 +295,29 @@ export default class Application extends Component {
}
}
trackRequest (promise) {
trackRequest (eventId, promise) {
return promise
.then((signerRequestId) => {
this.setState({ signerRequestId, registerState: 'Transaction posted, Waiting for transaction authorization' });
this.setState({
events: Object.assign({}, this.state.events, {
[eventId]: Object.assign({}, this.state.events[eventId], {
signerRequestId,
registerState: 'Transaction posted, Waiting for transaction authorization'
})
})
});
return api.pollMethod('parity_checkRequest', signerRequestId);
})
.then((txHash) => {
this.setState({ txHash, registerState: 'Transaction authorized, Waiting for network confirmations' });
this.setState({
events: Object.assign({}, this.state.events, {
[eventId]: Object.assign({}, this.state.events[eventId], {
txHash,
registerState: 'Transaction authorized, Waiting for network confirmations'
})
})
});
return api.pollMethod('eth_getTransactionReceipt', txHash, (receipt) => {
if (!receipt || !receipt.blockNumber || receipt.blockNumber.eq(0)) {
@ -304,27 +328,72 @@ export default class Application extends Component {
});
})
.then((txReceipt) => {
this.setState({ txReceipt, registerBusy: false, registerState: 'Network confirmed, Received transaction receipt', url: '', commit: '', repo: '', commitError: null, contentHash: '', contentHashOwner: null, contentHashError: null });
this.setState({
events: Object.assign({}, this.state.events, {
[eventId]: Object.assign({}, this.state.events[eventId], {
txReceipt,
registerBusy: false,
registerState: 'Network confirmed, Received transaction receipt'
})
})
});
})
.catch((error) => {
console.error('onSend', error);
this.setState({ registerError: error.message });
this.setState({
events: Object.assign({}, this.state.events, {
[eventId]: Object.assign({}, this.state.events[eventId], {
registerState: error.message,
registerError: true,
registerBusy: false
})
})
});
});
}
registerContent (repo, commit) {
registerContent (contentRepo, contentCommit) {
const { contentHash, fromAddress, instance } = this.state;
contentCommit = contentCommit.substr(0, 2) === '0x' ? contentCommit : `0x${contentCommit}`;
this.setState({ registerBusy: true, registerState: 'Estimating gas for the transaction' });
const values = [contentHash, repo, commit.substr(0, 2) === '0x' ? commit : `0x${commit}`];
const eventId = nextEventId++;
const values = [contentHash, contentRepo, contentCommit];
const options = { from: fromAddress };
this.setState({
eventIds: [eventId].concat(this.state.eventIds),
events: Object.assign({}, this.state.events, {
[eventId]: {
contentHash,
contentRepo,
contentCommit,
fromAddress,
registerBusy: true,
registerState: 'Estimating gas for the transaction',
timestamp: new Date()
}
}),
url: '',
commit: '',
repo: '',
commitError: null,
contentHash: '',
contentHashOwner: null,
contentHashError: null
});
this.trackRequest(
instance
eventId, instance
.hint.estimateGas(options, values)
.then((gas) => {
this.setState({ registerState: 'Gas estimated, Posting transaction to the network' });
this.setState({
events: Object.assign({}, this.state.events, {
[eventId]: Object.assign({}, this.state.events[eventId], {
registerState: 'Gas estimated, Posting transaction to the network'
})
})
});
const gasPassed = gas.mul(1.2);
options.gas = gasPassed.toFixed(0);
@ -335,19 +404,45 @@ export default class Application extends Component {
);
}
registerUrl (url) {
registerUrl (contentUrl) {
const { contentHash, fromAddress, instance } = this.state;
this.setState({ registerBusy: true, registerState: 'Estimating gas for the transaction' });
const values = [contentHash, url];
const eventId = nextEventId++;
const values = [contentHash, contentUrl];
const options = { from: fromAddress };
this.setState({
eventIds: [eventId].concat(this.state.eventIds),
events: Object.assign({}, this.state.events, {
[eventId]: {
contentHash,
contentUrl,
fromAddress,
registerBusy: true,
registerState: 'Estimating gas for the transaction',
timestamp: new Date()
}
}),
url: '',
commit: '',
repo: '',
commitError: null,
contentHash: '',
contentHashOwner: null,
contentHashError: null
});
this.trackRequest(
instance
eventId, instance
.hintURL.estimateGas(options, values)
.then((gas) => {
this.setState({ registerState: 'Gas estimated, Posting transaction to the network' });
this.setState({
events: Object.assign({}, this.state.events, {
[eventId]: Object.assign({}, this.state.events[eventId], {
registerState: 'Gas estimated, Posting transaction to the network'
})
})
});
const gasPassed = gas.mul(1.2);
options.gas = gasPassed.toFixed(0);

37
js/src/dapps/githubhint/Events/events.css Normal file
View File

@ -0,0 +1,37 @@
/* 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/>.
*/
.list {
border: none;
margin: 0 auto;
text-align: left;
vertical-align: top;
tr {
&[data-busy="true"] {
opacity: 0.5;
}
&[data-error="true"] {
color: #f66;
}
}
td {
padding: 0.5em;
}
}

50
js/src/dapps/githubhint/Events/events.js Normal file
View File

@ -0,0 +1,50 @@
// 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 moment from 'moment';
import styles from './events.css';
export default class Events extends Component {
static propTypes = {
eventIds: PropTypes.array.isRequired,
events: PropTypes.array.isRequired
}
render () {
return (
<table className={ styles.list }>
{ this.props.eventIds.map((id) => this.renderEvent(id, this.props.events[id])) }
</table>
);
}
renderEvent = (eventId, event) => {
return (
<tr key={ `event_${eventId}` } data-busy={ event.registerBusy } data-error={ event.registerError }>
<td>
<div>{ moment(event.timestamp).fromNow() }</div>
<div>{ event.registerState }</div>
</td>
<td>
<div>{ event.contentUrl || `${event.contentRepo}/${event.contentCommit}` }</div>
<div>{ event.contentHash }</div>
</td>
</tr>
);
}
}

17
js/src/dapps/githubhint/Events/index.js Normal file
View File

@ -0,0 +1,17 @@
// 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/>.
export default from './events';