Metaplex: fixes (#94)

* artselector for tiered auction

* useArt id

* modal size, scroll body

* format go live ts

* fix progress circle

* hide steps when publishing

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

@@ -11,7 +11,7 @@ const { Content } = Layout;
 export const AuctionView = () => {
   const { id } = useParams<{ id: string }>();
   const auction = useAuction(id);
-  const art = useArt(id);
+  const art = useArt(auction?.openEditionItem?.metadata.pubkey.toBase58() as string);
   const artist = sampleArtist;
 
   return (

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

@@ -97,7 +97,7 @@ export const ArtSelector = (props: ArtSelectorProps) => {
         visible={visible}
         onCancel={close}
         onOk={confirm}
-        width="100"
+        width={1100}
         footer={null}
       >
         <Row className="call-to-action" style={{ marginBottom: 0 }}>
@@ -106,7 +106,7 @@ export const ArtSelector = (props: ArtSelectorProps) => {
             Select the NFT that you want to sell copy/copies of.
           </p>
         </Row>
-        <Row className="content-action">
+        <Row className="content-action" style={{ overflowY: 'scroll', height: "50vh" }}>
           <Masonry
             breakpointCols={breakpointColumnsObj}
             className="my-masonry-grid"

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

@@ -128,7 +128,6 @@ export const AuctionCreateView = () => {
 
   const [step, setStep] = useState<number>(0);
   const [saving, setSaving] = useState<boolean>(false);
-  const [progress, setProgress] = useState<number>(0);
   const [attributes, setAttributes] = useState<AuctionState>({
     reservationPrice: 0,
     items: [],
@@ -300,7 +299,10 @@ export const AuctionCreateView = () => {
   const reviewStep = (
     <ReviewStep
       attributes={attributes}
-      confirm={() => gotoNextStep()}
+      confirm={() => {
+        setSaving(true)
+        gotoNextStep()
+      }}
       connection={connection}
     />
   );
@@ -308,7 +310,6 @@ export const AuctionCreateView = () => {
   const waitStep = (
     <WaitingStep
       createAuction={createAuction}
-      progress={progress}
       confirm={() => gotoNextStep()}
     />
   );
@@ -687,7 +688,11 @@ const TierWinners = (props: {
         />
       </label>
 
-      <ArtSelector selected={[]} setSelected={_ => {}} allowMultiple={true} />
+      <ArtSelector
+        selected={props.tier.items}
+        setSelected={items => props.setTier({ ...props.tier, items })}
+        allowMultiple={true}
+      />
     </>
   );
 };
@@ -1446,7 +1451,7 @@ const ReviewStep = (props: {
           <Statistic
             className="create-statistic"
             title="Listing go live date"
-            value={props.attributes.startListTS}
+            value={moment.unix((props.attributes.startListTS as number) / 1000).format("dddd, MMMM Do YYYY, h:mm a")}
           />
         )}
         <Divider />
@@ -1474,12 +1479,15 @@ const ReviewStep = (props: {
 
 const WaitingStep = (props: {
   createAuction: () => Promise<void>;
-  progress: number;
   confirm: () => void;
 }) => {
+  const [progress, setProgress] = useState<number>(0);
+
   useEffect(() => {
     const func = async () => {
+      const inte = setInterval(() => setProgress(prog => prog + 1), 600);
       await props.createAuction();
+      clearInterval(inte);
       props.confirm();
     };
     func();
@@ -1487,7 +1495,7 @@ const WaitingStep = (props: {
 
   return (
     <div style={{ marginTop: 70 }}>
-      <Progress type="circle" percent={props.progress} />
+      <Progress type="circle" percent={progress} />
       <div className="waiting-title">
         Your creation is being listed with Metaplex...
       </div>