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

very basic dapp add/remove interface (#2721)

Browse Source 
* refactor dapp loading

* basic modal window

* UI for removing dapps

* button to open modal

* eslint 💄, make dialog scrollable

* Dialog -> ui/Modal

* show dapp hash
This commit is contained in:
Jannis Redmann 2016-10-20 11:22:25 +02:00 committed by Jaco Greeff
parent 20e1d575da
commit 9b246245bf
7 changed files with 282 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
js/src/views/Dapps/AddDapps/AddDapps.css Normal file
View File

@ -0,0 +1,20 @@
/* 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/>.
*/
.hash {
margin-top: .5em !important;
}

72
js/src/views/Dapps/AddDapps/AddDapps.js Normal file
View File

@ -0,0 +1,72 @@
// 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 DoneIcon from 'material-ui/svg-icons/action/done';
import { List, ListItem } from 'material-ui/List';
import Checkbox from 'material-ui/Checkbox';
import { Modal, Button } from '../../../ui';
import styles from './AddDapps.css';
export default class AddDapps extends Component {
static propTypes = {
available: PropTypes.array.isRequired,
visible: PropTypes.array.isRequired,
open: PropTypes.bool.isRequired,
onAdd: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired
};
render () {
const { onClose, open, available } = this.props;
return (
<Modal
title='Select Distributed Apps to be shown'
actions={ [
<Button label={ 'Done' } onClick={ onClose } icon={ <DoneIcon /> } />
] }
visible={ open }
scroll={ true }
>
<List>
{ available.map(this.renderApp) }
</List>
</Modal>
);
}
renderApp = (app) => {
const { visible, onAdd, onRemove } = this.props;
const isVisible = visible.includes(app.id);
const onCheck = () => {
if (isVisible) onRemove(app.id);
else onAdd(app.id);
};
return (
<ListItem
key={ app.id }
leftCheckbox={ <Checkbox checked={ isVisible } onCheck={ onCheck } /> }
primaryText={ app.name }
secondaryText={ <pre className={ styles.hash }><code>{ app.hash }</code></pre> }
/>
);
}
}

17
js/src/views/Dapps/AddDapps/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 './AddDapps';

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

@ -38,7 +38,7 @@ export default class Summary extends Component {
return null;
}
const url = `/app/${app.local ? 'local' : 'global'}/${app.url}`;
const url = `/app/${app.local ? 'local' : 'global'}/${app.id}`;
const image = app.image
? <img src={ app.image } className={ styles.image } />
: <div className={ styles.image }>&nbsp;</div>;

74
js/src/views/Dapps/available.js Normal file
View File

@ -0,0 +1,74 @@
// 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/>.
// TODO remove this hardcoded list of apps once the route works again.
import { sha3 } from '../../api/util/sha3';
const hardcoded = [
{
id: 'basiccoin',
name: 'Token Deployment',
description: 'Deploy new basic tokens that you are able to send around',
author: 'Ethcore <admin@ethcore.io>',
version: '1.0.0'
},
{
id: 'gavcoin',
name: 'GAVcoin',
description: 'Manage your GAVcoins, the hottest new property in crypto',
author: 'Ethcore <admin@ethcore.io>',
version: '1.0.0'
},
{
id: 'registry',
name: 'Registry',
description: 'A global registry of addresses on the network',
author: 'Ethcore <admin@ethcore.io>',
version: '1.0.0'
},
{
id: 'tokenreg',
name: 'Token Registry',
description: 'A registry of transactable tokens on the network',
author: 'Ethcore <admin@ethcore.io>',
version: '1.0.0'
},
{
id: 'signaturereg',
name: 'Method Registry',
description: 'A registry of method signatures for lookups on transactions',
author: 'Ethcore <admin@ethcore.io>',
version: '1.0.0'
},
{
id: 'githubhint',
name: 'GitHub Hint',
description: 'A mapping of GitHub URLs to hashes for use in contracts as references',
author: 'Ethcore <admin@ethcore.io>',
version: '1.0.0'
}
];
export default function () {
// return fetch('//127.0.0.1:8080/api/apps')
// .then((res) => res.ok ? res.json() : [])
return Promise.resolve(hardcoded) // TODO
.then((apps) => apps.map((app) => {
return Object.assign({}, app, { hash: sha3(app.id) })
}));
}

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

@ -16,91 +16,67 @@
import React, { Component, PropTypes } from 'react';
import { sha3 } from '../../api/util/sha3';
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 './available';
import { read as readVisible, write as writeVisible } from './visible';
import AddDapps from './AddDapps';
import Summary from './Summary';
import styles from './dapps.css';
const APPS = [
{
name: 'Token Deployment',
description: 'Deploy new basic tokens that you are able to send around',
author: 'Ethcore <admin@ethcore.io>',
url: 'basiccoin',
version: '1.0.0'
},
{
name: 'GAVcoin',
description: 'Manage your GAVcoins, the hottest new property in crypto',
author: 'Ethcore <admin@ethcore.io>',
url: 'gavcoin',
version: '1.0.0'
},
{
name: 'Registry',
description: 'A global registry of addresses on the network',
author: 'Ethcore <admin@ethcore.io>',
url: 'registry',
version: '1.0.0'
},
{
name: 'Token Registry',
description: 'A registry of transactable tokens on the network',
author: 'Ethcore <admin@ethcore.io>',
url: 'tokenreg',
version: '1.0.0'
},
{
name: 'Method Registry',
description: 'A registry of method signatures for lookups on transactions',
author: 'Ethcore <admin@ethcore.io>',
url: 'signaturereg',
version: '1.0.0'
},
{
name: 'GitHub Hint',
description: 'A mapping of GitHub URLs to hashes for use in contracts as references',
author: 'Ethcore <admin@ethcore.io>',
url: 'githubhint',
version: '1.0.0'
}
];
APPS.forEach((app) => {
app.id = sha3(app.url);
console.log(`dapps ${app.id} -> ${app.url}`);
});
export default class Dapps extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
}
state = {
globalApps: APPS,
localApps: []
available: [],
visible: [],
modalOpen: false
}
componentDidMount () {
this.loadLocalApps();
fetchAvailable()
.then((available) => {
this.setState({ available });
this.setState({ visible: readVisible() });
this.loadImages();
})
.catch((err) => {
console.error('error fetching available apps', err);
});
}
render () {
const { available, visible, modalOpen } = this.state;
const apps = available.filter((app) => visible.includes(app.id));
return (
<div>
<AddDapps
available={ available }
visible={ visible }
open={ modalOpen }
onAdd={ this.onAdd }
onRemove={ this.onRemove }
onClose={ this.closeModal }
/>
<Actionbar
title='Decentralized Applications' />
className={ styles.toolbar }
title='Decentralized Applications'
buttons={ [
<FlatButton label='edit' icon={ <EyeIcon /> } onClick={ this.openModal } />
] }
/>
<Page>
<div className={ styles.list }>
{ this.renderGlobalApps() }
</div>
<div className={ styles.list }>
{ this.renderLocalApps() }
{ apps.map(this.renderApp) }
</div>
</Page>
</div>
@ -111,58 +87,49 @@ export default class Dapps extends Component {
return (
<div
className={ styles.item }
key={ app.url }>
key={ app.id }>
<Summary app={ app } />
</div>
);
}
renderGlobalApps () {
const { globalApps } = this.state;
return globalApps.map(this.renderApp);
}
renderLocalApps () {
const { localApps } = this.state;
return localApps.map(this.renderApp);
}
loadLocalApps () {
fetch('http://127.0.0.1:8080/api/apps', { method: 'GET' })
.then((response) => response.ok ? response.json() : [])
.then((_localApps) => {
const localApps = _localApps
.filter((app) => !['home', 'status', 'parity', 'wallet'].includes(app.id))
.map((app) => {
app.image = `/app/${app.id}/${app.iconUrl}`;
app.url = app.id;
app.local = true;
return app;
});
console.log('loadLocalApps', localApps);
this.setState({ localApps });
})
.catch((error) => {
console.error('loadLocalApps', error);
});
}
loadImages () {
const { globalApps } = this.state;
const { available } = this.state;
const { dappReg } = Contracts.get();
Promise
.all(globalApps.map((app) => dappReg.getImage(app.id)))
return Promise.all(available.map((app) => dappReg.getImage(app.hash)))
.then((images) => {
globalApps.forEach((app, index) => {
app.image = hashToImageUrl(images[index]);
this.setState({
available: images
.map(hashToImageUrl)
.map((image, i) => Object.assign({}, available[i], { image }))
});
this.setState({ globalApps });
})
.catch((error) => {
console.error('loadImages', error);
.catch((err) => {
console.error('error loading dapp images', err);
});
}
onAdd = (id) => {
const oldVisible = this.state.visible;
if (oldVisible.includes(id)) return;
const newVisible = oldVisible.concat(id);
this.setState({ visible: newVisible });
writeVisible(newVisible);
}
onRemove = (id) => {
const oldVisible = this.state.visible;
if (!oldVisible.includes(id)) return;
const newVisible = oldVisible.filter((_id) => _id !== id);
this.setState({ visible: newVisible });
writeVisible(newVisible);
}
openModal = () => {
this.setState({ modalOpen: true });
};
closeModal = () => {
this.setState({ modalOpen: false });
};
}

27
js/src/views/Dapps/visible.js Normal file
View File

@ -0,0 +1,27 @@
// 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 defaultDapps = ['gavcoin', 'basiccoin', 'tokenreg'];
export function read () {
const stored = localStorage.getItem('visible-dapps');
if (stored) return JSON.parse(stored);
return defaultDapps;
}
export function write (visible) {
localStorage.setItem('visible-dapps', JSON.stringify(visible));
}