From fa7b5bba9fedd7207f52d0598aebaf80773c22d3 Mon Sep 17 00:00:00 2001
From: belopash <abelopashentsev@gmail.com>
Date: Thu, 30 May 2024 22:51:25 +0500
Subject: [PATCH] feat: add network to the logo

---
 src/components/Logo/Logo.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
index 4672fcb..896ca2f 100644
--- a/src/components/Logo/Logo.tsx
+++ b/src/components/Logo/Logo.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 
 import { Box, styled, useMediaQuery, useTheme } from '@mui/material';
+import { upperFirst } from 'lodash-es';
+
+import { useSubsquidNetwork } from '@network/useSubsquidNetwork';
 
 export const LogoWrapper = styled('div', {
   name: 'LogoWrapper',
@@ -11,6 +14,7 @@ export const LogoWrapper = styled('div', {
     display: 'block',
     marginRight: 2,
   },
+  userSelect: 'none',
 }));
 
 export const LogoPrimary = styled(Box, {
@@ -23,15 +27,33 @@ export const LogoPrimary = styled(Box, {
   marginLeft: theme.spacing(0.5),
 }));
 
+export const LogoSecondary = styled(Box, {
+  name: 'LogoSecondary',
+})(({ theme }) => ({
+  fontSize: '16px',
+  fontWeight: 400,
+  lineHeight: 1,
+  letterSpacing: '0 em',
+  marginLeft: theme.spacing(0.5),
+  // fontStyle: 'italic',
+}));
+
 export function Logo({ color = '#fff' }: { color?: string }) {
   const theme = useTheme();
   const narrow = useMediaQuery(theme.breakpoints.down('lg'));
   const size = 32;
 
+  const { network } = useSubsquidNetwork();
+
   return (
     <LogoWrapper>
       <img width={size} height={size} src="/logo.png" />
-      {!narrow ? <LogoPrimary sx={{ color }}>SUBSQUID</LogoPrimary> : null}
+      {!narrow ? (
+        <>
+          <LogoPrimary sx={{ color }}>SUBSQUID</LogoPrimary>
+          <LogoSecondary sx={{ color }}>{upperFirst(network)}</LogoSecondary>
+        </>
+      ) : null}
     </LogoWrapper>
   );
 }