Merge pull request #419 from blockscout/logo-fix

small logo fix

configs/envs/.env.poa_core

@@ -5,6 +5,7 @@ NEXT_PUBLIC_FEATURED_NETWORKS=[{'title':'Gnosis Chain','url':'https://blockscout
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction','address':'/ethereum/poa/core/address'}}]
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cup']
 NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT=radial-gradient(at 12% 37%, hsla(324,73%,67%,1) 0px, transparent 50%), radial-gradient(at 62% 14%, hsla(256,87%,73%,1) 0px, transparent 50%), radial-gradient(at 84% 80%, hsla(128,75%,73%,1) 0px, transparent 50%), radial-gradient(at 57% 46%, hsla(285,63%,72%,1) 0px, transparent 50%), radial-gradient(at 37% 30%, hsla(174,70%,61%,1) 0px, transparent 50%), radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%), radial-gradient(at 67% 57%, hsla(14,95%,76%,1) 0px, transparent 50%)
+#NEXT_PUBLIC_NETWORK_LOGO=https://placekitten.com/300/60
 #NEXT_PUBLIC_NETWORK_SMALL_LOGO=https://placekitten.com/300/300
 
 # network config

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -96,7 +96,8 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled }: Props) =>
         }}
         bgColor={ listBgColor }
         transitionProperty="top,box-shadow,background-color,color"
-        transitionDuration="slow"
+        transitionDuration="normal"
+        transitionTimingFunction="ease"
         {
           ...(stickyEnabled ? {
             position: 'sticky',

ui/snippets/navigation/NavigationDesktop.tsx

@@ -69,7 +69,9 @@ const NavigationDesktop = () => {
         w="100%"
         px={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
         h={ 10 }
-        { ...getDefaultTransitionProps({ transitionProperty: 'padding' }) }
+        transitionProperty="padding"
+        transitionDuration="normal"
+        transitionTimingFunction="ease"
       >
         <NetworkLogo isCollapsed={ isCollapsed }/>
         <NetworkMenu isCollapsed={ isCollapsed }/>

ui/snippets/networkMenu/NetworkLogo.tsx

-import { Icon, Box, Image, useColorModeValue, useBreakpointValue } from '@chakra-ui/react';
+import { Icon, Box, Image, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
@@ -6,7 +6,6 @@ import smallLogoPlaceholder from 'icons/networks/icons/placeholder.svg';
 import logoPlaceholder from 'icons/networks/logos/blockscout.svg';
 import link from 'lib/link/link';
 import ASSETS from 'lib/networks/networkAssets';
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 interface Props {
   isCollapsed?: boolean;
@@ -16,59 +15,71 @@ interface Props {
 const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
   const logoColor = useColorModeValue('blue.600', 'white');
   const href = link('network_index');
+  const [ isLogoError, setLogoError ] = React.useState(false);
+  const [ isSmallLogoError, setSmallLogoError ] = React.useState(false);
 
   const style = useColorModeValue({}, { filter: 'brightness(0) invert(1)' });
-  const isLg = useBreakpointValue({ base: false, lg: true, xl: false }, { ssr: true });
 
-  const logoEl = (() => {
-    const showSmallLogo = isCollapsed || (isCollapsed !== false && isLg);
-    if (showSmallLogo) {
-      if (appConfig.network.smallLogo) {
-        return (
-          <Image
-            w="auto"
-            h="100%"
-            src={ appConfig.network.smallLogo }
-            alt={ `${ appConfig.network.name } network logo` }
-          />
-        );
-      }
+  const handleSmallLogoError = React.useCallback(() => {
+    setSmallLogoError(true);
+  }, []);
 
-      const smallLogo = appConfig.network.type ? ASSETS[appConfig.network.type]?.smallLogo || ASSETS[appConfig.network.type]?.icon : undefined;
-      return (
-        <Icon
-          as={ smallLogo || smallLogoPlaceholder }
-          width="auto"
-          height="100%"
-          color={ smallLogo ? undefined : logoColor }
-          { ...getDefaultTransitionProps() }
-          style={ style }
-        />
-      );
-    }
+  const handleLogoError = React.useCallback(() => {
+    setLogoError(true);
+  }, []);
 
-    if (appConfig.network.logo) {
-      return (
-        <Image
-          w="auto"
-          h="100%"
-          src={ appConfig.network.logo }
-          alt={ `${ appConfig.network.name } network logo` }
-        />
-      );
-    }
+  const logoEl = (() => {
+    const fallbackLogoSrc = appConfig.network.type ? ASSETS[appConfig.network.type]?.logo : undefined;
+    const fallbackSmallLogoSrc = appConfig.network.type ? ASSETS[appConfig.network.type]?.smallLogo || ASSETS[appConfig.network.type]?.icon : undefined;
 
-    const logo = appConfig.network.type ? ASSETS[appConfig.network.type]?.logo : undefined;
-    return (
+    const logo = appConfig.network.logo;
+    const smallLogo = appConfig.network.smallLogo;
+
+    const fallbackLogo = (
       <Icon
-        as={ logo || logoPlaceholder }
+        as={ fallbackLogoSrc || logoPlaceholder }
         width="auto"
         height="100%"
-        color={ logo ? undefined : logoColor }
-        { ...getDefaultTransitionProps() }
+        color={ fallbackLogoSrc ? undefined : logoColor }
+        display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
         style={ style }
       />
     );
+    const fallbackSmallLogo = (
+      <Icon
+        as={ fallbackSmallLogoSrc || smallLogoPlaceholder }
+        width="auto"
+        height="100%"
+        color={ fallbackSmallLogoSrc ? undefined : logoColor }
+        display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
+        style={ style }
+      />
+    );
+
+    return (
+      <>
+        { /* big logo */ }
+        <Image
+          w="auto"
+          h="100%"
+          src={ logo }
+          display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
+          alt={ `${ appConfig.network.name } network logo` }
+          fallback={ isLogoError || !logo ? fallbackSmallLogo : undefined }
+          onError={ handleLogoError }
+        />
+        { /* small logo */ }
+        <Image
+          w="auto"
+          h="100%"
+          src={ smallLogo }
+          display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
+          alt={ `${ appConfig.network.name } network logo` }
+          fallback={ isSmallLogoError || !smallLogo ? fallbackLogo : undefined }
+          onError={ handleSmallLogoError }
+        />
+      </>
+    );
   })();
 
   return (
@@ -82,7 +93,6 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
       overflow="hidden"
       onClick={ onClick }
       flexShrink={ 0 }
-      { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }
       aria-label="Link to main page"
     >
       { logoEl }