Create Layer custom icon

src/app/components/CustomIcons/LayerIcon.tsx

@@ -0,0 +1,10 @@
+import { FC } from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const LayerIcon: FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M11.2818 0.0941499C11.4959 -0.0313833 11.7612 -0.0313833 11.9754 0.0941499L21.9182 5.92272C22.1282 6.04579 22.2571 6.27092 22.2571 6.51429V17.8286C22.2571 18.0783 22.1214 18.3083 21.9027 18.429L11.9598 23.9147C11.7481 24.0315 11.4904 24.0282 11.2818 23.9058L1.33894 18.0773C1.12899 17.9542 1 17.7291 1 17.4857V6.51429C1 6.27092 1.12899 6.04579 1.33894 5.92272L11.2818 0.0941499ZM8.01306 3.6L11.6316 5.72119L15.2785 3.62017L11.6286 1.48056L8.01306 3.6ZM16.6402 4.41842L11.9709 7.10845C11.7574 7.23144 11.4943 7.23045 11.2818 7.10585L6.65714 4.39485L3.07245 6.49622L11.6286 11.2168L20.1847 6.49622L16.6402 4.41842ZM20.8857 7.67577L12.3143 12.4048V22.1528L15.9143 20.1666V14.5696C15.9143 14.3064 16.0649 14.0665 16.3019 13.9521L20.8857 11.5V7.67577ZM20.8857 13.0229L17.2857 15V19.4099L20.8857 17.4237V13.0229ZM10.9429 22.1175V12.4048L2.37143 7.67577V11L7.15126 13.795C7.37471 13.9141 7.51429 14.1468 7.51429 14.4V20.1076L10.9429 22.1175ZM6.14286 19.3037V14.8114L2.37143 12.5543V17.0928L6.14286 19.3037Z" />
+    </SvgIcon>
+  )
+}

src/app/components/PageLayout/NetworkHeader.tsx

@@ -8,12 +8,12 @@ import Typography from '@mui/material/Typography'
 import CheckIcon from '@mui/icons-material/Check'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import { useTheme } from '@mui/material/styles'
-import blockchainImage from './images/blockchain.svg'
 import { COLORS } from '../../../styles/theme/colors'
 import { Circle } from '../Circle'
 import { RouteUtils } from '../../utils/route-utils'
 import { AppError, AppErrors } from '../../../types/errors'
 import { Layer } from '../../../oasis-indexer/api'
