Shell updates (bonds, updated Dapps) (#6897)

* Remove stage-0

* Re-add stage-0 for `export default from './xyz';`

* Add background loading image

* Add window.isParity for parity-specific actions

* inject bonds (temporary)

* Remove loading text overlay

* Remove background around logo

* Remove debug log

* Fix account selection (correct component used)

* Update with changed dapp dependencies

* Add oo7 to list of babel node_module targets

* injectObjects -> onDappLoad

js/package.json

@@ -180,6 +180,7 @@
     "lodash.omitby": "4.6.0",
     "lodash.throttle": "4.1.1",
     "lodash.uniq": "4.5.0",
+    "oo7": "paritytech/oo7#34fdb5991f4e59b2cf84260cab48cec9a57d88c0",
     "prop-types": "15.5.10",
     "react": "15.6.1",
     "react-dom": "15.6.1",

js/src/Application/application.css

@@ -18,6 +18,23 @@
 .application {
   box-sizing: border-box;
   margin-top: 2.75em;
+
+  .logo {
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    opacity: 0.2;
+    position: fixed;
+    padding: 7em;
+    text-align: center;
+    z-index: 0;
+
+    img {
+      display: inline-block;
+      margin: 0 auto;
+    }
+  }
 }
 
 .container {

js/src/Application/application.js

@@ -35,6 +35,7 @@ import Snackbar from '../Snackbar';
 import Status from '../Status';
 import UpgradeParity from '../UpgradeParity';
 
+import parityLogo from '../../assets/parity-logo-black.png';
 import Store from './store';
 import styles from './application.css';
 
@@ -132,6 +133,9 @@ class Application extends Component {
 
     return (
       <div className={ styles.container }>
+        <div className={ styles.logo }>
+          <img src={ parityLogo } />
+        </div>
         <Errors />
         { children }
       </div>

js/src/Dapp/dapp.css

@@ -18,9 +18,11 @@
 .frame {
   background: white;
   border: 0;
+  opacity: 0;
   position: absolute;
   height: 100%;
   width: 100%;
+  z-index: 1;
 }
 
 .full {
@@ -32,13 +34,4 @@
   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   font-weight: 300;
-
-  .text {
-    text-align: center;
-    padding: 5em;
-    font-size: 2em;
-    color: #999;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
 }

js/src/Dapp/dapp.js

@@ -24,6 +24,7 @@ import builtinDapps from '@parity/shared/config/dappsBuiltin.json';
 import viewsDapps from '@parity/shared/config/dappsViews.json';
 import DappsStore from '@parity/shared/mobx/dappsStore';
 import HistoryStore from '@parity/shared/mobx/historyStore';
+// import { Bond } from 'oo7';
 
 import styles from './dapp.css';
 
@@ -90,16 +91,7 @@ export default class Dapp extends Component {
     const { app, loading } = this.state;
 
     if (loading) {
-      return (
-        <div className={ styles.full }>
-          <div className={ styles.text }>
-            <FormattedMessage
-              id='dapp.loading'
-              defaultMessage='Loading'
-            />
-          </div>
-        </div>
-      );
+      return null;
     }
 
     if (!app) {
@@ -157,11 +149,20 @@ export default class Dapp extends Component {
       <iframe
         className={ styles.frame }
         frameBorder={ 0 }
+        id='dappFrame'
         name={ name }
+        onLoad={ this.onDappLoad }
         sandbox='allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation'
         scrolling='auto'
         src={ `${src}${hash}` }
       />
     );
   }
+
+  onDappLoad = () => {
+    const frame = document.getElementById('dappFrame');
+
+    frame.style.opacity = 1;
+    // frame.contentWindow.injectedBondCache = Bond.cache;
+  }
 }

js/src/Dapps/dapps.js

@@ -94,7 +94,6 @@ class Dapps extends Component {
   }
 
   renderList (items, overlay) {
-    console.log(items);
     return (
       <SectionList
         items={ items }

js/src/ParityBar/parityBar.js

@@ -29,7 +29,7 @@ import Button from '@parity/ui/Button';
 import ContainerTitle from '@parity/ui/Container/Title';
 import IdentityIcon from '@parity/ui/IdentityIcon';
 import GradientBg from '@parity/ui/GradientBg';
-import SelectionList from '@parity/ui/SectionList';
+import SelectionList from '@parity/ui/SelectionList';
 import SignerPending from '@parity/ui/SignerPending';
 import { CancelIcon } from '@parity/ui/Icons';
 

js/src/inject.js

@@ -45,6 +45,7 @@ function initProvider () {
     });
 
   window.ethereum = ethereum;
+  window.isParity = true;
 
   return ethereum;
 }

js/webpack/rules/parity.js

@@ -16,7 +16,7 @@
 
 module.exports = {
   test: /\.js$/,
-  include: /node_modules\/@parity\//,
+  include: /node_modules\/(@parity|oo7)\//,
   use: [ {
     loader: 'happypack/loader',
     options: {