From 68b13edd92b4584908c054a2e3398cec72313373 Mon Sep 17 00:00:00 2001 From: robin Date: Tue, 10 Oct 2023 12:02:08 -0400 Subject: [PATCH] Disable liverender on certain tokens (#2010) * disable liverender on certain tokens * fix test --- .../src/components/NftPreview/NftPreview.tsx | 9 +++++- .../NftDetailPage/NftDetailAsset.test.tsx | 1 + .../utils/extractRelevantMetadataFromToken.ts | 2 +- .../shared/src/utils/getProhibitionUrl.ts | 14 -------- packages/shared/src/utils/prohibition.test.ts | 21 ++++++++++++ packages/shared/src/utils/prohibition.ts | 32 +++++++++++++++++++ 6 files changed, 63 insertions(+), 16 deletions(-) delete mode 100644 packages/shared/src/utils/getProhibitionUrl.ts create mode 100644 packages/shared/src/utils/prohibition.test.ts create mode 100644 packages/shared/src/utils/prohibition.ts diff --git a/apps/web/src/components/NftPreview/NftPreview.tsx b/apps/web/src/components/NftPreview/NftPreview.tsx index b454a4eba4..c3b6bef749 100644 --- a/apps/web/src/components/NftPreview/NftPreview.tsx +++ b/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,7 +44,7 @@ function NftPreview({ disableLiverender = false, columns = 3, isInFeedEvent = false, - shouldLiveRender, + shouldLiveRender: _shouldLiveRender, collectionId, onLoad, }: Props) { @@ -51,6 +52,7 @@ function NftPreview({ graphql` fragment NftPreviewFragment on Token { dbid + tokenId contract { contractAddress { address @@ -88,6 +90,7 @@ function NftPreview({ const ownerUsername = token.owner?.username; + const tokenId = token.tokenId ?? ''; const contractAddress = token.contract?.contractAddress?.address ?? ''; const backgroundColorOverride = useMemo( @@ -95,6 +98,10 @@ function NftPreview({ [contractAddress] ); + const shouldLiveRender = isKnownComputeIntensiveToken(contractAddress, tokenId) + ? false + : _shouldLiveRender; + const isIFrameLiveDisplay = Boolean( (shouldLiveRender && token.media?.__typename === 'HtmlMedia') || (shouldLiveRender && token.media?.__typename === 'GltfMedia') diff --git a/apps/web/src/scenes/NftDetailPage/NftDetailAsset.test.tsx b/apps/web/src/scenes/NftDetailPage/NftDetailAsset.test.tsx index 8c20af75b0..bb579c7f7e 100644 --- a/apps/web/src/scenes/NftDetailPage/NftDetailAsset.test.tsx +++ b/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, diff --git a/packages/shared/src/utils/extractRelevantMetadataFromToken.ts b/packages/shared/src/utils/extractRelevantMetadataFromToken.ts index 48a2934ede..3efa789874 100644 --- a/packages/shared/src/utils/extractRelevantMetadataFromToken.ts +++ b/packages/shared/src/utils/extractRelevantMetadataFromToken.ts @@ -6,7 +6,6 @@ import { isChainEvm } from './chains'; import { extractMirrorXyzUrl } from './extractMirrorXyzUrl'; import { DateFormatOption, getFormattedDate } from './getFormattedDate'; import { getOpenseaExternalUrlDangerously } from './getOpenseaExternalUrl'; -import { getProhibitionUrlDangerously } from './getProhibitionUrl'; import { getFxHashExternalUrlDangerously, getObjktExternalUrlDangerously, @@ -14,6 +13,7 @@ import { } from './getTezosExternalUrl'; import { hexToDec } from './hexToDec'; import processProjectUrl from './processProjectUrl'; +import { getProhibitionUrlDangerously } from './prohibition'; import { truncateAddress } from './wallet'; export function extractRelevantMetadataFromToken( diff --git a/packages/shared/src/utils/getProhibitionUrl.ts b/packages/shared/src/utils/getProhibitionUrl.ts deleted file mode 100644 index 57fd9966de..0000000000 --- a/packages/shared/src/utils/getProhibitionUrl.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { hexToDec } from './hexToDec'; - -const PROHIBITION_CONTRACT_ADDRESSES = new Set(['0x47a91457a3a1f700097199fd63c039c4784384ab']); - -/** - * 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 ''; -} diff --git a/packages/shared/src/utils/prohibition.test.ts b/packages/shared/src/utils/prohibition.test.ts new file mode 100644 index 0000000000..b29bf1fd03 --- /dev/null +++ b/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); + }); +}); diff --git a/packages/shared/src/utils/prohibition.ts b/packages/shared/src/utils/prohibition.ts new file mode 100644 index 0000000000..5ff4a6443a --- /dev/null +++ b/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; +}