feat: Staking banner #4396

tmjssz · 2024-10-21T07:50:42Z

Show banners for staking on the dashboard and the assets page if the user holds >= 32 ETH.

What it solves

Resolves SW-191

How this PR fixes it

This pull request adds a new Staking banner as a replacement of the Swap banner. The changes include implementing the StakingBanner component, integrating it into the dashboard and assets pages, and updating the styles and hooks accordingly.

Staking Banner Implementation:

src/components/dashboard/StakingBanner/index.tsx: Added a new StakingBanner component with support for both large and small views. This component includes logic to check for sufficient funds (>= 32 ETH), dark mode, and the possibility to hide it.
src/components/dashboard/StakingBanner/styles.module.css: Added CSS styles for the StakingBanner component, including responsive design and dark mode support.
src/features/stake/hooks/useIsStakingBannerEnabled.ts: Created a new hook useIsStakingBannerEnabled to determine if the staking banner feature is enabled.

Integration:

src/components/dashboard/index.tsx: Integrated the StakingBanner component into the dashboard, replacing the Swap Widget. [1] [2]
src/pages/balances/index.tsx: Added the StakingBanner component to the assets page. [1] [2]

Removal of Swap Widget:

src/features/swap/components/SwapWidget/index.tsx: Removed the SwapWidget component and its associated logic.

Additional Updates:

src/services/analytics/events/overview.ts: Added new analytics events for the staking banner interactions.
src/utils/chains.ts: Added STAKING_BANNER to the FEATURES enum.

How to test it

Load the app for an account that has >= 32 ETH and visit the dashboard and assets pages where the banner should appear at the top. Alternatively, update the MIN_NATIVE_TOKEN_BALANCE constant in the StakingBanner component.

Screenshots

Dashboard

Assets

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-10-21T07:50:57Z

Branch preview

✅ Deploy successful!

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

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

github-actions · 2024-10-21T07:54:58Z

