feat: add promo widget for swaps [SWAP-87] #3771

compojoom · 2024-05-29T22:17:45Z

What it solves

Displays a swaps promo block(that can be hidden) on the dashboard.
Right now we are loading a .png, but @TanyaEfremova would give us an svg.

Resolves #

How this PR fixes it

Adds new Swap promo widget on the dashboard
Adjusts the Chip style to match Figma design

Other changes:

Adjusts the Queue counter style to match Figma design
Adjusts the sidebar badges to match Figma design

How to test it

Open the dashboard and observe the new widget
Press "Try it now" and be navigated to the swaps page
Press "Don't show again", the widget should permanently disappear

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) 🧑‍💻

notion-workspace · 2024-05-29T22:17:48Z

Add a swaps block on dashboard

github-actions · 2024-05-29T22:17:59Z

Branch preview

✅ Deploy successful!

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

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

github-actions · 2024-05-29T22:19: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}

github-actions · 2024-05-29T22:21:47Z

📦 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`	`950.52 KB` (🟡 +177 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!

One Page Changed Size

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

Page	Size (compressed)	First Load
`/home`	`58.77 KB` (🟡 +95 B)	1009.29 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 · 2024-05-29T22:23:36Z

Coverage report

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	79.49% (+0% 🔼)	11510/14480
🔴	Branches	58.57%	2767/4724
🟡	Functions	66.75% (-0.02% 🔻)	1851/2773
🟢	Lines	80.84% (+0% 🔼)	10382/12843

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🟢	`...` / index.tsx	100%	100%	0%	100%

Test suite run success

1443 tests passing in 199 suites.

Report generated by 🧪jest coverage report action from 4dc4718

github-actions · 2024-05-31T08:54: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

Looks good!
just one small thing. It looks a bit odd next to the safe pass widget, since they are very similar but the buttons are way bigger for the safe pass one. Do we plan to show both of these together or is it one promotion at a time?

usame-algan · 2024-05-31T20:39:20Z

Looks good!

just one small thing. It looks a bit odd next to the safe pass widget, since they are very similar but the buttons are way bigger for the safe pass one. Do we plan to show both of these together or is it one promotion at a time?

Noticed this too. AFAIK we will show both at the same time. @TanyaEfremova do you think we should adjust either one of them to make it look more consistent?

github-actions · 2024-06-03T13:28:37Z

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}

francovenica · 2024-06-04T04:36:42Z

The widget should be network sensitive, so it should only show in ETH, GNO and Sepolia.
Or if we want to show it everywhere for the sake of promotion, we should have "try it now" button grayed out with a tooltip saying that is only supported in those networks (But personally I'd prefer the widget to only show in the supported networks)

compojoom · 2024-06-04T08:40:50Z

Good catch! Check again please!

francovenica · 2024-06-04T19:22:46Z

The widget is now network sensitive, so that's fixed

francovenica · 2024-06-04T19:24:51Z

Are we going to take in account James and Usames' comments regarding the buttons? I personally don't think is that big of a deal if this is widget is going to be there for some time and not forever.
In case you decide to change those buttons, change as well the margin on the left side to match the widget bellow

TanyaEfremova · 2024-06-05T07:58:18Z

Left margin is indeed different, let's align with the Safe{Pass} widget: 40px on the left side.
Buttons should use style Large in both widgets.

katspaugh · 2024-06-05T08:29:17Z

As a side note, we should avoid using margins/paddings that are not a multiple of 8 px.

compojoom · 2024-06-06T13:01:17Z

@TanyaEfremova and I aggreed on 32px or also known as var(--space-4) :)

Swaps and Safepass should be aligned now.

github-actions · 2024-06-06T13:01:45Z

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}

francovenica · 2024-06-10T02:00:07Z

LGTM

usame-algan requested a review from jmealy May 31, 2024 08:55

usame-algan marked this pull request as ready for review May 31, 2024 08:55

jmealy approved these changes May 31, 2024

View reviewed changes

compojoom and others added 7 commits June 6, 2024 14:50

feat: add promo widget for swaps

43cd5be

fix: optimize widget for mobile, adjust badges and chips style

2a618ad

fix: Hide empty grid containers on dashboard

62a8114

fix: switch png image with svg version

daf5192

fix: fon’t show swaps promo on unsupported chains

0346d97

fix: properly align dashboard components

3fd7e27

fix: wrong rebase

02b0fad

compojoom force-pushed the feat-promo-widget-swaps branch from 89b964b to 02b0fad Compare June 6, 2024 13:00

fix: font size and padding on sidebar chips

4dc4718

compojoom merged commit 9ad7349 into dev Jun 10, 2024
13 of 14 checks passed

compojoom deleted the feat-promo-widget-swaps branch June 10, 2024 03:55

github-actions bot locked and limited conversation to collaborators Jun 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add promo widget for swaps [SWAP-87] #3771

feat: add promo widget for swaps [SWAP-87] #3771

compojoom commented May 29, 2024 •

edited by usame-algan

Loading

notion-workspace bot commented May 29, 2024

github-actions bot commented May 29, 2024 •

edited

Loading

github-actions bot commented May 29, 2024

github-actions bot commented May 29, 2024 •

edited

Loading

github-actions bot commented May 29, 2024 •

edited

Loading

github-actions bot commented May 31, 2024 •

edited

Loading

jmealy left a comment

usame-algan commented May 31, 2024

github-actions bot commented Jun 3, 2024 •

edited

Loading

francovenica commented Jun 4, 2024

compojoom commented Jun 4, 2024

francovenica commented Jun 4, 2024

francovenica commented Jun 4, 2024

TanyaEfremova commented Jun 5, 2024

katspaugh commented Jun 5, 2024

compojoom commented Jun 6, 2024

github-actions bot commented Jun 6, 2024 •

edited

Loading

francovenica commented Jun 10, 2024

feat: add promo widget for swaps [SWAP-87] #3771

feat: add promo widget for swaps [SWAP-87] #3771

Conversation

compojoom commented May 29, 2024 • edited by usame-algan Loading

What it solves

How this PR fixes it

How to test it

Screenshots

Checklist

notion-workspace bot commented May 29, 2024

github-actions bot commented May 29, 2024 • edited Loading

Branch preview

github-actions bot commented May 29, 2024

ESLint Summary View Full Report

github-actions bot commented May 29, 2024 • edited Loading

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

⚠️ Global Bundle Size Increased

One Page Changed Size

github-actions bot commented May 29, 2024 • edited Loading

Coverage report

Test suite run success

github-actions bot commented May 31, 2024 • edited Loading

ESLint Summary View Full Report

jmealy left a comment

Choose a reason for hiding this comment

usame-algan commented May 31, 2024

github-actions bot commented Jun 3, 2024 • edited Loading

ESLint Summary View Full Report

francovenica commented Jun 4, 2024

compojoom commented Jun 4, 2024

francovenica commented Jun 4, 2024

francovenica commented Jun 4, 2024

TanyaEfremova commented Jun 5, 2024

katspaugh commented Jun 5, 2024

compojoom commented Jun 6, 2024

github-actions bot commented Jun 6, 2024 • edited Loading

ESLint Summary View Full Report

francovenica commented Jun 10, 2024

compojoom commented May 29, 2024 •

edited by usame-algan

Loading

github-actions bot commented May 29, 2024 •

edited

Loading

github-actions bot commented May 29, 2024 •

edited

Loading

github-actions bot commented May 29, 2024 •

edited

Loading

github-actions bot commented May 31, 2024 •

edited

Loading

github-actions bot commented Jun 3, 2024 •

edited

Loading

github-actions bot commented Jun 6, 2024 •

edited

Loading