Create homepage network selector component

src/app/pages/HomePage/Graph/Graph/index.tsx

@@ -8,13 +8,15 @@ import { useGetBoundingClientRect } from '../../../../hooks/useGetBoundingClient
 import useMediaQuery from '@mui/material/useMediaQuery'
 import { GraphTooltip } from '../GraphTooltip'
 import { Layer } from '../../../../../oasis-indexer/api'
+import { Network } from '../../../../../types/network'
 
 interface GraphBaseProps {
   disabled?: boolean
   transparent?: boolean
 }
 
 interface GraphProps extends GraphBaseProps {
+  network: Network
   scale: number
   // TODO: Consider moving this to a state management solution
   selectedLayer?: Layer

src/app/pages/HomePage/Graph/NetworkSelector/index.tsx

@@ -0,0 +1,103 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { TFunction } from 'i18next'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import AddIcon from '@mui/icons-material/Add'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import RemoveIcon from '@mui/icons-material/Remove'
+import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
+import { COLORS } from '../../../../../styles/theme/colors'
+import { Network } from '../../../../../types/network'
+import Collapse from '@mui/material/Collapse'
+
+const StyledNetworkSelector = styled(Box)(() => ({
+  position: 'absolute',
+  bottom: 0,
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'center',
+}))
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  backgroundColor: COLORS.brandExtraDark,
+  border: `solid 3px ${COLORS.aqua}`,
+  borderRadius: '45px',
+  padding: `${theme.spacing(3)} ${theme.spacing(4)}`,
+  display: 'inline-flex',
+  alignItems: 'center',
+}))
+
+const StyledButton = styled(Button, {
+  shouldForwardProp: prop => prop !== 'isSelectedNetwork',
+})<{ isSelectedNetwork: boolean }>(({ isSelectedNetwork, theme }) => ({
+  height: '30px',
+  padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
+  textTransform: 'capitalize',
+  fontSize: '16px',
+  borderRadius: '9px',
+  backgroundColor: isSelectedNetwork ? COLORS.brandExtraDark : COLORS.brandDark,
+  borderColor: isSelectedNetwork ? COLORS.white : COLORS.brandDark,
+  borderWidth: theme.spacing(1),
+  color: COLORS.white,
+  '&:hover': {
+    borderWidth: theme.spacing(1),
+    borderColor: COLORS.white,
+  },
+}))
+
+type NetworkSelectorProps = {
+  network: Network
+  setNetwork: (network: Network) => void
+}
+
+const getLabels = (t: TFunction): { [key in Network]: string } => ({
+  mainnet: t('common.mainnet'),
+  testnet: t('common.testnet'),
+})
+
+export const NetworkSelector: FC<NetworkSelectorProps> = ({ network, setNetwork }) => {
+  const { t } = useTranslation()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+  const [open, setOpen] = useState(false)
+  const options: Network[] = ['mainnet', 'testnet']
+  const labels = getLabels(t)
+
+  return (
+    <StyledNetworkSelector>
+      <StyledBox>
+        {!isMobile && (
+          <Typography component="span" sx={{ fontSize: '12px', color: COLORS.white }}>
+            {t('home.selectNetwork')}
+          </Typography>
+        )}
+        <Box sx={{ height: 30, display: 'flex' }}>
+          {options.map(option => (
+            <Collapse orientation="horizontal" in={open || network === option} key={option}>
+              <StyledButton
+                onClick={() => setNetwork(option)}
+                size="small"
+                variant="outlined"
+                sx={{ ml: 4 }}
+                isSelectedNetwork={option === network}
+              >
+                {labels[option]}
+              </StyledButton>
+            </Collapse>
+          ))}
+        </Box>
+        <IconButton aria-label={t('home.selectNetworkAria')} onClick={() => setOpen(!open)}>
+          {open ? (
+            <RemoveIcon fontSize="medium" sx={{ color: 'white', fontSize: '18px' }} />
+          ) : (
+            <AddIcon fontSize="medium" sx={{ color: 'white', fontSize: '18px' }} />
+          )}
+        </IconButton>
+      </StyledBox>
+    </StyledNetworkSelector>
+  )
+}

src/app/pages/HomePage/Graph/ParaTimeSelector/index.tsx

@@ -16,7 +16,9 @@ import { GraphUtils } from '../Graph/graph-utils'
 import useResizeObserver from 'use-resize-observer'
 import HelpScreen from '../HelpScreen'
 import { GraphTooltipMobile } from '../GraphTooltip/GraphTooltipMobile'
+import { NetworkSelector } from '../NetworkSelector'
 import { Layer } from '../../../../../oasis-indexer/api'
+import { Network } from '../../../../../types/network'
 
 interface ParaTimeSelectorBaseProps {
   disabled: boolean
@@ -115,6 +117,7 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({ disabled, step, setSte
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const { t } = useTranslation()
   const exploreBtnTextTranslated = t('home.exploreBtnText')
+  const [network, setNetwork] = useState<Network>('mainnet')
   const [activeMobileGraphTooltip, setActiveMobileGraphTooltip] = useState<Layer | null>(null)
 
   const [selectedLayer, setSelectedLayer] = useState<Layer>()
@@ -164,6 +167,7 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({ disabled, step, setSte
               <QuickPinchZoomInner ref={quickPinchZoomInnerRef}>
                 <Graph
                   ref={graphRef}
+                  network={network}
                   disabled={disabled}
                   transparent={ParaTimeSelectorUtils.getIsGraphTransparent(step)}
                   selectedLayer={selectedLayer}
@@ -203,6 +207,7 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({ disabled, step, setSte
             <HelpScreen setParaTimeStep={setStep} />
           )}
         </ParaTimeSelectorGlobe>
+        <NetworkSelector network={network} setNetwork={setNetwork} />
       </ParaTimeSelectorGlow>
       {activeMobileGraphTooltip && (
         <GraphTooltipMobile

src/locales/en/translation.json

@@ -74,7 +74,9 @@
     "value": "Value",
     "valueInRose": "{{value}} ROSE",
     "viewAll": "View all",
-    "paraTimeOnline": "ParaTime Online"
+    "paraTimeOnline": "ParaTime Online",
+    "mainnet": "Mainnet",
+    "testnet": "Testnet"
   },
   "nodes": {
     "title": "Active nodes",
@@ -220,7 +222,9 @@
       "discoverMore": "Discover more",
       "consensusParaTimeDesc": "Our scalable, high-throughput, secure, proof-of-stake consensus layer run by a decentralized set of validator nodes.",
       "close": "Close"
-    }
+    },
+    "selectNetwork": "Selected net",
+    "selectNetworkAria": "Toggle network selector"
   },
   "search": {
     "placeholder": "Address, Block, Contract, Txn Hash, Transaction ID, etc",

src/types/network.ts

@@ -0,0 +1 @@
+export type Network = 'mainnet' | 'testnet'