diff --git a/icons/networks/wvm-icon-dark.svg b/icons/networks/wvm-icon-dark.svg
new file mode 100644
index 0000000000..92b00f478e
--- /dev/null
+++ b/icons/networks/wvm-icon-dark.svg
@@ -0,0 +1,4 @@
+
diff --git a/icons/networks/wvm-icon-light.svg b/icons/networks/wvm-icon-light.svg
new file mode 100644
index 0000000000..00d964d832
--- /dev/null
+++ b/icons/networks/wvm-icon-light.svg
@@ -0,0 +1,9 @@
+
diff --git a/icons/networks/wvm-logo-dark.svg b/icons/networks/wvm-logo-dark.svg
new file mode 100644
index 0000000000..4c6d03fc44
--- /dev/null
+++ b/icons/networks/wvm-logo-dark.svg
@@ -0,0 +1,4 @@
+
diff --git a/icons/networks/wvm-logo-light.svg b/icons/networks/wvm-logo-light.svg
new file mode 100644
index 0000000000..073bde9b52
--- /dev/null
+++ b/icons/networks/wvm-logo-light.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/icons/name.d.ts b/public/icons/name.d.ts
index 022b2d0b57..9d4559b6b9 100644
--- a/public/icons/name.d.ts
+++ b/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"
diff --git a/ui/snippets/networkMenu/NetworkLogo.tsx b/ui/snippets/networkMenu/NetworkLogo.tsx
index 11e50c6d95..09ca0b4621 100644
--- a/ui/snippets/networkMenu/NetworkLogo.tsx
+++ b/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,19 +19,34 @@ 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 ;
@@ -32,30 +54,49 @@ const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall
return (
);
};
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 (
{
src={ logoSrc }
alt={ `${ config.chain.name } network logo` }
fallback={ }
- 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={ }
- 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 }
/>