add iframe banner

configs/app/features/marketplace.ts

@@ -12,7 +12,7 @@ const categoriesUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CATEGORI
 const adminServiceApiHost = getEnvValue('NEXT_PUBLIC_ADMIN_SERVICE_API_HOST');
 const securityReportsUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL');
 const featuredApp = getEnvValue('NEXT_PUBLIC_MARKETPLACE_FEATURED_APP');
-const bannerImageUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_BANNER_IMAGE_URL');
+const bannerContentUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL');
 const bannerLinkUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL');
 
 const title = 'Marketplace';
@@ -26,7 +26,7 @@ const config: Feature<(
   suggestIdeasFormUrl: string | undefined;
   securityReportsUrl: string | undefined;
   featuredApp: string | undefined;
-  banner: { imageUrl: string; linkUrl: string } | undefined;
+  banner: { contentUrl: string; linkUrl: string } | undefined;
 }> = (() => {
   if (enabled === 'true' && chain.rpcUrl && submitFormUrl) {
     const props = {
@@ -35,8 +35,8 @@ const config: Feature<(
       suggestIdeasFormUrl,
       securityReportsUrl,
       featuredApp,
-      banner: bannerImageUrl && bannerLinkUrl ? {
-        imageUrl: bannerImageUrl,
+      banner: bannerContentUrl && bannerLinkUrl ? {
+        contentUrl: bannerContentUrl,
         linkUrl: bannerLinkUrl,
       } : undefined,
     };

configs/envs/.env.main

@@ -51,7 +51,9 @@ NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blocksc
 NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://gist.githubusercontent.com/maxaleks/ce5c7e3de53e8f5b240b88265daf5839/raw/328383c958a8f7ecccf6d50c953bcdf8ab3faa0a/security_reports_goerli_test.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
 NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
-NEXT_PUBLIC_MARKETPLACE_FEATURED_APP=aave
+# NEXT_PUBLIC_MARKETPLACE_FEATURED_APP=aave
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/36f779fd7d74877b57ec7a25a9a3a6c9/raw/746a8a59454c0537235ee44616c4690ce3bbf3c8/banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://www.basename.app
 NEXT_PUBLIC_STATS_API_HOST=https://stats-goerli.k8s-dev.blockscout.com
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.k8s-dev.blockscout.com
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info-test.k8s-dev.blockscout.com

deploy/scripts/download_assets.sh

@@ -17,7 +17,7 @@ ASSETS_ENVS=(
     "NEXT_PUBLIC_MARKETPLACE_CONFIG_URL"
     "NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL"
     "NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL"
-    "NEXT_PUBLIC_MARKETPLACE_BANNER_IMAGE_URL"
+    "NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL"
     "NEXT_PUBLIC_FEATURED_NETWORKS"
     "NEXT_PUBLIC_FOOTER_LINKS"
     "NEXT_PUBLIC_NETWORK_LOGO"

deploy/values/main/values.yaml

@@ -163,6 +163,8 @@ frontend:
     NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs','coin_price','market_cap']"
     NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
     NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
+    NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL: https://gist.githubusercontent.com/maxaleks/36f779fd7d74877b57ec7a25a9a3a6c9/raw/746a8a59454c0537235ee44616c4690ce3bbf3c8/banner.html
+    NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL: https://www.basename.app
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
     NEXT_PUBLIC_WEB3_WALLETS: "['token_pocket','coinbase','metamask']"
     NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES: "[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]"

docs/ENVS.md

@@ -457,7 +457,7 @@ This feature is **always enabled**, but you can configure its behavior by passin
 | NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL | `string` | URL of configuration file (`.json` format only) which contains the list of categories to be displayed on the marketplace page in the specified order. If no URL is provided, then the list of categories will be compiled based on the `categories` fields from the marketplace (apps) configuration file | - | - | `https://example.com/marketplace_categories.json` |
 | NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL | `string` | URL of configuration file (`.json` format only) which contains app security reports for displaying security scores on the Marketplace page | - | - | `https://example.com/marketplace_security_reports.json` |
 | NEXT_PUBLIC_MARKETPLACE_FEATURED_APP | `string` | ID of the featured application to be displayed on the banner on the Marketplace page | - | - | `uniswap` |
-| NEXT_PUBLIC_MARKETPLACE_BANNER_IMAGE_URL | `string` | URL of the banner image. Must support the `_mobile` postfix | - | - | `https://example.com/banner_image` |
+| NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL | `string` | URL of the banner HTML content | - | - | `https://example.com/banner` |
 | NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL | `string` | URL of the page the banner leads to | - | - | `https://example.com` |
 
 #### Marketplace app configuration properties

ui/marketplace/Banner.tsx

-import { Link, Skeleton, useColorModeValue, LinkBox, Flex, Image, LinkOverlay, IconButton } from '@chakra-ui/react';
+import { Link, Skeleton, useColorModeValue, LinkBox, Flex, Image, LinkOverlay, IconButton, Box, useBreakpointValue } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import type { MouseEvent } from 'react';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import type { MarketplaceAppPreview } from 'types/client/marketplace';
 
 import config from 'configs/app';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
 import { apps as appsMock } from 'mocks/apps/apps';
 import IconSvg from 'ui/shared/IconSvg';
@@ -38,7 +37,7 @@ const FeaturedApp = ({
   app, isFavorite, isLoading, onAppClick,
   onInfoClick: onInfoClickProp, onFavoriteClick: onFavoriteClickProp,
 }: FeaturedAppProps) => {
-  const isMobile = useIsMobile();
+  const isMobile = useBreakpointValue({ base: true, sm: false });
 
   const { id, url, external, title, logo, logoDarkMode, shortDescription, categories, internalWallet } = app;
   const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
@@ -88,6 +87,7 @@ const FeaturedApp = ({
         height={{ base: '135px', sm: '136px' }}
         padding={{ base: 3, sm: 5 }}
         background="purple.50"
+        mb={ 6 }
       >
         <Skeleton
           isLoaded={ !isLoading }
@@ -180,6 +180,49 @@ const FeaturedApp = ({
   );
 };
 
+const IframeBanner = () => {
+  const [ isFrameLoading, setIsFrameLoading ] = useState(true);
+
+  const handleIframeLoad = useCallback(() => {
+    setIsFrameLoading(false);
+  }, []);
+
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  return (
+    <Skeleton
+      isLoaded={ !isFrameLoading }
+      position="relative"
+      h="136px"
+      w="100%"
+      borderRadius="12px"
+      mb={{ base: 4, sm: 6 }}
+    >
+      <Link
+        href={ feature.banner?.linkUrl }
+        target="_blank"
+        rel="noopener noreferrer"
+        position="absolute"
+        w="100%"
+        h="100%"
+        top={ 0 }
+        left={ 0 }
+        zIndex={ 1 }
+      />
+      <Box
+        as="iframe"
+        h="100%"
+        w="100%"
+        src={ feature.banner?.contentUrl }
+        title="Marketplace banner"
+        onLoad={ handleIframeLoad }
+      />
+    </Skeleton>
+  );
+};
+
 const Banner = ({ apps, favoriteApps, isLoading, onInfoClick, onFavoriteClick, onAppClick }: BannerProps) => {
   if (!feature.isEnabled) {
     return null;
@@ -201,6 +244,8 @@ const Banner = ({ apps, favoriteApps, isLoading, onInfoClick, onFavoriteClick, o
         onAppClick={ onAppClick }
       />
     );
+  } else if (feature.banner) {
+    return <IframeBanner/>;
   }
 
   return null;