chore: <p> cannot appear as a descendant of <p>.

[compojoom]

note to testers: I can't see this error in production, it seems to only appear with the local dev release, so you'll have to test this locally

fix: Warning: validateDOMNesting(...):

cannot appear as a descendant of

.

In some locations we had nested inside another this renders 2

tags inside of each-other and that is not valid. The other way around was having a that is nested inside of a Typograpühy which also seems to be not valid.

How to test it

run the website with 'yarn dev' -> open the wallet box on top -> you shouldn't see:

Screenshots

Checklist

• I've tested the branch on mobile 📱
• I've documented how it affects the analytics (if at all) 📊
• I've written a unit/e2e test for it (if applicable) 🧑‍💻

[github-actions]

Branch preview

✅ Deploy successful!

https://fix_nested_descendant--walletweb.review-wallet-web.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[github-actions]

📦 Next.js Bundle Analysis for safe-wallet-web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	1015.86 KB (🟡 +6 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	79.38% (-0.02% 🔻)	11125/14015
🔴	Branches	58.38% (-0.02% 🔻)	2609/4469
🟡	Functions	66.03% (-0.04% 🔻)	1792/2714
🟢	Lines	80.63% (-0.03% 🔻)	10021/12428

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / index.tsx	82.35% (-8.82% 🔻)	66.67% (-16.67% 🔻)	50% (-12.5% 🔻)	83.87% (-9.68% 🔻)
🟢	... / index.tsx	89.29% (-0.37% 🔻)	88.89%	50%	88.46% (-0.43% 🔻)

Test suite run success

1410 tests passing in 195 suites.

Report generated by 🧪jest coverage report action from 04fe8dc

[katspaugh]

This solution isn’t very good for semantics/a11y though, is it? I would rather we find the places where this warning is thrown and fix just them.

[compojoom]

Ok, you've got a point. On the other hand this error is pretty easy to get into. the moment you render a component inside a Typography component you don't know what the nested component is going to use to render.
For example look at the stack trace:

We've rendered EthHashInfo inside of Typography. EthHashInfo uses divs. Now you have

<div<....

- which is invalid.

I've now fixed those issues by rendering typography with component="div". At least where I found those issues.

[katspaugh]

👍