Merge pull request #1788 from blockscout/marketplace-changes

Marketplace changes

icons/blob.svg

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M11.183 2.768h-.002a1.382 1.382 0 0 0-.107-.024 6.93 6.93 0 0 0-1.591-.1c-1.009.056-2.254.35-3.32 1.269l-.29.245c-.323.273-.714.602-.918.82-1.292 1.38-2.252 3.68-2.894 5.713a34.038 34.038 0 0 0-.91 3.57l-.01.048-.003.034a68.656 68.656 0 0 0-.067.667c-.038.403-.072.803-.072.951 0 .096.07.329.54.654.447.309 1.123.606 1.987.864 1.719.515 4.041.84 6.38.881 2.342.043 4.645-.2 6.34-.78 1.754-.602 2.556-1.445 2.556-2.415 0-2.7-1.068-5.753-2.593-8.179-.759-1.208-1.617-2.237-2.485-2.977-.875-.746-1.718-1.161-2.452-1.226l-.045-.004-.043-.011h-.001Zm.138-.618S8.18 1.356 5.786 3.42c-.069.06-.157.133-.255.216-.328.276-.769.647-1.001.895C1.74 7.51.55 14.213.55 14.213S.402 15.587.4 15.959c-.013 3.442 19 4.92 19-.794S14.912 2.467 11.321 2.15Z" fill="currentColor"/>
   <path fill-rule="evenodd" clip-rule="evenodd" d="m11.165 2.748.048-.213ZM.55 14.213l-.394-.07v-.002l.001-.004.003-.016.011-.059.043-.222c.04-.192.097-.47.176-.81.157-.683.395-1.625.722-2.661.65-2.056 1.666-4.552 3.126-6.112.249-.265.702-.647 1.02-.914l.015-.013c.1-.083.185-.156.252-.213C6.81 2.009 8.29 1.674 9.43 1.612a7.894 7.894 0 0 1 1.414.05 6.37 6.37 0 0 1 .53.09l.012.002c1.004.098 2.023.647 2.972 1.455.963.821 1.886 1.936 2.688 3.212 1.6 2.546 2.754 5.794 2.754 8.744 0 1.704-1.425 2.774-3.24 3.397-1.844.632-4.273.876-6.672.833-2.403-.043-4.816-.375-6.64-.922-.909-.272-1.695-.604-2.263-.997-.556-.384-.987-.89-.985-1.52.001-.208.04-.665.077-1.048l.052-.516.017-.162.006-.06.398.043Zm0 0-.398-.043.002-.014.002-.014.394.07ZM10.672 3.085a6.528 6.528 0 0 0-1.168-.04c-.952.052-2.102.328-3.08 1.17-.084.074-.185.159-.291.248l-.002.001c-.332.28-.7.591-.884.788-1.226 1.309-2.165 3.533-2.804 5.56a33.627 33.627 0 0 0-.9 3.523l-.005.031-.002.02-.016.158a66.14 66.14 0 0 0-.05.504c-.037.385-.067.742-.07.888.013.031.083.154.367.35.397.275 1.029.557 1.874.81 1.676.502 3.96.823 6.272.864 2.319.042 4.57-.2 6.203-.759 1.718-.589 2.286-1.34 2.286-2.036 0-2.606-1.036-5.587-2.531-7.966-.743-1.182-1.576-2.178-2.407-2.886-.842-.717-1.609-1.077-2.227-1.132l-.077-.007-.072-.018-.014-.003a5.01 5.01 0 0 0-.402-.067Z" fill="currentColor"/>
-  <path d="M15.85 11.65c0 1.353-.548 2.45-1.225 2.45S13.4 13.003 13.4 11.65c0-1.353.548-2.45 1.225-2.45s1.225 1.097 1.225 2.45ZM11.6 12.2c0 1.436-.582 2.6-1.3 2.6-.718 0-1.3-1.164-1.3-2.6 0-1.436.582-2.6 1.3-2.6.718 0 1.3 1.164 1.3 2.6Z" fill="currentColor"/>
+  <path d="M15.85 11.65c0 1.353-.548 2.45-1.225 2.45S13.4 13.003 13.4 11.65c0-1.353.548-2.45 1.225-2.45s1.225 1.097 1.225 2.45Zm-4.25.55c0 1.436-.582 2.6-1.3 2.6-.718 0-1.3-1.164-1.3-2.6 0-1.436.582-2.6 1.3-2.6.718 0 1.3 1.164 1.3 2.6Z" fill="currentColor"/>
 </svg>

