[Counterfactual] Add first steps widget #3218

usame-algan · 2024-02-07T12:38:20Z

What it solves

Part of #3207

How this PR fixes it

Creates a new widget for the dashboard to show first steps
Creates StatusProgress component that can be reused for other widgets

How to test it

Create a new counterfactual safe
Observe first steps card visible on the dashboard
Complete first steps or deploy safe immediately
Observe cards are not visible anymore

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-02-07T12:38:35Z

Branch preview

⏳ Deploying a preview site...

usame-algan · 2024-02-07T12:38:50Z

I think we can show this widget to any safe and add a close button in the corner to permanently hide it. cc @liliiaorlenko

github-actions · 2024-02-07T12:43:02Z

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-02-07T12:43:31Z

📦 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`	`1.02 MB` (🟡 +67 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!

Five Pages Changed Size

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

Page	Size (compressed)	First Load
`/home`	`81.19 KB` (🔴 +40.38 KB)	1.1 MB
`/new-safe/create`	`30.9 KB` (-1 B)	1.05 MB
`/new-safe/load`	`19.19 KB` (🟡 +49 B)	1.04 MB
`/settings/security-login`	`29.6 KB` (🟢 -4 B)	1.05 MB
`/settings/setup`	`71.32 KB` (🟡 +643 B)	1.09 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-02-07T12:50:46Z

Coverage report

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	78.59% (-0.02% 🔻)	11405/14512
🔴	Branches	56.15% (-0.05% 🔻)	2515/4479
🟡	Functions	63.11% (-0.07% 🔻)	1810/2868
🟡	Lines	79.9% (-0.01% 🔻)	10287/12875

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🟡	`...` / transaction-guards.ts	77.52% (-1.05% 🔻)	41.94% (-2.89% 🔻)	73.81% (-1.8% 🔻)	78.16% (-0.66% 🔻)
🟢	`...` / txHistorySlice.ts	84.62% (-10.62% 🔻)	60% (-40% 🔻)	50% (-50% 🔻)	90.91% (-9.09% 🔻)

Test suite run success

1389 tests passing in 188 suites.

Report generated by 🧪jest coverage report action from b86b66c

katspaugh · 2024-02-07T12:56:09Z

src/components/dashboard/FirstSteps/index.tsx

+  const totalNumberOfItems = items.length
+  const completedItems = items.filter((item) => item.completed)
+  const progress = Math.round((completedItems.length / totalNumberOfItems) * 100)


These three vars are only needed to compute the progress var. Extract them into a calculateProgress function?

katspaugh · 2024-02-07T12:57:05Z

src/components/dashboard/FirstSteps/index.tsx

+  const items = [
+    { name: 'Add funds', completed: hasNonZeroBalance },
+    { name: 'Create your first transaction', completed: hasOutgoingTransactions },
+    { name: 'Safe is ready', completed: hasNonZeroBalance && hasOutgoingTransactions },
+  ]


I would

define the names of steps as a sepate enum

memoize this object

I also removed the third step as its more like a success step when everything else is completed and the progress bar is more accurate without. I added it as an additional prop to StatusProgress instead.

katspaugh · 2024-02-07T13:49:08Z

src/components/dashboard/FirstSteps/index.tsx

+            </StatusItem>
+          )
+        })}
+        {completedName && <StatusItem completed={progress === 100}>{completedName}</StatusItem>}


Aren't all items supposed to be shown at all times? And if not completed it's grey?

On secound thought I think I will remove this again because its very specific for the counterfactual flow where we want to show the user the goal of these steps "Safe is ready" and there is an alternative design for that which I am planning to implement.

usame-algan · 2024-02-07T15:58:48Z

@katspaugh I implemented the alternative design with some placeholder values for counterfactual so I would wait to merge this until #3180 is merged.

github-actions · 2024-02-08T11:52:08Z

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-02-09T01:47:04Z

This ticket was tested and looks good, but with Usame we have decied to merge this ticket along with 3220 and 3214 since these 3 are piceces of a functionality, and it is easier to test all together.

usame-algan force-pushed the first-steps-widget branch from 09b309f to feb856b Compare February 7, 2024 12:43

katspaugh reviewed Feb 7, 2024

View reviewed changes

katspaugh approved these changes Feb 7, 2024

View reviewed changes

usame-algan added 5 commits February 8, 2024 12:50

feat: Add first steps widget to dashboard

e82c79d

fix: Display the widget in the dashboard

d8145eb

fix: Extract last step as completed step, use enum and memoize items

3c7788e

fix: Revert change to completedName

be8cbb5

fix: Remove StatusProgress and add individual first step cards

c6cccc1

usame-algan force-pushed the first-steps-widget branch from 3fe1dd8 to c6cccc1 Compare February 8, 2024 11:50

fix: Add counterfactual check to widget

b86b66c

usame-algan force-pushed the first-steps-widget branch from 34c56e0 to b86b66c Compare February 8, 2024 14:00

usame-algan changed the title ~~feat: Add first steps widget~~ [Counterfactual] Add first steps widget Feb 8, 2024

usame-algan changed the base branch from dev to cf-dashboard February 9, 2024 14:09

fix: Remove steps badges

0804a08

usame-algan force-pushed the first-steps-widget branch from 5c4e44d to 0804a08 Compare February 9, 2024 14:14

usame-algan merged commit d0f3fb5 into cf-dashboard Feb 9, 2024
8 of 12 checks passed

usame-algan deleted the first-steps-widget branch February 9, 2024 14:15

github-actions bot locked and limited conversation to collaborators Feb 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Counterfactual] Add first steps widget #3218

[Counterfactual] Add first steps widget #3218

usame-algan commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024 •

edited

Loading

usame-algan commented Feb 7, 2024

github-actions bot commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024 •

edited

Loading

katspaugh Feb 7, 2024

katspaugh Feb 7, 2024

usame-algan Feb 7, 2024

katspaugh Feb 7, 2024

usame-algan Feb 7, 2024

usame-algan commented Feb 7, 2024

github-actions bot commented Feb 8, 2024 •

edited

Loading

francovenica commented Feb 9, 2024

[Counterfactual] Add first steps widget #3218

[Counterfactual] Add first steps widget #3218

Conversation

usame-algan commented Feb 7, 2024 • edited Loading

What it solves

How this PR fixes it

How to test it

Screenshots

Checklist

github-actions bot commented Feb 7, 2024 • edited Loading

Branch preview

usame-algan commented Feb 7, 2024

github-actions bot commented Feb 7, 2024 • edited Loading

ESLint Summary View Full Report

github-actions bot commented Feb 7, 2024 • edited Loading

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

⚠️ Global Bundle Size Increased

Five Pages Changed Size

github-actions bot commented Feb 7, 2024 • edited Loading

Coverage report

Test suite run success

katspaugh Feb 7, 2024

Choose a reason for hiding this comment

katspaugh Feb 7, 2024

Choose a reason for hiding this comment

usame-algan Feb 7, 2024

Choose a reason for hiding this comment

katspaugh Feb 7, 2024

Choose a reason for hiding this comment

usame-algan Feb 7, 2024

Choose a reason for hiding this comment

usame-algan commented Feb 7, 2024

github-actions bot commented Feb 8, 2024 • edited Loading

ESLint Summary View Full Report

francovenica commented Feb 9, 2024

usame-algan commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 8, 2024 •

edited

Loading