diff --git a/packages/metavinci/src/views/auctionCreate/artSelector.tsx b/packages/metavinci/src/views/auctionCreate/artSelector.tsx index b5e2f67..2505858 100644 --- a/packages/metavinci/src/views/auctionCreate/artSelector.tsx +++ b/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[]; - setSelected: (selected: ParsedAccount[]) => 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>(new Set(props.selected.map(item => item.pubkey.toBase58()))); + const [selectedItems, setSelectedItems] = useState>( + 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()), [items]); + const map = useMemo( + () => + items.reduce((acc, item) => { + acc.set(item.metadata.pubkey.toBase58(), item.metadata.info); + return acc; + }, new Map()), + [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 { - setSelectedItems(new Set([...selectedItems.keys()].filter(_ => _ !== m))); - confirm(); - }} - />; + return ( + { + setSelectedItems( + new Set([...selectedItems.keys()].filter(_ => _ !== m)), + ); + confirm(); + }} + /> + ); })} - {(allowMultiple || selectedItems.size === 0) &&
- Add an NFT -
} + {(allowMultiple || selectedItems.size === 0) && ( +
+ Add an NFT +
+ )} - - +

Select the NFT you want to sell

@@ -100,40 +117,43 @@ export const ArtSelector = (props: ArtSelectorProps) => { - {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 ; - })} - + return ( + + ); + })} +