fix dapp page top bar for mobiles

ui/marketplace/AppSecurityReport.tsx

@@ -13,9 +13,10 @@ type Props = {
   height?: string | undefined;
   showContractList: () => void;
   isLoading?: boolean;
+  onlyIcon?: boolean;
 }
 
-const AppSecurityReport = ({ securityReport, height, showContractList, isLoading }: Props) => {
+const AppSecurityReport = ({ securityReport, height, showContractList, isLoading, onlyIcon }: Props) => {
   if (!securityReport && !isLoading) {
     return null;
   }
@@ -32,6 +33,7 @@ const AppSecurityReport = ({ securityReport, height, showContractList, isLoading
       isLoading={ isLoading }
       height={ height }
       score={ securityScore }
+      onlyIcon={ onlyIcon }
       popoverContent={ (
         <>
           <Box mb={ 5 }>

ui/marketplace/MarketplaceAppInfo.tsx

@@ -22,7 +22,7 @@ const MarketplaceAppInfo = ({ data }: Props) => {
   if (isMobile) {
     return (
       <>
-        <TriggerButton onClick={ onToggle }/>
+        <TriggerButton onClick={ onToggle } onlyIcon/>
         <Modal isOpen={ isOpen } onClose={ onClose } size="full">
           <ModalContent>
             <ModalCloseButton/>

ui/marketplace/MarketplaceAppInfo/TriggerButton.tsx

@@ -5,9 +5,10 @@ import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   onClick: () => void;
+  onlyIcon?: boolean;
 }
 
-const TriggerButton = ({ onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const TriggerButton = ({ onClick, onlyIcon }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   return (
     <Button
       ref={ ref }
@@ -17,11 +18,11 @@ const TriggerButton = ({ onClick }: Props, ref: React.ForwardedRef<HTMLButtonEle
       onClick={ onClick }
       aria-label="Show project info"
       fontWeight={ 500 }
-      px={ 2 }
+      px={ onlyIcon ? 1 : 2 }
       h="32px"
     >
-      <IconSvg name="info" boxSize={ 6 } mr={ 1 }/>
-      <span>Info</span>
+      <IconSvg name="info" boxSize={ 6 } mr={ onlyIcon ? 0 : 1 }/>
+      { !onlyIcon && <span>Info</span> }
     </Button>
   );
 };

ui/marketplace/MarketplaceAppTopBar.tsx

-import { chakra, Flex, Tooltip, Skeleton, useBoolean } from '@chakra-ui/react';
+import { chakra, Flex, Tooltip, Skeleton, useBoolean, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
@@ -7,6 +7,7 @@ import { ContractListTypes } from 'types/client/marketplace';
 import { route } from 'nextjs-routes';
 
 import { useAppContext } from 'lib/contexts/app';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -26,6 +27,7 @@ type Props = {
 const MarketplaceAppTopBar = ({ data, isLoading, isWalletConnected, securityReport }: Props) => {
   const [ showContractList, setShowContractList ] = useBoolean(false);
   const appProps = useAppContext();
+  const isMobile = useIsMobile();
 
   const goBackUrl = React.useMemo(() => {
     if (appProps.referrer && appProps.referrer.includes('/apps') && !appProps.referrer.includes('/apps/')) {
@@ -48,17 +50,24 @@ const MarketplaceAppTopBar = ({ data, isLoading, isWalletConnected, securityRepo
             <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>
           </LinkInternal>
         </Tooltip>
-        <Skeleton width={{ base: '100%', md: 'auto' }} order={{ base: 4, md: 2 }} isLoaded={ !isLoading }>
+        <Skeleton width={{ base: '100%', md: 'auto' }} order={{ base: 5, md: 2 }} isLoaded={ !isLoading }>
           <MarketplaceAppAlert internalWallet={ data?.internalWallet } isWalletConnected={ isWalletConnected }/>
         </Skeleton>
         <Skeleton order={{ base: 2, md: 3 }} isLoaded={ !isLoading }>
           <MarketplaceAppInfo data={ data }/>
         </Skeleton>
-        <Skeleton order={{ base: 2, md: 3 }} isLoaded={ !isLoading }>
-          <AppSecurityReport securityReport={ securityReport } showContractList={ setShowContractList.on }/>
-        </Skeleton>
+        { (securityReport || isLoading) && (
+          <Box order={{ base: 3, md: 4 }}>
+            <AppSecurityReport
+              securityReport={ securityReport }
+              showContractList={ setShowContractList.on }
+              isLoading={ isLoading }
+              onlyIcon={ isMobile }
+            />
+          </Box>
+        ) }
         <LinkExternal
-          order={{ base: 3, md: 4 }}
+          order={{ base: 4, md: 5 }}
           href={ data?.url }
           variant="subtle"
           fontSize="sm"

ui/shared/solidityscanReport/SolidityscanReportButton.tsx

@@ -20,9 +20,10 @@ interface Props {
   popoverContent?: React.ReactNode;
   isLoading?: boolean;
   height?: string;
+  onlyIcon?: boolean;
 }
 
-const SolidityscanReportButton = ({ className, score, popoverContent, isLoading, height = '32px' }: Props) => {
+const SolidityscanReportButton = ({ className, score, popoverContent, isLoading, height = '32px', onlyIcon }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
   const { scoreColor } = useScoreLevelAndColor(score);
 
@@ -43,8 +44,8 @@ const SolidityscanReportButton = ({ className, score, popoverContent, isLoading,
             h={ height }
             flexShrink={ 0 }
           >
-            <IconSvg name={ score < 80 ? 'score/score-not-ok' : 'score/score-ok' } boxSize={ 5 } mr={ 1 }/>
-            { score }
+            <IconSvg name={ score < 80 ? 'score/score-not-ok' : 'score/score-ok' } boxSize={ 5 } mr={ onlyIcon ? 0 : 1 }/>
+            { onlyIcon ? null : score }
           </Button>
         </Skeleton>
       </PopoverTrigger>