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

compojoom commented 1 month ago

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

Add a swaps block on dashboard

github-actions[bot] commented 1 month ago

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[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}

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

Coverage report

St.^{:grey_question:}	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.^{:grey_question:}

| 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 4dc4718c37639b7b6897b744fa464fec1658ee9a

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}

usame-algan commented 1 month ago

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[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}

francovenica commented 1 month ago

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

Good catch! Check again please!

francovenica commented 1 month ago

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

francovenica commented 1 month ago

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

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

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

compojoom commented 1 month ago

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

Swaps and Safepass should be aligned now.

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}

francovenica commented 1 month ago

LGTM

safe-global / safe-wallet-web