feat: display disconnection errors and dismiss them on getting connec… (#1019)

* feat: display disconnection errors and dismiss them on getting connected.

UI will display the alerts of disconnection from neuron-wallet, and clear them once UI find that connection is built.
There may be some status conflicts between UI and wallet, but it's acceptable.

* test: fix the e2e test of notification

Author: Keith-CY

packages/neuron-ui/src/containers/Main/hooks.ts

@@ -21,7 +21,7 @@ import {
   Command as CommandSubject,
 } from 'services/subjects'
 import { ckbCore, getTipBlockNumber, getBlockchainInfo } from 'services/chain'
-import { ConnectionStatus } from 'utils/const'
+import { ConnectionStatus, ErrorCode } from 'utils/const'
 import {
   networks as networksCache,
   currentNetworkID as currentNetworkIDCache,
@@ -40,6 +40,10 @@ export const useSyncChainData = ({ chainURL, dispatch }: { chainURL: string; dis
             type: AppActions.UpdateTipBlockNumber,
             payload: BigInt(tipBlockNumber).toString(),
           })
+          dispatch({
+            type: AppActions.ClearNotificationsOfCode,
+            payload: ErrorCode.NodeDisconnected,
+          })
         })
         .catch((err: Error) => {
           if (process.env.NODE_ENV === 'development') {

packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts

@@ -76,9 +76,6 @@ export const addPopup = (text: string) => (dispatch: StateDispatch) => {
 }
 
 export const addNotification = (message: State.Message<ErrorCode>) => (dispatch: StateDispatch) => {
-  if (message && message.code === ErrorCode.NodeDisconnected) {
-    return
-  }
   dispatch({
     type: AppActions.AddNotification,
     payload: message,

packages/neuron-wallet/src/controllers/wallets.ts

@@ -20,7 +20,6 @@ import {
 import i18n from 'utils/i18n'
 import AddressService from 'services/addresses'
 import WalletCreatedSubject from 'models/subjects/wallet-created-subject'
-import logger from 'utils/logger'
 import { TransactionWithoutHash } from 'types/cell-types';
 
 export default class WalletsController {
@@ -368,26 +367,18 @@ export default class WalletsController {
     if (!params.fee || params.fee === '0') {
       feeRate = '1000'
     }
-    try {
-      const walletsService = WalletsService.getInstance()
-      const hash = await walletsService.sendCapacity(
-        params.walletID,
-        params.items,
-        params.password,
-        params.fee,
-        feeRate,
-        params.description
-      )
-      return {
-        status: ResponseCode.Success,
-        result: hash,
-      }
-    } catch (err) {
-      logger.error(`sendCapacity:`, err)
-      return {
-        status: err.code || ResponseCode.Fail,
-        message: `Error: "${err.message}"`,
-      }
+    const walletsService = WalletsService.getInstance()
+    const hash = await walletsService.sendCapacity(
+      params.walletID,
+      params.items,
+      params.password,
+      params.fee,
+      feeRate,
+      params.description
+    )
+    return {
+      status: ResponseCode.Success,
+      result: hash,
     }
   }
 
@@ -401,24 +392,16 @@ export default class WalletsController {
     if (!params) {
       throw new IsRequired('Parameters')
     }
-    try {
-      const walletsService = WalletsService.getInstance()
-      const hash = await walletsService.sendTx(
-        params.walletID,
-        params.tx,
-        params.password,
-        params.description
-      )
-      return {
-        status: ResponseCode.Success,
-        result: hash,
-      }
-    } catch (err) {
-      logger.error(`sendTx:`, err)
-      return {
-        status: err.code || ResponseCode.Fail,
-        message: `Error: "${err.message}"`,
-      }
+    const walletsService = WalletsService.getInstance()
+    const hash = await walletsService.sendTx(
+      params.walletID,
+      params.tx,
+      params.password,
+      params.description
+    )
+    return {
+      status: ResponseCode.Success,
+      result: hash,
     }
   }
 
@@ -435,24 +418,16 @@ export default class WalletsController {
     if (!params) {
       throw new IsRequired('Parameters')
     }
-    try {
-      const walletsService = WalletsService.getInstance()
-      const tx = await walletsService.generateTx(
-        params.walletID,
-        params.items,
-        params.fee,
-        params.feeRate,
-      )
-      return {
-        status: ResponseCode.Success,
-        result: tx,
-      }
-    } catch (err) {
-      logger.error(`generateTx:`, err)
-      return {
-        status: err.code || ResponseCode.Fail,
-        message: `Error: "${err.message}"`,
-      }
+    const walletsService = WalletsService.getInstance()
+    const tx = await walletsService.generateTx(
+      params.walletID,
+      params.items,
+      params.fee,
+      params.feeRate,
+    )
+    return {
+      status: ResponseCode.Success,
+      result: tx,
     }
   }
 
@@ -461,18 +436,11 @@ export default class WalletsController {
     if (!params) {
       throw new IsRequired('Parameters')
     }
-    try {
-      const walletsService = WalletsService.getInstance()
-      const cycles = await walletsService.computeCycles(params.walletID, params.capacities)
-      return {
-        status: ResponseCode.Success,
-        result: cycles,
-      }
-    } catch (err) {
-      return {
-        status: ResponseCode.Fail,
-        message: `Error: "${err.message}"`,
-      }
+    const walletsService = WalletsService.getInstance()
+    const cycles = await walletsService.computeCycles(params.walletID, params.capacities)
+    return {
+      status: ResponseCode.Success,
+      result: cycles,
     }
   }
 

packages/neuron-wallet/src/decorators/errors.ts

@@ -3,15 +3,15 @@ import logger from 'utils/logger'
 
 const NODE_DISCONNECTED_CODE = 104
 
-export const CatchControllerError = (_target: any, _name: string, descriptor: PropertyDescriptor) => {
+export const CatchControllerError = (target: any, name: string, descriptor: PropertyDescriptor) => {
   const originalMethod = descriptor.value
   return {
     ...descriptor,
     async value(...args: any[]) {
       try {
         return await originalMethod(...args)
       } catch (err) {
-        logger.error(`CatchControllerError:`, err)
+        logger.error(`${target.name}.${name}:`, err)
         if (err.code === 'ECONNREFUSED') {
           err.code = NODE_DISCONNECTED_CODE
         }

packages/neuron-wallet/tests-e2e/tests/notification.ts

@@ -2,7 +2,7 @@ import Application from '../application'
 import { createWallet } from '../operations'
 
 /**
- * 1. check the alert, it should be empty
+ * 1. check the alert, it should be disconnected to the network
  * 2. navigate to wallet settingsState
  * 3. delete a wallet
  * 4. input a wrong password
@@ -32,14 +32,15 @@ export default (app: Application) => {
 
   describe('Test alert message and notification', () => {
     const messages = {
+      disconnected: 'Fail to connect to the node',
       incorrectPassword: 'Password is incorrect',
     }
 
-    app.test('There is no alerts after the app launched', async () => {
+    app.test('It should have an alert message of disconnection', async () => {
       const { client } = app.spectron
       const alertComponent = await client.$('.ms-MessageBar-text')
       const msg = await client.elementIdText(alertComponent.value.ELEMENT)
-      expect(msg.value).toBe('')
+      expect(msg.value).toBe(messages.disconnected)
     })
 
     app.test('It should have an alert message of incorrect password', async () => {
@@ -56,12 +57,14 @@ export default (app: Application) => {
       expect(msg.value).toBe(messages.incorrectPassword)
     })
 
-    app.test('It should have a message in the notification', async () => {
+    app.test('It should have two messages in the notification', async () => {
       const { client } = app.spectron
       const messageComponents = await client.$$('.ms-Panel-content p')
       expect(messageComponents.length).toBe(Object.keys(messages).length)
       const incorrectPasswordMsg = await client.element(`//P[text()="${messages.incorrectPassword}"]`)
+      const disconnectMsg = await client.element(`//P[text()="${messages.disconnected}"]`)
       expect(incorrectPasswordMsg.state).not.toBe('failure')
+      expect(disconnectMsg.state).not.toBe('failed')
     })
 
     // TODO: dismiss a message
@@ -76,7 +79,8 @@ export default (app: Application) => {
       await app.waitUntilLoaded()
       app.wait(4000)
       const alertComponent = await client.$('.ms-MessageBar--error')
-      expect(alertComponent.state).toBe('failure')
+      const msg = await client.elementIdText(alertComponent.value.ELEMENT)
+      expect(msg.value).toBe(messages.disconnected)
     })
   })
 }