📦 Next.js Bundle Analysis for safe-wallet-web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`1009.76 KB` (🟡 +30 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!

Fifteen 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.42 KB` (🟡 +1 B)	1.03 MB
`/apps/custom`	`40.06 KB` (🟡 +1 B)	1.03 MB
`/balances`	`38.17 KB` (🔴 +8.73 KB)	1.02 MB
`/balances/nfts`	`19.2 KB` (-1 B)	1 MB
`/home`	`65.47 KB` (🟡 +8.13 KB)	1.05 MB
`/settings`	`450 B` (🟢 -1 B)	1010.2 KB
`/settings/cookies`	`7.68 KB` (🟡 +1 B)	1017.45 KB
`/settings/data`	`7.58 KB` (🟡 +3 B)	1017.34 KB
`/settings/environment-variables`	`9.17 KB` (🟢 -3 B)	1018.93 KB
`/settings/modules`	`9.84 KB` (🟡 +3 B)	1019.61 KB
`/settings/notifications`	`27.05 KB` (🟡 +2 B)	1.01 MB
`/settings/setup`	`36 KB` (🟡 +2 B)	1.02 MB
`/transactions`	`73.69 KB` (-1 B)	1.06 MB
`/transactions/history`	`73.66 KB` (-1 B)	1.06 MB
`/transactions/queue`	`31.31 KB` (🟡 +2 B)	1.02 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 · 2024-10-21T07:56:52Z

Coverage report

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	73.71% (+0.01% 🔼)	13530/18355
🔴	Branches	51.5% (+0.02% 🔼)	3292/6392
🔴	Functions	57.26%	1969/3439
🟡	Lines	75.41% (+0.01% 🔼)	12303/16314

Test suite run success

1573 tests passing in 208 suites.

Report generated by 🧪jest coverage report action from 3506b64

notion-workspace · 2024-10-22T08:24:47Z

Dashboard banner staking

compojoom

Looks good!

I think we need to remove the swap banner and place staking in its place.

compojoom · 2024-10-22T09:31:34Z

src/components/dashboard/StakingBanner/index.tsx

+  const router = useRouter()
+  const { balances } = useBalances()
+
+  const nativeTokenBalance = balances.items.find((balance) => balance.tokenInfo.type === TokenType.NATIVE_TOKEN)


I guess it doesn't matter here as the balances won't be that huge of an array, but not having this memoized or not in a separate hook that is executed just once means that this line will be constantly recomputed for whatever reason the widget rerenders.

compojoom · 2024-10-22T09:32:36Z

src/components/dashboard/StakingBanner/index.tsx

+
+  const [widgetHidden = false, setWidgetHidden] = useLocalStorage<boolean>(LOCAL_STORAGE_KEY_HIDE_WIDGET)
+
+  const isStakingFeatureEnabled = useIsStakingFeatureEnabled()


@schmanu maybe instead of looking whether staking is enabled we could have a separate feature flag for only the banner? This way we can turn it off one day without doing a new release of the app. Or too much? What do you think? We don't do this for the swaps banner now and we'll have to remove it. I think the staking banner is supposed to take the Swap place.

I would say its a product question. Not sure if we want to keep the other widgets 🤷

Andrei confirmed that the swap banner should be replaced by the new one. I'm on it.

schmanu

In the designs there is also a small banner in the Assets view which is missing here.

schmanu · 2024-10-22T08:51:32Z

src/components/dashboard/StakingBanner/styles.module.css

+  right: 0;
+}
+
+.gradiantBackground {


Nit:

Suggested change

.gradiantBackground {

.gradientBackground {

schmanu · 2024-10-22T08:51:41Z

src/components/dashboard/StakingBanner/styles.module.css

+  border-radius: 50%;
+}
+
+.gradiantBackgroundDarkMode {


Nit:

Suggested change

.gradiantBackgroundDarkMode {

.gradientBackgroundDarkMode {

schmanu · 2024-10-22T10:13:49Z

src/components/dashboard/StakingBanner/index.tsx

+
+  const [widgetHidden = false, setWidgetHidden] = useLocalStorage<boolean>(LOCAL_STORAGE_KEY_HIDE_WIDGET)
+
+  const isStakingFeatureEnabled = useIsStakingFeatureEnabled()


I would say its a product question. Not sure if we want to keep the other widgets 🤷

tmjssz · 2024-10-23T12:23:11Z

I removed the swap banner and added a smaller version of the staking banner to be rendered on the assets page.

compojoom · 2024-10-23T18:32:53Z

@tmjssz can you rebase. This should fix the failing test.

Show a banner for staking on the dashboard if the user holds >= 32 ETH.

Remove the swap banner in favor of the the staking banner

…ons (dafault + large) * large version is rendered on the dashboard * default version is rendered on the assets page

gitpoap-bot · 2024-10-24T08:35:24Z

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

GitPOAP: 2024 Safe Contributor:

Head to gitpoap.io & connect your GitHub account to mint!

Learn more about GitPOAPs here.

liliya-soroka · 2024-10-24T17:59:35Z

The feature is checked , but there is a ticket that should be implemented before the Staking banner release - https://www.notion.so/safe-global/Staking-banner-notes-mobile-view-filtering-don-t-show-again-1298180fe57380768fb1e90d283fc54a?pvs=4

tmjssz requested review from schmanu and compojoom October 21, 2024 07:55

compojoom approved these changes Oct 22, 2024

View reviewed changes

schmanu reviewed Oct 22, 2024

View reviewed changes

tmjssz changed the title ~~feat: Show banner for staking on dashboard~~ feat: Staking banner Oct 23, 2024

compojoom mentioned this pull request Oct 23, 2024

fix: Remove SAP banner #4414

Merged

3 tasks

tmjssz added 6 commits October 24, 2024 09:36

feat: Show banner for staking on dashboard

aee86bd

Show a banner for staking on the dashboard if the user holds >= 32 ETH.

fix: typo in css class names

4ca1732

fix: memoize native token balance calculation

3b08703

feat: add "learn more" link for staking

22c955a

feat: add new feature flag specifically for the staking dashboard banner

7ca92b2

Remove the swap banner in favor of the the staking banner

feat: extend StakingBanner by an option to render two different versi…

3506b64

…ons (dafault + large) * large version is rendered on the dashboard * default version is rendered on the assets page

tmjssz force-pushed the feat/staking-dashboard-banner branch from 1e40c2c to 3506b64 Compare October 24, 2024 07:41

tmjssz merged commit ce95e2d into dev Oct 24, 2024
15 checks passed

tmjssz deleted the feat/staking-dashboard-banner branch October 24, 2024 08:35

github-actions bot locked and limited conversation to collaborators Oct 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Staking banner #4396

feat: Staking banner #4396

tmjssz commented Oct 21, 2024 •

edited

Loading

github-actions bot commented Oct 21, 2024 •

edited

Loading

github-actions bot commented Oct 21, 2024 •

edited

Loading

github-actions bot commented Oct 21, 2024 •

edited

Loading

notion-workspace bot commented Oct 22, 2024

compojoom left a comment

compojoom Oct 22, 2024

compojoom Oct 22, 2024

schmanu Oct 22, 2024

tmjssz Oct 22, 2024

schmanu left a comment

schmanu Oct 22, 2024

schmanu Oct 22, 2024

schmanu Oct 22, 2024

tmjssz commented Oct 23, 2024 •

edited

Loading

compojoom commented Oct 23, 2024

gitpoap-bot bot commented Oct 24, 2024

liliya-soroka commented Oct 24, 2024


		const [widgetHidden = false, setWidgetHidden] = useLocalStorage<boolean>(LOCAL_STORAGE_KEY_HIDE_WIDGET)

		const isStakingFeatureEnabled = useIsStakingFeatureEnabled()

feat: Staking banner #4396

feat: Staking banner #4396

Conversation

tmjssz commented Oct 21, 2024 • edited Loading

What it solves

How this PR fixes it

Staking Banner Implementation:

Integration:

Removal of Swap Widget:

Additional Updates:

How to test it

Screenshots

Dashboard

Assets

Checklist

github-actions bot commented Oct 21, 2024 • edited Loading

Branch preview

github-actions bot commented Oct 21, 2024 • edited Loading

📦 Next.js Bundle Analysis for safe-wallet-web

⚠️ Global Bundle Size Increased

Fifteen Pages Changed Size

github-actions bot commented Oct 21, 2024 • edited Loading

Coverage report

Test suite run success

notion-workspace bot commented Oct 22, 2024

compojoom left a comment

Choose a reason for hiding this comment

compojoom Oct 22, 2024

Choose a reason for hiding this comment

compojoom Oct 22, 2024

Choose a reason for hiding this comment

schmanu Oct 22, 2024

Choose a reason for hiding this comment

tmjssz Oct 22, 2024

Choose a reason for hiding this comment

schmanu left a comment

Choose a reason for hiding this comment

schmanu Oct 22, 2024

Choose a reason for hiding this comment

schmanu Oct 22, 2024

Choose a reason for hiding this comment

schmanu Oct 22, 2024

Choose a reason for hiding this comment

tmjssz commented Oct 23, 2024 • edited Loading

compojoom commented Oct 23, 2024

gitpoap-bot bot commented Oct 24, 2024

liliya-soroka commented Oct 24, 2024

tmjssz commented Oct 21, 2024 •

edited

Loading

github-actions bot commented Oct 21, 2024 •

edited

Loading

github-actions bot commented Oct 21, 2024 •

edited

Loading

github-actions bot commented Oct 21, 2024 •

edited

Loading

tmjssz commented Oct 23, 2024 •

edited

Loading