post-review changes

ui/marketplace/MarketplaceAppAlert.tsx

+import { Alert } from '@chakra-ui/react';
+import React from 'react';
+
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
+
+import useMarketplaceWallet from './useMarketplaceWallet';
+
+type Props = {
+  internalWallet: boolean | undefined;
+}
+
+const MarketplaceAppTopBar = ({ internalWallet }: Props) => {
+  const { address } = useMarketplaceWallet();
+  const isWalletConnected = Boolean(address);
+
+  const message = React.useMemo(() => {
+    let icon: IconName = 'wallet';
+    let text = 'Connect your wallet to Blockscout for full-featured access';
+    let status: 'warning' | 'success' = 'warning';
+
+    if (isWalletConnected && internalWallet) {
+      icon = 'integration/full';
+      text = 'Your wallet is connected with Blockscout';
+      status = 'success';
+    } else if (isWalletConnected) {
+      icon = 'integration/partial';
+      text = 'Connect your wallet in the app below';
+    }
+
+    return { icon, text, status };
+  }, [ isWalletConnected, internalWallet ]);
+
+  return (
+    <Alert
+      status={ message.status }
+      width={{ base: '100%', md: 'auto' }}
+      borderRadius="base"
+      px={ 3 }
+      py={{ base: 3, md: 1.5 }}
+      fontSize="sm"
+      lineHeight={ 5 }
+    >
+      <IconSvg
+        name={ message.icon }
+        color={ message.status === 'success' ? 'green.600' : 'current' }
+        boxSize={ 5 }
+        flexShrink={ 0 }
+        mr={ 2 }
+      />
+      { message.text }
+    </Alert>
+  );
+};
+
+export default MarketplaceAppTopBar;

ui/marketplace/MarketplaceAppInfo.tsx

