fix: build issue

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

@@ -10,7 +10,7 @@ const UserActions = () => {
     <Link to={`/art/create`}>
       <Button className="app-btn">Create</Button>
     </Link>
-    <Link to={`/auction/create`}>
+    <Link to={`/auction/create/0`}>
       <Button type="primary">Sell</Button>
     </Link>
   </>;

packages/metavinci/src/models/metaplex/index.ts

@@ -9,22 +9,22 @@ export * from './startAuction';
 export * from './validateSafetyDepositBox';
 
 export class AuctionManager {
-  key: number;
-  authority: PublicKey;
-  auction: PublicKey;
-  vault: PublicKey;
-  auctionProgram: PublicKey;
-  tokenVaultProgram: PublicKey;
-  tokenMetadataProgram: PublicKey;
-  tokenProgram: PublicKey;
-  state: AuctionManagerState;
-  settings: AuctionManagerSettings;
+  key?: number;
+  authority?: PublicKey;
+  auction?: PublicKey;
+  vault?: PublicKey;
+  auctionProgram?: PublicKey;
+  tokenVaultProgram?: PublicKey;
+  tokenMetadataProgram?: PublicKey;
+  tokenProgram?: PublicKey;
+  state?: AuctionManagerState;
+  settings?: AuctionManagerSettings;
 }
 
 export class AuctionManagerSettings {
-  openEditionWinnerConstraint: WinningConstraint;
-  openEditionNonWinningConstraint: NonWinningConstraint;
-  winningConfigs: WinningConfig[];
+  openEditionWinnerConstraint?: WinningConstraint;
+  openEditionNonWinningConstraint?: NonWinningConstraint;
+  winningConfigs?: WinningConfig[];
   openEditionConfig?: number;
   openEditionFixedPrice?: number;
 }
@@ -50,33 +50,33 @@ export enum EditionType {
 }
 
 export class WinningConfig {
-  safetyDepositBoxIndex: number;
-  amount: number;
-  hasAuthority: boolean;
-  editionType: EditionType;
+  safetyDepositBoxIndex?: number;
+  amount?: number;
+  hasAuthority?: boolean;
+  editionType?: EditionType;
 }
 
 export class WinningConfigState {
   /// Used for cases of minting Limited Editions and keeping track of how many have been made so far.
-  amountMinted: number;
+  amountMinted?: number;
   /// Each safety deposit box needs to be validated via endpoint before auction manager will agree to let auction begin.
-  validated: boolean;
+  validated?: boolean;
   /// Ticked to true when a prize is claimed
-  claimed: boolean;
+  claimed?: boolean;
 }
 
 export class AuctionManagerState {
-  status: AuctionManagerStatus;
+  status?: AuctionManagerStatus;
   /// When all configs are validated the auction is started and auction manager moves to Running
-  winningConfigsValidated: number;
+  winningConfigsValidated?: number;
 
   /// Each master edition used as a template has to grant it's authority to the auction manager.
   /// This counter is incremented by one each time this is done. At the end of the auction; this is decremented
   /// each time authority is delegated back to the owner or the new owner and when it hits 0 another condition
   /// is met for going to Finished state.
-  masterEditionsWithAuthoritiesRemainingToReturn: number;
+  masterEditionsWithAuthoritiesRemainingToReturn?: number;
 
-  winningConfigStates: WinningConfigState[];
+  winningConfigStates?: WinningConfigState[];
 }
 
 export enum AuctionManagerStatus {
@@ -88,8 +88,8 @@ export enum AuctionManagerStatus {
 }
 
 export class BidRedemptionTicket {
-  openEditionRedeemed: boolean;
-  bidRedeemed: boolean;
+  openEditionRedeemed?: boolean;
+  bidRedeemed?: boolean;
 }
 
 export const SCHEMA = new Map<any, any>([

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

@@ -25,6 +25,12 @@ export const ArtSelector = (props: ArtSelectorProps) => {
   const items = useUserArts();
   const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set(props.selected.map(item => item.pubkey.toBase58())));
 
+  const [visible, setVisible] = useState(false);
+
+  const showModal = () => {
+    setVisible(true);
+  };
+
   useEffect(() => {
     props.setSelected(items.filter(item => selectedItems.has(item.pubkey.toBase58())));
   }, [selectedItems]);
@@ -38,8 +44,8 @@ export const ArtSelector = (props: ArtSelectorProps) => {
 
   return (
     <>
-      <Button {...rest} />
-      <Modal>
+      <Button {...rest} onClick={() => showModal} />
+      <Modal visible={visible}>
         <Row className="call-to-action" style={{ marginBottom: 0 }}>
           <h2>Select the NFT you want to sell</h2>
           <p style={{ fontSize: '1.2rem' }}>

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

@@ -18,6 +18,7 @@ import {
 import { ArtCard } from './../../components/ArtCard';
 import { UserSearch, UserValue } from './../../components/UserSearch';
 import { Confetti } from './../../components/Confetti';
+import { ArtSelector } from './artSelector';
 import './../styles.less';
 import {
   MAX_METADATA_LEN,
@@ -328,37 +329,24 @@ const CopiesStep = (props: {
         </p>
       </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);
-
-              const onSelect = () => {
-                let list = [...selectedItems.keys()];
-                if (props.attributes.category !== AuctionCategory.Tiered) {
-                  list = [];
+        <Col>
+          <ArtSelector selected={[]} setSelected={() => {}} allowMultiple={false}>Select NFT</ArtSelector>
+          <label className="action-field">
+              <span className="field-title">How many copies do you want to create?</span>
+              <span className="field-info">Each copy will be given unique edition number e.g. 1 of 30</span>
+              <Input
+                autoFocus
+                className="input"
+                placeholder="Enter reservation price"
+                allowClear
+                onChange={info =>
+                  props.setAttributes({
+                    ...props.attributes,
+                  })
                 }
-
-                isSelected ?
-                  setSelectedItems(new Set(list.filter(item => item !== id))) :
-                  setSelectedItems(new Set([...list, id]));
-              };
-
-              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>
+              />
+            </label>
+          </Col>
       </Row>
       <Row>
         <Button
@@ -552,13 +540,14 @@ const ParticipationStep = (props: {
 }) => {
   return <>
     <Row className="call-to-action">
-      <h2>Specify the terms of your auction</h2>
+      <h2>Participation NFT</h2>
       <p>
-        Provide detailed auction parameters such as price, start time, etc.
+        Provide NFT that will be awarded as an Open Edition NFT for auction participation.
       </p>
     </Row>
     <Row className="content-action">
       <Col className="section" xl={24}>
+        <ArtSelector selected={[]} setSelected={() => {}} allowMultiple={false}>Select NFT</ArtSelector>
       </Col>
     </Row>
     <Row>
@@ -591,21 +580,6 @@ const TermsStep = (props: {
       </Row>
       <Row className="content-action">
         <Col className="section" xl={24}>
-          <label className="action-field">
-            <span className="field-title">Number of copies</span>
-            <Input
-              autoFocus
-              className="input"
-              placeholder="Enter reservation price"
-              allowClear
-              onChange={info =>
-                props.setAttributes({
-                  ...props.attributes,
-                })
-              }
-            />
-            <span className="field-info">= ◎ 4.84</span>
-          </label>
 
           <label className="action-field">
             <span className="field-title">Price Floor (USD)</span>

packages/metavinci/src/views/styles.less

@@ -189,7 +189,8 @@
   .field-info {
     text-align: left;
 
-    color: rgba(255, 255, 255, 0.7);
+    color: rgba(255, 255, 255, 0.5);
+    margin-bottom: 12px;
   }
 
   margin-bottom: 30px;