NFT marketplaces: make collection_url and instance_url optional (blockscout#2797)

Fixes blockscout#2614

Author: tom2drum

configs/app/ui/views/nft.ts

@@ -2,8 +2,19 @@ import type { NftMarketplaceItem } from 'types/views/nft';
 
 import { getEnvValue, parseEnvJson } from 'configs/app/utils';
 
+const marketplaces = (() => {
+  const marketplaces = parseEnvJson<Array<NftMarketplaceItem>>(getEnvValue('NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES')) || [];
+  const isValid = marketplaces.every(marketplace => marketplace.collection_url || marketplace.instance_url);
+
+  if (!isValid) {
+    return [];
+  }
+
+  return marketplaces;
+})();
+
 const config = Object.freeze({
-  marketplaces: parseEnvJson<Array<NftMarketplaceItem>>(getEnvValue('NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES')) || [],
+  marketplaces,
   verifiedFetch: {
     isEnabled: getEnvValue('NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED') === 'false' ? false : true,
   },

deploy/tools/envs-validator/schema.ts

@@ -626,8 +626,8 @@ const contractCodeIdeSchema: yup.ObjectSchema<ContractCodeIde> = yup
 const nftMarketplaceSchema: yup.ObjectSchema<NftMarketplaceItem> = yup
   .object({
     name: yup.string().required(),
-    collection_url: yup.string().test(urlTest).required(),
-    instance_url: yup.string().test(urlTest).required(),
+    collection_url: yup.string().test(urlTest),
+    instance_url: yup.string().test(urlTest),
     logo_url: yup.string().test(urlTest).required(),
   });
 

docs/ENVS.md

@@ -305,8 +305,8 @@ Settings for meta tags, OG tags and SEO
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
 | name | `string` | Displayed name of the marketplace | Required | - | `OpenSea` |
-| collection_url | `string` | URL template for NFT collection | Required | - | `https://opensea.io/assets/ethereum/{hash}` |
-| instance_url | `string` | URL template for NFT instance | Required | - | `https://opensea.io/assets/ethereum/{hash}/{id}` |
+| collection_url | `string` | URL template for NFT collection | - | - | `https://opensea.io/assets/ethereum/{hash}` |
+| instance_url | `string` | URL template for NFT instance | - | - | `https://opensea.io/assets/ethereum/{hash}/{id}` |
 | logo_url | `string` | URL of marketplace logo | Required | - | `https://opensea.io/static/images/logos/opensea-logo.svg` |
 
 *Note* URL templates should contain placeholders of NFT hash (`{hash}`) and NFT id (`{id}`). This placeholders will be substituted with particular values for every collection or instance.

types/views/nft.ts

@@ -1,6 +1,6 @@
 export interface NftMarketplaceItem {
   name: string;
-  collection_url: string;
-  instance_url: string;
+  collection_url?: string;
+  instance_url?: string;
   logo_url: string;
 }

ui/token/TokenNftMarketplaces.tsx

@@ -24,6 +24,26 @@ const TokenNftMarketplaces = ({ hash, id, isLoading, appActionData, source }: Pr
     return null;
   }
 
+  const items = config.UI.views.nft.marketplaces
+    .map((item) => {
+      const hrefTemplate = id ? item.instance_url : item.collection_url;
+      if (!hrefTemplate) {
+        return null;
+      }
+      const href = hrefTemplate.replace('{id}', id || '').replace('{hash}', hash || '');
+
+      return {
+        href,
+        logo_url: item.logo_url,
+        name: item.name,
+      };
+    })
+    .filter(Boolean);
+
+  if (items.length === 0) {
+    return null;
+  }
+
   return (
     <>
       <DetailedInfo.ItemLabel
@@ -36,14 +56,10 @@ const TokenNftMarketplaces = ({ hash, id, isLoading, appActionData, source }: Pr
         py={ appActionData ? '1px' : '6px' }
       >
         <Skeleton loading={ isLoading } display="flex" columnGap={ 3 } flexWrap="wrap" alignItems="center">
-          { config.UI.views.nft.marketplaces.map((item) => {
-
-            const hrefTemplate = id ? item.instance_url : item.collection_url;
-            const href = hrefTemplate.replace('{id}', id || '').replace('{hash}', hash || '');
-
+          { items.map((item) => {
             return (
               <Tooltip content={ `View on ${ item.name }` } key={ item.name }>
-                <Link href={ href } target="_blank">
+                <Link href={ item.href } target="_blank">
                   <Image
                     src={ item.logo_url }
                     alt={ `${ item.name } marketplace logo` }