worked on adding green modal flow

src/refactor/masanew.stories.tsx

@@ -24,8 +24,8 @@ import {
   AuthenticateModal,
   CreateCreditScoreModal,
   CreateIdentityModal,
-  CreateGreenModal,
 } from './ui/components/modals';
+import { useGreenModal } from './ui/components/modals/create-green/use-green-modal';
 
 // * nextjs fix
 // * TODO: move this to index.ts file at some point
@@ -469,6 +469,7 @@ const GreenInfo = () => {
 const ModalFlow = () => {
   const { isDisconnected } = useWallet();
   const { hasSession } = useSession();
+  const { showChainingModal } = useGreenModal();
 
   return (
     <ul>
@@ -504,7 +505,7 @@ const ModalFlow = () => {
         </Button>
       </li>
       <li>
-        <Button type="button" onClick={() => NiceModal.show(CreateGreenModal)}>
+        <Button type="button" onClick={showChainingModal}>
           Create Masa Green
         </Button>
       </li>

src/refactor/ui/components/modals/create-green/air-drop.tsx

@@ -1,32 +1,30 @@
 import React from 'react';
-import { useMasa } from '../../../../provider';
-import { SubflowPage } from '../../interface-subflow';
-
-export const AirdropPage: React.FunctionComponent<SubflowPage> = ({
-  next,
-}: SubflowPage) => {
-  const { useModalSize } = useMasa();
-
-  useModalSize?.({ width: 800, height: 400 });
+import { useModal } from '@ebay/nice-modal-react';
+import { Modal } from '../modal';
 
+export const AirDropModal = () => {
+  const modal = useModal();
   return (
-    <div className="airdrop-interface">
-      <h2>100,000 $Masa Token Airdrop</h2>
-      <div>
-        <p>
-          Earn 10 $MASA tokens for each new user you successfully refer to Masa
-        </p>
-        <p>
-          Each friend you refer must mint a Masa Green SBT to be considered a
-          successful referral
-        </p>
-      </div>
+    <Modal>
+      <section className="airdrop-interface">
+        <h2>100,000 $Masa Token Airdrop</h2>
+        <div>
+          <p>
+            Earn 10 $MASA tokens for each new user you successfully refer to
+            Masa
+          </p>
+          <p>
+            Each friend you refer must mint a Masa Green SBT to be considered a
+            successful referral
+          </p>
+        </div>
 
-      <div className="">
-        <button className="masa-button" onClick={next}>
-          Get verified to start referrals
-        </button>
-      </div>
-    </div>
+        <div className="">
+          <button className="masa-button" onClick={() => modal.resolve()}>
+            Get verified to start referrals
+          </button>
+        </div>
+      </section>
+    </Modal>
   );
 };

src/refactor/ui/components/modals/create-green/create-green.tsx

@@ -1,31 +1,20 @@
 import React from 'react';
 
-import NiceModal from '@ebay/nice-modal-react';
+import NiceModal, { useModal } from '@ebay/nice-modal-react';
 import { Modal } from '../modal';
 
-export const CreateGreenModal: React.FunctionComponent<SubflowPage> =
-  NiceModal.create(() => {
-    return (
-      <Modal>
-        <div className="airdrop-interface">
-          <h2>100,000 $Masa Token Airdrop</h2>
-          <div>
-            <p>
-              Earn 10 $MASA tokens for each new user you successfully refer to
-              Masa
-            </p>
-            <p>
-              Each friend you refer must mint a Masa Green SBT to be considered
-              a successful referral
-            </p>
-          </div>
+export const CreateGreenModal = NiceModal.create(({ currentStep }) => {
+  const steps = ['AirDrop', 'NotABot', 'PhoneNumber', 'Mint'];
+  const modal = useModal();
 
-          <div className="">
-            <button className="masa-button">
-              Get verified to start referrals
-            </button>
-          </div>
-        </div>
-      </Modal>
-    );
-  });
+  return (
+    <Modal>
+      <section>
+        <h1>{steps[currentStep]}</h1>
+        <br />
+        <br />
+        <button onClick={() => modal.resolve()}>Next</button>
+      </section>
+    </Modal>
+  );
+});

src/refactor/ui/components/modals/create-green/not-a-bot-modal.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import NiceModal, { useModal } from '@ebay/nice-modal-react';
+import { Modal } from '../modal';
+
+const BOT_DISCLAIMER_TIMEOUT_SECONDS = 5;
+
+export const NotABotModal = () => {
+  const modal = useModal();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      modal.resolve();
+    }, BOT_DISCLAIMER_TIMEOUT_SECONDS * 1000);
+
+    return () => clearTimeout(timer);
+  }, [modal]);
+
+  return (
+    <Modal>
+      <section className="not-a-bot-interface">
+        <h2>
+          To be eligible for Masa Green, we kindly ask that you prove you are
+          not a bot.
+        </h2>
+        <p className="bot-icon">🤖</p>
+      </section>
+    </Modal>
+  );
+};

src/refactor/ui/components/modals/create-green/use-green-modal.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useModal } from '@ebay/nice-modal-react';
+import { CreateGreenModal } from './create-green';
+
+export const useGreenModal = () => {
+  const chainingModal = useModal(CreateGreenModal);
+
+  const showChainingModal = async () => {
+    for (let i = 0; i < 3; i++) {
+      console.log({ i });
+      await chainingModal.show({ currentStep: i });
+      await chainingModal.hide();
+    }
+  };
+  return { showChainingModal };
+};