feat(Safenet): Safenet feature flag #4810

germartinez · 2025-01-22T09:09:06Z

What it solves

This PR creates a feature flag for Safenet, to hide or display all the related components.

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

How to test it

Add NEXT_PUBLIC_IS_SAFENET_ENABLED to your .env file and try NEXT_PUBLIC_IS_SAFENET_ENABLED=true vs. NEXT_PUBLIC_IS_SAFENET_ENABLED=false. When set to true all Safenet features/components should be displaed, otherwise the Safenet features should be hidden.

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-01-22T09:09:19Z

Branch preview

✅ Deploy successful!

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

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

github-actions · 2025-01-22T09:16:27Z

Coverage report for `apps/web`

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	74.15% (+0.02% 🔼)	14854/20032
🔴	Branches	51.88% (+0.04% 🔼)	3566/6874
🔴	Functions	56.86% (-0.12% 🔻)	2102/3697
🟡	Lines	75.69% (+0.03% 🔼)	13479/17808

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🟢	`...` / useIsSafenetEnabled.ts	92.86%	66.67%	100%	92.31%
🟢	`...` / useHasSafenetFeature.ts	90%	66.67%	100%	88.89%

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🔴	`...` / safenet.ts	33.33% (-8.33% 🔻)	100%	8.33% (-8.33% 🔻)	31.58% (-5.26% 🔻)
🔴	`...` / index.ts	11.86% (-0.86% 🔻)	100%	0%	23.33% (-1.67% 🔻)
🟡	`...` / index.tsx	70.21% (-2.51% 🔻)	38.1% (+3.1% 🔼)	23.08% (-10.26% 🔻)	69.77% (-2.73% 🔻)
🟢	`...` / config.tsx	87.5% (-0.5% 🔻)	100%	100%	100%
🟢	`...` / SignOrExecuteForm.tsx	90.8% (-1.06% 🔻)	86.42%	40% (-10% 🔻)	90.36% (-1.1% 🔻)
🟢	`...` / useLoadBalances.ts	82.54% (+0.87% 🔼)	63.64% (-10.05% 🔻)	58.33%	84.21% (+0.88% 🔼)
🟡	`...` / index.tsx	71.74% (-4.45% 🔻)	0%	0%	73.33% (-4.72% 🔻)
🟡	`...` / index.tsx	60% (-1.54% 🔻)	0%	0%	64.29% (-2.38% 🔻)
🔴	`...` / MultiAccountItem.tsx	31.3% (-0.27% 🔻)	0%	0%	34.95% (-0.34% 🔻)
🟢	`...` / index.tsx	94.12% (+1.26% 🔼)	85.71% (-14.29% 🔻)	100%	100%

Test suite run success

1793 tests passing in 242 suites.

Report generated by 🧪jest coverage report action from 8e5c045

github-actions · 2025-01-22T10:26:29Z

