diff --git a/js/package-lock.json b/js/package-lock.json
index 7f7a8827273..715c47550ba 100644
--- a/js/package-lock.json
+++ b/js/package-lock.json
@@ -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",
diff --git a/js/package.json b/js/package.json
index 7f8ddee9549..83dc65d0ffd 100644
--- a/js/package.json
+++ b/js/package.json
@@ -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",
diff --git a/js/src/Dapps/DappCard/dappCard.css b/js/src/Dapps/DappCard/dappCard.css
new file mode 100644
index 00000000000..fda8672ded6
--- /dev/null
+++ b/js/src/Dapps/DappCard/dappCard.css
@@ -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 .
+*/
+
+.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;
+ }
+ }
+ }
+}
diff --git a/js/src/Dapps/DappCard/dappCard.js b/js/src/Dapps/DappCard/dappCard.js
new file mode 100644
index 00000000000..d30ecb0d504
--- /dev/null
+++ b/js/src/Dapps/DappCard/dappCard.js
@@ -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 .
+
+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 (
+
+
+
+
+ { app.name }
+
+
+ { app.description }
+
+
+
+
+ );
+ }
+}
diff --git a/js/src/Dapps/DappCard/index.js b/js/src/Dapps/DappCard/index.js
new file mode 100644
index 00000000000..eed38ca781c
--- /dev/null
+++ b/js/src/Dapps/DappCard/index.js
@@ -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 .
+
+export default from './dappCard';
diff --git a/js/src/Dapps/dapps.css b/js/src/Dapps/dapps.css
index 8371fa0d0be..52b8ad408ed 100644
--- a/js/src/Dapps/dapps.css
+++ b/js/src/Dapps/dapps.css
@@ -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%;
}
}
diff --git a/js/src/Dapps/dapps.js b/js/src/Dapps/dapps.js
index 1b96f4f1db8..bcba01c8781 100644
--- a/js/src/Dapps/dapps.js
+++ b/js/src/Dapps/dapps.js
@@ -14,20 +14,19 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see .
-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,100 +46,63 @@ class Dapps extends Component {
}
render () {
- let externalOverlay = null;
-
- if (this.store.externalOverlayVisible) {
- externalOverlay = (
-
-
-
-
-
-
- }
- checked={ false }
- onClick={ this.onClickAcceptExternal }
- />
-
-
- );
- }
+ const { availability } = this.props;
+ const applications = [].concat(this.store.visibleLocal, this.store.visibleViews, this.store.visibleBuiltin, this.store.visibleNetwork);
return (
-
+
+
+ {
+ applications.map((app, index) => (
+
+ ))
+ }
+
+ {
+ this.store.externalOverlayVisible
+ ? (
+
+
+
+
+
+
+ }
+ checked={ false }
+ onClick={ this.onClickAcceptExternal }
+ />
+
+
+ )
+ : null
}
- >
- { this.renderList(this.store.visibleLocal) }
- { this.renderList(this.store.visibleViews) }
- { this.renderList(this.store.visibleBuiltin) }
- { this.renderList(this.store.visibleNetwork, externalOverlay) }
);
}
- renderList (items, overlay) {
- return (
-
- );
- }
-
- renderApp = (app) => {
- if (app.onlyPersonal && this.props.availability !== 'personal') {
- return null;
- }
-
- return (
-
- );
- }
-
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
};
}