Feat(Safenet): Update Safenet sidebar #4969

germartinez · 2025-02-12T16:27:39Z

What it solves

Resolves https://github.com/safe-global/safenet/issues/346

Screenshots

Non-Safenet account

Pure Safenet account

Safenet account + other unsupported chains

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 · 2025-02-12T16:27:53Z

Branch preview

✅ Deploy successful!

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

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

github-actions · 2025-02-12T16:35:20Z

Coverage report for `apps/web`

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	74.04% (-0.03% 🔻)	14909/20136
🔴	Branches	51.81% (+0.1% 🔼)	3573/6897
🔴	Functions	56.64% (-0.09% 🔻)	2106/3718
🟡	Lines	75.58% (-0.03% 🔻)	13533/17905

Show new covered files 🐣

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

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🔴	`...` / safenet.ts	37.04% (-1.42% 🔻)	100%	7.69%	36% (-1.5% 🔻)
🟡	`...` / index.tsx	72.73% (-4.55% 🔻)	75% (-25% 🔻)	60%	71.43% (-4.76% 🔻)
🟡	`...` / index.tsx	60% (-2.5% 🔻)	0%	0%	65.22% (-2.96% 🔻)
🔴	`...` / MultiAccountItem.tsx	28.24% (-3.06% 🔻)	0%	0%	32.17% (-2.78% 🔻)

Test suite run success

1794 tests passing in 242 suites.

Report generated by 🧪jest coverage report action from 1adf415

github-actions · 2025-02-12T20:32:49Z

