diff --git a/js/packages/web/src/views/art/index.less b/js/packages/web/src/views/art/index.less index b07bdbd..22035cd 100644 --- a/js/packages/web/src/views/art/index.less +++ b/js/packages/web/src/views/art/index.less @@ -33,3 +33,9 @@ font-weight: 600; font-size: 1.3rem; } + +.art-edition { + font-weight: 600; + font-size: 1.3rem; + color: #fff; +} diff --git a/js/packages/web/src/views/art/index.tsx b/js/packages/web/src/views/art/index.tsx index 03211cd..556a7bc 100644 --- a/js/packages/web/src/views/art/index.tsx +++ b/js/packages/web/src/views/art/index.tsx @@ -10,6 +10,7 @@ import { MetaAvatar } from '../../components/MetaAvatar'; import { sendSignMetadata } from '../../actions/sendSignMetadata'; import { PublicKey } from '@solana/web3.js'; import { ViewOn } from './../../components/ViewOn'; +import { ArtType } from '../../types'; const { Content } = Layout; @@ -19,6 +20,14 @@ export const ArtView = () => { const connection = useConnection(); const art = useArt(id); + let badge = ''; + if (art.type === ArtType.NFT) { + badge = 'Unique'; + } else if (art.type === ArtType.Master) { + badge = 'NFT 0'; + } else if (art.type === ArtType.Print) { + badge = `${art.edition} of ${art.supply}`; + } const { ref, data } = useExtendedArt(id); // const { userAccounts } = useUserAccounts(); @@ -133,6 +142,12 @@ export const ArtView = () => { + + + Edition + {badge} + + {/* { diff --git a/js/packages/web/src/views/auction/index.less b/js/packages/web/src/views/auction/index.less index d8a065d..c2b3141 100644 --- a/js/packages/web/src/views/auction/index.less +++ b/js/packages/web/src/views/auction/index.less @@ -78,3 +78,9 @@ h6 { .ant-carousel { padding-bottom: 16px; } + +.auction-art-edition { + font-weight: 600; + font-size: 1.3rem; + color: #fff; +} diff --git a/js/packages/web/src/views/auction/index.tsx b/js/packages/web/src/views/auction/index.tsx index bbf7b92..f7f91c6 100644 --- a/js/packages/web/src/views/auction/index.tsx +++ b/js/packages/web/src/views/auction/index.tsx @@ -29,6 +29,7 @@ import { MintInfo } from '@solana/spl-token'; import useWindowDimensions from '../../utils/layout'; import { CheckOutlined } from '@ant-design/icons'; import { useMemo } from 'react'; +import { ArtType } from '../../types'; export const AuctionItem = ({ item, @@ -77,7 +78,14 @@ export const AuctionView = () => { const art = useArt(auction?.thumbnail.metadata.pubkey); const { ref, data } = useExtendedArt(auction?.thumbnail.metadata.pubkey); const creators = useCreators(auction); - const edition = '1 of 1'; + let edition = '' + if (art.type === ArtType.NFT) { + edition = 'Unique'; + } else if (art.type === ArtType.Master) { + edition = 'NFT 0'; + } else if (art.type === ArtType.Print) { + edition = `${art.edition} of ${art.supply}`; + } const nftCount = auction?.items.flat().length; const winnerCount = auction?.items.length; @@ -149,7 +157,8 @@ export const AuctionView = () => { Edition - {(auction?.items.length || 0) > 1 ? 'Multiple' : edition} + {!auction && } + {auction && {(auction?.items.length || 0) > 1 ? 'Multiple' : edition}}
{(auction?.items.length || 0) > 1 ? 'Multiple' : edition}