feat: mint flow

packages/metavinci/src/views/artCreate/index.tsx

@@ -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="Category" />
-            <Step title="Upload creation" />
+            <Step title="Upload" />
-            <Step title="Add metadata" />
+            <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}>
+        <Button type="primary" size="large" onClick={props.confirm} className="action-btn">
-          Mint NFT
+          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>
     </>

packages/metavinci/src/views/artCreate/styles.less

@@ -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;
+  height: 130px;
-  width: calc(100% - 20px);
+  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;
+}