feat: add alt starknet new account flow & fix some bugs

app/components/connection/connectModal.tsx

@@ -71,15 +71,15 @@ const ConnectModal: FunctionComponent<StarknetWalletConnectProps> = ({
                   onClick={connectEvm}
                   icon={<img src="/visuals/ethFilledIcon.svg" />}
                   width={300}
-                  variation="default-overlay"
+                  variation="default"
                 >
                   EVM wallet
                 </Button>
                 <Button
                   onClick={() => setOpenStarknetModal(true)}
                   icon={<img src="/visuals/starknetIcon.svg" />}
                   width={300}
-                  variation="default-overlay"
+                  variation="default"
                 >
                   Starknet wallet
                 </Button>

app/components/iconComponents/closeIcon.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from "@/constants/types";
+import React, { FunctionComponent } from "react";
+
+const CloseIcon: FunctionComponent<IconProps> = ({ color, width }) => {
+  return (
+    <svg
+      width={width}
+      height={width}
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.20917 10.5754L6.2485 7.61472L3.06007 10.8031C2.83233 11.0309 1.9669 11.9874 1.23812 11.2586C0.554887 10.5754 1.23812 9.43667 1.46586 9.20893L4.65429 6.02051L1.69361 3.05983C1.38995 2.75617 0.281594 1.73891 1.01038 1.01013C1.92135 0.0991549 2.98416 1.16196 3.28782 1.46562L6.2485 4.4263L9.20917 1.46562C9.66466 1.01013 10.5301 0.509094 11.2589 1.23788C11.9877 1.96666 11.0311 2.83209 10.8034 3.05983L7.84271 6.02051L10.8034 8.98118C11.107 9.28484 12.1698 10.3477 11.2589 11.2586C10.5301 11.9874 9.51283 10.8791 9.20917 10.5754Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default CloseIcon;

app/components/notification.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import React, { FunctionComponent, ReactNode } from "react";
+import { Snackbar } from "@mui/material";
+import styles from "../styles/components/notification.module.css";
+import CloseIcon from "./iconComponents/closeIcon";
+
+type NotificationProps = {
+  children: ReactNode;
+  onClose?: () => void;
+  severity?: "error" | "warning" | "info" | "success";
+  visible?: boolean;
+};
+
+const Notification: FunctionComponent<NotificationProps> = ({
+  children,
+  onClose,
+  severity = "info",
+  visible = false,
+}) => {
+  return (
+    <Snackbar
+      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      open={visible}
+    >
+      <div className={styles[severity]}>
+        <div>{children}</div>
+        <div onClick={onClose} className="cursor-pointer">
+          <CloseIcon width="15" color="#C7CBD3" />
+        </div>
+      </div>
+    </Snackbar>
+  );
+};
+
+export default Notification;

app/components/recoverTokenModal.tsx

@@ -0,0 +1,122 @@
+"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 WalletIcon from "./iconComponents/walletIcon";
+import {
+  getArgentIcon,
+  getArgentWebsite,
+  getBraavosIcon,
+  getBraavosWebsite,
+} from "@/utils/starknetConnectorsWrapper";
+import { storeEthSig } from "@/services/localStorageService";
+import { useSignMessage } from "wagmi";
+
+type RecoverTokenModalProps = {
+  closeModal: () => void;
+  open: boolean;
+  addr?: string;
+};
+
+const RecoverTokenModal: FunctionComponent<RecoverTokenModalProps> = ({
+  closeModal,
+  open,
+  addr,
+}) => {
+  const [step, setStep] = useState(0);
+  const { signMessageAsync } = useSignMessage();
+
+  const generateSignature = async () => {
+    if (!addr) return;
+    try {
+      const signature = await signMessageAsync({
+        message: `I press the Ethereum button with my address`,
+      });
+      storeEthSig(signature, addr);
+      setStep(1);
+    } catch (error) {
+      console.error("Error while signing message:", error);
+    }
+  };
+  const modalDescription =
+    step === 0 ? (
+      <>
+        You are eligible to play again with a starknet wallet, but first you'll
+        need to regenerate a signature with your ethereum wallet.
+      </>
+    ) : (
+      <>
+        You can now install one of our partner wallets to get your additional
+        click!
+      </>
+    );
+
+  return (
+    <Modal
+      disableAutoFocus
+      open={open}
+      onClose={closeModal}
+      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`}>
+              No clicks <span className="secondary">left !</span>
+            </div>
+
+            <div className={styles.description}>{modalDescription}</div>
+
+            {step == 0 ? (
+              <div>
+                <Button
+                  icon={<img src="/visuals/ethFilledIcon.svg" />}
+                  width={300}
+                  onClick={generateSignature}
+                >
+                  Sign message
+                </Button>
+              </div>
+            ) : (
+              <div>
+                <Button
+                  icon={<img src={getArgentIcon()} width={22} />}
+                  width={300}
+                  onClick={() => window.open(getArgentWebsite())}
+                >
+                  Argent
+                </Button>
+                <Button
+                  icon={<img src={getBraavosIcon()} width={22} />}
+                  width={300}
+                  onClick={() => window.open(getBraavosWebsite())}
+                >
+                  Braavos
+                </Button>
+              </div>
+            )}
+
+            <div onClick={closeModal} className={modalStyles.menu_close}>
+              Close
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default RecoverTokenModal;

app/components/welcomeModal.tsx

@@ -5,7 +5,7 @@ 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, RemainingClicks } from "@/constants/types";
+import { EthToken, NetworkType, RemainingClicks } from "@/constants/types";
 import WalletIcon from "./iconComponents/walletIcon";
 import { numberToWords } from "@/utils/stringService";
 import { getTotalClicks } from "@/utils/dataService";
@@ -18,7 +18,7 @@ type WelcomeModalProps = {
   addrOrName?: string;
   openWalletModal?: () => void;
   hasEthTokens: boolean;
-  ethTokens?: number;
+  ethTokens?: EthToken[];
 };
 
 const WelcomeModal: FunctionComponent<WelcomeModalProps> = ({
@@ -31,9 +31,8 @@ const WelcomeModal: FunctionComponent<WelcomeModalProps> = ({
   hasEthTokens,
   ethTokens,
 }) => {
-  const totalClicks = getTotalClicks(remainingClicks) + (ethTokens ?? 0);
+  const totalClicks = getTotalClicks(remainingClicks, network, ethTokens);
   const isWhitelisted = remainingClicks.whitelisted;
-  console.log("totalClicks", totalClicks);
   const btnIcon =
     network === NetworkType.starknet ? (
       <img src="/visuals/starknetIcon.svg" />