filter txs by account, refactor params fuction addPopup

src/components/Announcement/Popups/index.tsx

@@ -91,7 +91,12 @@ export default function Popups() {
         const { popupType } = item.templateBody
         if ((!isInit.current && popupType === PopupType.CENTER) || popupType !== PopupType.CENTER) {
           // only show PopupType.CENTER when the first visit app
-          addPopup(item, popupType, item.metaMessageId, null)
+          addPopup({
+            content: item,
+            popupType,
+            key: item.metaMessageId,
+            removeAfterMs: null,
+          })
         }
       })
       isInit.current = true
@@ -101,11 +106,21 @@ export default function Popups() {
       data.forEach(item => {
         switch (item.templateType) {
           case PrivateAnnouncementType.CROSS_CHAIN:
-            addPopup(item, PopupType.TOP_RIGHT, item.metaMessageId, 15_000)
+            addPopup({
+              content: item,
+              popupType: PopupType.TOP_RIGHT,
+              key: item.metaMessageId,
+              removeAfterMs: 15_000,
+            })
             break
           case PrivateAnnouncementType.DIRECT_MESSAGE: {
             const { templateBody, metaMessageId } = item
-            addPopup(item, templateBody.popupType, metaMessageId, undefined, account)
+            addPopup({
+              content: item,
+              popupType: templateBody.popupType,
+              key: metaMessageId,
+              account,
+            })
             break
           }
         }
@@ -116,7 +131,13 @@ export default function Popups() {
         switch (item.templateType) {
           case PrivateAnnouncementType.PRICE_ALERT:
             const mins = (Date.now() / 1000 - item.createdAt) / TIMES_IN_SECS.ONE_MIN
-            if (mins <= 5) addPopup(item, PopupType.TOP_RIGHT, item.metaMessageId, 15_000)
+            if (mins <= 5)
+              addPopup({
+                content: item,
+                popupType: PopupType.TOP_RIGHT,
+                key: item.metaMessageId,
+                removeAfterMs: 15_000,
+              })
             break
         }
       })

src/components/Announcement/type.ts

@@ -135,6 +135,7 @@ export enum PopupType {
 export type PopupContentTxn = {
   hash: string
   type: NotificationType
+  account: string
 }
 
 export type PopupContentSimple = {

src/state/application/hooks.ts

@@ -117,19 +117,20 @@ export function useRegisterCampaignSuccessModalToggle(): () => void {
   return useToggleModal(ApplicationModal.REGISTER_CAMPAIGN_SUCCESS)
 }
 
+type AddPopupPayload = {
+  content: PopupContent
+  popupType: PopupType
+  key?: string
+  removeAfterMs?: number | null
+  account?: string
+}
 // returns a function that allows adding a popup
-export function useAddPopup(): (
-  content: PopupContent,
-  popupType: PopupType,
-  key?: string,
-  removeAfterMs?: number | null,
-  account?: string,
-) => void {
+export function useAddPopup(): (data: AddPopupPayload) => void {
   const dispatch = useDispatch()
 
   return useCallback(
-    (content: PopupContent, popupType: PopupType, key?: string, removeAfterMs?: number | null, account?: string) => {
-      dispatch(addPopup({ content, key, popupType, removeAfterMs, account }))
+    (data: AddPopupPayload) => {
+      dispatch(addPopup(data))
     },
     [dispatch],
   )
@@ -140,7 +141,7 @@ export const useNotify = () => {
   const addPopup = useAddPopup()
   return useCallback(
     (data: PopupContentSimple, removeAfterMs: number | null | undefined = 4000) => {
-      addPopup(data, PopupType.SIMPLE, data.title + Math.random(), removeAfterMs)
+      addPopup({ content: data, popupType: PopupType.SIMPLE, key: data.title + Math.random(), removeAfterMs })
     },
     [addPopup],
   )
@@ -151,7 +152,12 @@ export const useTransactionNotify = () => {
   const addPopup = useAddPopup()
   return useCallback(
     (data: PopupContentTxn) => {
-      addPopup(data, PopupType.TRANSACTION, data.hash)
+      addPopup({
+        content: data,
+        popupType: PopupType.TRANSACTION,
+        key: data.hash,
+        account: data.account,
+      })
     },
     [addPopup],
   )
@@ -203,11 +209,14 @@ export function useActivePopups() {
   const { chainId, account } = useActiveWeb3React()
 
   return useMemo(() => {
-    const topRightPopups = popups.filter(e => {
-      if ([PopupType.SIMPLE, PopupType.TRANSACTION].includes(e.popupType)) return true
+    const topRightPopups = popups.filter(item => {
+      const { popupType, content } = item
+      if (popupType === PopupType.SIMPLE) return true
+      if (popupType === PopupType.TRANSACTION) return account === item.account
+
       const announcementsAckMap = getAnnouncementsAckMap()
-      const isRead = announcementsAckMap[e.content.metaMessageId]
-      if (e.popupType === PopupType.TOP_RIGHT) return !isRead
+      const isRead = announcementsAckMap[content?.metaMessageId]
+      if (popupType === PopupType.TOP_RIGHT) return !isRead
       return false
     })
 

src/state/transactions/hooks.tsx

@@ -54,17 +54,28 @@ export function useTransactionAdder(): (tx: TransactionHistory) => void {
   )
 }
 
+const filterTxsMapByAccount = (obj: GroupedTxsByHash | undefined, account: string | undefined) => {
+  if (!obj) return
+  const result: GroupedTxsByHash = {}
+  Object.keys(obj).forEach(key => {
+    const arr = obj[key] ?? []
+    if (isOwnTransactionGroup(arr, account)) {
+      result[key] = obj[key]
+    }
+  })
+  return result
+}
 // returns all the transactions for the current chain
 export function useAllTransactions(allChain = false): GroupedTxsByHash | undefined {
-  const { chainId } = useActiveWeb3React()
+  const { chainId, account } = useActiveWeb3React()
   const transactions = useSelector<AppState, AppState['transactions']>(state => state.transactions)
 
   return useMemo(() => {
-    if (!allChain) return transactions[chainId]
+    if (!allChain) return filterTxsMapByAccount(transactions[chainId], account)
     return Object.values(transactions).reduce((rs, obj) => {
-      return { ...rs, ...obj }
+      return { ...rs, ...filterTxsMapByAccount(obj, account) }
     }, {})
-  }, [allChain, transactions, chainId])
+  }, [allChain, transactions, chainId, account])
 }
 
 export function useSortRecentTransactions(recentOnly = true, allChain = false) {

src/state/transactions/updater.tsx

@@ -135,6 +135,7 @@ export default function Updater(): null {
               transactionNotify({
                 hash: receipt.transactionHash,
                 type: receipt.status === 1 ? NotificationType.SUCCESS : NotificationType.ERROR,
+                account: account ?? '',
               })
               if (receipt.status === 1) {
                 const arbitrary = transaction.extraInfo?.arbitrary
@@ -223,6 +224,7 @@ export default function Updater(): null {
                 transactionNotify({
                   hash,
                   type: tx.meta?.err ? NotificationType.ERROR : NotificationType.SUCCESS,
+                  account: account ?? '',
                 })
                 if (!tx.meta?.err && transaction) {
                   const arbitrary = transaction.extraInfo?.arbitrary