feat(neuron-ui): update the cycles on the outputs changing

Author: Keith-CY

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

@@ -2,12 +2,16 @@ import React, { useCallback, useEffect } from 'react'
 import { IDropdownOption } from 'office-ui-fabric-react'
 
 import { AppActions, StateDispatch } from 'states/stateProvider/reducer'
+import { calculateCycles } from 'services/remote/wallets'
 
 import { Message } from 'utils/const'
 import { verifyAddress, verifyAmountRange } from 'utils/validators'
+import { CKBToShannonFormatter } from 'utils/formatters'
 import { TransactionOutput } from '.'
 
-const validateTransactionParams = ({ items, dispatch }: { items: TransactionOutput[]; dispatch: StateDispatch }) => {
+let cyclesTimer: ReturnType<typeof setTimeout>
+
+const validateTransactionParams = ({ items, dispatch }: { items: TransactionOutput[]; dispatch?: StateDispatch }) => {
   const errorAction = {
     type: AppActions.AddNotification,
     payload: {
@@ -17,7 +21,9 @@ const validateTransactionParams = ({ items, dispatch }: { items: TransactionOutp
     },
   }
   if (!items.length || !items[0].address) {
-    dispatch(errorAction)
+    if (dispatch) {
+      dispatch(errorAction)
+    }
     return false
   }
   const invalid = items.some(
@@ -42,7 +48,7 @@ const validateTransactionParams = ({ items, dispatch }: { items: TransactionOutp
       return false
     }
   )
-  if (invalid) {
+  if (invalid && dispatch) {
     dispatch(errorAction)
     return false
   }
@@ -84,6 +90,42 @@ const useRemoveTransactionOutput = (dispatch: StateDispatch) =>
     [dispatch]
   )
 
+const useOnTransactionChange = (walletID: string, items: TransactionOutput[], dispatch: StateDispatch) => {
+  useEffect(() => {
+    clearTimeout(cyclesTimer)
+    cyclesTimer = setTimeout(() => {
+      if (validateTransactionParams({ items })) {
+        calculateCycles({
+          walletID,
+          items: items.map(item => ({
+            address: item.address,
+            capacity: CKBToShannonFormatter(item.amount, item.unit),
+          })),
+        })
+          .then(response => {
+            if (response.status) {
+              if (Number.isNaN(+response.result)) {
+                throw new Error('Invalid Cycles')
+              }
+              dispatch({
+                type: AppActions.UpdateSendCycles,
+                payload: response.result,
+              })
+            } else {
+              throw new Error('Cycles Not Calculated')
+            }
+          })
+          .catch(() => {
+            dispatch({
+              type: AppActions.UpdateSendCycles,
+              payload: '0',
+            })
+          })
+      }
+    }, 300)
+  }, [walletID, items, dispatch])
+}
+
 const useOnSubmit = (items: TransactionOutput[], dispatch: StateDispatch) =>
   useCallback(
     (walletID: string = '') => () => {
@@ -188,6 +230,7 @@ export const useInitialize = (
   }, [address, dispatch, history, updateTransactionOutput])
 
   return {
+    useOnTransactionChange,
     updateTransactionOutput,
     onItemChange,
     onCapacityUnitChange,

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

@@ -45,6 +45,7 @@ const Send = ({
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps<{ address: string }>>) => {
   const { t } = useTranslation()
   const {
+    useOnTransactionChange,
     updateTransactionOutput,
     onItemChange,
     onSubmit,
@@ -54,6 +55,7 @@ const Send = ({
     onDescriptionChange,
     onClear,
   } = useInitialize(address, send.outputs, dispatch, history)
+  useOnTransactionChange(walletID, send.outputs, dispatch)
   const leftStackWidth = '70%'
   const labelWidth = '140px'
   const actionSpacer = (

packages/neuron-ui/src/services/remote/wallets.ts

@@ -42,6 +42,10 @@ export const updateAddressDescription = controllerMethodWrapper(CONTROLLER_NAME)
   controller => (params: Controller.UpdateAddressDescriptionParams) => controller.updateAddressDescription(params)
 )
 
+export const calculateCycles = controllerMethodWrapper(CONTROLLER_NAME)(
+  controller => (params: Controller.CalculateCycles) => controller.calculateCycles(params)
+)
+
 export default {
   updateWallet,
   getWalletList,
@@ -52,6 +56,7 @@ export default {
   backupWallet,
   getCurrentWallet,
   sendCapacity,
+  calculateCycles,
   getAddressesByWalletID,
   updateAddressDescription,
 }

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

@@ -26,6 +26,7 @@ export enum AppActions {
   RemoveSendOutput = 'removeSendOutput',
   UpdateSendOutput = 'updateSendOutput',
   UpdateSendPrice = 'updateSendPrice',
+  UpdateSendCycles = 'updateSendCycles',
   UpdateSendDescription = 'updateSendDescription',
   ClearSendState = 'clearSendState',
   UpdateSendLoading = 'updateSendLoading',
@@ -336,6 +337,21 @@ export const reducer = (
         },
       }
     }
+    case AppActions.UpdateSendCycles: {
+      /**
+       * payload: new cycles
+       */
+      return {
+        ...state,
+        app: {
+          ...app,
+          send: {
+            ...app.send,
+            cycles: payload,
+          },
+        },
+      }
+    }
     case AppActions.UpdateSendDescription: {
       /**
        * payload: new description

packages/neuron-ui/src/types/Controller/index.d.ts

@@ -45,6 +45,14 @@ declare namespace Controller {
     description: string
   }
 
+  interface CalculateCycles {
+    walletID: string
+    items: {
+      address: string
+      capacity: string
+    }
+  }
+
   type GetAddressesByWalletIDParams = string
   interface UpdateAddressDescriptionParams {
     walletID: string

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

@@ -392,6 +392,16 @@ export default class WalletsController {
     }
   }
 
+  @CatchControllerError
+  public static async calculateCycles(params: { walletID: string; items: { address: string; capacity: string }[] }) {
+    // TODO: This is a mock cycles
+    const cycles = params.items.filter(item => +item.capacity > 0).length.toString()
+    return {
+      status: ResponseCode.Success,
+      result: cycles,
+    }
+  }
+
   @CatchControllerError
   public static async updateAddressDescription({
     walletID,