diff --git a/app/address/[address]/layout.tsx b/app/address/[address]/layout.tsx index d6b1030a..3f44dbe6 100644 --- a/app/address/[address]/layout.tsx +++ b/app/address/[address]/layout.tsx @@ -249,12 +249,12 @@ function AccountHeader({ address, account, tokenInfo, isTokenInfoLoading }: { ad let unverified = false; // Fall back to legacy token list when there is stub metadata (blank uri), updatable by default by the mint authority - if (!parsedData?.nftData?.metadata.data.uri && tokenInfo) { + if (!parsedData?.nftData?.metadata.uri && tokenInfo) { token = tokenInfo; } else if (parsedData?.nftData) { token = { logoURI: parsedData?.nftData?.json?.image, - name: parsedData?.nftData?.json?.name ?? parsedData?.nftData.metadata.data.name, + name: parsedData?.nftData?.json?.name ?? parsedData?.nftData.metadata.name, }; if (!tokenInfo?.verified) { unverified = true; diff --git a/app/components/account/MetaplexMetadataCard.tsx b/app/components/account/MetaplexMetadataCard.tsx index 1b0be0de..7ee9da7f 100644 --- a/app/components/account/MetaplexMetadataCard.tsx +++ b/app/components/account/MetaplexMetadataCard.tsx @@ -2,6 +2,8 @@ import { NFTData } from '@providers/accounts'; import ReactJson from 'react-json-view'; export function MetaplexMetadataCard({ nftData }: { nftData: NFTData }) { + // Here we grossly stringify and parse the metadata to avoid the bigints which ReactJsonView does not support. + const json = JSON.parse(JSON.stringify(nftData.metadata, (_, v) => typeof v === 'bigint' ? v.toString() : v)); return ( <>
@@ -14,7 +16,7 @@ export function MetaplexMetadataCard({ nftData }: { nftData: NFTData }) {
- +
diff --git a/app/components/account/MetaplexNFTAttributesCard.tsx b/app/components/account/MetaplexNFTAttributesCard.tsx index 4c70e783..98974576 100644 --- a/app/components/account/MetaplexNFTAttributesCard.tsx +++ b/app/components/account/MetaplexNFTAttributesCard.tsx @@ -14,7 +14,7 @@ export function MetaplexNFTAttributesCard({ nftData }: { nftData: NFTData }) { async function fetchMetadataAttributes() { try { - const response = await fetch(nftData.metadata.data.uri); + const response = await fetch(nftData.metadata.uri); const metadata = await response.json(); // Verify if the attributes value is an array diff --git a/app/components/account/MetaplexNFTHeader.tsx b/app/components/account/MetaplexNFTHeader.tsx index c1e8e27b..2e97112f 100644 --- a/app/components/account/MetaplexNFTHeader.tsx +++ b/app/components/account/MetaplexNFTHeader.tsx @@ -1,6 +1,8 @@ import { InfoTooltip } from '@components/common/InfoTooltip'; import { ArtContent } from '@components/common/NFTArt'; -import { programs } from '@metaplex/js'; +import { Creator } from '@metaplex-foundation/mpl-token-metadata'; +import { isSome } from '@metaplex-foundation/umi'; +import * as Umi from '@metaplex-foundation/umi'; import { NFTData, useFetchAccountInfo, useMintAccountInfo } from '@providers/accounts'; import { EditionInfo } from '@providers/accounts/utils/getEditionInfo'; import { PublicKey } from '@solana/web3.js'; @@ -12,8 +14,13 @@ import useAsyncEffect from 'use-async-effect'; export function MetaplexNFTHeader({ nftData, address }: { nftData: NFTData; address: string }) { const collection = nftData.metadata.collection; - const collectionAddress = collection?.key; - const collectionMintInfo = useMintAccountInfo(collectionAddress); + let collectionAddress: Umi.PublicKey | null = null; + let verified = false; + if (collection && isSome(collection)) { + collectionAddress = collection.value.key; + verified = collection.value.verified; + } + const collectionMintInfo = useMintAccountInfo(collectionAddress?.toString()); const fetchAccountInfo = useFetchAccountInfo(); React.useEffect(() => { @@ -24,7 +31,7 @@ export function MetaplexNFTHeader({ nftData, address }: { nftData: NFTData; addr const metadata = nftData.metadata; const data = nftData.json; - const isVerifiedCollection = collection != null && collection?.verified && collectionMintInfo !== undefined; + const isVerifiedCollection = collection != null && verified && collectionMintInfo !== undefined; const dropdownRef = createRef(); useAsyncEffect( async isMounted => { @@ -53,13 +60,13 @@ export function MetaplexNFTHeader({ nftData, address }: { nftData: NFTData; addr {
Metaplex NFT
}

- {metadata.data.name !== '' ? metadata.data.name : 'No NFT name was found'} + {metadata.name !== '' ? metadata.name : 'No NFT name was found'}

{getEditionPill(nftData.editionInfo)} {isVerifiedCollection ? getVerifiedCollectionPill() : null}

- {metadata.data.symbol !== '' ? metadata.data.symbol : 'No Symbol was found'} + {metadata.symbol !== '' ? metadata.symbol : 'No Symbol was found'}

{getSaleTypePill(metadata.primarySaleHappened)}
{getIsMutablePill(metadata.isMutable)}
@@ -74,14 +81,13 @@ export function MetaplexNFTHeader({ nftData, address }: { nftData: NFTData; addr > Creators -
{getCreatorDropdownItems(metadata.data.creators)}
+
{getCreatorDropdownItems(isSome(metadata.creators) ? metadata.creators.value : [])}
); } -type Creator = programs.metadata.Creator; function getCreatorDropdownItems(creators: Creator[] | null) { const CreatorHeader = () => { const creatorTooltip = 'Verified creators signed the metadata associated with this NFT when it was created.'; @@ -143,13 +149,12 @@ function getEditionPill(editionInfo: EditionInfo) { return (
- {`${ - edition && masterEdition - ? `Edition ${edition.edition.toNumber()} / ${masterEdition.supply.toNumber()}` - : masterEdition + {`${edition && masterEdition + ? `Edition ${Number(edition.edition)} / ${Number(masterEdition.supply)}` + : masterEdition ? 'Master Edition' : 'No Master Edition Information' - }`} + }`}
); } @@ -162,9 +167,8 @@ function getSaleTypePill(hasPrimarySaleHappened: boolean) { return (
- {`${ - hasPrimarySaleHappened ? 'Secondary Market' : 'Primary Market' - }`} + {`${hasPrimarySaleHappened ? 'Secondary Market' : 'Primary Market' + }`}
); diff --git a/app/components/account/TokenAccountSection.tsx b/app/components/account/TokenAccountSection.tsx index b446e16f..e1868bfa 100644 --- a/app/components/account/TokenAccountSection.tsx +++ b/app/components/account/TokenAccountSection.tsx @@ -2,6 +2,7 @@ import { Address } from '@components/common/Address'; import { Copyable } from '@components/common/Copyable'; import { LoadingCard } from '@components/common/LoadingCard'; import { TableCardBody } from '@components/common/TableCardBody'; +import { isSome } from '@metaplex-foundation/umi'; import { Account, NFTData, TokenProgramData, useFetchAccountInfo } from '@providers/accounts'; import { TOKEN_2022_PROGRAM_ID } from '@providers/accounts/tokens'; import isMetaplexNFT from '@providers/accounts/utils/isMetaplexNFT'; @@ -198,8 +199,8 @@ function FungibleTokenMintAccountCard({ {tokenInfo ? 'Overview' : account.owner.toBase58() === TOKEN_2022_PROGRAM_ID.toBase58() - ? 'Token-2022 Mint' - : 'Token Mint'} + ? 'Token-2022 Mint' + : 'Token Mint'}