mirror of https://github.com/certusone/oyster.git
Merge branch 'feature/m' of https://github.com/solana-labs/oyster into feature/m
This commit is contained in:
commit
10bb6b060a
|
@ -1,23 +1,31 @@
|
|||
import React from 'react';
|
||||
import React, { useLayoutEffect, useState } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { Card, Avatar } from 'antd';
|
||||
|
||||
const { Meta } = Card;
|
||||
|
||||
export const ArtCard = () => {
|
||||
return <Card
|
||||
className="custom-card"
|
||||
cover={
|
||||
<img
|
||||
alt="example"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Meta
|
||||
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
|
||||
title="Card title"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Card>;
|
||||
}
|
||||
export const ArtCard = ({ file }: { file?: File }) => {
|
||||
const [imgSrc, setImgSrc] = useState<string>();
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
setImgSrc(event.target?.result as any);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}, [file]);
|
||||
|
||||
return (
|
||||
<Card className="custom-card" cover={<img src={imgSrc} />}>
|
||||
<Meta
|
||||
avatar={
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
}
|
||||
title="Card title"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -9,11 +9,18 @@ import { useConnection, useWallet } from '@oyster/common';
|
|||
const { Step } = Steps;
|
||||
const { Dragger } = Upload;
|
||||
|
||||
interface IProps {
|
||||
type: String;
|
||||
title: String;
|
||||
description: String;
|
||||
files: File[];
|
||||
}
|
||||
|
||||
export const ArtCreateView = () => {
|
||||
const connection = useConnection();
|
||||
const { wallet, connected } = useWallet();
|
||||
const [step, setStep] = useState(0);
|
||||
const [attributes, setAttributes] = useState({
|
||||
const [attributes, setAttributes] = useState<IProps>({
|
||||
type: 'image',
|
||||
title: '',
|
||||
description: '',
|
||||
|
@ -44,17 +51,27 @@ export const ArtCreateView = () => {
|
|||
</Steps>
|
||||
</Col>
|
||||
<Col xl={16}>
|
||||
{step === 0 && <CategoryStep confirm={(type) => {
|
||||
setAttributes({
|
||||
...attributes,
|
||||
type
|
||||
})
|
||||
setStep(1);
|
||||
}} />}
|
||||
{step === 1 && <UploadStep attributes setAttributes={setAttributes} confirm={() => setStep(2)} />}
|
||||
{step === 2 && <InfoStep confirm={() => setStep(3)} />}
|
||||
{step === 3 && <RoyaltiesStep confirm={() => setStep(4)} />}
|
||||
{step === 4 && <LaunchStep confirm={() => mint()} />}
|
||||
{step === 0 && (
|
||||
<CategoryStep
|
||||
confirm={type => {
|
||||
setAttributes({
|
||||
...attributes,
|
||||
type,
|
||||
});
|
||||
setStep(1);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{step === 1 && (
|
||||
<UploadStep
|
||||
attributes
|
||||
setAttributes={setAttributes}
|
||||
confirm={() => setStep(2)}
|
||||
/>
|
||||
)}
|
||||
{step === 2 && (
|
||||
<InfoStep confirm={() => mint()} attributes={attributes} />
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
|
@ -66,38 +83,77 @@ const CategoryStep = (props: { confirm: (type: string) => void }) => {
|
|||
<>
|
||||
<Row className="call-to-action">
|
||||
<h2>Create your NFT artwork on Meta</h2>
|
||||
<p>Creating NFT on Solana is not only low cost for artists but supports environment with 20% of the fees form the platform donated to charities.</p>
|
||||
<p>
|
||||
Creating NFT on Solana is not only low cost for artists but supports
|
||||
environment with 20% of the fees form the platform donated to
|
||||
charities.
|
||||
</p>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button className="type-btn" size="large" onClick={() => props.confirm('image')}>Image</Button>
|
||||
<Button className="type-btn" size="large" onClick={() => props.confirm('video')}>Video</Button>
|
||||
<Button className="type-btn" size="large" onClick={() => props.confirm('audio')}>Audio</Button>
|
||||
<Col xl={6}>
|
||||
<Button
|
||||
className="type-btn"
|
||||
size="large"
|
||||
onClick={() => props.confirm('image')}
|
||||
>
|
||||
Image
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xl={6}>
|
||||
<Button
|
||||
className="type-btn"
|
||||
size="large"
|
||||
onClick={() => props.confirm('video')}
|
||||
>
|
||||
Video
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xl={6}>
|
||||
<Button
|
||||
className="type-btn"
|
||||
size="large"
|
||||
onClick={() => props.confirm('audio')}
|
||||
>
|
||||
Audio
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const UploadStep = (props: { attributes: any, setAttributes: (attr: any) => void, confirm: () => void }) => {
|
||||
const UploadStep = (props: {
|
||||
attributes: any;
|
||||
setAttributes: (attr: any) => void;
|
||||
confirm: () => void;
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<Row className="call-to-action">
|
||||
<h2>Now, let's upload your creation</h2>
|
||||
<p>Your file will be uploaded to the decentralized web via Arweave. Depending on file type, can take up to 1 minute. Arweave is a new type of storage that backs data with sustainable and perpetual endowments, allowing users and developers to truly store data forever – for the very first time.</p>
|
||||
<p>
|
||||
Your file will be uploaded to the decentralized web via Arweave.
|
||||
Depending on file type, can take up to 1 minute. Arweave is a new type
|
||||
of storage that backs data with sustainable and perpetual endowments,
|
||||
allowing users and developers to truly store data forever – for the
|
||||
very first time.
|
||||
</p>
|
||||
</Row>
|
||||
<Row className="content-action content-action-stretch">
|
||||
<Dragger multiple={false}
|
||||
customRequest={(info) => {
|
||||
<Row className="content-action">
|
||||
<Dragger
|
||||
multiple={false}
|
||||
customRequest={info => {
|
||||
// dont upload files here, handled outside of the control
|
||||
info?.onSuccess?.({}, null as any);
|
||||
}}
|
||||
style={{ padding: 20 }} onChange={(info) => {
|
||||
props.setAttributes({
|
||||
...props.attributes,
|
||||
files: [
|
||||
info.file.originFileObj,
|
||||
],
|
||||
});
|
||||
}}>
|
||||
style={{ padding: 20 }}
|
||||
onChange={info => {
|
||||
props.setAttributes({
|
||||
...props.attributes,
|
||||
files: [info.file.originFileObj],
|
||||
});
|
||||
}}
|
||||
>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
|
@ -107,7 +163,12 @@ const UploadStep = (props: { attributes: any, setAttributes: (attr: any) => void
|
|||
</Dragger>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button type="primary" size="large" onClick={props.confirm} className="action-btn">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={props.confirm}
|
||||
className="action-btn"
|
||||
>
|
||||
Continue to Mint
|
||||
</Button>
|
||||
</Row>
|
||||
|
@ -115,17 +176,19 @@ const UploadStep = (props: { attributes: any, setAttributes: (attr: any) => void
|
|||
);
|
||||
};
|
||||
|
||||
const InfoStep = (props: { confirm: () => void }) => {
|
||||
const InfoStep = (props: { confirm: () => void; attributes: IProps }) => {
|
||||
const file = props.attributes.files[0];
|
||||
return (
|
||||
<>
|
||||
<Row className="call-to-action">
|
||||
<h2>Describe your creation</h2>
|
||||
<p>Provide detailed description of your creative process to engage with your audience.</p>
|
||||
<p>
|
||||
Provide detailed description of your creative process to engage with
|
||||
your audience.
|
||||
</p>
|
||||
</Row>
|
||||
<Row className="content-action">
|
||||
<Col xl={12}>
|
||||
<ArtCard />
|
||||
</Col>
|
||||
<Col xl={12}>{file && <ArtCard file={file} />}</Col>
|
||||
<Col className="section" xl={12}>
|
||||
<label className="action-field">
|
||||
<span className="field-title">Title</span>
|
||||
|
@ -142,7 +205,12 @@ const InfoStep = (props: { confirm: () => void }) => {
|
|||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button type="primary" size="large" onClick={props.confirm} className="action-btn">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={props.confirm}
|
||||
className="action-btn"
|
||||
>
|
||||
Continue to royalties
|
||||
</Button>
|
||||
</Row>
|
||||
|
@ -150,17 +218,20 @@ const InfoStep = (props: { confirm: () => void }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const RoyaltiesStep = (props: { confirm: () => void }) => {
|
||||
const RoyaltiesStep = (props: { confirm: () => void; attributes: IProps }) => {
|
||||
const file = props.attributes.files[0];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row className="call-to-action">
|
||||
<h2>Set royalties for the creation</h2>
|
||||
<p>A royalty is a payment made by one the seller of this item to the creator. It is charged after every successful auction.</p>
|
||||
<p>
|
||||
A royalty is a payment made by one the seller of this item to the
|
||||
creator. It is charged after every successful auction.
|
||||
</p>
|
||||
</Row>
|
||||
<Row className="content-action">
|
||||
<Col xl={12}>
|
||||
<ArtCard />
|
||||
</Col>
|
||||
<Col xl={12}>{file && <ArtCard file={file} />}</Col>
|
||||
<Col className="section" xl={12}>
|
||||
<label className="action-field">
|
||||
<span className="field-title">Description</span>
|
||||
|
@ -169,7 +240,12 @@ const RoyaltiesStep = (props: { confirm: () => void }) => {
|
|||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button type="primary" size="large" onClick={props.confirm} className="action-btn">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={props.confirm}
|
||||
className="action-btn"
|
||||
>
|
||||
Continue to review
|
||||
</Button>
|
||||
</Row>
|
||||
|
@ -177,27 +253,50 @@ const RoyaltiesStep = (props: { confirm: () => void }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const LaunchStep = (props: { confirm: () => void }) => {
|
||||
const LaunchStep = (props: { confirm: () => void; attributes: IProps }) => {
|
||||
const file = props.attributes.files[0];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row className="call-to-action">
|
||||
<h2>Launch your creation</h2>
|
||||
<p>Provide detailed description of your creative process to engage with your audience.</p>
|
||||
<p>
|
||||
Provide detailed description of your creative process to engage with
|
||||
your audience.
|
||||
</p>
|
||||
</Row>
|
||||
<Row className="content-action">
|
||||
<Col xl={12}>
|
||||
<ArtCard />
|
||||
</Col>
|
||||
<Col xl={12}>{file && <ArtCard file={file} />}</Col>
|
||||
<Col className="section" xl={12}>
|
||||
<Statistic className="create-statistic" title="Royalty Percentage" value={20} suffix="%" />
|
||||
<Statistic className="create-statistic" title="Cost to Create" value={20} prefix="◎" />
|
||||
<Statistic
|
||||
className="create-statistic"
|
||||
title="Royalty Percentage"
|
||||
value={20}
|
||||
suffix="%"
|
||||
/>
|
||||
<Statistic
|
||||
className="create-statistic"
|
||||
title="Cost to Create"
|
||||
value={20}
|
||||
prefix="◎"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button type="primary" size="large" onClick={props.confirm} className="action-btn">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={props.confirm}
|
||||
className="action-btn"
|
||||
>
|
||||
Pay with SOL
|
||||
</Button>
|
||||
<Button disabled={true} size="large" onClick={props.confirm} className="action-btn">
|
||||
<Button
|
||||
disabled={true}
|
||||
size="large"
|
||||
onClick={props.confirm}
|
||||
className="action-btn"
|
||||
>
|
||||
Pay with Credit Card
|
||||
</Button>
|
||||
</Row>
|
||||
|
|
Loading…
Reference in New Issue