fix: avatar selection confirmation

components/UI/modalProfilePic.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import styles from "../../styles/components/modalMessage.module.css";
 import ppStyles from "../../styles/components/profilePic.module.css";
 import { FunctionComponent } from "react";
@@ -7,13 +7,13 @@ import ClickableAction from "./iconsComponents/clickableAction";
 import theme from "../../styles/theme";
 import DoneFilledIcon from "./iconsComponents/icons/doneFilledIcon";
 import ArrowLeftIcon from "./iconsComponents/icons/arrowLeftIcon";
-import { useContractWrite } from "@starknet-react/core";
 import { Call } from "starknet";
 import identityChangeCalls from "../../utils/callData/identityChangeCalls";
 import { hexToDecimal, toUint256 } from "../../utils/feltService";
 import { getImgUrl } from "../../utils/stringService";
 import { useNotificationManager } from "../../hooks/useNotificationManager";
 import { NotificationType, TransactionType } from "../../utils/constants";
+import { useAccount } from "@starknet-react/core";
 
 type ModalProfilePicProps = {
   closeModal: (cancel: boolean) => void;
@@ -31,10 +31,8 @@ const ModalProfilePic: FunctionComponent<ModalProfilePicProps> = ({
   tokenId,
 }) => {
   const [callData, setCallData] = useState<Call[]>([]);
+  const { account } = useAccount();
   const { addTransaction } = useNotificationManager();
-  const { writeAsync: execute, data: updateData } = useContractWrite({
-    calls: callData,
-  });
 
   useEffect(() => {
     if (!nftData) return;
@@ -49,22 +47,28 @@ const ModalProfilePic: FunctionComponent<ModalProfilePicProps> = ({
     ]);
   }, [nftData, tokenId]);
 
-  useEffect(() => {
-    if (!updateData?.transaction_hash) return;
-    addTransaction({
-      timestamp: Date.now(),
-      subtext: `For identity ${tokenId}`,
-      type: NotificationType.TRANSACTION,
-      data: {
-        type: TransactionType.SET_PFP,
-        hash: updateData.transaction_hash,
-        status: "pending",
-      },
-    });
-    setPfpTxHash(updateData.transaction_hash);
-    closeModal(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [updateData]); // We want to trigger this only when the tx passed
+  const confirm = useCallback(() => {
+    if (!account) return;
+    account
+      .execute(callData)
+      .then((tx) => {
+        addTransaction({
+          timestamp: Date.now(),
+          subtext: `For identity ${tokenId}`,
+          type: NotificationType.TRANSACTION,
+          data: {
+            type: TransactionType.SET_PFP,
+            hash: tx.transaction_hash,
+            status: "pending",
+          },
+        });
+        setPfpTxHash(tx.transaction_hash);
+        closeModal(false);
+      })
+      .catch((error) => {
+        console.error("Transaction execution failed", error);
+      });
+  }, [account, callData, addTransaction, setPfpTxHash, tokenId, closeModal]);
 
   return (
     <Modal
@@ -106,7 +110,7 @@ const ModalProfilePic: FunctionComponent<ModalProfilePicProps> = ({
               />
             }
             description=""
-            onClick={() => execute()}
+            onClick={confirm}
           />
           <div className={ppStyles.modalBack} onClick={() => closeModal(true)}>
             <ArrowLeftIcon width="24" color={theme.palette.secondary.main} />

components/discount/freeRegisterCheckout.tsx

@@ -3,7 +3,7 @@ import type { FunctionComponent } from "react";
 import { useEffect, useState } from "react";
 import type { Call } from "starknet";
 import Button from "../UI/button";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
 import { utils } from "starknetid.js";
 import { getDomainWithStark } from "../../utils/stringService";
 import { posthog } from "posthog-js";
@@ -20,6 +20,7 @@ import { getFreeDomain } from "@/utils/campaignService";
 import TermCheckbox from "../domains/termCheckbox";
 import { useRouter } from "next/router";
 import FreeRegisterSummary from "./freeRegisterSummary";
+import { useContractWrite } from "@/hooks/useContract";
 
 type FreeRegisterCheckoutProps = {
   domain: string;

components/discount/freeRenewalDiscount.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import Button from "../UI/button";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import {
   formatHexString,
   isValidEmail,

components/discount/registerDiscount.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import Button from "../UI/button";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import { utils } from "starknetid.js";
 import {
   formatHexString,

components/discount/renewalDiscount.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import Button from "../UI/button";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import {
   formatHexString,
   isValidEmail,

components/domains/autorenewal.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import Button from "../UI/button";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import {
   formatHexString,
   isValidEmail,

components/domains/externalDomainActions.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import styles from "../../styles/components/identityMenu.module.css";
 import { utils } from "starknetid.js";
 import ClickableAction from "../UI/iconsComponents/clickableAction";

components/domains/externalDomainTransferModal.tsx

@@ -5,7 +5,7 @@ import React, {
   useContext,
 } from "react";
 import { TextField, InputAdornment } from "@mui/material";
-import { useContractWrite } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import { useRouter } from "next/router";
 import { isHexString, minifyAddress } from "../../utils/stringService";
 import { utils } from "starknetid.js";

components/domains/steps/checkoutCard.tsx

@@ -17,7 +17,8 @@ import {
   TransactionType,
   swissVatRate,
 } from "@/utils/constants";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import Button from "@/components/UI/button";
 import RegisterSummary from "../registerSummary";
 import { useNotificationManager } from "@/hooks/useNotificationManager";

components/identities/actions/addEvmModal.tsx

@@ -4,7 +4,7 @@ import {
   Modal,
   TextField,
 } from "@mui/material";
-import { useContractWrite } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import React, { FunctionComponent, useEffect, useRef, useState } from "react";
 import styles from "../../../styles/components/evmModalMessage.module.css";
 import Button from "../../UI/button";

components/identities/actions/changeAddressModal.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { TextField } from "@mui/material";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import { isHexString, minifyAddress } from "../../../utils/stringService";
 import { hexToDecimal } from "../../../utils/feltService";
 import { useNotificationManager } from "../../../hooks/useNotificationManager";

components/identities/actions/clickable/clickablePersonhoodIcon.tsx

@@ -14,7 +14,7 @@ import {
 } from "@anima-protocol/personhood-sdk-react";
 import { useAccount } from "@starknet-react/core";
 import { Call, TypedData, constants } from "starknet";
-import { useContractWrite } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import { hexToDecimal } from "../../../../utils/feltService";
 import { minifyDomain } from "../../../../utils/stringService";
 import VerifiedIcon from "../../../UI/iconsComponents/icons/verifiedIcon";

components/identities/actions/identityActions.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useMemo } from "react";
 import { FunctionComponent, useEffect, useState } from "react";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import ChangeAddressModal from "./changeAddressModal";
 import TransferFormModal from "./transferFormModal";
 import SubdomainModal from "./subdomainModal";

components/identities/actions/subdomainModal.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { TextField } from "@mui/material";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import { useIsValid } from "../../../hooks/naming";
 import { numberToString } from "../../../utils/stringService";
 import SelectIdentity from "../../domains/selectIdentity";

components/identities/actions/transferFormModal.tsx

@@ -5,7 +5,7 @@ import React, {
   useContext,
 } from "react";
 import { TextField, InputAdornment } from "@mui/material";
-import { useContractWrite } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import { useRouter } from "next/router";
 import { isHexString, minifyAddress } from "../../../utils/stringService";
 import { utils } from "starknetid.js";

components/solana/changeAddressModal.tsx

@@ -1,5 +1,6 @@
 import { Modal, TextField } from "@mui/material";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { isHexString, minifyAddress } from "../../utils/stringService";
 import styles from "../../styles/components/modalMessage.module.css";

components/solana/domainActions.tsx

@@ -10,11 +10,8 @@ import React, { FunctionComponent, useEffect, useRef, useState } from "react";
 import OptionIcon from "../UI/iconsComponents/icons/optionIcon";
 import styles from "../../styles/solana.module.css";
 import { Abi, Call } from "starknet";
-import {
-  useAccount,
-  useContractRead,
-  useContractWrite,
-} from "@starknet-react/core";
+import { useAccount, useContractRead } from "@starknet-react/core";
+import { useContractWrite } from "@/hooks/useContract";
 import SolanaCalls from "../../utils/callData/solanaCalls";
 import { utils } from "starknetid.js";
 import ChangeAddressModal from "./changeAddressModal";

hooks/useContract.tsx

@@ -0,0 +1,21 @@
+import { useAccount } from "@starknet-react/core";
+import { useState } from "react";
+import { Call, InvokeFunctionResponse } from "starknet";
+
+export const useContractWrite = ({ calls }: { calls: Call[] }) => {
+  const { account } = useAccount();
+  const [txData, setTxData] = useState<InvokeFunctionResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  return {
+    data: txData,
+    writeAsync: async () =>
+      account
+        ? account
+            .execute(calls)
+            .then((tx) => setTxData(tx))
+            .catch((e) => setError(e))
+        : null,
+    error,
+  };
+};