feat: query for metadata/image

packages/common/src/contexts/connection.tsx

@@ -480,7 +480,7 @@ export async function sendSignedTransaction({
       connection.sendRawTransaction(rawTransaction, {
         skipPreflight: true,
       });
-      await sleep(300);
+      await sleep(500);
     }
   })();
   try {
@@ -632,7 +632,7 @@ async function awaitTransactionSignatureConfirmation(
             }
           }
         })();
-        await sleep(1000);
+        await sleep(2000);
       }
     })();
   })

packages/metavinci/src/components/ArtCard/index.tsx

@@ -3,10 +3,13 @@ import { Card, Avatar, CardProps, Button } from 'antd';
 import { MetadataCategory } from '@oyster/common';
 import { ArtContent } from './../ArtContent';
 import './index.less';
+import { useArt } from '../../hooks';
+import { PublicKey } from '@solana/web3.js';
 
 const { Meta } = Card;
 
 export interface ArtCardProps extends CardProps {
+  pubkey?: PublicKey;
   image?: string;
   category?: MetadataCategory
   name?: string;
@@ -19,7 +22,15 @@ export interface ArtCardProps extends CardProps {
 }
 
 export const ArtCard = (props: ArtCardProps) => {
-  const { className, small, category, image, name, preview, artist, close, ...rest } = props;
+  let { className, small, category, image, name, preview, artist, description, close, pubkey, ...rest } = props;
+  const art = useArt(pubkey);
+
+  category = art?.category || category;
+  image = art?.image || image;
+  name = art?.title || name || '';
+  artist = art?.artist || artist;
+  description = art?.about || description;
+
   return (
     <Card
       hoverable={true}
@@ -28,7 +39,7 @@ export const ArtCard = (props: ArtCardProps) => {
           {close && <Button className="card-close-button" shape="circle" onClick={(e) => {
             e.stopPropagation();
             e.preventDefault();
-            close();
+            close && close();
           }} >X</Button>}
           <ArtContent category={category} content={image} preview={preview} />
         </>}

packages/metavinci/src/contexts/meta.tsx

@@ -528,42 +528,11 @@ const queryExtendedMetadata = async (
     } else {
       const metadata = mintToMetadata[key];
 
-      if (metadata && metadata.info.uri) {
-        extendedMetadataFetch.set(
-          key,
-          fetch(metadata.info.uri, { cache: "force-cache" })
-            .then(async _ => {
-              try {
-                metadata.info.extended = await _.json();
-                if (
-                  !metadata.info.extended ||
-                  metadata.info.extended?.files?.length === 0
-                ) {
-                  delete mintToMetadata[key];
-                } else {
-                  if (metadata.info.extended?.image) {
-                    const file = `${metadata.info.uri}/${metadata.info.extended.image}`;
-                    metadata.info.extended.image = file;
-                    fetch(file, { cache: "force-cache" })
-                      .then(res => res.blob())
-                      .then(blob => metadata.info.extended && (metadata.info.extended.image = URL.createObjectURL(blob)));
-                  }
-                }
-              } catch {
-                delete mintToMetadata[key];
-                return undefined;
-              }
-            })
-            .catch(() => {
-              delete mintToMetadata[key];
-              return undefined;
-            }),
-        );
-      }
+
     }
   });
 
-  await Promise.all([...extendedMetadataFetch.values()]);
+  // await Promise.all([...extendedMetadataFetch.values()]);
 
   setMetadata([...Object.values(mintToMetadata)]);
   setMetadataByMint(mintToMetadata);

packages/metavinci/src/hooks/useArt.ts

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { PublicKey } from '@solana/web3.js';
 import { useMeta } from '../contexts';
 import { Art } from '../types';
@@ -14,7 +14,7 @@ export const metadataToArt = (info: Metadata | undefined) => {
   } as Art;
 };
 
