New Homepage (#7266)

* Purify dappCard style

* Add support for pinning apps

* Add a section to show pinned apps

* Cleaner code

* Bump dependency versions

* Small tweaks

* Avoid double scrollbars

* Small style updates

* Bump parity/shared version

js/package-lock.json

@@ -15,9 +15,9 @@
       }
     },
     "@parity/api": {
-      "version": "2.1.5",
+      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@parity/api/-/api-2.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/@parity/api/-/api-2.1.6.tgz",
-      "integrity": "sha512-HkvMIhIwDMEIyTmXqEjWn1C2qes0qJO270bQldRfCZf0XiOGXG726EzV3FUpUbVONCVQ9riDviAl3fw6D+N6nA==",
+      "integrity": "sha512-4HuUJLGkZEAHSy5918ofepKXWvAE89VsoUN7q1Px9ASN8xLR3MWPMuNxOJZjKTqVDZWpXs8q3g7GIOVdi90BXA==",
       "requires": {
         "@parity/abi": "2.1.2",
         "@parity/jsonrpc": "2.1.4",
@@ -52,8 +52,8 @@
       "version": "github:js-dist-paritytech/dapp-dapp-methods#7245089a8e83274372cde3c9406ae155e2083f84",
       "dev": true,
       "requires": {
-        "@parity/api": "2.1.5",
+        "@parity/api": "2.1.6",
-        "@parity/shared": "2.2.12",
+        "@parity/shared": "2.2.14",
         "@parity/ui": "2.2.15",
         "lodash": "4.17.4",
         "mobx": "3.3.2",
@@ -74,9 +74,9 @@
           "integrity": "sha512-6bICFA1c1GBz4d7vratkoqovBezJNjc8VCwnZtpPTcyLeMshAhatPV4dGgJo/eHtlOCkKAeaAKatWZhEtXt/5g==",
           "dev": true,
           "requires": {
-            "@parity/api": "2.1.5",
+            "@parity/api": "2.1.6",
             "@parity/etherscan": "2.1.3",
-            "@parity/shared": "2.2.12",
+            "@parity/shared": "2.2.14",
             "bignumber.js": "3.0.1",
             "brace": "0.9.0",
             "date-difference": "1.0.0",
@@ -556,7 +556,7 @@
       "version": "github:js-dist-paritytech/dapp-dapp-visible#84f40feb42f1707d7f463213a990600dc11978f7",
       "dev": true,
       "requires": {
-        "@parity/api": "2.1.5",
+        "@parity/api": "2.1.6",
         "@parity/ui": "2.2.15",
         "mobx": "3.3.2",
         "mobx-react": "4.3.5",
@@ -576,9 +576,9 @@
           "integrity": "sha512-6bICFA1c1GBz4d7vratkoqovBezJNjc8VCwnZtpPTcyLeMshAhatPV4dGgJo/eHtlOCkKAeaAKatWZhEtXt/5g==",
           "dev": true,
           "requires": {
-            "@parity/api": "2.1.5",
+            "@parity/api": "2.1.6",
             "@parity/etherscan": "2.1.3",
-            "@parity/shared": "2.2.12",
+            "@parity/shared": "2.2.14",
             "bignumber.js": "3.0.1",
             "brace": "0.9.0",
             "date-difference": "1.0.0",
@@ -1103,7 +1103,7 @@
       "resolved": "https://registry.npmjs.org/@parity/etherscan/-/etherscan-2.1.3.tgz",
       "integrity": "sha512-GtQMaE8t7PDOcz/K4Ud+Z6EELB47+qG5V6R7iTJ4DcueXVgiMAXK5OiNeKF3Qjd1/M4FIJdFm5NTSdC7bR38+Q==",
       "requires": {
-        "@parity/api": "2.1.5",
+        "@parity/api": "2.1.6",
         "bignumber.js": "3.0.1",
         "es6-promise": "4.1.1",
         "node-fetch": "1.7.3",
@@ -1140,9 +1140,9 @@
       "version": "github:paritytech/plugin-signer-qr#c16423de5b8a8f68ebd5f1e78e084fa959329a9f"
     },
     "@parity/shared": {
-      "version": "2.2.12",
+      "version": "2.2.14",
-      "resolved": "https://registry.npmjs.org/@parity/shared/-/shared-2.2.12.tgz",
+      "resolved": "https://registry.npmjs.org/@parity/shared/-/shared-2.2.14.tgz",
-      "integrity": "sha512-2ANbEOkWoqOf5ytE0K5pq7ZeqS7PVuiIwrhyxDgn8dQhpFiDLHro7pQirIEDZ8LzZK6g6V+HU38sagn6dYSRIQ==",
+      "integrity": "sha512-YM7ZqWNyquX0+j89NPPxFBCUPgaqIVrqQ4Iqml50kz9uC/Ev07A/OB/+yYmAJ+3io6LWvDc/U5K3CpaMltTLtg==",
       "requires": {
         "@parity/ledger": "2.1.2",
         "eventemitter3": "2.0.3",
@@ -1202,9 +1202,9 @@
       "resolved": "https://registry.npmjs.org/@parity/ui/-/ui-3.0.16.tgz",
       "integrity": "sha512-yGQ8k2/oNxu0GyJ6eQS1AUk1O1XR//oXfaHPEBa0VuJIB7gY9lPrkG7CSNpazOrTCfhdCHgpjGe3WR5lbv0HiQ==",
       "requires": {
-        "@parity/api": "2.1.5",
+        "@parity/api": "2.1.6",
         "@parity/etherscan": "2.1.3",
-        "@parity/shared": "2.2.12",
+        "@parity/shared": "2.2.14",
         "babel-runtime": "6.26.0",
         "bignumber.js": "4.1.0",
         "brace": "0.11.0",

js/package.json

@@ -140,12 +140,12 @@
     "yargs": "6.6.0"
   },
   "dependencies": {
-    "@parity/api": "^2.1.1",
+    "@parity/api": "^2.1.6",
     "@parity/plugin-signer-account": "paritytech/plugin-signer-account",
     "@parity/plugin-signer-default": "paritytech/plugin-signer-default",
     "@parity/plugin-signer-hardware": "paritytech/plugin-signer-hardware",
     "@parity/plugin-signer-qr": "paritytech/plugin-signer-qr",
-    "@parity/shared": "^2.2.12",
+    "@parity/shared": "2.2.14",
     "@parity/ui": "^3.0.16",
     "keythereum": "1.0.2",
     "lodash.flatten": "4.4.0",

js/src/Application/application.css

@@ -20,37 +20,28 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  overflow: hidden;
   width: 100%;
 
   .logo {
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    opacity: 0.2;
     position: absolute;
-    padding: 2em;
+    left: 50%;
-    text-align: center;
+    top: 50%;
+    transform: translate(-50%, -50%);
     z-index: 0;
-
+    opacity: 0.2;
-    img {
-      display: inline-block;
-      margin: 0 auto;
-    }
   }
 
   .content {
     box-sizing: border-box;
     display: flex;
     flex-grow: 1;
-    overflow: hidden;
     position: relative;
 
-    > div:not(.logo) {
+    /* Show scrollbar for Homepage only, dapps' scrollbar are handled inside
-      display: flex;
+     * their iframe.
-      flex-grow: 1;
+     */
-      overflow-y: scroll;
+    & > div {
+      overflow-y: auto;
     }
   }
 

js/src/Application/application.js

@@ -75,6 +75,7 @@ class Application extends Component {
 
     return (
       <div className={ styles.application }>
+        <img src={ parityLogo } className={ styles.logo } />
         {
           blockNumber
             ? <Status upgradeStore={ this.upgradeStore } />
@@ -107,32 +108,31 @@ class Application extends Component {
   }
 
   renderApp () {
-    const { children } = this.props;
-
     return [
       <Extension key='extension' />,
       <FirstRun key='firstrun' />,
       <Snackbar key='snackbar' />,
       <UpgradeParity key='upgrade' upgradeStore={ this.upgradeStore } />,
       <Errors key='errors' />,
-      <div key='content' className={ styles.content }>
+      this.renderContent()
-        { children }
-      </div>
     ];
   }
 
   renderMinimized () {
-    const { children } = this.props;
-
     return [
       <Errors key='errors' />,
+      this.renderContent()
+    ];
+  }
+
+  renderContent () {
+    const { children } = this.props;
+
+    return (
       <div key='content' className={ styles.content }>
-        <div className={ styles.logo }>
-          <img src={ parityLogo } />
-        </div>
         {children}
       </div>
-    ];
+    );
   }
 }
 

js/src/Connection/connection.css

@@ -72,7 +72,7 @@
 
 .icons {
   margin-top: 2em;
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 .icon,

js/src/Connection/connection.js

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 
 import GradientBg from '@parity/ui/lib/GradientBg';
 import Input from '@parity/ui/lib/Form/Input';
-import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon, KeyIcon } from '@parity/ui/lib/Icons';
+import { CompareIcon, ComputerIcon, DashboardIcon, KeyIcon } from '@parity/ui/lib/Icons';
 
 import styles from './connection.css';
 

js/src/Dapps/DappCard/dappCard.css

@@ -16,48 +16,44 @@
 */
 
 .card {
-  padding: 0.25em;
+  position: relative;
+  margin-top: 3em;
 
-  .content {
+  .pin {
-    background: white;
+    display: none;
-    box-sizing: content-box;
+    position: absolute;
-    min-height: 100px;
+    top: 0;
-
+    right: 1.6em;
-    .title {
+    z-index: 1;
-      min-height: 1em;
-      padding-left: 72px;
   }
 
-    .description {
+  .pin.pinned {
-      color: #333;
+    display: block;
-      min-height: 1em;
+    transform: rotate(45deg);
-      padding-left: 72px;
+  }
-      padding-top: 0.25em;
+
-      opacity: 0.66;
+  &:hover {
+    .pin {
+      display: block;
+    }
+  }
+
+  .content {
+    display: block;
+    padding-top: 1em;
+
+    .title {
+      margin-top: 0.8em;
     }
 
     .image {
-      border-radius: 8px;
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
-      position: absolute;
+      border-radius: 10px;
-    }
+      display: block;
-
+      width: 2em;
-    .vouching {
+      height: 2em;
-      padding: 0.5em;
+      margin-left: auto;
-      margin: 0.5em 1em;
+      margin-right: auto;
-      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

@@ -16,10 +16,11 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Link } from 'react-router';
 
-import Container from '@parity/ui/lib/Container';
 import DappIcon from '@parity/ui/lib/DappIcon';
-import DappVouchFor from '@parity/ui/lib/DappVouchFor';
+import Header from 'semantic-ui-react/dist/commonjs/elements/Header';
+import Button from 'semantic-ui-react/dist/commonjs/elements/Button';
 
 import styles from './dappCard.css';
 
@@ -27,11 +28,15 @@ export default class DappCard extends Component {
   static propTypes = {
     app: PropTypes.object.isRequired,
     availability: PropTypes.string.isRequired,
-    className: PropTypes.string
+    className: PropTypes.string,
+    onPin: PropTypes.func,
+    pinned: PropTypes.bool
   };
 
+  handlePin = () => this.props.onPin(this.props.app.id)
+
   render () {
-    const { app, availability, className } = this.props;
+    const { app, availability, className, pinned } = this.props;
 
     if (app.onlyPersonal && availability !== 'personal') {
       return null;
@@ -39,26 +44,28 @@ export default class DappCard extends Component {
 
     return (
       <div className={ [styles.card, className].join(' ') }>
-        <Container
+        <Button
-          className={ styles.content }
+          size='mini'
-          link={ `/${app.id}` }
+          icon='pin'
-        >
+          circular
+          className={ [styles.pin, pinned && styles.pinned].join(' ') }
+          onClick={ this.handlePin }
+        />
+        <div className={ styles.content }>
+          <Link to={ app.url === 'web' ? '/web' : `/${app.id}` } >
             <DappIcon
               app={ app }
               className={ styles.image }
             />
-          <div className={ styles.title }>
+            <Header
+              as='h5'
+              textAlign='center'
+              className={ styles.title }
+            >
               {app.name}
+            </Header>
+          </Link>
         </div>
-          <div className={ styles.description }>
-            { app.description }
-          </div>
-          <DappVouchFor
-            app={ app }
-            className={ styles.vouching }
-            maxNumber={ 10 }
-          />
-        </Container>
       </div>
     );
   }

js/src/Dapps/dapps.css

@@ -41,15 +41,21 @@
   }
 }
 
+.sectionTitle {
+  padding: 2em 0 0 4em !important;
+  margin-bottom: 0 !important;
+}
+
 .dapps {
+  padding: 0 1.5em;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin: 1.5em 0;
+  justify-content: center;
 
   .dapp {
-    flex: 0 0 25%;
+    width: 12em;
-    max-width: 25%;
+    margin-left: 2em;
-    min-width: 25%;
+    margin-right: 2em;
   }
 }

js/src/Dapps/dapps.js

@@ -45,25 +45,40 @@ class Dapps extends Component {
     this.store.loadAllApps();
   }
 
-  render () {
+  handlePin = (appId) => {
-    const { availability } = this.props;
+    if (this.store.displayApps[appId].pinned) {
-    const applications = [].concat(this.store.visibleLocal, this.store.visibleViews, this.store.visibleBuiltin, this.store.visibleNetwork);
+      this.store.unpinApp(appId);
+    } else {
+      this.store.pinApp(appId);
+    }
+  }
 
-    return (
+  renderSection = (apps) => (
-      <Page className={ styles.dapps }>
+    apps && apps.length > 0 &&
+    <div className={ styles.dapps }>
       {
-          applications.map((app, index) => (
+        apps.map((app, index) => (
           <DappCard
             app={ app }
-              availability={ availability }
+            pinned={ this.store.displayApps[app.id] && this.store.displayApps[app.id].pinned }
+            availability={ this.props.availability }
             className={ styles.dapp }
             key={ `${index}_${app.id}` }
+            onPin={ this.handlePin }
           />
         ))
       }
+    </div>
+  )
+
+  render () {
+    return (
+      <Page className={ styles.layout }>
+        {this.renderSection(this.store.pinnedApps)}
+        {this.renderSection(this.store.visibleUnpinned)}
         {
-          this.store.externalOverlayVisible
+          this.store.externalOverlayVisible &&
-            ? (
+          (
             <div className={ styles.overlay }>
               <div>
                 <FormattedMessage
@@ -86,7 +101,6 @@ class Dapps extends Component {
               </div>
             </div>
           )
-            : null
         }
       </Page>
     );

js/src/shellMiddleware.js

@@ -17,46 +17,49 @@
 import * as mobx from 'mobx';
 import flatten from 'lodash.flatten';
 
-import VisibleStore from '@parity/shared/lib/mobx/dappsStore';
+import DappsStore from '@parity/shared/lib/mobx/dappsStore';
-
 import RequestStore from './DappRequests/store';
 import methodGroups from './DappRequests/methodGroups';
 
 export default function execute (appId, method, params, callback) {
-  const visibleStore = VisibleStore.get();
+  const dappsStore = DappsStore.get();
   const requestStore = RequestStore.get();
 
   switch (method) {
-    case 'shell_getApps':
+    case 'shell_getApps': {
       const [displayAll] = params;
 
       callback(
         null,
         displayAll
-          ? visibleStore.allApps.slice().map(mobx.toJS)
+          ? dappsStore.allApps.slice().map(mobx.toJS)
-          : visibleStore.visibleApps.slice().map(mobx.toJS)
+          : dappsStore.visibleApps.slice().map(mobx.toJS)
       );
       return true;
+    }
 
-    case 'shell_getFilteredMethods':
+    case 'shell_getFilteredMethods': {
       callback(
         null,
         flatten(Object.keys(methodGroups).map(key => methodGroups[key].methods))
       );
       return true;
+    }
 
-    case 'shell_getMethodGroups':
+    case 'shell_getMethodGroups': {
       callback(
         null,
         methodGroups
       );
       return true;
+    }
 
-    case 'shell_getMethodPermissions':
+    case 'shell_getMethodPermissions': {
       callback(null, mobx.toJS(requestStore.permissions));
       return true;
+    }
 
-    case 'shell_loadApp':
+    case 'shell_loadApp': {
       const [loadId, loadParams] = params;
       const loadUrl = `/${loadId}/${loadParams || ''}`;
 
@@ -64,27 +67,43 @@ export default function execute (appId, method, params, callback) {
 
       callback(null, true);
       return true;
+    }
 
-    case 'shell_requestNewToken':
+    case 'shell_requestNewToken': {
       callback(null, requestStore.createToken(appId));
       return true;
+    }
 
-    case 'shell_setAppVisibility':
+    case 'shell_setAppVisibility': {
-      const [changeId, visibility] = params;
+      const [appId, visibility] = params;
 
       callback(
         null,
         visibility
-          ? visibleStore.showApp(changeId)
+          ? dappsStore.showApp(appId)
-          : visibleStore.hideApp(changeId)
+          : dappsStore.hideApp(appId)
       );
       return true;
+    }
 
-    case 'shell_setMethodPermissions':
+    case 'shell_setAppPinned': {
+      const [appId, pinned] = params;
+
+      callback(
+        null,
+        pinned
+          ? dappsStore.pinApp(appId)
+          : dappsStore.unpinApp(appId)
+      );
+      return true;
+    }
+
+    case 'shell_setMethodPermissions': {
       const [permissions] = params;
 
       callback(null, requestStore.setPermissions(permissions));
       return true;
+    }
 
     default:
       return false;