feat: [Counterfactual] Update UI elements #3234

usame-algan · 2024-02-09T14:18:33Z

What it solves

Resolves #3207

How this PR fixes it

Updates the overview widget design
Adds a "First steps" widget that is only visible for undeployed safes
Hide every other widget for undeployed safes
Hide the overview buttons for undeployed safes
Shows an info message on the assets page with the option to activate the safe immediately
Displays a new First transaction dialog
Shows an indicator in the sidebar about the safe account status

How to test it

Only the First steps widget should be visible
There should be no buttons visible in the overview widget
There should be an info message on the assets page with an "Activate now" button
Pressing "Create transaction" should display the new dialog with multiple options
There should be a warning indicator in the sidebar as long as the safe is not deploying
Once a deployment is underway the indicator should turn blue and spin

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

* fix: Implement the dashboard overview widget design * test: Update dashboard smoke e2e test

* feat: Add first steps widget to dashboard * fix: Display the widget in the dashboard * fix: Extract last step as completed step, use enum and memoize items * fix: Revert change to completedName * fix: Remove StatusProgress and add individual first step cards * fix: Add counterfactual check to widget * fix: Remove steps badges

…rypto (#3220) * fix: Show dialog with on-ramp options when pressing buy crypto * refactor: Fix typo in BuyCryptoButton component * fix: Separate logo from text and add a title

github-actions · 2024-02-09T14:18:46Z

Branch preview

✅ Deploy successful!

https://cf_dashboard--walletweb.review-wallet-web.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

github-actions · 2024-02-09T14:19: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}

github-actions · 2024-02-09T14:22:19Z

📦 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.03 MB` (🟡 +3.62 KB)

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!

Twelve 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/open`	`63.84 KB` (🟢 -351 B)	1.09 MB
`/balances`	`28.73 KB` (🟡 +621 B)	1.06 MB
`/balances/nfts`	`20.49 KB` (-1 B)	1.05 MB
`/home`	`52.77 KB` (🔴 +11.4 KB)	1.08 MB
`/new-safe/create`	`31.59 KB` (🟢 -321 B)	1.06 MB
`/settings/security-login`	`29.46 KB` (🟢 -164 B)	1.06 MB
`/settings/setup`	`31.19 KB` (🟢 -41.22 KB)	1.06 MB
`/transactions`	`92.32 KB` (🟢 -354 B)	1.12 MB
`/transactions/history`	`92.29 KB` (🟢 -356 B)	1.12 MB
`/transactions/messages`	`49.12 KB` (🟢 -355 B)	1.08 MB
`/transactions/queue`	`44.21 KB` (🟢 -358 B)	1.07 MB
`/transactions/tx`	`33.76 KB` (🟢 -355 B)	1.06 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-09T14:25:46Z

Coverage report

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	78.66% (-0.04% 🔻)	11595/14740
🔴	Branches	56.71% (-0.06% 🔻)	2593/4572
🟡	Functions	63.41% (-0.23% 🔻)	1842/2905
🟢	Lines	80.04% (-0% 🔻)	10459/13068

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🔴	`...` / ActivateAccountButton.tsx	50%	0%	0%	56.25%
🔴	`...` / index.tsx	55.56%	0%	0%	58.82%
🟡	`...` / index.tsx	62.16%	0%	0%	69.7%

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% 🔻)
🔴	`...` / utils.ts	37.82% (+1.45% 🔼)	28.95% (+2.12% 🔼)	20% (-1.43% 🔻)	38.83% (+2.72% 🔼)

Test suite run success

1402 tests passing in 191 suites.

Report generated by 🧪jest coverage report action from aae01f7

…able

github-actions · 2024-02-12T10:08:47Z

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}

# Conflicts: # src/components/dashboard/index.tsx

…ate assets check balance view

# Conflicts: # src/services/analytics/events/overview.ts

github-actions · 2024-02-13T21:11:12Z

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}

# Conflicts: # src/components/common/BuyCryproButton/index.tsx # src/components/dashboard/Overview/Overview.tsx # src/features/counterfactual/ActivateAccount.tsx

github-actions · 2024-02-15T14:01:04Z

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}

…checks, reset watcher on fail

francovenica · 2024-02-16T04:17:06Z

I wasn't able to reproduce the issue Andrei had with the popup of confirmation after the safe is deployed.

I'll keep the ticket up since some give was still being given in a slack thread, but at least from my side the dashboard looks fine

liliya-soroka · 2024-02-16T10:43:44Z

From the UI the PR looks good.
After passing checks, the PR can be merged
@usame-algan

src/components/common/BuyCryptoButton/index.tsx

src/components/dashboard/FirstSteps/index.tsx

katspaugh · 2024-02-16T13:21:07Z

src/features/counterfactual/utils.ts

+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    const txResponse = await provider.getTransaction(txHash)
+    if (txResponse !== null) {
+      return txResponse
+    }
+    if (attempt < maxAttempts - 1) {
+      await delay(delayMs)
+    }
+  }
+  throw new Error('Transaction not found')
+}


We have the exponential-backoff package for that. Possible to use that?

I have a local stash to replace that package with our own implementation so I would leave it as is for now since we will remove that dependency anyway.

usame-algan added 3 commits February 9, 2024 15:08

