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 */}
-
{
- setIsLoading(false);
- }}
- src={cachedImage?.url ?? ''}
- width={size}
- />
-
- >
+ {isLoading && (
+
)}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
{
+ 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
- {
- setIsLoading(false);
- }}
- src={cachedImage.url}
- width="100%"
- />
- );
- } else if (cachedImage?.__type === 'objectUrl') {
- imageElement = (
- // eslint-disable-next-line @next/next/no-img-element
- {
- setIsLoading(false);
- }}
- src={cachedImage.url}
- width="100%"
- />
- );
- }
+
return (
- <>
- {error ? (
-
-
-
Error Loading Image
-
- ) : (
-
- {isLoading &&
}
- {imageElement && (
- <>
-
- {imageElement}
-
- >
- )}
- {!isLoading && uri &&
}
-
- )}
- >
+
+ {isLoading &&
}
+
+
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);
-}