diff --git a/src/@utils/nft.ts b/src/@utils/nft.ts index 2bbc30155..a4343801d 100644 --- a/src/@utils/nft.ts +++ b/src/@utils/nft.ts @@ -82,10 +82,13 @@ export function generateNftCreateData( export function decodeTokenURI(tokenURI: string): NftMetadata { if (!tokenURI) return undefined + try { - const nftMeta = JSON.parse( - Buffer.from(tokenURI.replace(tokenUriPrefix, ''), 'base64').toString() - ) as NftMetadata + const nftMeta = tokenURI.includes('data:application/json') + ? (JSON.parse( + Buffer.from(tokenURI.replace(tokenUriPrefix, ''), 'base64').toString() + ) as NftMetadata) + : ({ image: tokenURI } as NftMetadata) return nftMeta } catch (error) { diff --git a/src/components/@shared/AssetList/index.tsx b/src/components/@shared/AssetList/index.tsx index f58a43c34..7624a61aa 100644 --- a/src/components/@shared/AssetList/index.tsx +++ b/src/components/@shared/AssetList/index.tsx @@ -69,11 +69,13 @@ export default function AssetList({ const styleClasses = `${styles.assetList} ${className || ''}` - return assetsWithPrices && !loading ? ( + return loading ? ( + + ) : ( <>
- {assetsWithPrices.length > 0 ? ( - assetsWithPrices.map((assetWithPrice) => ( + {assetsWithPrices?.length > 0 ? ( + assetsWithPrices?.map((assetWithPrice) => ( )} - ) : ( - ) } diff --git a/src/components/@shared/atoms/Tags/index.test.tsx b/src/components/@shared/atoms/Tags/index.test.tsx index 5867e96ad..71b253315 100644 --- a/src/components/@shared/atoms/Tags/index.test.tsx +++ b/src/components/@shared/atoms/Tags/index.test.tsx @@ -24,4 +24,9 @@ describe('Tags', () => { it('renders WithoutLinks', () => { render() }) + + it('renders with faulty tags', () => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + render() + }) }) diff --git a/src/components/@shared/atoms/Tags/index.tsx b/src/components/@shared/atoms/Tags/index.tsx index 1f5c70943..2922417c5 100644 --- a/src/components/@shared/atoms/Tags/index.tsx +++ b/src/components/@shared/atoms/Tags/index.tsx @@ -30,6 +30,9 @@ export default function Tags({ className, noLinks }: TagsProps): ReactElement { + // safeguard against faults in the metadata + if (!(items instanceof Array)) return null + max = max || items.length const remainder = items.length - max // filter out empty array items, and restrict to `max` diff --git a/src/components/Asset/AssetContent/Nft/NftTooltip.module.css b/src/components/Asset/AssetContent/Nft/NftTooltip.module.css index 3916afc25..1b7b73c38 100644 --- a/src/components/Asset/AssetContent/Nft/NftTooltip.module.css +++ b/src/components/Asset/AssetContent/Nft/NftTooltip.module.css @@ -7,7 +7,7 @@ .wrapper img { margin: 0; width: 128px; - height: 128px; + height: auto; } .info { diff --git a/src/components/Asset/AssetContent/Nft/NftTooltip.tsx b/src/components/Asset/AssetContent/Nft/NftTooltip.tsx index 3a13868b0..9290bd9fd 100644 --- a/src/components/Asset/AssetContent/Nft/NftTooltip.tsx +++ b/src/components/Asset/AssetContent/Nft/NftTooltip.tsx @@ -14,11 +14,13 @@ const openSeaTestNetworks = [4] export default function NftTooltip({ nft, + nftImage, address, chainId, isBlockscoutExplorer }: { nft: NftMetadata + nftImage: string address: string chainId: number isBlockscoutExplorer: boolean @@ -39,7 +41,7 @@ export default function NftTooltip({ return (
- {nft && {nft?.name}} + {nftImage && {nft?.name}}
{nft &&
{nft.name}
} {address && ( diff --git a/src/components/Asset/AssetContent/Nft/index.module.css b/src/components/Asset/AssetContent/Nft/index.module.css index 4c6e3850c..eb54b9cd1 100644 --- a/src/components/Asset/AssetContent/Nft/index.module.css +++ b/src/components/Asset/AssetContent/Nft/index.module.css @@ -4,14 +4,19 @@ border-right: 1px solid var(--border-color); width: calc(var(--spacer) * 2); height: calc(var(--spacer) * 2); + display: flex; + align-items: center; } -.nftImage img, .nftImage > svg:first-of-type { width: 100%; height: 100%; } +.nftImage img { + height: auto; +} + .nftImage > svg:first-of-type { transform: scale(0.7); } diff --git a/src/components/Asset/AssetContent/Nft/index.tsx b/src/components/Asset/AssetContent/Nft/index.tsx index f741c6eaf..7f063bd75 100644 --- a/src/components/Asset/AssetContent/Nft/index.tsx +++ b/src/components/Asset/AssetContent/Nft/index.tsx @@ -48,6 +48,7 @@ export default function Nft({ content={