mirror of https://github.com/certusone/oyster.git
Metaplex: fixes (#94)
* artselector for tiered auction * useArt id * modal size, scroll body * format go live ts * fix progress circle * hide steps when publishing
This commit is contained in:
parent
3169f97e01
commit
8bec1e0746
|
@ -11,7 +11,7 @@ const { Content } = Layout;
|
||||||
export const AuctionView = () => {
|
export const AuctionView = () => {
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>();
|
||||||
const auction = useAuction(id);
|
const auction = useAuction(id);
|
||||||
const art = useArt(id);
|
const art = useArt(auction?.openEditionItem?.metadata.pubkey.toBase58() as string);
|
||||||
const artist = sampleArtist;
|
const artist = sampleArtist;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -97,7 +97,7 @@ export const ArtSelector = (props: ArtSelectorProps) => {
|
||||||
visible={visible}
|
visible={visible}
|
||||||
onCancel={close}
|
onCancel={close}
|
||||||
onOk={confirm}
|
onOk={confirm}
|
||||||
width="100"
|
width={1100}
|
||||||
footer={null}
|
footer={null}
|
||||||
>
|
>
|
||||||
<Row className="call-to-action" style={{ marginBottom: 0 }}>
|
<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.
|
Select the NFT that you want to sell copy/copies of.
|
||||||
</p>
|
</p>
|
||||||
</Row>
|
</Row>
|
||||||
<Row className="content-action">
|
<Row className="content-action" style={{ overflowY: 'scroll', height: "50vh" }}>
|
||||||
<Masonry
|
<Masonry
|
||||||
breakpointCols={breakpointColumnsObj}
|
breakpointCols={breakpointColumnsObj}
|
||||||
className="my-masonry-grid"
|
className="my-masonry-grid"
|
||||||
|
|
|
@ -128,7 +128,6 @@ export const AuctionCreateView = () => {
|
||||||
|
|
||||||
const [step, setStep] = useState<number>(0);
|
const [step, setStep] = useState<number>(0);
|
||||||
const [saving, setSaving] = useState<boolean>(false);
|
const [saving, setSaving] = useState<boolean>(false);
|
||||||
const [progress, setProgress] = useState<number>(0);
|
|
||||||
const [attributes, setAttributes] = useState<AuctionState>({
|
const [attributes, setAttributes] = useState<AuctionState>({
|
||||||
reservationPrice: 0,
|
reservationPrice: 0,
|
||||||
items: [],
|
items: [],
|
||||||
|
@ -300,7 +299,10 @@ export const AuctionCreateView = () => {
|
||||||
const reviewStep = (
|
const reviewStep = (
|
||||||
<ReviewStep
|
<ReviewStep
|
||||||
attributes={attributes}
|
attributes={attributes}
|
||||||
confirm={() => gotoNextStep()}
|
confirm={() => {
|
||||||
|
setSaving(true)
|
||||||
|
gotoNextStep()
|
||||||
|
}}
|
||||||
connection={connection}
|
connection={connection}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -308,7 +310,6 @@ export const AuctionCreateView = () => {
|
||||||
const waitStep = (
|
const waitStep = (
|
||||||
<WaitingStep
|
<WaitingStep
|
||||||
createAuction={createAuction}
|
createAuction={createAuction}
|
||||||
progress={progress}
|
|
||||||
confirm={() => gotoNextStep()}
|
confirm={() => gotoNextStep()}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -687,7 +688,11 @@ const TierWinners = (props: {
|
||||||
/>
|
/>
|
||||||
</label>
|
</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
|
<Statistic
|
||||||
className="create-statistic"
|
className="create-statistic"
|
||||||
title="Listing go live date"
|
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 />
|
<Divider />
|
||||||
|
@ -1474,12 +1479,15 @@ const ReviewStep = (props: {
|
||||||
|
|
||||||
const WaitingStep = (props: {
|
const WaitingStep = (props: {
|
||||||
createAuction: () => Promise<void>;
|
createAuction: () => Promise<void>;
|
||||||
progress: number;
|
|
||||||
confirm: () => void;
|
confirm: () => void;
|
||||||
}) => {
|
}) => {
|
||||||
|
const [progress, setProgress] = useState<number>(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const func = async () => {
|
const func = async () => {
|
||||||
|
const inte = setInterval(() => setProgress(prog => prog + 1), 600);
|
||||||
await props.createAuction();
|
await props.createAuction();
|
||||||
|
clearInterval(inte);
|
||||||
props.confirm();
|
props.confirm();
|
||||||
};
|
};
|
||||||
func();
|
func();
|
||||||
|
@ -1487,7 +1495,7 @@ const WaitingStep = (props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ marginTop: 70 }}>
|
<div style={{ marginTop: 70 }}>
|
||||||
<Progress type="circle" percent={props.progress} />
|
<Progress type="circle" percent={progress} />
|
||||||
<div className="waiting-title">
|
<div className="waiting-title">
|
||||||
Your creation is being listed with Metaplex...
|
Your creation is being listed with Metaplex...
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue