testnet label and network logo fixes (#3153)

* testnet label and network logo fixes

* fix tests

Author: isstuev

toolkit/chakra/image.tsx

@@ -6,11 +6,14 @@ import { Skeleton } from './skeleton';
 
 export interface ImageProps extends ChakraImageProps {
   fallback?: React.ReactNode;
+  // for the case where the image dimensions are not known before the image is loaded
+  skeletonWidth?: BoxProps['width'];
+  skeletonHeight?: BoxProps['height'];
 }
 
 export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
   function Image(props, ref) {
-    const { fallback, src, onLoad, onError, ...rest } = props;
+    const { fallback, src, onLoad, onError, skeletonWidth, skeletonHeight, ...rest } = props;
 
     const [ loading, setLoading ] = React.useState(true);
     const [ error, setError ] = React.useState(false);
@@ -40,9 +43,15 @@ export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
       return fallback;
     }
 
+    const skeletonProps: BoxProps = {
+      ...rest as BoxProps,
+      ...(skeletonWidth !== undefined && { width: skeletonWidth }),
+      ...(skeletonHeight !== undefined && { height: skeletonHeight }),
+    };
+
     return (
       <>
-        { loading && <Skeleton loading { ...rest as BoxProps }/> }
+        { loading && <Skeleton loading { ...skeletonProps }/> }
         <ChakraImage
           ref={ ref }
           src={ src }

ui/marketplace/MarketplaceAppTopBar.tsx

@@ -13,7 +13,7 @@ import { Link } from 'toolkit/chakra/link';
 import { BackToButton } from 'toolkit/components/buttons/BackToButton';
 import { makePrettyLink } from 'toolkit/utils/url';
 import RewardsButton from 'ui/rewards/RewardsButton';
-import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import NetworkIcon from 'ui/snippets/networkLogo/NetworkIcon';
 import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
 import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
 
@@ -43,7 +43,7 @@ const MarketplaceAppTopBar = ({ appId, data, isLoading }: Props) => {
 
   return (
     <Flex alignItems="center" mb={{ base: 3, md: 2 }} rowGap={ 3 } columnGap={ 2 }>
-      { !isMobile && <NetworkLogo isCollapsed mr={ 4 }/> }
+      { !isMobile && <NetworkIcon mr={ 4 }/> }
       <BackToButton
         href={ goBackUrl }
         hint="Back to dApps list"

ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_desktop-base-view-1.png

@@ -7,7 +7,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import NavigationMobile from 'ui/snippets/navigation/mobile/NavigationMobile';
 import RollupStageBadge from 'ui/snippets/navigation/RollupStageBadge';
 import TestnetBadge from 'ui/snippets/navigation/TestnetBadge';
-import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import NetworkLogo from 'ui/snippets/networkLogo/NetworkLogo';
 
 interface Props {
   isMarketplaceAppPage?: boolean;
@@ -35,8 +35,8 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
       </DrawerTrigger>
       <DrawerContent >
         <DrawerBody display="flex" flexDirection="column" overflowX="hidden" overflowY="auto">
-          <TestnetBadge alignSelf="flex-start"/>
-          <RollupStageBadge alignSelf="flex-start"/>
+          <TestnetBadge alignSelf="flex-start" mb={ 2 }/>
+          <RollupStageBadge alignSelf="flex-start" mb={ 2 }/>
           <NetworkLogo/>
           <NavigationMobile onNavLinkClick={ onClose } isMarketplaceAppPage={ isMarketplaceAppPage }/>
         </DrawerBody>

ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_mobile-base-view-1.png

@@ -4,10 +4,12 @@ import React from 'react';
 import config from 'configs/app';
 import { useIsSticky } from 'toolkit/hooks/useIsSticky';
 import RewardsButton from 'ui/rewards/RewardsButton';
-import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import NetworkIcon from 'ui/snippets/networkLogo/NetworkIcon';
 import UserProfileMobile from 'ui/snippets/user/profile/UserProfileMobile';
 import UserWalletMobile from 'ui/snippets/user/wallet/UserWalletMobile';
 
+import RollupStageBadge from '../navigation/RollupStageBadge';
+import TestnetBadge from '../navigation/TestnetBadge';
 import SearchBarMobile from '../searchBar/SearchBarMobile';
 import Burger from './Burger';
 
@@ -44,7 +46,11 @@ const HeaderMobile = ({ hideSearchButton, onGoToSearchResults }: Props) => {
         boxShadow={ isSticky ? 'md' : 'none' }
       >
         <Burger/>
-        <NetworkLogo ml={ 2 } mr="auto"/>
+        <Flex alignItems="center" flexGrow={ 1 } mx={ 2 }>
+          <NetworkIcon/>
+          <TestnetBadge ml={ 2 }/>
+          <RollupStageBadge ml={ 2 }/>
+        </Flex>
         <Flex columnGap={ 2 }>
           { !hideSearchButton && <SearchBarMobile onGoToSearchResults={ onGoToSearchResults }/> }
           { config.features.rewards.isEnabled && <RewardsButton/> }