Switch logo

public/icons/name.d.ts

@@ -88,6 +88,10 @@
 	| "networks"
 	| "networks/icon-placeholder"
 	| "networks/logo-placeholder"
+	| "networks/wvm-icon-dark"
+	| "networks/wvm-icon-light"
+	| "networks/wvm-logo-dark"
+	| "networks/wvm-logo-light"
 	| "nft_shield"
 	| "output_roots"
 	| "payment_link"

ui/snippets/networkMenu/NetworkLogo.tsx

@@ -1,4 +1,11 @@
-import { Box, Image, useColorModeValue, Skeleton, chakra } from '@chakra-ui/react';
+import {
+  Box,
+  Image,
+  useColorMode,
+  useColorModeValue,
+  Skeleton,
+  chakra,
+} from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -12,50 +19,84 @@ interface Props {
   className?: string;
 }
 
-const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall?: boolean }) => {
+const LogoFallback = ({
+  isCollapsed,
+  isSmall,
+}: {
+  isCollapsed?: boolean;
+  isSmall?: boolean;
+}) => {
   const field = isSmall ? 'icon' : 'logo';
-  const logoColor = useColorModeValue('blue.600', 'white');
+  const { colorMode } = useColorMode();
+
+  const iconPath =
+    colorMode === 'light' ?
+      'networks/wvm-icon-dark' :
+      'networks/wvm-icon-light';
+  const logoPath =
+    colorMode === 'dark' ? 'networks/wvm-logo-light' : 'networks/wvm-logo-dark';
 
-  const display = isSmall ? {
-    base: 'none',
-    lg: isCollapsed === false ? 'none' : 'block',
-    xl: isCollapsed ? 'block' : 'none',
-  } : {
-    base: 'block',
-    lg: isCollapsed === false ? 'block' : 'none',
-    xl: isCollapsed ? 'none' : 'block',
-  };
+  const display = isSmall ?
+    {
+      base: 'none',
+      lg: isCollapsed === false ? 'none' : 'block',
+      xl: isCollapsed ? 'block' : 'none',
+    } :
+    {
+      base: 'block',
+      lg: isCollapsed === false ? 'block' : 'none',
+      xl: isCollapsed ? 'none' : 'block',
+    };
 
   if (config.UI.sidebar[field].default) {
     return <Skeleton w="100%" borderRadius="sm" display={ display }/>;
   }
 
   return (
     <IconSvg
-      name={ isSmall ? 'networks/icon-placeholder' : 'networks/logo-placeholder' }
+      name={ isSmall ? `${ iconPath }` : `${ logoPath }` }
       width="auto"
       height="100%"
-      color={ logoColor }
       display={ display }
     />
   );
 };
 
 const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
+  const logoSrc = useColorModeValue(
+    config.UI.sidebar.logo.default,
+    config.UI.sidebar.logo.dark || config.UI.sidebar.logo.default,
+  );
 
-  const logoSrc = useColorModeValue(config.UI.sidebar.logo.default, config.UI.sidebar.logo.dark || config.UI.sidebar.logo.default);
-  const iconSrc = useColorModeValue(config.UI.sidebar.icon.default, config.UI.sidebar.icon.dark || config.UI.sidebar.icon.default);
+  const iconSrc = useColorModeValue(
+    config.UI.sidebar.icon.default,
+    config.UI.sidebar.icon.dark || config.UI.sidebar.icon.default,
+  );
   const darkModeFilter = { filter: 'brightness(0) invert(1)' };
-  const logoStyle = useColorModeValue({}, !config.UI.sidebar.logo.dark ? darkModeFilter : {});
-  const iconStyle = useColorModeValue({}, !config.UI.sidebar.icon.dark ? darkModeFilter : {});
+  const logoStyle = useColorModeValue(
+    {},
+    !config.UI.sidebar.logo.dark ? darkModeFilter : {},
+  );
+  const iconStyle = useColorModeValue(
+    {},
+    !config.UI.sidebar.icon.dark ? darkModeFilter : {},
+  );
 
   return (
     <Box
       className={ className }
       as="a"
       href={ route({ pathname: '/' }) }
-      width={{ base: '120px', lg: isCollapsed === false ? '120px' : '30px', xl: isCollapsed ? '30px' : '120px' }}
-      height={{ base: '24px', lg: isCollapsed === false ? '24px' : '30px', xl: isCollapsed ? '30px' : '24px' }}
+      width={{
+        base: '120px',
+        lg: isCollapsed === false ? '120px' : '30px',
+        xl: isCollapsed ? '30px' : '120px',
+      }}
+      height={{
+        base: '24px',
+        lg: isCollapsed === false ? '24px' : '30px',
+        xl: isCollapsed ? '30px' : '24px',
+      }}
       display="inline-flex"
       overflow="hidden"
       onClick={ onClick }
@@ -69,7 +110,11 @@ const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
         src={ logoSrc }
         alt={ `${ config.chain.name } network logo` }
         fallback={ <LogoFallback isCollapsed={ isCollapsed }/> }
-        display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
+        display={{
+          base: 'block',
+          lg: isCollapsed === false ? 'block' : 'none',
+          xl: isCollapsed ? 'none' : 'block',
+        }}
         style={ logoStyle }
       />
       { /* small logo */ }
@@ -79,7 +124,11 @@ const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
         src={ iconSrc }
         alt={ `${ config.chain.name } network logo` }
         fallback={ <LogoFallback isCollapsed={ isCollapsed } isSmall/> }
-        display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
+        display={{
+          base: 'none',
+          lg: isCollapsed === false ? 'none' : 'block',
+          xl: isCollapsed ? 'block' : 'none',
+        }}
         style={ iconStyle }
       />
     </Box>