feat(neuron-ui): call transactions controller methods with remote module

Author: Keith-CY

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

@@ -20,9 +20,8 @@ import { MIN_CELL_WIDTH, Routes } from 'utils/const'
 import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
 
 const Addresses = ({
-  wallet: { id, addresses = [] },
+  wallet: { addresses = [] },
   settings: { showAddressBook = false },
-  dispatch,
   history,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
@@ -33,17 +32,14 @@ const Addresses = ({
   }, [showAddressBook, history])
 
   const { localDescription, onDescriptionPress, onDescriptionFieldBlur, onDescriptionChange } = useLocalDescription(
-    'address',
-    id,
     useMemo(
       () =>
         addresses.map(({ address: key = '', description = '' }) => ({
           key,
           description,
         })),
       [addresses]
-    ),
-    dispatch
+    )
   )
 
   const theme = getTheme()

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

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

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

@@ -193,9 +193,12 @@ export const useHandleSubmit = (
           },
         })
       }
-      res = await updateNetwork(id!, {
-        name,
-        remote,
+      res = await updateNetwork({
+        networkID: id!,
+        options: {
+          name,
+          remote,
+        },
       })
     }
     if (res && res.status) {

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

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

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 } from 'states/stateProvider/reducer'
-import actionCreators from 'states/stateProvider/actionCreators'
+import { AppActions, StateWithDispatch, NeuronWalletActions } from 'states/stateProvider/reducer'
 import chainState from 'states/initStates/chain'
 
 import { localNumberFormatter, uniformTimeFormatter } from 'utils/formatters'
+import { getTransaction } from 'services/remote'
 
 const MIN_CELL_WIDTH = 70
 
@@ -105,7 +105,16 @@ const Transaction = ({
       type: AppActions.CleanTransaction,
       payload: null,
     })
-    dispatch(actionCreators.getTransaction(walletID, match.params.hash))
+    getTransaction({ walletID, hash: match.params.hash }).then(res => {
+      if (res.status) {
+        dispatch({
+          type: NeuronWalletActions.UpdateTransaction,
+          payload: res.result,
+        })
+      } else {
+        // TODO: notification
+      }
+    })
   }, [match.params.hash, dispatch, walletID])
 
   const basicInfoItems = useMemo(

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

@@ -52,29 +52,18 @@ const onRenderHeader = ({ group }: any) => {
   )
 }
 
