fix(neuron-ui): disable the submit button once a sending request is sent

Add a timeout to avoid the block in ui process due to the transaction generation

Author: Keith-CY

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

@@ -8,7 +8,8 @@ import { priceToFee, CKBToShannonFormatter } from 'utils/formatters'
 
 const PasswordRequest = ({
   app: {
-    send: { txID, outputs, description, price, cycles, loading: isSending },
+    send: { txID, outputs, description, price, cycles },
+    loadings: { sending: isSending = false },
     passwordRequest: { walletID = '', actionType = null, password = '' },
   },
   settings: { wallets = [] },

packages/neuron-ui/src/states/initStates/app.ts

@@ -17,7 +17,6 @@ const appState: State.App = {
     price: '0',
     cycles: '0',
     description: '',
-    loading: false,
   },
   passwordRequest: {
     actionType: null,

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

@@ -148,39 +148,40 @@ export const sendTransaction = (params: Controller.SendTransaction) => (dispatch
       sending: true,
     },
   })
-  sendCapacity(params)
-    .then(res => {
-      if (res.status === 1) {
-        history.push(Routes.History)
-      } else {
-        // TODO: the pretreatment is unnecessary once the error code is implemented
-        addNotification({
-          type: 'alert',
-          timestamp: +new Date(),
-          code: res.status,
-          content: (typeof res.message === 'string' ? res.message : res.message.content || '').replace(
-            /(\b"|"\b)/g,
-            ''
-          ),
-          meta: typeof res.message === 'string' ? undefined : res.message.meta,
-        })(dispatch)
-      }
-      dispatch({
-        type: AppActions.DismissPasswordRequest,
-        payload: null,
+  setTimeout(() => {
+    sendCapacity(params)
+      .then(res => {
+        if (res.status === 1) {
+          history.push(Routes.History)
+        } else {
+          addNotification({
+            type: 'alert',
+            timestamp: +new Date(),
+            code: res.status,
+            content: (typeof res.message === 'string' ? res.message : res.message.content || '').replace(
+              /(\b"|"\b)/g,
+              ''
+            ),
+            meta: typeof res.message === 'string' ? undefined : res.message.meta,
+          })(dispatch)
+        }
+        dispatch({
+          type: AppActions.DismissPasswordRequest,
+          payload: null,
+        })
       })
-    })
-    .catch(err => {
-      console.warn(err)
-    })
-    .finally(() => {
-      dispatch({
-        type: AppActions.UpdateLoadings,
-        payload: {
-          sending: false,
-        },
+      .catch(err => {
+        console.warn(err)
+      })
+      .finally(() => {
+        dispatch({
+          type: AppActions.UpdateLoadings,
+          payload: {
+            sending: false,
+          },
+        })
       })
-    })
+  }, 0)
 }
 
 export const updateAddressListAndBalance = (params: Controller.GetAddressesByWalletIDParams) => (

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

@@ -29,7 +29,6 @@ export enum AppActions {
   UpdateSendCycles = 'updateSendCycles',
   UpdateSendDescription = 'updateSendDescription',
   ClearSendState = 'clearSendState',
-  UpdateSendLoading = 'updateSendLoading',
   UpdateMessage = 'updateMessage',
   AddNotification = 'addNotification',
   DismissNotification = 'dismissNotification',
@@ -366,18 +365,6 @@ export const reducer = (
         },
       }
     }
-    case AppActions.UpdateSendLoading: {
-      return {
-        ...state,
-        app: {
-          ...app,
-          send: {
-            ...app.send,
-            loading: payload,
-          },
-        },
-      }
-    }
     case AppActions.ClearSendState: {
       return {
         ...state,

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

@@ -61,7 +61,6 @@ declare namespace State {
     price: string
     cycles: string
     description: string
-    loading: boolean
   }
 
   interface Popup {