📦 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.05 MB` (🟡 +60.28 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 Page Added

The following page was added to the bundle from the code in this PR:

Page	Size (compressed)	First Load
`/settings/safenet`	`1.97 KB`	1.05 MB

Thirty-two 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.05 MB
`/address-book`	`23.21 KB` (🟡 +142 B)	1.07 MB
`/apps`	`35.84 KB` (🟡 +2.12 KB)	1.08 MB
`/apps/custom`	`33.91 KB` (🟡 +2.12 KB)	1.08 MB
`/apps/open`	`55.74 KB` (🟡 +2.13 KB)	1.1 MB
`/balances`	`29.94 KB` (🟡 +240 B)	1.08 MB
`/balances/nfts`	`9.55 KB` (🟡 +10 B)	1.06 MB
`/bridge`	`2.56 KB` (🟡 +2 B)	1.05 MB
`/cookie`	`8.77 KB` (🟡 +1 B)	1.06 MB
`/home`	`61.57 KB` (🟡 +2.31 KB)	1.11 MB
`/new-safe/advanced-create`	`26.38 KB` (🟢 -70 B)	1.07 MB
`/new-safe/create`	`25.52 KB` (🟢 -71 B)	1.07 MB
`/privacy`	`14.57 KB` (🟡 +2 B)	1.06 MB
`/settings/appearance`	`2.29 KB` (🟡 +40 B)	1.05 MB
`/settings/cookies`	`1.92 KB` (🟡 +47 B)	1.05 MB
`/settings/data`	`1.83 KB` (🟡 +44 B)	1.05 MB
`/settings/environment-variables`	`3.32 KB` (🟡 +46 B)	1.05 MB
`/settings/modules`	`4.15 KB` (🟡 +94 B)	1.05 MB
`/settings/notifications`	`6.37 KB` (🟢 -14.95 KB)	1.05 MB
`/settings/safe-apps`	`20.45 KB` (🟡 +2.17 KB)	1.07 MB
`/settings/security`	`2.38 KB` (🟡 +40 B)	1.05 MB
`/settings/setup`	`30.87 KB` (🟡 +140 B)	1.08 MB
`/share/safe-app`	`7.56 KB` (🟢 -5 B)	1.06 MB
`/swap`	`761 B` (🟡 +1 B)	1.05 MB
`/terms`	`12.93 KB` (🟡 +1 B)	1.06 MB
`/transactions`	`99.61 KB` (🟡 +3.03 KB)	1.15 MB
`/transactions/history`	`99.57 KB` (🟡 +3.03 KB)	1.14 MB
`/transactions/messages`	`60.4 KB` (🟡 +2.1 KB)	1.11 MB
`/transactions/msg`	`56.65 KB` (🟡 +2.1 KB)	1.1 MB
`/transactions/queue`	`49.5 KB` (🟡 +2.1 KB)	1.1 MB
`/transactions/tx`	`48.86 KB` (🟡 +2.1 KB)	1.1 MB
`/welcome/accounts`	`409 B` (🟡 +2 B)	1.05 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.

apps/web/src/components/common/TokenIcon/index.tsx

apps/web/src/components/transactions/TxDetails/Summary/index.tsx

apps/web/src/components/tx/SignOrExecuteForm/SafenetTxChecks.tsx

apps/web/src/hooks/useIsSafenetEnabled.ts

katspaugh · 2025-01-22T11:12:04Z

Please also make sure the entire feature is encapsulated in one folder and is exported from a single, lazy-loaded index.ts module depending on the feature flag as per https://www.notion.so/safe-global/Feature-toggles-970c96d18e544fd1a01a362f0535146b

schmanu

Should me move some more components into the safenet feature folder?
e.g. EnableSafenet, GradientBoxSafenet, the Safenet hooks

schmanu

Thanks for adjusting!

germartinez requested a review from schmanu January 22, 2025 09:09

Fix ESLint errors

a65c28a

schmanu requested changes Jan 22, 2025

View reviewed changes

germartinez added 8 commits January 22, 2025 17:34

Add hasSafenetFeature hook

2ce82f3

Skip processor API calls if hasSafenetFeature false

2d30c62

Check Safenet feature in components

a0eb0bd

Add IS_SAFENET_ENABLED flag

7282a90

Hide Safenet components behind feature flag

ee38033

Code formatting

7cd4ffc

Fix ESLint errors

fe94047

Add Safenet routes flag

c8e297c

germartinez changed the title ~~feat(Safenet): Safenet feature branch~~ feat(Safenet): Safenet feature flag Jan 23, 2025

germartinez force-pushed the safenet-feature-branch branch from 2d927d6 to 7755b84 Compare January 23, 2025 12:34

Move settings page to features and add lazy load

f4592ff

germartinez force-pushed the safenet-feature-branch branch from 7755b84 to f4592ff Compare January 23, 2025 12:40

germartinez added 2 commits January 23, 2025 12:49

Fix snapshot test

4249b4c

Add lazy load for Safenet transaction flows

07277c9

germartinez requested a review from schmanu January 23, 2025 13:28

Hide Safenet checks for non Safenet acccounts

12da3cc

schmanu reviewed Jan 24, 2025

View reviewed changes

Move components to safenet features folder

8e5c045

germartinez requested a review from schmanu January 27, 2025 11:58

schmanu approved these changes Jan 27, 2025

View reviewed changes

germartinez merged commit 8edf34c into safenet Jan 27, 2025
12 of 13 checks passed

germartinez deleted the safenet-feature-branch branch January 27, 2025 15:05

github-actions bot locked and limited conversation to collaborators Jan 27, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Safenet): Safenet feature flag #4810

feat(Safenet): Safenet feature flag #4810

germartinez commented Jan 22, 2025

github-actions bot commented Jan 22, 2025 •

edited

Loading

github-actions bot commented Jan 22, 2025 •

edited

Loading

github-actions bot commented Jan 22, 2025 •

edited

Loading

katspaugh commented Jan 22, 2025 •

edited

Loading

schmanu left a comment

schmanu left a comment

feat(Safenet): Safenet feature flag #4810

feat(Safenet): Safenet feature flag #4810

Conversation

germartinez commented Jan 22, 2025

What it solves

How to test it

Checklist

github-actions bot commented Jan 22, 2025 • edited Loading

Branch preview

github-actions bot commented Jan 22, 2025 • edited Loading

Coverage report for apps/web

Test suite run success

github-actions bot commented Jan 22, 2025 • edited Loading

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

⚠️ Global Bundle Size Increased

New Page Added

Thirty-two Pages Changed Size

katspaugh commented Jan 22, 2025 • edited Loading

schmanu left a comment

Choose a reason for hiding this comment

schmanu left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 22, 2025 •

edited

Loading

github-actions bot commented Jan 22, 2025 •

edited

Loading

Coverage report for `apps/web`

github-actions bot commented Jan 22, 2025 •

edited

Loading

katspaugh commented Jan 22, 2025 •

edited

Loading