Refactor: white label branding + domain checks

[katspaugh]

What it solves

To show or hide trademark elements like the Safe Wallet logo, legal pages etc, do a runtime check of the current domain in addition to an env var.

Previously, we were only checking an env variable which apparently wasn't enough as some forks are still using Safe{Wallet} branding. I've also extended this check to the logo in the header.

How does it solve it

I've added two new environment variables:

• NEXT_PUBLIC_BRAND_NAME – set to Safe{Wallet} for the official distribution, falls back to Wallet fork.
• NEXT_PUBLIC_BRAND_LOGO – takes the URL of the main logo in the header

[github-actions]

Branch preview

⏳ Deploying a preview site...

[github-actions]

📦 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	1016.69 KB (🟡 +215 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!

Thirty-eight Pages Changed Size

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

Page	Size (compressed)	First Load
/_offline	1.1 KB (🟡 +9 B)	1017.79 KB
/addOwner	564 B (🟡 +9 B)	1017.24 KB
/address-book	23.07 KB (🟢 -7 B)	1.02 MB
/apps	33.26 KB (🟡 +16 B)	1.03 MB
/apps/bookmarked	475 B (🟡 +11 B)	1017.15 KB
/apps/custom	31.32 KB (🟡 +17 B)	1.02 MB
/apps/open	53.64 KB (🟡 +2 B)	1.05 MB
/balances/nfts	9.64 KB (🟢 -1 B)	1 MB
/bridge	2.56 KB (🟡 +12 B)	1019.25 KB
/cookie	8.77 KB (🟡 +27 B)	1 MB
/home	58.71 KB (🟡 +3 B)	1.05 MB
/imprint	1.41 KB (🟡 +25 B)	1018.1 KB
/licenses	2.46 KB (🟡 +24 B)	1019.15 KB
/new-safe/advanced-create	26.44 KB (🟡 +3 B)	1.02 MB
/new-safe/create	25.57 KB (🟡 +9 B)	1.02 MB
/new-safe/load	6.06 KB (🟡 +9 B)	1022.75 KB
/privacy	14.57 KB (🟡 +29 B)	1.01 MB
/settings	475 B (🟡 +9 B)	1017.15 KB
/settings/appearance	2.33 KB (🟡 +10 B)	1019.03 KB
/settings/cookies	1.96 KB (🟡 +8 B)	1018.65 KB
/settings/environment-variables	3.36 KB (🟡 +3 B)	1020.05 KB
/settings/modules	4.13 KB (🟡 +4 B)	1020.82 KB
/settings/notifications	21.39 KB (🟡 +3 B)	1.01 MB
/settings/safe-apps	17.82 KB (🟢 -2 B)	1.01 MB
/settings/security	2.43 KB (🟡 +14 B)	1019.12 KB
/settings/setup	30.81 KB (🟡 +4 B)	1.02 MB
/share/safe-app	7.56 KB (🟡 +3 B)	1 MB
/stake	619 B (🟡 +10 B)	1017.29 KB
/swap	761 B (🟡 +12 B)	1017.43 KB
/terms	12.93 KB (🟡 +23 B)	1.01 MB
/transactions	96.67 KB (🟡 +13 B)	1.09 MB
/transactions/history	96.63 KB (🟡 +13 B)	1.09 MB
/transactions/messages	58.4 KB (🟡 +5 B)	1.05 MB
/transactions/msg	54.57 KB (🟡 +12 B)	1.05 MB
/transactions/queue	47.52 KB (🟡 +11 B)	1.04 MB
/transactions/tx	46.79 KB (🟡 +12 B)	1.04 MB
/welcome	6.93 KB (🟡 +17 B)	1023.62 KB
/welcome/accounts	407 B (🟡 +8 B)	1017.09 KB

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]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	73.92% (+0.02% 🔼)	14424/19512
🔴	Branches	51.46% (+0.02% 🔼)	3444/6692
🔴	Functions	56.83% (-0.03% 🔻)	2044/3597
🟡	Lines	75.46% (+0.02% 🔼)	13081/17336

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🟡	... / useIsOfficialHost.ts	50%	0%	0%	60%

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / constants.ts	100%	97.5% (-2.5% 🔻)	100%	100%
🟢	... / index.tsx	89.36% (+0.73% 🔼)	66.67% (-3.92% 🔻)	50%	93.18% (+0.5% 🔼)
🟡	... / index.tsx	65.22% (-1.45% 🔻)	0%	0%	71.43% (-2.26% 🔻)

Test suite run success

1712 tests passing in 232 suites.

Report generated by 🧪jest coverage report action from 36e3160

[github-actions]

Code review by ChatGPT

[github-actions]

Code review by ChatGPT

[usame-algan]

Should we add some kind of switch in the UI to make it easier to test this?

[usame-algan]

An additional idea: Write a blog post / help article / document on how to set up your own fork of the wallet app since there are a couple of steps involved.

[francovenica]

Is there any change in the UI or behaviour that the user might find?

[katspaugh]

@francovenica actually no, it's mostly a refactoring for developers.