From a370b7d6cd99b8b2404ce881cb569ef9cb10fbcf Mon Sep 17 00:00:00 2001
From: Daniel Dimitrov <daniel.d@safe.global>
Date: Tue, 12 Mar 2024 12:28:21 +0100
Subject: [PATCH] chore: <p> cannot appear as a descendant of <p>. (#3417)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix: Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.

In some locations we had <Typography variant=“body1”> nested inside another <Typography> this renders 2 <p> tags inside of each-other and that is not valid.
The other way around was having a <Box> that is nested inside of a Typography which also seems to be not valid.
---
 src/components/common/WalletInfo/index.tsx               | 2 +-
 .../components/WcSessionList/WcNoSessions.tsx            | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/common/WalletInfo/index.tsx b/src/components/common/WalletInfo/index.tsx
index d9c2d9f20f..f083e57895 100644
--- a/src/components/common/WalletInfo/index.tsx
+++ b/src/components/common/WalletInfo/index.tsx
@@ -90,7 +90,7 @@ export const WalletInfo = ({
         ) : (
           <>
             <WalletIdenticon wallet={wallet} size={36} />
-            <Typography variant="body2" className={css.address}>
+            <Typography variant="body2" className={css.address} component="div">
               <EthHashInfo
                 address={wallet.address}
                 name={addressBook[wallet.address] || wallet.ens || wallet.label}
diff --git a/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx b/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx
index e7183678a6..21d7ce34fa 100644
--- a/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx
+++ b/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx
@@ -19,7 +19,14 @@ const WcSampleDapps = ({ onUnload }: { onUnload: () => void }) => {
   }, [onUnload])
 
   return (
-    <Typography variant="body2" display="flex" justifyContent="space-between" alignItems="center" mt={3}>
+    <Typography
+      variant="body2"
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
+      mt={3}
+      component="div"
+    >
       {SAMPLE_DAPPS.map((item) => (
         <Typography variant="body2" key={item.url}>
           <ExternalLink href={item.url} noIcon px={1}>