Rework dapps list (#7206)

* Rework dapps list

* Update box sizing

* Remove non-passed-in prop

* PR comments

* Re-adjust key

js/package-lock.json

@@ -1209,9 +1209,9 @@
       }
     },
     "@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": {
         "@parity/api": "2.1.5",
         "@parity/etherscan": "2.1.3",

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",

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 <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;
+      }
+    }
+  }
+}

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 <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>
+    );
+  }
+}

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 <http://www.gnu.org/licenses/>.
+
+export default from './dappCard';

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 {
+  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%;
   }
 }

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 <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) {
+    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>
                   <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
   };
 }