fix Network logo

eslint.config.mjs

@@ -406,6 +406,7 @@ export default tseslint.config(
         'boolean': true,
         string: true,
       } ],
+      'no-nested-ternary': 'error',
       'no-multi-str': 'error',
       'no-spaced-func': 'error',
       'no-with': 'error',

toolkit/chakra/button.tsx

@@ -21,30 +21,41 @@ export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, ref) {
     const { loading, disabled, loadingText, children, active, selected, highlighted, ...rest } = props;
+
+    const content = (() => {
+      if (loading && !loadingText) {
         return (
-      <ChakraButton
-        { ...(active ? { 'data-active': true } : {}) }
-        { ...(selected ? { 'data-selected': true } : {}) }
-        { ...(highlighted ? { 'data-highlighted': true } : {}) }
-        disabled={ loading || disabled }
-        ref={ ref }
-        { ...rest }
-      >
-        { loading && !loadingText ? (
           <>
             <AbsoluteCenter display="inline-flex">
               <Spinner size="inherit" color="inherit"/>
             </AbsoluteCenter>
             <Span opacity={ 0 }>{ children }</Span>
           </>
-        ) : loading && loadingText ? (
+        );
+      }
+
+      if (loading && loadingText) {
+        return (
           <>
             <Spinner size="inherit" color="inherit"/>
             { loadingText }
           </>
-        ) : (
-          children
-        ) }
+        );
+      }
+
+      return children;
+    })();
+
+    return (
+      <ChakraButton
+        { ...(active ? { 'data-active': true } : {}) }
+        { ...(selected ? { 'data-selected': true } : {}) }
+        { ...(highlighted ? { 'data-highlighted': true } : {}) }
+        disabled={ loading || disabled }
+        ref={ ref }
+        { ...rest }
+      >
+        { content }
       </ChakraButton>
     );
   },

toolkit/chakra/image.tsx

+import type { ImageProps as ChakraImageProps } from '@chakra-ui/react';
+import { Image as ChakraImage } from '@chakra-ui/react';
+import React from 'react';
+
+import { Skeleton } from './skeleton';
+
+export interface ImageProps extends ChakraImageProps {
+  fallback?: React.ReactNode;
+}
+
+export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  function Image(props, ref) {
+    const { fallback, src, ...rest } = props;
+
+    const [ loading, setLoading ] = React.useState(true);
+    const [ error, setError ] = React.useState(false);
+
+    const handleLoadError = React.useCallback(() => {
+      setError(true);
+      setLoading(false);
+    }, []);
+
+    const handleLoadSuccess = React.useCallback(() => {
+      setLoading(false);
+    }, []);
+
+    if (!src && fallback) {
+      return fallback;
+    }
+
+    if (error) {
+      return fallback;
+    }
+
+    return (
+      <Skeleton loading={ loading }>
+        <ChakraImage
+          ref={ ref }
+          src={ src }
+          onError={ handleLoadError }
+          onLoad={ handleLoadSuccess }
+          { ...rest }
+        />
+      </Skeleton>
+    );
+  });

ui/snippets/networkMenu/NetworkLogo.tsx

-import { Image, Skeleton, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import { useColorModeValue } from 'toolkit/chakra/color-mode';
+import { Image } from 'toolkit/chakra/image';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
@@ -14,9 +15,6 @@ interface Props {
 }
 
 const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall?: boolean }) => {
-  const field = isSmall ? 'icon' : 'logo';
-  const logoColor = useColorModeValue('blue.600', 'white');
-
   const display = isSmall ? {
     base: 'none',
     lg: isCollapsed === false ? 'none' : 'block',
@@ -27,29 +25,23 @@ const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall
     xl: isCollapsed ? 'none' : 'block',
   };
 
-  if (config.UI.navigation[field].default) {
-    return <Skeleton w="100%" borderRadius="sm" display={ display }/>;
-  }
-
   return (
     <IconSvg
       name={ isSmall ? 'networks/icon-placeholder' : 'networks/logo-placeholder' }
       width="auto"
       height="100%"
-      color={ logoColor }
+      color={{ base: 'blue.600', _dark: 'white' }}
       display={ display }
     />
   );
 };
 
-// TODO @tom2drum implement image with fallback
+const INVERT_FILTER = 'brightness(0) invert(1)';
+
 const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
 
   const logoSrc = useColorModeValue(config.UI.navigation.logo.default, config.UI.navigation.logo.dark || config.UI.navigation.logo.default);
   const iconSrc = useColorModeValue(config.UI.navigation.icon.default, config.UI.navigation.icon.dark || config.UI.navigation.icon.default);
-  const darkModeFilter = { filter: 'brightness(0) invert(1)' };
-  const logoStyle = useColorModeValue({}, !config.UI.navigation.logo.dark ? darkModeFilter : {});
-  const iconStyle = useColorModeValue({}, !config.UI.navigation.icon.dark ? darkModeFilter : {});
 
   return (
     <chakra.a
@@ -71,7 +63,7 @@ const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
         alt={ `${ config.chain.name } network logo` }
         fallback={ <LogoFallback isCollapsed={ isCollapsed }/> }
         display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
-        style={ logoStyle }
+        filter={{ _dark: INVERT_FILTER }}
       />
       { /* small logo */ }
       <Image
@@ -81,7 +73,7 @@ const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
         alt={ `${ config.chain.name } network logo` }
         fallback={ <LogoFallback isCollapsed={ isCollapsed } isSmall/> }
         display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
-        style={ iconStyle }
+        filter={{ _dark: INVERT_FILTER }}
       />
     </chakra.a>
   );