Artwork creation flow (#53)

* MainAuctionCard

* trending auctions

* fix scroll, reduce padding

* fixing errors/warnings and formatting

* formatting & sold auctions

* artists cards

* initial presale banner. move sample data to own file

* new home layout

* presale banner image fix

* countdown implementation

* initial artwork implementation

* getCountdown

* presale card

* fix presale banner image

* fix width. show preview. load only 1 file

Co-authored-by: B <264380+bartosz-lipinski@users.noreply.github.com>

packages/metavinci/src/components/ArtCard/index.tsx

@@ -20,7 +20,7 @@ export const ArtCard = ({
 }) => {
   return (
     <Card className="custom-card" cover={<ArtContent category={category} content={image} />}>
-      <Meta title={`Title: ${name}`} description={`Symbol: ${symbol}`} />
+      <Meta title={`Title: ${name}`} description={`Symbol: ${symbol}`} style={{ textAlign: 'left' }} />
     </Card>
   );
 };

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

@@ -31,6 +31,7 @@ import {
 import { getAssetCostToStore, LAMPORT_MULTIPLIER } from '../../utils/assets';
 import { Connection } from '@solana/web3.js';
 import { MintLayout } from '@solana/spl-token';
+import { ArtContent } from '../../components/ArtContent';
 
 const { Step } = Steps;
 const { Dragger } = Upload;
@@ -134,6 +135,7 @@ export const ArtCreateView = () => {
               connection={connection}
             />
           )}
+          {step > 0 && <Button onClick={() => setStep(step - 1)}>Back</Button>}
         </Col>
       </Row>
     </>
@@ -183,6 +185,9 @@ const UploadStep = (props: {
   setAttributes: (attr: IMetadataExtension) => void;
   confirm: () => void;
 }) => {
+  const [fileList, setFileList] = useState<any[]>([])
+  const [preview, setPreview] = useState<string>("")
+
   return (
     <>
       <Row className="call-to-action">
@@ -197,23 +202,28 @@ const UploadStep = (props: {
       </Row>
       <Row className="content-action">
         <Dragger
+          style={{ padding: 20 }}
           multiple={false}
+          showUploadList={false}
           customRequest={info => {
             // dont upload files here, handled outside of the control
             info?.onSuccess?.({}, null as any);
           }}
-          style={{ padding: 20 }}
+          fileList={fileList}
           onChange={async info => {
             const file = info.file.originFileObj;
             const reader = new FileReader();
             reader.onload = function (event) {
+              const image = (event.target?.result as string) || ''
               props.setAttributes({
                 ...props.attributes,
                 files: [file],
-                image: (event.target?.result as string) || '',
-              });
+                image,
+              })
+              setPreview(image)
             };
             reader.readAsDataURL(file);
+            setFileList(info.fileList.slice(-1)) // Keep only the last dropped file
           }}
         >
           <p className="ant-upload-drag-icon">
@@ -223,6 +233,9 @@ const UploadStep = (props: {
             Click or drag file to this area to upload
           </p>
         </Dragger>
+        <div style={{ marginTop: 10 }}>
+          <ArtContent category={props.attributes.category} content={preview} className="art-content" />
+        </div>
       </Row>
       <Row>
         <Button

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

@@ -29,10 +29,14 @@
 
 .content-action {
   margin-bottom: 60px;
+}
 
-  :first-child{
-    width: 100%;
-  }
+.ant-row.content-action > span {
+  width: 100%;
+}
+
+.art-content {
+  max-width: 100%;
 }
 
 .content-action-stretch {