[Counterfactual] Implement the dashboard overview widget design (#3214)

911d7ea

* fix: Implement the dashboard overview widget design * test: Update dashboard smoke e2e test

[Counterfactual] Show dialog with on-ramp options when pressing buy c…

bef5740

…rypto (#3220) * fix: Show dialog with on-ramp options when pressing buy crypto * refactor: Fix typo in BuyCryptoButton component * fix: Separate logo from text and add a title

usame-algan added 4 commits February 9, 2024 15:32

fix: Display add funds cta on dashboard

8f1f5e2

fix: Only show add funds cta if user has no funds

68dfeed

fix: Adjust design

e14e0c5

fix: Badge color in dark mode, add back hasNoAssets check in assets t…

ec5ae6d

…able

fix: Show ETH balance in sidebar if not deployed

2b64c1b

usame-algan force-pushed the cf-dashboard branch from 19901ec to 2b64c1b Compare February 12, 2024 12:06

usame-algan added 4 commits February 12, 2024 14:05

fix: Hide non-onboard related dashboard widgets for undeployed safes

681ea9a

Merge remote-tracking branch 'origin/dev' into cf-dashboard

2304110

# Conflicts: # src/components/dashboard/index.tsx

fix: Icon color in pay now pay later for dark mode

8696dc0

fix: Update first steps widget, hide on-ramp widget on dashboard, upd…

b52fa59

…ate assets check balance view

usame-algan force-pushed the cf-dashboard branch from 42b489e to b52fa59 Compare February 13, 2024 15:52

usame-algan added 2 commits February 13, 2024 17:15

fix: Show status icon in sidebar header

b46b2cc

Merge remote-tracking branch 'origin/dev' into cf-dashboard

f8968c1

# Conflicts: # src/services/analytics/events/overview.ts

usame-algan added 3 commits February 14, 2024 13:32

fix: Hide overview buttons, hide activate now section

bca511c

fix: Remove on-ramp provider options and use a generic text instead

97619ce

feat: Add FirstTxFlow component to dashboard

75cb5f7

usame-algan force-pushed the cf-dashboard branch from 3bc17ad to 75cb5f7 Compare February 14, 2024 15:43

fix: Adjust first tx fee estimation message

889e9e8

usame-algan force-pushed the cf-dashboard branch from 970cadc to 889e9e8 Compare February 14, 2024 16:00

usame-algan added 2 commits February 15, 2024 13:20

fix: Update styles for global indicator

11d350d

feat: Add success screen for safe creation

229135a

usame-algan added 2 commits February 15, 2024 13:51

Merge remote-tracking branch 'origin/dev' into cf-dashboard

4df1127

# Conflicts: # src/components/common/BuyCryproButton/index.tsx # src/components/dashboard/Overview/Overview.tsx # src/features/counterfactual/ActivateAccount.tsx

feat: Show success screen, show processing state

d44e031

fix: Add indexed state and show success screen when indexed, hide tx …

663341e

…checks, reset watcher on fail

usame-algan requested review from katspaugh and schmanu February 15, 2024 17:44

fix: Revert changes to AddFunds widget

0fc7d5e

usame-algan added 2 commits February 16, 2024 12:39

Merge remote-tracking branch 'origin/dev' into cf-dashboard

0b227ad

fix: Remove .wait call and use watcher instead

73c42c4

usame-algan force-pushed the cf-dashboard branch from 1010f1b to 73c42c4 Compare February 16, 2024 12:20

refactor: Dynamically import ActivateAccountFlow

aae01f7

usame-algan changed the title ~~feat: [Counterfactual] Update dashboard widgets~~ feat: [Counterfactual] Update UI elements Feb 16, 2024

katspaugh reviewed Feb 16, 2024

View reviewed changes

src/components/common/BuyCryptoButton/index.tsx Show resolved Hide resolved

katspaugh reviewed Feb 16, 2024

View reviewed changes

src/components/dashboard/FirstSteps/index.tsx Show resolved Hide resolved

katspaugh reviewed Feb 16, 2024

View reviewed changes

katspaugh approved these changes Feb 16, 2024

View reviewed changes

usame-algan merged commit 0c9a326 into dev Feb 16, 2024
13 checks passed

usame-algan deleted the cf-dashboard branch February 16, 2024 14:14

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [Counterfactual] Update UI elements #3234

feat: [Counterfactual] Update UI elements #3234

usame-algan commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 12, 2024 •

edited

Loading

github-actions bot commented Feb 13, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024 •

edited

Loading

francovenica commented Feb 16, 2024

liliya-soroka commented Feb 16, 2024

katspaugh Feb 16, 2024

usame-algan Feb 16, 2024

feat: [Counterfactual] Update UI elements #3234

feat: [Counterfactual] Update UI elements #3234

Conversation

usame-algan commented Feb 9, 2024 • edited Loading

What it solves

How this PR fixes it

How to test it

Screenshots

Checklist

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

Branch preview

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

ESLint Summary View Full Report

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

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

⚠️ Global Bundle Size Increased

Twelve Pages Changed Size

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

Coverage report

Test suite run success

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

ESLint Summary View Full Report

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

ESLint Summary View Full Report

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

ESLint Summary View Full Report

francovenica commented Feb 16, 2024

liliya-soroka commented Feb 16, 2024

katspaugh Feb 16, 2024

Choose a reason for hiding this comment

usame-algan Feb 16, 2024

Choose a reason for hiding this comment

usame-algan commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 12, 2024 •

edited

Loading

github-actions bot commented Feb 13, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024 •

edited

Loading