Feat: add swaps card to safe apps list

jmealy commented 1 month ago

What it solves

Resolves https://www.notion.so/safe-global/Add-a-block-to-apps-page-985e220c975b42b7950929ecb02a6715?pvs=4

How this PR fixes it

Add a component for showing native swaps in the safe apps list
Allow the card to be dismissed. This decision is persisted in localstorage.
Make the cards respond to the search and filter like the other safe apps.

How to test it

Open the safe apps list.
By default the new swaps card should be shown first in the list
It should be shown when searching with the keyword swap, along with other swapping apps.
It should show when filtering for the defi category
Clicking try now should bring you to the swaps feature
Clicking Don't show should remove the card from the list. It will remain hidden unless localstorage is cleared.

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[bot] commented 1 month ago

Branch preview

✅ Deploy successful!

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

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

github-actions[bot] commented 1 month ago

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	1	0
Ignored	0	N/A

Result: :white_check_mark: success
- Annotations: 1 total

[warning] react-hooks/exhaustive-deps

verifies the list of dependencies for Hooks like useEffect and similar

src/pages/apps/index.tsx Line 22 - The 'allApps' array makes the dependencies of useMemo Hook (at line 30) change on every render. To fix this, wrap the initialization of 'allApps' in its own useMemo() Hook.

^{Report generated by eslint-plus-action}

github-actions[bot] commented 1 month ago

Coverage report

St.^{:grey_question:}	Category	Percentage	Covered / Total
🟡	Statements	79.44% (+0.03% 🔼)	11513/14493
🔴	Branches	58.52% (+0.04% 🔼)	2777/4745
🟡	Functions	66.63% (-0.01% 🔻)	1845/2769
🟢	Lines	80.78% (+0.03% 🔼)	10379/12849

Show new covered files 🐣

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :-: | :- | :- | :- | :- | :- | | 🟢 |

`...` / index.tsx

| 91.67% | 75% | 50% | 95.45% |

Test suite run success

1443 tests passing in 199 suites.

Report generated by 🧪jest coverage report action from d8f3a18a5fd0bd9badb2abcdf5410d2b4e72131a

github-actions[bot] commented 1 month ago

📦 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`	`950.38 KB` (-15 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!

Three 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`	`49.67 KB` (🟡 +672 B)	1000.05 KB
`/apps/custom`	`41.29 KB` (🟡 +666 B)	991.66 KB
`/home`	`59.46 KB` (🟡 +689 B)	1009.84 KB

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[bot] commented 1 month ago

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: :white_check_mark: success
- Annotations: 0 total

^{Report generated by eslint-plus-action}

compojoom commented 1 month ago

It's ok for me now. @schmanu ?

notion-workspace[bot] commented 1 month ago

Add a block to apps page

francovenica commented 1 month ago

Ok, looks good. I've checked the things asked in the description plus what manu asked to be changed: be filtered by DEX and "Optimized with batched tx"

Question: Currently when you search, the card leaves the first place and places just among the other apps. Would it be possible to make it appear always first since is technically not an app, so it shouldn't be mixed with them.

I don't consider this a blocker, so if too outside of the scope we can create a new ticket for just that and pass this one

compojoom commented 1 month ago

Currently when you search, the card leaves the first place and places just among the other apps. Would it be possible to make it appear always first since is technically not an app, so it shouldn't be mixed with them.

Actually this seems to be a bug, we have to fix this :(

github-actions[bot] commented 1 month ago

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: :white_check_mark: success
- Annotations: 0 total

^{Report generated by eslint-plus-action}

jmealy commented 1 month ago

Currently when you search, the card leaves the first place and places just among the other apps. Would it be possible to make it appear always first since is technically not an app, so it shouldn't be mixed with them.

Should be ok now

katspaugh commented 1 month ago

I don't understand why so many abstraction layers were added just to show a static card in the beginning of the apps list...

francovenica commented 1 month ago

@jmealy The deploy has failed, can you re-trigger it to see if it at least creates the environment again to test?

jmealy commented 1 month ago

I don't understand why so many abstraction layers were added just to show a static card in the beginning of the apps list...

It was mostly so the filtering would work. Hopefully it's ok now, sorry for the mess!

compojoom commented 1 month ago

But wait, so now we no longer show the safe widget when we filter?

francovenica commented 1 month ago

But wait, so now we no longer show the safe widget when we filter?

I was going to comment the same thing ☝️

Also I just saw that, if the card is too thin (for some viewports) the button text are in 2 rows. If you reduce the padding to 21px it fits just fine with the thiniest cards

katspaugh commented 1 month ago

Yes, it's fine to not show it when you filter.

francovenica commented 1 month ago

Ok, the filtering is out.

See if the padding of that button can be fixed.

Beyond that the ticket is fine to be merged

github-actions[bot] commented 1 month ago

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: :white_check_mark: success
- Annotations: 0 total

^{Report generated by eslint-plus-action}

safe-global / safe-wallet-web