-export const useArt = (id: PublicKey | string) => {
+export const useArt = (id?: PublicKey | string) => {
   const { metadata } = useMeta();
 
   const key = typeof id === 'string' ? id : id?.toBase58() || '';
@@ -23,5 +23,43 @@ export const useArt = (id: PublicKey | string) => {
     [key, metadata],
   );
 
-  return metadataToArt(account?.info);
+  const [art, setArt] = useState(metadataToArt(account?.info));
+
+  useEffect(() => {
+    if (account && account.info.uri && !account.info.extended) {
+      fetch(account.info.uri, { cache: 'force-cache' })
+        .then(async _ => {
+          try {
+            account.info.extended = await _.json();
+            if (
+              !account.info.extended ||
+              account.info.extended?.files?.length === 0
+            ) {
+              return;
+            }
+
+            if (account.info.extended?.image) {
+              const file = `${account.info.uri}/${account.info.extended.image}`;
+              account.info.extended.image = file;
+              await fetch(file, { cache: 'force-cache' })
+                .then(res => res.blob())
+                .then(
+                  blob =>
+                    account.info.extended &&
+                    (account.info.extended.image = URL.createObjectURL(blob)),
+                );
+
+              setArt(metadataToArt(account?.info));
+            }
+          } catch {
+            return undefined;
+          }
+        })
+        .catch(() => {
+          return undefined;
+        });
+    }
+  }, [account, setArt, metadata]);
+
+  return art;
 };

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

@@ -14,7 +14,7 @@ const { Content } = Layout
 export const ArtView = () => {
   const { id } = useParams<{ id: string }>();
 
-  const art: Art = useArt(id);
+  const art = useArt(id);
   // const artist: Artist = getArtist(art.artist_id)
   // const presale: Presale = getPresale(art.presale_id)
   const artist: Artist = sampleArtist

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

@@ -41,10 +41,7 @@ export const ArtworksView = () => {
           <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}
+              pubkey={m.pubkey}
               preview={false}
             />
           </Link>

packages/metavinci/src/views/auctionCreate/artSelector.tsx

@@ -3,7 +3,7 @@ import { Row, Button, Modal, ButtonProps } from 'antd';
 import { ArtCard } from './../../components/ArtCard';
 import './../styles.less';
 import { Metadata, ParsedAccount } from '@oyster/common';
-import { useUserArts } from '../../hooks';
+import { useArt, useUserArts } from '../../hooks';
 import Masonry from 'react-masonry-css';
 import { SafetyDepositDraft } from '../../actions/createAuctionManager';
 
@@ -59,18 +59,11 @@ export const ArtSelector = (props: ArtSelectorProps) => {
       >
         {selected.map(m => {
           let key = m?.metadata.pubkey.toBase58() || '';
-          let item = m?.metadata?.info;
-          if (!item) {
-            return;
-          }
 
           return (
             <ArtCard
               key={key}
-              image={item.extended?.image}
-              category={item.extended?.category}
-              name={item?.name}
-              symbol={item.symbol}
+              pubkey={m.metadata.pubkey}
               preview={false}
               onClick={open}
               close={() => {
@@ -139,10 +132,7 @@ export const ArtSelector = (props: ArtSelectorProps) => {
               return (
                 <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}
+                  pubkey={m.metadata.pubkey}
                   preview={false}
                   onClick={onSelect}
                   className={isSelected ? 'selected-card' : 'not-selected-card'}

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

@@ -1413,10 +1413,7 @@ const ReviewStep = (props: {
         <Col xl={12}>
           {item?.metadata.info && (
             <ArtCard
-              image={item.metadata.info.extended?.image}
-              category={item.metadata.info.extended?.category}
-              name={item.metadata.info.name}
-              symbol={item.metadata.info.symbol}
+              pubkey={item.metadata.pubkey}
               small={true}
             />
           )}

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

@@ -3,7 +3,7 @@ import { Layout, Row, Col, Tabs } from 'antd';
 import Masonry from 'react-masonry-css';
 
 import { PreSaleBanner } from '../../components/PreSaleBanner';
-import { AuctionViewState, useAuctions } from '../../hooks';
+import { AuctionViewState, useArt, useAuctions } from '../../hooks';
 
 import './index.less';
 import { ArtCard } from '../../components/ArtCard';
@@ -34,11 +34,7 @@ export const HomeView = () => {
           <Link to={`/auction/${id}`}>
             <ArtCard
               key={id}
-              image={m.thumbnail.metadata.info.extended?.image}
-              category={m.thumbnail.metadata.info.extended?.category}
-              name={m.thumbnail.metadata?.info.name}
-              symbol={m.thumbnail.metadata?.info.symbol}
-              description={m.thumbnail.metadata?.info.extended?.description}
+              pubkey={m.thumbnail.metadata.pubkey}
               preview={false}
             />
           </Link>