@@ -12,7 +12,7 @@ import Content from './MarketplaceAppInfo/Content';
 import TriggerButton from './MarketplaceAppInfo/TriggerButton';
 
 interface Props {
-  data: MarketplaceAppOverview;
+  data: MarketplaceAppOverview | undefined;
 }
 
 const MarketplaceAppInfo = ({ data }: Props) => {

ui/marketplace/MarketplaceAppInfo/Content.tsx

@@ -8,7 +8,7 @@ import type { Props as SocialLinkProps } from './SocialLink';
 import WebsiteLink from './WebsiteLink';
 
 interface Props {
-  data: MarketplaceAppOverview;
+  data: MarketplaceAppOverview | undefined;
 }
 
 const SOCIAL_LINKS: Array<Omit<SocialLinkProps, 'href'>> = [
@@ -21,7 +21,7 @@ const SOCIAL_LINKS: Array<Omit<SocialLinkProps, 'href'>> = [
 const Content = ({ data }: Props) => {
   const socialLinks: Array<SocialLinkProps> = [];
   SOCIAL_LINKS.forEach((link) => {
-    const href = data[link.field];
+    const href = data?.[link.field];
     if (href) {
       if (Array.isArray(href)) {
         href.forEach((href) => socialLinks.push({ ...link, href }));
@@ -35,8 +35,8 @@ const Content = ({ data }: Props) => {
     <Flex fontSize="sm" flexDir="column" rowGap={ 5 }>
       <div>
         <Text variant="secondary" fontSize="xs">Project info</Text>
-        <Text fontSize="sm" mt={ 3 }>{ data.shortDescription }</Text>
-        <WebsiteLink url={ data.site }/>
+        <Text fontSize="sm" mt={ 3 }>{ data?.shortDescription }</Text>
+        <WebsiteLink url={ data?.site }/>
       </div>
       { socialLinks.length > 0 && (
         <div>

ui/marketplace/MarketplaceAppTopBar.tsx

-import { chakra, Flex, Tooltip, Skeleton, Box } from '@chakra-ui/react';
+import { chakra, Flex, Tooltip, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
@@ -6,20 +6,19 @@ import type { MarketplaceAppOverview } from 'types/client/marketplace';
 import { route } from 'nextjs-routes';
 
 import { useAppContext } from 'lib/contexts/app';
-import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 
+import MarketplaceAppAlert from './MarketplaceAppAlert';
 import MarketplaceAppInfo from './MarketplaceAppInfo';
 
 type Props = {
-  isWalletConnected: boolean;
   data: MarketplaceAppOverview | undefined;
-  isPending: boolean;
+  isLoading: boolean;
 }
 
-const MarketplaceAppTopBar = ({ data, isPending, isWalletConnected }: Props) => {
+const MarketplaceAppTopBar = ({ data, isLoading }: Props) => {
   const appProps = useAppContext();
 
   const goBackUrl = React.useMemo(() => {
@@ -29,75 +28,33 @@ const MarketplaceAppTopBar = ({ data, isPending, isWalletConnected }: Props) =>
     return route({ pathname: '/apps' });
   }, [ appProps.referrer ]);
 
-  const message = React.useMemo(() => {
-    let icon: IconName = 'wallet';
-    let iconColor = 'blackAlpha.800';
-    let bgColor = 'orange.100';
-    let text = 'Connect your wallet to Blockscout for full-featured access';
-
-    if (isWalletConnected && data?.internalWallet) {
-      icon = 'integration/full';
-      iconColor = 'green.600';
-      bgColor = 'green.100';
-      text = 'Your wallet is connected with Blockscout';
-    } else if (isWalletConnected) {
-      icon = 'integration/partial';
-      text = 'Connect your wallet in the app below';
-    }
-
-    return { icon, iconColor, bgColor, text };
-  }, [ isWalletConnected, data?.internalWallet ]);
-
-  if (isPending) {
-    return (
-      <Flex alignItems="center" mb={ 2 } gap={ 2 }>
-        <Skeleton w="25px" h="32px" borderRadius="base"/>
-        <Skeleton w="300px" h="32px" borderRadius="base"/>
-        <Skeleton w="75px" h="32px" borderRadius="base"/>
-        <Skeleton w="150px" h="32px" borderRadius="base"/>
-      </Flex>
-    );
-  }
-
-  if (!data) {
-    return null;
-  }
-
   return (
     <Flex alignItems="center" flexWrap="wrap" mb={{ base: 6, md: 2 }} rowGap={ 3 } columnGap={ 2 }>
       <Tooltip label="Back to dApps list" order={ 1 }>
-        <LinkInternal display="inline-flex" href={ goBackUrl } h="32px" mr={{ base: 'auto', md: 0 }}>
+        <LinkInternal display="inline-flex" href={ goBackUrl } h="32px" mr={{ base: 'auto', md: 0 }} isLoading={ isLoading }>
           <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>
         </LinkInternal>
       </Tooltip>
-      <Flex
-        flex={{ base: 1, md: 'none' }}
-        alignItems="center"
-        bgColor={ message.bgColor }
-        color="gray.700"
-        minHeight={ 8 }
-        borderRadius="base"
-        px={ 3 }
-        py={{ base: 3, md: 1.5 }}
-        order={{ base: 4, md: 2 }}
-      >
-        <IconSvg name={ message.icon } color={ message.iconColor } boxSize={ 5 } flexShrink={ 0 }/>
-        <chakra.span ml={ 2 } fontSize="sm" lineHeight={ 5 }>{ message.text }</chakra.span>
-      </Flex>
-      <Box order={{ base: 2, md: 3 }}>
+      <Skeleton order={{ base: 4, md: 2 }} isLoaded={ !isLoading }>
+        <MarketplaceAppAlert internalWallet={ data?.internalWallet }/>
+      </Skeleton>
+      <Skeleton order={{ base: 2, md: 3 }} isLoaded={ !isLoading }>
         <MarketplaceAppInfo data={ data }/>
-      </Box>
+      </Skeleton>
       <LinkExternal
         order={{ base: 3, md: 4 }}
-        href={ data.url }
+        href={ data?.url }
         variant="subtle"
         fontSize="sm"
         lineHeight={ 5 }
         minW={ 0 }
         maxW={{ base: 'calc(100% - 114px)', md: 'auto' }}
         display="flex"
+        isLoading={ isLoading }
       >
-        <chakra.span isTruncated>{ (new URL(data.url)).hostname }</chakra.span>
+        <chakra.span isTruncated>
+          { data?.url ? (new URL(data.url)).hostname : '' }
+        </chakra.span>
       </LinkExternal>
     </Flex>
   );

ui/pages/MarketplaceApp.tsx

@@ -141,7 +141,7 @@ const MarketplaceApp = () => {
 
   return (
     <>
-      <MarketplaceAppTopBar isWalletConnected={ Boolean(address) } data={ data } isPending={ isPending }/>
+      <MarketplaceAppTopBar data={ data } isLoading={ isPending }/>
       <DappscoutIframeProvider
         address={ address }
         appUrl={ data?.url }