feat: add claim X & 2FA tickets and update partners wallets (#15)

* feat: add claim 2FA & X tickets

* feat: update partner wallets

* fix: build error

* fix: show claim x ticket on mobile

* fix: build error

* fix: add suspense for search params

* fix: unused imports

* fix: window undefined

* fix: changes in api

* fix: claim x & 2FA tickets

* fix: build errors

* fix: bugs

* fix: add notif on claim successful

* fix: description modal

* fix: remove logs

* fix: btn centered + twitter process from start if we close

* fix: X notif

app/components/NotifXTicket.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import React, { FunctionComponent, useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { storeHasClaimedXTicket } from "@/services/localStorageService";
+import Notification from "./notification";
+
+type NotifXTicketProps = {
+  hasClaimedX?: boolean;
+  setHasClaimedX: (hasClaimedX: boolean) => void;
+};
+
+const NotifXTicket: FunctionComponent<NotifXTicketProps> = ({
+  hasClaimedX,
+  setHasClaimedX,
+}) => {
+  const searchParams = useSearchParams();
+  const claimXStatus = searchParams.get("success");
+  const claimXError = searchParams.get("error_msg");
+  const [showErrorMsg, setShowErrorMsg] = useState<boolean>(false);
+  const [errorMsg, setErrorMsg] = useState<string>("");
+
+  useEffect(() => {
+    if (!claimXStatus) return;
+    if (claimXStatus === "true") {
+      if (!hasClaimedX) {
+        storeHasClaimedXTicket();
+        setHasClaimedX(true);
+      }
+    } else if (claimXStatus === "false" && claimXError) {
+      // show error message
+      if ((claimXError as string).includes("already claimed")) {
+        setHasClaimedX(true);
+      }
+      setErrorMsg(claimXError);
+      setShowErrorMsg(true);
+    }
+  }, [claimXStatus, claimXError]);
+
+  const closeErrorMsg = () => {
+    setShowErrorMsg(false);
+    setErrorMsg("");
+  };
+
+  return (
+    <>
+      <Notification visible={showErrorMsg} onClose={closeErrorMsg}>
+        <>{errorMsg}</>
+      </Notification>
+    </>
+  );
+};
+
+export default NotifXTicket;

app/components/claimXTicket.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import React, { FunctionComponent, useEffect, useState } from "react";
+import Button from "./button";
+import { getExtraTicket } from "@/utils/codeChallenge";
+import styles from "../styles/components/stats.module.css";
+import { useSearchParams } from "next/navigation";
+import { storeHasClaimedXTicket } from "@/services/localStorageService";
+import Notification from "./notification";
+
+type ClaimXTicketProps = {
+  address?: string;
+  isConnected: boolean;
+  isFinished: boolean;
+  hasClaimedX?: boolean;
+  showClaimed?: boolean;
+  width?: number;
+  setHasClaimedX: (hasClaimedX: boolean) => void;
+};
+
+const ClaimXTicket: FunctionComponent<ClaimXTicketProps> = ({
+  address,
+  isConnected,
+  isFinished,
+  hasClaimedX,
+  showClaimed = true,
+  width = 200,
+  setHasClaimedX,
+}) => {
+  const searchParams = useSearchParams();
+  const claimXStatus = searchParams.get("success");
+  const claimXError = searchParams.get("error_msg");
+  const [showErrorMsg, setShowErrorMsg] = useState<boolean>(false);
+  const [errorMsg, setErrorMsg] = useState<string>("");
+
+  useEffect(() => {
+    if (!claimXStatus) return;
+    if (claimXStatus === "true") {
+      if (!hasClaimedX) {
+        storeHasClaimedXTicket();
+        setHasClaimedX(true);
+      }
+    } else if (claimXStatus === "false" && claimXError) {
+      // show error message
+      if ((claimXError as string).includes("already claimed")) {
+        setHasClaimedX(true);
+      }
+      setErrorMsg(claimXError);
+      setShowErrorMsg(true);
+    }
+  }, [claimXStatus, claimXError]);
+
+  const closeErrorMsg = () => {
+    setShowErrorMsg(false);
+    setErrorMsg("");
+  };
+
+  return (
+    <>
+      {isConnected && !isFinished && hasClaimedX !== undefined && address ? (
+        <div className={styles.statsSection} style={{ marginTop: "10px" }}>
+          <p>Retweet to get an extra ticket !</p>
+          {!hasClaimedX ? (
+            <div className="mx-auto">
+              <Button
+                onClick={() => getExtraTicket(address)}
+                // icon={
+                //   <img
+                //     src="/visuals/twitterIcon.svg"
+                //     alt="Twitter Icon"
+                //     width={20}
+                //   />
+                // }
+                width={width}
+                variation="white"
+              >
+                Claim now
+              </Button>
+            </div>
+          ) : showClaimed ? (
+            <div className={styles.winnerWrapper}>
+              <div className={styles.winnerSection} style={{ margin: "auto" }}>
+                Already claimed
+              </div>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+      <Notification visible={showErrorMsg} onClose={closeErrorMsg}>
+        <>{errorMsg}</>
+      </Notification>
+    </>
+  );
+};
+
+export default ClaimXTicket;

app/components/connection/starknetConnect.tsx

@@ -103,7 +103,7 @@ const StarknetWalletConnect: FunctionComponent<StarknetWalletConnectProps> = ({
                     onClick={() => tryConnect(connector, isAvailable)}
                   >
                     <Button
-                      onClick={() => console.log("Open connect wallet modal")}
+                      onClick={() => console.log("Connecting to starknet")}
                       icon={
                         <img
                           src={getConnectorIcon(connector.id)}

app/components/extraClickModal.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import React, { FunctionComponent, useState } from "react";
+import { Modal } from "@mui/material";
+import styles from "../styles/components/welcomeModal.module.css";
+import modalStyles from "../styles/components/modal.module.css";
+import Button from "./button";
+import { NetworkType } from "@/constants/types";
+import ClaimXTicket from "./claimXTicket";
+
+type ExtraClickModalProps = {
+  closeModal: () => void;
+  open: boolean;
+  network?: NetworkType;
+  address?: string;
+  hasClaimed2FA?: boolean;
+  claim2FATicket: () => void;
+  hasClaimedX?: boolean;
+  isFinished: boolean;
+  setHasClaimedX: (hasClaimedX: boolean) => void;
+};
+
+const ExtraClickModal: FunctionComponent<ExtraClickModalProps> = ({
+  closeModal,
+  open,
+  network,
+  address,
+  hasClaimed2FA,
+  claim2FATicket,
+  hasClaimedX,
+  isFinished,
+  setHasClaimedX,
+}) => {
+  const [hasClicked, setHasClicked] = useState(false);
+
+  const modalTitle =
+    hasClaimed2FA && hasClaimedX ? (
+      <>
+        Get extra <span className="secondary">tickets</span>
+      </>
+    ) : (
+      <>
+        Get an extra <span className="secondary">ticket</span>
+      </>
+    );
+
+  const retweet = () => {
+    window.open(process.env.NEXT_PUBLIC_RETWEET_URL);
+    setHasClicked(true);
+  };
+
+  const close = () => {
+    setHasClicked(false);
+    closeModal();
+  };
+
+  if (network !== NetworkType.STARKNET || !address) return null;
+
+  return (
+    <Modal
+      disableAutoFocus
+      open={open}
+      onClose={close}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      componentsProps={{
+        backdrop: {
+          sx: {
+            backdropFilter: "blur(4px)",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+          },
+        },
+      }}
+    >
+      <div className={modalStyles.menu_wrapper}>
+        <div className={modalStyles.menu}>
+          <div className={modalStyles.modal_content}>
+            <div className={`${modalStyles.menu_title} primary`}>
+              {modalTitle}
+            </div>
+
+            {!hasClaimed2FA ? (
+              <>
+                <div className={styles.description}>
+                  Enable 2FA on your wallet and claim a free ticket !
+                </div>
+                <Button
+                  icon={<img src="/visuals/2FA.svg" width={22} />}
+                  width={260}
+                  onClick={claim2FATicket}
+                >
+                  Claim 2FA ticket
+                </Button>
+              </>
+            ) : null}
+
+            {!hasClaimedX ? (
+              <>
+                {hasClicked ? (
+                  <ClaimXTicket
+                    isConnected={true}
+                    isFinished={isFinished}
+                    hasClaimedX={hasClaimedX}
+                    address={address}
+                    showClaimed={false}
+                    width={230}
+                    setHasClaimedX={setHasClaimedX}
+                  />
+                ) : (
+                  <>
+                    <div className={styles.description}>
+                      Retweet to get an extra ticket !
+                    </div>
+                    <Button
+                      icon={<img src="/visuals/twitterIcon.svg" width={22} />}
+                      width={260}
+                      onClick={retweet}
+                    >
+                      Retweet
+                    </Button>
+                  </>
+                )}
+              </>
+            ) : null}
+            <div onClick={close} className={modalStyles.menu_close}>
+              Close
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ExtraClickModal;