Feat: add swaps card to safe apps list #3786

jmealy · 2024-05-31T13:18:31Z

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 · 2024-05-31T13:18:44Z

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/

jmealy · 2024-05-31T13:19:50Z

src/components/safe-apps/hooks/useNativeSwapsAppCard.ts

+    features: [],
+    socialProfiles: [],
+    developerWebsite: '',
+    chainIds: [chainId],


here I have the card shown on whatever chain is selected. Is swaps enabled on all chains?

yes, you can use: const isSwapFeatureEnabled = useHasFeature(FEATURES.NATIVE_SWAPS) to determine if swaps are enabled on the current chain.
Also how about we don't go for a custom "isNativeFeature" flag, but instead expose the swap app id as a custom const NATIVE_SWAP_APP_ID = 100_000
and then later you can compare against that id, instead of taht new isNativeFeature flag.

github-actions · 2024-05-31T13:19:56Z

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: ✅ 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 · 2024-05-31T13:24:34Z

Coverage report

St.^❔	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.^❔	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 d8f3a18

github-actions · 2024-06-03T14:29:38Z

📦 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.

schmanu · 2024-06-03T15:20:43Z

src/pages/apps/index.tsx

  const { remoteSafeApps, remoteSafeAppsLoading, pinnedSafeApps, pinnedSafeAppIds, togglePin } = useSafeApps()
+  const allApps = [swapsCardDetails, ...remoteSafeApps]


I get a lint warning that this should be memo'ed to avoid re-renders

schmanu · 2024-06-03T15:22:28Z

src/components/safe-apps/hooks/useNativeSwapsAppCard.ts

+    name: 'Native swaps are here!',
+    description: 'Experience seamless trading with better decoding and security in native swaps.',
+    accessControl: { type: SafeAppAccessPolicyTypes.NoRestrictions },
+    tags: ['DeFi'],


The app should also have the DEX tag.

schmanu · 2024-06-03T15:34:40Z

src/components/safe-apps/hooks/useNativeSwapsAppCard.ts

+    description: 'Experience seamless trading with better decoding and security in native swaps.',
+    accessControl: { type: SafeAppAccessPolicyTypes.NoRestrictions },
+    tags: ['DeFi'],
+    features: [],


We should also add that this app is batch tx optimized, otherwise it will not show when filtering for those.

github-actions · 2024-06-04T14:17:05Z

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}

compojoom · 2024-06-05T07:44:06Z

It's ok for me now. @schmanu ?

notion-workspace · 2024-06-05T14:32:29Z

Add a block to apps page

francovenica · 2024-06-10T02:23:01Z

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 · 2024-06-10T03:50:19Z

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 :(

katspaugh · 2024-06-10T07:16:02Z

src/components/safe-apps/SafeAppList/index.tsx

+          return safeApp.id !== NATIVE_SWAPS_APP_ID ? (
+            <li key={safeApp.id}>
+              <SafeAppCard
+                safeApp={safeApp}
+                isBookmarked={bookmarkedSafeAppsId?.has(safeApp.id)}
+                onBookmarkSafeApp={onBookmarkSafeApp}
+                removeCustomApp={removeCustomApp}
+                onClickSafeApp={handleSafeAppClick(safeApp)}
+                openPreviewDrawer={openPreviewDrawer}
+              />
+            </li>


Why does this card have to be added into the safeAppsList? Why can't it just be rendered outside of the map? Feels very hacky to me.

It gets mixed in with the safe apps in the parent component just so that it responds to filtering.
I changed it here to render outside of the map, hopefully it's a bit better

I think it's totally fine if it disappears when the list is filtered.

github-actions · 2024-06-10T07:32:10Z

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}

jmealy · 2024-06-10T07:34:14Z

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

src/pages/apps/index.tsx

src/components/safe-apps/NativeFeatureCard/index.tsx

src/components/safe-apps/SafeAppList/index.tsx

src/components/safe-apps/hooks/useNativeSwapsAppCard.ts

src/pages/apps/index.tsx

katspaugh · 2024-06-10T12:48:53Z

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

src/components/safe-apps/SafeAppList/index.tsx

src/features/swap/index.tsx

Co-authored-by: katspaugh <[email protected]>

francovenica · 2024-06-10T14:10:35Z

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

src/features/swap/index.tsx

katspaugh · 2024-06-10T14:33:29Z

src/features/swap/config/constants.ts

@@ -0,0 +1 @@
+export const NATIVE_SWAPS_APP_ID = 100_000


Suggested change

export const NATIVE_SWAPS_APP_ID = 100_000

jmealy · 2024-06-10T14:50:48Z

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!

katspaugh

Thanks for refactoring it! 🙏

compojoom · 2024-06-10T15:15:35Z

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

francovenica · 2024-06-10T15:20:36Z

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 · 2024-06-10T16:04:52Z

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

francovenica · 2024-06-10T22:01:03Z

Ok, the filtering is out.

See if the padding of that button can be fixed.

Beyond that the ticket is fine to be merged

…t/safe-apps-swaps-block

github-actions · 2024-06-11T07:44:32Z

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}

jmealy added 6 commits May 30, 2024 15:36

feat: add native swap card to storybook

49dab7d

make card clickable and handle dismiss

c423b09

add flag to safe apps card type for native features

3e1445c

move hook to hooks folder

77dd4c5

adjust padding

aac00da

remove test code

ae9d480

jmealy commented May 31, 2024

View reviewed changes

jmealy marked this pull request as ready for review May 31, 2024 13:20

jmealy requested a review from compojoom May 31, 2024 13:20

fix: enable swap app card only on supported networks

11a347c

compojoom requested a review from schmanu June 3, 2024 14:26

fix: failing apps test

b1f486e

schmanu reviewed Jun 3, 2024

View reviewed changes

fix lint error and add tags to swaps card

944d1ec

Merge branch 'dev' into feat/safe-apps-swaps-block

38f1106

compojoom approved these changes Jun 6, 2024

View reviewed changes