chore: <p> cannot appear as a descendant of <p>. (#3417)

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

@@ -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}

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}>