feat(neuron-ui): subscribe current network id from neuron-wallet in neuron-ui

Author: Keith-CY

packages/neuron-ui/src/components/ErrorBoundary/index.tsx

@@ -16,6 +16,7 @@ class ErrorBoundary extends Component<{ children: React.ReactChild }, { hasError
   }
 
   static getDerivedStateFromError(error: Error) {
+    window.alert(error.stack)
     return handleError(error)
   }
 

packages/neuron-ui/src/containers/Footer/index.tsx

@@ -67,9 +67,9 @@ const Footer = ({
   location: { pathname },
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const {
-    app: { tipBlockNumber },
-    chain: { networkID, connectionStatus, tipBlockNumber: syncedBlockNumber },
-    settings: { networks },
+    app: { tipBlockNumber = '0' },
+    chain: { networkID = '', connectionStatus = ConnectionStatus.Offline, tipBlockNumber: syncedBlockNumber = '0' },
+    settings: { networks = [] },
   } = useContext(NeuronWalletContext)
   const [t] = useTranslation()
 

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

@@ -19,6 +19,7 @@ import {
   SystemScript as SystemScriptSubject,
   DataUpdate as DataUpdateSubject,
   NetworkList as NetworkListSubject,
+  CurrentNetworkID as CurrentNetworkIDSubject,
 } from 'services/subjects'
 import { ckbCore, getTipBlockNumber, getBlockchainInfo } from 'services/chain'
 import { Routes, Channel, ConnectionStatus } from 'utils/const'
@@ -266,14 +267,6 @@ export const useChannelListeners = ({
     UILayer.on(Channel.Networks, (_e: Event, method: NetworksMethod, args: ChannelResponse<any>) => {
       if (args.status) {
         switch (method) {
-          case NetworksMethod.CurrentID: {
-            dispatch({
-              type: NeuronWalletActions.Chain,
-              payload: { networkID: args.result },
-            })
-            currentNetworkIDCache.save(args.result)
-            break
-          }
           case NetworksMethod.Create:
           case NetworksMethod.Update: {
             history.push(Routes.SettingsNetworks)
@@ -458,10 +451,18 @@ export const useSubscription = ({
       })
       networksCache.save(currentNetworkList)
     })
+    const currentNetworkIDSubscription = CurrentNetworkIDSubject.subscribe(({ currentNetworkID = '' }) => {
+      dispatch({
+        type: NeuronWalletActions.UpdateCurrentNetworkID,
+        payload: currentNetworkID,
+      })
+      currentNetworkIDCache.save(currentNetworkID)
+    })
     return () => {
       systemScriptSubscription.unsubscribe()
       dataUpdateSubscription.unsubscribe()
       networkListSubscription.unsubscribe()
+      currentNetworkIDSubscription.unsubscribe()
     }
   }, [walletID, pageNo, pageSize, keywords, txHash, dispatch])
 }

packages/neuron-ui/src/containers/Main/index.tsx

@@ -108,9 +108,9 @@ const MainContent = ({
 }: React.PropsWithoutRef<{ dispatch: StateDispatch } & RouteComponentProps>) => {
   const neuronWalletState = useState()
   const {
-    wallet: { id: walletID },
+    wallet: { id: walletID = '' },
     chain,
-    settings: { networks },
+    settings: { networks = [] },
   } = neuronWalletState
   const { networkID } = chain
   const [, i18n] = useTranslation()

packages/neuron-ui/src/services/subjects.ts

@@ -32,8 +32,15 @@ export const NetworkList = window.remote
     }>)
   : FallbackSubject
 
+export const CurrentNetworkID = window.remote
+  ? (window.remote.require(`${SUBJECT_PATH}/networks`).CurrentNetworkIDSubject as NeuronWalletSubject<{
+      currentNetworkID: string
+    }>)
+  : FallbackSubject
+
 export default {
   SystemScript,
   DataUpdate,
   NetworkList,
+  CurrentNetworkID,
 }

packages/neuron-ui/src/states/stateProvider/reducer.ts

@@ -8,6 +8,7 @@ export enum NeuronWalletActions {
   Settings = 'settings',
   UpdateCodeHash = 'updateCodeHash',
   UpdateNetworkList = 'updateNetworkList',
+  UpdateCurrentNetworkID = 'updateCurrentNetworkID',
 }
 export enum AppActions {
   UpdateTransactionID = 'updateTransactionID',
@@ -53,18 +54,16 @@ export const reducer = (
   switch (type) {
     // Actions of Neuron Wallet
     case NeuronWalletActions.Initiate: {
-      const { networks, networkID, wallets, wallet: incomingWallet } = payload
+      const { wallets, wallet: incomingWallet } = payload
       return {
         ...state,
         wallet: incomingWallet || wallet,
         chain: {
           ...state.chain,
-          networkID,
         },
         settings: {
           ...state.settings,
           wallets,
-          networks,
         },
       }
     }
@@ -147,6 +146,15 @@ export const reducer = (
         },
       }
     }
+    case NeuronWalletActions.UpdateCurrentNetworkID: {
+      return {
+        ...state,
+        chain: {
+          ...chain,
+          networkID: payload,
+        },
+      }
+    }
     // Actions of App
     case AppActions.UpdateTipBlockNumber: {
       /**

packages/neuron-ui/src/utils/initializeApp.ts

@@ -4,7 +4,6 @@ import initStates from 'states/initStates'
 import {
   wallets as walletsCache,
   addresses as addressesCache,
-  currentNetworkID as currentNetworkIDCache,
   currentWallet as currentWalletCache,
   systemScript as systemScriptCache,
   language as languageCache,
@@ -47,7 +46,6 @@ const intializeApp = ({
   dispatch({
     type: NeuronWalletActions.Initiate,
     payload: {
-      networkID,
       wallet: { ...wallet, balance: addressesToBalance(addresses), addresses },
       wallets,
     },

packages/neuron-wallet/src/controllers/app/index.ts

@@ -6,7 +6,6 @@ import app from '../../app'
 import { URL, contextMenuTemplate } from './options'
 
 import TransactionsController from '../transactions'
-import NetworksService from '../../services/networks'
 import WalletsService from '../../services/wallets'
 import NodeService from '../../services/node'
 import WalletsController from '../wallets'
@@ -18,7 +17,6 @@ import WindowManager from '../../models/window-manager'
 import i18n from '../../utils/i18n'
 import env from '../../env'
 
-const networksService = NetworksService.getInstance()
 const nodeService = NodeService.getInstance()
 
 @ControllerDecorator(Channel.App)
@@ -28,14 +26,12 @@ export default class AppController {
     const [
       currentWallet = null,
       wallets = [],
-      currentNetworkID = '',
       tipNumber = '0',
       connectionStatus = false,
       codeHash = '',
     ] = await Promise.all([
       walletsService.getCurrent(),
       walletsService.getAll(),
-      networksService.getCurrentID(),
       SyncInfoController.currentBlockNumber()
         .then(res => {
           if (res.status) {
@@ -77,7 +73,6 @@ export default class AppController {
       },
       wallets: [...wallets.map(({ name, id }) => ({ id, name }))],
       addresses,
-      currentNetworkID,
       transactions,
       locale,
       tipNumber,

packages/neuron-wallet/src/models/subjects/networks.ts

@@ -1,20 +1,10 @@
-import { Subject } from 'rxjs'
-import { debounceTime } from 'rxjs/operators'
-import DataUpdateSubject from './data-update'
+import { BehaviorSubject } from 'rxjs'
 
-const DEBOUNCE_TIME = 50
-
-export const NetworkListSubject = new Subject<{
+export const NetworkListSubject = new BehaviorSubject<{
   currentNetworkList: Controller.Network[]
-}>()
-export const CurrentNetworkIDSubject = new Subject<{ currentNetworkID: Controller.NetworkID }>()
-
-NetworkListSubject.pipe(debounceTime(DEBOUNCE_TIME)).subscribe(() => {
-  DataUpdateSubject.next({ dataType: 'network', actionType: 'update' })
-})
-
-CurrentNetworkIDSubject.pipe(debounceTime(DEBOUNCE_TIME)).subscribe(() => {
-  DataUpdateSubject.next({ dataType: 'network', actionType: 'update' })
+}>({ currentNetworkList: [] })
+export const CurrentNetworkIDSubject = new BehaviorSubject<{ currentNetworkID: Controller.NetworkID }>({
+  currentNetworkID: '',
 })
 
 export default {

packages/neuron-wallet/src/services/networks.ts

@@ -45,6 +45,20 @@ export default class NetworksService extends Store {
   constructor() {
     super('networks', 'index.json', JSON.stringify(env.presetNetworks))
 
+    this.getAll().then(currentNetworkList => {
+      if (currentNetworkList) {
+        NetworkListSubject.next({
+          currentNetworkList,
+        })
+      }
+    })
+
+    this.getCurrentID().then(currentNetworkID => {
+      if (currentNetworkID) {
+        CurrentNetworkIDSubject.next({ currentNetworkID })
+      }
+    })
+
     this.on(NetworksKey.List, async (_, currentNetworkList: NetworkWithID[] = []) => {
       NetworkListSubject.next({ currentNetworkList })
 
@@ -69,12 +83,6 @@ export default class NetworksService extends Store {
       NodeService.getInstance().setNetwork(currentNetwork.remote)
       networkSwitchSubject.next(currentNetwork)
     })
-
-    this.getCurrentID().then(currentID => {
-      if (currentID) {
-        this.emit(NetworksKey.Current, null, currentID)
-      }
-    })
   }
 
   public getAll = async () => {