feat: upgrade starknet react et starknetkit (#877)

* feat: upgrade to latest version of starknet-react & starknetkit * fix: ArgentMobile connection * fix: build errors * fix: ClickablePersonhoodIcon
lfglabs-dev · Sep 16, 2024 · 9957c1f · 9957c1f
1 parent 6c2286f
commit 9957c1f
Show file tree

Hide file tree

Showing 32 changed files with 280 additions and 146 deletions.
diff --git a/components/UI/modalProfilePic.tsx b/components/UI/modalProfilePic.tsx
@@ -7,7 +7,7 @@ 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 { useSendTransaction } from "@starknet-react/core";
 import { Call } from "starknet";
 import identityChangeCalls from "../../utils/callData/identityChangeCalls";
 import { hexToDecimal, toUint256 } from "../../utils/feltService";
@@ -32,7 +32,7 @@ const ModalProfilePic: FunctionComponent<ModalProfilePicProps> = ({
 }) => {
   const [callData, setCallData] = useState<Call[]>([]);
   const { addTransaction } = useNotificationManager();
-  const { writeAsync: execute, data: updateData } = useContractWrite({
+  const { sendAsync: execute, data: updateData } = useSendTransaction({
     calls: callData,
   });
 

diff --git a/components/discount/freeRenewalCheckout.tsx b/components/discount/freeRenewalCheckout.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import Button from "../UI/button";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount, useSendTransaction } from "@starknet-react/core";
 import {
   formatHexString,
   isValidEmail,
@@ -83,7 +83,7 @@ const FreeRenewalCheckout: FunctionComponent<FreeRenewalCheckoutProps> = ({
   const [selectedDomains, setSelectedDomains] =
     useState<Record<string, boolean>>();
   const { address } = useAccount();
-  const { writeAsync: execute, data: renewData } = useContractWrite({
+  const { sendAsync: execute, data: renewData } = useSendTransaction({
     calls: callData,
   });
   const [domainsMinting, setDomainsMinting] =

diff --git a/components/discount/registerDiscount.tsx b/components/discount/registerDiscount.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import Button from "../UI/button";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount, useSendTransaction } from "@starknet-react/core";
 import { utils } from "starknetid.js";
 import {
   formatHexString,
@@ -86,7 +86,7 @@ const RegisterDiscount: FunctionComponent<RegisterDiscountProps> = ({
   const [renewalBox, setRenewalBox] = useState<boolean>(false);
   const [metadataHash, setMetadataHash] = useState<string | undefined>();
   const { account, address } = useAccount();
-  const { writeAsync: execute, data: registerData } = useContractWrite({
+  const { sendAsync: execute, data: registerData } = useSendTransaction({
     calls: callData,
   });
   const hasMainDomain = !useDisplayName(address ?? "", false).startsWith("0x");

diff --git a/components/domains/autorenewal.tsx b/components/domains/autorenewal.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import Button from "../UI/button";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount, useSendTransaction } from "@starknet-react/core";
 import {
   formatHexString,
   isValidEmail,
@@ -74,7 +74,7 @@ const Subscription: FunctionComponent<SubscriptionProps> = ({ groups }) => {
   const [selectedDomains, setSelectedDomains] =
     useState<Record<string, boolean>>();
   const { address } = useAccount();
-  const { writeAsync: execute, data: autorenewData } = useContractWrite({
+  const { sendAsync: execute, data: autorenewData } = useSendTransaction({
     calls: callData,
   });
   const [domainsMinting, setDomainsMinting] =

diff --git a/components/domains/externalDomainActions.tsx b/components/domains/externalDomainActions.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount, useSendTransaction } from "@starknet-react/core";
 import styles from "../../styles/components/identityMenu.module.css";
 import { utils } from "starknetid.js";
 import ClickableAction from "../UI/iconsComponents/clickableAction";
@@ -42,7 +42,7 @@ const ExternalDomainActions: FunctionComponent<ExternalDomainActionsProps> = ({
   });
 
   //Set as main domain execute
-  const { writeAsync: set_address_to_domain } = useContractWrite({
+  const { sendAsync: set_address_to_domain } = useSendTransaction({
     calls: [resolverCalls.setAddresstoDomain(callDataEncodedDomain)],
   });
 

diff --git a/components/domains/externalDomainTransferModal.tsx b/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 { useSendTransaction } from "@starknet-react/core";
 import { useRouter } from "next/router";
 import { isHexString, minifyAddress } from "../../utils/stringService";
 import { utils } from "starknetid.js";
@@ -45,7 +45,7 @@ const ExternalDomainsTransferModal: FunctionComponent<
   const [isSendingTx, setIsSendingTx] = useState(false);
   const [callData, setCallData] = useState<Call[]>([]);
 
-  const { writeAsync: transfer_name, data: transferData } = useContractWrite({
+  const { sendAsync: transfer_name, data: transferData } = useSendTransaction({
     calls: callData,
   });
 

diff --git a/components/domains/steps/checkoutCard.tsx b/components/domains/steps/checkoutCard.tsx
@@ -13,7 +13,7 @@ import {
   NotificationType,
   TransactionType,
 } from "@/utils/constants";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount, useSendTransaction } from "@starknet-react/core";
 import Button from "@/components/UI/button";
 import RegisterSummary from "../registerSummary";
 import { useNotificationManager } from "@/hooks/useNotificationManager";
@@ -52,7 +52,7 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
   const { addTransaction } = useNotificationManager();
   const tokenBalances = useBalances(address); // fetch the user balances for all whitelisted tokens
   const [callData, setCallData] = useState<Call[]>([]);
-  const { writeAsync: execute, data: checkoutData } = useContractWrite({
+  const { sendAsync: execute, data: checkoutData } = useSendTransaction({
     calls: callData,
   });
 

diff --git a/components/identities/actions/addEvmModal.tsx b/components/identities/actions/addEvmModal.tsx
@@ -4,7 +4,7 @@ import {
   Modal,
   TextField,
 } from "@mui/material";
-import { useContractWrite } from "@starknet-react/core";
+import { useSendTransaction } from "@starknet-react/core";
 import React, { FunctionComponent, useEffect, useRef, useState } from "react";
 import styles from "../../../styles/components/evmModalMessage.module.css";
 import Button from "../../UI/button";
@@ -42,7 +42,7 @@ const AddEvmModal: FunctionComponent<AddEvmModalProps> = ({
   const abortControllerRef = useRef<AbortController | null>(null);
   const [isSendingTx, setIsSendingTx] = useState(false);
 
-  const { writeAsync: set_user_data, data: userData } = useContractWrite({
+  const { sendAsync: set_user_data, data: userData } = useSendTransaction({
     calls:
       identity && isValid
         ? [

diff --git a/components/identities/actions/changeAddressModal.tsx b/components/identities/actions/changeAddressModal.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { TextField } from "@mui/material";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount, useSendTransaction } from "@starknet-react/core";
 import { isHexString, minifyAddress } from "../../../utils/stringService";
 import { hexToDecimal } from "../../../utils/feltService";
 import { useNotificationManager } from "../../../hooks/useNotificationManager";
@@ -30,8 +30,8 @@ const ChangeAddressModal: FunctionComponent<ChangeAddressModalProps> = ({
   const [isTxSent, setIsTxSent] = useState(false);
   const [isSendingTx, setIsSendingTx] = useState(false);
 
-  const { writeAsync: set_domain_to_address, data: domainToAddressData } =
-    useContractWrite({
+  const { sendAsync: set_domain_to_address, data: domainToAddressData } =
+    useSendTransaction({
       calls: identity
         ? identityChangeCalls.setStarknetAddress(
             identity,

diff --git a/components/identities/actions/clickable/clickablePersonhoodIcon.tsx b/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 } from "starknet";
-import { useContractWrite } from "@starknet-react/core";
+import { useSendTransaction } from "@starknet-react/core";
 import { hexToDecimal } from "../../../../utils/feltService";
 import {
   bigintToStringHex,
@@ -44,10 +44,10 @@ const ClickablePersonhoodIcon: FunctionComponent<
   const [sessionId, setSessionId] = useState<string | undefined>();
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [callData, setCallData] = useState<Call>();
+  const [callData, setCallData] = useState<Call[]>([]);
   const { addTransaction } = useNotificationManager();
-  const { writeAsync: execute, data: verifierData } = useContractWrite({
-    calls: [callData as Call],
+  const { sendAsync: execute, data: verifierData } = useSendTransaction({
+    calls: callData,
   });
   const network =
     process.env.NEXT_PUBLIC_IS_TESTNET === "true" ? "testnet" : "mainnet";
@@ -70,7 +70,7 @@ const ClickablePersonhoodIcon: FunctionComponent<
   useEffect(() => {
     const executeVerification = () => {
       execute().finally(() => {
-        setCallData(undefined);
+        setCallData([]);
         setIsLoading(false);
         setIsOpen(false);
         setSessionId(undefined);
@@ -124,16 +124,16 @@ const ClickablePersonhoodIcon: FunctionComponent<
       .then((response) => response.json())
       .then((sig) => {
         const hexSessionId = "0x" + (sessionId as string).replace(/-/g, "");
-        setCallData(
+        setCallData([
           identityChangeCalls.writeVerifierData(
             process.env.NEXT_PUBLIC_VERIFIER_POP_CONTRACT as string,
             tokenId,
             Math.floor(Date.now() / 1000 + 15 * 60),
             "proof_of_personhood",
             hexToDecimal(hexSessionId),
             [sig.r, sig.s]
-          )
-        );
+          ),
+        ]);
       })
       .catch((error) =>
         console.log("An error occurred while fetching signture", error)

diff --git a/components/identities/actions/identityActions.tsx b/components/identities/actions/identityActions.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useMemo } from "react";
 import { FunctionComponent, useEffect, useState } from "react";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount, useSendTransaction } from "@starknet-react/core";
 import ChangeAddressModal from "./changeAddressModal";
 import TransferFormModal from "./transferFormModal";
 import SubdomainModal from "./subdomainModal";
@@ -66,8 +66,8 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
   const [disableRenewalCalldata, setDisableRenewalCalldata] = useState<Call[]>(
     []
   );
-  const { writeAsync: disableRenewal, data: disableRenewalData } =
-    useContractWrite({
+  const { sendAsync: disableRenewal, data: disableRenewalData } =
+    useSendTransaction({
       calls: disableRenewalCalldata,
     });
 
@@ -102,7 +102,7 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
     callDataEncodedDomain.push(domain.toString(10));
   });
 
-  const { writeAsync: setMainId, data: mainDomainData } = useContractWrite({
+  const { sendAsync: setMainId, data: mainDomainData } = useSendTransaction({
     calls: identity
       ? identityChangeCalls.setAsMainId(
           identity,

diff --git a/components/identities/actions/subdomainModal.tsx b/components/identities/actions/subdomainModal.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { TextField } from "@mui/material";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount, useSendTransaction } from "@starknet-react/core";
 import { useIsValid } from "../../../hooks/naming";
 import { numberToString } from "../../../utils/stringService";
 import SelectIdentity from "../../domains/selectIdentity";
@@ -32,8 +32,8 @@ const SubdomainModal: FunctionComponent<SubdomainModalProps> = ({
   const [callData, setCallData] = useState<Call[]>([]);
   const { address } = useAccount();
   const { addTransaction } = useNotificationManager();
-  const { writeAsync: transfer_domain, data: transferDomainData } =
-    useContractWrite({
+  const { sendAsync: transfer_domain, data: transferDomainData } =
+    useSendTransaction({
       calls: callData,
     });
   const [isTxSent, setIsTxSent] = useState(false);

diff --git a/components/identities/actions/transferFormModal.tsx b/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 { useSendTransaction } from "@starknet-react/core";
 import { useRouter } from "next/router";
 import { isHexString, minifyAddress } from "../../../utils/stringService";
 import { utils } from "starknetid.js";
@@ -36,8 +36,8 @@ const TransferFormModal: FunctionComponent<TransferFormModalProps> = ({
   const [isTxSent, setIsTxSent] = useState(false);
   const [isSendingTx, setIsSendingTx] = useState(false);
 
-  const { writeAsync: transfer_identity_and_set_domain, data: transferData } =
-    useContractWrite({
+  const { sendAsync: transfer_identity_and_set_domain, data: transferData } =
+    useSendTransaction({
       calls: identity
         ? identityChangeCalls.transfer(identity, targetAddress)
         : [],

diff --git a/components/solana/changeAddressModal.tsx b/components/solana/changeAddressModal.tsx
@@ -1,5 +1,5 @@
 import { Modal, TextField } from "@mui/material";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount, useSendTransaction } from "@starknet-react/core";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { isHexString, minifyAddress } from "../../utils/stringService";
 import styles from "../../styles/components/modalMessage.module.css";
@@ -30,7 +30,7 @@ const ChangeAddressModal: FunctionComponent<ChangeAddressModalProps> = ({
   const { addTransaction } = useNotificationManager();
   const [isTxSent, setIsTxSent] = useState(false);
   const [callData, setCallData] = useState<Call[]>([]);
-  const { writeAsync: setResolving, data: resolvingData } = useContractWrite({
+  const { sendAsync: setResolving, data: resolvingData } = useSendTransaction({
     calls: callData,
   });
 

diff --git a/components/solana/domainActions.tsx b/components/solana/domainActions.tsx
@@ -12,8 +12,8 @@ import styles from "../../styles/solana.module.css";
 import { Abi, Call } from "starknet";
 import {
   useAccount,
-  useContractRead,
-  useContractWrite,
+  useReadContract,
+  useSendTransaction,
 } from "@starknet-react/core";
 import SolanaCalls from "../../utils/callData/solanaCalls";
 import { utils } from "starknetid.js";
@@ -36,16 +36,16 @@ const DomainActions: FunctionComponent<DomainActionsProps> = ({ name }) => {
   const { addTransaction } = useNotificationManager();
   const [isTxSent, setIsTxSent] = useState(false);
   const [mainDomainCalldata, setMainDomainCalldata] = useState<Call[]>([]);
-  const { writeAsync: executeMainDomain, data: mainDomainData } =
-    useContractWrite({
+  const { sendAsync: executeMainDomain, data: mainDomainData } =
+    useSendTransaction({
       calls: mainDomainCalldata,
     });
   const { contract } = useNamingContract();
   const encodedDomain = utils
     .encodeDomain(`${name}.sol.stark`)
     .map((x) => x.toString());
-  const { data: resolveData } = useContractRead({
-    address: contract?.address as string,
+  const { data: resolveData } = useReadContract({
+    address: contract?.address as HexString,
     abi: contract?.abi as Abi,
     functionName: "domain_to_address",
     args: [encodedDomain, []],