Navigate to dapp from dapp (WIP)

js/src/config/dappsBuiltin.json

@@ -5,7 +5,8 @@
     "description": "Deploy all basic contracts, names & applications to the network",
     "author": "Parity Team <admin@ethcore.io>",
     "version": "1.0.0",
-    "visible": false
+    "visible": false,
+    "noselect": false
   },
   {
     "id": "0xf9f2d620c2e08f83e45555247146c62185e4ab7cf82a4b9002a265a0d020348f",

js/src/config/dappsViews.json

@@ -10,6 +10,18 @@
     "visible": true,
     "secure": true
   },
+  {
+    "id": "account",
+    "url": "account",
+    "src": "Account",
+    "name": "Account",
+    "description": "Display a single account",
+    "author": "Parity Team <admin@ethcore.io>",
+    "version": "2.0.0",
+    "visible": true,
+    "secure": true,
+    "noselect": true
+  },
   {
     "id": "addresses",
     "url": "addresses",

js/src/routes.js

@@ -66,6 +66,15 @@ const childRoutes = [
       }
     }
   },
+  {
+    path: 'app/:id/:details',
+    component: Dapp,
+    onEnter: ({ params }) => {
+      if (!dapps[params.id] || !dapps[params.id].skipHistory) {
+        dappsHistory.add(params.id);
+      }
+    }
+  },
   { path: 'apps', component: Dapps },
   { path: 'web', component: Web },
   { path: 'web/:url', component: Web }

js/src/ui/Container/container.js

@@ -20,6 +20,7 @@ import { Card } from 'material-ui/Card';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
+import DappLink from '../DappLink';
 import Title from './Title';
 
 import styles from './container.css';
