add ENV variable

blockscout · Nov 7, 2024 · 4e4a5bd · 4e4a5bd
1 parent 1f2cec0
commit 4e4a5bd
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 4 deletions.
diff --git a/configs/app/ui/views/nft.ts b/configs/app/ui/views/nft.ts
@@ -4,6 +4,9 @@ import { getEnvValue, parseEnvJson } from 'configs/app/utils';
 
 const config = Object.freeze({
   marketplaces: parseEnvJson<Array<NftMarketplaceItem>>(getEnvValue('NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES')) || [],
+  verifiedFetch: {
+    isEnabled: getEnvValue('NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED') === 'false' ? false : true,
+  },
 });
 
 export default config;
diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts
@@ -707,6 +707,7 @@ const schema = yup
       .transform(replaceQuotes)
       .json()
       .of(nftMarketplaceSchema),
+    NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED: yup.boolean(),
 
     //     e. misc
     NEXT_PUBLIC_NETWORK_EXPLORERS: yup

diff --git a/deploy/tools/envs-validator/test/.env.base b/deploy/tools/envs-validator/test/.env.base
@@ -31,6 +31,7 @@ NEXT_PUBLIC_FONT_FAMILY_HEADING={'name':'Montserrat','url':'https://fonts.google
 NEXT_PUBLIC_FONT_FAMILY_BODY={'name':'Raleway','url':'https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap'}
 NEXT_PUBLIC_FOOTER_LINKS=https://example.com
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
+NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED=false
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=false
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=false
 NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED=false

diff --git a/docs/ENVS.md b/docs/ENVS.md
@@ -279,7 +279,7 @@ Settings for meta tags, OG tags and SEO
 | Variable | Type | Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES | `Array<NftMarketplace>` where `NftMarketplace` can have following [properties](#nft-marketplace-properties) | Used to build up links to NFT collections and NFT instances in external marketplaces. | - | - | `[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://opensea.io/static/images/logos/opensea-logo.svg'}]` | v1.15.0+ |
-
+| NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED | `boolean` | Indicates that the Helia verified fetch should be used for retrieving content of NFT assets (currently limited to images) directly from IPFS network using trustless gateways. | - | `true` | `false` | v1.37.0+ |
 
 ##### NFT marketplace properties
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |

diff --git a/ui/shared/nft/NftVideo.tsx b/ui/shared/nft/NftVideo.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 
 import type { TokenInstance } from 'types/api/token';
 
+import config from 'configs/app';
+
 import { mediaStyleProps, videoPlayProps } from './utils';
 
 interface Props {
@@ -25,11 +27,11 @@ const NftVideo = ({ src, instance, autoPlay = true, onLoad, onError, onClick }:
     }
 
     try {
-      controller.current = new AbortController();
       const imageUrl = typeof instance.metadata?.image === 'string' ? instance.metadata.image : undefined;
-      if (!imageUrl) {
+      if (!imageUrl || !config.UI.views.nft.verifiedFetch.isEnabled) {
         throw new Error('No image URL found');
       }
+      controller.current = new AbortController();
       const response = await verifiedFetch(imageUrl, { signal: controller.current.signal });
       const blob = await response.blob();
       const src = URL.createObjectURL(blob);

diff --git a/ui/shared/nft/useNftMediaInfo.tsx b/ui/shared/nft/useNftMediaInfo.tsx
@@ -7,6 +7,7 @@ import type { TokenInstance } from 'types/api/token';
 import type { StaticRoute } from 'nextjs-routes';
 import { route } from 'nextjs-routes';
 
+import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useFetch from 'lib/hooks/useFetch';
 
@@ -88,7 +89,7 @@ function useFetchAssetViaIpfs(url: string | undefined, type: MediaType | undefin
 
   React.useEffect(() => {
     if (isEnabled) {
-      if (type === 'image' && url && url.includes('ipfs')) {
+      if (config.UI.views.nft.verifiedFetch.isEnabled && type === 'image' && url && url.includes('ipfs')) {
         fetchAsset(url);
       } else {
         setResult(null);