feat(neuron-ui): prevent updating tx and addr list when user is editing the description

Author: Keith-CY

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

@@ -20,7 +20,7 @@ import { onRenderRow } from 'utils/fabricUIRender'
 
 const Addresses = ({
   app: {
-    loadings: { addressList: isLoading, updateDescription: isUpdatingDescription },
+    loadings: { addressList: isLoading },
   },
   wallet: { addresses = [], id: walletID },
   settings: { showAddressBook = false },
@@ -98,10 +98,6 @@ const Addresses = ({
                 onBlur={isSelected ? onDescriptionFieldBlur(item.address, item.description) : undefined}
                 onKeyPress={isSelected ? onDescriptionPress(item.address, item.description) : undefined}
                 onChange={isSelected ? onDescriptionChange(item.address) : undefined}
-                disabled={isSelected && isUpdatingDescription}
-                iconProps={{
-                  iconName: isSelected && isUpdatingDescription ? 'Updating' : '',
-                }}
                 readOnly={!isSelected}
                 styles={{
                   root: {
@@ -110,7 +106,7 @@ const Addresses = ({
                   fieldGroup: {
                     backgroundColor: isSelected ? '#fff' : 'transparent',
                     borderColor: 'transparent',
-                    border: isSelected ? '1px solid' : 'none',
+                    border: isSelected ? `1px solid ${semanticColors.inputBorder}!important` : 'none',
                   },
                 }}
               />
@@ -161,8 +157,7 @@ const Addresses = ({
       localDescription,
       onDescriptionFieldBlur,
       onDescriptionPress,
-      // onDescriptionFocus,
-      isUpdatingDescription,
+      onDescriptionSelected,
       t,
       semanticColors,
     ]

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

@@ -14,7 +14,7 @@ import { useSearch } from './hooks'
 const History = ({
   app: {
     tipBlockNumber: chainBlockNumber,
-    loadings: { transactionList: isLoading, updateDescription: isUpdatingDescription },
+    loadings: { transactionList: isLoading },
   },
   wallet: { id },
   chain: {
@@ -54,7 +54,6 @@ const History = ({
         </Stack>
         <TransactionList
           isLoading={isLoading}
-          isUpdatingDescription={isUpdatingDescription}
           walletID={id}
           items={items}
           tipBlockNumber={tipBlockNumber}
@@ -87,7 +86,6 @@ const History = ({
     onKeywordsChange,
     onSearch,
     isLoading,
-    isUpdatingDescription,
     id,
     items,
     tipBlockNumber,

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

@@ -26,6 +26,7 @@ import { onRenderRow } from 'utils/fabricUIRender'
 import { CONFIRMATION_THRESHOLD } from 'utils/const'
 
 const theme = getTheme()
+const { semanticColors } = theme
 
 const MIN_CELL_WIDTH = 50
 
@@ -53,14 +54,12 @@ const onRenderHeader = ({ group }: any) => {
 
 const TransactionList = ({
   isLoading = false,
-  isUpdatingDescription = false,
   items = [],
   walletID,
   tipBlockNumber,
   dispatch,
 }: {
   isLoading?: boolean
-  isUpdatingDescription?: boolean
   walletID: string
   items: State.Transaction[]
   tipBlockNumber: string
@@ -184,17 +183,13 @@ const TransactionList = ({
                   onBlur={isSelected ? onDescriptionFieldBlur(item.hash, item.description) : undefined}
                   onKeyPress={isSelected ? onDescriptionPress(item.hash, item.description) : undefined}
                   onChange={isSelected ? onDescriptionChange(item.hash) : undefined}
-                  disabled={isSelected && isUpdatingDescription}
-                  iconProps={{
-                    iconName: isSelected && isUpdatingDescription ? 'Updating' : '',
-                  }}
                   borderless
                   readOnly={!isSelected}
                   styles={{
                     fieldGroup: {
                       backgroundColor: isSelected ? '#fff' : 'transparent',
                       borderColor: 'transparent',
-                      border: isSelected ? '1px solid' : 'none',
+                      border: isSelected ? `1px solid ${semanticColors.inputBorder}!important` : 'none',
                     },
                   }}
                 />
@@ -234,7 +229,6 @@ const TransactionList = ({
       onDescriptionFieldBlur,
       onDescriptionPress,
       onDescriptionSelected,
-      isUpdatingDescription,
       t,
     ]
   )

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

@@ -116,11 +116,13 @@ export const useOnCurrentWalletChange = ({
 export const useSubscription = ({
   walletID,
   chain,
+  isAllowedToFetchList,
   history,
   dispatch,
 }: {
   walletID: string
   chain: State.Chain
+  isAllowedToFetchList: boolean
   history: any
   dispatch: StateDispatch
 }) => {
@@ -139,10 +141,16 @@ export const useSubscription = ({
       }
       switch (dataType) {
         case 'address': {
+          if (!isAllowedToFetchList) {
+            break
+          }
           updateAddressListAndBalance(walletID)(dispatch)
           break
         }
         case 'transaction': {
+          if (!isAllowedToFetchList) {
+            break
+          }
           updateTransactionList({
             walletID,
             keywords,
@@ -239,7 +247,7 @@ export const useSubscription = ({
       syncedBlockNumberSubscription.unsubscribe()
       commandSubscription.unsubscribe()
     }
-  }, [walletID, pageNo, pageSize, keywords, history, dispatch])
+  }, [walletID, pageNo, pageSize, keywords, isAllowedToFetchList, history, dispatch])
 }
 
 export default {

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

@@ -115,6 +115,7 @@ const MainContent = ({
 }: React.PropsWithoutRef<{ dispatch: StateDispatch } & RouteComponentProps>) => {
   const neuronWalletState = useState()
   const {
+    app: { isAllowedToFetchList = true },
     wallet: { id: walletID = '' },
     chain,
     settings: { networks = [] },
@@ -125,6 +126,7 @@ const MainContent = ({
   useSubscription({
     walletID,
     chain,
+    isAllowedToFetchList,
     history,
     dispatch,
   })

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

@@ -37,10 +37,10 @@ const appState: State.App = {
     sending: false,
     addressList: false,
     transactionList: false,
-    updateDescription: false,
   },
   showTopAlert: false,
   showAllNotifications: false,
+  isAllowedToFetchList: true,
 }
 
 export default appState

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

@@ -100,11 +100,19 @@ export const toggleAllNotificationVisibility = (show?: boolean) => (dispatch: St
   })
 }
 
+export const toggleIsAllowedToFetchList = (allowed?: boolean) => (dispatch: StateDispatch) => {
+  dispatch({
+    type: AppActions.ToggleIsAllowedToFetchList,
+    payload: allowed,
+  })
+}
+
 export default {
   initAppState,
   addNotification,
   addPopup,
   dismissNotification,
   toggleTopAlertVisibility,
   toggleAllNotificationVisibility,
+  toggleIsAllowedToFetchList,
 }

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

@@ -1,4 +1,4 @@
-import { NeuronWalletActions, AppActions, StateDispatch } from 'states/stateProvider/reducer'
+import { NeuronWalletActions, StateDispatch } from 'states/stateProvider/reducer'
 import {
   GetTransactionListParams,
   getTransactionList,
@@ -23,12 +23,6 @@ export const updateTransactionList = (params: GetTransactionListParams) => (disp
 export const updateTransactionDescription = (params: Controller.UpdateTransactionDescriptionParams) => (
   dispatch: StateDispatch
 ) => {
-  dispatch({
-    type: AppActions.UpdateLoadings,
-    payload: {
-      updateDescription: true,
-    },
-  })
   const descriptionParams = {
     hash: params.hash,
     description: params.description,
@@ -37,25 +31,16 @@ export const updateTransactionDescription = (params: Controller.UpdateTransactio
     type: NeuronWalletActions.UpdateTransactionDescription,
     payload: descriptionParams,
   }) // update local description before remote description to avoid the flicker on the field
-  updateRemoteTransactionDescription(params)
-    .then(res => {
-      if (res.status) {
-        dispatch({
-          type: NeuronWalletActions.UpdateTransactionDescription,
-          payload: descriptionParams,
-        })
-      } else {
-        addNotification(failureResToNotification(res))(dispatch)
-      }
-    })
-    .finally(() => {
+  updateRemoteTransactionDescription(params).then(res => {
+    if (res.status) {
       dispatch({
-        type: AppActions.UpdateLoadings,
-        payload: {
-          updateDescription: false,
-        },
+        type: NeuronWalletActions.UpdateTransactionDescription,
+        payload: descriptionParams,
       })
-    })
+    } else {
+      addNotification(failureResToNotification(res))(dispatch)
+    }
+  })
 }
 
 export default {

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

@@ -203,12 +203,6 @@ export const updateAddressListAndBalance = (params: Controller.GetAddressesByWal
 export const updateAddressDescription = (params: Controller.UpdateAddressDescriptionParams) => (
   dispatch: StateDispatch
 ) => {
-  dispatch({
-    type: AppActions.UpdateLoadings,
-    payload: {
-      updateDescription: true,
-    },
-  })
   const descriptionParams = {
     address: params.address,
     description: params.description,
@@ -217,25 +211,16 @@ export const updateAddressDescription = (params: Controller.UpdateAddressDescrip
     type: NeuronWalletActions.UpdateAddressDescription,
     payload: descriptionParams,
   })
-  updateRemoteAddressDescription(params)
-    .then(res => {
-      if (res.status) {
-        dispatch({
-          type: NeuronWalletActions.UpdateAddressDescription,
-          payload: descriptionParams,
-        })
-      } else {
-        addNotification(failureResToNotification(res))(dispatch)
-      }
-    })
-    .finally(() => {
+  updateRemoteAddressDescription(params).then(res => {
+    if (res.status) {
       dispatch({
-        type: AppActions.UpdateLoadings,
-        payload: {
-          updateDescription: false,
-        },
+        type: NeuronWalletActions.UpdateAddressDescription,
+        payload: descriptionParams,
       })
-    })
+    } else {
+      addNotification(failureResToNotification(res))(dispatch)
+    }
+  })
 }
 
 export const deleteWallet = (params: Controller.DeleteWalletParams) => (dispatch: StateDispatch) => {

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

@@ -47,6 +47,7 @@ export enum AppActions {
   PopOut = 'popOut',
   ToggleTopAlertVisibility = 'toggleTopAlertVisibility',
   ToggleAllNotificationVisibility = 'toggleAllNotificationVisibility',
+  ToggleIsAllowedToFetchList = 'toggleIsAllowedToFetchList',
   Ignore = 'ignore',
 }
 
@@ -538,6 +539,15 @@ export const reducer = (
         },
       }
     }
+    case AppActions.ToggleIsAllowedToFetchList: {
+      return {
+        ...state,
+        app: {
+          ...app,
+          isAllowedToFetchList: payload === undefined ? !app.isAllowedToFetchList : payload,
+        },
+      }
+    }
     default: {
       return state
     }