Merge branch 'dev' of github.com:safe-global/web-core into epic-tx-flow

cypress/e2e/smoke/dashboard.cy.js

@@ -23,7 +23,7 @@ describe('Dashboard', () => {
       cy.contains('2/3')
       cy.get(`a[href="/balances?safe=${SAFE}"]`).contains('View assets')
       // Text next to Tokens contains a number greater than 0
-      cy.contains('p', 'Tokens').next().contains('3')
+      cy.contains('p', 'Tokens').next().contains('4')
       cy.contains('p', 'NFTs').next().contains('0')
     })
   })

src/components/common/CheckWallet/index.tsx

@@ -27,7 +27,7 @@ const CheckWallet = ({ children, allowSpendingLimit, allowNonOwner }: CheckWalle
     ? Message.WalletNotConnected
     : !isSafeOwner && !isSpendingLimit && !allowNonOwner
     ? Message.NotSafeOwner
-    : isSpendingLimit && !allowSpendingLimit
+    : isSpendingLimit && !allowSpendingLimit && !allowNonOwner
     ? Message.OnlySpendingLimitBeneficiary
     : ''
 

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/dashboard/CreationDialog/index.tsx

@@ -1,5 +1,6 @@
 import React, { type ElementType } from 'react'
 import { Box, Button, Dialog, DialogContent, Grid, SvgIcon, Typography } from '@mui/material'
+import { useRouter } from 'next/router'
 
 import HomeIcon from '@/public/images/sidebar/home.svg'
 import TransactionIcon from '@/public/images/sidebar/transactions.svg'
@@ -9,6 +10,7 @@ import BeamerIcon from '@/public/images/sidebar/whats-new.svg'
 import HelpCenterIcon from '@/public/images/sidebar/help-center.svg'
 import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 import { useCurrentChain } from '@/hooks/useChains'
+import { CREATION_MODAL_QUERY_PARM } from '@/components/new-safe/create/logic'
 
 const HintItem = ({ Icon, title, description }: { Icon: ElementType; title: string; description: string }) => {
   return (
@@ -26,10 +28,18 @@ const HintItem = ({ Icon, title, description }: { Icon: ElementType; title: stri
 }
 
 const CreationDialog = () => {
+  const router = useRouter()
   const [open, setOpen] = React.useState(true)
   const [remoteSafeApps = []] = useRemoteSafeApps()
   const chain = useCurrentChain()
 
+  const onClose = () => {
+    const { [CREATION_MODAL_QUERY_PARM]: _, ...query } = router.query
+    router.replace({ pathname: router.pathname, query })
+
+    setOpen(false)
+  }
+
   return (
     <Dialog open={open}>
       <DialogContent sx={{ paddingX: 8, paddingTop: 9, paddingBottom: 6 }}>
@@ -64,7 +74,7 @@ const CreationDialog = () => {
           />
         </Grid>
         <Box display="flex" justifyContent="center">
-          <Button onClick={() => setOpen(false)} variant="contained" size="stretched">
+          <Button onClick={onClose} variant="contained" size="stretched">
             Got it
           </Button>
         </Box>

src/components/dashboard/index.tsx

@@ -10,11 +10,12 @@ import { useRouter } from 'next/router'
 import Relaying from '@/components/dashboard/Relaying'
 import { FEATURES } from '@/utils/chains'
 import { useHasFeature } from '@/hooks/useChains'
+import { CREATION_MODAL_QUERY_PARM } from '../new-safe/create/logic'
 
 const Dashboard = (): ReactElement => {
   const router = useRouter()
   const supportsRelaying = useHasFeature(FEATURES.RELAYING)
-  const { showCreationModal = '' } = router.query
+  const { [CREATION_MODAL_QUERY_PARM]: showCreationModal = '' } = router.query
 
   return (
     <>

src/components/new-safe/create/logic/index.ts

@@ -235,6 +235,8 @@ export const checkSafeCreationTx = async (
   }
 }
 
+export const CREATION_MODAL_QUERY_PARM = 'showCreationModal'
+
 export const getRedirect = (
   chainPrefix: string,
   safeAddress: string,
@@ -248,7 +250,7 @@ export const getRedirect = (
 
   // Go to the dashboard if no specific redirect is provided
   if (!redirectUrl) {
-    return { pathname: AppRoutes.home, query: { safe: address, showCreationModal: true } }
+    return { pathname: AppRoutes.home, query: { safe: address, [CREATION_MODAL_QUERY_PARM]: true } }
   }
 
   // Otherwise, redirect to the provided URL (e.g. from a Safe App)

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) => (