Merge pull request #424 from starknet-id/feat/add-referral-modal

feat: add registration modal

components/UI/registerConfirmationModal.tsx

@@ -0,0 +1,68 @@
+import React, { FunctionComponent } from "react";
+import Lottie from "lottie-react";
+import ModalMessage from "../UI/modalMessage";
+import verifiedLottie from "../../public/visuals/verifiedLottie.json";
+import Button from "./button";
+
+type RegisterConfirmationModalProps = {
+  txHash?: string;
+  isTxModalOpen: boolean;
+  closeModal: () => void;
+};
+
+const RegisterConfirmationModal: FunctionComponent<
+  RegisterConfirmationModalProps
+> = ({ txHash, isTxModalOpen, closeModal }) => {
+  return (
+    <ModalMessage
+      open={isTxModalOpen}
+      title={"Thanks, It's now time to earn crypto !"}
+      closeModal={() => closeModal()}
+      message={
+        <div className="flex items-center justify-center text-center py-5 gap-2 flex-wrap lg:flex-nowrap">
+          <div className="flex flex-col">
+            <Lottie
+              className="w-52"
+              animationData={verifiedLottie}
+              loop={false}
+            />{" "}
+            <p
+              className="text-xs underline cursor-pointer"
+              onClick={() =>
+                window.open(
+                  `https://${
+                    process.env.NEXT_PUBLIC_IS_TESTNET === "true"
+                      ? "testnet."
+                      : ""
+                  }starkscan.co/tx/${txHash}`
+                )
+              }
+            >
+              View transaction on explorer
+            </p>
+          </div>
+          <div className="flex flex-col ">
+            <p className="text-justify">
+              Refer your friends to Starknet ID and earn{" "}
+              <strong>ETH or STRK</strong> ! Each sale made with your referral
+              link will permit you to earn up to 8$ worth of crypto.
+            </p>
+            <div className="mt-5">
+              <Button
+                onClick={() =>
+                  window.open(
+                    "https://www.starknet.id/affiliates/individual-program"
+                  )
+                }
+              >
+                Start earning crypto
+              </Button>
+            </div>
+          </div>
+        </div>
+      }
+    />
+  );
+};
+
+export default RegisterConfirmationModal;

components/domains/registerV2.tsx

@@ -24,7 +24,6 @@ import SelectIdentity from "./selectIdentity";
 import { useDisplayName } from "../../hooks/displayName.tsx";
 import { Abi, Call } from "starknet";
 import { posthog } from "posthog-js";
-import TxConfirmationModal from "../UI/txConfirmationModal";
 import styles from "../../styles/components/registerV2.module.css";
 import TextField from "../UI/textField";
 import UsForm from "./usForm";
@@ -36,6 +35,7 @@ import Wallets from "../UI/wallets";
 import registrationCalls from "../../utils/callData/registrationCalls";
 import { computeMetadataHash, generateSalt } from "../../utils/userDataService";
 import { getPriceFromDomain } from "../../utils/priceService";
+import RegisterConfirmationModal from "../UI/registerConfirmationModal";
 
 type RegisterV2Props = {
   domain: string;
@@ -383,11 +383,10 @@ const RegisterV2: FunctionComponent<RegisterV2Props> = ({ domain, groups }) => {
         </div>
       </div>
       <img className={styles.image} src="/visuals/registerV2.webp" />
-      <TxConfirmationModal
+      <RegisterConfirmationModal
         txHash={registerData?.transaction_hash}
         isTxModalOpen={isTxModalOpen}
         closeModal={() => setIsTxModalOpen(false)}
-        title="Your domain is on it's way !"
       />
       <Wallets
         closeWallet={() => setWalletModalOpen(false)}