From 538dd434de7cc0d0a5db751cbac2767b10d75e20 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:53:53 +0100
Subject: [PATCH] Refactor: white label branding + domain checks (#4593)

---
 .github/actions/build/action.yml                      |  2 ++
 .github/workflows/unit-tests.yml                      |  2 ++
 README.md                                             |  3 +++
 src/components/address-book/ImportDialog/index.tsx    |  4 ++--
 src/components/common/Footer/index.tsx                |  8 +++++---
 src/components/common/Header/index.test.tsx           |  4 ++++
 src/components/common/Header/index.tsx                |  7 +++++--
 src/components/common/Header/styles.module.css        |  1 +
 src/components/common/MetaTags/index.tsx              |  6 +++---
 src/components/safe-apps/AddCustomAppModal/index.tsx  |  3 ++-
 src/components/safe-apps/AppFrame/index.tsx           |  3 ++-
 .../SafeAppsZeroResultsPlaceholder/index.tsx          |  3 ++-
 .../settings/DataManagement/ImportFileUpload.tsx      |  5 +++--
 .../DataManagement/useGlobalImportFileParser.ts       |  2 +-
 src/components/settings/FallbackHandler/index.tsx     |  4 ++--
 .../settings/SafeAppsSigningMethod/index.tsx          |  6 +++---
 .../UpsertRecovery/UpsertRecoveryFlowSettings.tsx     |  4 ++--
 src/config/constants.ts                               |  3 +++
 .../components/StakingConfirmationTx/Deposit.tsx      |  5 ++++-
 .../OrderFeeConfirmationView.tsx                      |  4 ++--
 src/features/swap/index.tsx                           |  4 ++--
 .../components/WcConnectionForm/index.tsx             |  3 ++-
 .../walletconnect/components/WcLogoHeader/index.tsx   |  3 ++-
 .../WcProposalForm/useCompatibilityWarning.ts         |  3 ++-
 src/features/walletconnect/constants.ts               |  4 +++-
 src/hooks/useIsOfficialHost.ts                        |  9 +++++++++
 src/pages/_app.tsx                                    |  4 ++--
 src/pages/_offline.tsx                                |  3 ++-
 src/pages/addOwner.tsx                                |  3 ++-
 src/pages/address-book.tsx                            |  3 ++-
 src/pages/apps/bookmarked.tsx                         |  3 ++-
 src/pages/apps/custom.tsx                             |  3 ++-
 src/pages/apps/index.tsx                              |  3 ++-
 src/pages/balances/index.tsx                          |  3 ++-
 src/pages/balances/nfts.tsx                           |  4 ++--
 src/pages/bridge.tsx                                  |  3 ++-
 src/pages/cookie.tsx                                  |  9 ++++++---
 src/pages/home.tsx                                    |  3 ++-
 src/pages/imprint.tsx                                 |  9 ++++++---
 src/pages/licenses.tsx                                | 11 +++++++----
 src/pages/new-safe/advanced-create.tsx                |  3 ++-
 src/pages/new-safe/create.tsx                         |  3 ++-
 src/pages/new-safe/load.tsx                           |  3 ++-
 src/pages/privacy.tsx                                 |  9 ++++++---
 src/pages/settings/appearance.tsx                     |  3 ++-
 src/pages/settings/cookies.tsx                        |  3 ++-
 src/pages/settings/data.tsx                           |  3 ++-
 src/pages/settings/environment-variables.tsx          |  3 ++-
 src/pages/settings/index.tsx                          |  3 ++-
 src/pages/settings/modules.tsx                        |  3 ++-
 src/pages/settings/notifications.tsx                  |  3 ++-
 src/pages/settings/safe-apps/index.tsx                |  3 ++-
 src/pages/settings/security.tsx                       |  3 ++-
 src/pages/settings/setup.tsx                          |  3 ++-
 src/pages/share/safe-app.tsx                          |  3 ++-
 src/pages/stake.tsx                                   |  3 ++-
 src/pages/swap.tsx                                    |  3 ++-
 src/pages/terms.tsx                                   |  9 ++++++---
 src/pages/transactions/history.tsx                    |  3 ++-
 src/pages/transactions/messages.tsx                   |  3 ++-
 src/pages/transactions/msg.tsx                        |  3 ++-
 src/pages/transactions/queue.tsx                      |  3 ++-
 src/pages/transactions/tx.tsx                         |  3 ++-
 src/pages/welcome/accounts.tsx                        |  3 ++-
 src/pages/welcome/index.tsx                           |  3 ++-
 src/services/onboard.ts                               |  5 +++--
 src/services/safe-wallet-provider/notifications.ts    |  5 +++--
 67 files changed, 178 insertions(+), 88 deletions(-)
 create mode 100644 src/hooks/useIsOfficialHost.ts

diff --git a/.github/actions/build/action.yml b/.github/actions/build/action.yml
index 8d6810ab3a..1808af28ab 100644
--- a/.github/actions/build/action.yml
+++ b/.github/actions/build/action.yml
@@ -58,6 +58,8 @@ runs:
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_PRODUCTION }}
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING }}
         NEXT_PUBLIC_IS_OFFICIAL_HOST: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_IS_OFFICIAL_HOST }}
+        NEXT_PUBLIC_BRAND_LOGO: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_BRAND_LOGO }}
+        NEXT_PUBLIC_BRAND_NAME: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_BRAND_NAME }}
         NEXT_PUBLIC_BLOCKAID_CLIENT_ID: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_BLOCKAID_CLIENT_ID }}
         NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING }}
         NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION }}
diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml
index 7bdd552476..9cb920a5f3 100644
--- a/.github/workflows/unit-tests.yml
+++ b/.github/workflows/unit-tests.yml
@@ -31,3 +31,5 @@ jobs:
           package-manager: yarn
           test-script: yarn test:ci
           github-token: ${{ secrets.GITHUB_TOKEN }}
+        env:
+          NEXT_PUBLIC_IS_OFFICIAL_HOST: true
diff --git a/README.md b/README.md
index 7f92d3620e..83d5c94816 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,9 @@ Here's the list of all the environment variables:
 
 | Env variable                                      | Description                                                                                                                                                             |
 | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `NEXT_PUBLIC_BRAND_NAME`                          | The name of the app, defaults to "Wallet fork"                                                              |
