feat: metadata

packages/metavinci/src/hooks/useArt.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { PublicKey } from '@solana/web3.js';
 import { useMeta } from './../contexts';
+import { Art } from '../types';
 
 export const useArt = (id: PublicKey | string) => {
   const { metadata } = useMeta();
@@ -8,5 +9,11 @@ export const useArt = (id: PublicKey | string) => {
   const key = typeof id === 'string' ? id : (id?.toBase58() || '');
   const account = useMemo(() => metadata.find(a => a.pubkey.toBase58() === key), [key, metadata]);
 
-  return account;
+  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;
 }

packages/metavinci/src/types/index.ts

@@ -1,38 +1,40 @@
+import { MetadataCategory } from '@oyster/common';
 
 export interface Auction {
-  name: string,
-  auctionerName: string,
-  auctionerLink: string,
-  highestBid: number,
-  solAmt: number,
-  link: string,
-  image: string,
+  name: string;
+  auctionerName: string;
+  auctionerLink: string;
+  highestBid: number;
+  solAmt: number;
+  link: string;
+  image: string;
 }
 
 export interface Artist {
-  name: string,
-  link: string,
-  image: string,
-  itemsAvailable?: number,
-  itemsSold?: number,
-  about?: string,
+  name: string;
+  link: string;
+  image: string;
+  itemsAvailable?: number;
+  itemsSold?: number;
+  about?: string;
 }
 
 export interface Art {
-  image: string,
-  link: string,
-  title: string,
-  artist: string,
-  priceSOL: number,
-  priceUSD?: number,
-  endingTS?: number,
-  royalties?: number,
-  about?: string,
+  image: string;
+  category: MetadataCategory;
+  link: string;
+  title: string;
+  artist: string;
+  priceSOL: number;
+  priceUSD?: number;
+  endingTS?: number;
+  royalties?: number;
+  about?: string;
 }
 
 export interface Presale {
-  endingTS: number,
-  targetPricePerShare?: number,
-  pricePerShare?: number,
-  marketCap?: number,
+  endingTS: number;
+  targetPricePerShare?: number;
+  pricePerShare?: number;
+  marketCap?: number;
 }

packages/metavinci/src/views/art/index.less

@@ -4,6 +4,7 @@
   width: 70%;
   max-width: 500px;
   border-radius: 10px;
+  overflow: hidden;
 }
 
 .artist-image {

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

@@ -1,25 +1,23 @@
 import React, { useEffect, useState } from 'react';
-import { Row, Col, Divider, Layout } from 'antd';
+import { Row, Col, Divider, Layout, Image } from 'antd';
 import { useParams } from 'react-router-dom';
-// import { useArt } from './../../hooks';
+import { useArt } from './../../hooks';
 
 import "./index.less"
 import { Art, Artist, Presale } from '../../types';
-import { sampleArt, sampleArtist, samplePresale } from '../home/sampleData';
+import { sampleArtist, samplePresale } from '../home/sampleData';
 import { PreSaleCard } from '../../components/PresaleCard';
 import { useMeta } from '../../contexts';
+import { argv } from 'node:process';
 
 const { Content } = Layout
 
 export const ArtView = () => {
   const { id } = useParams<{ id: string }>();
-  const { metadata } = useMeta();
-  let meta = metadata.find(m => m.pubkey.toBase58() === id);
-  
-  // const art: Art = useArt(id);
+
+  const art: Art = useArt(id);
   // const artist: Artist = getArtist(art.artist_id)
   // const presale: Presale = getPresale(art.presale_id)
-  const art: Art = sampleArt
   const artist: Artist = sampleArtist
   const presale: Presale = samplePresale
 
@@ -27,7 +25,9 @@ export const ArtView = () => {
     <Content>
       <Col>
         <Row>
-          <img src={art.image} className="artwork-image" />
+          {art.category === 'video' ?
+            <video src={art.image} className="artwork-image" playsInline={true} autoPlay={true} controlsList="nodownload" loop={true} /> :
+            <Image src={art.image} wrapperClassName="artwork-image" />}
         </Row>
         <Divider />
         <Row style={{ margin: '0 30px', textAlign: 'left', fontSize: '1.4rem' }}>

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

@@ -5,11 +5,11 @@ import Masonry from 'react-masonry-css'
 import { Art } from '../../types'
 import { PreSaleBanner } from '../../components/PreSaleBanner'
 import { ItemCard } from '../../components/ItemCard'
-import { sampleArts } from './sampleData'
 import { useMeta } from '../../contexts/meta'
 
 import './index.less'
 import { ArtCard } from '../../components/ArtCard'
+import { Link } from 'react-router-dom'
 
 const { Content } = Layout
 
@@ -17,7 +17,6 @@ const { Content } = Layout
 export const HomeView = () => {
   // TODO: fetch real data
   const { metadata } = useMeta()
-  const arts: Array<Art> = sampleArts
 
   const breakpointColumnsObj = {
     default: 4,
@@ -38,7 +37,6 @@ export const HomeView = () => {
         <Content style={{ display: 'flex', flexWrap: 'wrap' }}>
           <Col>
             <Row style={{ marginBottom: 30, marginTop: 20, fontSize: 20, fontWeight: 600 }}>Featured</Row>
-
             <Row>
               <Masonry
                 breakpointCols={breakpointColumnsObj}
@@ -46,15 +44,17 @@ export const HomeView = () => {
                 columnClassName="my-masonry-grid_column"
               >
               {metadata.map(m => {
-                return <ArtCard key={m.pubkey.toBase58()}
-                  image={m.info.extended?.image}
-                  name={m.info?.name}
-                  symbol={m.info.symbol}
-                  preview={false} />
+                const id = m.pubkey.toBase58();
+                return <Link to={`/art/${id}`}>
+                  <ArtCard key={id}
+                    image={m.info.extended?.image}
+                    name={m.info?.name}
+                    symbol={m.info.symbol}
+                    preview={false} />
+                  </Link>
               })}
               </Masonry>
             </Row>
-
           </Col>
         </Content>
       </Layout>

packages/metavinci/src/views/home/sampleData.ts

@@ -99,140 +99,17 @@ export const sampleArtists: Array<Artist> = [
   },
 ];
 
-export const sampleArts: Array<Art> = [
-  {
-    image: 'img/auction1.jpg',
-    link: '/art/1234abcd',
-    title: 'Cryptokitty #4823923',
-    artist: 'cryptokitties',
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-  {
-    image: "http://localhost:3000/img/auction4.jpg",
-    link: "/art/1234abcd",
-    title: "ONE #1/1",
-    artist: "RAC",
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-  {
-    image: "http://localhost:3000/img/auction1.jpg",
-    link: "/art/1234abcd",
-    title: "Cryptokitty #4823923",
-    artist: "cryptokitties",
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-  {
-    image: "http://localhost:3000/img/auction2.jpg",
-    link: "/art/1234abcd",
-    title: "Here Comes Trouble",
-    artist: "artworkwizard",
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-  {
-    image: "http://localhost:3000/img/auction3.jpg",
-    link: "/art/1234abcd",
-    title: "“ALL-DEAD” CHUCK 70s",
-    artist: "NFTSNEAKERS",
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-  {
-    image: "http://localhost:3000/img/auction3.jpg",
-    link: "/art/1234abcd",
-    title: "“ALL-DEAD” CHUCK 70s",
-    artist: "NFTSNEAKERS",
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-  {
-    image: 'img/auction2.jpg',
-    link: '/art/1234abcd',
-    title: 'Here Comes Trouble',
-    artist: 'artworkwizard',
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-  {
-    image: 'img/auction3.jpg',
-    link: '/art/1234abcd',
-    title: '“ALL-DEAD” CHUCK 70s',
-    artist: 'NFTSNEAKERS',
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-  {
-    image: 'img/auction4.jpg',
-    link: '/art/1234abcd',
-    title: 'ONE #1/1',
-    artist: 'RAC',
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-  {
-    image: "http://localhost:3000/img/auction4.jpg",
-    link: "/art/1234abcd",
-    title: "ONE #1/1",
-    artist: "RAC",
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-  {
-    image: "http://localhost:3000/img/auction1.jpg",
-    link: "/art/1234abcd",
-    title: "Cryptokitty #4823923",
-    artist: "cryptokitties",
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-  {
-    image: "http://localhost:3000/img/auction2.jpg",
-    link: "/art/1234abcd",
-    title: "Here Comes Trouble",
-    artist: "artworkwizard",
-    priceSOL: 1.1,
-    priceUSD: 24,
-    endingTS: 1617680325000,
-  },
-]
-
-export const sampleArt: Art = {
-  image: 'img/auction3.jpg',
-  link: '/art/1234abcd',
-  title: 'nostalgic vibes',
-  artist: 'nftartist',
-  priceSOL: 1.1,
-  priceUSD: 24,
-  endingTS: 1617680325000,
-
-  royalties: 20,
-  about: "Series of three works by Mssingno & Natalia Stuyk 'Mirada' mp4, 30fps, 1080px x 1350px April 2021",
-}
-
 export const sampleArtist: Artist = {
   name: 'Yuzu415',
   link: '/artist/1234abcd',
   image: '/img/artist3.jpeg',
-  about: "NFTARTIST is an Artist & Director working in entertainment for the past 15 years. Experience in film, commercial and live events, his work serves as a means to visual and methodological study.",
-}
+  about:
+    'NFTARTIST is an Artist & Director working in entertainment for the past 15 years. Experience in film, commercial and live events, his work serves as a means to visual and methodological study.',
+};
 
 export const samplePresale: Presale = {
   endingTS: 1618447663000,
   targetPricePerShare: 5,
   pricePerShare: 4.39,
   marketCap: 328,
-}
+};

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

@@ -4,6 +4,7 @@ import { ArtCard } from '../../components/ArtCard';
 import { useMeta } from '../../contexts';
 import { Row, Col } from 'antd';
 import Masonry from 'react-masonry-css'
+import { Link } from 'react-router-dom';
 
 export const UserView = () => {
   const { metadata } = useMeta();
@@ -32,7 +33,14 @@ export const UserView = () => {
             columnClassName="my-masonry-grid_column"
           >
             {ownedMetadata.map(m => {
-              return <ArtCard image={m.info.extended?.image} name={m.info?.name} symbol={m.info.symbol} />
+              const id = m.pubkey.toBase58();
+              return <Link to={`/art/${id}`}>
+                <ArtCard key={id}
+                  image={m.info.extended?.image}
+                  name={m.info?.name}
+                  symbol={m.info.symbol}
+                  preview={false} />
+                </Link>
             })}
           </Masonry>
         </Row>