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 &&
}
+ {nftImage &&
}
{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={