Fix: reset tx list pages when Safe is changed (#2168)

* Fix: reset tx list pages when Safe is changed

* Add the same fix for PaginatedMsgs

src/components/common/PaginatedTxns/index.tsx

@@ -12,6 +12,7 @@ import { type TxFilter, useTxFilter } from '@/utils/tx-history-filter'
 import { isTransactionListItem } from '@/utils/transaction-guards'
 import NoTransactionsIcon from '@/public/images/transactions/no-transactions.svg'
 import { useHasPendingTxs } from '@/hooks/usePendingTxs'
+import useSafeInfo from '@/hooks/useSafeInfo'
 
 const NoQueuedTxns = () => {
   return <PagePlaceholder img={<NoTransactionsIcon />} text="Queued transactions will appear here" />
@@ -68,11 +69,12 @@ const TxPage = ({
 const PaginatedTxns = ({ useTxns }: { useTxns: typeof useTxHistory | typeof useTxQueue }): ReactElement => {
   const [pages, setPages] = useState<string[]>([''])
   const [filter] = useTxFilter()
+  const { safeAddress, safe } = useSafeInfo()
 
-  // Reset the pages when the filter changes
+  // Reset the pages when the Safe Account or filter changes
   useEffect(() => {
     setPages([''])
-  }, [filter, useTxns])
+  }, [filter, safe.chainId, safeAddress, useTxns])
 
   // Trigger the next page load
   const onNextPage = (pageUrl: string) => {

src/components/safe-messages/PaginatedMsgs/index.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@mui/material'
 import { Typography, Link, SvgIcon } from '@mui/material'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import type { ReactElement } from 'react'
 
 import ErrorMessage from '@/components/tx/ErrorMessage'
@@ -12,6 +12,7 @@ import PagePlaceholder from '@/components/common/PagePlaceholder'
 import MsgList from '@/components/safe-messages/MsgList'
 import SkeletonTxList from '@/components/common/PaginatedTxns/SkeletonTxList'
 import { HelpCenterArticle } from '@/config/constants'
+import useSafeInfo from '@/hooks/useSafeInfo'
 
 const NoMessages = (): ReactElement => {
   return (
@@ -62,12 +63,18 @@ const MsgPage = ({
 
 const PaginatedMsgs = (): ReactElement => {
   const [pages, setPages] = useState<string[]>([''])
+  const { safeAddress, safe } = useSafeInfo()
 
   // Trigger the next page load
   const onNextPage = (pageUrl: string) => {
     setPages((prev) => prev.concat(pageUrl))
   }
 
+  // Reset the pages when the Safe Account changes
+  useEffect(() => {
+    setPages([''])
+  }, [safe.chainId, safeAddress])
+
   return (
     <Box mb={4} position="relative">
       {pages.map((pageUrl, index) => (