diff --git a/packages/metavinci/src/views/artCreate/index.tsx b/packages/metavinci/src/views/artCreate/index.tsx index 1963779..6fa4ba8 100644 --- a/packages/metavinci/src/views/artCreate/index.tsx +++ b/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(0); + const [saving, setSaving] = useState(false); + const [progress, setProgress] = useState(0); const [attributes, setAttributes] = useState({ 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 ( <> - - - - + {!saving && { - - + } + {step === 0 && ( { @@ -142,11 +133,21 @@ export const ArtCreateView = () => { {step === 4 && ( mint()} + confirm={() => gotoStep(5)} connection={connection} /> )} - {step > 0 && } + {step === 5 && ( + gotoStep(6)} + /> + )} + {step === 6 && ( + + )} + {(0 < step && step < 5) && } @@ -255,7 +256,7 @@ const UploadStep = (props: { }} >
-

Upload your creation

+

Upload your creation

Drag and drop, or click to browse @@ -286,7 +287,7 @@ const UploadStep = (props: { }} >

-

Upload your cover image or video

+

Upload your cover image or video

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 ( +

+ +
+ Your creation is being uploaded to the decentralized web... +
+
This can take up to 1 minute.
+
+ ) +} + +const Congrats = () => { + return <> + Congrats! + +} diff --git a/packages/metavinci/src/views/artCreate/styles.less b/packages/metavinci/src/views/artCreate/styles.less index a99c21f..8a50952 100644 --- a/packages/metavinci/src/views/artCreate/styles.less +++ b/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; +}