Don't pop-up notifications after network switch (#4076)

* Better notifications

* Don't pollute with notifs if switched networks

* Better connection close/open events / No more notifs on change network

* PR Grumbles

* Add close and open events to HTTP // Add tests

* Fix tests

* WIP Signer Fix

* Fix Signer // Better reconnection handling

* PR Grumbles

* PR Grumbles

* Fixes wrong fetching of balances + Notifications

* Secure API WIP

* Updated Secure API Connection + Status

* Linting

* Linting

* Updated Secure API Logic

* Proper handling of token updates // Fixing poping notifications

* PR Grumbles

* PR Grumbles

* Fixing tests

js/src/api/api.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 EventEmitter from 'eventemitter3';
+
 import { Http, Ws } from './transport';
 import Contract from './contract';
 
@@ -22,8 +24,10 @@ import Subscriptions from './subscriptions';
 import util from './util';
 import { isFunction } from './util/types';
 
-export default class Api {
+export default class Api extends EventEmitter {
   constructor (transport) {
+    super();
+
     if (!transport || !isFunction(transport.execute)) {
       throw new Error('EthApi needs transport with execute() function defined');
     }

js/src/api/transport/http/http.js

@@ -51,14 +51,14 @@ export default class Http extends JsonRpcBase {
 
     return fetch(this._url, request)
       .catch((error) => {
-        this._connected = false;
+        this._setDisconnected();
         throw error;
       })
       .then((response) => {
-        this._connected = true;
+        this._setConnected();
 
         if (response.status !== 200) {
-          this._connected = false;
+          this._setDisconnected();
           this.error(JSON.stringify({ status: response.status, statusText: response.statusText }));
           console.error(`${method}(${JSON.stringify(params)}): ${response.status}: ${response.statusText}`);
 

js/src/api/transport/http/http.spec.js

@@ -37,6 +37,26 @@ describe('api/transport/Http', () => {
     });
   });
 
+  describe('transport emitter', () => {
+    it('emits close event', (done) => {
+      transport.once('close', () => {
+        done();
+      });
+
+      transport.execute('eth_call');
+    });
+
+    it('emits open event', (done) => {
+      mockHttp([{ method: 'eth_call', reply: { result: '' } }]);
+
+      transport.once('open', () => {
+        done();
+      });
+
+      transport.execute('eth_call');
+    });
+  });
+
   describe('transport', () => {
     const RESULT = ['this is some result'];
 

js/src/api/transport/jsonRpcBase.js

@@ -14,8 +14,12 @@
 // 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 class JsonRpcBase {
+import EventEmitter from 'eventemitter3';
+
+export default class JsonRpcBase extends EventEmitter {
   constructor () {
+    super();
+
     this._id = 1;
     this._debug = false;
     this._connected = false;
@@ -32,6 +36,20 @@ export default class JsonRpcBase {
     return json;
   }
 
+  _setConnected () {
+    if (!this._connected) {
+      this._connected = true;
+      this.emit('open');
+    }
+  }
+
+  _setDisconnected () {
+    if (this._connected) {
+      this._connected = false;
+      this.emit('close');
+    }
+  }
+
   get id () {
     return this._id;
   }

js/src/api/transport/ws/ws.js

@@ -22,7 +22,7 @@ import TransportError from '../error';
 
 /* global WebSocket */
 export default class Ws extends JsonRpcBase {
-  constructor (url, token, connect = true) {
+  constructor (url, token, autoconnect = true) {
     super();
 
     this._url = url;
@@ -32,14 +32,14 @@ export default class Ws extends JsonRpcBase {
     this._connecting = false;
     this._connected = false;
     this._lastError = null;
-    this._autoConnect = false;
+    this._autoConnect = autoconnect;
     this._retries = 0;
     this._reconnectTimeoutId = null;
 
     this._connectPromise = null;
     this._connectPromiseFunctions = {};
 
-    if (connect) {
+    if (autoconnect) {
       this.connect();
     }
   }
@@ -124,11 +124,8 @@ export default class Ws extends JsonRpcBase {
   }
 
   _onOpen = (event) => {
-    console.log('ws:onOpen');
-
-    this._connected = true;
+    this._setConnected();
     this._connecting = false;
-    this._autoConnect = true;
     this._retries = 0;
 
     Object.keys(this._messages)
@@ -142,7 +139,7 @@ export default class Ws extends JsonRpcBase {
   }
 
   _onClose = (event) => {
-    this._connected = false;
+    this._setDisconnected();
     this._connecting = false;
 
     event.timestamp = Date.now();
@@ -209,8 +206,8 @@ export default class Ws extends JsonRpcBase {
       if (result.error) {
         this.error(event.data);
 
-        // Don't print error if request rejected...
-        if (!/rejected/.test(result.error.message)) {
+        // Don't print error if request rejected or not is not yet up...
+        if (!/(rejected|not yet up)/.test(result.error.message)) {
           console.error(`${method}(${JSON.stringify(params)}): ${result.error.code}: ${result.error.message}`);
         }
 

js/src/api/transport/ws/ws.spec.js

@@ -21,6 +21,37 @@ describe('api/transport/Ws', () => {
   let transport;
   let scope;
 
+  describe('transport emitter', () => {
+    const connect = () => {
+      const scope = mockWs();
+      const transport = new Ws(TEST_WS_URL);
+
+      return { transport, scope };
+    };
+
+    it('emits open event', (done) => {
+      const { transport, scope } = connect();
+
+      transport.once('open', () => {
+        done();
+      });
+
+      scope.stop();
+    });
+
+    it('emits close event', (done) => {
+      const { transport, scope } = connect();
+
+      transport.once('open', () => {
+        scope.server.close();
+      });
+
+      transport.once('close', () => {
+        done();
+      });
+    });
+  });
+
   describe('transport', () => {
     let result;
 

js/src/config.js

@@ -17,12 +17,20 @@
 import LogLevel from 'loglevel';
 
 export const LOG_KEYS = {
+  Balances: {
+    key: 'balances',
+    desc: 'Balances fetching'
+  },
   TransferModalStore: {
-    path: 'modals/Transfer/store',
-    desc: 'Transfer Modal MobX Store'
+    key: 'modalsTransferStore',
+    desc: 'Transfer modal MobX store'
+  },
+  Signer: {
+    key: 'secureApi',
+    desc: 'The Signer and the Secure API'
   }
 };
 
 export const getLogger = (LOG_KEY) => {
-  return LogLevel.getLogger(LOG_KEY.path);
+  return LogLevel.getLogger(LOG_KEY.key);
 };