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
GitHub
parent
76b143a758
commit
b1517654e1
6
js/package-lock.json
generated
6
js/package-lock.json
generated
@ -1209,9 +1209,9 @@
|
||||
}
|
||||
},
|
||||
"@parity/ui": {
|
||||
"version": "3.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@parity/ui/-/ui-3.0.7.tgz",
|
||||
"integrity": "sha512-FkVb6DWja56uaNN+dG/hNH3c1P4hlA8Sg/e65b4hKyZe3PQP7Gko34wJ0IaP5FEeAWQC/yg0SgrQvc8CqPjeSg==",
|
||||
"version": "3.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@parity/ui/-/ui-3.0.9.tgz",
|
||||
"integrity": "sha512-i0a93GdxzJBOQHqsQt4fGCnl+ItKIjkj9fCP5RnyIjg43yCVHHzuw+MCyegw6cn21mirer9YUF0MW3B8jcCw6A==",
|
||||
"requires": {
|
||||
"@parity/api": "2.1.5",
|
||||
"@parity/etherscan": "2.1.3",
|
||||
|
||||
@ -148,7 +148,7 @@
|
||||
"@parity/plugin-signer-hardware": "paritytech/plugin-signer-hardware",
|
||||
"@parity/plugin-signer-qr": "paritytech/plugin-signer-qr",
|
||||
"@parity/shared": "~2.2.1",
|
||||
"@parity/ui": "~3.0.7",
|
||||
"@parity/ui": "^3.0.9",
|
||||
"keythereum": "1.0.2",
|
||||
"lodash.flatten": "4.4.0",
|
||||
"lodash.omitby": "4.6.0",
|
||||
|
||||
63
js/src/Dapps/DappCard/dappCard.css
Normal file
63
js/src/Dapps/DappCard/dappCard.css
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
69
js/src/Dapps/DappCard/dappCard.js
Normal file
69
js/src/Dapps/DappCard/dappCard.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/Dapps/DappCard/index.js
Normal file
17
js/src/Dapps/DappCard/index.js
Normal 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';
|
||||
@ -16,13 +16,41 @@
|
||||
*/
|
||||
|
||||
.overlay {
|
||||
background: rgba(40, 40, 40, 0.85);
|
||||
color: white;
|
||||
line-height: 1.5em;
|
||||
margin: 0 auto;
|
||||
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 {
|
||||
padding-bottom: 1em;
|
||||
div {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,20 +14,19 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import omitBy from 'lodash.omitby';
|
||||
import { observer } from 'mobx-react';
|
||||
import React, { Component } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import DappCard from '@parity/ui/lib/DappCard';
|
||||
import Checkbox from '@parity/ui/lib/Form/Checkbox';
|
||||
import Page from '@parity/ui/lib/Page';
|
||||
import SectionList from '@parity/ui/lib/SectionList';
|
||||
|
||||
import DappsStore from '@parity/shared/lib/mobx/dappsStore';
|
||||
|
||||
import DappCard from './DappCard';
|
||||
|
||||
import styles from './dapps.css';
|
||||
|
||||
@observer
|
||||
@ -37,7 +36,6 @@ class Dapps extends Component {
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
accounts: PropTypes.object.isRequired,
|
||||
availability: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
@ -48,10 +46,26 @@ class Dapps extends Component {
|
||||
}
|
||||
|
||||
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) {
|
||||
externalOverlay = (
|
||||
return (
|
||||
<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>
|
||||
<FormattedMessage
|
||||
@ -73,75 +87,22 @@ class Dapps extends Component {
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
this.store.closeExternalOverlay();
|
||||
}
|
||||
|
||||
openPermissionsModal = () => {
|
||||
const { accounts } = this.props;
|
||||
|
||||
this.permissionStore.openModal(accounts);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { accounts } = state.personal;
|
||||
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 {
|
||||
accounts: _accounts,
|
||||
availability
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user