feat: add metamask (#936)

* feat: add metamask connector * chore: update starknetkit * feat: add metamask connexion * fix: calls * fix: use string[] for callDataEncodedDomain * fix: identity calls
lfglabs-dev · Dec 12, 2024 · a65c9cf · a65c9cf
1 parent c9c94e4
commit a65c9cf
Show file tree

Hide file tree

Showing 18 changed files with 5,644 additions and 4,368 deletions.
diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
@@ -85,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);

diff --git a/components/UI/walletConnect.tsx b/components/UI/walletConnect.tsx
@@ -10,7 +10,7 @@ import {
   getConnectorName,
   sortConnectors,
 } from "@/utils/connectorWrapper";
-import { isInArgentMobileAppBrowser } from 'starknetkit/argentMobile';
+import { isInArgentMobileAppBrowser } from "starknetkit/argentMobile";
 
 type WalletConnectProps = {
   closeModal: () => void;
@@ -36,7 +36,10 @@ const WalletConnect: FunctionComponent<WalletConnectProps> = ({
     if (isInArgentMobileAppBrowser()) {
       // Filter connectors and remove duplicates
       const uniqueConnectors = connectors
-        .filter((connector) => connector.id === "argentMobile" || connector.id === "argentX")
+        .filter(
+          (connector) =>
+            connector.id === "argentMobile" || connector.id === "argentX"
+        )
         .reduce((map, connector) => map.set(connector.id, connector), new Map())
         .values();
 
@@ -102,7 +105,11 @@ const WalletConnect: FunctionComponent<WalletConnectProps> = ({
                   onClick={() => tryConnect(connector, isAvailable)}
                 >
                   <img
-                    src={isInArgentMobileAppBrowser() ? getConnectorIcon('argentMobile') : getConnectorIcon(connector.id)}
+                    src={
+                      isInArgentMobileAppBrowser()
+                        ? getConnectorIcon("argentMobile")
+                        : getConnectorIcon(connector.id)
+                    }
                     className={styles.walletIcon}
                   />
                   <div className={styles.walletName}>

diff --git a/components/domains/externalDomainActions.tsx b/components/domains/externalDomainActions.tsx
@@ -36,7 +36,7 @@ const ExternalDomainActions: FunctionComponent<ExternalDomainActionsProps> = ({
 
   // Add all subdomains to the parameters
   const encodedDomains = utils.encodeDomain(domain);
-  const callDataEncodedDomain: (number | string)[] = [encodedDomains.length];
+  const callDataEncodedDomain: string[] = [encodedDomains.length.toString()];
   encodedDomains.forEach((domain) => {
     callDataEncodedDomain.push(domain.toString(10));
   });

diff --git a/components/identities/actions/changeAddressModal.tsx b/components/identities/actions/changeAddressModal.tsx
@@ -12,7 +12,7 @@ import TransactionModal from "@/components/UI/transactionModal";
 type ChangeAddressModalProps = {
   handleClose: () => void;
   isModalOpen: boolean;
-  callDataEncodedDomain: (number | string)[];
+  callDataEncodedDomain: string[];
   identity?: Identity;
   currentTargetAddress?: string;
 };

diff --git a/components/identities/actions/clickable/clickablePersonhoodIcon.tsx b/components/identities/actions/clickable/clickablePersonhoodIcon.tsx
@@ -126,7 +126,9 @@ const ClickablePersonhoodIcon: FunctionComponent<
         const hexSessionId = "0x" + (sessionId as string).replace(/-/g, "");
         setCallData([
           identityChangeCalls.writeVerifierData(
-            process.env.NEXT_PUBLIC_VERIFIER_POP_CONTRACT as string,
+            hexToDecimal(
+              process.env.NEXT_PUBLIC_VERIFIER_POP_CONTRACT as string
+            ),
             tokenId,
             Math.floor(Date.now() / 1000 + 15 * 60),
             "proof_of_personhood",

diff --git a/components/identities/actions/identityActions.tsx b/components/identities/actions/identityActions.tsx
@@ -51,7 +51,7 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
   const encodedDomains = utils.encodeDomain(identity?.domain);
   const { addTransaction } = useNotificationManager();
   const [isTxModalOpen, setIsTxModalOpen] = useState(false);
-  const [txHash, setTxHash] = useState<string>('');
+  const [txHash, setTxHash] = useState<string>("");
   const [viewMoreClicked, setViewMoreClicked] = useState<boolean>(false);
   const [isMainDomain, setIsMainDomain] = useState<boolean>(
     identity ? identity.isMain : false
@@ -98,7 +98,7 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
   }, [identity]);
 
   // Add all subdomains to the parameters
-  const callDataEncodedDomain: (number | string)[] = [encodedDomains.length];
+  const callDataEncodedDomain: string[] = [encodedDomains.length.toString()];
   encodedDomains.forEach((domain) => {
     callDataEncodedDomain.push(domain.toString(10));
   });
@@ -247,7 +247,7 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
           )}
           {identity && isOwner && address && (
             <div className={styles.identityActions}>
-              {callDataEncodedDomain[0] === 1 && !isAutoRenewalEnabled ? (
+              {callDataEncodedDomain[0] === "1" && !isAutoRenewalEnabled ? (
                 <ClickableAction
                   title="ENABLE SUBSCRIPTION"
                   description={nextAutoRenew}
@@ -256,7 +256,7 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
                   onClick={() => router.push("/subscription")}
                 />
               ) : null}
-              {callDataEncodedDomain[0] === 1 ? (
+              {callDataEncodedDomain[0] === "1" ? (
                 <ClickableAction
                   title="RENEW YOUR DOMAIN"
                   style="primary"
@@ -316,7 +316,7 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
                     }
                     onClick={() => setIsSubdomainFormOpen(true)}
                   />
-                  {callDataEncodedDomain[0] === 1 && isAutoRenewalEnabled ? (
+                  {callDataEncodedDomain[0] === "1" && isAutoRenewalEnabled ? (
                     <ClickableAction
                       title="DISABLE SUBSCRIPTION"
                       description={nextAutoRenew}

diff --git a/components/identities/actions/subdomainModal.tsx b/components/identities/actions/subdomainModal.tsx
@@ -13,7 +13,7 @@ import TransactionModal from "@/components/UI/transactionModal";
 type SubdomainModalProps = {
   handleClose: () => void;
   isModalOpen: boolean;
-  callDataEncodedDomain: (number | string)[];
+  callDataEncodedDomain: string[];
   domain?: string;
 };
 
@@ -56,10 +56,10 @@ const SubdomainModal: FunctionComponent<SubdomainModalProps> = ({
           contractAddress: process.env.NEXT_PUBLIC_NAMING_CONTRACT as string,
           entrypoint: "transfer_domain",
           calldata: [
-            Number(callDataEncodedDomain[0]) + 1,
+            numberToString(Number(callDataEncodedDomain[0]) + 1),
             encodedSubdomain,
             ...callDataEncodedDomain.slice(1),
-            targetTokenId,
+            numberToString(targetTokenId),
           ],
         },
       ]);
@@ -74,10 +74,10 @@ const SubdomainModal: FunctionComponent<SubdomainModalProps> = ({
           contractAddress: process.env.NEXT_PUBLIC_NAMING_CONTRACT as string,
           entrypoint: "transfer_domain",
           calldata: [
-            Number(callDataEncodedDomain[0]) + 1,
+            numberToString(Number(callDataEncodedDomain[0]) + 1),
             encodedSubdomain,
             ...callDataEncodedDomain.slice(1),
-            newTokenId,
+            numberToString(newTokenId),
           ],
         },
       ]);

diff --git a/hooks/contracts.ts b/hooks/contracts.ts
@@ -9,7 +9,7 @@ import renewal_abi from "../abi/starknet/renewal.sierra.json";
 import nft_pp_verifier_abi from "../abi/starknet/nft_pp_verifier_abi.json";
 import sol_subdomain_abi from "../abi/starknet/sol_subdomain_abi.json";
 import multicall_abi from "../abi/starknet/multicall_abi.json";
-import { Abi } from "starknet";
+import type { Abi } from "starknet";
 
 export function useStarknetIdContract() {
   return useContract({