feat: call methods of app controller with remote module

Author: Keith-CY

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

@@ -12,8 +12,7 @@ import {
 } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
-
-import { appCalls } from 'services/UILayer'
+import { contextMenu } from 'services/remote'
 
 import { useLocalDescription } from 'utils/hooks'
 import { MIN_CELL_WIDTH, Routes } from 'utils/const'
@@ -162,7 +161,7 @@ const Addresses = ({
       columns={addressColumns.map(col => ({ ...col, name: t(col.name) }))}
       items={addresses}
       onItemContextMenu={item => {
-        appCalls.contextMenu({ type: 'addressList', id: item.identifier })
+        contextMenu({ type: 'addressList', id: item.identifier })
       }}
       styles={{
         contentWrapper: {

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

@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
-import { appCalls } from 'services/UILayer'
 import { Stack, Spinner } from 'office-ui-fabric-react'
+import { handleViewError } from 'services/remote'
 
 const handleError = (error: Error) => {
-  appCalls.handleViewError(error.toString())
+  handleViewError(error.toString())
   setTimeout(() => {
     window.location.reload()
   }, 0)
@@ -16,7 +16,6 @@ class ErrorBoundary extends Component<{ children: React.ReactChild }, { hasError
   }
 
   static getDerivedStateFromError(error: Error) {
-    window.alert(error.stack)
     return handleError(error)
   }
 

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

@@ -3,12 +3,12 @@ import { Stack, Toggle } from 'office-ui-fabric-react'
 import { useTranslation } from 'react-i18next'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
-import actionCreators from 'states/stateProvider/actionCreators'
+import { toggleAddressBook } from 'states/stateProvider/actionCreators'
 
 const GeneralSetting = ({ settings: { showAddressBook }, dispatch }: React.PropsWithoutRef<StateWithDispatch>) => {
   const [t] = useTranslation()
   const onToggle = useCallback(() => {
-    dispatch(actionCreators.toggleAddressBook())
+    dispatch(toggleAddressBook())
   }, [dispatch])
   return (
     <Stack tokens={{ childrenGap: 15 }}>

packages/neuron-ui/src/components/History/hooks.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
-import { NeuronWalletActions, AppActions } from 'states/stateProvider/reducer'
+import { AppActions } from 'states/stateProvider/reducer'
+import { updateTransactionList } from 'states/stateProvider/actionCreators/transactions'
 import { queryParsers } from 'utils/parser'
-import { getTransactionList } from 'services/remote'
 
 const backToTop = () => {
   const container = document.querySelector('main') as HTMLElement
@@ -31,16 +31,7 @@ export const useSearch = (search: string = '', walletID: string = '', dispatch:
       type: AppActions.CleanTransactions,
       payload: null,
     })
-    getTransactionList({ ...params, keywords: params.keywords, walletID }).then(res => {
-      if (res.status) {
-        dispatch({
-          type: NeuronWalletActions.UpdateTransactionList,
-          payload: res.result,
-        })
-      } else {
-        // TODO: notification
-      }
-    })
+    updateTransactionList({ ...params, keywords: params.keywords, walletID })(dispatch)
   }, [search, walletID, dispatch])
   return { keywords, onKeywordsChange, setKeywords }
 }

packages/neuron-ui/src/components/NetworkEditor/hooks.ts

@@ -1,8 +1,8 @@
 import { useState, useEffect, useMemo, useCallback } from 'react'
 
 import { AppActions, StateDispatch } from 'states/stateProvider/reducer'
-import { Message, MAX_NETWORK_NAME_LENGTH, Routes } from 'utils/const'
 import { createNetwork, updateNetwork } from 'services/remote'
+import { Message, MAX_NETWORK_NAME_LENGTH, Routes } from 'utils/const'
 
 import i18n from 'utils/i18n'
 

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

@@ -5,13 +5,12 @@ import { Stack, PrimaryButton, ChoiceGroup, IChoiceGroupOption } from 'office-ui
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import chainState from 'states/initStates/chain'
-import { appCalls } from 'services/UILayer'
-import { setCurrentNetowrk } from 'services/remote'
+import { setCurrentNetowrk, contextMenu } from 'services/remote'
 
 import { Routes } from 'utils/const'
 
 const onContextMenu = (id: string = '') => () => {
-  appCalls.contextMenu({ type: 'networkList', id })
+  contextMenu({ type: 'networkList', id })
 }
 
 const NetworkSetting = ({

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

@@ -21,9 +21,10 @@ import {
   MessageBarType,
 } from 'office-ui-fabric-react'
 
-import { StateWithDispatch, NeuronWalletActions } from 'states/stateProvider/reducer'
+import { StateWithDispatch } from 'states/stateProvider/reducer'
+import { updateTransactionList } from 'states/stateProvider/actionCreators'
 
-import { showErrorMessage, getTransactionList } from 'services/remote'
+import { showErrorMessage } from 'services/remote'
 
 import { localNumberFormatter, shannonToCKBFormatter, uniformTimeFormatter as timeFormatter } from 'utils/formatters'
 import { PAGE_SIZE, MIN_CELL_WIDTH } from 'utils/const'
@@ -99,18 +100,12 @@ const Overview = ({
   const minerInfoRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    getTransactionList({
+    updateTransactionList({
       pageNo: 1,
       pageSize: PAGE_SIZE,
       keywords: '',
       walletID: id,
-    }).then(res => {
-      if (res.status) {
-        dispatch({ type: NeuronWalletActions.UpdateTransactionList, payload: res.result })
-      } else {
-        // TODO: notification
-      }
-    })
+    })(dispatch)
   }, [id, dispatch])
 
   const onTransactionRowRender = useCallback((props?: IDetailsRowProps) => {

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

@@ -23,20 +23,9 @@ const PasswordRequest = ({
   }, [dispatch])
 
   const onConfirm = useCallback(() => {
-    const params = { id: walletID, password }
     switch (actionType) {
-      case 'delete': {
-        dispatch(actionCreators.deleteWallet(params))
-        break
-      }
-      case 'backup': {
-        dispatch(actionCreators.backupWallet(params))
-        break
-      }
       case 'send': {
-        dispatch(
-          actionCreators.submitTransaction(txID, walletID, outputs, description, password, priceToFee(price, cycles))
-        )
+        submitTransaction(txID, walletID, outputs, description, password, priceToFee(price, cycles))(dispatch)
         break
       }
       default: {

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

@@ -3,11 +3,11 @@ import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Stack, DetailsList, Text, DetailsListLayoutMode, CheckboxVisibility, IColumn } from 'office-ui-fabric-react'
 
-import { AppActions, StateWithDispatch, NeuronWalletActions } from 'states/stateProvider/reducer'
+import { AppActions, StateWithDispatch } from 'states/stateProvider/reducer'
+import { updateTransaction } from 'states/stateProvider/actionCreators'
 import chainState from 'states/initStates/chain'
 
 import { localNumberFormatter, uniformTimeFormatter } from 'utils/formatters'
-import { getTransaction } from 'services/remote'
 
 const MIN_CELL_WIDTH = 70
 
@@ -105,16 +105,7 @@ const Transaction = ({
       type: AppActions.CleanTransaction,
       payload: null,
     })
-    getTransaction({ walletID, hash: match.params.hash }).then(res => {
-      if (res.status) {
-        dispatch({
-          type: NeuronWalletActions.UpdateTransaction,
-          payload: res.result,
-        })
-      } else {
-        // TODO: notification
-      }
-    })
+    updateTransaction({ walletID, hash: match.params.hash })(dispatch)
   }, [match.params.hash, dispatch, walletID])
 
   const basicInfoItems = useMemo(

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

@@ -14,8 +14,8 @@ import {
 import { FormUp as ExpandIcon } from 'grommet-icons'
 
 import { StateDispatch } from 'states/stateProvider/reducer'
+import { contextMenu } from 'services/remote'
 
-import { appCalls } from 'services/UILayer'
 import { useLocalDescription } from 'utils/hooks'
 import { shannonToCKBFormatter, uniformTimeFormatter as timeFormatter, uniformTimeFormatter } from 'utils/formatters'
 import { registerIcons } from 'utils/icons'
@@ -190,7 +190,7 @@ const TransactionList = ({ items = [] }: { walletID: string; items: State.Transa
       checkboxVisibility={CheckboxVisibility.hidden}
       onItemContextMenu={item => {
         if (item) {
-          appCalls.contextMenu({ type: 'transactionList', id: item.hash })
+          contextMenu({ type: 'transactionList', id: item.hash })
         }
       }}
       styles={{

packages/neuron-ui/src/components/WalletEditor/hooks.ts

@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback } from 'react'
-import actionCreators from 'states/stateProvider/actionCreators'
+import { updateWallet } from 'states/stateProvider/actionCreators'
 import { StateDispatch } from 'states/stateProvider/reducer'
 import i18n from 'utils/i18n'
 
@@ -37,12 +37,10 @@ export const useInputs = ({ name }: ReturnType<typeof useWalletEditor>) => {
 
 export const useOnConfirm = (name: string = '', id: string = '', dispatch: StateDispatch) => {
   return useCallback(() => {
-    dispatch(
-      actionCreators.updateWallet({
-        id,
-        name,
-      })
-    )
+    updateWallet({
+      id,
+      name,
+    })(dispatch)
   }, [name, id, dispatch])
 }
 

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

@@ -4,11 +4,11 @@ import { useTranslation } from 'react-i18next'
 import { Stack, PrimaryButton, ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
-import actionCreators from 'states/stateProvider/actionCreators'
+import { activateWallet } from 'states/stateProvider/actionCreators'
 
 import { WalletWizardPath } from 'components/WalletWizard'
 
-import { appCalls } from 'services/UILayer'
+import { contextMenu } from 'services/remote'
 import { Routes, MnemonicAction } from 'utils/const'
 
 const buttons = [
@@ -32,14 +32,14 @@ const WalletSetting = ({
   const onChange = useCallback(
     (_e, option) => {
       if (option) {
-        dispatch(actionCreators.activateWallet(option.key))
+        activateWallet(option.key)(dispatch)
       }
     },
     [dispatch]
   )
   const onContextMenu = useCallback(
     (id: string = '') => () => {
-      appCalls.contextMenu({ type: 'walletList', id })
+      contextMenu({ type: 'walletList', id })
     },
     []
   )