Merge pull request #126 from sultanpeyek/fix/show-correct-edition

[FIX] Show correct edition on the art & auction page

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;
+}

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 = () => {
                 </div>
               </Col>
             </Row>
+            <Row>
+              <Col>
+                <h6 style={{ marginTop: 5 }}>Edition</h6>
+                <div className="art-edition">{badge}</div>
+              </Col>
+            </Row>
 
             {/* <Button
                   onClick={async () => {

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;
+}

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 = () => {
           <Row gutter={[50, 0]} style={{ marginRight: 'unset' }}>
             <Col>
               <h6>Edition</h6>
-              <p>{(auction?.items.length || 0) > 1 ? 'Multiple' : edition}</p>
+              {!auction && <Skeleton title={{ width: "100%" }} paragraph={{ rows: 0 }} />}
+              {auction && <p className="auction-art-edition">{(auction?.items.length || 0) > 1 ? 'Multiple' : edition}</p>}
             </Col>
 
             <Col>