From 40316241d31f36f0697c84283efa0d1fbb6d87b2 Mon Sep 17 00:00:00 2001 From: Joel Date: Sat, 22 Jun 2024 01:16:32 +0300 Subject: [PATCH 1/3] chore: add icons --- icons/networks/wvm-icon-dark.svg | 4 ++++ icons/networks/wvm-icon-light.svg | 7 +++++++ icons/networks/wvm-logo-dark.svg | 4 ++++ icons/networks/wvm-logo-light.svg | 3 +++ 4 files changed, 18 insertions(+) create mode 100644 icons/networks/wvm-icon-dark.svg create mode 100644 icons/networks/wvm-icon-light.svg create mode 100644 icons/networks/wvm-logo-dark.svg create mode 100644 icons/networks/wvm-logo-light.svg 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..6fcad09ced --- /dev/null +++ b/icons/networks/wvm-icon-light.svg @@ -0,0 +1,7 @@ + + + + + + + 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..9186a0582a --- /dev/null +++ b/icons/networks/wvm-logo-light.svg @@ -0,0 +1,3 @@ + + + From 1b6c45bf45a54b37eddb4ea0fe525ce6ed5510c2 Mon Sep 17 00:00:00 2001 From: Joel Date: Sat, 22 Jun 2024 01:24:22 +0300 Subject: [PATCH 2/3] chore: change logo --- public/icons/name.d.ts | 4 ++ ui/snippets/networkMenu/NetworkLogo.tsx | 93 +++++++++++++++++++------ 2 files changed, 75 insertions(+), 22 deletions(-) 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 } /> From 5ea00f19bfcf0cf21ff11ddb5cfb2a8496f2eb69 Mon Sep 17 00:00:00 2001 From: Joel Date: Mon, 24 Jun 2024 00:46:54 +0300 Subject: [PATCH 3/3] chore: fix icons --- icons/networks/wvm-icon-light.svg | 14 ++++++++------ icons/networks/wvm-logo-light.svg | 10 ++++++++-- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/icons/networks/wvm-icon-light.svg b/icons/networks/wvm-icon-light.svg index 6fcad09ced..00d964d832 100644 --- a/icons/networks/wvm-icon-light.svg +++ b/icons/networks/wvm-icon-light.svg @@ -1,7 +1,9 @@ - - - - - - + + + + + + + + diff --git a/icons/networks/wvm-logo-light.svg b/icons/networks/wvm-logo-light.svg index 9186a0582a..073bde9b52 100644 --- a/icons/networks/wvm-logo-light.svg +++ b/icons/networks/wvm-logo-light.svg @@ -1,3 +1,9 @@ - - + + + + + + + +