Disable liverender on certain tokens (#2010)

* disable liverender on certain tokens

* fix test

apps/web/src/components/NftPreview/NftPreview.tsx

@@ -15,6 +15,7 @@ import NftDetailGif from '~/scenes/NftDetailPage/NftDetailGif';
 import NftDetailModel from '~/scenes/NftDetailPage/NftDetailModel';
 import NftDetailVideo from '~/scenes/NftDetailPage/NftDetailVideo';
 import { useGetSinglePreviewImage } from '~/shared/relay/useGetPreviewImages';
+import { isKnownComputeIntensiveToken } from '~/shared/utils/prohibition';
 import { isFirefox, isSafari } from '~/utils/browser';
 import isSvg from '~/utils/isSvg';
 import { getBackgroundColorOverrideForContract } from '~/utils/token';
@@ -43,14 +44,15 @@ function NftPreview({
   disableLiverender = false,
   columns = 3,
   isInFeedEvent = false,
-  shouldLiveRender,
+  shouldLiveRender: _shouldLiveRender,
   collectionId,
   onLoad,
 }: Props) {
   const token = useFragment(
     graphql`
       fragment NftPreviewFragment on Token {
         dbid
+        tokenId
         contract {
           contractAddress {
             address
@@ -88,13 +90,18 @@ function NftPreview({
 
   const ownerUsername = token.owner?.username;
 
+  const tokenId = token.tokenId ?? '';
   const contractAddress = token.contract?.contractAddress?.address ?? '';
 
   const backgroundColorOverride = useMemo(
     () => getBackgroundColorOverrideForContract(contractAddress),
     [contractAddress]
   );
 
+  const shouldLiveRender = isKnownComputeIntensiveToken(contractAddress, tokenId)
+    ? false
+    : _shouldLiveRender;
+
   const isIFrameLiveDisplay = Boolean(
     (shouldLiveRender && token.media?.__typename === 'HtmlMedia') ||
       (shouldLiveRender && token.media?.__typename === 'GltfMedia')

apps/web/src/scenes/NftDetailPage/NftDetailAsset.test.tsx

@@ -122,6 +122,7 @@ const RetryImageMediaResponse: NftErrorContextRetryMutationMutation = {
     token: {
       __typename: 'Token',
       id: 'Token:testTokenId',
+      tokenId: 'testTokenId',
       dbid: 'testTokenId',
       name: 'Test Token Name',
       chain: Chain.Ethereum,

packages/shared/src/utils/extractRelevantMetadataFromToken.ts

@@ -6,14 +6,14 @@ import { isChainEvm } from './chains';
 import { extractMirrorXyzUrl } from './extractMirrorXyzUrl';
 import { DateFormatOption, getFormattedDate } from './getFormattedDate';
 import { getOpenseaExternalUrlDangerously } from './getOpenseaExternalUrl';
-import { getProhibitionUrlDangerously } from './getProhibitionUrl';
 import {
   getFxHashExternalUrlDangerously,
   getObjktExternalUrlDangerously,
   isFxHashContractAddress,
 } from './getTezosExternalUrl';
 import { hexToDec } from './hexToDec';
 import processProjectUrl from './processProjectUrl';
+import { getProhibitionUrlDangerously } from './prohibition';
 import { truncateAddress } from './wallet';
 
 export function extractRelevantMetadataFromToken(

packages/shared/src/utils/prohibition.test.ts

@@ -0,0 +1,21 @@
+import { isKnownComputeIntensiveToken } from './prohibition';
+
+describe('prohibition', () => {
+  test('isKnownComputeIntensiveToken', () => {
+    // prohibition + offending tokens
+    expect(
+      isKnownComputeIntensiveToken('0x47a91457a3a1f700097199fd63c039c4784384ab', '1E84805') // 32000005
+    ).toBe(true);
+    expect(
+      isKnownComputeIntensiveToken('0x47a91457a3a1f700097199fd63c039c4784384ab', '56C8D23') // 91000099
+    ).toBe(true);
+
+    // non-prohibition contract
+    expect(isKnownComputeIntensiveToken('some_other_contract', '1E84805')).toBe(false);
+
+    // prohibition + non-offending tokens
+    expect(
+      isKnownComputeIntensiveToken('0x47a91457a3a1f700097199fd63c039c4784384ab', 'F4240') // 1000000
+    ).toBe(false);
+  });
+});

packages/shared/src/utils/prohibition.ts

@@ -0,0 +1,32 @@
+import { hexToDec } from './hexToDec';
+
+const PROHIBITION_CONTRACT_ADDRESSES = new Set(['0x47a91457a3a1f700097199fd63c039c4784384ab']);
+
+// Projects that are known to crash browsers
+const LIVE_RENDER_DISABLED_PROJECT_IDS = new Set([32, 91, 210]);
+
+/**
+ * WARNING: you will rarely want to use this function directly;
+ * prefer to use `extractRelevantMetadataFromToken.ts`
+ */
+export function getProhibitionUrlDangerously(contractAddress: string, tokenId: string) {
+  if (PROHIBITION_CONTRACT_ADDRESSES.has(contractAddress)) {
+    return `https://prohibition.art/token/${contractAddress}-${hexToDec(tokenId)}`;
+  }
+  return '';
+}
+
+function getProhibitionProjectId(tokenId: string) {
+  // same formula as art blocks
+  return Math.floor(Number(tokenId) / 1000000);
+}
+
+export function isKnownComputeIntensiveToken(contractAddress: string, tokenId: string) {
+  if (PROHIBITION_CONTRACT_ADDRESSES.has(contractAddress)) {
+    const projectId = getProhibitionProjectId(hexToDec(tokenId));
+    if (LIVE_RENDER_DISABLED_PROJECT_IDS.has(projectId)) {
+      return true;
+    }
+  }
+  return false;
+}