Add routing to account on notification click

js/src/index.js

@@ -67,7 +67,7 @@ if (window.location.hash && window.location.hash.indexOf(AUTH_HASH) === 0) {
 const api = new SecureApi(`ws://${parityUrl}`, token);
 ContractInstances.create(api);
 
-const store = initStore(api);
+const store = initStore(api, hashHistory);
 store.dispatch({ type: 'initAll', api });
 store.dispatch(setApi(api));
 

js/src/redux/middleware.js

@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 import thunk from 'redux-thunk';
+import { routerMiddleware } from 'react-router-redux';
 
 import ErrorsMiddleware from '~/ui/Errors/middleware';
 import SettingsMiddleware from '~/views/Settings/middleware';
@@ -22,12 +23,13 @@ import SignerMiddleware from './providers/signerMiddleware';
 import statusMiddleware from '~/views/Status/middleware';
 import CertificationsMiddleware from './providers/certifications/middleware';
 
-export default function (api) {
+export default function (api, browserHistory) {
   const errors = new ErrorsMiddleware();
   const signer = new SignerMiddleware(api);
   const settings = new SettingsMiddleware();
   const status = statusMiddleware();
   const certifications = new CertificationsMiddleware();
+  const routeMiddleware = routerMiddleware(browserHistory);
 
   const middleware = [
     settings.toMiddleware(),
@@ -36,5 +38,5 @@ export default function (api) {
     certifications.toMiddleware()
   ];
 
-  return middleware.concat(status, thunk);
+  return middleware.concat(status, routeMiddleware, thunk);
 }

js/src/redux/providers/balancesActions.js

@@ -16,6 +16,7 @@
 
 import { range, uniq, isEqual } from 'lodash';
 import BigNumber from 'bignumber.js';
+import { push } from 'react-router-redux';
 
 import { hashToImageUrl } from './imagesReducer';
 import { setAddressImage } from './imagesActions';
@@ -68,7 +69,12 @@ function setBalances (_balances) {
             const account = accounts[address];
             const txValue = value.minus(oldValue);
 
-            notifyTransaction(account, token, txValue);
+            const redirectToAccount = () => {
+              const route = `/account/${account.address}`;
+              dispatch(push(route));
+            };
+
+            notifyTransaction(account, token, txValue, redirectToAccount);
           }
 
           nextTokens[tokenIndex] = { token, value };
@@ -177,14 +183,14 @@ export function fetchBalances (_addresses) {
 
     const fullFetch = addresses.length === 1;
 
-    const fetchedAddresses = uniq(addresses.concat(Object.keys(accounts)));
+    const addressesToFetch = uniq(addresses.concat(Object.keys(accounts)));
 
     return Promise
-      .all(fetchedAddresses.map((addr) => fetchAccount(addr, api, fullFetch)))
+      .all(addressesToFetch.map((addr) => fetchAccount(addr, api, fullFetch)))
       .then((accountsBalances) => {
         const balances = {};
 
-        fetchedAddresses.forEach((addr, idx) => {
+        addressesToFetch.forEach((addr, idx) => {
           balances[addr] = accountsBalances[idx];
         });
 
@@ -200,10 +206,12 @@ export function fetchBalances (_addresses) {
 export function updateTokensFilter (_addresses, _tokens) {
   return (dispatch, getState) => {
     const { api, balances, personal } = getState();
-    const { visibleAccounts } = personal;
+    const { visibleAccounts, accounts } = personal;
     const { tokensFilter } = balances;
 
-    const addresses = uniq(_addresses || visibleAccounts || []).sort();
+    const addressesToFetch = uniq(visibleAccounts.concat(Object.keys(accounts)));
+    const addresses = uniq(_addresses || addressesToFetch || []).sort();
+
     const tokens = _tokens || Object.values(balances.tokens) || [];
     const tokenAddresses = tokens.map((t) => t.address).sort();
 
@@ -275,8 +283,10 @@ export function updateTokensFilter (_addresses, _tokens) {
 export function queryTokensFilter (tokensFilter) {
   return (dispatch, getState) => {
     const { api, personal, balances } = getState();
-    const { visibleAccounts } = personal;
+    const { visibleAccounts, accounts } = personal;
+
     const visibleAddresses = visibleAccounts.map((a) => a.toLowerCase());
+    const addressesToFetch = uniq(visibleAddresses.concat(Object.keys(accounts)));
 
     Promise
       .all([
@@ -291,18 +301,16 @@ export function queryTokensFilter (tokensFilter) {
           .concat(logsTo)
           .forEach((log) => {
             const tokenAddress = log.address;
+
             const fromAddress = '0x' + log.topics[1].slice(-40);
             const toAddress = '0x' + log.topics[2].slice(-40);
 
-            const fromIdx = visibleAddresses.indexOf(fromAddress);
-            const toIdx = visibleAddresses.indexOf(toAddress);
-
-            if (fromIdx > -1) {
-              addresses.push(visibleAccounts[fromIdx]);
+            if (addressesToFetch.includes(fromAddress)) {
+              addresses.push(fromAddress);
             }
 
-            if (toIdx > -1) {
-              addresses.push(visibleAccounts[toIdx]);
+            if (addressesToFetch.includes(toAddress)) {
+              addresses.push(toAddress);
             }
 
             tokenAddresses.push(tokenAddress);
@@ -323,9 +331,10 @@ export function queryTokensFilter (tokensFilter) {
 export function fetchTokensBalances (_addresses = null, _tokens = null) {
   return (dispatch, getState) => {
     const { api, personal, balances } = getState();
-    const { visibleAccounts } = personal;
+    const { visibleAccounts, accounts } = personal;
 
-    const addresses = _addresses || visibleAccounts;
+    const addressesToFetch = uniq(visibleAccounts.concat(Object.keys(accounts)));
+    const addresses = _addresses || addressesToFetch;
     const tokens = _tokens || Object.values(balances.tokens);
 
     if (addresses.length === 0) {

js/src/redux/providers/index.js

@@ -21,11 +21,11 @@ export Status from './status';
 
 export apiReducer from './apiReducer';
 export balancesReducer from './balancesReducer';
+export blockchainReducer from './blockchainReducer';
+export compilerReducer from './compilerReducer';
 export imagesReducer from './imagesReducer';
 export personalReducer from './personalReducer';
 export signerReducer from './signerReducer';
-export statusReducer from './statusReducer';
-export blockchainReducer from './blockchainReducer';
-export compilerReducer from './compilerReducer';
 export snackbarReducer from './snackbarReducer';
+export statusReducer from './statusReducer';
 export walletReducer from './walletReducer';

js/src/redux/reducers.js

@@ -17,7 +17,12 @@
 import { combineReducers } from 'redux';
 import { routerReducer } from 'react-router-redux';
 
-import { apiReducer, balancesReducer, blockchainReducer, compilerReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer, snackbarReducer, walletReducer } from './providers';
+import {
+  apiReducer, balancesReducer, blockchainReducer,
+  compilerReducer, imagesReducer, personalReducer,
+  signerReducer, statusReducer as nodeStatusReducer,
+  snackbarReducer, walletReducer
+} from './providers';
 import certificationsReducer from './providers/certifications/reducer';
 
 import errorReducer from '~/ui/Errors/reducers';

js/src/redux/store.js

@@ -32,9 +32,9 @@ const storeCreation = window.devToolsExtension
   ? window.devToolsExtension()(createStore)
   : createStore;
 
-export default function (api) {
+export default function (api, browserHistory) {
   const reducers = initReducers();
-  const middleware = initMiddleware(api);
+  const middleware = initMiddleware(api, browserHistory);
   const store = applyMiddleware(...middleware)(storeCreation)(reducers);
 
   new BalancesProvider(store, api).start();

js/src/util/notifications.js

@@ -16,13 +16,14 @@
 
 import Push from 'push.js';
 import BigNumber from 'bignumber.js';
+import { noop } from 'lodash';
 
 import { fromWei } from '~/api/util/wei';
 
 import ethereumIcon from '~/../assets/images/contracts/ethereum-black-64x64.png';
 import unkownIcon from '~/../assets/images/contracts/unknown-64x64.png';
 
-export function notifyTransaction (account, token, _value) {
+export function notifyTransaction (account, token, _value, onClick) {
   const name = account.name || account.address;
   const value = token.tag.toLowerCase() === 'eth'
     ? fromWei(_value)
@@ -38,6 +39,7 @@ export function notifyTransaction (account, token, _value) {
       x16: icon,
       x32: icon
     },
-    timeout: 5000
+    timeout: 5000,
+    onClick: onClick || noop
   });
 }