Feat: redesign Safe List in sidebar #3245

katspaugh · 2024-02-13T10:38:37Z

Redesign the Safe List in the sidebar according to the new Login Page design (see #3233).

Displaying pending Txs and fiat balance will come in a separate PR

github-actions · 2024-02-13T10:38:49Z

Branch preview

✅ Deploy successful!

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

github-actions · 2024-02-13T10:39:49Z

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-13T10:42:13Z

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

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

🎉 Global Bundle Size Decreased

Page	Size (compressed)
`global`	`1.03 MB` (🟢 -3.69 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!

Twenty-three Pages Changed Size

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

Page	Size (compressed)	First Load
`/`	`567 B` (🟡 +3 B)	1.03 MB
`/address-book`	`28.03 KB` (🟡 +1.49 KB)	1.05 MB
`/apps`	`48.2 KB` (🟡 +48 B)	1.07 MB
`/apps/custom`	`39.37 KB` (🟡 +41 B)	1.06 MB
`/apps/open`	`65.74 KB` (🟡 +1.84 KB)	1.09 MB
`/balances`	`30.31 KB` (🟡 +1.42 KB)	1.06 MB
`/balances/nfts`	`20.63 KB` (🟡 +149 B)	1.05 MB
`/home`	`54.52 KB` (🟡 +1.5 KB)	1.08 MB
`/new-safe/create`	`33.22 KB` (🟡 +1.54 KB)	1.06 MB
`/new-safe/load`	`19.3 KB` (🟡 +16 B)	1.04 MB
`/settings/appearance`	`8.54 KB` (🟡 +1 B)	1.03 MB
`/settings/notifications`	`12.31 KB` (🟢 -188 B)	1.04 MB
`/settings/security-login`	`30.93 KB` (🟡 +1.47 KB)	1.06 MB
`/settings/setup`	`32.68 KB` (🟡 +1.49 KB)	1.06 MB
`/share/safe-app`	`11.09 KB` (🟡 +183 B)	1.04 MB
`/transactions`	`93.35 KB` (🟡 +985 B)	1.12 MB
`/transactions/history`	`93.31 KB` (🟡 +984 B)	1.12 MB
`/transactions/messages`	`50.12 KB` (🟡 +957 B)	1.07 MB
`/transactions/queue`	`45.54 KB` (🟡 +1.26 KB)	1.07 MB
`/transactions/tx`	`34.63 KB` (🟡 +816 B)	1.06 MB
`/welcome`	`6.53 KB` (🟢 -2.16 KB)	1.03 MB
`/welcome/accounts`	`379 B` (🟢 -2.43 KB)	1.03 MB
`/welcome/social-login`	`7.03 KB` (🟢 -1.7 KB)	1.03 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-13T10:45:58Z

Coverage report

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	78.68% (+0.07% 🔼)	11562/14695
🔴	Branches	56.74% (-0.03% 🔻)	2588/4561
🟡	Functions	63.6% (+0.12% 🔼)	1840/2893
🟢	Lines	80.02% (+0.03% 🔼)	10430/13035

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🔴	`...` / NoAssets.tsx	55.56%	0%	0%	58.82%
🟡	`...` / index.tsx	60%	0%	0%	66.67%

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🟢	`...` / addedSafesSlice.ts	84.21% (-4.12% 🔻)	50% (-21.43% 🔻)	83.33% (-3.33% 🔻)	83.87% (-4.36% 🔻)
🟡	`...` / settingsSlice.ts	73.44% (-2.37% 🔻)	83.33%	66.67% (-2.9% 🔻)	65.31% (-2.78% 🔻)
🟢	`...` / index.tsx	94.74%	96% (-0.3% 🔻)	50%	100%
🟢	`...` / useSafeAppsFilters.ts	95% (-0.45% 🔻)	0%	100%	94.74% (-0.5% 🔻)
🟢	`...` / CheckBalance.tsx	84.21% (-9.54% 🔻)	25%	50% (-50% 🔻)	82.35% (-10.5% 🔻)
🔴	`...` / utils.ts	36.36% (-1.45% 🔻)	26.83% (-2.12% 🔻)	21.43% (+1.43% 🔼)	36.11% (-2.72% 🔻)
🟢	`...` / index.tsx	87.5%	70.37% (-2.96% 🔻)	60%	86.54%
🔴	`...` / ReviewSpendingLimit.tsx	42.11% (-0.75% 🔻)	0%	0%	44.44% (-0.56% 🔻)
🟡	`...` / ConnectWalletButton.tsx	77.78%	80% (-20% 🔻)	50%	75%

Test suite run success

1397 tests passing in 191 suites.

Report generated by 🧪jest coverage report action from 6c1d3f8

* redesign data widget * adjust margins * add separator and fix padding * move data widget to MyAccounts and remove SafeListDrawer * remove unecessary padding * remove unused styles * do not wait for safes list on welcome page in cypress tests

* display new safe list in sidebar * align chain indicators in the sidebar * add styles for currently open safe in the sidebar close drawer after choosing a safe in the sidebar * remove duplicate definition of isSidebar * fix: css formatting * Update src/components/welcome/MyAccounts/styles.module.css Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com> * Update src/components/welcome/MyAccounts/AccountItem.tsx Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com> * Update src/components/welcome/MyAccounts/AccountItem.tsx Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com> * Update src/components/welcome/MyAccounts/index.tsx Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com> * Update src/components/welcome/MyAccounts/styles.module.css Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com> * Update src/components/welcome/MyAccounts/styles.module.css Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com> * Update src/components/welcome/MyAccounts/styles.module.css Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com> * Update src/components/welcome/MyAccounts/styles.module.css Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com> * Update src/components/welcome/MyAccounts/styles.module.css Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com> * use container queries to apply styles to sidebar * hide Chain indicator name in reponsive mode * add watchlist to my accounts page * separate pagination for watchlist and owned safes * add watchlist flag * filter out watchlist from owned safes * rename adding a safe to adding to watchlist * fix owned safe count * restore page size, default shown, and max default shown * create PaginatedSafeList component for watchlist and owned safes * make isWatchlist non optional * type title as ReactNode and rename flag to isOnWatchlist * rename setMaxShownSafes everywhere * show watchlist safe count --------- Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com>

github-actions · 2024-02-16T08:26: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}

katspaugh · 2024-02-16T11:56:50Z

Too many dividers :)

