Dapp with params (Account, Address & Contract) (#5500)

* Allow passing hash through to dapp

* Add allet view

* Add Contract & Address links

js/src/config/dappsViews.json

@@ -33,6 +33,18 @@
     "visible": true,
     "secure": true
   },
+  {
+    "id": "address",
+    "url": "address",
+    "src": "Address",
+    "name": "Address",
+    "description": "Display a single address",
+    "author": "Parity Team <admin@ethcore.io>",
+    "version": "2.0.0",
+    "visible": true,
+    "secure": true,
+    "noselect": true
+  },
   {
     "id": "contracts",
     "url": "contracts",
@@ -44,6 +56,18 @@
     "visible": true,
     "secure": true
   },
+  {
+    "id": "contract",
+    "url": "contract",
+    "src": "Contract",
+    "name": "Contract",
+    "description": "Display a single contract",
+    "author": "Parity Team <admin@ethcore.io>",
+    "version": "2.0.0",
+    "visible": true,
+    "secure": true,
+    "noselect": true
+  },
   {
     "id": "develop",
     "url": "develop",
@@ -109,5 +133,17 @@
     "version": "2.0.0",
     "visible": true,
     "secure": true
+  },
+  {
+    "id": "wallet",
+    "url": "wallet",
+    "src": "Wallet",
+    "name": "Wallet",
+    "description": "Display a single wallet account",
+    "author": "Parity Team <admin@ethcore.io>",
+    "version": "2.0.0",
+    "visible": true,
+    "secure": true,
+    "noselect": true
   }
 ]

js/src/routes.js

@@ -30,27 +30,6 @@ function redirectTo (path) {
   };
 }
 
-// const accountsRoutes = [
-//   {
-//     path: ':address',
-//     component: Account,
-//     onEnter: ({ params }) => {
-//       accountsHistory.add(params.address, 'account');
-//     }
-//   },
-//   {
-//     path: '/wallet/:address',
-//     component: Wallet,
-//     onEnter: ({ params }) => {
-//       accountsHistory.add(params.address, 'wallet');
-//     }
-//   }
-// ];
-
-// const contractsRoutes = [
-//   { path: ':address', component: Contract }
-// ];
-
 const routes = [
   { path: '/', onEnter: redirectTo('/apps') },
   { path: '/auth', onEnter: redirectTo('/apps') }

js/src/views/Account/account.js

@@ -22,6 +22,7 @@ import { bindActionCreators } from 'redux';
 
 import shapeshiftBtn from '~/../assets/images/shapeshift-btn.png';
 import HardwareStore from '~/mobx/hardwareStore';
+import HistoryStore from '~/mobx/historyStore';
 import { DeleteAccount, EditMeta, Faucet, PasswordManager, Shapeshift, Transfer, Verification } from '~/modals';
 import { setVisibleAccounts } from '~/redux/providers/personalActions';
 import { fetchCertifiers, fetchCertifications } from '~/redux/providers/certifications/actions';
@@ -35,6 +36,8 @@ import Store from './store';
 import Transactions from './Transactions';
 import styles from './account.css';
 
+const accountsHistory = HistoryStore.get('accounts');
+
 @observer
 class Account extends Component {
   static contextTypes = {
@@ -56,7 +59,11 @@ class Account extends Component {
   hwstore = HardwareStore.get(this.context.api);
 
   componentDidMount () {
-    console.log('Account', 'componentDidMount');
+    const { params } = this.props;
+
+    if (params.address) {
+      accountsHistory.add(params.address, 'wallet');
+    }
 
     this.props.fetchCertifiers();
     this.setVisibleAccounts();

js/src/views/Account/index.js

@@ -40,7 +40,7 @@ const store = initStore(api, hashHistory);
 ReactDOM.render(
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
     <Router history={ hashHistory }>
-      <Route path='/' component={ Account } />
+      <Route path='/:address' component={ Account } />
     </Router>
   </ContextProvider>,
   document.querySelector('#container')

js/src/views/Account/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@parity/view-address",
+  "name": "@parity/view-account",
   "description": "Parity default account view",
   "version": "0.0.0",
   "main": "index.js",

js/src/views/Address/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 './address';
+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 Address from './address';
+
+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='/:address' component={ Address } />
+    </Router>
+  </ContextProvider>,
+  document.querySelector('#container')
+);

js/src/views/Address/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@parity/view-address",
+  "description": "Parity default address 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/Address/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/Addresses/addresses.js

@@ -90,7 +90,7 @@ class Addresses extends Component {
 
     return (
       <List
-        link='addresses'
+        link='address'
         search={ searchValues }
         accounts={ contacts }
         empty={ !hasContacts }

js/src/views/Contract/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 './contract';
+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 Contract from './contract';
+
+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='/:address' component={ Contract } />
+    </Router>
+  </ContextProvider>,
+  document.querySelector('#container')
+);

js/src/views/Contract/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@parity/view-address",
+  "description": "Parity default address 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/Contract/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/Contracts/contracts.js

@@ -104,7 +104,7 @@ class Contracts extends Component {
         { this.renderDeployContract() }
         <Page>
           <List
-            link='contracts'
+            link='contract'
             search={ searchValues }
             accounts={ contracts }
             empty={ !hasContracts }

js/src/views/Dapp/dapp.js

@@ -66,6 +66,7 @@ export default class Dapp extends Component {
 
   render () {
     const { dappsUrl } = this.context.api;
+    const { params } = this.props;
     const { app, loading } = this.state;
 
     if (loading) {
@@ -118,6 +119,12 @@ export default class Dapp extends Component {
         break;
     }
 
+    let hash = '';
+
+    if (params.details) {
+      hash = `#/${params.details}`;
+    }
+
     return (
       <iframe
         className={ styles.frame }
@@ -125,7 +132,7 @@ export default class Dapp extends Component {
         name={ name }
         sandbox='allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation'
         scrolling='auto'
-        src={ src }
+        src={ `${src}${hash}` }
       />
     );
   }

js/src/views/Wallet/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 './wallet';
+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 Wallet from './wallet';
+
+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='/:address' component={ Wallet } />
+    </Router>
+  </ContextProvider>,
+  document.querySelector('#container')
+);

js/src/views/Wallet/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@parity/view-wallet",
+  "description": "Parity default wallet 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/Wallet/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/Wallet/wallet.js

@@ -20,6 +20,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import moment from 'moment';
 
+import HistoryStore from '~/mobx/historyStore';
 import { EditMeta, Transfer, WalletSettings } from '~/modals';
 import { Actionbar, Button, Page, Loading } from '~/ui';
 import { DeleteIcon, EditIcon, SendIcon, SettingsIcon } from '~/ui/Icons';
@@ -35,6 +36,8 @@ import { setVisibleAccounts } from '~/redux/providers/personalActions';
 
 import styles from './wallet.css';
 
+const accountsHistory = HistoryStore.get('accounts');
+
 class WalletContainer extends Component {
   static propTypes = {
     netVersion: PropTypes.string.isRequired
@@ -80,6 +83,10 @@ class Wallet extends Component {
   };
 
   componentDidMount () {
+    const { address } = this.props;
+
+    accountsHistory.add(address, 'wallet');
+
     this.setVisibleAccounts();
   }
 

js/src/views/index.js

@@ -14,11 +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/>.
 
-export Address from './Address';
 export Application from './Application';
-export Contract from './Contract';
 export Dapp from './Dapp';
 export Dapps from './Dapps';
 export ParityBar from './ParityBar';
-export Wallet from './Wallet';
 export Web from './Web';