icons/social/twitter_filled.svg

 <svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M13 2C7.477 2 3 6.477 3 12s4.477 10 10 10 10-4.477 10-10S18.523 2 13 2Zm-1.338 10.619L7.03 6H10.6l3.037 4.34L17.398 6h1.049l-4.34 5.009L19 18h-3.57l-3.299-4.711L8.05 18H7l4.662-5.381Zm-1.45-5.793h-1.64l7.244 10.348h1.64L10.214 6.826Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13 2C7.477 2 3 6.477 3 12s4.477 10 10 10 10-4.477 10-10S18.523 2 13 2Zm-1.338 10.619L7.03 6h3.57l3.037 4.34L17.398 6h1.049l-4.34 5.009L19 18h-3.57l-3.299-4.711L8.05 18H7l4.662-5.381Zm-1.45-5.793h-1.64l7.244 10.348h1.64L10.214 6.826Z" fill="currentColor"/>
 </svg>

ui/marketplace/MarketplaceAppModal.tsx

@@ -98,6 +98,12 @@ const MarketplaceAppModal = ({
   const isMobile = useIsMobile();
   const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
 
+  function getHostname(url: string | undefined) {
+    try {
+      return new URL(url || '').hostname;
+    } catch (err) {}
+  }
+
   return (
     <Modal
       isOpen={ Boolean(data.id) }
@@ -125,6 +131,7 @@ const MarketplaceAppModal = ({
             <Image
               src={ logoUrl }
               alt={ `${ title } app icon` }
+              borderRadius="md"
             />
           </Flex>
 
@@ -259,7 +266,7 @@ const MarketplaceAppModal = ({
                 overflow="hidden"
                 textOverflow="ellipsis"
               >
-                { site }
+                { getHostname(site) }
               </Text>
             </Link>
           ) }

ui/pages/MarketplaceApp.pw.tsx

@@ -35,7 +35,7 @@ const testFn: Parameters<typeof test>[1] = async({ mount, page }) => {
   const component = await mount(
     <TestApp>
       { /* added Flex as a Layout because the iframe has negative margins */ }
-      <Flex flexDirection="column" mx={{ base: 4, lg: 6 }}>
+      <Flex flexDirection="column" mx={{ base: 4, lg: 6 }} h="100vh">
         <MarketplaceApp/>
       </Flex>
     </TestApp>,

ui/pages/MarketplaceApp.tsx

-import { Box, Center, useColorMode } from '@chakra-ui/react';
+import { Box, Center, useColorMode, Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { DappscoutIframeProvider, useDappscoutIframe } from 'dappscout-iframe';
 import { useRouter } from 'next/router';
@@ -71,7 +71,7 @@ const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
 
   return (
     <Center
-      h="100vh"
+      flexGrow={ 1 }
       mx={{ base: -4, lg: -6 }}
     >
       { (isFrameLoading) && (
@@ -142,7 +142,7 @@ const MarketplaceApp = () => {
   throwOnResourceLoadError(query);
 
   return (
-    <>
+    <Flex flexDirection="column" h="100%">
       <MarketplaceAppTopBar
         data={ data }
         isLoading={ isPending || isSecurityReportsLoading }
@@ -159,7 +159,7 @@ const MarketplaceApp = () => {
       >
         <MarketplaceAppContent address={ address } data={ data } isPending={ isPending }/>
       </DappscoutIframeProvider>
-    </>
+    </Flex>
   );
 };
 

ui/shared/layout/LayoutApp.tsx

@@ -10,23 +10,24 @@ import * as Layout from './components';
 
 const LayoutDefault = ({ children }: Props) => {
   return (
-    <Layout.Container>
+    <Layout.Container overflowY="hidden" height="100vh">
       <Layout.TopRow/>
       <HeaderMobile/>
       <Layout.MainArea>
         <Layout.MainColumn
           paddingTop={{ base: 16, lg: 6 }}
+          paddingBottom={ 0 }
           paddingX={{ base: 4, lg: 6 }}
+          height={{ base: 'calc(100vh - 92px)', sm: 'auto' }} // 92px = Layout.TopRow + HeaderMobile
         >
           <HeaderDesktop isMarketplaceAppPage/>
           <AppErrorBoundary>
-            <Layout.Content pt={{ base: 0, lg: 4 }}>
+            <Layout.Content pt={{ base: 0, lg: 4 }} flexGrow={ 1 }>
               { children }
             </Layout.Content>
           </AppErrorBoundary>
         </Layout.MainColumn>
       </Layout.MainArea>
-      <Layout.Footer/>
     </Layout.Container>
   );
 };

ui/shared/layout/components/Container.tsx

-import { Box } from '@chakra-ui/react';
+import { Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
   children: React.ReactNode;
+  className?: string;
 }
 
-const Container = ({ children }: Props) => {
+const Container = ({ children, className }: Props) => {
   return (
-    <Box minWidth={{ base: '100vw', lg: 'fit-content' }}>
+    <Box className={ className } minWidth={{ base: '100vw', lg: 'fit-content' }}>
       { children }
     </Box>
   );
 };
 
-export default React.memo(Container);
+export default React.memo(chakra(Container));