diff --git a/app/components/account/nftoken/NFTokenAccountHeader.tsx b/app/components/account/nftoken/NFTokenAccountHeader.tsx index 60505081..e481c586 100644 --- a/app/components/account/nftoken/NFTokenAccountHeader.tsx +++ b/app/components/account/nftoken/NFTokenAccountHeader.tsx @@ -1,6 +1,6 @@ import { InfoTooltip } from '@components/common/InfoTooltip'; import { LoadingArtPlaceholder } from '@components/common/LoadingArtPlaceholder'; -import { CachedImageContent } from '@components/common/NFTArt'; +import { NFTImageContent } from '@components/common/NFTArt'; import { Account } from '@providers/accounts'; import React, { Suspense } from 'react'; @@ -42,7 +42,7 @@ export function NFTokenNFTHeader({ nft }: { nft: NftokenTypes.NftAccount }) { return (
- +
@@ -55,9 +55,8 @@ export function NFTokenNFTHeader({ nft }: { nft: NftokenTypes.NftAccount }) {
- {`${ - nft.authority_can_update ? 'Mutable' : 'Immutable' - }`} + {`${nft.authority_can_update ? 'Mutable' : 'Immutable' + }`}
- +
@@ -93,9 +92,8 @@ export function NFTokenCollectionHeader({ collection }: { collection: NftokenTyp
- {`${ - collection.authority_can_update ? 'Mutable' : 'Immutable' - }`} + {`${collection.authority_can_update ? 'Mutable' : 'Immutable' + }`} { export const NftokenImage = ({ url, size }: { url: string | undefined; size: number }) => { const [isLoading, setIsLoading] = useState(true); - const { data: cachedImage, error } = useCachedImage(url || ''); return ( <> - {error ? ( -
- ) : ( - <> - {isLoading && ( -
- )} -
- {/* eslint-disable-next-line @next/next/no-img-element */} - nft { - setIsLoading(false); - }} - src={cachedImage?.url ?? ''} - width={size} - /> -
- + {isLoading && ( +
)} +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + nft { + setIsLoading(false); + }} + src={url} + width={size} + /> +
- ); + ) }; const CollectionCard = ({ collection }: { collection: NftokenTypes.CollectionAccount }) => { diff --git a/app/components/common/NFTArt.tsx b/app/components/common/NFTArt.tsx index c29ed1fa..a1c2cd55 100644 --- a/app/components/common/NFTArt.tsx +++ b/app/components/common/NFTArt.tsx @@ -4,7 +4,6 @@ import ErrorLogo from '@img/logos-solana/dark-solana-logo.svg'; import { MetadataJson, MetaDataJsonCategory, MetadataJsonFile } from '@metaplex/js'; import { PublicKey } from '@solana/web3.js'; import { getLast } from '@utils/index'; -import { useCachedImage } from '@utils/useCachedImage'; import Image from 'next/image'; import Link from 'next/link'; import { useState } from 'react'; @@ -27,59 +26,20 @@ const ViewOriginalArtContentLink = ({ src }: { src: string }) => { ); }; -export const CachedImageContent = ({ uri }: { uri?: string }) => { +export const NFTImageContent = ({ uri }: { uri?: string }) => { const [isLoading, setIsLoading] = useState(true); - const { data: cachedImage, error } = useCachedImage(uri || ''); - let imageElement; - if (cachedImage?.__type === 'fallbackUrl') { - imageElement = ( - // eslint-disable-next-line @next/next/no-img-element - nft { - setIsLoading(false); - }} - src={cachedImage.url} - width="100%" - /> - ); - } else if (cachedImage?.__type === 'objectUrl') { - imageElement = ( - // eslint-disable-next-line @next/next/no-img-element - nft { - setIsLoading(false); - }} - src={cachedImage.url} - width="100%" - /> - ); - } + return ( - <> - {error ? ( -
- -
Error Loading Image
-
- ) : ( -
- {isLoading && } - {imageElement && ( - <> -
- {imageElement} -
- - )} - {!isLoading && uri && } -
- )} - +
+ {isLoading && } +
+ nft setIsLoading(false)} /> +
+ {!isLoading && uri && } +
); }; @@ -220,7 +180,7 @@ export const ArtContent = ({ ) : category === 'html' || animationUrlExt === 'html' ? ( ) : ( - + ); return ( diff --git a/app/utils/useCachedImage.ts b/app/utils/useCachedImage.ts deleted file mode 100644 index ba8cbf86..00000000 --- a/app/utils/useCachedImage.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { SWRResponse } from 'swr'; -import useSWRImmutable from 'swr/immutable'; - -type CachedImage = Readonly<{ __type: 'fallbackUrl'; url: string }> | Readonly<{ __type: 'objectUrl'; url: string }>; - -async function fetchImage(_: string, uri: string): Promise { - try { - let response: Response; - try { - response = await fetch(uri, { cache: 'force-cache' }); - } catch { - response = await fetch(uri, { cache: 'reload' }); - } - const blob = await response.blob(); - return { __type: 'objectUrl', url: URL.createObjectURL(blob) }; - } catch { - return { __type: 'fallbackUrl', url: uri }; - } -} - -export function useCachedImage(uri: string): SWRResponse { - return useSWRImmutable(['cachedImage', uri], fetchImage); -}