Merge pull request #937 from lfglabs-dev/testnet

MEP 12/12/2024

.env.test

@@ -2,3 +2,5 @@ NEXT_PUBLIC_VERIFIER_CONTRACT=0x057c942544063c3aea6ea6c37009cc9d1beacd750cb68015
 NEXT_PUBLIC_DEPRECATED_VERIFIER_CONTRACT=0x019e5204152a72891bf8cd0bed8f03593fdb29ceacd14fca587be5d9fcf87c0e
 NEXT_PUBLIC_OLD_VERIFIER_CONTRACT=0x4d546c8d60cfd591557ac0613be5ceeb0ea6f797e7d11c0b5160d145fa3089f
 NEXT_PUBLIC_VERIFIER_POP_CONTRACT=0x03528caf090179e337931ee669a5b0214041e1bae30d460ff07d2cea2c7a9106
+NEXT_PUBLIC_RPC_URL=https://sepolia.rpc.starknet.id/
+NEXT_PUBLIC_STARKNET_ID=https://app.starknet.id

.gitignore

@@ -37,3 +37,5 @@ yarn-error.log*
 next-env.d.ts
 
 yarn.lock
+
+.env

components/UI/navbar.tsx

@@ -10,7 +10,12 @@ import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
 import styles from "../../styles/components/navbar.module.css";
 import connectStyles from "../../styles/components/walletConnect.module.css";
 import Button from "./button";
-import { useConnect, useAccount, useDisconnect } from "@starknet-react/core";
+import {
+  useConnect,
+  useAccount,
+  useDisconnect,
+  useSwitchChain,
+} from "@starknet-react/core";
 import ModalMessage from "./modalMessage";
 import { useDisplayName } from "../../hooks/displayName.tsx";
 import { useMediaQuery } from "@mui/material";
@@ -21,12 +26,13 @@ import ProfilFilledIcon from "./iconsComponents/icons/profilFilledIcon";
 import DesktopNav from "./desktopNav";
 import CloseFilledIcon from "./iconsComponents/icons/closeFilledIcon";
 import { StarknetIdJsContext } from "../../context/StarknetIdJsProvider";
-import { StarkProfile } from "starknetid.js";
+import { StarknetChainId, StarkProfile } from "starknetid.js";
 import { Connector } from "starknetkit";
 import {
   getConnectorIcon,
   getLastConnected,
   getLastConnector,
+  supportSwitchNetwork,
 } from "@/utils/connectorWrapper";
 import WalletConnect from "./walletConnect";
 import ArrowDownIcon from "./iconsComponents/icons/arrowDownIcon";
