Notify user on new transaction #2556

js/package.json

@@ -144,6 +144,7 @@
     "mobx-react-devtools": "4.2.10",
     "moment": "2.17.0",
     "phoneformat.js": "1.0.3",
+    "push.js": "0.0.11",
     "qs": "6.3.0",
     "react": "15.4.1",
     "react-ace": "4.1.0",

js/src/redux/providers/balancesActions.js

@@ -15,11 +15,13 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import { range, uniq, isEqual } from 'lodash';
+import BigNumber from 'bignumber.js';
 
 import { hashToImageUrl } from './imagesReducer';
 import { setAddressImage } from './imagesActions';
 
 import * as ABIS from '~/contracts/abi';
+import { notifyTransaction } from '~/util/notifications';
 import imagesEthereum from '../../../assets/images/contracts/ethereum-black-64x64.png';
 
 const ETH = {
@@ -28,7 +30,59 @@ const ETH = {
   image: imagesEthereum
 };
 
-export function setBalances (balances) {
+function setBalances (_balances) {
+  return (dispatch, getState) => {
+    const state = getState();
+
+    const accounts = state.personal.accounts;
+    const nextBalances = _balances;
+    const prevBalances = state.balances.balances;
+    const balances = { ...prevBalances };
+
+    Object.keys(nextBalances).forEach((address) => {
+      if (!balances[address]) {
+        balances[address] = Object.assign({}, nextBalances[address]);
+        return;
+      }
+
+      const balance = Object.assign({}, balances[address]);
+      const { tokens, txCount = balance.txCount } = nextBalances[address];
+      const nextTokens = [].concat(balance.tokens);
+
+      tokens.forEach((t) => {
+        const { token, value } = t;
+        const { tag } = token;
+
+        const tokenIndex = nextTokens.findIndex((tok) => tok.token.tag === tag);
+
+        if (tokenIndex === -1) {
+          nextTokens.push({
+            token,
+            value
+          });
+        } else {
+          const oldValue = nextTokens[tokenIndex].value;
+
+          // If received a token/eth (old value < new value), notify
+          if (oldValue.lt(value) && accounts[address]) {
+            const account = accounts[address];
+            const txValue = value.minus(oldValue);
+
+            notifyTransaction(account, token, txValue);
+          }
+
+          nextTokens[tokenIndex] = { token, value };
+        }
+      });
+
+      balances[address] = { txCount: txCount || new BigNumber(0), tokens: nextTokens };
+    });
+
+    dispatch(_setBalances(balances));
+  };
+}
+
+function _setBalances (balances) {
   return {
     type: 'setBalances',
     balances

js/src/redux/providers/balancesReducer.js

@@ -15,7 +15,6 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import { handleActions } from 'redux-actions';
-import BigNumber from 'bignumber.js';
 
 const initialState = {
   balances: {},
@@ -26,39 +25,7 @@ const initialState = {
 
 export default handleActions({
   setBalances (state, action) {
-    const nextBalances = action.balances;
-    const prevBalances = state.balances;
-    const balances = { ...prevBalances };
-
-    Object.keys(nextBalances).forEach((address) => {
-      if (!balances[address]) {
-        balances[address] = Object.assign({}, nextBalances[address]);
-        return;
-      }
-
-      const balance = Object.assign({}, balances[address]);
-      const { tokens, txCount = balance.txCount } = nextBalances[address];
-      const nextTokens = [].concat(balance.tokens);
-
-      tokens.forEach((t) => {
-        const { token, value } = t;
-        const { tag } = token;
-
-        const tokenIndex = nextTokens.findIndex((tok) => tok.token.tag === tag);
-
-        if (tokenIndex === -1) {
-          nextTokens.push({
-            token,
-            value
-          });
-        } else {
-          nextTokens[tokenIndex] = { token, value };
-        }
-      });
-
-      balances[address] = Object.assign({}, { txCount: txCount || new BigNumber(0), tokens: nextTokens });
-    });
-
+    const { balances } = action;
     return Object.assign({}, state, { balances });
   },
 

js/src/util/notifications.js

@@ -0,0 +1,43 @@
+// Copyright 2015, 2016 Ethcore (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 Push from 'push.js';
+import BigNumber from 'bignumber.js';
+
+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) {
+  const name = account.name || account.address;
+  const value = token.tag.toLowerCase() === 'eth'
+    ? fromWei(_value)
+    : _value.div(new BigNumber(token.format || 1));
+
+  const icon = token.tag.toLowerCase() === 'eth'
+    ? ethereumIcon
+    : (token.image || unkownIcon);
+
+  Push.create(`${name}`, {
+    body: `You just received ${value.toFormat()} ${token.tag.toUpperCase()}`,
+    icon: {
+      x16: icon,
+      x32: icon
+    },
+    timeout: 5000
+  });
+}