fix: Add loading states to WC

[usame-algan]

What it solves

Resolves #3200

How this PR fixes it

• Adds loading indicators for disconnect, reject and approve
• Moves the onDisconnect, onReject and onApprove handler to the components where they are used instead of prop drilling them

Other changes:

💡 These aim to reduce complexity and improve the UX. We should discuss if we want to keep them or not. 💡

• Removes the handleBeforeUnload call as there is no error and no such handling in the example app. Reloading the page during an approval doesn't show any errors either, just an "Unknown" pairing but no active session. Using the same uri again establishes a session and updates the "Unknown" pairing which is expected.
• Removes WcConnectionState and associated logic. Switching back and forth with the dialogs when approving/rejecting takes the user out of the current context which is confusing imo. We should rather keep the user in the current dialog and display a loading state there.

How to test it

1. Open the app, open the WC widget and paste a uri
2. Press Reject or Approve
3. Observe a loading indicator
4. Press Disconnect
5. Observe a loading indicator

We should check that after pasting the URI into the input field and reloading the page before pressing reject and approve doesn't cause any errors.

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://wc_loading--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 Decreased

Page	Size (compressed)
global	1016.32 KB (-4 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% 🔻)	11124/14013
🔴	Branches	58.42% (-0.03% 🔻)	2612/4471
🟡	Functions	66.09% (-0.05% 🔻)	1795/2716
🟢	Lines	80.64% (-0.02% 🔻)	10020/12425

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% 🔻)
🟡	src/pages/404.tsx	68.75%	64.29% (-7.14% 🔻)	50%	71.43%

Test suite run success

1411 tests passing in 195 suites.

Report generated by 🧪jest coverage report action from 4b6d6fd

[katspaugh]

👍

[francovenica]

The only "issue" I found by playing with the page reload is that, if you click "Disconnect" and reload the page at the same time, then after the reload you still look connected in the safe app, while you got disconnected in the 3rd party app.
Still I think this is a very nish case, and you can still click Disconnect again with no errors

Beyond this the rest worked fine for me connecting and disconnecting from apps.
Even tried executing tx in sepolia with cowswap with no issues from the safe side (cowswap is taking ages to execute the tx tho...)

[usame-algan]

While working on #3395 I realised it would be nicer to only have one loading state and keep it inside the context. When a user approves a session, the reject button should be disabled and vice versa. If there was one loading state e.g. with an indicator that its an "approval" or a "rejection" or a "disconnection" we could disable all other action buttons. I will implement it in this PR since it would otherwise revert most of the changes done here. Sorry for the back and forth!

[usame-algan]

@francovenica could you test again? The only difference should be that now when pressing "Approve", the "Reject" button should be disabled and when pressing "Reject", the "Approve" button should be disabled.

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

[francovenica]

Yes, works fine for me.