Support for using custom app title and description

.changelog/1244.feature.md

@@ -0,0 +1 @@
+Add support for white-labeling Explorer

.env

@@ -7,3 +7,5 @@ REACT_APP_BUILD_VERSION=
 REACT_APP_API=https://nexus.oasis.io/v1/
 REACT_APP_TESTNET_API=https://testnet.nexus.oasis.io/v1/
 # REACT_APP_NO_BUILD_BANNERS=true
+# REACT_APP_TITLE=Magic Explorer
+# REACT_APP_DESC=The official explorer for my cool project

src/app/components/PageLayout/Logotype.tsx

@@ -7,6 +7,7 @@ import { Link as RouterLink } from 'react-router-dom'
 import { OasisIcon } from '../CustomIcons/OasisIcon'
 import Typography from '@mui/material/Typography'
 import { useTranslation } from 'react-i18next'
+import { customAppTitle } from '../../../config'
 
 interface LogotypeProps {
   color?: string
@@ -26,6 +27,7 @@ export const Logotype: FC<LogotypeProps> = ({ color, showText }) => {
   const theme = useTheme()
   const { isMobile } = useScreenSize()
   const logoSize = isMobile ? 32 : 40
+  const title = customAppTitle ?? t('pageTitle')
 
   return (
     <Box
@@ -40,7 +42,7 @@ export const Logotype: FC<LogotypeProps> = ({ color, showText }) => {
       <OasisIcon sx={{ fontSize: logoSize }} />
       {showText && (
         <Typography variant="h1" color={color || theme.palette.layout.main} sx={{ whiteSpace: 'nowrap' }}>
-          {t('pageTitle')}
+          {title}
         </Typography>
       )}
     </Box>

src/app/components/Search/index.tsx

@@ -24,6 +24,7 @@ import { isValidBlockHeight } from '../../utils/helpers'
 import { typingDelay } from '../../../styles/theme'
 import { isValidMnemonic } from '../../utils/helpers'
 import Collapse from '@mui/material/Collapse'
+import { customAppTitle } from '../../../config'
 
 export type SearchVariant = 'button' | 'icon' | 'expandable'
 
@@ -163,7 +164,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
   const hasError = !!errorMessage
 
   const warningMessage = hasPrivacyProblem
-    ? t('search.error.privacy', { appName: t('appName'), wordsOfPower })
+    ? t('search.error.privacy', { appName: customAppTitle ?? t('appName'), wordsOfPower })
     : undefined
   const hasWarning = !!warningMessage
 

src/config.ts

@@ -127,3 +127,6 @@ export const deploys = {
 
 const stableDeploys = [...deploys.production, deploys.staging]
 export const isStableDeploy = stableDeploys.some(url => window.location.origin === url)
+
+export const customAppTitle = process.env.REACT_APP_TITLE
+export const customAppDescription = process.env.REACT_APP_DESCRIPTION

src/index.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { register as registerSwiperElements } from 'swiper/element/bundle'
 import { routes } from './routes'
 import './styles/index.css'
 // Initialize languages
 import './locales/i18n'
+import { customAppDescription, customAppTitle } from './config'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -26,9 +28,27 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
 root.render(
   <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
+    <HelmetProvider>
+      <QueryClientProvider client={queryClient}>
+        {(!!customAppTitle || !!customAppDescription) && (
+          <Helmet>
+            {customAppTitle && (
+              <>
+                <title>{customAppTitle}</title>
+                <meta property="og:title" content={customAppTitle} />
+              </>
+            )}
+            {customAppDescription && (
+              <>
+                <meta name="description" content={customAppDescription} />
+                <meta property="og:description" content={customAppDescription} />
+              </>
+            )}
+          </Helmet>
+        )}
+        <RouterProvider router={router} />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </HelmetProvider>
   </React.StrictMode>,
 )