Rework dapps list (#7206)

* Rework dapps list

* Update box sizing

* Remove non-passed-in prop

* PR comments

* Re-adjust key
This commit is contained in:
Jaco Greeff 2017-12-06 15:47:32 +01:00 committed by GitHub
parent 76b143a758
commit b1517654e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 228 additions and 90 deletions

6
js/package-lock.json generated
View File

@ -1209,9 +1209,9 @@
} }
}, },
"@parity/ui": { "@parity/ui": {
"version": "3.0.7", "version": "3.0.9",
"resolved": "https://registry.npmjs.org/@parity/ui/-/ui-3.0.7.tgz", "resolved": "https://registry.npmjs.org/@parity/ui/-/ui-3.0.9.tgz",
"integrity": "sha512-FkVb6DWja56uaNN+dG/hNH3c1P4hlA8Sg/e65b4hKyZe3PQP7Gko34wJ0IaP5FEeAWQC/yg0SgrQvc8CqPjeSg==", "integrity": "sha512-i0a93GdxzJBOQHqsQt4fGCnl+ItKIjkj9fCP5RnyIjg43yCVHHzuw+MCyegw6cn21mirer9YUF0MW3B8jcCw6A==",
"requires": { "requires": {
"@parity/api": "2.1.5", "@parity/api": "2.1.5",
"@parity/etherscan": "2.1.3", "@parity/etherscan": "2.1.3",

View File

@ -148,7 +148,7 @@
"@parity/plugin-signer-hardware": "paritytech/plugin-signer-hardware", "@parity/plugin-signer-hardware": "paritytech/plugin-signer-hardware",
"@parity/plugin-signer-qr": "paritytech/plugin-signer-qr", "@parity/plugin-signer-qr": "paritytech/plugin-signer-qr",
"@parity/shared": "~2.2.1", "@parity/shared": "~2.2.1",
"@parity/ui": "~3.0.7", "@parity/ui": "^3.0.9",
"keythereum": "1.0.2", "keythereum": "1.0.2",
"lodash.flatten": "4.4.0", "lodash.flatten": "4.4.0",
"lodash.omitby": "4.6.0", "lodash.omitby": "4.6.0",

View File

@ -0,0 +1,63 @@
/* Copyright 2015-2017 Parity Technologies (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/>.
*/
.card {
padding: 0.25em;
.content {
background: white;
box-sizing: content-box;
min-height: 100px;
.title {
min-height: 1em;
padding-left: 72px;
}
.description {
color: #333;
min-height: 1em;
padding-left: 72px;
padding-top: 0.25em;
opacity: 0.66;
}
.image {
border-radius: 8px;
position: absolute;
}
.vouching {
padding: 0.5em;
margin: 0.5em 1em;
background: transparent;
position: relative;
white-space: nowrap;
img {
position: relative;
display: inline-block;
margin: 0.25em 0.25em 0.25em 0;
}
div {
right: auto;
left: 0;
}
}
}
}

View File

@ -0,0 +1,69 @@
// Copyright 2015-2017 Parity Technologies (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 } from 'react';
import PropTypes from 'prop-types';
import Container from '@parity/ui/lib/Container';
import DappIcon from '@parity/ui/lib/DappIcon';
import DappVouchFor from '@parity/ui/lib/DappVouchFor';
import styles from './dappCard.css';
export default class DappCard extends Component {
static propTypes = {
app: PropTypes.object.isRequired,
availability: PropTypes.string.isRequired,
className: PropTypes.string
};
render () {
const { app, availability, className } = this.props;
if (app.onlyPersonal && availability !== 'personal') {
return null;
}
return (
<div className={ [styles.card, className].join(' ') }>
<Container
className={ styles.content }
link={
app.url === 'web'
? '/web'
: `/${app.id}`
}
>
<DappIcon
app={ app }
className={ styles.image }
/>
<div className={ styles.title }>
{ app.name }
</div>
<div className={ styles.description }>
{ app.description }
</div>
<DappVouchFor
app={ app }
className={ styles.vouching }
maxNumber={ 10 }
/>
</Container>
</div>
);
}
}

View File

@ -0,0 +1,17 @@
// Copyright 2015-2017 Parity Technologies (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 './dappCard';

View File

@ -16,13 +16,41 @@
*/ */
.overlay { .overlay {
background: rgba(40, 40, 40, 0.85);
color: white; color: white;
line-height: 1.5em; line-height: 1.5em;
margin: 0 auto;
text-align: left; text-align: left;
max-width: 980px; padding: 4em 2em;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 100;
& > div:first-child { div {
padding-bottom: 1em; max-width: 640px;
margin: 1em auto;
text-align: left;
}
.accept {
label {
color: white;
}
}
}
.dapps {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 1.5em 0;
.dapp {
flex: 0 0 25%;
max-width: 25%;
min-width: 25%;
} }
} }

View File

@ -14,20 +14,19 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import omitBy from 'lodash.omitby';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import DappCard from '@parity/ui/lib/DappCard';
import Checkbox from '@parity/ui/lib/Form/Checkbox'; import Checkbox from '@parity/ui/lib/Form/Checkbox';
import Page from '@parity/ui/lib/Page'; import Page from '@parity/ui/lib/Page';
import SectionList from '@parity/ui/lib/SectionList';
import DappsStore from '@parity/shared/lib/mobx/dappsStore'; import DappsStore from '@parity/shared/lib/mobx/dappsStore';
import DappCard from './DappCard';
import styles from './dapps.css'; import styles from './dapps.css';
@observer @observer
@ -37,7 +36,6 @@ class Dapps extends Component {
}; };
static propTypes = { static propTypes = {
accounts: PropTypes.object.isRequired,
availability: PropTypes.string.isRequired availability: PropTypes.string.isRequired
}; };
@ -48,10 +46,26 @@ class Dapps extends Component {
} }
render () { render () {
let externalOverlay = null; const { availability } = this.props;
const applications = [].concat(this.store.visibleLocal, this.store.visibleViews, this.store.visibleBuiltin, this.store.visibleNetwork);
if (this.store.externalOverlayVisible) { return (
externalOverlay = ( <Page>
<div className={ styles.dapps }>
{
applications.map((app, index) => (
<DappCard
app={ app }
availability={ availability }
className={ styles.dapp }
key={ `${index}_${app.id}` }
/>
))
}
</div>
{
this.store.externalOverlayVisible
? (
<div className={ styles.overlay }> <div className={ styles.overlay }>
<div> <div>
<FormattedMessage <FormattedMessage
@ -73,75 +87,22 @@ class Dapps extends Component {
/> />
</div> </div>
</div> </div>
); )
: null
} }
return (
<Page
title={
<FormattedMessage
id='dapps.label'
defaultMessage='Decentralized Applications'
/>
}
>
{ this.renderList(this.store.visibleLocal) }
{ this.renderList(this.store.visibleViews) }
{ this.renderList(this.store.visibleBuiltin) }
{ this.renderList(this.store.visibleNetwork, externalOverlay) }
</Page> </Page>
); );
} }
renderList (items, overlay) {
return (
<SectionList
items={ items }
noStretch
overlay={ overlay }
renderItem={ this.renderApp }
/>
);
}
renderApp = (app) => {
if (app.onlyPersonal && this.props.availability !== 'personal') {
return null;
}
return (
<DappCard
app={ app }
key={ app.id }
showLink
/>
);
}
onClickAcceptExternal = () => { onClickAcceptExternal = () => {
this.store.closeExternalOverlay(); this.store.closeExternalOverlay();
} }
openPermissionsModal = () => {
const { accounts } = this.props;
this.permissionStore.openModal(accounts);
}
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { accounts } = state.personal;
const { availability = 'unknown' } = state.nodeStatus.nodeKind || {}; const { availability = 'unknown' } = state.nodeStatus.nodeKind || {};
/**
* Do not show the Wallet Accounts in the Dapps
* Permissions Modal. This will come in v1.6, but
* for now it would break dApps using Web3...
*/
const _accounts = omitBy(accounts, (account) => account.wallet);
return { return {
accounts: _accounts,
availability availability
}; };
} }