@@ -40,7 +46,7 @@ const Navbar: FunctionComponent = () => {
   const [desktopNav, setDesktopNav] = useState<boolean>(false);
   const { address } = useAccount();
   const [isConnected, setIsConnected] = useState<boolean>(false);
-  const { connectAsync, connectors } = useConnect();
+  const { connectAsync, connectors, connector } = useConnect();
   const { disconnect } = useDisconnect();
   const isMobile = useMediaQuery("(max-width:425px)");
   const domainOrAddress = useDisplayName(address ?? "", isMobile);
@@ -54,6 +60,14 @@ const Navbar: FunctionComponent = () => {
   const [showWalletConnectModal, setShowWalletConnectModal] =
     useState<boolean>(false);
   const router = useRouter();
+  const { switchChainAsync } = useSwitchChain({
+    params: {
+      chainId:
+        network === "testnet"
+          ? StarknetChainId.SN_SEPOLIA
+          : StarknetChainId.SN_MAIN,
+    },
+  });
 
   useEffect(() => {
     const pageName = router.pathname.split("/")[1];
@@ -71,8 +85,6 @@ const Navbar: FunctionComponent = () => {
 
   const connectWallet = async (connector: Connector) => {
     try {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
       await connectAsync({ connector });
       localStorage.setItem("SID-connectedWallet", connector.id);
       localStorage.setItem("SID-lastUsedConnector", connector.id);
@@ -132,6 +144,15 @@ const Navbar: FunctionComponent = () => {
     return textToReturn;
   }
 
+  const switchNetwork = async () => {
+    if (supportSwitchNetwork(connector)) {
+      const res = await switchChainAsync();
+      if (res) setIsWrongNetwork(false);
+    } else {
+      disconnectByClick();
+    }
+  };
+
   return (
     <>
       <div className={"fixed w-full z-20 bg-background top-0"}>
@@ -372,8 +393,10 @@ const Navbar: FunctionComponent = () => {
               network to be able use it.
             </p>
             <div className="mt-5">
-              <Button onClick={() => disconnectByClick()}>
-                {`Disconnect`}
+              <Button onClick={() => switchNetwork()}>
+                {supportSwitchNetwork(connector)
+                  ? `Switch to ${network}`
+                  : "Disconnect"}
               </Button>
             </div>
           </div>

components/UI/walletConnect.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useState } from "react";
+import React, { FunctionComponent } from "react";
 import { useRouter } from "next/router";
 import { Modal, useMediaQuery } from "@mui/material";
 import { Connector } from "starknetkit";
@@ -8,9 +8,9 @@ import {
   getConnectorDiscovery,
   getConnectorIcon,
   getConnectorName,
-  isInArgentMobileAppBrowser,
   sortConnectors,
 } from "@/utils/connectorWrapper";
+import { isInArgentMobileAppBrowser } from "starknetkit/argentMobile";
 
 type WalletConnectProps = {
   closeModal: () => void;
@@ -26,21 +26,24 @@ const WalletConnect: FunctionComponent<WalletConnectProps> = ({
   connectWallet,
 }) => {
   const router = useRouter();
-  const [isArgentMobile, setIsArgentMobile] = useState(false);
   const connect = (connector: Connector) => {
     connectWallet(connector);
     closeModal();
   };
   const isMobile = useMediaQuery("(max-width: 768px)");
 
-  useEffect(() => {
-    if (typeof window !== "undefined")
-      setIsArgentMobile(isInArgentMobileAppBrowser());
-  }, []);
-
   const filterConnectors = (connectors: Connector[]) => {
-    if (isArgentMobile) {
-      return connectors.filter((connector) => connector.id === "argentMobile");
+    if (isInArgentMobileAppBrowser()) {
+      // Filter connectors and remove duplicates
+      const uniqueConnectors = connectors
+        .filter(
+          (connector) =>
+            connector.id === "argentMobile" || connector.id === "argentX"
+        )
+        .reduce((map, connector) => map.set(connector.id, connector), new Map())
+        .values();
+
+      return Array.from(uniqueConnectors);
     }
     if (!isMobile) return connectors;
     return connectors.filter((connector) => connector.id !== "argentX");
@@ -102,13 +105,17 @@ const WalletConnect: FunctionComponent<WalletConnectProps> = ({
                   onClick={() => tryConnect(connector, isAvailable)}
                 >
                   <img
-                    src={getConnectorIcon(connector.id)}
+                    src={
+                      isInArgentMobileAppBrowser()
+                        ? getConnectorIcon("argentMobile")
+                        : getConnectorIcon(connector.id)
+                    }
                     className={styles.walletIcon}
                   />
                   <div className={styles.walletName}>
                     <p>
                       {needInstall(connector, isAvailable) ? "Install " : ""}
-                      {connector.id === "argentMobile" && isMobile
+                      {isInArgentMobileAppBrowser()
                         ? "Argent"
                         : getConnectorName(connector.id)}
                     </p>

components/discount/freeRegisterCheckout.tsx

@@ -106,7 +106,12 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
     // salt must not be empty to preserve privacy
     if (!salt) return;
     (async () => {
-      setMetadataHash(await computeMetadataHash("none", "none", salt));
+      setMetadataHash(await computeMetadataHash(
+        "none",
+        "none",
+        salt
+      )
+      );
     })();
   }, [salt]);
 
@@ -168,6 +173,23 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
     });
   }, [coupon, domain, address, isWrongNetwork]);
 
+  const getButtonText = () => {
+    if (isWrongNetwork) return "Wrong Network";
+    if (!termsBox) return "Please accept terms & policies";
+    if (couponError || !coupon) return "Enter a valid Coupon";
+    if (loadingCallData) return "Loading call data";
+    if (loadingGas) {
+      if (invalidTx) return txError?.short;
+      return "Loading gas";
+    }
+    if (loadingTypedData) return "Building typed data";
+    if (loadingDeploymentData) {
+      if (paymasterRewards.length > 0) return "Loading deployment data";
+      return "No Paymaster reward available";
+    }
+    return "Register my domain";
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.card}>
@@ -222,25 +244,7 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
                 loadingTypedData
               }
             >
-              {isWrongNetwork
-                ? "Wrong Network"
-                : !termsBox
-                ? "Please accept terms & policies"
-                : couponError || !coupon
-                ? "Enter a valid Coupon"
-                : loadingCallData
-                ? "Loading call data"
-                : loadingGas
-                ? invalidTx
-                  ? txError?.short
-                  : "Loading gas"
-                : loadingTypedData
-                ? "Building typed data"
-                : loadingDeploymentData
-                ? paymasterRewards.length > 0
-                  ? "Loading deployment data"
-                  : "No Paymaster reward available"
-                : "Register my domain"}
+              {getButtonText()}
             </Button>
           ) : (
             <ConnectButton />

components/discount/freeRenewalCheckout.tsx

@@ -2,10 +2,8 @@ import React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import Button from "../UI/button";
 import { useAccount, useSendTransaction } from "@starknet-react/core";
-import { formatHexString, isValidEmail } from "../../utils/stringService";
 import { applyRateToBigInt } from "../../utils/feltService";
 import styles from "../../styles/components/registerV2.module.css";
-import TextField from "../UI/textField";
 import SwissForm from "../domains/swissForm";
 import { Divider } from "@mui/material";
 import RegisterSummary from "../domains/registerSummary";
@@ -33,18 +31,14 @@ import { areArraysEqual } from "@/utils/arrayService";
 import { useFreeRenewalTxPrep } from "@/hooks/checkout/useFreeRenewalTxPrep";
 
 type FreeRenewalCheckoutProps = {
-  groups: string[];
   goBack: () => void;
   offer: Discount;
 };
 
 const FreeRenewalCheckout: FunctionComponent<FreeRenewalCheckoutProps> = ({
-  groups,
   offer,
   goBack,
 }) => {
-  const [email, setEmail] = useState<string>("");
-  const [emailError, setEmailError] = useState<boolean>(true);
   const [isSwissResident, setIsSwissResident] = useState<boolean>(false);
   const [salesTaxRate, setSalesTaxRate] = useState<number>(0);
   const [salesTaxAmount, setSalesTaxAmount] = useState<bigint>(BigInt(0));
@@ -99,7 +93,7 @@ const FreeRenewalCheckout: FunctionComponent<FreeRenewalCheckoutProps> = ({
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           meta_hash: metadataHash,
-          email: email,
+          email: "none",
           tax_state: isSwissResident ? "switzerland" : "none",
           salt: salt,
         }),
@@ -108,17 +102,6 @@ const FreeRenewalCheckout: FunctionComponent<FreeRenewalCheckoutProps> = ({
         .catch((err) => console.log("Error on sending metadata:", err));
     }
 
-    // Subscribe to auto renewal mailing list if renewal box is checked
-    fetch(`${process.env.NEXT_PUBLIC_SALES_SERVER_LINK}/mail_subscribe`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        tx_hash: formatHexString(renewData.transaction_hash),
-        groups,
-      }),
-    })
-      .then((res) => res.json())
-      .catch((err) => console.log("Error on registering to email:", err));
 
     addTransaction({
       timestamp: Date.now(),
@@ -211,20 +194,15 @@ const FreeRenewalCheckout: FunctionComponent<FreeRenewalCheckoutProps> = ({
 
     const computeHashes = async () => {
       const hash = await computeMetadataHash(
-        email,
+        "none",
         isSwissResident ? "switzerland" : "none",
         salt
       );
       setMetadataHash(hash);
     };
 
     computeHashes();
-  }, [email, salt, isSwissResident, needMetadata]);
-
-  function changeEmail(value: string): void {
-    setEmail(value);
-    setEmailError(isValidEmail(value) ? false : true);
-  }
+  }, [salt, isSwissResident, needMetadata]);
 
   useEffect(() => {
     if (isSwissResident) {
@@ -287,18 +265,6 @@ const FreeRenewalCheckout: FunctionComponent<FreeRenewalCheckoutProps> = ({
             <h3 className={styles.domain}>Renew Your domain(s)</h3>
           </div>
           <div className="flex flex-col items-start gap-6 self-stretch">
-            {needMetadata && (
-              <TextField
-                helperText="Secure your domain's future and stay ahead with vital updates. Your email stays private with us, always."
-                label="Email address"
-                value={email}
-                onChange={(e) => changeEmail(e.target.value)}
-                color="secondary"
-                error={emailError}
-                errorMessage="Please enter a valid email address"
-                type="email"
-              />
-            )}
             {needMetadata && (
               <SwissForm
                 isSwissResident={isSwissResident}
@@ -347,17 +313,14 @@ const FreeRenewalCheckout: FunctionComponent<FreeRenewalCheckoutProps> = ({
                   domainsMinting === selectedDomains ||
                   !address ||
                   !termsBox ||
-                  (emailError && needMetadata) ||
                   !areDomainSelected(selectedDomains)
                 }
               >
                 {!termsBox
                   ? "Please accept terms & policies"
                   : !areDomainSelected(selectedDomains)
-                  ? "Select a domain to renew"
-                  : emailError && needMetadata
-                  ? "Enter a valid Email"
-                  : "Renew my domain(s)"}
+                    ? "Select a domain to renew"
+                    : "Renew my domain(s)"}
               </Button>
             ) : (
               <ConnectButton />