update vite

templates/react/vite-ethers/src/components/Account.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { useEthereum } from './Context';
 
 export function Account() {

templates/react/vite-ethers/src/components/Balance.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState, useEffect } from 'react';
 import { ethers } from 'ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { useEthereum } from './Context';
 

templates/react/vite-ethers/src/components/BlockNumber.tsx

@@ -1,7 +1,4 @@
-'use client'
-
 import { useState, useEffect } from 'react';
-
 import { useEthereum } from './Context';
 
 export function BlockNumber() {

templates/react/vite-ethers/src/components/Connect.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { useEthereum } from './Context';
 
 export function Connect() {

templates/react/vite-ethers/src/components/Context.tsx

@@ -1,7 +1,5 @@
-'use client';
-
 import { JsonRpcSigner } from 'ethers';
-import React, { useState, useEffect, createContext, useContext } from 'react';
+import  { useState, useEffect, createContext, useContext } from 'react';
 import { BrowserProvider } from 'zksync-ethers';
 
 type Chain = {

templates/react/vite-ethers/src/components/NetworkSwitcher.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { useAsync } from '../hooks/useAsync';
 import { chains, useEthereum } from './Context';
 

templates/react/vite-ethers/src/components/ReadContract.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState, useEffect } from 'react';
 import { Contract } from 'zksync-ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { useEthereum } from './Context';
 import { daiContractConfig } from './contracts'

templates/react/vite-ethers/src/components/SendTransaction.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState } from 'react';
 import { ethers } from 'ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { useEthereum } from './Context';
 

templates/react/vite-ethers/src/components/SendTransactionPrepared.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState, useEffect } from 'react';
 import { ethers } from 'ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { useEthereum } from './Context';
 

templates/react/vite-ethers/src/components/SignMessage.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState, FormEvent } from 'react';
 import { ethers } from 'ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { useEthereum } from './Context';
 

templates/react/vite-ethers/src/components/SignTypedData.tsx

@@ -1,7 +1,4 @@
-'use client'
-
 import { ethers, type TypedDataField } from 'ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { defaultChain, useEthereum } from './Context';
 

templates/react/vite-ethers/src/components/Token.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState } from 'react';
 import { Contract } from 'zksync-ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { erc20ABI, daiContractConfig } from './contracts'
 import { useEthereum } from './Context';

templates/react/vite-ethers/src/components/WatchContractEvents.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState, useEffect } from 'react';
 import { Contract } from 'zksync-ethers';
-
 import { daiContractConfig } from './contracts'
 import { useEthereum } from './Context';
 

templates/react/vite-ethers/src/components/WatchPendingTransactions.tsx

@@ -1,7 +1,4 @@
-'use client'
-
 import { useEffect, useState } from 'react';
-
 import { useEthereum } from './Context';
 
 export function WatchPendingTransactions() {

templates/react/vite-ethers/src/components/WriteContract.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState } from 'react';
 import { Contract } from 'zksync-ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { daiContractConfig } from './contracts'
 import { useEthereum } from './Context';

templates/react/vite-ethers/src/components/WriteContractPrepared.tsx

@@ -1,8 +1,7 @@
 'use client'
 