-const TransactionList = ({
-  walletID,
-  items = [],
-  dispatch,
-}: {
-  walletID: string
-  items: State.Transaction[]
-  dispatch: StateDispatch
-}) => {
+const TransactionList = ({ items = [] }: { walletID: string; items: State.Transaction[]; dispatch: StateDispatch }) => {
   const [t] = useTranslation()
 
   const { localDescription, onDescriptionPress, onDescriptionFieldBlur, onDescriptionChange } = useLocalDescription(
-    'transaction',
-    walletID,
     useMemo(
       () =>
         items.map(({ hash: key, description = '' }) => ({
           key,
           description,
         })),
       [items]
-    ),
-    dispatch
+    )
   )
 
   const transactionColumns: IColumn[] = useMemo(

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

@@ -4,15 +4,8 @@ import { WalletWizardPath } from 'components/WalletWizard'
 import { NeuronWalletActions, StateDispatch, AppActions } from 'states/stateProvider/reducer'
 import { actionCreators } from 'states/stateProvider/actionCreators'
 
-import UILayer, {
-  AppMethod,
-  ChainMethod,
-  TransactionsMethod,
-  WalletsMethod,
-  walletsCall,
-  transactionsCall,
-} from 'services/UILayer'
-import { initWindow } from 'services/remote'
+import UILayer, { AppMethod, ChainMethod, WalletsMethod, walletsCall } from 'services/UILayer'
+import { initWindow, getTransactionList, getTransaction } from 'services/remote'
 import {
   SystemScript as SystemScriptSubject,
   DataUpdate as DataUpdateSubject,
@@ -95,71 +88,6 @@ export const useChannelListeners = ({
       }
     })
 
-    UILayer.on(Channel.Transactions, (_e: Event, method: TransactionsMethod, args: ChannelResponse<any>) => {
-      if (args.status) {
-        switch (method) {
-          case TransactionsMethod.GetAllByKeywords: {
-            // TODO: verify the wallet id the transactions belong to
-            dispatch({
-              type: NeuronWalletActions.Chain,
-              payload: { transactions: { ...chain.transactions, ...args.result } },
-            })
-            break
-          }
-          case TransactionsMethod.Get: {
-            dispatch({
-              type: NeuronWalletActions.Chain,
-              payload: { transaction: args.result },
-            })
-            break
-          }
-          case TransactionsMethod.TransactionUpdated: {
-            const updatedTransaction: State.Transaction = args.result
-            if (
-              (!chain.transactions.items.length ||
-                updatedTransaction.timestamp === null ||
-                +(updatedTransaction.timestamp || updatedTransaction.createdAt) >
-                  +(chain.transactions.items[0].timestamp || chain.transactions.items[0].createdAt)) &&
-              chain.transactions.pageNo === 1
-            ) {
-              /**
-               * 1. transaction list is empty or the coming transaction is pending or the coming transaction is later than latest transaction in current list
-               * 2. the current page number is 1
-               */
-              const newTransactionItems = [updatedTransaction, ...chain.transactions.items].slice(
-                0,
-                chain.transactions.pageSize
-              )
-              dispatch({
-                type: NeuronWalletActions.Chain,
-                payload: { transactions: { ...chain.transactions, items: newTransactionItems } },
-              })
-            } else {
-              const newTransactionItems = [...chain.transactions.items]
-              const idx = newTransactionItems.findIndex(item => item.hash === updatedTransaction.hash)
-              if (idx >= 0) {
-                newTransactionItems[idx] = updatedTransaction
-                dispatch({
-                  type: NeuronWalletActions.Chain,
-                  payload: { transactions: { ...chain.transactions, items: newTransactionItems } },
-                })
-              }
-            }
-            if (chain.transaction.hash === updatedTransaction.hash) {
-              dispatch({
-                type: NeuronWalletActions.Chain,
-                payload: { transaction: updatedTransaction },
-              })
-            }
-            break
-          }
-          default: {
-            break
-          }
-        }
-      }
-    })
-
     UILayer.on(Channel.Wallets, (_e: Event, method: WalletsMethod, args: ChannelResponse<any>) => {
       if (args.status) {
         switch (method) {
@@ -334,11 +262,18 @@ export const useOnCurrentWalletChange = ({
   useEffect(() => {
     if (walletID) {
       walletsCall.getAllAddresses(walletID)
-      transactionsCall.getAllByKeywords({
+      getTransactionList({
         walletID,
         keywords: '',
         pageNo,
         pageSize,
+      }).then(res => {
+        if (res.status) {
+          dispatch({
+            type: NeuronWalletActions.UpdateTransactionList,
+            payload: res.result,
+          })
+        }
       })
     } else {
       initWindow()
@@ -387,13 +322,19 @@ export const useSubscription = ({
           break
         }
         case 'transaction': {
-          transactionsCall.getAllByKeywords({
+          getTransactionList({
             walletID,
             keywords,
             pageNo,
             pageSize,
+          }).then(res => {
+            if (res.status) {
+              dispatch({ type: NeuronWalletActions.UpdateTransactionList, payload: res.result })
+            } else {
+              // TODO: notification
+            }
           })
-          transactionsCall.get(walletID, txHash)
+          getTransaction({ walletID, hash: txHash })
           break
         }
         case 'wallet': {

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

@@ -35,25 +35,10 @@ export enum WalletsMethod {
   GetAllAddresses = 'getAllAddresses',
 }
 
-export enum TransactionsMethod {
-  GetAll = 'getAll',
-  GetAllByKeywords = 'getAllByKeywords',
-  Get = 'get',
-  UpdateDescription = 'updateDescription',
-  TransactionUpdated = 'transactionUpdated',
-}
-
 export enum HelpersMethod {
   GenerateMnemonic = 'generateMnemonic',
 }
 
-export interface GetTransactionsParams {
-  pageNo: number
-  pageSize: number
-  keywords?: string
-  walletID: string
-}
-
 const UILayer = (() => {
   if (window.bridge) {
     return new SyntheticEventEmitter(window.bridge.ipcRenderer)
@@ -87,16 +72,6 @@ export const appCalls = instantiateMethodCall(app) as {
   handleViewError: (errorMessage: string) => void
 }
 
-export const transactions = (method: TransactionsMethod, params: string | GetTransactionsParams) => {
-  UILayer.send(Channel.Transactions, method, params)
-}
-
-export const transactionsCall = instantiateMethodCall(transactions) as {
-  getAllByKeywords: (params: GetTransactionsParams) => void
-  get: (walletID: string, hash: string) => void
-  updateDescription: (params: { hash: string; description: string }) => void
-}
-
 export const wallets = (
   method: WalletsMethod,
   params: