short logo

icons/networks/icons/goerli.svg

+<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.822 15.052h-6.9v2.731h3.19l-.01 3.433c-.123.132-.269.24-.43.319-.21.108-.43.197-.656.267a5.653 5.653 0 0 1-1.656.247 3.012 3.012 0 0 1-2.715-1.424 7.746 7.746 0 0 1-.9-4.064v-2.6a9.44 9.44 0 0 1 .265-2.36 5.76 5.76 0 0 1 .715-1.71c.267-.427.63-.785 1.06-1.047.4-.237.858-.36 1.323-.357a2.922 2.922 0 0 1 2.191.735c.526.615.84 1.383.895 2.191h3.627a8.472 8.472 0 0 0-.615-2.458 5.315 5.315 0 0 0-1.304-1.857 5.626 5.626 0 0 0-2.047-1.164 9.016 9.016 0 0 0-2.84-.4 6.71 6.71 0 0 0-2.774.572A6.354 6.354 0 0 0 2.016 7.77a7.927 7.927 0 0 0-1.483 2.659 10.954 10.954 0 0 0-.532 3.557v2.575a11.475 11.475 0 0 0 .51 3.557c.3.97.793 1.871 1.45 2.646a6.251 6.251 0 0 0 2.264 1.65 7.406 7.406 0 0 0 2.966.573c.765.005 1.529-.07 2.278-.221a10.497 10.497 0 0 0 1.914-.58 7.636 7.636 0 0 0 1.477-.8c.362-.247.691-.54.98-.87l-.018-7.464Zm2.66 2.783c-.01.97.143 1.935.451 2.855.281.837.73 1.61 1.317 2.269a5.985 5.985 0 0 0 2.133 1.5 7.278 7.278 0 0 0 2.88.54 7.194 7.194 0 0 0 2.86-.54 5.935 5.935 0 0 0 2.118-1.5 6.602 6.602 0 0 0 1.311-2.27c.308-.92.46-1.884.45-2.854v-.274a8.673 8.673 0 0 0-.45-2.84 6.532 6.532 0 0 0-1.317-2.27 6.078 6.078 0 0 0-2.125-1.508 7.812 7.812 0 0 0-5.74 0 6.082 6.082 0 0 0-2.12 1.508 6.516 6.516 0 0 0-1.317 2.27 8.647 8.647 0 0 0-.45 2.84v.274Zm3.681-.273a7.394 7.394 0 0 1 .174-1.625c.1-.478.284-.936.541-1.352a2.633 2.633 0 0 1 2.357-1.26c.495-.016.984.1 1.418.337.387.224.712.542.947.923.253.417.435.874.535 1.352a7.4 7.4 0 0 1 .173 1.625v.273a7.613 7.613 0 0 1-.172 1.659c-.1.478-.281.935-.537 1.352a2.622 2.622 0 0 1-2.337 1.255 2.818 2.818 0 0 1-1.424-.338 2.759 2.759 0 0 1-.96-.917 4.143 4.143 0 0 1-.541-1.352 7.6 7.6 0 0 1-.174-1.659v-.274.001Zm-1.747-10.3c.086.196.212.37.37.514.167.147.36.262.57.338.472.164.985.164 1.456 0 .21-.076.404-.19.57-.338.16-.143.285-.318.37-.514a1.594 1.594 0 0 0 0-1.274 1.562 1.562 0 0 0-.37-.52 1.7 1.7 0 0 0-.57-.344 2.206 2.206 0 0 0-1.456 0 1.7 1.7 0 0 0-.57.345 1.562 1.562 0 0 0-.502 1.157c0 .219.045.436.133.637v-.001Zm6.357.013c.086.197.212.374.37.52a1.7 1.7 0 0 0 .57.345c.47.165.984.165 1.456 0a1.7 1.7 0 0 0 .57-.345c.157-.146.283-.323.37-.52.089-.205.134-.427.132-.65a1.561 1.561 0 0 0-.503-1.151 1.761 1.761 0 0 0-.57-.338 2.206 2.206 0 0 0-1.456 0c-.21.075-.403.19-.57.338a1.546 1.546 0 0 0-.503 1.151c-.002.224.043.446.134.65Z" fill="currentColor"/>
+</svg>

lib/networks/featuredNetworks.ts

-import type { FeaturedNetwork, PreDefinedNetwork } from 'types/networks';
+import type { FeaturedNetwork } from 'types/networks';
 
 import appConfig from 'configs/app/config';
-import arbitrumIcon from 'icons/networks/icons/arbitrum.svg';
-import artisIcon from 'icons/networks/icons/artis.svg';
-import ethereumClassicIcon from 'icons/networks/icons/ethereum-classic.svg';
-import ethereumIcon from 'icons/networks/icons/ethereum.svg';
-import gnosisIcon from 'icons/networks/icons/gnosis.svg';
-import optimismIcon from 'icons/networks/icons/optimism.svg';
-import poaSokolIcon from 'icons/networks/icons/poa-sokol.svg';
-import poaIcon from 'icons/networks/icons/poa.svg';
-import rskIcon from 'icons/networks/icons/rsk.svg';
-
-// predefined network icons
-const ICONS: Partial<Record<PreDefinedNetwork, React.FunctionComponent<React.SVGAttributes<SVGElement>>>> = {
-  xdai_mainnet: gnosisIcon,
-  xdai_optimism: optimismIcon,
-  xdai_aox: arbitrumIcon,
-  eth_mainnet: ethereumIcon,
-  etc_mainnet: ethereumClassicIcon,
-  poa_core: poaIcon,
-  rsk_mainnet: rskIcon,
-  xdai_testnet: arbitrumIcon,
-  poa_sokol: poaSokolIcon,
-  artis_sigma1: artisIcon,
-};
+import ASSETS from 'lib/networks/networkAssets';
 
 // for easy .env.example update
 // const FEATURED_NETWORKS = JSON.stringify([
@@ -136,7 +114,7 @@ const ICONS: Partial<Record<PreDefinedNetwork, React.FunctionComponent<React.SVG
 const featuredNetworks: Array<FeaturedNetwork> = (() => {
   return appConfig.featuredNetworks.map((network) => ({
     ...network,
-    icon: network.icon || (network.type ? ICONS[network.type] : undefined),
+    icon: network.icon || (network.type ? ASSETS[network.type]?.icon : undefined),
   }));
 })();
 

lib/networks/networkAssets.ts

+import type React from 'react';
+
+import type { PreDefinedNetwork } from 'types/networks';
+
+import arbitrumIcon from 'icons/networks/icons/arbitrum.svg';
+import artisIcon from 'icons/networks/icons/artis.svg';
+import ethereumClassicIcon from 'icons/networks/icons/ethereum-classic.svg';
+import ethereumIcon from 'icons/networks/icons/ethereum.svg';
+import gnosisIcon from 'icons/networks/icons/gnosis.svg';
+import goerliIcon from 'icons/networks/icons/goerli.svg';
+import optimismIcon from 'icons/networks/icons/optimism.svg';
+import poaSokolIcon from 'icons/networks/icons/poa-sokol.svg';
+import poaIcon from 'icons/networks/icons/poa.svg';
+import rskIcon from 'icons/networks/icons/rsk.svg';
+import artisLogo from 'icons/networks/logos/artis.svg';
+import astarLogo from 'icons/networks/logos/astar.svg';
+import etcLogo from 'icons/networks/logos/etc.svg';
+import ethLogo from 'icons/networks/logos/eth.svg';
+import gnosisLogo from 'icons/networks/logos/gnosis.svg';
+import goerliLogo from 'icons/networks/logos/goerli.svg';
+import luksoLogo from 'icons/networks/logos/lukso.svg';
+import poaLogo from 'icons/networks/logos/poa.svg';
+import rskLogo from 'icons/networks/logos/rsk.svg';
+import shibuyaLogo from 'icons/networks/logos/shibuya.svg';
+import shidenLogo from 'icons/networks/logos/shiden.svg';
+import sokolLogo from 'icons/networks/logos/sokol.svg';
+
+interface NetworkAssets {
+  icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  logo?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  shortLogo?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+}
+
+const networkAssets: Partial<Record<PreDefinedNetwork, NetworkAssets>> = {
+  xdai_mainnet: {
+    icon: gnosisIcon,
+    logo: gnosisLogo,
+  },
+  xdai_optimism: {
+    icon: optimismIcon,
+  },
+  xdai_aox: {
+    icon: arbitrumIcon,
+  },
+  eth_mainnet: {
+    icon: ethereumIcon,
+    logo: ethLogo,
+  },
+  etc_mainnet: {
+    icon: ethereumClassicIcon,
+    logo: etcLogo,
+  },
+  poa_core: {
+    icon: poaIcon,
+    logo: poaLogo,
+  },
+  rsk_mainnet: {
+    icon: rskIcon,
+    logo: rskLogo,
+  },
+  xdai_testnet: {
+    icon: arbitrumIcon,
+    logo: gnosisLogo,
+  },
+  poa_sokol: {
+    icon: poaSokolIcon,
+    logo: sokolLogo,
+  },
+  artis_sigma1: {
+    icon: artisIcon,
+    logo: artisLogo,
+  },
+  lukso_l14: {
+    logo: luksoLogo,
+  },
+  astar: {
+    logo: astarLogo,
+  },
+  shiden: {
+    logo: shidenLogo,
+  },
+  shibuya: {
+    logo: shibuyaLogo,
+  },
+  goerli: {
+    logo: goerliLogo,
+    icon: goerliIcon,
+  },
+};
+
+export default networkAssets;

ui/snippets/navigation/NavigationDesktop.tsx

