mirror of https://github.com/certusone/oyster.git
feat: mint flow
This commit is contained in:
parent
2150fc4b9e
commit
fdb41495b2
|
@ -1,5 +1,5 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Steps, Row, Button, Upload, Col, Input, } from 'antd';
|
||||
import { Steps, Row, Button, Upload, Col, Input, Statistic } from 'antd';
|
||||
import { InboxOutlined } from '@ant-design/icons';
|
||||
import { ArtCard } from './../../components/ArtCard';
|
||||
import './styles.less';
|
||||
|
@ -15,6 +15,9 @@ export const ArtCreateView = () => {
|
|||
const [step, setStep] = useState(0);
|
||||
const [attributes, setAttributes] = useState({
|
||||
type: 'image',
|
||||
title: '',
|
||||
description: '',
|
||||
|
||||
files: [],
|
||||
});
|
||||
|
||||
|
@ -33,9 +36,11 @@ export const ArtCreateView = () => {
|
|||
current={step}
|
||||
style={{ width: 200, marginLeft: 20, marginRight: 30 }}
|
||||
>
|
||||
<Step title="Select category" />
|
||||
<Step title="Upload creation" />
|
||||
<Step title="Add metadata" />
|
||||
<Step title="Category" />
|
||||
<Step title="Upload" />
|
||||
<Step title="Info" />
|
||||
<Step title="Royalties" />
|
||||
<Step title="Launch" />
|
||||
</Steps>
|
||||
</Col>
|
||||
<Col xl={16}>
|
||||
|
@ -47,7 +52,9 @@ export const ArtCreateView = () => {
|
|||
setStep(1);
|
||||
}} />}
|
||||
{step === 1 && <UploadStep attributes setAttributes={setAttributes} confirm={() => setStep(2)} />}
|
||||
{step === 2 && <MintStep confirm={() => mint()} />}
|
||||
{step === 2 && <InfoStep confirm={() => setStep(3)} />}
|
||||
{step === 3 && <RoyaltiesStep confirm={() => setStep(4)} />}
|
||||
{step === 4 && <LaunchStep confirm={() => mint()} />}
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
|
@ -62,30 +69,22 @@ const CategoryStep = (props: { confirm: (type: string) => void }) => {
|
|||
<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>
|
||||
<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 }) => {
|
||||
|
||||
|
||||
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>
|
||||
</Row>
|
||||
<Row className="content-action">
|
||||
<Row className="content-action content-action-stretch">
|
||||
<Dragger multiple={false}
|
||||
customRequest={(info) => {
|
||||
// dont upload files here, handled outside of the control
|
||||
|
@ -108,7 +107,7 @@ const UploadStep = (props: { attributes: any, setAttributes: (attr: any) => void
|
|||
</Dragger>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button type="primary" size="large" onClick={props.confirm}>
|
||||
<Button type="primary" size="large" onClick={props.confirm} className="action-btn">
|
||||
Continue to Mint
|
||||
</Button>
|
||||
</Row>
|
||||
|
@ -116,7 +115,7 @@ const UploadStep = (props: { attributes: any, setAttributes: (attr: any) => void
|
|||
);
|
||||
};
|
||||
|
||||
const MintStep = (props: { confirm: () => void }) => {
|
||||
const InfoStep = (props: { confirm: () => void }) => {
|
||||
return (
|
||||
<>
|
||||
<Row className="call-to-action">
|
||||
|
@ -136,8 +135,64 @@ const MintStep = (props: { confirm: () => void }) => {
|
|||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button type="primary" size="large" onClick={props.confirm}>
|
||||
Mint NFT
|
||||
<Button type="primary" size="large" onClick={props.confirm} className="action-btn">
|
||||
Continue to royalties
|
||||
</Button>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const RoyaltiesStep = (props: { confirm: () => void }) => {
|
||||
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>
|
||||
</Row>
|
||||
<Row className="content-action">
|
||||
<Col xl={12}>
|
||||
<ArtCard />
|
||||
</Col>
|
||||
<Col className="section" xl={12}>
|
||||
<Input className="input" placeholder="Title" />
|
||||
<Input.TextArea
|
||||
className="input textarea"
|
||||
placeholder="Description"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button type="primary" size="large" onClick={props.confirm} className="action-btn">
|
||||
Continue to review
|
||||
</Button>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const LaunchStep = (props: { confirm: () => void }) => {
|
||||
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>
|
||||
</Row>
|
||||
<Row className="content-action">
|
||||
<Col xl={12}>
|
||||
<ArtCard />
|
||||
</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="◎" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<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">
|
||||
Pay with Credit Card
|
||||
</Button>
|
||||
</Row>
|
||||
</>
|
||||
|
|
|
@ -28,13 +28,19 @@
|
|||
}
|
||||
|
||||
.content-action {
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
:first-child{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content-action-stretch {
|
||||
:first-child{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
background: #F7F7F7;
|
||||
border-radius: 8px;
|
||||
|
@ -48,10 +54,83 @@
|
|||
}
|
||||
|
||||
.type-btn {
|
||||
height: 300px;
|
||||
width: calc(100% - 20px);
|
||||
height: 130px;
|
||||
width: 240px;
|
||||
border-radius: 8px;
|
||||
background-color: #1d1d1d;
|
||||
border-width: 0px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px 10px;
|
||||
|
||||
/* button/primary/default */
|
||||
background: linear-gradient(180deg, #768BF9 0%, #5870EE 100%);
|
||||
border-radius: 8px;
|
||||
height: 58px;
|
||||
|
||||
/* caps button text */
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
/* identical to box height */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
|
||||
/* text/default */
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.create-statistic {
|
||||
text-align: left;
|
||||
|
||||
.ant-statistic-title {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
/* identical to box height, or 133% */
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
margin: 12px 0px;
|
||||
}
|
||||
|
||||
.ant-statistic-content {
|
||||
display: inline-flex;
|
||||
|
||||
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
color: #FFFFFF;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
margin: 0px 12px;
|
||||
}
|
||||
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue