Embeddable ParityBar (#4222) (#4287)

* Embeddable ParityBar

* Replacing storage with store

* Fixing  references.

* Addressing style issues

* Supporting parity background

Conflicts:
	js/src/views/ParityBar/parityBar.js

js/src/views/Application/store.js

@@ -15,17 +15,14 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import { action, observable } from 'mobx';
+import store from 'store';
 
 export default class Store {
   @observable firstrunVisible = false;
 
   constructor (api) {
     this._api = api;
-
-    const value = window.localStorage.getItem('showFirstRun');
-    if (value) {
-      this.firstrunVisible = JSON.parse(value);
-    }
+    this.firstrunVisible = store.get('showFirstRun');
 
     this._checkAccounts();
   }
@@ -36,7 +33,7 @@ export default class Store {
 
   @action toggleFirstrun = (visible = false) => {
     this.firstrunVisible = visible;
-    window.localStorage.setItem('showFirstRun', JSON.stringify(!!visible));
+    store.set('showFirstRun', !!visible);
   }
 
   _checkAccounts () {

js/src/views/ParityBar/parityBar.js

@@ -23,15 +23,16 @@ import ContentClear from 'material-ui/svg-icons/content/clear';
 import { Badge, Button, ContainerTitle, ParityBackground } from '~/ui';
 import { Embedded as Signer } from '../Signer';
 
-import imagesEthcoreBlock from '../../../assets/images/parity-logo-white-no-text.svg';
+import imagesEthcoreBlock from '!url-loader!../../../assets/images/parity-logo-white-no-text.svg';
 import styles from './parityBar.css';
 
 class ParityBar extends Component {
 
   static propTypes = {
-    pending: PropTypes.array,
-    dapp: PropTypes.bool
-  }
+    dapp: PropTypes.bool,
+    externalLink: PropTypes.string,
+    pending: PropTypes.array
+  };
 
   state = {
     opened: false
@@ -46,12 +47,32 @@ class ParityBar extends Component {
     }
 
     if (count < newCount) {
-      this.setState({ opened: true });
+      this.setOpened(true);
     } else if (newCount === 0 && count === 1) {
-      this.setState({ opened: false });
+      this.setOpened(false);
     }
   }
 
+  setOpened (opened) {
+    this.setState({ opened });
+
+    if (!this.bar) {
+      return;
+    }
+
+    // Fire up custom even to support having parity bar iframed.
+    const event = new CustomEvent('parity.bar.visibility', {
+      bubbles: true,
+      detail: { opened }
+    });
+
+    this.bar.dispatchEvent(event);
+  }
+
+  onRef = (element) => {
+    this.bar = element;
+  }
+
   render () {
     const { opened } = this.state;
 
@@ -73,27 +94,55 @@ class ParityBar extends Component {
         className={ styles.parityIcon } />
     );
 
+    const parityButton = (
+      <Button
+        className={ styles.parityButton }
+        icon={ parityIcon }
+        label={ this.renderLabel('Parity') }
+      />
+    );
+
     return (
-      <div className={ styles.bar }>
+      <div
+        className={ styles.bar }
+        ref={ this.onRef }
+      >
         <ParityBackground className={ styles.corner }>
           <div className={ styles.cornercolor }>
-            <Link to='/apps'>
-              <Button
-                className={ styles.parityButton }
-                icon={ parityIcon }
-                label={ this.renderLabel('Parity') } />
-            </Link>
+            { this.renderLink(parityButton) }
             <Button
               className={ styles.button }
               icon={ <ActionFingerprint /> }
               label={ this.renderSignerLabel() }
-              onClick={ this.toggleDisplay } />
+              onClick={ this.toggleDisplay }
+            />
           </div>
         </ParityBackground>
       </div>
     );
   }
 
+  renderLink (button) {
+    const { externalLink } = this.props;
+
+    if (!externalLink) {
+      return (
+        <Link to='/apps'>
+          { button }
+        </Link>
+      );
+    }
+
+    return (
+      <a
+        href={ externalLink }
+        target='_parent'
+      >
+        { button }
+      </a>
+    );
+  }
+
   renderExpanded () {
     return (
       <div className={ styles.overlay }>
@@ -147,9 +196,7 @@ class ParityBar extends Component {
   toggleDisplay = () => {
     const { opened } = this.state;
 
-    this.setState({
-      opened: !opened
-    });
+    this.setOpened(!opened);
   }
 }
 

js/src/views/Settings/middleware.js

@@ -14,6 +14,8 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import store from 'store';
+
 import defaultViews from './Views/defaults';
 
 function initBackground (store, api) {
@@ -26,11 +28,12 @@ function initBackground (store, api) {
 }
 
 function loadBackground () {
-  return window.localStorage.getItem('backgroundSeed');
+  // Check global object to support embedding
+  return store.get('backgroundSeed') || window.backgroundSeed;
 }
 
 function saveBackground (backgroundSeed) {
-  window.localStorage.setItem('backgroundSeed', backgroundSeed);
+  store.set('backgroundSeed', backgroundSeed);
 }
 
 function initViews (store) {
@@ -75,9 +78,9 @@ function loadViews () {
   let data;
 
   try {
-    const json = window.localStorage.getItem('views') || '{}';
+    const json = store.get('views') || {};
 
-    data = Object.assign(defaults, JSON.parse(json), fixed);
+    data = Object.assign(defaults, json, fixed);
   } catch (e) {
     data = defaults;
   }
@@ -85,16 +88,16 @@ function loadViews () {
   return data;
 }
 
-function saveViews (store) {
-  window.localStorage.setItem('views', JSON.stringify(getDefaultViews()));
+function saveViews () {
+  store.set('views', getDefaultViews());
 }
 
-function toggleViews (store, viewIds) {
+function toggleViews (viewIds) {
   viewIds.forEach((id) => {
     defaultViews[id].active = !defaultViews[id].active;
   });
 
-  saveViews(store);
+  saveViews();
 }
 
 export default class SettingsMiddleware {
@@ -107,11 +110,11 @@ export default class SettingsMiddleware {
           break;
 
         case 'toggleView':
-          toggleViews(store, [action.viewId]);
+          toggleViews([action.viewId]);
           break;
 
         case 'toggleViews':
-          toggleViews(store, action.viewIds);
+          toggleViews(action.viewIds);
           break;
 
         case 'updateBackground':