Partway through refactor

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

@@ -1,34 +1,33 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import {
-  Row,
-  Button,
-  Modal,
-  ButtonProps,
-} from 'antd';
+import { Row, Button, Modal, ButtonProps } from 'antd';
 import { ArtCard } from './../../components/ArtCard';
 import './../styles.less';
-import {
-  Metadata,
-  ParsedAccount,
-} from '@oyster/common';
+import { Metadata, ParsedAccount } from '@oyster/common';
 import { useUserArts } from '../../hooks';
 import Masonry from 'react-masonry-css';
+import { SafetyDepositDraft } from '../../actions/createAuctionManager';
 
 export interface ArtSelectorProps extends ButtonProps {
-  selected: ParsedAccount<Metadata>[];
-  setSelected: (selected: ParsedAccount<Metadata>[]) => void;
+  selected: SafetyDepositDraft[];
+  setSelected: (selected: SafetyDepositDraft[]) => void;
   allowMultiple: boolean;
 }
 
 export const ArtSelector = (props: ArtSelectorProps) => {
   const { selected, setSelected, allowMultiple, ...rest } = props;
   const items = useUserArts();
-  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set(props.selected.map(item => item.pubkey.toBase58())));
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(
+    new Set(props.selected.map(item => item.metadata.pubkey.toBase58())),
+  );
 
-  const map = useMemo(() => items.reduce((acc, item) => {
-    acc.set(item.pubkey.toBase58(), item.info);
-    return acc;
-  }, new Map<string, Metadata>()), [items]);
+  const map = useMemo(
+    () =>
+      items.reduce((acc, item) => {
+        acc.set(item.metadata.pubkey.toBase58(), item.metadata.info);
+        return acc;
+      }, new Map<string, Metadata>()),
+    [items],
+  );
 
   const [visible, setVisible] = useState(false);
 
@@ -47,16 +46,18 @@ export const ArtSelector = (props: ArtSelectorProps) => {
   };
 
   const confirm = () => {
-    let list = items.filter(item => selectedItems.has(item.pubkey.toBase58()))
+    let list = items.filter(item =>
+      selectedItems.has(item.metadata.pubkey.toBase58()),
+    );
     setSelected(list);
     close();
-  }
+  };
 
   const breakpointColumnsObj = {
     default: 4,
     1100: 3,
     700: 2,
-    500: 1
+    500: 1,
   };
 
   return (
@@ -72,26 +73,42 @@ export const ArtSelector = (props: ArtSelectorProps) => {
             return;
           }
 
-          return <ArtCard key={m}
-                image={item.extended?.image}
-                category={item.extended?.category}
-                name={item?.name}
-                symbol={item.symbol}
-                preview={false}
-                onClick={open}
-                close={() => {
-                  setSelectedItems(new Set([...selectedItems.keys()].filter(_ => _ !== m)));
-                  confirm();
-                }}
-                />;
+          return (
+            <ArtCard
+              key={m}
+              image={item.extended?.image}
+              category={item.extended?.category}
+              name={item?.name}
+              symbol={item.symbol}
+              preview={false}
+              onClick={open}
+              close={() => {
+                setSelectedItems(
+                  new Set([...selectedItems.keys()].filter(_ => _ !== m)),
+                );
+                confirm();
+              }}
+            />
+          );
         })}
-        {(allowMultiple || selectedItems.size === 0) && <div className="ant-card ant-card-bordered ant-card-hoverable art-card" style={{ width: 200, height: 300, display: 'flex' }} onClick={open} >
-           <span className="text-center">Add an NFT</span>
-         </div>}
+        {(allowMultiple || selectedItems.size === 0) && (
+          <div
+            className="ant-card ant-card-bordered ant-card-hoverable art-card"
+            style={{ width: 200, height: 300, display: 'flex' }}
+            onClick={open}
+          >
+            <span className="text-center">Add an NFT</span>
+          </div>
+        )}
       </Masonry>
 
-
-      <Modal visible={visible} onCancel={close} onOk={confirm} width="100" footer={null}>
+      <Modal
+        visible={visible}
+        onCancel={close}
+        onOk={confirm}
+        width="100"
+        footer={null}
+      >
         <Row className="call-to-action" style={{ marginBottom: 0 }}>
           <h2>Select the NFT you want to sell</h2>
           <p style={{ fontSize: '1.2rem' }}>
@@ -100,40 +117,43 @@ export const ArtSelector = (props: ArtSelectorProps) => {
         </Row>
         <Row className="content-action">
           <Masonry
-              breakpointCols={breakpointColumnsObj}
-              className="my-masonry-grid"
-              columnClassName="my-masonry-grid_column"
-            >
-              {items.map(m => {
-                const id = m.pubkey.toBase58();
-                const isSelected = selectedItems.has(id);
+            breakpointCols={breakpointColumnsObj}
+            className="my-masonry-grid"
+            columnClassName="my-masonry-grid_column"
+          >
+            {items.map(m => {
+              const id = m.metadata.pubkey.toBase58();
+              const isSelected = selectedItems.has(id);
 
-                const onSelect = () => {
-                  let list = [...selectedItems.keys()];
-                  if (allowMultiple) {
-                    list = [];
-                  }
+              const onSelect = () => {
+                let list = [...selectedItems.keys()];
+                if (allowMultiple) {
+                  list = [];
+                }
 
-                  isSelected ?
-                    setSelectedItems(new Set(list.filter(item => item !== id))) :
-                    setSelectedItems(new Set([...list, id]));
+                isSelected
+                  ? setSelectedItems(new Set(list.filter(item => item !== id)))
+                  : setSelectedItems(new Set([...list, id]));
 
-                  if(!allowMultiple) {
-                    confirm();
-                  }
-                };
+                if (!allowMultiple) {
+                  confirm();
+                }
+              };
 
-                return <ArtCard key={id}
-                      image={m.info.extended?.image}
-                      category={m.info.extended?.category}
-                      name={m.info?.name}
-                      symbol={m.info.symbol}
-                      preview={false}
-                      onClick={onSelect}
-                      className={isSelected ? 'selected-card' : 'not-selected-card'}
-                      />;
-              })}
-            </Masonry>
+              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}
+                  preview={false}
+                  onClick={onSelect}
+                  className={isSelected ? 'selected-card' : 'not-selected-card'}
+                />
+              );
+            })}
+          </Masonry>
         </Row>
         <Row>
           <Button

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

@@ -46,6 +46,7 @@ import {
   AuctionManagerStatus,
   NonWinningConstraint,
   SCHEMA,
+  WinningConstraint,
 } from '../../models/metaplex';
 import { serialize } from 'borsh';
 import { SafetyDepositDraft } from '../../actions/createAuctionManager';
@@ -66,7 +67,7 @@ interface Tier {
   to: number;
   name: string;
   description?: string;
-  items: ParsedAccount<Metadata>[];
+  items: SafetyDepositDraft[];
 }
 
 export interface AuctionState {
@@ -76,6 +77,8 @@ export interface AuctionState {
   // listed NFTs
   items: SafetyDepositDraft[];
 
+  settings: AuctionManagerSettings;
+
   // number of editions for this auction (only applicable to limited edition)
   editions?: number;
 
@@ -120,6 +123,13 @@ export const AuctionCreateView = () => {
     items: [],
     category: AuctionCategory.Open,
     saleType: 'auction',
+    settings: {
+      openEditionWinnerConstraint: WinningConstraint.NoOpenEdition,
+      openEditionNonWinningConstraint: NonWinningConstraint.NoOpenEdition,
+      winningConfigs: [],
+      openEditionConfig: undefined,
+      openEditionFixedPrice: undefined,
+    },
   });
 
   useEffect(() => {
@@ -395,14 +405,35 @@ const CopiesStep = (props: {
   confirm: () => void;
 }) => {
   const items = useUserArts();
+  let eligibleItems: SafetyDepositDraft[] = [];
+  if (props.attributes.category == AuctionCategory.Limited) {
+    eligibleItems = items.filter(i => i.masterEdition);
+  } else if (
+    props.attributes.category == AuctionCategory.Single ||
+    props.attributes.category == AuctionCategory.Tiered
+  ) {
+    eligibleItems = items;
+  } else if (props.attributes.category == AuctionCategory.Open) {
+    eligibleItems = items.filter(
+      i =>
+        i.masterEdition &&
+        (i.masterEdition.info.maxSupply == undefined ||
+          i.masterEdition.info.maxSupply == null),
+    );
+  }
+
   const [selectedItems, setSelectedItems] = useState<Set<string>>(
-    new Set(props.attributes.items.map(item => item.pubkey.toBase58())),
+    new Set(
+      props.attributes.items.map(item => item.metadata.pubkey.toBase58()),
+    ),
   );
 
   useEffect(() => {
     props.setAttributes({
       ...props.attributes,
-      items: items.filter(item => selectedItems.has(item.pubkey.toBase58())),
+      items: eligibleItems.filter((item: SafetyDepositDraft) =>
+        selectedItems.has(item.metadata.pubkey.toBase58()),
+      ),
     });
   }, [selectedItems]);
 
@@ -417,12 +448,12 @@ const CopiesStep = (props: {
       <Row className="content-action">
         <Col xl={24}>
           <ArtSelector
-            selected={items.filter(item =>
-              selectedItems.has(item.pubkey.toBase58()),
+            selected={eligibleItems.filter(item =>
+              selectedItems.has(item.metadata.pubkey.toBase58()),
             )}
             setSelected={items =>
               setSelectedItems(
-                new Set(items.map(item => item.pubkey.toBase58())),
+                new Set(items.map(item => item.metadata.pubkey.toBase58())),
               )
             }
             allowMultiple={false}
@@ -457,6 +488,16 @@ const CopiesStep = (props: {
           onClick={() => {
             props.setAttributes({
               ...props.attributes,
+              tiers:
+                !props.attributes.tiers || props.attributes.tiers?.length == 0
+                  ? [
+                      {
+                        to: 0,
+                        name: 'Default Tier',
+                        items: props.attributes.items,
+                      },
+                    ]
+                  : props.attributes.tiers,
             });
             props.confirm();
           }}
@@ -1213,12 +1254,12 @@ const ReviewStep = (props: {
       </Row>
       <Row className="content-action">
         <Col xl={12}>
-          {item?.info && (
+          {item?.metadata.info && (
             <ArtCard
-              image={item.info.extended?.image}
-              category={item.info.extended?.category}
-              name={item.info.name}
-              symbol={item.info.symbol}
+              image={item.metadata.info.extended?.image}
+              category={item.metadata.info.extended?.category}
+              name={item.metadata.info.name}
+              symbol={item.metadata.info.symbol}
               small={true}
             />
           )}