@@ -29,6 +30,7 @@ export default class Container extends Component {
     children: PropTypes.node,
     className: PropTypes.string,
     compact: PropTypes.bool,
+    dappLink: PropTypes.bool,
     hover: PropTypes.node,
     light: PropTypes.bool,
     link: PropTypes.string,
@@ -76,15 +78,7 @@ export default class Container extends Component {
       >
         {
           link
-            ? (
-              <Link
-                className={ styles.link }
-                to={ link }
-              >
-                { card }
-                { this.renderHover() }
-              </Link>
-            )
+            ? this.renderLink(link, card)
             : (
               <div>
                 { card }
@@ -96,6 +90,32 @@ export default class Container extends Component {
     );
   }
 
+  renderLink (link, card) {
+    const { dappLink } = this.props;
+
+    if (dappLink) {
+      return (
+        <DappLink
+          className={ styles.link }
+          to={ link }
+        >
+          { card }
+          { this.renderHover() }
+        </DappLink>
+      );
+    }
+
+    return (
+      <Link
+        className={ styles.link }
+        to={ link }
+      >
+        { card }
+        { this.renderHover() }
+      </Link>
+    );
+  }
+
   renderHover () {
     const { hover } = this.props;
 

js/src/ui/DappLink/dappLink.css

@@ -0,0 +1,21 @@
+/* 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/>.
+*/
+
+.link {
+  color: rgb(0, 151, 167);
+  cursor: pointer;
+}

js/src/ui/DappLink/dappLink.js

@@ -0,0 +1,48 @@
+// 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, PropTypes } from 'react';
+
+import { nodeOrStringProptype } from '~/util/proptypes';
+
+import styles from './dappLink.css';
+
+export default class DappLink extends Component {
+  static propTypes = {
+    children: nodeOrStringProptype().isRequired,
+    className: PropTypes.string,
+    to: PropTypes.string.isRequired
+  };
+
+  render () {
+    const { children, className } = this.props;
+
+    return (
+      <div
+        className={ [styles.link, className].join(' ') }
+        onClick={ this.onClick }
+      >
+        { children }
+      </div>
+    );
+  }
+
+  onClick = () => {
+    const { to } = this.props;
+
+    window.parent.location.hash = `/app${to}`;
+  }
+}

js/src/ui/DappLink/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 './dappLink';

js/src/ui/index.js

@@ -28,6 +28,7 @@ export CopyToClipboard from './CopyToClipboard';
 export CurrencySymbol from './CurrencySymbol';
 export DappCard from './DappCard';
 export DappIcon from './DappIcon';
+export DappLink from './DappLink';
 export Errors from './Errors';
 export Features, { FEATURES, FeaturesStore } from './Features';
 export Form, { AddressSelect, DappUrlInput, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput, VaultSelect } from './Form';

js/src/views/Account/account.js

@@ -56,6 +56,8 @@ class Account extends Component {
   hwstore = HardwareStore.get(this.context.api);
 
   componentDidMount () {
+    console.log('Account', 'componentDidMount');
+
     this.props.fetchCertifiers();
     this.setVisibleAccounts();
   }

js/src/views/Account/index.js

@@ -14,4 +14,34 @@
 // 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 './account';
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { Route, Router, hashHistory } from 'react-router';
+
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+import { api } from './parity';
+
+import ContractInstances from '~/contracts';
+import { initStore } from '~/redux';
+import ContextProvider from '~/ui/ContextProvider';
+import muiTheme from '~/ui/Theme';
+
+import Account from './account';
+
+import '~/../assets/fonts/Roboto/font.css';
+import '~/../assets/fonts/RobotoMono/font.css';
+
+ContractInstances.get(api);
+
+const store = initStore(api, hashHistory);
+
+ReactDOM.render(
+  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+    <Router history={ hashHistory }>
+      <Route path='/' component={ Account } />
+    </Router>
+  </ContextProvider>,
+  document.querySelector('#container')
+);

js/src/views/Account/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@parity/view-address",
+  "description": "Parity default account view",
+  "version": "0.0.0",
+  "main": "index.js",
+  "author": "Parity Team <admin@parity.io>",
+  "maintainers": [],
+  "contributors": [],
+  "license": "GPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/paritytech/parity.git"
+  },
+  "keywords": [],
+  "scripts": {},
+  "devDependencies": {},
+  "dependencies": {},
+  "peerDependencies": {}
+}

js/src/views/Account/parity.js

@@ -0,0 +1,21 @@
+// 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/>.
+
+const api = window.parent.secureApi;
+
+export {
+  api
+};

js/src/views/Accounts/Summary/summary.js

@@ -96,6 +96,7 @@ class Summary extends Component {
     return (
       <Container
         className={ styles.account }
+        dappLink
         hover={
           <div className={ styles.overlay }>
             { this.renderBalance(false) }
@@ -228,7 +229,7 @@ class Summary extends Component {
     const { address } = account;
     const baseLink = account.wallet
       ? 'wallet'
-      : link || 'accounts';
+      : link || 'account';
 
     return `/${baseLink}/${address}`;
   }

js/src/views/Accounts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parity/view-addresses",
-  "description": "Parity default addressbook view",
+  "description": "Parity default accounts list view",
   "version": "0.0.0",
   "main": "index.js",
   "author": "Parity Team <admin@parity.io>",

js/src/views/Dapp/dapp.js

@@ -123,7 +123,7 @@ export default class Dapp extends Component {
         className={ styles.frame }
         frameBorder={ 0 }
         name={ name }
-        sandbox='allow-forms allow-popups allow-same-origin allow-scripts'
+        sandbox='allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation'
         scrolling='auto'
         src={ src }
       />

js/src/views/Dapps/dappsStore.js

@@ -78,7 +78,7 @@ export default class DappsStore extends EventEmitter {
   }
 
   @computed get visibleBuiltin () {
-    return this.visibleApps.filter((app) => app.type === 'builtin');
+    return this.visibleApps.filter((app) => !app.noselect && app.type === 'builtin');
   }
 
   @computed get visibleLocal () {
@@ -90,7 +90,7 @@ export default class DappsStore extends EventEmitter {
   }
 
   @computed get visibleViews () {
-    return this.visibleApps.filter((app) => app.type === 'view');
+    return this.visibleApps.filter((app) => !app.noselect && app.type === 'view');
   }
 
   /**

js/src/views/index.js

@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-export Account from './Account';
 export Address from './Address';
 export Application from './Application';
 export Contract from './Contract';