Distinguish between an auction and an artwork labeling because it may be confusing.

This commit is contained in:
Jordan Prince 2021-05-01 18:29:18 -05:00
parent 476fde8c4a
commit 9db1b71a9e
3 changed files with 50 additions and 10 deletions

View File

@ -7,6 +7,7 @@ import { getCountdown } from '../../utils/utils';
import { useArt } from '../../hooks'; import { useArt } from '../../hooks';
import { PublicKey } from '@solana/web3.js'; import { PublicKey } from '@solana/web3.js';
import { ArtType } from '../../types'; import { ArtType } from '../../types';
import { EditionType } from '../../models/metaplex';
const { Meta } = Card; const { Meta } = Card;
@ -21,6 +22,7 @@ export interface ArtCardProps extends CardProps {
preview?: boolean; preview?: boolean;
small?: boolean; small?: boolean;
close?: () => void; close?: () => void;
editionType?: EditionType;
endAuctionAt?: number; endAuctionAt?: number;
} }
@ -37,6 +39,7 @@ export const ArtCard = (props: ArtCardProps) => {
close, close,
pubkey, pubkey,
endAuctionAt, endAuctionAt,
editionType,
...rest ...rest
} = props; } = props;
const art = useArt(pubkey); const art = useArt(pubkey);
@ -94,10 +97,12 @@ export const ArtCard = (props: ArtCardProps) => {
{art.type == ArtType.LimitedMasterEdition && ( {art.type == ArtType.LimitedMasterEdition && (
<> <>
<br /> <br />
<span style={{ padding: '24px' }}> {!endAuctionAt && (
{(art.maxSupply || 0) - (art.supply || 0)}/ <span style={{ padding: '24px' }}>
{art.maxSupply || 0} prints remaining {(art.maxSupply || 0) - (art.supply || 0)}/
</span> {art.maxSupply || 0} prints remaining
</span>
)}
</> </>
)} )}
{endAuctionAt && ( {endAuctionAt && (
@ -136,16 +141,42 @@ export const ArtCard = (props: ArtCardProps) => {
); );
} else if (art.type == ArtType.LimitedMasterEdition) { } else if (art.type == ArtType.LimitedMasterEdition) {
return ( return (
<div className="limited-master-record"> <div
<Badge.Ribbon text={`Limited Edition Master Record`}> className={
editionType == EditionType.LimitedEdition
? 'normal-record'
: 'limited-master-record'
}
>
<Badge.Ribbon
text={`Limited Edition ${
editionType == EditionType.LimitedEdition
? 'Printing'
: 'Master Record'
}`}
>
{card} {card}
</Badge.Ribbon> </Badge.Ribbon>
</div> </div>
); );
} else if (art.type == ArtType.OpenMasterEdition) { } else if (art.type == ArtType.OpenMasterEdition) {
return ( return (
<div className="open-master-record"> <div
<Badge.Ribbon text={`Open Edition Master Record`}>{card}</Badge.Ribbon> className={
editionType == EditionType.OpenEdition
? 'normal-record'
: 'open-master-record'
}
>
<Badge.Ribbon
text={`Open Edition ${
editionType == EditionType.OpenEdition
? 'Printing'
: 'Master Record'
}`}
>
{card}
</Badge.Ribbon>
</div> </div>
); );
} else return card; } else return card;

View File

@ -282,7 +282,7 @@ export function processAccountsIntoAuctionView(
metadataByMint[ metadataByMint[
boxes[ boxes[
auctionManager.info.settings.openEditionConfig auctionManager.info.settings.openEditionConfig
].info.tokenMint.toBase58() ]?.info.tokenMint.toBase58()
], ],
safetyDeposit: safetyDeposit:
boxes[auctionManager.info.settings.openEditionConfig], boxes[auctionManager.info.settings.openEditionConfig],
@ -291,7 +291,7 @@ export function processAccountsIntoAuctionView(
metadataByMint[ metadataByMint[
boxes[ boxes[
auctionManager.info.settings.openEditionConfig auctionManager.info.settings.openEditionConfig
].info.tokenMint.toBase58() ]?.info.tokenMint.toBase58()
]?.info.masterEdition?.toBase58() || '' ]?.info.masterEdition?.toBase58() || ''
], ],
} }

View File

@ -8,6 +8,7 @@ import { AuctionViewState, useArt, useAuctions } from '../../hooks';
import './index.less'; import './index.less';
import { ArtCard } from '../../components/ArtCard'; import { ArtCard } from '../../components/ArtCard';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { EditionType } from '../../models/metaplex';
const { TabPane } = Tabs; const { TabPane } = Tabs;
@ -30,12 +31,20 @@ export const HomeView = () => {
> >
{auctions.map(m => { {auctions.map(m => {
const id = m.auction.pubkey.toBase58(); const id = m.auction.pubkey.toBase58();
const winningConfig = m.auctionManager.info.settings.winningConfigs.find(
w => w.safetyDepositBoxIndex == m.thumbnail.safetyDeposit.info.order,
);
return ( return (
<Link to={`/auction/${id}`}> <Link to={`/auction/${id}`}>
<ArtCard <ArtCard
key={id} key={id}
endAuctionAt={m.auction.info.endAuctionAt?.toNumber()} endAuctionAt={m.auction.info.endAuctionAt?.toNumber()}
pubkey={m.thumbnail.metadata.pubkey} pubkey={m.thumbnail.metadata.pubkey}
editionType={
winningConfig
? winningConfig.editionType
: EditionType.OpenEdition
}
preview={false} preview={false}
/> />
</Link> </Link>