-import { useState, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { Contract } from 'zksync-ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { daiContractConfig } from './contracts';
 import { useEthereum } from './Context';
@@ -11,11 +10,13 @@ export function WriteContractPrepared() {
   const [amount, setAmount] = useState<string | null>(null);
   const { getSigner, getProvider } = useEthereum();
 
-  const getContractInstance = async () => {
+  const getContractInstance = useCallback(async () => {
     return new Contract(daiContractConfig.address, daiContractConfig.abi, await getSigner()!);
-  }
+  }, [getSigner]);
+
+  const prepareAndSendTransaction = useCallback(async () => {
+    if (!amount) return null;
 
-  const { result: preparedTransaction, execute: prepareTransaction, inProgress: prepareInProgress, error: prepareError } = useAsync(async () => {
     const contract = await getContractInstance();
 
     // random address for testing, replace with contract address that you want to allow to spend your tokens
@@ -24,41 +25,42 @@ export function WriteContractPrepared() {
     const gasPrice = await getProvider()!.getGasPrice();
     const gasLimit = await contract.getFunction("approve").estimateGas(spender, amount);
 
-    return {
+    const preparedTransaction = {
       args: [spender, amount],
       overrides: {
         gasPrice,
         gasLimit
       }
     };
-  });
 
-  const { result: transaction, execute: sendTransaction, inProgress, error } = useAsync(async () => {
-    const contract = await getContractInstance();
-    const result = await contract.approve(...preparedTransaction!.args, preparedTransaction!.overrides);
-    waitForReceipt(result.hash);
+    const result = await contract.approve(...preparedTransaction.args, preparedTransaction.overrides);
     return result;
-  });
+  }, [amount, getContractInstance, getProvider]);
+
+  const { result: transaction, execute: executePrepareAndSendTransaction, inProgress, error } = useAsync(prepareAndSendTransaction);
 
-  const { result: receipt, execute: waitForReceipt, inProgress: receiptInProgress, error: receiptError } = useAsync(async (transactionHash) => {
+  const { result: receipt, execute: waitForReceipt, inProgress: receiptInProgress, error: receiptError } = useAsync(async (transactionHash: string) => {
     return await getProvider()!.waitForTransaction(transactionHash);
   });
 
-  useEffect(() => {
-    if (!amount) return;
-    prepareTransaction();
-  }, [amount]);
-
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
-    sendTransaction();
-  };
+    const result = await executePrepareAndSendTransaction();
+    if (result) {
+      waitForReceipt(result.hash);
+    }
+  }, [executePrepareAndSendTransaction, waitForReceipt]);
 
   return (
     <div>
       <form onSubmit={handleSubmit}>
-        <input value={amount ?? ""} onChange={e => setAmount(e.target.value)} type="number" placeholder="allowance amount" />
-        <button disabled={prepareInProgress || !preparedTransaction} type="submit">Approve</button>
+        <input 
+          value={amount ?? ""} 
+          onChange={e => setAmount(e.target.value)} 
+          type="number" 
+          placeholder="allowance amount" 
+        />
+        <button disabled={inProgress || !amount} type="submit">Approve</button>
       </form>
 
       {inProgress ? (
@@ -79,7 +81,6 @@ export function WriteContractPrepared() {
         )
       )}
 
-      {prepareError && <div>Preparing Transaction Error: {prepareError.message}</div>}
       {error && <div>Error: {error.message}</div>}
       {receiptError && <div>Receipt Error: {receiptError.message}</div>}
     </div>

templates/react/vite-ethers5/src/components/Account.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { useEthereum } from './Context';
 
 export function Account() {

templates/react/vite-ethers5/src/components/Balance.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState, useEffect } from 'react';
 import { formatEther } from 'ethers/lib/utils';
-
 import { useAsync } from '../hooks/useAsync';
 import { useEthereum } from './Context';
 

templates/react/vite-ethers5/src/components/BlockNumber.tsx

@@ -1,7 +1,4 @@
-'use client'
-
 import { useState, useEffect } from 'react';
-
 import { useEthereum } from './Context';
 
 export function BlockNumber() {

templates/react/vite-ethers5/src/components/Connect.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { useEthereum } from './Context';
 
 export function Connect() {

templates/react/vite-ethers5/src/components/Context.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createContext, useContext } from 'react';
+import  { useState, useEffect, createContext, useContext } from 'react';
 import { Signer, Web3Provider } from 'zksync-ethers';
 
 type Chain = {

templates/react/vite-ethers5/src/components/NetworkSwitcher.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { useAsync } from '../hooks/useAsync';
 import { chains, useEthereum } from './Context';
 

templates/react/vite-ethers5/src/components/ReadContract.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState, useEffect } from 'react';
 import { Contract } from 'zksync-ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { useEthereum } from './Context';
 import { daiContractConfig } from './contracts'

templates/react/vite-ethers5/src/components/SendTransaction.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState } from 'react';
 import { parseEther } from 'ethers/lib/utils';
-
 import { useAsync } from '../hooks/useAsync';
 import { useEthereum } from './Context';
 

templates/react/vite-ethers5/src/components/SendTransactionPrepared.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState, useEffect } from 'react';
 import { parseEther } from 'ethers/lib/utils';
-
 import { useAsync } from '../hooks/useAsync';
 import { useEthereum } from './Context';
 

templates/react/vite-ethers5/src/components/SignMessage.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState, FormEvent } from 'react';
 import { verifyMessage } from 'ethers/lib/utils';
-
 import { useAsync } from '../hooks/useAsync';
 import { useEthereum } from './Context';
 

templates/react/vite-ethers5/src/components/SignTypedData.tsx

@@ -1,7 +1,4 @@
-'use client'
-
 import { verifyTypedData } from 'ethers/lib/utils';
-
 import { useAsync } from '../hooks/useAsync';
 import { defaultChain, useEthereum } from './Context';
 

templates/react/vite-ethers5/src/components/Token.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState } from 'react';
 import { Contract } from 'zksync-ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { erc20ABI, daiContractConfig } from './contracts'
 import { useEthereum } from './Context';

templates/react/vite-ethers5/src/components/WatchContractEvents.tsx

@@ -1,9 +1,6 @@
-'use client'
-
 import { useState, useEffect } from 'react';
 import { Contract } from 'zksync-ethers';
 import type { BigNumber } from 'ethers';
-
 import { daiContractConfig } from './contracts'
 import { useEthereum } from './Context';
 

templates/react/vite-ethers5/src/components/WatchPendingTransactions.tsx

@@ -1,7 +1,4 @@
-'use client'
-
 import { useEffect, useState } from 'react';
-
 import { useEthereum } from './Context';
 
 export function WatchPendingTransactions() {

templates/react/vite-ethers5/src/components/WriteContract.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState } from 'react';
 import { Contract } from 'zksync-ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { daiContractConfig } from './contracts'
 import { useEthereum } from './Context';

templates/react/vite-ethers5/src/components/WriteContractPrepared.tsx

@@ -1,8 +1,5 @@
-'use client'
-
 import { useState, useEffect } from 'react';
 import { Contract } from 'zksync-ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { daiContractConfig } from './contracts';
 import { useEthereum } from './Context';

templates/react/vite-wagmi-web3modal/src/components/Balance.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { useAccount, useBalance, type UseBalanceParameters } from 'wagmi'
-import { formatUnits } from 'viem' 
+import { useAccount, useBalance } from 'wagmi'
+import { Address, formatUnits } from 'viem' 
 
 export function Balance() {
   return (
@@ -37,7 +37,7 @@ export function AccountBalance() {
 export function FindBalance() {
   const [address, setAddress] = useState('')
   const { data, isLoading, refetch } = useBalance({
-    address: address as UseBalanceParameters['address'],
+    address: address as Address,
   })
 
   const [value, setValue] = useState('')

templates/react/vite-wagmi-web3modal/src/components/EstimateGas.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, useState } from 'react';
-import { parseEther } from 'viem';
+import { Address, parseEther } from 'viem';
 import { useSendTransaction, useWaitForTransactionReceipt } from 'wagmi';
 import { estimateGas } from '@wagmi/core'
 import { config } from '../wagmi'; 
@@ -16,13 +16,13 @@ export function EstimateGas() {
     if (to && value) {
       try {
         const gasEstimate = await estimateGas(config, {
-          to: to as `0x${string}`,
+          to: to as Address,
           value: parseEther(value),
         });
         setEstimatedGas(gasEstimate);
 
         const hash = await sendTransactionAsync({
-          to: to as `0x${string}`,
+          to: to as Address,
           value: parseEther(value),
           gas: gasEstimate,
         });
@@ -37,7 +37,7 @@ export function EstimateGas() {
 
   const [transactionHash, setTransactionHash] = useState<string | undefined>(undefined);
   const { isFetching: isConfirming, isSuccess: isConfirmed, error: receiptError } = useWaitForTransactionReceipt({
-    hash: transactionHash as `0x${string}` | undefined,
+    hash: transactionHash as Address | undefined,
   });
 
   return (