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

Backporting to beta (#3239)

Browse Source 
* Fixed some typos (#3236)

* Add store for dapps state (#3211)

* Add mobx

* Use mobx store for dapps

* Cleanup hidden reads

* Remove (now) unused hidden.js

* _ denotes internal functions

* s/visibleApps/visible/

* AddDapps now use the mobx store as well

* Move modalOpen state to store

* Simplify

* Complete master merge

* Remove extra indirection

* Remove unneeded check

* Readability improvements

* Remove final debug info

* Load network apps manifests as contentHash (no coding) (#3235)

* Add mobx

* Use mobx store for dapps

* Cleanup hidden reads

* Remove (now) unused hidden.js

* _ denotes internal functions

* s/visibleApps/visible/

* AddDapps now use the mobx store as well

* Move modalOpen state to store

* Simplify

* Complete master merge

* Remove extra indirection

* Remove unneeded check

* Readability improvements

* Remove final debug info

* Load network manifests from the network

* Swallow manifest errors

* introduce fetchManifest

* Rename cli and config options signer->ui (#3232)

* rename options signer->ui

* rename config signer->ui


Former-commit-id: f4c4934831f80f9217ff4e6afcaa95cdd41caf45
This commit is contained in:
Arkadiy Paronyan
2016-11-07 18:25:58 +01:00
committed by GitHub
parent 2e9cde38e4
commit 0d20b21ee8
19 changed files with 403 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/contracts/dappreg.js
View File

@@ -57,4 +57,8 @@ export default class DappReg {
getContent (id) {
return this.meta(id, 'CONTENT');
}
getManifest (id) {
return this.meta(id, 'MANIFEST');
}
}

53
js/src/views/Dapp/dapp.js
View File

@@ -15,12 +15,13 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { observer } from 'mobx-react';
import Contracts from '../../contracts';
import { fetchAvailable } from '../Dapps/registry';
import DappsStore from '../Dapps/dappsStore';
import styles from './dapp.css';
@observer
export default class Dapp extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
@@ -30,17 +31,12 @@ export default class Dapp extends Component {
params: PropTypes.object
};
state = {
app: null
}
componentWillMount () {
this.lookup();
}
store = new DappsStore(this.context.api);
render () {
const { app } = this.state;
const { dappsUrl } = this.context.api;
const { id } = this.props.params;
const app = this.store.apps.find((app) => app.id === id);
if (!app) {
return null;
@@ -48,12 +44,6 @@ export default class Dapp extends Component {
let src = null;
switch (app.type) {
case 'builtin':
const dapphost = process.env.NODE_ENV === 'production' && !app.secure
? `${dappsUrl}/ui`
: '';
src = `${dapphost}/${app.url}.html`;
break;
case 'local':
src = `${dappsUrl}/${app.id}/`;
break;
@@ -61,7 +51,10 @@ export default class Dapp extends Component {
src = `${dappsUrl}/${app.contentHash}/`;
break;
default:
console.error('unknown type', app.type);
const dapphost = process.env.NODE_ENV === 'production' && !app.secure
? `${dappsUrl}/ui`
: '';
src = `${dapphost}/${app.url}.html`;
break;
}
@@ -76,30 +69,4 @@ export default class Dapp extends Component {
</iframe>
);
}
lookup () {
const { api } = this.context;
const { id } = this.props.params;
const { dappReg } = Contracts.get();
fetchAvailable(api)
.then((available) => {
return available.find((app) => app.id === id);
})
.then((app) => {
if (app.type !== 'network') {
return app;
}
return dappReg
.getContent(app.id)
.then((contentHash) => {
app.contentHash = api.util.bytesToHex(contentHash).substr(2);
return app;
});
})
.then((app) => {
this.setState({ app });
});
}
}

53
js/src/views/Dapps/AddDapps/AddDapps.js
View File

@@ -15,6 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { observer } from 'mobx-react';
import DoneIcon from 'material-ui/svg-icons/action/done';
import { List, ListItem } from 'material-ui/List';
import Checkbox from 'material-ui/Checkbox';
@@ -23,57 +24,67 @@ import { Modal, Button } from '../../../ui';
import styles from './AddDapps.css';
@observer
export default class AddDapps extends Component {
static propTypes = {
available: PropTypes.array.isRequired,
hidden: PropTypes.array.isRequired,
open: PropTypes.bool.isRequired,
onHideApp: PropTypes.func.isRequired,
onShowApp: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired
store: PropTypes.object.isRequired
};
render () {
const { onClose, open, available } = this.props;
const { store } = this.props;
if (!store.modalOpen) {
return null;
}
return (
<Modal
compact
title='visible applications'
actions={ [
<Button label={ 'Done' } key='done' onClick={ onClose } icon={ <DoneIcon /> } />
<Button
label={ 'Done' }
key='done'
onClick={ store.closeModal }
icon={ <DoneIcon /> }
/>
] }
visible={ open }
visible
scroll>
<List>
{ available.map(this.renderApp) }
{ store.apps.map(this.renderApp) }
</List>
</Modal>
);
}
renderApp = (app) => {
const { hidden, onHideApp, onShowApp } = this.props;
const isHidden = hidden.includes(app.id);
const description = (
<div className={ styles.description }>
{ app.description }
</div>
);
const { store } = this.props;
const isHidden = store.hidden.includes(app.id);
const onCheck = () => {
if (isHidden) {
onShowApp(app.id);
store.showApp(app.id);
} else {
onHideApp(app.id);
store.hideApp(app.id);
}
};
return (
<ListItem
key={ app.id }
leftCheckbox={ <Checkbox checked={ !isHidden } onCheck={ onCheck } /> }
leftCheckbox={
<Checkbox
checked={ !isHidden }
onCheck={ onCheck }
/>
}
primaryText={ app.name }
secondaryText={ description } />
secondaryText={
<div className={ styles.description }>
{ app.description }
</div>
}
/>
);
}
}

19
js/src/views/Dapps/Summary/summary.js
View File

@@ -40,10 +40,10 @@ export default class Summary extends Component {
}
let image = <div className={ styles.image }>&nbsp;</div>;
if (app.image) {
image = <img src={ `http://127.0.0.1:${dappsPort}${app.image}` } className={ styles.image } />;
} else if (app.iconUrl) {
if (app.type === 'local') {
image = <img src={ `http://127.0.0.1:${dappsPort}/${app.id}/${app.iconUrl}` } className={ styles.image } />;
} else {
image = <img src={ `http://127.0.0.1:${dappsPort}${app.image}` } className={ styles.image } />;
}
return (
@@ -52,9 +52,16 @@ export default class Summary extends Component {
<div className={ styles.description }>
<ContainerTitle
className={ styles.title }
title={ <Link to={ `/app/${app.id}` }>{ app.name }</Link> }
byline={ app.description } />
<div className={ styles.author }>{ app.author }, v{ app.version }</div>
title={
<Link to={ `/app/${app.id}` }>
{ app.name }
</Link>
}
byline={ app.description }
/>
<div className={ styles.author }>
{ app.author }, v{ app.version }
</div>
{ this.props.children }
</div>
</Container>

119
js/src/views/Dapps/dapps.js
View File

@@ -15,60 +15,46 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { observer } from 'mobx-react';
import Contracts from '../../contracts';
import { hashToImageUrl } from '../../redux/util';
import { Actionbar, Page } from '../../ui';
import FlatButton from 'material-ui/FlatButton';
import EyeIcon from 'material-ui/svg-icons/image/remove-red-eye';
import { fetchAvailable } from './registry';
import { readHiddenApps, writeHiddenApps } from './hidden';
import DappsStore from './dappsStore';
import AddDapps from './AddDapps';
import Summary from './Summary';
import styles from './dapps.css';
@observer
export default class Dapps extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
}
state = {
available: [],
hidden: [],
modalOpen: false
}
componentDidMount () {
this.loadAvailableApps();
}
store = new DappsStore(this.context.api);
render () {
const { available, hidden, modalOpen } = this.state;
const apps = available.filter((app) => !hidden.includes(app.id));
return (
<div>
<AddDapps
available={ available }
hidden={ hidden }
open={ modalOpen }
onHideApp={ this.onHideApp }
onShowApp={ this.onShowApp }
onClose={ this.closeModal }
/>
<AddDapps store={ this.store } />
<Actionbar
className={ styles.toolbar }
title='Decentralized Applications'
buttons={ [
<FlatButton label='edit' key='edit' icon={ <EyeIcon /> } onClick={ this.openModal } />
<FlatButton
label='edit'
key='edit'
icon={ <EyeIcon /> }
onClick={ this.store.openModal }
/>
] }
/>
<Page>
<div className={ styles.list }>
{ apps.map(this.renderApp) }
{ this.store.visible.map(this.renderApp) }
</div>
</Page>
</div>
@@ -76,10 +62,6 @@ export default class Dapps extends Component {
}
renderApp = (app) => {
if (!app.name) {
return null;
}
return (
<div
className={ styles.item }
@@ -88,81 +70,4 @@ export default class Dapps extends Component {
</div>
);
}
onHideApp = (id) => {
const { hidden } = this.state;
const newHidden = hidden.concat(id);
this.setState({ hidden: newHidden });
writeHiddenApps(newHidden);
}
onShowApp = (id) => {
const { hidden } = this.state;
const newHidden = hidden.filter((_id) => _id !== id);
this.setState({ hidden: newHidden });
writeHiddenApps(newHidden);
}
openModal = () => {
this.setState({ modalOpen: true });
};
closeModal = () => {
this.setState({ modalOpen: false });
};
loadAvailableApps () {
const { api } = this.context;
fetchAvailable(api)
.then((available) => {
this.setState({
available,
hidden: readHiddenApps()
});
this.loadContent();
});
}
loadContent () {
const { api } = this.context;
const { available } = this.state;
const { dappReg } = Contracts.get();
return Promise
.all(available.map((app) => dappReg.getImage(app.id)))
.then((images) => {
const _available = images
.map(hashToImageUrl)
.map((image, index) => Object.assign({}, available[index], { image }));
this.setState({ available: _available });
const _networkApps = _available.filter((app) => app.network);
return Promise
.all(_networkApps.map((app) => dappReg.getContent(app.id)))
.then((content) => {
const networkApps = content.map((_contentHash, index) => {
const networkApp = _networkApps[index];
const contentHash = api.util.bytesToHex(_contentHash).substr(2);
const app = _available.find((_app) => _app.id === networkApp.id);
console.log(`found content for ${app.id} at ${contentHash}`);
return Object.assign({}, app, { contentHash });
});
this.setState({
available: _available.map((app) => {
return Object.assign({}, networkApps.find((napp) => app.id === napp.id) || app);
})
});
});
})
.catch((error) => {
console.warn('loadImages', error);
});
}
}

256
js/src/views/Dapps/dappsStore.js Normal file
View File

@@ -0,0 +1,256 @@
// 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 { action, computed, observable } from 'mobx';
import Contracts from '../../contracts';
import { hashToImageUrl } from '../../redux/util';
const builtinApps = [
{
id: '0xf9f2d620c2e08f83e45555247146c62185e4ab7cf82a4b9002a265a0d020348f',
url: 'basiccoin',
name: 'Token Deployment',
description: 'Deploy new basic tokens that you are able to send around',
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0'
},
{
id: '0xd1adaede68d344519025e2ff574650cd99d3830fe6d274c7a7843cdc00e17938',
url: 'registry',
name: 'Registry',
description: 'A global registry of addresses on the network',
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0'
},
{
id: '0x0a8048117e51e964628d0f2d26342b3cd915248b59bcce2721e1d05f5cfa2208',
url: 'tokenreg',
name: 'Token Registry',
description: 'A registry of transactable tokens on the network',
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0'
},
{
id: '0xf49089046f53f5d2e5f3513c1c32f5ff57d986e46309a42d2b249070e4e72c46',
url: 'signaturereg',
name: 'Method Registry',
description: 'A registry of method signatures for lookups on transactions',
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0'
},
{
id: '0x058740ee9a5a3fb9f1cfa10752baec87e09cc45cd7027fd54708271aca300c75',
url: 'githubhint',
name: 'GitHub Hint',
description: 'A mapping of GitHub URLs to hashes for use in contracts as references',
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0'
}
];
export default class DappsStore {
@observable apps = [];
@observable hidden = [];
@observable modalOpen = false;
constructor (api) {
this._api = api;
this._readHiddenApps();
this._fetch();
}
@computed get visible () {
return this.apps.filter((app) => !this.hidden.includes(app.id));
}
@action openModal = () => {
this.modalOpen = true;
}
@action closeModal = () => {
this.modalOpen = false;
}
@action hideApp = (id) => {
this.hidden = this.hidden.concat(id);
this._writeHiddenApps();
}
@action showApp = (id) => {
this.hidden = this.hidden.filter((_id) => _id !== id);
this._writeHiddenApps();
}
_getHost (api) {
return process.env.NODE_ENV === 'production'
? this._api.dappsUrl
: '';
}
_fetch () {
Promise
.all([
this._fetchLocal(),
this._fetchRegistry()
])
.then(([localApps, registryApps]) => {
this.apps = []
.concat(localApps)
.concat(registryApps)
.filter((app) => app.id)
.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
})
.catch((error) => {
console.warn('DappStore:fetch', error);
});
}
_fetchRegistry () {
const { dappReg } = Contracts.get();
return dappReg
.count()
.then((_count) => {
const count = _count.toNumber();
const promises = [];
for (let index = 0; index < count; index++) {
promises.push(dappReg.at(index));
}
return Promise.all(promises);
})
.then((appsInfo) => {
const appIds = appsInfo.map(([appId, owner]) => {
return this._api.util.bytesToHex(appId);
});
return Promise
.all([
Promise.all(appIds.map((appId) => dappReg.getImage(appId))),
Promise.all(appIds.map((appId) => dappReg.getContent(appId))),
Promise.all(appIds.map((appId) => dappReg.getManifest(appId)))
])
.then(([imageIds, contentIds, manifestIds]) => {
return appIds.map((appId, index) => {
const app = builtinApps.find((ba) => ba.id === appId) || {
id: appId,
contentHash: this._api.util.bytesToHex(contentIds[index]).substr(2),
manifestHash: this._api.util.bytesToHex(manifestIds[index]).substr(2),
type: 'network'
};
app.image = hashToImageUrl(imageIds[index]);
app.type = app.type || 'builtin';
return app;
});
});
})
.then((apps) => {
return Promise
.all(apps.map((app) => {
return app.manifestHash
? this._fetchManifest(app.manifestHash)
: null;
}))
.then((manifests) => {
return apps.map((app, index) => {
const manifest = manifests[index];
if (manifest) {
app.manifestHash = null;
Object.keys(manifest)
.filter((key) => key !== 'id')
.forEach((key) => {
app[key] = manifest[key];
});
}
return app;
});
})
.then((apps) => {
return apps.filter((app) => {
return !app.manifestHash && app.id;
});
});
})
.catch((error) => {
console.warn('DappsStore:fetchRegistry', error);
});
}
_fetchManifest (manifestHash, count = 0) {
return fetch(`${this._getHost()}/api/content/${manifestHash}/`)
.then((response) => {
if (response.ok) {
return response.json();
}
if (count < 1) {
return this._fetchManifest(manifestHash, count + 1);
}
return null;
})
.catch(() => {
if (count < 1) {
return this._fetchManifest(manifestHash, count + 1);
}
return null;
});
}
_fetchLocal () {
return fetch(`${this._getHost()}/api/apps`)
.then((response) => {
return response.ok
? response.json()
: [];
})
.then((localApps) => {
return localApps
.filter((app) => app && app.id && !['ui'].includes(app.id))
.map((app) => {
app.type = 'local';
return app;
});
})
.catch((error) => {
console.warn('DappsStore:fetchLocal', error);
});
}
_readHiddenApps () {
const stored = localStorage.getItem('hiddenApps');
if (stored) {
try {
this.hidden = JSON.parse(stored);
} catch (error) {
console.warn('DappsStore:readHiddenApps', error);
}
}
}
_writeHiddenApps () {
localStorage.setItem('hiddenApps', JSON.stringify(this.hidden));
}
}

35
js/src/views/Dapps/hidden.js
View File

@@ -1,35 +0,0 @@
// 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/>.
const defaultHidden = [];
export function readHiddenApps () {
const stored = localStorage.getItem('hiddenApps');
if (stored) {
try {
return JSON.parse(stored);
} catch (error) {
console.warn('readHiddenApps', error);
}
}
return defaultHidden;
}
export function writeHiddenApps (hidden) {
localStorage.setItem('hiddenApps', JSON.stringify(hidden));
}

151
js/src/views/Dapps/registry.js
View File

@@ -1,151 +0,0 @@
// 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 BigNumber from 'bignumber.js';
const builtinApps = [
{
id: '0xf9f2d620c2e08f83e45555247146c62185e4ab7cf82a4b9002a265a0d020348f',
url: 'basiccoin',
name: 'Token Deployment',
description: 'Deploy new basic tokens that you are able to send around',
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0'
},
{
id: '0xd1adaede68d344519025e2ff574650cd99d3830fe6d274c7a7843cdc00e17938',
url: 'registry',
name: 'Registry',
description: 'A global registry of addresses on the network',
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0'
},
{
id: '0x0a8048117e51e964628d0f2d26342b3cd915248b59bcce2721e1d05f5cfa2208',
url: 'tokenreg',
name: 'Token Registry',
description: 'A registry of transactable tokens on the network',
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0'
},
{
id: '0xf49089046f53f5d2e5f3513c1c32f5ff57d986e46309a42d2b249070e4e72c46',
url: 'signaturereg',
name: 'Method Registry',
description: 'A registry of method signatures for lookups on transactions',
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0'
},
{
id: '0x058740ee9a5a3fb9f1cfa10752baec87e09cc45cd7027fd54708271aca300c75',
url: 'githubhint',
name: 'GitHub Hint',
description: 'A mapping of GitHub URLs to hashes for use in contracts as references',
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0',
secure: true
}
];
// TODO: This is just since we are moving gavcoin to its own repo, for a proper network solution
// we need to pull the network apps from the dapp registry. (Builtins & local apps unaffected)
// TODO: Manifest needs to be pulled from the content as well, however since the content may or may
// not be available locally (and refreshes work for index, and will give a 503), we are putting it
// in here. This part needs to be cleaned up.
const networkApps = [
{
id: '0xd798a48831b4ccdbc71de206a1d6a4aa73546c7b6f59c22a47452af414dc64d6',
name: 'GAVcoin',
description: 'Manage your GAVcoins, the hottest new property in crypto',
author: 'Gavin Wood',
version: '1.0.0'
}
];
function getHost (api) {
return process.env.NODE_ENV === 'production'
? api.dappsUrl
: '';
}
export function fetchAvailable (api) {
return fetch(`${getHost(api)}/api/apps`)
.then((response) => {
return response.ok
? response.json()
: [];
})
.catch((error) => {
console.warn('fetchAvailable', error);
return [];
})
.then((_localApps) => {
const localApps = _localApps
.filter((app) => !['ui'].includes(app.id))
.map((app) => {
app.type = 'local';
return app;
});
return api.parity
.registryAddress()
.then((registryAddress) => {
if (new BigNumber(registryAddress).eq(0)) {
return [];
}
const _builtinApps = builtinApps
.map((app) => {
app.type = 'builtin';
return app;
});
return networkApps
.map((app) => {
app.type = 'network';
return app;
})
.concat(_builtinApps);
})
.then((registryApps) => {
return registryApps
.concat(localApps)
.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
});
})
.catch((error) => {
console.warn('fetchAvailable', error);
});
}
export function fetchManifest (api, app, contentHash) {
return fetch(`${getHost(api)}/${contentHash}/manifest.json`)
.then((response) => {
return response.ok
? response.json()
: {};
})
.then((manifest) => {
Object.keys.forEach((key) => {
app[key] = manifest[key];
});
return app;
})
.catch((error) => {
console.warn('fetchManifest', error);
});
}

2
js/src/views/Settings/Proxy/proxy.js
View File

@@ -35,7 +35,7 @@ export default class Proxy extends Component {
<ContainerTitle title='Proxy' />
<div className={ layout.layout }>
<div className={ layout.overview }>
<div>The proxy setup allows you to access Parity and all associated decentralized applications via memororable addresses.</div>
<div>The proxy setup allows you to access Parity and all associated decentralized applications via memorable addresses.</div>
</div>
<div className={ layout.details }>
<div className={ styles.details }>

2
js/src/views/Settings/Views/defaults.js
View File

@@ -49,7 +49,7 @@ const defaultViews = {
label: 'Applications',
route: '/apps',
value: 'app',
description: 'Distributed applications that interact with the underlying network. Add applications, manage you application portfolio and interact with application from around the newtork.'
description: 'Distributed applications that interact with the underlying network. Add applications, manage you application portfolio and interact with application from around the network.'
},
contracts: {

2
js/src/views/Settings/Views/views.js
View File

@@ -40,7 +40,7 @@ class Views extends Component {
<div className={ layout.overview }>
<div>Manage the available application views, using only the parts of the application that is applicable to you.</div>
<div>Are you an end-user? The defaults are setups for both beginner and advanced users alike.</div>
<div>Are you a developer? Add some features to manage contracts are interact with application develoyments.</div>
<div>Are you a developer? Add some features to manage contracts are interact with application deployments.</div>
<div>Are you a miner or run a large-scale node? Add the features to give you all the information needed to watch the node operation.</div>
</div>
<div className={ layout.details }>