Add support for displaying privacy policy when required

.env

@@ -26,3 +26,4 @@ REACT_APP_SHOW_BUILD_BANNERS=false
 # REACT_APP_FIXED_NETWORK=testnet
 REACT_APP_FIXED_LAYER=pontusx
 REACT_APP_SHOW_FIAT_VALUES=false
+# REACT_APP_SHOW_PRIVACY_POLICY=true

.env.production

@@ -21,3 +21,4 @@ REACT_APP_SHOW_BUILD_BANNERS=false
 # REACT_APP_FIXED_NETWORK=testnet
 REACT_APP_FIXED_LAYER=pontusx
 REACT_APP_SHOW_FIAT_VALUES=false
+# REACT_APP_SHOW_PRIVACY_POLICY=true

src/app/components/PageLayout/Footer.tsx

@@ -4,12 +4,14 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { styled } from '@mui/material/styles'
+import { Link as RouterLink } from 'react-router-dom'
 import Link from '@mui/material/Link'
 import { useTheme } from '@mui/material/styles'
 import { useConstant } from '../../hooks/useConstant'
 import { AppendMobileSearch } from '../AppendMobileSearch'
 import { SearchScope } from '../../../types/searchScope'
 import { api, github } from '../../utils/externalLinks'
+import { showPrivacyPolicy } from '../../../config'
 
 const FooterBox = styled(Box)(({ theme }) => ({
   display: 'flex',
@@ -128,6 +130,13 @@ export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction }) => {
                 </Typography>
               </StyledLinksGroup>
             </StyledBox>
+            {showPrivacyPolicy && (
+              <Typography variant="footer">
+                <Link component={RouterLink} to={'/privacy'} sx={{ color: theme.palette.layout.main }}>
+                  {t('privacyPolicy.title')}
+                </Link>
+              </Typography>
+            )}
             <Typography variant="footer">
               {isTablet ? t('footer.mobileTitle') : t('footer.title')} | {currentYear}
             </Typography>

src/app/pages/PrivacyPage/index.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { PageLayout } from '../../components/PageLayout'
+import { SubPageCard } from '../../components/SubPageCard'
+
+export const PrivacyPage: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <PageLayout>
+      <SubPageCard featured title={t('privacyPolicy.title')}>
+        <span>{t('common.missing')}</span>
+      </SubPageCard>
+    </PageLayout>
+  )
+}

src/config.ts

@@ -201,3 +201,5 @@ export const getFiatCurrencyForScope = (scope: SearchScope | undefined) =>
   (scope ? paraTimesConfig[scope.layer]?.[scope.network]?.fiatCurrency : undefined) ?? 'usd'
 
 export const showFiatValues = process.env.REACT_APP_SHOW_FIAT_VALUES === 'true'
+
+export const showPrivacyPolicy = process.env.REACT_APP_SHOW_PRIVACY_POLICY === 'true'

src/locales/en/translation.json

@@ -530,6 +530,9 @@
     "noData": "No data available",
     "nodes": "Nodes:"
   },
+  "privacyPolicy": {
+    "title": "Privacy Policy"
+  },
   "search": {
     "placeholder": "Address, Block, Contract, Transaction hash, Token name, etc.",
     "error": {

src/routes.tsx

@@ -47,6 +47,8 @@ import { ConsensusAccountsPage } from './app/pages/ConsensusAccountsPage'
 import { ConsensusTransactionsPage } from './app/pages/ConsensusTransactionsPage'
 import { ConsensusAccountDetailsPage } from './app/pages/ConsensusAccountDetailsPage'
 import { FC, useEffect } from 'react'
+import { PrivacyPage } from './app/pages/PrivacyPage'
+import { showPrivacyPolicy } from './config'
 
 const NetworkSpecificPart = () => (
   <ThemeByNetwork network={useRequiredScopeParam().network}>
@@ -264,6 +266,14 @@ export const routes: RouteObject[] = [
           },
         ],
       },
+      ...(showPrivacyPolicy
+        ? [
+            {
+              path: '/privacy',
+              element: withDefaultTheme(<PrivacyPage />),
+            },
+          ]
+        : []),
     ],
   },
 ]

src/types/global.d.ts

@@ -26,6 +26,7 @@ declare global {
       REACT_APP_FIXED_NETWORK?: string
       REACT_APP_FIXED_LAYER?: string
       REACT_APP_SHOW_FIAT_VALUES?: string
+      REACT_APP_SHOW_PRIVACY_POLICY?: string
     }
   }
 }