+| `NEXT_PUBLIC_BRAND_LOGO`                          | The URL of the app logo displayed in the header                                                             |
+
 | `NEXT_PUBLIC_INFURA_TOKEN`                        | [Infura](https://docs.infura.io/infura/networks/ethereum/how-to/secure-a-project/project-id) RPC API token                                                              |
 | `NEXT_PUBLIC_SAFE_APPS_INFURA_TOKEN`              | Infura token for Safe Apps, falls back to `NEXT_PUBLIC_INFURA_TOKEN`                                                                                                    |
 | `NEXT_PUBLIC_IS_PRODUCTION`                       | Set to `true` to build a minified production app                                                                                                                        |
diff --git a/src/components/address-book/ImportDialog/index.tsx b/src/components/address-book/ImportDialog/index.tsx
index 13262285e7..8f7e47b390 100644
--- a/src/components/address-book/ImportDialog/index.tsx
+++ b/src/components/address-book/ImportDialog/index.tsx
@@ -17,7 +17,7 @@ import ErrorMessage from '@/components/tx/ErrorMessage'
 import { Errors, logError } from '@/services/exceptions'
 import FileUpload, { FileTypes, type FileInfo } from '@/components/common/FileUpload'
 import ExternalLink from '@/components/common/ExternalLink'
-import { HelpCenterArticle } from '@/config/constants'
+import { BRAND_NAME, HelpCenterArticle } from '@/config/constants'
 
 type AddressBookCSVRow = ['address', 'name', 'chainId']
 
@@ -152,7 +152,7 @@ const ImportDialog = ({ handleClose }: { handleClose: () => void }): ReactElemen
         {error && <ErrorMessage>{error}</ErrorMessage>}
 
         <Typography>
-          Only CSV files exported from a {'Safe{Wallet}'} can be imported.
+          Only CSV files exported from a {BRAND_NAME} can be imported.
           <br />
           <ExternalLink
             href={HelpCenterArticle.ADDRESS_BOOK_DATA}
diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
index de2d36f115..0b6dbea4b5 100644
--- a/src/components/common/Footer/index.tsx
+++ b/src/components/common/Footer/index.tsx
@@ -8,7 +8,8 @@ import { AppRoutes } from '@/config/routes'
 import packageJson from '../../../../package.json'
 import ExternalLink from '../ExternalLink'
 import MUILink from '@mui/material/Link'
-import { HELP_CENTER_URL, IS_DEV, IS_OFFICIAL_HOST } from '@/config/constants'
+import { HELP_CENTER_URL } from '@/config/constants'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
 
 const footerPages = [
   AppRoutes.welcome.index,
@@ -32,6 +33,7 @@ const FooterLink = ({ children, href }: { children: ReactNode; href: string }):
 
 const Footer = (): ReactElement | null => {
   const router = useRouter()
+  const isOfficialHost = useIsOfficialHost()
 
   if (!footerPages.some((path) => router.pathname.startsWith(path))) {
     return null
@@ -44,7 +46,7 @@ const Footer = (): ReactElement | null => {
   return (
     <footer className={css.container}>
       <ul>
-        {IS_OFFICIAL_HOST || IS_DEV ? (
+        {isOfficialHost ? (
           <>
             <li>
               <Typography variant="caption">&copy;2022–{new Date().getFullYear()} Core Contributors GmbH</Typography>
@@ -74,7 +76,7 @@ const Footer = (): ReactElement | null => {
             </li>
           </>
         ) : (
-          <li>{'This is an unofficial distribution of Safe{Wallet}'}</li>
+          <li>This is an unofficial distribution of the app</li>
         )}
 
         <li>
diff --git a/src/components/common/Header/index.test.tsx b/src/components/common/Header/index.test.tsx
index d5ee8fca72..53da98fbd1 100644
--- a/src/components/common/Header/index.test.tsx
+++ b/src/components/common/Header/index.test.tsx
@@ -32,6 +32,10 @@ jest.mock(
     },
 )
 
+jest.mock('@/hooks/useIsOfficialHost', () => ({
+  useIsOfficialHost: () => true,
+}))
+
 describe('Header', () => {
   beforeEach(() => {
     jest.resetAllMocks()
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index 215ef45aa6..71ba659a05 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -24,6 +24,8 @@ import { useHasFeature } from '@/hooks/useChains'
 import Track from '@/components/common/Track'
 import { OVERVIEW_EVENTS, OVERVIEW_LABELS } from '@/services/analytics'
 import { useSafeTokenEnabled } from '@/hooks/useSafeTokenEnabled'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_LOGO, BRAND_NAME } from '@/config/constants'
 
 type HeaderProps = {
   onMenuToggle?: Dispatch<SetStateAction<boolean>>
@@ -45,6 +47,7 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
   const isSafeOwner = useIsSafeOwner()
   const router = useRouter()
   const enableWc = useHasFeature(FEATURES.NATIVE_WALLETCONNECT)
+  const isOfficialHost = useIsOfficialHost()
 
   // If on the home page, the logo should link to the Accounts or Welcome page, otherwise to the home page
   const logoHref = getLogoLink(router)
@@ -77,13 +80,13 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
 
       <div className={classnames(css.element, css.logoMobile)}>
         <Link href={logoHref} passHref>
-          <SafeLogoMobile alt="Safe logo" />
+          {isOfficialHost ? <SafeLogoMobile alt="Safe logo" /> : null}
         </Link>
       </div>
 
       <div className={classnames(css.element, css.hideMobile, css.logo)}>
         <Link href={logoHref} passHref>
-          <SafeLogo alt="Safe logo" />
+          {isOfficialHost ? <SafeLogo alt={BRAND_NAME} /> : BRAND_LOGO && <img src={BRAND_LOGO} alt={BRAND_NAME} />}
         </Link>
       </div>
 
diff --git a/src/components/common/Header/styles.module.css b/src/components/common/Header/styles.module.css
index 00936f862e..7262107174 100644
--- a/src/components/common/Header/styles.module.css
+++ b/src/components/common/Header/styles.module.css
@@ -40,6 +40,7 @@
   display: none;
 }
 
+.logo img,
 .logo svg,
 .logoMobile svg {
   width: auto;
diff --git a/src/components/common/MetaTags/index.tsx b/src/components/common/MetaTags/index.tsx
index fe590265a5..9f4917274a 100644
--- a/src/components/common/MetaTags/index.tsx
+++ b/src/components/common/MetaTags/index.tsx
@@ -1,10 +1,10 @@
-import { IS_PRODUCTION } from '@/config/constants'
+import { BRAND_NAME, IS_PRODUCTION } from '@/config/constants'
 import { ContentSecurityPolicy, StrictTransportSecurity } from '@/config/securityHeaders'
 import lightPalette from '@/components/theme/lightPalette'
 import darkPalette from '@/components/theme/darkPalette'
 
-const descriptionText = 'Safe{Wallet} is the most trusted smart account wallet on Ethereum with over $100B secured.'
-const titleText = 'Safe{Wallet}'
+const descriptionText = `${BRAND_NAME} is the most trusted smart account wallet on Ethereum with over $100B secured.`
+const titleText = BRAND_NAME
 
 const MetaTags = ({ prefetchUrl }: { prefetchUrl: string }) => (
   <>
diff --git a/src/components/safe-apps/AddCustomAppModal/index.tsx b/src/components/safe-apps/AddCustomAppModal/index.tsx
index 635f30c805..a343fc98a5 100644
--- a/src/components/safe-apps/AddCustomAppModal/index.tsx
+++ b/src/components/safe-apps/AddCustomAppModal/index.tsx
@@ -29,6 +29,7 @@ import { useShareSafeAppUrl } from '@/components/safe-apps/hooks/useShareSafeApp
 
 import css from './styles.module.css'
 import ExternalLink from '@/components/common/ExternalLink'
+import { BRAND_NAME } from '@/config/constants'
 
 type Props = {
   open: boolean
@@ -148,7 +149,7 @@ export const AddCustomAppModal = ({ open, onClose, onSave, safeAppsList }: Props
                             })}
                           />
                         }
-                        label="This Safe App is not part of Safe{Wallet} and I agree to use it at my own risk."
+                        label={`This Safe App is not part of ${BRAND_NAME} and I agree to use it at my own risk.`}
                         sx={{ mt: 2 }}
                       />
 
diff --git a/src/components/safe-apps/AppFrame/index.tsx b/src/components/safe-apps/AppFrame/index.tsx
index bfdd84f0a8..ec6494ec91 100644
--- a/src/components/safe-apps/AppFrame/index.tsx
+++ b/src/components/safe-apps/AppFrame/index.tsx
@@ -29,6 +29,7 @@ import { useCustomAppCommunicator } from '@/hooks/safe-apps/useCustomAppCommunic
 import { useSanctionedAddress } from '@/hooks/useSanctionedAddress'
 import BlockedAddress from '@/components/common/BlockedAddress'
 import { isSafePassApp } from '@/features/walletconnect/services/utils'
+import { BRAND_NAME } from '@/config/constants'
 
 const UNKNOWN_APP_NAME = 'Unknown Safe App'
 
@@ -128,7 +129,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList, safeAppFromManifest, isNativeEm
     <>
       {!isNativeEmbed && (
         <Head>
-          <title>{`Safe{Wallet} - Safe Apps${remoteApp ? ' - ' + remoteApp.name : ''}`}</title>
+          <title>{`${BRAND_NAME} - Safe Apps${remoteApp ? ' - ' + remoteApp.name : ''}`}</title>
         </Head>
       )}
 
diff --git a/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx b/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
index bd3b411c78..e5b634e75f 100644
--- a/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
+++ b/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
@@ -1,6 +1,7 @@
 import Typography from '@mui/material/Typography'
 import PagePlaceholder from '@/components/common/PagePlaceholder'
 import AddCustomAppIcon from '@/public/images/apps/add-custom-app.svg'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeAppsZeroResultsPlaceholder = ({ searchQuery }: { searchQuery: string }) => {
   return (
@@ -9,7 +10,7 @@ const SafeAppsZeroResultsPlaceholder = ({ searchQuery }: { searchQuery: string }
       text={
         <Typography variant="body1" color="primary.light" m={2} maxWidth="600px">
           No Safe Apps found matching <strong>{searchQuery}</strong>. Connect to dApps that haven&apos;t yet been
-          integrated with the {'Safe{Wallet}'} using WalletConnect.
+          integrated with the {BRAND_NAME} using WalletConnect.
         </Typography>
       }
     />
diff --git a/src/components/settings/DataManagement/ImportFileUpload.tsx b/src/components/settings/DataManagement/ImportFileUpload.tsx
index 4167e9fef6..e123b0e37f 100644
--- a/src/components/settings/DataManagement/ImportFileUpload.tsx
+++ b/src/components/settings/DataManagement/ImportFileUpload.tsx
@@ -5,6 +5,7 @@ import type { Dispatch, SetStateAction } from 'react'
 
 import FileUpload, { FileTypes } from '@/components/common/FileUpload'
 import InfoIcon from '@/public/images/notifications/info.svg'
+import { BRAND_NAME } from '@/config/constants'
 
 const AcceptedMimeTypes = {
   'application/json': ['.json'],
@@ -52,7 +53,7 @@ export const ImportFileUpload = ({
 
   return (
     <>
-      <Typography>Import {'Safe{Wallet}'} data by uploading a file in the area below.</Typography>
+      <Typography>Import {BRAND_NAME} data by uploading a file in the area below.</Typography>
 
       <FileUpload
         fileType={FileTypes.JSON}
@@ -74,7 +75,7 @@ export const ImportFileUpload = ({
             mr: 0.5,
           }}
         />
-        Only JSON files exported from the {'Safe{Wallet}'} can be imported.
+        Only JSON files exported from the {BRAND_NAME} can be imported.
       </Typography>
     </>
   )
diff --git a/src/components/settings/DataManagement/useGlobalImportFileParser.ts b/src/components/settings/DataManagement/useGlobalImportFileParser.ts
index e77b3403f5..fb08394422 100644
--- a/src/components/settings/DataManagement/useGlobalImportFileParser.ts
+++ b/src/components/settings/DataManagement/useGlobalImportFileParser.ts
@@ -19,7 +19,7 @@ export const enum SAFE_EXPORT_VERSION {
 }
 
 export enum ImportErrors {
-  INVALID_VERSION = 'The file is not a Safe{Wallet} export.',
+  INVALID_VERSION = 'The file is not a valid export.',
   INVALID_JSON_FORMAT = 'The JSON format is invalid.',
   NO_IMPORT_DATA_FOUND = 'This file contains no importable data.',
 }
diff --git a/src/components/settings/FallbackHandler/index.tsx b/src/components/settings/FallbackHandler/index.tsx
index 1fa5e4f582..9c2c26054a 100644
--- a/src/components/settings/FallbackHandler/index.tsx
+++ b/src/components/settings/FallbackHandler/index.tsx
@@ -8,7 +8,7 @@ import type { ReactElement } from 'react'
 
 import EthHashInfo from '@/components/common/EthHashInfo'
 import useSafeInfo from '@/hooks/useSafeInfo'
-import { HelpCenterArticle } from '@/config/constants'
+import { BRAND_NAME, HelpCenterArticle } from '@/config/constants'
 import ExternalLink from '@/components/common/ExternalLink'
 import { useTxBuilderApp } from '@/hooks/safe-apps/useTxBuilderApp'
 import { useCurrentChain } from '@/hooks/useChains'
@@ -43,7 +43,7 @@ export const FallbackHandler = (): ReactElement | null => {
 
   const warning = !hasFallbackHandler ? (
     <>
-      The {'Safe{Wallet}'} may not work correctly as no fallback handler is currently set.
+      The {BRAND_NAME} may not work correctly as no fallback handler is currently set.
       {txBuilder && (
         <>
           {' '}
diff --git a/src/components/settings/SafeAppsSigningMethod/index.tsx b/src/components/settings/SafeAppsSigningMethod/index.tsx
index 4d900a6f6e..c4b25059ab 100644
--- a/src/components/settings/SafeAppsSigningMethod/index.tsx
+++ b/src/components/settings/SafeAppsSigningMethod/index.tsx
@@ -3,7 +3,7 @@ import { SETTINGS_EVENTS, trackEvent } from '@/services/analytics'
 import { useAppDispatch, useAppSelector } from '@/store'
 import { selectOnChainSigning, setOnChainSigning } from '@/store/settingsSlice'
 import { FormControlLabel, Checkbox, Paper, Typography, FormGroup, Grid } from '@mui/material'
-import { HelpCenterArticle } from '@/config/constants'
+import { BRAND_NAME, HelpCenterArticle } from '@/config/constants'
 
 export const SafeAppsSigningMethod = () => {
   const onChainSigning = useAppSelector(selectOnChainSigning)
@@ -26,8 +26,8 @@ export const SafeAppsSigningMethod = () => {
 
         <Grid item xs>
           <Typography mb={2}>
-            This setting determines how the {'Safe{Wallet}'} will sign message requests from Safe Apps. Gasless,
-            off-chain signing is used by default. Learn more about message signing{' '}
+            This setting determines how the {BRAND_NAME} will sign message requests from Safe Apps. Gasless, off-chain
+            signing is used by default. Learn more about message signing{' '}
             <ExternalLink href={HelpCenterArticle.SIGNED_MESSAGES}>here</ExternalLink>.
           </Typography>
           <FormGroup>
diff --git a/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx b/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx
index 430e996b83..b3f6b20b0c 100644
--- a/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx
+++ b/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx
@@ -30,7 +30,7 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import InfoIcon from '@/public/images/notifications/info.svg'
 import { RecovererWarning } from './RecovererSmartContractWarning'
 import ExternalLink from '@/components/common/ExternalLink'
-import { HelpCenterArticle, HelperCenterArticleTitles } from '@/config/constants'
+import { BRAND_NAME, HelpCenterArticle, HelperCenterArticleTitles } from '@/config/constants'
 import { TOOLTIP_TITLES } from '../../common/constants'
 import Track from '@/components/common/Track'
 import type { RecoveryStateItem } from '@/features/recovery/services/recovery-state'
@@ -281,7 +281,7 @@ export function UpsertRecoveryFlowSettings({
           <TxCard>
             <FormControlLabel
               data-testid="warning-section"
-              label="I understand that the Recoverer will be able to initiate recovery of this Safe Account and that I will only be informed within the Safe{Wallet}."
+              label={`I understand that the Recoverer will be able to initiate recovery of this Safe Account and that I will only be informed within the ${BRAND_NAME}.`}
               control={<Checkbox checked={understandsRisk} onChange={(_, checked) => setUnderstandsRisk(checked)} />}
               sx={{ pl: 2 }}
             />
diff --git a/src/config/constants.ts b/src/config/constants.ts
index f596970469..a4b4034c53 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -99,6 +99,9 @@ export const TWITTER_URL = 'https://twitter.com/safe'
 
 // Legal
 export const IS_OFFICIAL_HOST = process.env.NEXT_PUBLIC_IS_OFFICIAL_HOST === 'true'
+export const OFFICIAL_HOSTS = /app\.safe\.global|.+\.5afe\.dev|localhost:3000/
+export const BRAND_NAME = process.env.NEXT_PUBLIC_BRAND_NAME || (IS_OFFICIAL_HOST ? 'Safe{Wallet}' : 'Wallet fork')
+export const BRAND_LOGO = process.env.NEXT_PUBLIC_BRAND_LOGO || ''
 
 // Risk mitigation (Blockaid)
 export const BLOCKAID_API = 'https://client.blockaid.io'
diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
index da3859f2b8..aa0723349e 100644
--- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
@@ -7,6 +7,7 @@ import { formatDurationFromMilliseconds, formatVisualAmount, maybePlural } from
 import { formatCurrency } from '@/utils/formatNumber'
 import StakingStatus from '@/features/stake/components/StakingStatus'
 import { InfoTooltip } from '@/features/stake/components/InfoTooltip'
+import { BRAND_NAME } from '@/config/constants'
 
 type StakingOrderConfirmationViewProps = {
   order: NativeStakingDepositConfirmationView | StakingTxDepositInfo
@@ -55,7 +56,9 @@ const StakingConfirmationTxDeposit = ({ order, isTxDetails }: StakingOrderConfir
         title={
           <>
             Fee
-            <InfoTooltip title="The widget fee incurred here is charged by Kiln for the operation of this widget. The fee is calculated automatically. Part of the fee will contribute to a license fee that supports the Safe Community. Neither the Safe Ecosystem Foundation nor Safe{Wallet} operates the Kiln Widget and/or Kiln." />
+            <InfoTooltip
+              title={`The widget fee incurred here is charged by Kiln for the operation of this widget. The fee is calculated automatically. Part of the fee will contribute to a license fee that supports the Safe Community. Neither the Safe Ecosystem Foundation nor ${BRAND_NAME} operates the Kiln Widget and/or Kiln.`}
+            />
           </>
         }
       >
diff --git a/src/features/swap/components/SwapOrderConfirmationView/OrderFeeConfirmationView.tsx b/src/features/swap/components/SwapOrderConfirmationView/OrderFeeConfirmationView.tsx
index 8fcf7d3db9..d54fa80bb9 100644
--- a/src/features/swap/components/SwapOrderConfirmationView/OrderFeeConfirmationView.tsx
+++ b/src/features/swap/components/SwapOrderConfirmationView/OrderFeeConfirmationView.tsx
@@ -1,7 +1,7 @@
 import type { SwapOrderConfirmationView, TwapOrderConfirmationView } from '@safe-global/safe-gateway-typescript-sdk'
 import { getOrderFeeBps } from '@/features/swap/helpers/utils'
 import { DataRow } from '@/components/common/Table/DataRow'
-import { HelpCenterArticle } from '@/config/constants'
+import { BRAND_NAME, HelpCenterArticle } from '@/config/constants'
 import { HelpIconTooltip } from '@/features/swap/components/HelpIconTooltip'
 import MUILink from '@mui/material/Link'
 
@@ -24,7 +24,7 @@ export const OrderFeeConfirmationView = ({
           <>
             The tiered widget fee incurred here is charged by CoW Protocol for the operation of this widget. The fee is
             automatically calculated into this quote. Part of the fee will contribute to a license fee that supports the
-            Safe Community. Neither the Safe Ecosystem Foundation nor {`Safe{Wallet}`} operate the CoW Swap Widget
+            Safe Community. Neither the Safe Ecosystem Foundation nor {`${BRAND_NAME}`} operate the CoW Swap Widget
             and/or CoW Swap.
             <MUILink href={HelpCenterArticle.SWAP_WIDGET_FEES} target="_blank" rel="noopener noreferrer">
               Learn more
diff --git a/src/features/swap/index.tsx b/src/features/swap/index.tsx
index 12735115ba..2a23081533 100644
--- a/src/features/swap/index.tsx
+++ b/src/features/swap/index.tsx
@@ -40,6 +40,7 @@ import { FEATURES } from '@/utils/chains'
 import { useGetIsSanctionedQuery } from '@/store/api/ofac'
 import { skipToken } from '@reduxjs/toolkit/query/react'
 import { getKeyWithTrueValue } from '@/utils/helpers'
+import { BRAND_NAME } from '@/config/constants'
 
 const BASE_URL = typeof window !== 'undefined' && window.location.origin ? window.location.origin : ''
 
@@ -148,8 +149,7 @@ const SwapWidget = ({ sell }: Params) => {
     },
     content: {
       feeLabel: 'Widget Fee',
-      feeTooltipMarkdown:
-        'The [tiered widget fee](https://help.safe.global/en/articles/178530-how-does-the-widget-fee-work-for-native-swaps) incurred here is charged by CoW Protocol for the operation of this widget. The fee is automatically calculated into this quote. Part of the fee will contribute to a license fee that supports the Safe Community. Neither the Safe Ecosystem Foundation nor Safe{Wallet} operate the CoW Swap Widget and/or CoW Swap',
+      feeTooltipMarkdown: `The [tiered widget fee](https://help.safe.global/en/articles/178530-how-does-the-widget-fee-work-for-native-swaps) incurred here is charged by CoW Protocol for the operation of this widget. The fee is automatically calculated into this quote. Part of the fee will contribute to a license fee that supports the Safe Community. Neither the Safe Ecosystem Foundation nor ${BRAND_NAME} operate the CoW Swap Widget and/or CoW Swap`,
     },
   })
 
diff --git a/src/features/walletconnect/components/WcConnectionForm/index.tsx b/src/features/walletconnect/components/WcConnectionForm/index.tsx
index 7cdbdd79d8..399892b6bb 100644
--- a/src/features/walletconnect/components/WcConnectionForm/index.tsx
+++ b/src/features/walletconnect/components/WcConnectionForm/index.tsx
@@ -12,6 +12,7 @@ import css from './styles.module.css'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import Track from '@/components/common/Track'
 import { WALLETCONNECT_EVENTS } from '@/services/analytics/events/walletconnect'
+import { BRAND_NAME } from '@/config/constants'
 
 const WC_HINTS_KEY = 'wcHints'
 
@@ -60,7 +61,7 @@ export const WcConnectionForm = ({ sessions, uri }: { sessions: SessionTypes.Str
           }}
         >
           {safeLoaded
-            ? `Paste the pairing code below to connect to your Safe{Wallet} via WalletConnect`
+            ? `Paste the pairing code below to connect to your ${BRAND_NAME} via WalletConnect`
             : `Please open one of your Safe Accounts to connect to via WalletConnect`}
         </Typography>
 
diff --git a/src/features/walletconnect/components/WcLogoHeader/index.tsx b/src/features/walletconnect/components/WcLogoHeader/index.tsx
index d879fb642d..cd849e04b3 100644
--- a/src/features/walletconnect/components/WcLogoHeader/index.tsx
+++ b/src/features/walletconnect/components/WcLogoHeader/index.tsx
@@ -3,6 +3,7 @@ import type { ReactElement } from 'react'
 import WalletConnect from '@/public/images/common/walletconnect.svg'
 import Alert from '@/public/images/notifications/alert.svg'
 import css from './styles.module.css'
+import { BRAND_NAME } from '@/config/constants'
 
 const WcLogoHeader = ({ errorMessage }: { errorMessage?: string }): ReactElement => {
   return (
@@ -13,7 +14,7 @@ const WcLogoHeader = ({ errorMessage }: { errorMessage?: string }): ReactElement
       </div>
 
       <Typography variant="h5" mt={2} mb={0.5} className={css.title}>
-        {errorMessage || 'Connect dApps to Safe{Wallet}'}
+        {errorMessage || `Connect dApps to ${BRAND_NAME}`}
       </Typography>
     </>
   )
diff --git a/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts b/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts
index 7e7093165b..84bd2e40ba 100644
--- a/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts
+++ b/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts
@@ -5,6 +5,7 @@ import useChains from '@/hooks/useChains'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { capitalize } from '@/utils/formatters'
 import { getPeerName, isBlockedBridge, isWarnedBridge } from '@/features/walletconnect/services/utils'
+import { BRAND_NAME } from '@/config/constants'
 
 const NAME_FALLBACK = 'this dApp'
 const NAME_PLACEHOLDER = '%%name%%'
@@ -13,7 +14,7 @@ const CHAIN_PLACEHOLDER = '%%chain%%'
 const Warnings: Record<string, { severity: AlertColor; message: string }> = {
   BLOCKED_BRIDGE: {
     severity: 'error',
-    message: `${NAME_PLACEHOLDER} is a bridge that is incompatible with Safe{Wallet} — the bridged funds will be lost. Consider using a different bridge.`,
+    message: `${NAME_PLACEHOLDER} is a bridge that is incompatible with ${BRAND_NAME} — the bridged funds will be lost. Consider using a different bridge.`,
   },
   WARNED_BRIDGE: {
     severity: 'warning',
diff --git a/src/features/walletconnect/constants.ts b/src/features/walletconnect/constants.ts
index 26f0e7ee7a..03ae788421 100644
--- a/src/features/walletconnect/constants.ts
+++ b/src/features/walletconnect/constants.ts
@@ -1,3 +1,5 @@
+import { BRAND_NAME } from '@/config/constants'
+
 export const SAFE_COMPATIBLE_METHODS = [
   'eth_accounts',
   'net_version',
@@ -31,7 +33,7 @@ export const SAFE_COMPATIBLE_METHODS = [
 export const SAFE_COMPATIBLE_EVENTS = ['chainChanged', 'accountsChanged']
 
 export const SAFE_WALLET_METADATA = {
-  name: 'Safe{Wallet}',
+  name: BRAND_NAME,
   url: 'https://app.safe.global',
   description: 'Smart contract wallet for Ethereum',
   icons: ['https://app.safe.global/images/logo-round.svg'],
diff --git a/src/hooks/useIsOfficialHost.ts b/src/hooks/useIsOfficialHost.ts
new file mode 100644
index 0000000000..680f049f09
--- /dev/null
+++ b/src/hooks/useIsOfficialHost.ts
@@ -0,0 +1,9 @@
+import { useMemo } from 'react'
+import { IS_OFFICIAL_HOST, OFFICIAL_HOSTS } from '@/config/constants'
+
+export const useIsOfficialHost = (): boolean => {
+  return useMemo(
+    () => IS_OFFICIAL_HOST && (typeof window === 'undefined' || OFFICIAL_HOSTS.test(window.location.host)),
+    [],
+  )
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6ff90ba635..94f5d8bd6d 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -12,7 +12,7 @@ import { setBaseUrl as setNewGatewayBaseUrl } from '@safe-global/safe-client-gat
 import { CacheProvider, type EmotionCache } from '@emotion/react'
 import SafeThemeProvider from '@/components/theme/SafeThemeProvider'
 import '@/styles/globals.css'
-import { IS_PRODUCTION, GATEWAY_URL_STAGING, GATEWAY_URL_PRODUCTION } from '@/config/constants'
+import { IS_PRODUCTION, GATEWAY_URL_STAGING, GATEWAY_URL_PRODUCTION, BRAND_NAME } from '@/config/constants'
 import { makeStore, useHydrateStore } from '@/store'
 import PageLayout from '@/components/common/PageLayout'
 import useLoadableStores from '@/hooks/useLoadableStores'
@@ -116,7 +116,7 @@ const WebCoreApp = ({
   return (
     <Provider store={reduxStore}>
       <Head>
-        <title key="default-title">{'Safe{Wallet}'}</title>
+        <title key="default-title">{BRAND_NAME}</title>
         <MetaTags prefetchUrl={GATEWAY_URL} />
       </Head>
 
diff --git a/src/pages/_offline.tsx b/src/pages/_offline.tsx
index a36fda8e98..10c2025af5 100644
--- a/src/pages/_offline.tsx
+++ b/src/pages/_offline.tsx
@@ -2,12 +2,13 @@ import { Box, Paper, Typography } from '@mui/material'
 import WifiOffIcon from '@mui/icons-material/WifiOff'
 import type { NextPage } from 'next'
 import Head from 'next/head'
+import { BRAND_NAME } from '@/config/constants'
 
 const Offline: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Offline'}</title>
+        <title>{`${BRAND_NAME} – Offline`}</title>
       </Head>
 
       <main>
diff --git a/src/pages/addOwner.tsx b/src/pages/addOwner.tsx
index 016286c181..cc1052036f 100644
--- a/src/pages/addOwner.tsx
+++ b/src/pages/addOwner.tsx
@@ -5,6 +5,7 @@ import { useContext, useEffect } from 'react'
 import { TxModalContext } from '@/components/tx-flow'
 import { AddOwnerFlow } from '@/components/tx-flow/flows'
 import { AppRoutes } from '@/config/routes'
+import { BRAND_NAME } from '@/config/constants'
 
 const AddOwner: NextPage = () => {
   const router = useRouter()
@@ -23,7 +24,7 @@ const AddOwner: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Add Signer'}</title>
+        <title>{`${BRAND_NAME} – Add Signer`}</title>
       </Head>
     </>
   )
diff --git a/src/pages/address-book.tsx b/src/pages/address-book.tsx
index d1eefe0dfa..744fea1f46 100644
--- a/src/pages/address-book.tsx
+++ b/src/pages/address-book.tsx
@@ -1,12 +1,13 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import AddressBookTable from '@/components/address-book/AddressBookTable'
+import { BRAND_NAME } from '@/config/constants'
 
 const AddressBook: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Address book'}</title>
+        <title>{`${BRAND_NAME} – Address book`}</title>
       </Head>
 
       <AddressBookTable />
diff --git a/src/pages/apps/bookmarked.tsx b/src/pages/apps/bookmarked.tsx
index 55e77b66a4..34e6571602 100644
--- a/src/pages/apps/bookmarked.tsx
+++ b/src/pages/apps/bookmarked.tsx
@@ -3,6 +3,7 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { AppRoutes } from '@/config/routes'
+import { BRAND_NAME } from '@/config/constants'
 
 const BookmarkedSafeApps: NextPage = () => {
   const router = useRouter()
@@ -14,7 +15,7 @@ const BookmarkedSafeApps: NextPage = () => {
 
   return (
     <Head>
-      <title>{'Safe{Wallet} – Safe Apps'}</title>
+      <title>{`${BRAND_NAME} – Safe Apps`}</title>
     </Head>
   )
 }
diff --git a/src/pages/apps/custom.tsx b/src/pages/apps/custom.tsx
index eafcae0e1d..01224eeb6f 100644
--- a/src/pages/apps/custom.tsx
+++ b/src/pages/apps/custom.tsx
@@ -9,6 +9,7 @@ import SafeAppsSDKLink from '@/components/safe-apps/SafeAppsSDKLink'
 import { RemoveCustomAppModal } from '@/components/safe-apps/RemoveCustomAppModal'
 import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
 import { SAFE_APPS_LABELS } from '@/services/analytics'
+import { BRAND_NAME } from '@/config/constants'
 
 const CustomSafeApps: NextPage = () => {
   // TODO: create a custom hook instead of use useSafeApps
@@ -30,7 +31,7 @@ const CustomSafeApps: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Custom Safe Apps'}</title>
+        <title>{`${BRAND_NAME} – Custom Safe Apps`}</title>
       </Head>
 
       <SafeAppsSDKLink />
diff --git a/src/pages/apps/index.tsx b/src/pages/apps/index.tsx
index 72252d4f67..85c87216fa 100644
--- a/src/pages/apps/index.tsx
+++ b/src/pages/apps/index.tsx
@@ -15,6 +15,7 @@ import SafeAppsFilters from '@/components/safe-apps/SafeAppsFilters'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
 import { SAFE_APPS_LABELS } from '@/services/analytics'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeApps: NextPage = () => {
   const router = useRouter()
@@ -50,7 +51,7 @@ const SafeApps: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Safe Apps'}</title>
+        <title>{`${BRAND_NAME} – Safe Apps`}</title>
       </Head>
 
       <SafeAppsSDKLink />
diff --git a/src/pages/balances/index.tsx b/src/pages/balances/index.tsx
index 6a69b95670..277f9310ab 100644
--- a/src/pages/balances/index.tsx
+++ b/src/pages/balances/index.tsx
@@ -14,6 +14,7 @@ import TokenListSelect from '@/components/balances/TokenListSelect'
 import StakingBanner from '@/components/dashboard/StakingBanner'
 import useIsStakingBannerEnabled from '@/features/stake/hooks/useIsStakingBannerEnabled'
 import { Box } from '@mui/material'
+import { BRAND_NAME } from '@/config/constants'
 
 const Balances: NextPage = () => {
   const { error } = useBalances()
@@ -24,7 +25,7 @@ const Balances: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Assets'}</title>
+        <title>{`${BRAND_NAME} – Assets`}</title>
       </Head>
 
       <AssetsHeader>
diff --git a/src/pages/balances/nfts.tsx b/src/pages/balances/nfts.tsx
index fcf5976766..e8e2fa77ce 100644
--- a/src/pages/balances/nfts.tsx
+++ b/src/pages/balances/nfts.tsx
@@ -5,7 +5,7 @@ import { Grid, Skeleton, Typography } from '@mui/material'
 import AssetsHeader from '@/components/balances/AssetsHeader'
 import NftCollections from '@/components/nfts/NftCollections'
 import SafeAppCard from '@/components/safe-apps/SafeAppCard'
-import { SafeAppsTag } from '@/config/constants'
+import { BRAND_NAME, SafeAppsTag } from '@/config/constants'
 import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 
 // `React.memo` requires a `displayName`
@@ -57,7 +57,7 @@ const NFTs: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – NFTs'}</title>
+        <title>{`${BRAND_NAME} – NFTs`}</title>
       </Head>
 
       <AssetsHeader />
diff --git a/src/pages/bridge.tsx b/src/pages/bridge.tsx
index 34a04320ce..26a76ab6d9 100644
--- a/src/pages/bridge.tsx
+++ b/src/pages/bridge.tsx
@@ -2,12 +2,13 @@ import Head from 'next/head'
 import type { NextPage } from 'next'
 
 import { Bridge } from '@/features/bridge/components/Bridge'
+import { BRAND_NAME } from '@/config/constants'
 
 const BridgePage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Bridge'}</title>
+        <title>{`${BRAND_NAME} – Bridge`}</title>
       </Head>
       <Bridge />
     </>
diff --git a/src/pages/cookie.tsx b/src/pages/cookie.tsx
index 3d277388ce..5bdcbdd7c6 100644
--- a/src/pages/cookie.tsx
+++ b/src/pages/cookie.tsx
@@ -3,7 +3,8 @@ import Head from 'next/head'
 import Link from 'next/link'
 import MUILink from '@mui/material/Link'
 import { AppRoutes } from '@/config/routes'
-import { IS_OFFICIAL_HOST } from '@/config/constants'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeCookiePolicy = () => (
   <div>
@@ -590,13 +591,15 @@ const SafeCookiePolicy = () => (
 )
 
 const CookiePolicy: NextPage = () => {
+  const isOfficialHost = useIsOfficialHost()
+
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Cookie policy'}</title>
+        <title>{`${BRAND_NAME} – Cookie policy`}</title>
       </Head>
 
-      <main>{IS_OFFICIAL_HOST && <SafeCookiePolicy />}</main>
+      <main>{isOfficialHost && <SafeCookiePolicy />}</main>
     </>
   )
 }
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 62590cca4c..9abd21109a 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -2,12 +2,13 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 
 import Dashboard from '@/components/dashboard'
+import { BRAND_NAME } from '@/config/constants'
 
 const Home: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Dashboard'}</title>
+        <title>{`${BRAND_NAME} – Dashboard`}</title>
       </Head>
 
       <main>
diff --git a/src/pages/imprint.tsx b/src/pages/imprint.tsx
index 2a9725ba59..50c8ef286f 100644
--- a/src/pages/imprint.tsx
+++ b/src/pages/imprint.tsx
@@ -1,9 +1,10 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { IS_OFFICIAL_HOST } from '@/config/constants'
 import { Typography } from '@mui/material'
 import Link from 'next/link'
 import MUILink from '@mui/material/Link'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeImprint = () => (
   <div>
@@ -69,13 +70,15 @@ const SafeImprint = () => (
 )
 
 const Imprint: NextPage = () => {
+  const isOfficialHost = useIsOfficialHost()
+
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Imprint'}</title>
+        <title>{`${BRAND_NAME} – Imprint`}</title>
       </Head>
 
-      <main>{IS_OFFICIAL_HOST && <SafeImprint />}</main>
+      <main>{isOfficialHost && <SafeImprint />}</main>
     </>
   )
 }
diff --git a/src/pages/licenses.tsx b/src/pages/licenses.tsx
index 7d271c8981..f9107851df 100644
--- a/src/pages/licenses.tsx
+++ b/src/pages/licenses.tsx
@@ -1,9 +1,10 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { IS_OFFICIAL_HOST } from '@/config/constants'
 import { Typography, Table, TableBody, TableRow, TableCell, TableHead, TableContainer, Box } from '@mui/material'
 import ExternalLink from '@/components/common/ExternalLink'
 import Paper from '@mui/material/Paper'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeLicenses = () => (
   <>
@@ -16,7 +17,7 @@ const SafeLicenses = () => (
     <Box mb={4}>
       <Typography mb={3}>
         This page contains a list of attribution notices for third party software that may be contained in portions of
-        the {'Safe{Wallet}'}. We thank the open source community for all of their contributions.
+        the {BRAND_NAME}. We thank the open source community for all of their contributions.
       </Typography>
       <Typography variant="h2" mb={2}>
         Android
@@ -706,13 +707,15 @@ const SafeLicenses = () => (
 )
 
 const Licenses: NextPage = () => {
+  const isOfficialHost = useIsOfficialHost()
+
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Licenses'}</title>
+        <title>{`${BRAND_NAME} – Licenses`}</title>
       </Head>
 
-      <main>{IS_OFFICIAL_HOST && <SafeLicenses />}</main>
+      <main>{isOfficialHost && <SafeLicenses />}</main>
     </>
   )
 }
diff --git a/src/pages/new-safe/advanced-create.tsx b/src/pages/new-safe/advanced-create.tsx
index a3a1b54d10..76248ff466 100644
--- a/src/pages/new-safe/advanced-create.tsx
+++ b/src/pages/new-safe/advanced-create.tsx
@@ -2,12 +2,13 @@ import Head from 'next/head'
 import type { NextPage } from 'next'
 
 import AdvancedCreateSafe from '@/components/new-safe/create/AdvancedCreateSafe'
+import { BRAND_NAME } from '@/config/constants'
 
 const Open: NextPage = () => {
   return (
     <main>
       <Head>
-        <title>{'Safe{Wallet} – Advanced Safe creation'}</title>
+        <title>{`${BRAND_NAME} – Advanced Safe creation`}</title>
       </Head>
 
       <AdvancedCreateSafe />
diff --git a/src/pages/new-safe/create.tsx b/src/pages/new-safe/create.tsx
index d8f53e2c55..77c85474af 100644
--- a/src/pages/new-safe/create.tsx
+++ b/src/pages/new-safe/create.tsx
@@ -2,12 +2,13 @@ import Head from 'next/head'
 import type { NextPage } from 'next'
 
 import CreateSafe from '@/components/new-safe/create'
+import { BRAND_NAME } from '@/config/constants'
 
 const Open: NextPage = () => {
   return (
     <main>
       <Head>
-        <title>{'Safe{Wallet} – Create Safe Account'}</title>
+        <title>{`${BRAND_NAME} – Create Safe Account`}</title>
       </Head>
 
       <CreateSafe />
diff --git a/src/pages/new-safe/load.tsx b/src/pages/new-safe/load.tsx
index 427436f417..22155d9bcf 100644
--- a/src/pages/new-safe/load.tsx
+++ b/src/pages/new-safe/load.tsx
@@ -2,6 +2,7 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import LoadSafe, { loadSafeDefaultData } from '@/components/new-safe/load'
+import { BRAND_NAME } from '@/config/constants'
 
 const Load: NextPage = () => {
   const router = useRouter()
@@ -11,7 +12,7 @@ const Load: NextPage = () => {
   return (
     <main>
       <Head>
-        <title>{'Safe{Wallet} – Add Safe Account'}</title>
+        <title>{`${BRAND_NAME} – Add Safe Account`}</title>
       </Head>
 
       {safeAddress ? (
diff --git a/src/pages/privacy.tsx b/src/pages/privacy.tsx
index 8bf31ed9e1..f9adfcd54f 100644
--- a/src/pages/privacy.tsx
+++ b/src/pages/privacy.tsx
@@ -2,21 +2,24 @@ import CustomLink from '@/components/common/CustomLink'
 import type { MDXComponents } from 'mdx/types'
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { IS_OFFICIAL_HOST } from '@/config/constants'
 import SafePrivacyPolicy from '@/markdown/privacy/privacy.md'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_NAME } from '@/config/constants'
 
 const overrideComponents: MDXComponents = {
   a: CustomLink,
 }
 
 const PrivacyPolicy: NextPage = () => {
+  const isOfficialHost = useIsOfficialHost()
+
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Privacy policy'}</title>
+        <title>{`${BRAND_NAME} – Privacy policy`}</title>
       </Head>
 
-      <main>{IS_OFFICIAL_HOST && <SafePrivacyPolicy components={overrideComponents} />}</main>
+      <main>{isOfficialHost && <SafePrivacyPolicy components={overrideComponents} />}</main>
     </>
   )
 }
diff --git a/src/pages/settings/appearance.tsx b/src/pages/settings/appearance.tsx
index 6832244d2d..ad1b9ee02e 100644
--- a/src/pages/settings/appearance.tsx
+++ b/src/pages/settings/appearance.tsx
@@ -9,6 +9,7 @@ import SettingsHeader from '@/components/settings/SettingsHeader'
 import { trackEvent, SETTINGS_EVENTS } from '@/services/analytics'
 import { useDarkMode } from '@/hooks/useDarkMode'
 import ExternalLink from '@/components/common/ExternalLink'
+import { BRAND_NAME } from '@/config/constants'
 
 const Appearance: NextPage = () => {
   const dispatch = useAppDispatch()
@@ -32,7 +33,7 @@ const Appearance: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Appearance'}</title>
+        <title>{`${BRAND_NAME} – Settings – Appearance`}</title>
       </Head>
       <SettingsHeader />
       <main>
diff --git a/src/pages/settings/cookies.tsx b/src/pages/settings/cookies.tsx
index 4fb0c830ae..3a51e74930 100644
--- a/src/pages/settings/cookies.tsx
+++ b/src/pages/settings/cookies.tsx
@@ -3,12 +3,13 @@ import SettingsHeader from '@/components/settings/SettingsHeader'
 import { Grid, Paper, Typography } from '@mui/material'
 import type { NextPage } from 'next'
 import Head from 'next/head'
+import { BRAND_NAME } from '@/config/constants'
 
 const Cookies: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Cookies'}</title>
+        <title>{`${BRAND_NAME} – Settings – Cookies`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/data.tsx b/src/pages/settings/data.tsx
index 65d1e44b9f..42df732cce 100644
--- a/src/pages/settings/data.tsx
+++ b/src/pages/settings/data.tsx
@@ -1,5 +1,6 @@
 import DataManagement from '@/components/settings/DataManagement'
 import SettingsHeader from '@/components/settings/SettingsHeader'
+import { BRAND_NAME } from '@/config/constants'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 
@@ -7,7 +8,7 @@ const Data: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Data'}</title>
+        <title>{`${BRAND_NAME} – Settings – Data`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/environment-variables.tsx b/src/pages/settings/environment-variables.tsx
index 1e46bfa953..d0c92b9d69 100644
--- a/src/pages/settings/environment-variables.tsx
+++ b/src/pages/settings/environment-variables.tsx
@@ -2,12 +2,13 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import EnvironmentVariables from '@/components/settings/EnvironmentVariables'
+import { BRAND_NAME } from '@/config/constants'
 
 const EnvironmentVariablesPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Environment variables'}</title>
+        <title>{`${BRAND_NAME} – Settings – Environment variables`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/index.tsx b/src/pages/settings/index.tsx
index 1605ff955b..adf1af6a03 100644
--- a/src/pages/settings/index.tsx
+++ b/src/pages/settings/index.tsx
@@ -3,6 +3,7 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { generalSettingsNavItems, settingsNavItems } from '@/components/sidebar/SidebarNavigation/config'
+import { BRAND_NAME } from '@/config/constants'
 
 const Settings: NextPage = () => {
   const router = useRouter()
@@ -17,7 +18,7 @@ const Settings: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings'}</title>
+        <title>{`${BRAND_NAME} – Settings`}</title>
       </Head>
     </>
   )
diff --git a/src/pages/settings/modules.tsx b/src/pages/settings/modules.tsx
index a25bbada52..cffebc4ca8 100644
--- a/src/pages/settings/modules.tsx
+++ b/src/pages/settings/modules.tsx
@@ -5,12 +5,13 @@ import SafeModules from '@/components/settings/SafeModules'
 import TransactionGuards from '@/components/settings/TransactionGuards'
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import { FallbackHandler } from '@/components/settings/FallbackHandler'
+import { BRAND_NAME } from '@/config/constants'
 
 const Modules: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Modules'}</title>
+        <title>{`${BRAND_NAME} – Settings – Modules`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/notifications.tsx b/src/pages/settings/notifications.tsx
index 66dc3cda37..d6c3760779 100644
--- a/src/pages/settings/notifications.tsx
+++ b/src/pages/settings/notifications.tsx
@@ -5,6 +5,7 @@ import SettingsHeader from '@/components/settings/SettingsHeader'
 import { PushNotifications } from '@/components/settings/PushNotifications'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import { BRAND_NAME } from '@/config/constants'
 
 const NotificationsPage: NextPage = () => {
   const isNotificationFeatureEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
@@ -16,7 +17,7 @@ const NotificationsPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Notifications'}</title>
+        <title>{`${BRAND_NAME} – Settings – Notifications`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/safe-apps/index.tsx b/src/pages/settings/safe-apps/index.tsx
index 3cb576210a..71c2a17f4b 100644
--- a/src/pages/settings/safe-apps/index.tsx
+++ b/src/pages/settings/safe-apps/index.tsx
@@ -4,12 +4,13 @@ import Head from 'next/head'
 import SafeAppsPermissions from '@/components/settings/SafeAppsPermissions'
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import { SafeAppsSigningMethod } from '@/components/settings/SafeAppsSigningMethod'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeAppsPermissionsPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Safe Apps'}</title>
+        <title>{`${BRAND_NAME} – Settings – Safe Apps`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/security.tsx b/src/pages/settings/security.tsx
index 1931fc7145..c6f93543b7 100644
--- a/src/pages/settings/security.tsx
+++ b/src/pages/settings/security.tsx
@@ -3,12 +3,13 @@ import Head from 'next/head'
 
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import SecurityLogin from '@/components/settings/SecurityLogin'
+import { BRAND_NAME } from '@/config/constants'
 
 const SecurityPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Security'}</title>
+        <title>{`${BRAND_NAME} – Settings – Security`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/setup.tsx b/src/pages/settings/setup.tsx
index 1dad75fee9..c41cd26b2e 100644
--- a/src/pages/settings/setup.tsx
+++ b/src/pages/settings/setup.tsx
@@ -9,6 +9,7 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import ProposersList from 'src/components/settings/ProposersList'
 import SpendingLimits from '@/components/settings/SpendingLimits'
+import { BRAND_NAME } from '@/config/constants'
 
 const Setup: NextPage = () => {
   const { safe, safeLoaded } = useSafeInfo()
@@ -19,7 +20,7 @@ const Setup: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Setup'}</title>
+        <title>{`${BRAND_NAME} – Settings – Setup`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/share/safe-app.tsx b/src/pages/share/safe-app.tsx
index 1940e462a5..49346bd20d 100644
--- a/src/pages/share/safe-app.tsx
+++ b/src/pages/share/safe-app.tsx
@@ -3,6 +3,7 @@ import { Box, CircularProgress } from '@mui/material'
 import { useSafeAppUrl } from '@/hooks/safe-apps/useSafeAppUrl'
 import { SafeAppLanding } from '@/components/safe-apps/SafeAppLandingPage'
 import { useCurrentChain } from '@/hooks/useChains'
+import { BRAND_NAME } from '@/config/constants'
 
 const ShareSafeApp = () => {
   const appUrl = useSafeAppUrl()
@@ -11,7 +12,7 @@ const ShareSafeApp = () => {
   return (
     <>
       <Head>
-        <title>{`Safe{Wallet} – Safe Apps`}</title>
+        <title>{`${BRAND_NAME} – Safe Apps`}</title>
       </Head>
 
       <main>
diff --git a/src/pages/stake.tsx b/src/pages/stake.tsx
index 2b629a2676..af79840caa 100644
--- a/src/pages/stake.tsx
+++ b/src/pages/stake.tsx
@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic'
 import { Typography } from '@mui/material'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import { BRAND_NAME } from '@/config/constants'
 
 const LazyStakePage = dynamic(() => import('@/features/stake/components/StakePage'), { ssr: false })
 
@@ -13,7 +14,7 @@ const StakePage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Stake'}</title>
+        <title>{`${BRAND_NAME} – Stake`}</title>
       </Head>
 
       {isFeatureEnabled === true ? (
diff --git a/src/pages/swap.tsx b/src/pages/swap.tsx
index 0a18c061b8..b97c9a6f9f 100644
--- a/src/pages/swap.tsx
+++ b/src/pages/swap.tsx
@@ -5,6 +5,7 @@ import dynamic from 'next/dynamic'
 import { Typography } from '@mui/material'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import { BRAND_NAME } from '@/config/constants'
 
 // Cow Swap expects native token addresses to be in the format '0xeeee...eeee'
 const adjustEthAddress = (address: string) => {
@@ -33,7 +34,7 @@ const SwapPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Swap'}</title>
+        <title>{`${BRAND_NAME} – Swap`}</title>
       </Head>
 
       <main style={{ height: 'calc(100vh - 52px)' }}>
diff --git a/src/pages/terms.tsx b/src/pages/terms.tsx
index 8354588ef2..c8805f925c 100644
--- a/src/pages/terms.tsx
+++ b/src/pages/terms.tsx
@@ -1,22 +1,25 @@
 import CustomLink from '@/components/common/CustomLink'
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { IS_OFFICIAL_HOST } from '@/config/constants'
 import SafeTerms from '@/markdown/terms/terms.md'
 import type { MDXComponents } from 'mdx/types'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_NAME } from '@/config/constants'
 
 const overrideComponents: MDXComponents = {
   a: CustomLink,
 }
 
 const Terms: NextPage = () => {
+  const isOfficialHost = useIsOfficialHost()
+
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Terms'}</title>
+        <title>{`${BRAND_NAME} – Terms`}</title>
       </Head>
 
-      <main>{IS_OFFICIAL_HOST && <SafeTerms components={overrideComponents} />}</main>
+      <main>{isOfficialHost && <SafeTerms components={overrideComponents} />}</main>
     </>
   )
 }
diff --git a/src/pages/transactions/history.tsx b/src/pages/transactions/history.tsx
index d1d9f280e4..ab5ed39ac9 100644
--- a/src/pages/transactions/history.tsx
+++ b/src/pages/transactions/history.tsx
@@ -11,6 +11,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import TxFilterForm from '@/components/transactions/TxFilterForm'
 import TrustedToggle from '@/components/transactions/TrustedToggle'
 import { useTxFilter } from '@/utils/tx-history-filter'
+import { BRAND_NAME } from '@/config/constants'
 
 const History: NextPage = () => {
   const [filter] = useTxFilter()
@@ -25,7 +26,7 @@ const History: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Transaction history'}</title>
+        <title>{`${BRAND_NAME} – Transaction history`}</title>
       </Head>
 
       <TxHeader>
diff --git a/src/pages/transactions/messages.tsx b/src/pages/transactions/messages.tsx
index 01ec4892af..e39e0659a3 100644
--- a/src/pages/transactions/messages.tsx
+++ b/src/pages/transactions/messages.tsx
@@ -10,6 +10,7 @@ import SignedMessagesHelpLink from '@/components/transactions/SignedMessagesHelp
 import { AppRoutes } from '@/config/routes'
 import { useCurrentChain } from '@/hooks/useChains'
 import { hasFeature } from '@/utils/chains'
+import { BRAND_NAME } from '@/config/constants'
 
 const Messages: NextPage = () => {
   const chain = useCurrentChain()
@@ -26,7 +27,7 @@ const Messages: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Messages'}</title>
+        <title>{`${BRAND_NAME} – Messages`}</title>
       </Head>
 
       <TxHeader>
diff --git a/src/pages/transactions/msg.tsx b/src/pages/transactions/msg.tsx
index 2db44e1e61..d78883d141 100644
--- a/src/pages/transactions/msg.tsx
+++ b/src/pages/transactions/msg.tsx
@@ -3,12 +3,13 @@ import Head from 'next/head'
 
 import Typography from '@mui/material/Typography'
 import SingleMsg from '@/components/safe-messages/SingleMsg'
+import { BRAND_NAME } from '@/config/constants'
 
 const SingleTransaction: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Message details'}</title>
+        <title>{`${BRAND_NAME} – Message details`}</title>
       </Head>
 
       <main>
diff --git a/src/pages/transactions/queue.tsx b/src/pages/transactions/queue.tsx
index f68919550e..378a253cb0 100644
--- a/src/pages/transactions/queue.tsx
+++ b/src/pages/transactions/queue.tsx
@@ -8,6 +8,7 @@ import { Box } from '@mui/material'
 import { BatchExecuteHoverProvider } from '@/components/transactions/BatchExecuteButton/BatchExecuteHoverProvider'
 import { usePendingTxsQueue, useShowUnsignedQueue } from '@/hooks/usePendingTxs'
 import RecoveryList from '@/features/recovery/components/RecoveryList'
+import { BRAND_NAME } from '@/config/constants'
 
 const Queue: NextPage = () => {
   const showPending = useShowUnsignedQueue()
@@ -15,7 +16,7 @@ const Queue: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Transaction queue'}</title>
+        <title>{`${BRAND_NAME} – Transaction queue`}</title>
       </Head>
 
       <BatchExecuteHoverProvider>
diff --git a/src/pages/transactions/tx.tsx b/src/pages/transactions/tx.tsx
index e60e093ebe..5ad12ee173 100644
--- a/src/pages/transactions/tx.tsx
+++ b/src/pages/transactions/tx.tsx
@@ -3,12 +3,13 @@ import Head from 'next/head'
 
 import SingleTx from '@/components/transactions/SingleTx'
 import Typography from '@mui/material/Typography'
+import { BRAND_NAME } from '@/config/constants'
 
 const SingleTransaction: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Transaction details'}</title>
+        <title>{`${BRAND_NAME} – Transaction details`}</title>
       </Head>
 
       <main>
diff --git a/src/pages/welcome/accounts.tsx b/src/pages/welcome/accounts.tsx
index 3cb3983d41..8223ec6b53 100644
--- a/src/pages/welcome/accounts.tsx
+++ b/src/pages/welcome/accounts.tsx
@@ -1,12 +1,13 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import MyAccounts from '@/features/myAccounts'
+import { BRAND_NAME } from '@/config/constants'
 
 const Accounts: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – My accounts'}</title>
+        <title>{`${BRAND_NAME} – My accounts`}</title>
       </Head>
 
       <MyAccounts />
diff --git a/src/pages/welcome/index.tsx b/src/pages/welcome/index.tsx
index 6a6506b4d6..0fa8cb46f1 100644
--- a/src/pages/welcome/index.tsx
+++ b/src/pages/welcome/index.tsx
@@ -1,12 +1,13 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import NewSafe from '@/components/welcome/NewSafe'
+import { BRAND_NAME } from '@/config/constants'
 
 const Welcome: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Welcome'}</title>
+        <title>{`${BRAND_NAME} – Welcome`}</title>
       </Head>
 
       <NewSafe />
diff --git a/src/services/onboard.ts b/src/services/onboard.ts
index cc37f1f136..7ed0c0bb30 100644
--- a/src/services/onboard.ts
+++ b/src/services/onboard.ts
@@ -4,6 +4,7 @@ import { getAllWallets } from '@/hooks/wallets/wallets'
 import { getRpcServiceUrl } from '@/hooks/wallets/web3'
 import type { EnvState } from '@/store/settingsSlice'
 import { numberToHex } from '@/utils/hex'
+import { BRAND_NAME } from '@/config/constants'
 
 let onboard: OnboardAPI | null = null
 
@@ -42,9 +43,9 @@ export const createOnboard = (
     },
 
     appMetadata: {
-      name: 'Safe{Wallet}',
+      name: BRAND_NAME,
       icon: location.origin + '/images/logo-round.svg',
-      description: 'Safe{Wallet} – smart contract wallet for Ethereum (ex-Gnosis Safe multisig)',
+      description: `${BRAND_NAME} – smart contract wallet for Ethereum (ex-Gnosis Safe multisig)`,
     },
 
     connect: {
diff --git a/src/services/safe-wallet-provider/notifications.ts b/src/services/safe-wallet-provider/notifications.ts
index c57452f856..feabdc19d7 100644
--- a/src/services/safe-wallet-provider/notifications.ts
+++ b/src/services/safe-wallet-provider/notifications.ts
@@ -1,3 +1,4 @@
+import { BRAND_NAME } from '@/config/constants'
 import type { AppInfo } from '.'
 
 export const showNotification = (title: string, options?: NotificationOptions) => {
@@ -27,13 +28,13 @@ export const NotificationMessages: Record<
   SIGNATURE_REQUEST: (appInfo: AppInfo) => ({
     title: 'Signature request',
     options: {
-      body: `${appInfo.name} wants you to sign a message. Open the Safe{Wallet} to continue.`,
+      body: `${appInfo.name} wants you to sign a message. Open the ${BRAND_NAME} to continue.`,
     },
   }),
   TRANSACTION_REQUEST: (appInfo: AppInfo) => ({
     title: 'Transaction request',
     options: {
-      body: `${appInfo.name} wants to submit a transaction. Open the Safe{Wallet} to continue.`,
+      body: `${appInfo.name} wants to submit a transaction. Open the ${BRAND_NAME} to continue.`,
     },
   }),
 }