fix: Use GlobalAlertDialog to replace Notification

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

@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useState } from 'react'
 import { AppActions, StateAction } from 'states/stateProvider/reducer'
-import { updateNervosDaoData, clearNervosDaoData } from 'states/stateProvider/actionCreators'
+import { updateNervosDaoData, clearNervosDaoData, showGlobalAlertDialog } from 'states/stateProvider/actionCreators'
 
 import { NavigateFunction } from 'react-router-dom'
 import { type CKBComponents } from '@ckb-lumos/lumos/rpc'
@@ -142,14 +142,11 @@ export const useOnWithdrawDialogSubmit = ({
           }
         })
         .catch((err: Error) => {
-          dispatch({
-            type: AppActions.AddNotification,
-            payload: {
-              type: 'alert',
-              timestamp: +new Date(),
-              content: err.message,
-            },
-          })
+          showGlobalAlertDialog({
+            type: 'failed',
+            message: err.message,
+            action: 'ok',
+          })(dispatch)
         })
     }
     setActiveRecord(null)
@@ -208,14 +205,11 @@ export const useOnActionClick = ({
               }
             })
             .catch((err: Error) => {
-              dispatch({
-                type: AppActions.AddNotification,
-                payload: {
-                  type: 'alert',
-                  timestamp: +new Date(),
-                  content: err.message,
-                },
-              })
+              showGlobalAlertDialog({
+                type: 'failed',
+                message: err.message,
+                action: 'ok',
+              })(dispatch)
             })
         } else {
           setActiveRecord(record)

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

@@ -1,7 +1,7 @@
 import React, { useReducer, useMemo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { destroyAssetAccount } from 'services/remote'
-import { useState as useGlobalState, useDispatch, AppActions } from 'states'
+import { useState as useGlobalState, useDispatch, AppActions, showGlobalAlertDialog } from 'states'
 import { UDTType, isSuccessResponse } from 'utils'
 import TextField from 'widgets/TextField'
 import Dialog from 'widgets/Dialog'
@@ -123,14 +123,11 @@ const SUDTUpdateDialog = ({
           },
         })
       } else {
-        globalDispatch({
-          type: AppActions.AddNotification,
-          payload: {
-            type: 'alert',
-            timestamp: +new Date(),
-            content: typeof res.message === 'string' ? res.message : res.message.content!,
-          },
-        })
+        showGlobalAlertDialog({
+          type: 'failed',
+          message: typeof res.message === 'string' ? res.message : res.message.content!,
+          action: 'ok',
+        })(globalDispatch)
       }
     })
   }, [globalDispatch, walletId, accountId])

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react'
-import { useState as useGlobalState, useDispatch, AppActions } from 'states'
+import { useState as useGlobalState, useDispatch, AppActions, showGlobalAlertDialog } from 'states'
 import { useTranslation } from 'react-i18next'
 import { useNavigate, useLocation } from 'react-router-dom'
 import Pagination from 'widgets/Pagination'
@@ -195,14 +195,11 @@ const SpecialAssetList = () => {
             setCells(items)
             setTotalCount(+count)
           } else {
-            dispatch({
-              type: AppActions.AddNotification,
-              payload: {
-                type: 'alert',
-                timestamp: +new Date(),
-                content: typeof res.message === 'string' ? res.message : res.message.content!,
-              },
-            })
+            showGlobalAlertDialog({
+              type: 'failed',
+              message: typeof res.message === 'string' ? res.message : res.message.content!,
+              action: 'ok',
+            })(dispatch)
           }
         })
         .then(() => {
@@ -280,10 +277,11 @@ const SpecialAssetList = () => {
       } = e.target
       const cell = cells.find(c => c.outPoint.txHash === txHash && c.outPoint.index === idx)
       if (!cell) {
-        dispatch({
-          type: AppActions.AddNotification,
-          payload: { type: 'alert', timestamp: +new Date(), content: 'Cannot find the cell' },
-        })
+        showGlobalAlertDialog({
+          type: 'failed',
+          message: 'Cannot find the cell',
+          action: 'ok',
+        })(dispatch)
         return
       }
       if (cell.customizedAssetInfo.type === 'NFT') {
@@ -322,14 +320,11 @@ const SpecialAssetList = () => {
               },
             })
           } else {
-            dispatch({
-              type: AppActions.AddNotification,
-              payload: {
-                type: 'alert',
-                timestamp: +new Date(),
-                content: typeof res.message === 'string' ? res.message : res.message.content!,
-              },
-            })
+            showGlobalAlertDialog({
+              type: 'failed',
+              message: typeof res.message === 'string' ? res.message : res.message.content!,
+              action: 'ok',
+            })(dispatch)
           }
         }
       switch (cell.customizedAssetInfo.lock) {
@@ -355,14 +350,11 @@ const SpecialAssetList = () => {
                   })
                 }
               } else {
-                dispatch({
-                  type: AppActions.AddNotification,
-                  payload: {
-                    type: 'alert',
-                    timestamp: +new Date(),
-                    content: typeof res.message === 'string' ? res.message : res.message.content!,
-                  },
-                })
+                showGlobalAlertDialog({
+                  type: 'failed',
+                  message: typeof res.message === 'string' ? res.message : res.message.content!,
+                  action: 'ok',
+                })(dispatch)
               }
             })
           } else {

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

@@ -81,15 +81,11 @@ export const addPopup = (text: string) => (dispatch: StateDispatch) => {
 
 export const addNotification = (message: State.Message<ErrorCode>) => (dispatch: StateDispatch) => {
   dispatch({
-    type: AppActions.AddNotification,
-    payload: message,
-  })
-}
-
-export const dismissNotification = (timestamp: number) => (dispatch: StateDispatch) => {
-  dispatch({
-    type: AppActions.DismissNotification,
-    payload: timestamp,
+    type: AppActions.UpdateGlobalAlertDialog,
+    payload: {
+      type: ['success', 'failed'].includes(message.type) ? message.type : 'warning',
+      message: message.content,
+    } as State.GlobalAlertDialog,
   })
 }
 

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

@@ -38,7 +38,6 @@ export enum AppActions {
   ClearSendState = 'clearSendState',
   UpdateMessage = 'updateMessage',
   SetGlobalDialog = 'setGlobalDialog',
-  AddNotification = 'addNotification',
   DismissNotification = 'dismissNotification',
   ClearNotificationsOfCode = 'clearNotificationsOfCode',
   ClearNotifications = 'clearNotifications',
@@ -84,7 +83,6 @@ export type StateAction =
   | { type: AppActions.ClearSendState }
   | { type: AppActions.UpdateMessage; payload: any }
   | { type: AppActions.SetGlobalDialog; payload: State.GlobalDialogType }
-  | { type: AppActions.AddNotification; payload: State.Message }
   | { type: AppActions.DismissNotification; payload: number } // payload: timestamp
   | { type: AppActions.ClearNotificationsOfCode; payload: ErrorCode } // payload: code
   | { type: AppActions.ClearNotifications }
@@ -318,15 +316,6 @@ export const reducer = produce((state: Draft<State.AppWithNeuronWallet>, action:
       state.app.globalDialog = action.payload
       break
     }
-    case AppActions.AddNotification: {
-      /**
-       * payload: { type, content }
-       */
-      // NOTICE: for simplicity, only one notification will be displayed
-      state.app.notifications.push(action.payload)
-      state.app.showTopAlert = true
-      break
-    }
     case AppActions.DismissNotification: {
       /**
        * payload: timestamp