mirror of https://github.com/certusone/oyster.git
feat: upload
This commit is contained in:
parent
dd62483256
commit
2150fc4b9e
|
@ -14,6 +14,7 @@ export const ArtCreateView = () => {
|
|||
const { wallet, connected } = useWallet();
|
||||
const [step, setStep] = useState(0);
|
||||
const [attributes, setAttributes] = useState({
|
||||
type: 'image',
|
||||
files: [],
|
||||
});
|
||||
|
||||
|
@ -37,8 +38,14 @@ export const ArtCreateView = () => {
|
|||
<Step title="Add metadata" />
|
||||
</Steps>
|
||||
</Col>
|
||||
<Col xl={19}>
|
||||
{step === 0 && <CategoryStep confirm={() => setStep(1)} />}
|
||||
<Col xl={16}>
|
||||
{step === 0 && <CategoryStep confirm={(type) => {
|
||||
setAttributes({
|
||||
...attributes,
|
||||
type
|
||||
})
|
||||
setStep(1);
|
||||
}} />}
|
||||
{step === 1 && <UploadStep attributes setAttributes={setAttributes} confirm={() => setStep(2)} />}
|
||||
{step === 2 && <MintStep confirm={() => mint()} />}
|
||||
</Col>
|
||||
|
@ -47,21 +54,23 @@ export const ArtCreateView = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const CategoryStep = (props: { confirm: () => void }) => {
|
||||
const CategoryStep = (props: { confirm: (type: string) => void }) => {
|
||||
return (
|
||||
<>
|
||||
<Row className="call-to-action">
|
||||
<h2>What type of artwork are you creating?</h2>
|
||||
<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>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button size="large">Image</Button>
|
||||
<Button size="large">Movie</Button>
|
||||
<Button size="large">Audio</Button>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button type="primary" size="large" onClick={props.confirm}>
|
||||
Continue to Upload
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
|
@ -74,8 +83,9 @@ const UploadStep = (props: { attributes: any, setAttributes: (attr: any) => void
|
|||
<>
|
||||
<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>
|
||||
</Row>
|
||||
<Row>
|
||||
<Row className="content-action">
|
||||
<Dragger multiple={false}
|
||||
customRequest={(info) => {
|
||||
// dont upload files here, handled outside of the control
|
||||
|
@ -85,7 +95,7 @@ const UploadStep = (props: { attributes: any, setAttributes: (attr: any) => void
|
|||
props.setAttributes({
|
||||
...props.attributes,
|
||||
files: [
|
||||
info.file,
|
||||
info.file.originFileObj,
|
||||
],
|
||||
});
|
||||
}}>
|
||||
|
@ -110,9 +120,13 @@ const MintStep = (props: { confirm: () => void }) => {
|
|||
return (
|
||||
<>
|
||||
<Row className="call-to-action">
|
||||
<h2>Add details about your artwork</h2>
|
||||
<h2>Describe your creation</h2>
|
||||
<p>Provide detailed description of your creative process to engage with your audience.</p>
|
||||
</Row>
|
||||
<Row>
|
||||
<Row className="content-action">
|
||||
<Col xl={12}>
|
||||
<ArtCard />
|
||||
</Col>
|
||||
<Col className="section" xl={12}>
|
||||
<Input className="input" placeholder="Title" />
|
||||
<Input.TextArea
|
||||
|
@ -120,9 +134,6 @@ const MintStep = (props: { confirm: () => void }) => {
|
|||
placeholder="Description"
|
||||
/>
|
||||
</Col>
|
||||
<Col xl={12}>
|
||||
<ArtCard />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button type="primary" size="large" onClick={props.confirm}>
|
||||
|
|
|
@ -3,6 +3,38 @@
|
|||
padding: 1px;
|
||||
}
|
||||
|
||||
.call-to-action {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h2 {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 36px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #6d6d6d;
|
||||
}
|
||||
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.content-action {
|
||||
margin-bottom: 50px;
|
||||
|
||||
:first-child{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
background: #F7F7F7;
|
||||
border-radius: 8px;
|
||||
|
@ -14,3 +46,12 @@
|
|||
.textarea {
|
||||
height: 230px !important;
|
||||
}
|
||||
|
||||
.type-btn {
|
||||
height: 300px;
|
||||
width: calc(100% - 20px);
|
||||
border-radius: 8px;
|
||||
background-color: #1d1d1d;
|
||||
border-width: 0px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue