Add detailed minting progress indicator (#536)

js/packages/web/src/actions/nft.tsx

@@ -16,7 +16,7 @@ import {
   WalletSigner,
   Attribute,
 } from '@oyster/common';
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { MintLayout, Token } from '@solana/spl-token';
 import {
   Keypair,
@@ -86,6 +86,7 @@ export const mintNFT = async (
     creators: Creator[] | null;
     sellerFeeBasisPoints: number;
   },
+  progressCallback: Dispatch<SetStateAction<number>>,
   maxSupply?: number,
 ): Promise<{
   metadataAccount: StringPublicKey;
@@ -120,6 +121,8 @@ export const mintNFT = async (
   const { instructions: pushInstructions, signers: pushSigners } =
     await prepPayForFilesTxn(wallet, realFiles, metadata);
 
+  progressCallback(1)
+
   const TOKEN_PROGRAM_ID = programIds().token;
 
   // Allocate memory for the account
@@ -183,6 +186,7 @@ export const mintNFT = async (
     instructions,
     wallet.publicKey.toBase58(),
   );
+  progressCallback(2)
 
   // TODO: enable when using payer account to avoid 2nd popup
   // const block = await connection.getRecentBlockhash('singleGossip');
@@ -194,6 +198,7 @@ export const mintNFT = async (
   //   }),
   // );
 
+
   const { txid } = await sendTransactionWithRetry(
     connection,
     wallet,
@@ -201,9 +206,11 @@ export const mintNFT = async (
     signers,
     'single',
   );
+  progressCallback(3)
 
   try {
     await connection.confirmTransaction(txid, 'max');
+    progressCallback(4)
   } catch {
     // ignore
   }
@@ -212,6 +219,8 @@ export const mintNFT = async (
   // await connection.confirmTransaction(txid, 'max');
   await connection.getParsedConfirmedTransaction(txid, 'confirmed');
 
+  progressCallback(5)
+
   // this means we're done getting AR txn setup. Ship it off to ARWeave!
   const data = new FormData();
   data.append('transaction', txid);
@@ -228,7 +237,9 @@ export const mintNFT = async (
   realFiles.map(f => data.append('file[]', f));
 
   // TODO: convert to absolute file name for image
+
   const result: IArweaveResult = await uploadToArweave(data);
+  progressCallback(6)
 
   const metadataFile = result.messages?.find(
     m => m.filename === RESERVED_TXN_MANIFEST,
@@ -265,6 +276,8 @@ export const mintNFT = async (
         1,
       ),
     );
+
+    progressCallback(7)
     // // In this instruction, mint authority will be removed from the main mint, while
     // // minting authority will be maintained for the Printing mint (which we want.)
     await createMasterEdition(
@@ -296,6 +309,8 @@ export const mintNFT = async (
     //   updateInstructions,
     // );
 
+    progressCallback(8)
+
     const txid = await sendTransactionWithRetry(
       connection,
       wallet,

js/packages/web/src/views/artCreate/index.tsx

@@ -8,12 +8,12 @@ import {
   Input,
   Statistic,
   Slider,
-  Progress,
   Spin,
   InputNumber,
   Form,
   Typography,
   Space,
+  Card,
 } from 'antd';
 import { ArtCard } from './../../components/ArtCard';
 import { UserSearch, UserValue } from './../../components/UserSearch';
@@ -41,7 +41,7 @@ import { useHistory, useParams } from 'react-router-dom';
 import { cleanName, getLast } from '../../utils/utils';
 import { AmountLabel } from '../../components/AmountLabel';
 import useWindowDimensions from '../../utils/layout';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { LoadingOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
 const { Step } = Steps;
 const { Dragger } = Upload;
@@ -55,6 +55,7 @@ export const ArtCreateView = () => {
   const { step_param }: { step_param: string } = useParams();
   const history = useHistory();
   const { width } = useWindowDimensions();
+  const [nftCreateProgress, setNFTcreateProgress] = useState<number>(0)
 
   const [step, setStep] = useState<number>(0);
   const [stepsVisible, setStepsVisible] = useState<boolean>(true);
@@ -118,6 +119,7 @@ export const ArtCreateView = () => {
         env,
         files,
         metadata,
+        setNFTcreateProgress,
         attributes.properties?.maxSupply,
       );
 
@@ -205,6 +207,7 @@ export const ArtCreateView = () => {
             <WaitingStep
               mint={mint}
               minting={isMinting}
+              step={nftCreateProgress}
               confirm={() => gotoStep(6)}
             />
           )}
@@ -1139,6 +1142,7 @@ const WaitingStep = (props: {
   mint: Function;
   minting: boolean;
   confirm: Function;
+  step: number;
 }) => {
   useEffect(() => {
     const func = async () => {
@@ -1148,6 +1152,13 @@ const WaitingStep = (props: {
     func();
   }, []);
 
+  const setIconForStep = (currentStep: number, componentStep) => {
+    if (currentStep === componentStep) {
+      return <LoadingOutlined />
+    }
+    return null;
+  }
+
   return (
     <div
       style={{
@@ -1158,10 +1169,19 @@ const WaitingStep = (props: {
       }}
     >
       <Spin size="large" />
-      <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>
+      <Card>
+        <Steps direction="vertical" current={props.step}>
+          <Step title="Minting" description="Starting Mint Process" icon={setIconForStep(props.step, 0)} />
+          <Step title="Preparing Assets" icon={setIconForStep(props.step, 1)} />
+          <Step title="Signing Metadata Transaction" description="Approve the transaction from your wallet" icon={setIconForStep(props.step, 2)}  /> 
+          <Step title="Sending Transaction to Solana" description="This will take a few seconds." icon={setIconForStep(props.step, 3)} /> 
+          <Step title="Waiting for Initial Confirmation" icon={setIconForStep(props.step, 4)} />
+          <Step title="Waiting for Final Confirmation" icon={setIconForStep(props.step, 5)} />
+          <Step title="Uploading to Arweave" icon={setIconForStep(props.step, 6)} />
+          <Step title="Updating Metadata" icon={setIconForStep(props.step, 7)} />
+          <Step title="Signing Token Transaction" description="Approve the final transaction from your wallet"  icon={setIconForStep(props.step, 8)}  />
+        </Steps>
+      </Card>
     </div>
   );
 };
@@ -1188,6 +1208,7 @@ const Congrats = (props: {
   };
 
   if (props.alert) {
+    // TODO  - properly reset this components state on error
     return (
       <>
         <div className="waiting-title">Sorry, there was an error!</div>