liliya-soroka · 2024-02-16T12:23:08Z

To the comment above - looks different from the design -

github-actions · 2024-02-16T17:04:55Z

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}

liliya-soroka · 2024-02-19T14:57:48Z

Verified and can be included into RC. Let's check it together with Counterfactual safe feature

liliya-soroka · 2024-02-19T14:59:30Z

@mike10ca , a new Side menu will break our sidebar menu regression cases - https://github.com/safe-global/safe-wallet-web/actions/runs/7960401233

) * add wallet connect button for when no wallet is connected * fix borders in sidebar * remove unused styles * use shorthand styles * pass no safes message as a prop * use existing connect wallet component

Refactor: do not update added Safes balances (#3243)

3512e11

jmealy and others added 4 commits February 14, 2024 11:56

Display simplified safelist in the sidebar (#3248)

0c7cf21

Merge branch 'dev' into safelist

95d0771

jmealy marked this pull request as ready for review February 16, 2024 08:27

jmealy added 7 commits February 16, 2024 13:55

CHange add safe to watchlist texts

e5d421f

Merge branch 'dev' into safelist

8bbf461

fix: use darker grey for addresses

2b2098b

fix: make safe list margins consistent

502b6e1

fix: remove devider between watchlist and owned safes

8de5d33

fix: bottom padding on safe lists

743026a

fix: spacing in sidebar

ebfe991

show undeployed safes in the owned safes list (#3278)

b330624

katspaugh added this to the 1.30.0 milestone Feb 19, 2024

Add connect button to owned safe list when no wallet is connected (#3274

6c1d3f8

) * add wallet connect button for when no wallet is connected * fix borders in sidebar * remove unused styles * use shorthand styles * pass no safes message as a prop * use existing connect wallet component

katspaugh merged commit 2a1cb02 into dev Feb 19, 2024
13 checks passed

katspaugh deleted the safelist branch February 19, 2024 15:49

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: redesign Safe List in sidebar #3245

Feat: redesign Safe List in sidebar #3245

katspaugh commented Feb 13, 2024 •

edited by jmealy

github-actions bot commented Feb 13, 2024 •

edited

github-actions bot commented Feb 13, 2024 •

edited

github-actions bot commented Feb 13, 2024 •

edited

github-actions bot commented Feb 13, 2024 •

edited

github-actions bot commented Feb 16, 2024 •

edited

katspaugh commented Feb 16, 2024

liliya-soroka commented Feb 16, 2024

github-actions bot commented Feb 16, 2024 •

edited

liliya-soroka commented Feb 19, 2024

liliya-soroka commented Feb 19, 2024 •

edited

Feat: redesign Safe List in sidebar #3245

Feat: redesign Safe List in sidebar #3245

Conversation

katspaugh commented Feb 13, 2024 • edited by jmealy

github-actions bot commented Feb 13, 2024 • edited

Branch preview

github-actions bot commented Feb 13, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented Feb 13, 2024 • edited

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

🎉 Global Bundle Size Decreased

Twenty-three Pages Changed Size

github-actions bot commented Feb 13, 2024 • edited

Coverage report

Test suite run success

github-actions bot commented Feb 16, 2024 • edited

ESLint Summary View Full Report

katspaugh commented Feb 16, 2024

liliya-soroka commented Feb 16, 2024

github-actions bot commented Feb 16, 2024 • edited

ESLint Summary View Full Report

liliya-soroka commented Feb 19, 2024

liliya-soroka commented Feb 19, 2024 • edited

katspaugh commented Feb 13, 2024 •

edited by jmealy

github-actions bot commented Feb 13, 2024 •

edited

github-actions bot commented Feb 13, 2024 •

edited

github-actions bot commented Feb 13, 2024 •

edited

github-actions bot commented Feb 13, 2024 •

edited

github-actions bot commented Feb 16, 2024 •

edited

github-actions bot commented Feb 16, 2024 •

edited

liliya-soroka commented Feb 19, 2024 •

edited