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

Make local apps available (Fixes #2771) (#2808)

Browse Source
This commit is contained in:
Jaco Greeff 2016-10-22 15:49:39 +02:00 committed by GitHub
parent 37a2ee98de
commit a1266fccb7
10 changed files with 138 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/src/ui/Container/container.css
View File

@ -18,14 +18,23 @@
padding: 0em;
}
.compact,
.padded {
padding: 1.5em;
background: rgba(0, 0, 0, 0.8) !important;
border-radius: 0 !important;
position: relative;
overflow: auto;
}
.compact {
padding: 0 1.5em;
}
.padded {
padding: 1.5em;
}
.light .compact,
.light .padded {
background: rgba(0, 0, 0, 0.5) !important;
}

5
js/src/ui/Container/container.js
View File

@ -23,17 +23,18 @@ export default class Container extends Component {
static propTypes = {
children: PropTypes.node,
className: PropTypes.string,
compact: PropTypes.bool,
light: PropTypes.bool,
style: PropTypes.object
}
render () {
const { children, className, light, style } = this.props;
const { children, className, compact, light, style } = this.props;
const classes = `${styles.container} ${light ? styles.light : ''} ${className}`;
return (
<div className={ classes } style={ style }>
<Card className={ styles.padded }>
<Card className={ compact ? styles.compact : styles.padded }>
{ children }
</Card>
</div>

5
js/src/ui/Modal/modal.js
View File

@ -38,6 +38,7 @@ class Modal extends Component {
busy: PropTypes.bool,
children: PropTypes.node,
className: PropTypes.string,
compact: PropTypes.bool,
current: PropTypes.number,
waiting: PropTypes.array,
scroll: PropTypes.bool,
@ -51,7 +52,7 @@ class Modal extends Component {
render () {
const { muiTheme } = this.context;
const { actions, busy, className, current, children, scroll, steps, waiting, title, visible, settings } = this.props;
const { actions, busy, className, current, children, compact, scroll, steps, waiting, title, visible, settings } = this.props;
const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed);
const header = (
<Title
@ -82,7 +83,7 @@ class Modal extends Component {
style={ DIALOG_STYLE }
title={ header }
titleStyle={ TITLE_STYLE }>
<Container light style={ { transition: 'none' } }>
<Container light compact={ compact } style={ { transition: 'none' } }>
{ children }
</Container>
</Dialog>

2
js/src/views/Dapps/AddDapps/AddDapps.css
View File

@ -15,6 +15,6 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.hash {
.description {
margin-top: .5em !important;
}

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

@ -21,15 +21,15 @@ import Checkbox from 'material-ui/Checkbox';
import { Modal, Button } from '../../../ui';
import styles from './AddDapps.css';
import styles from './addDapps.css';
export default class AddDapps extends Component {
static propTypes = {
available: PropTypes.array.isRequired,
visible: PropTypes.array.isRequired,
hidden: PropTypes.array.isRequired,
open: PropTypes.bool.isRequired,
onAdd: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired,
onHideApp: PropTypes.func.isRequired,
onShowApp: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired
};
@ -38,13 +38,13 @@ export default class AddDapps extends Component {
return (
<Modal
title='Select Distributed Apps to be shown'
compact
title='visible applications'
actions={ [
<Button label={ 'Done' } onClick={ onClose } icon={ <DoneIcon /> } />
<Button label={ 'Done' } key='done' onClick={ onClose } icon={ <DoneIcon /> } />
] }
visible={ open }
scroll
>
scroll>
<List>
{ available.map(this.renderApp) }
</List>
@ -53,20 +53,27 @@ export default class AddDapps extends Component {
}
renderApp = (app) => {
const { visible, onAdd, onRemove } = this.props;
const isVisible = visible.includes(app.id);
const { hidden, onHideApp, onShowApp } = this.props;
const isHidden = hidden.includes(app.id);
const description = (
<div className={ styles.description }>
{ app.description }
</div>
);
const onCheck = () => {
if (isVisible) onRemove(app.id);
else onAdd(app.id);
if (isHidden) {
onShowApp(app.id);
} else {
onHideApp(app.id);
}
};
return (
<ListItem
key={ app.id }
leftCheckbox={ <Checkbox checked={ isVisible } onCheck={ onCheck } /> }
leftCheckbox={ <Checkbox checked={ !isHidden } onCheck={ onCheck } /> }
primaryText={ app.name }
secondaryText={ <pre className={ styles.hash }><code>{ app.hash }</code></pre> }
/>
secondaryText={ description } />
);
}
}

2
js/src/views/Dapps/AddDapps/index.js
View File

@ -14,4 +14,4 @@
// 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';
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.id}`;
const url = `/app/${app.builtin ? 'global' : 'local'}/${app.url || app.id}`;
const image = app.image
? <img src={ app.image } className={ styles.image } />
: <div className={ styles.image }>&nbsp;</div>;

75
js/src/views/Dapps/available.js
View File

@ -14,60 +14,77 @@
// 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 = [
const builtinApps = [
{
id: 'basiccoin',
id: '0xf9f2d620c2e08f83e45555247146c62185e4ab7cf82a4b9002a265a0d020348f',
url: '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'
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0',
builtin: true
},
{
id: 'gavcoin',
id: '0xd798a48831b4ccdbc71de206a1d6a4aa73546c7b6f59c22a47452af414dc64d6',
url: 'gavcoin',
name: 'GAVcoin',
description: 'Manage your GAVcoins, the hottest new property in crypto',
author: 'Ethcore <admin@ethcore.io>',
version: '1.0.0'
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0',
builtin: true
},
{
id: 'registry',
id: '0xd1adaede68d344519025e2ff574650cd99d3830fe6d274c7a7843cdc00e17938',
url: 'registry',
name: 'Registry',
description: 'A global registry of addresses on the network',
author: 'Ethcore <admin@ethcore.io>',
version: '1.0.0'
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0',
builtin: true
},
{
id: 'tokenreg',
id: '0x0a8048117e51e964628d0f2d26342b3cd915248b59bcce2721e1d05f5cfa2208',
url: 'tokenreg',
name: 'Token Registry',
description: 'A registry of transactable tokens on the network',
author: 'Ethcore <admin@ethcore.io>',
version: '1.0.0'
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0',
builtin: true
},
{
id: 'signaturereg',
id: '0xf49089046f53f5d2e5f3513c1c32f5ff57d986e46309a42d2b249070e4e72c46',
url: 'signaturereg',
name: 'Method Registry',
description: 'A registry of method signatures for lookups on transactions',
author: 'Ethcore <admin@ethcore.io>',
version: '1.0.0'
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0',
builtin: true
},
{
id: 'githubhint',
id: '0x058740ee9a5a3fb9f1cfa10752baec87e09cc45cd7027fd54708271aca300c75',
url: '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'
author: 'Parity Team <admin@ethcore.io>',
version: '1.0.0',
builtin: true
}
];
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) });
}));
return fetch('http://127.0.0.1:8080/api/apps')
.then((response) => {
return response.ok
? response.json()
: [];
})
.catch((error) => {
console.warn('app list', error);
return [];
})
.then((localApps) => {
return builtinApps
.concat(localApps)
.sort((a, b) => a.name.localeCompare(b.name));
});
}

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

@ -23,7 +23,7 @@ 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 { readHiddenApps, writeHiddenApps } from './hidden';
import AddDapps from './AddDapps';
import Summary from './Summary';
@ -37,15 +37,17 @@ export default class Dapps extends Component {
state = {
available: [],
visible: [],
hidden: [],
modalOpen: false
}
componentDidMount () {
fetchAvailable()
.then((available) => {
this.setState({ available });
this.setState({ visible: readVisible() });
this.setState({
available,
hidden: readHiddenApps()
});
this.loadImages();
})
.catch((err) => {
@ -54,24 +56,24 @@ export default class Dapps extends Component {
}
render () {
const { available, visible, modalOpen } = this.state;
const apps = available.filter((app) => visible.includes(app.id));
const { available, hidden, modalOpen } = this.state;
const apps = available.filter((app) => !hidden.includes(app.id));
return (
<div>
<AddDapps
available={ available }
visible={ visible }
hidden={ hidden }
open={ modalOpen }
onAdd={ this.onAdd }
onRemove={ this.onRemove }
onHideApp={ this.onHideApp }
onShowApp={ this.onShowApp }
onClose={ this.closeModal }
/>
<Actionbar
className={ styles.toolbar }
title='Decentralized Applications'
buttons={ [
<FlatButton label='edit' icon={ <EyeIcon /> } onClick={ this.openModal } />
<FlatButton label='edit' key='edit' icon={ <EyeIcon /> } onClick={ this.openModal } />
] }
/>
<Page>
@ -97,7 +99,8 @@ export default class Dapps extends Component {
const { available } = this.state;
const { dappReg } = Contracts.get();
return Promise.all(available.map((app) => dappReg.getImage(app.hash)))
return Promise
.all(available.map((app) => dappReg.getImage(app.id)))
.then((images) => {
this.setState({
available: images
@ -105,30 +108,31 @@ export default class Dapps extends Component {
.map((image, i) => Object.assign({}, available[i], { image }))
});
})
.catch((err) => {
console.error('error loading dapp images', err);
.catch((error) => {
console.warn('loadImages', error);
});
}
onAdd = (id) => {
const oldVisible = this.state.visible;
if (oldVisible.includes(id)) return;
const newVisible = oldVisible.concat(id);
this.setState({ visible: newVisible });
writeVisible(newVisible);
onHideApp = (id) => {
const { hidden } = this.state;
const newHidden = hidden.concat(id);
this.setState({ hidden: newHidden });
writeHiddenApps(newHidden);
}
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);
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 });
};

22
js/src/views/Dapps/visible.js → js/src/views/Dapps/hidden.js
View File

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