-
Notifications
You must be signed in to change notification settings - Fork 411
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat: add swaps card to safe apps list #3786
Conversation
Branch preview✅ Deploy successful! Storybook: |
features: [], | ||
socialProfiles: [], | ||
developerWebsite: '', | ||
chainIds: [chainId], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
here I have the card shown on whatever chain is selected. Is swaps enabled on all chains?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
ESLint Summary View Full Report
[warning] react-hooks/exhaustive-deps
Report generated by eslint-plus-action |
Coverage report
Show new covered files 🐣
Test suite run success1443 tests passing in 199 suites. Report generated by 🧪jest coverage report action from d8f3a18 |
📦 Next.js Bundle Analysis for safe-wallet-webThis analysis was generated by the Next.js Bundle Analysis action. 🤖 🎉 Global Bundle Size Decreased
DetailsThe 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 If you want further insight into what is behind the changes, give @next/bundle-analyzer a try! Three Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly 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 Any third party scripts you have added directly to your app using the 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. |
src/pages/apps/index.tsx
Outdated
const { remoteSafeApps, remoteSafeAppsLoading, pinnedSafeApps, pinnedSafeAppIds, togglePin } = useSafeApps() | ||
const allApps = [swapsCardDetails, ...remoteSafeApps] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I get a lint warning that this should be memo'ed to avoid re-renders
name: 'Native swaps are here!', | ||
description: 'Experience seamless trading with better decoding and security in native swaps.', | ||
accessControl: { type: SafeAppAccessPolicyTypes.NoRestrictions }, | ||
tags: ['DeFi'], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The app should also have the DEX tag.
description: 'Experience seamless trading with better decoding and security in native swaps.', | ||
accessControl: { type: SafeAppAccessPolicyTypes.NoRestrictions }, | ||
tags: ['DeFi'], | ||
features: [], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should also add that this app is batch tx optimized, otherwise it will not show when filtering for those.
ESLint Summary View Full Report
Report generated by eslint-plus-action |
It's ok for me now. @schmanu ? |
Actually this seems to be a bug, we have to fix this :( |
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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's totally fine if it disappears when the list is filtered.
ESLint Summary View Full Report
Report generated by eslint-plus-action |
Should be ok now |
I don't understand why so many abstraction layers were added just to show a static card in the beginning of the apps list... |
Co-authored-by: katspaugh <[email protected]>
Co-authored-by: katspaugh <[email protected]>
@jmealy The deploy has failed, can you re-trigger it to see if it at least creates the environment again to test? |
@@ -0,0 +1 @@ | |||
export const NATIVE_SWAPS_APP_ID = 100_000 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
export const NATIVE_SWAPS_APP_ID = 100_000 |
It was mostly so the filtering would work. Hopefully it's ok now, sorry for the mess! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for refactoring it! 🙏
But wait, so now we no longer show the safe widget when we filter? |
Yes, it's fine to not show it when you filter. |
Ok, the filtering is out. See if the padding of that button can be fixed. Beyond that the ticket is fine to be merged |
ESLint Summary View Full Report
Report generated by eslint-plus-action |
What it solves
Resolves https://www.notion.so/safe-global/Add-a-block-to-apps-page-985e220c975b42b7950929ecb02a6715?pvs=4
How this PR fixes it
How to test it
swap
, along with other swapping apps.defi
categorytry now
should bring you to the swaps featureDon't show
should remove the card from the list. It will remain hidden unless localstorage is cleared.Screenshots
Checklist