feat: Update header safe token widget for SAP [SW-586]

[usame-algan]

What it solves

Resolves SW-586

How this PR fixes it

• Adds an UnreadBadge to the safe token header widget in case there is an allocation
• Shows a different tooltip text in case there is an allocation

How to test it

1. Open the app with a safe that has a SAP allocation on staging
2. Observe the updated header widget for safe tokens
3. Open the app on prod or with a safe without an allocation
4. Observe the header widget looks as before

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) 🧑‍💻

[notion-workspace]

Update safe token header widget

[github-actions]

Branch preview

✅ Deploy successful!

Website:
https://sap_token_widget--walletweb.review.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

Storybook:
https://sap_token_widget--walletweb.review.5afe.dev/storybook/

[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	1.01 MB (🟡 +259 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	73.97% (+0.14% 🔼)	14132/19106
🔴	Branches	52.08% (+0.53% 🔼)	3506/6732
🔴	Functions	57.58% (+0.31% 🔼)	2062/3581
🟡	Lines	75.61% (+0.13% 🔼)	12840/16983

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / index.tsx	100%	0%	100%	100%

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / usePendingTxs.ts	89.8% (-1.11% 🔻)	82.35% (-3.36% 🔻)	92.31% (-1.03% 🔻)	92.68% (-0.8% 🔻)
🟡	... / index.ts	65.14%	46.94% (-2.08% 🔻)	42.86%	66.67%
🟡	... / hooks.ts	79.26% (-1.04% 🔻)	68.29% (-2.44% 🔻)	70%	79.51% (-1.16% 🔻)
🟢	... / index.ts	91.92% (-0.24% 🔻)	84.15% (+3.86% 🔼)	95.45%	92.86% (-0.14% 🔻)
🟢	... / index.tsx	100%	75% (-25% 🔻)	100%	100%
🟢	... / index.tsx	96.3% (+2.68% 🔼)	70% (-10.95% 🔻)	80% (+5% 🔼)	98% (+2.65% 🔼)
🟢	... / index.tsx	96.15% (+0.15% 🔼)	68.18% (-4.04% 🔻)	100%	100%
🔴	... / index.tsx	42.86% (-11.69% 🔻)	0%	0%	46.15% (-13.85% 🔻)
🟢	... / Exit.tsx	77.78%	0% (-100% 🔻)	0%	87.5%

Test suite run success

1620 tests passing in 217 suites.

Report generated by 🧪jest coverage report action from d999b3f

[katspaugh]

Can you insert a screenshot? In my safes, the widget looks the same as before.

[usame-algan]

Can you insert a screenshot? In my safes, the widget looks the same as before.

Added a screenshot to the description. The copy needs to be updated before we merge this so I would leave the PR open for now.

[francovenica]

I think the tooltip should not show for non-owners and disconnected users:

Beyond that it looks good

[usame-algan]

I think the tooltip should not show for non-owners and disconnected users:

Changed it so it only displays the update for safe owners

[francovenica]

LGMT

[usame-algan]

@francovenica I will push another change to exclude the allocation of the new Airdrop as long as the start date has not been reached otherwise it is misleading to include this number since technically it is "vesting" but can't be claimed at all.

[francovenica]

The top bar is fine, but I still see the old number in this section. Is it correct?

[usame-algan]

The top bar is fine, but I still see the old number in this section. Is it correct?

Yes, the 10k number in the header widget is correct because the allocation for SAP has not started yet. I will also update the number in the governance app so it will say "Total voting power is 10k" in this case.