fix: Set Safe apps categories via URL query

[usame-algan]

What it solves

Resolves #

This is an enhancement for the safe apps list and allows to set categories via the URL. It will be for linking to certain categories like Stake, Bridge, Swap e.g. from the Dashboard.

How this PR fixes it

• Adds a new hook useCategoryFilter that checks the URL for categories and syncs it with the local state

ToDo

• Write tests for useCategoryFilter

How to test it

1. Create a counterfactual Safe
2. Press Create Transaction on the dashboard
3. Select Swap tokens
4. Observe being navigated to the safe apps list with DEX apps pre-selected
5. Clear the category
6. Observe the URL and list updating

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://safe_apps_query_filter--walletweb.review-wallet-web.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

[usame-algan]

I noticed that the CoW safe app doesn't have the category DEX even though it says so in the description. @katspaugh can we add that category to the safe app as well?

[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. 🤖

Two Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/apps	48.16 KB (🟡 +242 B)	1.08 MB
/home	53.02 KB (🟡 +18 B)	1.08 MB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

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

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	78.61% (+0.03% 🔼)	11634/14800
🔴	Branches	56.77% (+0.04% 🔼)	2604/4587
🟡	Functions	63.48% (+0.06% 🔼)	1848/2911
🟡	Lines	79.99% (+0.03% 🔼)	10495/13121

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / useCategoryFilter.ts	96%	77.78%	100%	100%

Test suite run success

1406 tests passing in 192 suites.

Report generated by 🧪jest coverage report action from 826de03

[katspaugh]

Could you add DEX to the SafeAppsTag in constants.ts?

[usame-algan]

I think DEX is not the right tag (it only exists on staging). We should probably use DeFi or Aggregator. Afaiu adding it to the SafeAppsTags filters it out in getCategoryOptions which we need to check if its a valid tag and not some random string.

[liliya-soroka]

1. Need to delete category twice

Screen.Recording.2024-02-19.at.09.59.52.mov

[usame-algan]

Need to delete category twice

Can you check again? I pushed a fix

[liliya-soroka]

Verified