@@ -63,12 +63,13 @@ const NavigationDesktop = () => {
       <Box
         as="header"
         display="flex"
-        justifyContent="center"
+        justifyContent="flex-start"
         alignItems="center"
         flexDirection="row"
         w="100%"
-        px={ 3 }
+        px={ isCollapsed ? '15px' : 3 }
         h={ 10 }
+        { ...getDefaultTransitionProps({ transitionProperty: 'padding' }) }
       >
         <NetworkLogo isCollapsed={ isCollapsed }/>
         <NetworkMenu isCollapsed={ isCollapsed }/>

ui/snippets/networkMenu/NetworkLogo.tsx

 import { Icon, Box, Image, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
-import type { FunctionComponent, SVGAttributes } from 'react';
-
-import type { PreDefinedNetwork } from 'types/networks';
 
 import appConfig from 'configs/app/config';
-import blockscoutLogo from 'icons/logo.svg';
-import artisLogo from 'icons/networks/logos/artis.svg';
-import astarLogo from 'icons/networks/logos/astar.svg';
-import etcLogo from 'icons/networks/logos/etc.svg';
-import ethLogo from 'icons/networks/logos/eth.svg';
-import gnosisLogo from 'icons/networks/logos/gnosis.svg';
-import goerliIcon from 'icons/networks/logos/goerli.svg';
-import luksoLogo from 'icons/networks/logos/lukso.svg';
-import poaLogo from 'icons/networks/logos/poa.svg';
-import rskLogo from 'icons/networks/logos/rsk.svg';
-import shibuyaLogo from 'icons/networks/logos/shibuya.svg';
-import shidenLogo from 'icons/networks/logos/shiden.svg';
-import sokolLogo from 'icons/networks/logos/sokol.svg';
+import logoPlaceholder from 'icons/logo.svg';
+import shortLogoPlaceholder from 'icons/networks/icons/placeholder.svg';
 import link from 'lib/link/link';
+import ASSETS from 'lib/networks/networkAssets';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
-// predefined network logos
-const LOGOS: Partial<Record<PreDefinedNetwork, React.FunctionComponent<React.SVGAttributes<SVGElement>>>> = {
-  xdai_mainnet: gnosisLogo,
-  eth_mainnet: ethLogo,
-  etc_mainnet: etcLogo,
-  poa_core: poaLogo,
-  rsk_mainnet: rskLogo,
-  xdai_testnet: gnosisLogo,
-  poa_sokol: sokolLogo,
-  artis_sigma1: artisLogo,
-  lukso_l14: luksoLogo,
-  astar: astarLogo,
-  shiden: shidenLogo,
-  shibuya: shibuyaLogo,
-  goerli: goerliIcon,
-};
-
 interface Props {
   isCollapsed?: boolean;
   onClick?: (event: React.SyntheticEvent) => void;
@@ -46,54 +16,59 @@ interface Props {
 const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
   const logoColor = useColorModeValue('blue.600', 'white');
   const href = link('network_index');
-  const logo = appConfig.network.logo || (appConfig.network.type ? LOGOS[appConfig.network.type] : undefined);
 
   const style = useColorModeValue({}, { filter: 'brightness(0) invert(1)' });
 
-  let logoEl;
-
-  if (logo && typeof logo === 'string') {
-    logoEl = (
-      <Image
-        w="auto"
-        h="100%"
-        src={ logo }
-        alt={ `${ appConfig.network.name } network icon` }
-      />
-    );
-  } else if (typeof logo !== 'undefined') {
-    logoEl = (
+  const logoEl = (() => {
+    if (isCollapsed) {
+      const shortLogo = appConfig.network.type ? ASSETS[appConfig.network.type]?.shortLogo || ASSETS[appConfig.network.type]?.icon : undefined;
+      return (
         <Icon
-        as={ logo as FunctionComponent<SVGAttributes<SVGElement>> }
+          as={ shortLogo || shortLogoPlaceholder }
           width="auto"
           height="100%"
+          color={ shortLogo ? undefined : logoColor }
           { ...getDefaultTransitionProps() }
           style={ style }
         />
       );
-  } else {
-    logoEl = (
+    }
+
+    if (appConfig.network.logo) {
+      return (
+        <Image
+          w="auto"
+          h="100%"
+          src={ appConfig.network.logo }
+          alt={ `${ appConfig.network.name } network icon` }
+        />
+      );
+    }
+
+    const logo = appConfig.network.type ? ASSETS[appConfig.network.type]?.logo : undefined;
+    return (
       <Icon
-        as={ blockscoutLogo }
+        as={ logo || logoPlaceholder }
         width="auto"
         height="100%"
-        color={ logoColor }
+        color={ logo ? undefined : logoColor }
         { ...getDefaultTransitionProps() }
         style={ style }
       />
     );
-  }
+  })();
 
   return (
     // TODO switch to <NextLink href={ href } passHref> when main page for network will be ready
     <Box
       as="a"
       href={ href }
-      width={{ base: 'auto', lg: isCollapsed === false ? '113px' : 0, xl: isCollapsed ? '0' : '113px' }}
-      height="20px"
+      width={{ base: 'auto', lg: isCollapsed === false ? '113px' : '30px' }}
+      height={ isCollapsed ? '30px' : '20px' }
       display="inline-flex"
       overflow="hidden"
       onClick={ onClick }
+      flexShrink={ 0 }
       { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }
       aria-label="Link to main page"
     >

ui/snippets/networkMenu/NetworkMenu.tsx

@@ -13,7 +13,11 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
       { ({ isOpen }) => (
         <>
           <PopoverTrigger>
-            <Box marginLeft={{ base: '7px', lg: isCollapsed === false ? '7px' : '0px', xl: isCollapsed ? '0px' : '7px' }}>
+            <Box
+              marginLeft="auto"
+              overflow="hidden"
+              width={ isCollapsed ? '0px' : 'auto' }
+            >
               <NetworkMenuButton isActive={ isOpen }/>
             </Box>
           </PopoverTrigger>