feat: add artworks page

packages/metavinci/src/hooks/useArt.ts

@@ -2,6 +2,17 @@ import React, { useMemo } from 'react';
 import { PublicKey } from '@solana/web3.js';
 import { useMeta } from '../contexts';
 import { Art } from '../types';
+import { Metadata } from '@oyster/common';
+
+export const metadataToArt = (info: Metadata | undefined) => {
+  return {
+    image: info?.extended?.image,
+    category: info?.extended?.category,
+    title: info?.name,
+    about: info?.extended?.description,
+    royalties: info?.extended?.royalty,
+  } as Art;
+};
 
 export const useArt = (id: PublicKey | string) => {
   const { metadata } = useMeta();
@@ -12,11 +23,5 @@ export const useArt = (id: PublicKey | string) => {
     [key, metadata],
   );
 
-  return {
-    image: account?.info.extended?.image,
-    category: account?.info.extended?.category,
-    title: account?.info.name,
-    about: account?.info.extended?.description,
-    royalties: account?.info.extended?.royalty,
-  } as Art;
+  return metadataToArt(account?.info);
 };

packages/metavinci/src/views/artworks/index.tsx

@@ -1,12 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ArtCard } from '../../components/ArtCard';
-import { Row, Col } from 'antd';
+import { Layout, Row, Col, Tabs } from 'antd';
 import Masonry from 'react-masonry-css';
 import { Link } from 'react-router-dom';
 import { useUserArts } from '../../hooks';
+import { useMeta } from '../../contexts';
+
+const { TabPane } = Tabs;
+
+const { Content } = Layout;
+
+
+export enum ArtworkViewState {
+  Metaplex = '0',
+  Owned = '1',
+  Created = '2',
+}
 
 export const ArtworksView = () => {
   const ownedMetadata = useUserArts();
+  const { metadata } = useMeta();
+  const [activeKey, setActiveKey] = useState(ArtworkViewState.Metaplex);
   const breakpointColumnsObj = {
     default: 4,
     1100: 3,
@@ -14,43 +28,61 @@ export const ArtworksView = () => {
     500: 1,
   };
 
+  const items = activeKey === ArtworkViewState.Metaplex ? metadata : ownedMetadata.map(m => m.metadata);
+
+  const artworkGrid = <Masonry
+      breakpointCols={breakpointColumnsObj}
+      className="my-masonry-grid"
+      columnClassName="my-masonry-grid_column"
+    >
+      {items.map(m => {
+        const id = m.pubkey.toBase58();
+        return (
+          <Link to={`/art/${id}`}>
+            <ArtCard
+              key={id}
+              image={m.info.extended?.image}
+              category={m.info.extended?.category}
+              name={m.info?.name}
+              symbol={m.info.symbol}
+              preview={false}
+            />
+          </Link>
+        );
+      })}
+    </Masonry>;
+
   return (
-    <div className="flexColumn" style={{ flex: 1 }}>
-      <Col>
-        <Row
-          style={{
-            marginBottom: 30,
-            marginTop: 20,
-            fontSize: 20,
-            fontWeight: 600,
-          }}
-        >
-          Owned
-        </Row>
-        <Row>
-          <Masonry
-            breakpointCols={breakpointColumnsObj}
-            className="my-masonry-grid"
-            columnClassName="my-masonry-grid_column"
-          >
-            {ownedMetadata.map(m => {
-              const id = m.metadata.pubkey.toBase58();
-              return (
-                <Link to={`/art/${id}`}>
-                  <ArtCard
-                    key={id}
-                    image={m.metadata.info.extended?.image}
-                    category={m.metadata.info.extended?.category}
-                    name={m.metadata.info?.name}
-                    symbol={m.metadata.info.symbol}
-                    preview={false}
-                  />
-                </Link>
-              );
-            })}
-          </Masonry>
-        </Row>
-      </Col>
-    </div>
+    <Layout style={{ margin: 0, marginTop: 30 }}>
+      <Content style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <Col style={{ width: '100%', marginTop: 10 }}>
+          <Row>
+            <Tabs
+              activeKey={activeKey}
+              onTabClick={key => setActiveKey(key as ArtworkViewState)}
+            >
+              <TabPane
+                tab={<span className="tab-title">All</span>}
+                key={ArtworkViewState.Metaplex}
+              >
+                {artworkGrid}
+              </TabPane>
+              <TabPane
+                tab={<span className="tab-title">Created</span>}
+                key={ArtworkViewState.Created}
+              >
+                {artworkGrid}
+              </TabPane>
+              <TabPane
+                tab={<span className="tab-title">Owned</span>}
+                key={ArtworkViewState.Owned}
+              >
+                {artworkGrid}
+              </TabPane>
+            </Tabs>
+          </Row>
+        </Col>
+      </Content>
+    </Layout>
   );
 };

packages/metavinci/src/views/auction/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import { Row, Col, Divider, Layout, Image, Spin } from 'antd';
 import { AuctionCard } from '../../components/AuctionCard';
-import { useArt, useAuction } from '../../hooks';
+import { metadataToArt, useArt, useAuction } from '../../hooks';
 import { ArtContent } from '../../components/ArtContent';
 import { sampleArtist } from '../home/sampleData';
 
@@ -11,7 +11,7 @@ const { Content } = Layout;
 export const AuctionView = () => {
   const { id } = useParams<{ id: string }>();
   const auction = useAuction(id);
-  const art = useArt(auction?.openEditionItem?.metadata.pubkey.toBase58() as string);
+  const art = useArt(auction?.thumbnail.metadata.pubkey.toBase58() as string);
   const artist = sampleArtist;
 
   return (