+import { LayerIcon } from '../../components/CustomIcons/LayerIcon'
 
 const getContent = (t: TFunction, layer: Layer) => {
   switch (layer) {
@@ -50,7 +50,7 @@ export const NetworkHeader: FC<{ layer: Layer }> = ({ layer }) => {
     <Box sx={{ display: 'flex', justifyContent: isMobile ? 'flex-end' : 'flex-start', pr: isMobile ? 0 : 4 }}>
       {!isMobile && (
         <Circle color={COLORS.white} size={6} sx={{ mr: 4 }}>
-          <img src={blockchainImage} alt={content.header} />
+          <LayerIcon sx={{ color: COLORS.brandExtraDark, fontSize: 33 }} />
         </Circle>
       )}
       <Box>

src/app/pages/HomePage/Graph/GraphTooltip/GraphTooltipMobile.tsx

@@ -45,7 +45,7 @@ export const GraphTooltipMobile: FC<GraphTooltipMobileProps> = ({ layer, onClose
   const { t } = useTranslation()
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-  const { header, body, disabled, enableNavigation } = layerTooltipMap[layer]
+  const { body, disabled, enableNavigation } = layerTooltipMap[layer]
 
   const navigateTo = () => {
     if (!enableNavigation) {
@@ -64,7 +64,7 @@ export const GraphTooltipMobile: FC<GraphTooltipMobileProps> = ({ layer, onClose
             <CloseIcon fontSize="medium" sx={{ color: COLORS.white }} aria-label={t('home.tooltip.close')} />
           </IconButton>
           <GraphTooltipStyled disabled={disabled} isMobile={isMobile} onClick={navigateTo}>
-            <GraphTooltipHeader {...header} />
+            <GraphTooltipHeader disabled={disabled} />
             <GraphTooltipBody {...body} disabled={disabled} />
           </GraphTooltipStyled>
         </MobileGraphTooltip>

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

@@ -1,6 +1,6 @@
 import { styled, useTheme } from '@mui/material/styles'
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'
-import { FC, ReactNode } from 'react'
+import { FC } from 'react'
 import Box from '@mui/material/Box'
 import { COLORS } from '../../../../../styles/theme/colors'
 import AccessTimeIcon from '@mui/icons-material/AccessTime'
@@ -12,7 +12,7 @@ import { TFunction } from 'i18next'
 import { RouteUtils } from '../../../../utils/route-utils'
 import { useNavigate } from 'react-router-dom'
 import { Layer } from '../../../../../oasis-indexer/api'
-import blockchainWhiteImage from '../images/blockchain-white.svg'
+import { LayerIcon } from '../../../../components/CustomIcons/LayerIcon'
 
 export interface GraphTooltipStyledProps {
   isMobile: boolean
@@ -118,17 +118,12 @@ export const layerTooltipMap: {
   [key in Layer]: {
     disabled: boolean
     enableNavigation?: boolean
-    header: GraphTooltipHeaderProps
     body: GraphTooltipBodyProps
   }
 } = {
   [Layer.sapphire]: {
     disabled: false,
     enableNavigation: true,
-    header: {
-      label: (t: TFunction) => t('home.tooltip.openParatime'),
-      icon: (t: TFunction) => <img src={blockchainWhiteImage} alt={t('common.sapphire')} />,
-    },
     body: {
       title: (t: TFunction) => t('common.sapphire'),
       caption: (t: TFunction) => t('common.paraTimeOnline'),
@@ -138,10 +133,6 @@ export const layerTooltipMap: {
   [Layer.emerald]: {
     disabled: false,
     enableNavigation: true,
-    header: {
-      label: (t: TFunction) => t('home.tooltip.openParatime'),
-      icon: (t: TFunction) => <img src={blockchainWhiteImage} alt={t('common.emerald')} />,
-    },
     body: {
       title: (t: TFunction) => t('common.emerald'),
       caption: (t: TFunction) => t('common.paraTimeOnline'),
@@ -150,10 +141,6 @@ export const layerTooltipMap: {
   },
   [Layer.cipher]: {
     disabled: true,
-    header: {
-      label: () => '',
-      icon: () => <AccessTimeIcon sx={{ color: COLORS.aqua, fontSize: 33 }} />,
-    },
     body: {
       title: (t: TFunction) => t('common.cipher'),
       caption: (t: TFunction) => t('home.tooltip.coming'),
@@ -162,10 +149,6 @@ export const layerTooltipMap: {
   },
   [Layer.consensus]: {
     disabled: true,
-    header: {
-      label: () => '',
-      icon: () => <AccessTimeIcon sx={{ color: COLORS.aqua, fontSize: 33 }} />,
-    },
     body: {
       title: (t: TFunction) => t('common.consensus'),
       caption: (t: TFunction) => t('home.tooltip.coming'),
@@ -181,27 +164,29 @@ interface GraphTooltipProps extends Omit<TooltipProps, 'title'> {
 }
 
 interface GraphTooltipHeaderProps {
-  label: (t: TFunction) => string
-  icon: (t: TFunction) => ReactNode
+  disabled: boolean
 }
 
-export const GraphTooltipHeader: FC<GraphTooltipHeaderProps> = ({ icon, label }) => {
+export const GraphTooltipHeader: FC<GraphTooltipHeaderProps> = ({ disabled }) => {
   const theme = useTheme()
   const { t } = useTranslation()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-  const iconLabel = label(t)
 
   return (
     <GraphTooltipIcon isMobile={isMobile}>
-      {icon(t)}
-      {iconLabel && (
-        <Typography
-          component="span"
-          color={COLORS.white}
-          sx={{ fontSize: '10px', position: 'absolute', bottom: '10px' }}
-        >
-          {iconLabel}
-        </Typography>
+      {disabled ? (
+        <AccessTimeIcon sx={{ color: COLORS.aqua, fontSize: 33 }} />
+      ) : (
+        <>
+          <LayerIcon sx={{ color: COLORS.white, fontSize: 33 }} />
+          <Typography
+            component="span"
+            color={COLORS.white}
+            sx={{ fontSize: '10px', position: 'absolute', bottom: '10px' }}
+          >
+            {t('home.tooltip.openParatime')}
+          </Typography>
+        </>
       )}
     </GraphTooltipIcon>
   )
@@ -248,7 +233,7 @@ export const GraphTooltip: FC<GraphTooltipProps> = ({ children, layer, ...restPr
   const navigate = useNavigate()
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-  const { header, body, disabled, enableNavigation } = layerTooltipMap[layer]
+  const { body, disabled, enableNavigation } = layerTooltipMap[layer]
 
   const navigateTo = () => {
     if (!enableNavigation) {
@@ -264,7 +249,7 @@ export const GraphTooltip: FC<GraphTooltipProps> = ({ children, layer, ...restPr
       placement="right-start"
       title={
         <GraphTooltipStyled disabled={disabled} isMobile={isMobile} onClick={navigateTo}>
-          <GraphTooltipHeader {...header} />
+          <GraphTooltipHeader disabled={disabled} />
           <GraphTooltipBody {...body} disabled={disabled} />
         </GraphTooltipStyled>
       }

src/locales/en/translation.json

@@ -212,7 +212,7 @@
       "comingSoonAria": "Coming soon...",
       "coming": "Coming",
       "online": "Online",
-      "openParatime": "Open paratime",
+      "openParatime": "Open ParaTime",
       "sapphireParaTimeDesc": "Confidential EVM Compatible ParaTime providing a smart contract development environment with EVM compatibility",
       "emeraldParaTimeDesc": "EVM Compatible ParaTime providing smart contract environment with EVM compatibility.",
       "cipherParaTimeAvailableSoon": "Searching through the Cipher ParaTime will be available soon.",