Use framer motion to animate new screens

packages/web/components/UI/ProgressBar.js

@@ -9,7 +9,7 @@ export const ProgressBar = ({ progressLabels, index }) => {
       <div className="flex row justify-around ">
         {progressLabels.map((item, itemIndex) => (
           <div
-            className={`relative flex items-center justify-center flex-1 py-4 pointer-events-none`}
+            className={`relative flex items-center justify-center flex-1 h-24 pointer-events-none`}
             key={item}
           >
             {index === itemIndex && (

packages/web/components/mint/ChallengeMintScreen.js

@@ -0,0 +1,7 @@
+export const ChallengeMintScreen = () => {
+  return (
+    <div className="p-20 bg-red-500">
+      <p>Challenge Mint Screen</p>
+    </div>
+  );
+};

packages/web/components/mint/ChallengeTypeScreen.js

@@ -14,9 +14,9 @@ const placeholderChallengeType = {
   totalQuantity: 0,
 };
 
-const ChallengeTypeScreen = (props) => {
+export const ChallengeTypeScreen = (props) => {
   return (
-    <div className="bg-white/10 p-10 rounded w-full max-w-4xl backdrop-blur-sm">
+    <div className="bg-white/10 p-10 rounded backdrop-blur-sm ">
       <Formik
         initialValues={{
           name: '',
@@ -29,25 +29,25 @@ const ChallengeTypeScreen = (props) => {
           { name, description, prtclePrice, maxQuantity, totalQuantity },
           actions
         ) => {
-          const price = utils.parseEther(prtclePrice).toString();
-          const quantity = utils.parseEther(maxQuantity).toString();
-          const total = utils.parseEther(totalQuantity).toString();
+          // const price = utils.parseEther(prtclePrice).toString();
+          // const quantity = utils.parseEther(maxQuantity).toString();
+          // const total = utils.parseEther(totalQuantity).toString();
 
-          await props.addChallengeTypes([
-            {
-              name,
-              description,
-              prtclePrice: price,
-              maxQuantity: quantity,
-              totalQuantity: total,
-            },
-          ]);
+          // await props.addChallengeTypes([
+          //   {
+          //     name,
+          //     description,
+          //     prtclePrice: price,
+          //     maxQuantity: quantity,
+          //     totalQuantity: total,
+          //   },
+          // ]);
           props.setIndex(1);
 
           actions.setSubmitting(false);
         }}
       >
-        <FormFrame className="flex flex-col gap-8">
+        <FormFrame className="flex flex-col gap-8 ">
           <Field
             className="py-4 px-8 text-gray-800 rounded"
             id="name"
@@ -98,8 +98,6 @@ const ChallengeTypeScreen = (props) => {
   );
 };
 
-export default ChallengeTypeScreen;
-
 const TextArea = styled.textarea``;
 
 const FormFrame = styled(Form)`

packages/web/pages/mint.js

@@ -8,12 +8,11 @@ import { useChallengeContract } from '/hooks/useChallengeContract';
 
 import diamondABI from '../../contracts/diamondABI/diamond.json';
 import dynamic from 'next/dynamic';
-import { Formik, Form, Field } from 'formik';
-import Player from 'react-player';
-import ChallengeTypeScreen from '/components/mint/ChallengeTypeScreen';
+import { ChallengeTypeScreen } from '/components/mint/ChallengeTypeScreen';
+import { ChallengeMintScreen } from '/components/mint/ChallengeMintScreen';
 import { ProgressBar } from '/components/UI';
-import { utils } from 'ethers';
 import { calculateGasMargin, GAS_MARGIN } from '../utils';
+import { AnimatePresence, motion } from 'framer-motion';
 
 const SelfIdForm = dynamic(() => import('/components/SelfIdForm'), {
   ssr: false,
@@ -86,13 +85,38 @@ const Mint = (props) => {
     });
   };
 
+  const currentPage = (i) => {
+    switch (i) {
+      case 0:
+        return (
+          <ChallengeTypeScreen
+            addChallengeTypes={onAddChallengeTypes}
+            setIndex={setIndex}
+          />
+        );
+      case 1:
+        return <ChallengeMintScreen />;
+      default:
+        return null;
+    }
+  };
+
   return (
-    <Main>
+    <div className='flex flex-col justify-center items-center gap-10 mt-20'>
       <ProgressBar progressLabels={progressLabels} index={index} />
-      <ChallengeTypeScreen
-        addChallengeTypes={onAddChallengeTypes}
-        setIndex={setIndex}
-      />
+      <AnimatePresence exitBeforeEnter initial={false}>
+        <motion.div
+          key={index}
+          animate={{ x: 0, y: 0 }}
+          initial={{ x: 500, y: 0 }}
+          exit={{ x: -500, y: 0 }}
+          transition={{ duration: 0.3 }}
+          className='w-full max-w-4xl'
+        >
+          {currentPage(index)}
+        </motion.div>
+      </AnimatePresence>
+
       {/* <Formik
         initialValues={{
           videoUrl: '',
@@ -114,21 +138,12 @@ const Mint = (props) => {
           {/* <SelfIdForm videoUrl={videoUrl} /> */}
         </div>
       )}
-    </Main>
+    </div>
   );
 };
 
 export default Mint;
 
-const Main = styled.main`
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  flex-direction: column;
-  min-height: 100vh;
-  position: relative;
-`;
-
 const FormFrame = styled.form`
   display: flex;
   flex-direction: column;