Metavinci: Waiting view (#61)

* 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

* remove preview/keep filename. url id for steps

* slider > input number

* upload step for every category

* fix file handling

* hashrouter

* waiting view

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

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

@@ -42,8 +42,9 @@ export const ArtCreateView = () => {
   const { step_param }: { step_param: string } = useParams()
   const history = useHistory()
 
-  const [step, setStep] = useState(0);
-  const [saving, setSaving] = useState(false);
+  const [step, setStep] = useState<number>(0);
+  const [saving, setSaving] = useState<boolean>(false);
+  const [progress, setProgress] = useState<number>(0);
   const [attributes, setAttributes] = useState<IMetadataExtension>({
     name: '',
     symbol: '',
@@ -70,28 +71,18 @@ export const ArtCreateView = () => {
       ...(attributes as any),
       image: attributes.files && attributes.files?.[0] && attributes.files[0].name,
       files: (attributes?.files || []).map(f => f.name),
-    };
-    setSaving(true);
-    await mintNFT(connection, wallet, env, (attributes?.files || []), metadata);
-    setSaving(false);
-  };
+    }
+    setSaving(true)
+    const inte = setInterval(() => setProgress(prog => prog + 1), 600)
+    // Update progress inside mintNFT
+    await mintNFT(connection, wallet, env, (attributes?.files || []), metadata)
+    clearInterval(inte)
+  }
 
   return (
     <>
-      <Modal title="Saving..." footer={null} closable={false} visible={saving}>
-        <Progress
-          percent={100}
-          strokeWidth={20}
-          status="active"
-          strokeColor={{
-            '0%': '#108ee9',
-            '100%': '#87d068',
-          }}
-          showInfo={false}
-        />
-      </Modal>
       <Row style={{ paddingTop: 50 }}>
-        <Col xl={5}>
+        {!saving && <Col xl={5}>
           <Steps
             progressDot
             direction="vertical"
@@ -104,8 +95,8 @@ export const ArtCreateView = () => {
             <Step title="Royalties" />
             <Step title="Launch" />
           </Steps>
-        </Col>
-        <Col xl={16}>
+        </Col>}
+        <Col {...(saving ? { xl: 24 } : { xl: 16 })}>
           {step === 0 && (
             <CategoryStep
               confirm={(category: MetadataCategory) => {
@@ -142,11 +133,21 @@ export const ArtCreateView = () => {
           {step === 4 && (
             <LaunchStep
               attributes={attributes}
-              confirm={() => mint()}
+              confirm={() => gotoStep(5)}
               connection={connection}
             />
           )}
-          {step > 0 && <Button onClick={() => gotoStep(step - 1)}>Back</Button>}
+          {step === 5 && (
+            <WaitingStep
+              mint={mint}
+              progress={progress}
+              confirm={() => gotoStep(6)}
+            />
+          )}
+          {step === 6 && (
+            <Congrats />
+          )}
+          {(0 < step && step < 5) && <Button onClick={() => gotoStep(step - 1)}>Back</Button>}
         </Col>
       </Row>
     </>
@@ -255,7 +256,7 @@ const UploadStep = (props: {
           }}
         >
           <div className="ant-upload-drag-icon">
-            <h3 style={{fontWeight: 700}}>Upload your creation</h3>
+            <h3 style={{ fontWeight: 700 }}>Upload your creation</h3>
           </div>
           <p className="ant-upload-text">
             Drag and drop, or click to browse
@@ -286,7 +287,7 @@ const UploadStep = (props: {
             }}
           >
             <div className="ant-upload-drag-icon">
-              <h3 style={{fontWeight: 700}}>Upload your cover image or video</h3>
+              <h3 style={{ fontWeight: 700 }}>Upload your cover image or video</h3>
             </div>
             <p className="ant-upload-text">
               Drag and drop, or click to browse
@@ -570,3 +571,37 @@ const LaunchStep = (props: {
     </>
   );
 };
+
+const WaitingStep = (props: {
+  mint: Function,
+  progress: number,
+  confirm: Function,
+}) => {
+
+  useEffect(() => {
+    const func = async () => {
+      await props.mint()
+      props.confirm()
+    }
+    func()
+  }, [])
+
+  return (
+    <div style={{ marginTop: 70 }}>
+      <Progress
+        type="circle"
+        percent={props.progress}
+      />
+      <div className="waiting-title">
+        Your creation is being uploaded to the decentralized web...
+      </div>
+      <div className="waiting-subtitle">This can take up to 1 minute.</div>
+    </div>
+  )
+}
+
+const Congrats = () => {
+  return <>
+    Congrats!
+  </>
+}

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

@@ -179,3 +179,16 @@
   flex-grow: 0;
   margin: 12px 0px;
 }
+
+.waiting-title {
+  font-weight: 700;
+  font-size: 2rem;
+  color: #FFFFFF;
+  margin-top: 100px;
+}
+
+.waiting-subtitle {
+  font-size: 1.5rem;
+  color: rgba(255, 255, 255, 0.7);
+  margin-top: 20px;
+}