feat: add network to the logo

subsquid · May 30, 2024 · fa7b5bb · fa7b5bb
1 parent f98242d
commit fa7b5bb
Showing 1 changed file with 23 additions and 1 deletion.
diff --git 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>
   );
 }