feat(migrator): show what's next screen (#130)

* feat(migrator): show what's next screen

* feat(migrator): add close button instead x

apps/converter/src/components/converter/dialogue/Completed.tsx

@@ -8,6 +8,7 @@ import {
   L1_BITDAO_TOKEN_ADDRESS,
   L1_MANTLE_TOKEN,
   L1_CHAIN_ID,
+  CTAPages,
 } from "@config/constants";
 import { Button, Typography } from "@mantle/ui";
 import TxLink from "@components/converter/utils/TxLink";
@@ -28,7 +29,8 @@ export default function Deposited({
 }) {
   const { addToken } = useAddToken();
   const { createToast } = useToast();
-  const { chainId, isLoadingBalances, balances } = useContext(StateContext);
+  const { chainId, isLoadingBalances, balances, setCTAPage } =
+    useContext(StateContext);
 
   useEffect(() => {
     if (typeof txHash === "string") {
@@ -101,6 +103,10 @@ export default function Deposited({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoadingBalances, txHash, BITBalance, hasBitBalanceRemaining]);
 
+  const openWhatsNext = () => {
+    setCTAPage(CTAPages.WhatsNext);
+  };
+
   return (
     <>
       <Typography variant="modalHeading" className="text-center w-full mt-4">
@@ -120,12 +126,21 @@ export default function Deposited({
           type="button"
           size="full"
           className="h-14 flex flex-row gap-4 text-center items-center justify-center my-4"
-          variant="secondary"
+          variant="dark"
           onClick={() => addToken(L1_MANTLE_TOKEN)}
         >
           <Image src={MetamaskSvg} alt="metamask" height={26} width={26} />
           Add MNT to Wallet
         </Button>
+        <Button
+          type="button"
+          size="full"
+          className="h-14 flex flex-row gap-4 text-center items-center justify-center my-4"
+          variant="primary"
+          onClick={openWhatsNext}
+        >
+          Close
+        </Button>
       </div>
     </>
   );

apps/converter/src/components/converter/dialogue/Converted.tsx → apps/converter/src/components/converter/dialogue/WhatsNext.tsx

@@ -66,7 +66,7 @@ function WhatNextLink({
   );
 }
 
-export default function Deposited({
+export default function WhatsNext({
   txHash,
   from,
   closeModal,

apps/converter/src/components/converter/dialogue/index.tsx

@@ -14,7 +14,7 @@ import Loading from "@components/converter/dialogue/Loading";
 import Error from "@components/converter/dialogue/Error";
 
 import Converted from "@components/converter/dialogue/Completed";
-
+import WhatsNext from "@components/converter/dialogue/WhatsNext";
 import { ConvertCard } from "@components/ConvertCard";
 import { formatUnits, parseUnits } from "ethers/lib/utils.js";
 
@@ -88,6 +88,13 @@ export default function Dialogue() {
               closeModal={closeModalAndReset}
             />
           )}
+          {ctaPage === CTAPages.WhatsNext && (
+            <WhatsNext
+              txHash={txHash}
+              from={from}
+              closeModal={closeModalAndReset}
+            />
+          )}
           {ctaPage === CTAPages.Loading && (
             <Loading
               txHash={txHash}

apps/converter/src/config/constants.ts

@@ -105,6 +105,7 @@ export enum CTAPages {
   "Default",
   "Loading",
   "Converted",
+  "WhatsNext",
   "Error",
 }