📦 Next.js Bundle Analysis for @safe-global/web

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

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`1.06 MB` (🟡 +70.6 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!

New Pages Added

The following pages were added to the bundle from the code in this PR:

Page	Size (compressed)	First Load
`/new-safe/safenet-create`	`27.74 KB`	1.08 MB
`/settings/safenet`	`1.97 KB`	1.06 MB

Thirty-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
`/`	`508 B` (🟢 -2 B)	1.06 MB
`/address-book`	`23.21 KB` (🟡 +142 B)	1.08 MB
`/apps`	`35.84 KB` (🟡 +2.11 KB)	1.09 MB
`/apps/custom`	`33.9 KB` (🟡 +2.12 KB)	1.09 MB
`/apps/open`	`55.74 KB` (🟡 +2.13 KB)	1.11 MB
`/balances`	`29.94 KB` (🟡 +240 B)	1.09 MB
`/balances/nfts`	`9.55 KB` (🟡 +10 B)	1.07 MB
`/bridge`	`2.56 KB` (🟡 +2 B)	1.06 MB
`/cookie`	`8.77 KB` (🟡 +1 B)	1.07 MB
`/home`	`61.56 KB` (🟡 +2.3 KB)	1.12 MB
`/new-safe/advanced-create`	`28.86 KB` (🟡 +2.41 KB)	1.09 MB
`/new-safe/create`	`28.31 KB` (🟡 +2.72 KB)	1.09 MB
`/new-safe/load`	`6.21 KB` (🟡 +123 B)	1.06 MB
`/privacy`	`14.57 KB` (🟡 +2 B)	1.07 MB
`/settings/appearance`	`2.28 KB` (🟡 +38 B)	1.06 MB
`/settings/cookies`	`1.92 KB` (🟡 +46 B)	1.06 MB
`/settings/data`	`1.83 KB` (🟡 +43 B)	1.06 MB
`/settings/environment-variables`	`3.32 KB` (🟡 +44 B)	1.06 MB
`/settings/modules`	`4.14 KB` (🟡 +91 B)	1.06 MB
`/settings/notifications`	`6.37 KB` (🟢 -14.95 KB)	1.06 MB
`/settings/safe-apps`	`20.44 KB` (🟡 +2.17 KB)	1.08 MB
`/settings/security`	`2.37 KB` (🟡 +39 B)	1.06 MB
`/settings/setup`	`30.93 KB` (🟡 +197 B)	1.09 MB
`/share/safe-app`	`7.56 KB` (🟢 -5 B)	1.07 MB
`/swap`	`761 B` (🟡 +1 B)	1.06 MB
`/terms`	`12.93 KB` (🟡 +1 B)	1.07 MB
`/transactions`	`99.6 KB` (🟡 +3.03 KB)	1.16 MB
`/transactions/history`	`99.56 KB` (🟡 +3.03 KB)	1.16 MB
`/transactions/messages`	`60.39 KB` (🟡 +2.09 KB)	1.12 MB
`/transactions/msg`	`56.65 KB` (🟡 +2.1 KB)	1.11 MB
`/transactions/queue`	`49.5 KB` (🟡 +2.1 KB)	1.11 MB
`/transactions/tx`	`48.86 KB` (🟡 +2.1 KB)	1.11 MB
`/welcome/accounts`	`409 B` (🟡 +2 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.

germartinez · 2025-02-14T13:20:33Z

apps/web/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx

@@ -127,6 +129,24 @@ function useMultiAccountItemData(multiSafeAccountItem: MultiChainSafeItem) {

  const deployedChainIds = useMemo(() => sortedSafes.map((safe) => safe.chainId), [sortedSafes])

+  const hasSafenetFeature = useHasSafenetFeature()
+  const { data: safenetConfig } = useGetSafenetAccountQuery({ safeAddress: address }, { skip: !hasSafenetFeature })


This request is sent for every account added to the sidebar. The succesful responses are handled by RTK and cached, but the failed ones are not.

This means that this request is sent every time the sidebar is opened for all the non-Safenet accounts, creating a possible issue if there are many Safes added.

We should check if it makes sense to avoid returning an Error 404 when Safes are not found in the service so the response is cached as well.

Agree! I think it makes sense to just return an empty response with 200 OK.

gjeanmart

It looks good from my perspective (I'm not very much familiar with Wallet's codebase)

gjeanmart · 2025-02-14T15:25:33Z

apps/web/src/features/safenet/components/SafenetAccountList/index.tsx

+  return safenetSafes.length > 0 ? (
+    <Box className={css.safenetList}>
+      <Box className={css.safenetListHeader}>
+        {isDarkMode ? <SafenetLogo height="12" /> : <SafenetDarkLogo height="12" />}
+      </Box>
+      {safenetSafes.map((safeItem) => (
+        <SingleAccountItem
+          onLinkClick={onLinkClick}
+          safeItem={safeItem}
+          key={`${safeItem.chainId}:${safeItem.address}`}
+          isMultiChainItem
+          isSafenetItem
+        />
+      ))}
+    </Box>
+  ) : undefined


nit: you can do this instead

Suggested change

return safenetSafes.length > 0 ? (

<Box className={css.safenetList}>

<Box className={css.safenetListHeader}>

{isDarkMode ? <SafenetLogo height="12" /> : <SafenetDarkLogo height="12" />}

</Box>

{safenetSafes.map((safeItem) => (

<SingleAccountItem

onLinkClick={onLinkClick}

safeItem={safeItem}

key={`${safeItem.chainId}:${safeItem.address}`}

isMultiChainItem

isSafenetItem

/>

))}

</Box>

) : undefined

return safenetSafes.length && (

<Box className={css.safenetList}>

<Box className={css.safenetListHeader}>

{isDarkMode ? <SafenetLogo height="12" /> : <SafenetDarkLogo height="12" />}

</Box>

{safenetSafes.map((safeItem) => (

<SingleAccountItem

onLinkClick={onLinkClick}

safeItem={safeItem}

key={`${safeItem.chainId}:${safeItem.address}`}

isMultiChainItem

isSafenetItem

/>

))}

</Box>

)

gjeanmart · 2025-02-14T15:32:04Z

apps/web/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx

@@ -127,6 +129,24 @@ function useMultiAccountItemData(multiSafeAccountItem: MultiChainSafeItem) {

  const deployedChainIds = useMemo(() => sortedSafes.map((safe) => safe.chainId), [sortedSafes])

+  const hasSafenetFeature = useHasSafenetFeature()
+  const { data: safenetConfig } = useGetSafenetAccountQuery({ safeAddress: address }, { skip: !hasSafenetFeature })


Agree! I think it makes sense to just return an empty response with 200 OK.

Update Safenet sidebar header

75bb474

germartinez added 5 commits February 12, 2025 17:48

Add getSafenetAccount to the Safenet API

0369373

Add the Safenet tag

d6eeff6

Add Safenet to NetworkLogosList

858a3bd

Add Safenet tag to SingleAccountItem

83b21db

Add Safenet styles to MultiAccountItem

59bd344

germartinez force-pushed the safenet-sidebar branch from 4460349 to 59bd344 Compare February 12, 2025 20:27

germartinez marked this pull request as ready for review February 12, 2025 20:28

germartinez added 6 commits February 12, 2025 22:08

Add SafenetAccountList

52cfdf8

Add SafeMultichainIndicator

788f3c8

Use an SVG for the Safenet icon

38eec8f

Adjust SafeTag in dark mode

7401afa

Extract Safenet sidebar to feature folder

6322a2c

Fix pin Safes deployed only on Safenet chains

1adf415

germartinez commented Feb 14, 2025

View reviewed changes

germartinez requested review from gjeanmart and schmanu February 14, 2025 13:48

gjeanmart approved these changes Feb 14, 2025

View reviewed changes

germartinez merged commit 68a1f8c into safenet Feb 14, 2025
11 of 13 checks passed

germartinez deleted the safenet-sidebar branch February 14, 2025 17:55

github-actions bot locked and limited conversation to collaborators Feb 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat(Safenet): Update Safenet sidebar #4969

Feat(Safenet): Update Safenet sidebar #4969

germartinez commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Feb 12, 2025 •

edited

Loading

germartinez Feb 14, 2025

gjeanmart Feb 14, 2025

gjeanmart left a comment

gjeanmart Feb 14, 2025

gjeanmart Feb 14, 2025

Feat(Safenet): Update Safenet sidebar #4969

Feat(Safenet): Update Safenet sidebar #4969

Conversation

germartinez commented Feb 12, 2025 • edited Loading

What it solves

Screenshots

Non-Safenet account

Pure Safenet account

Safenet account + other unsupported chains

Checklist

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

Branch preview

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

Coverage report for apps/web

Test suite run success

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

📦 Next.js Bundle Analysis for @safe-global/web

⚠️ Global Bundle Size Increased

New Pages Added

Thirty-three Pages Changed Size

germartinez Feb 14, 2025

Choose a reason for hiding this comment

gjeanmart Feb 14, 2025

Choose a reason for hiding this comment

gjeanmart left a comment

Choose a reason for hiding this comment

gjeanmart Feb 14, 2025

Choose a reason for hiding this comment

gjeanmart Feb 14, 2025

Choose a reason for hiding this comment

germartinez commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Feb 12, 2025 •

edited

Loading

Coverage report for `apps/web`

github-actions bot commented Feb 12, 2025 •

edited

Loading