update

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

@@ -2,7 +2,6 @@
 
 import { useState } from 'react';
 import { ethers } from 'ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { useEthereum } from './Context';
 
@@ -13,9 +12,19 @@ export function SendTransaction() {
   const { getSigner, getProvider } = useEthereum();
 
   const { result: transaction, execute: sendTransaction, inProgress, error } = useAsync(async () => {
+    if (!address || !value) return;
+    const gasPrice = await getProvider()!.getGasPrice();
+    const gasLimit = await (await getSigner())!.estimateGas({
+      to: address,
+      value: ethers.parseEther(value),
+      gasPrice,
+    });
+
     const result = await (await getSigner())!.sendTransaction({
       to: address!,
       value: ethers.parseEther(value!),
+      gasPrice,
+      gasLimit,
     });
     waitForReceipt(result.hash);
     return result;

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

@@ -2,7 +2,6 @@
 
 import { useState } from 'react';
 import { Contract } from 'zksync-ethers';
-
 import { useAsync } from '../hooks/useAsync';
 import { erc20ABI, daiContractConfig } from './contracts'
 import { useEthereum } from './Context';
@@ -22,8 +21,8 @@ export function Token() {
     return {
       symbol,
       name,
-      decimals,
-      supply,
+      decimals: decimals.toString(), 
+      supply: supply.toString(),
     };
   };
 

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

@@ -15,8 +15,10 @@ export function WriteContract() {
 
     // random address for testing, replace with contract address that you want to allow to spend your tokens
     const spender = "0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044"
+    const gasPrice = await getProvider()!.getGasPrice();
+    const gasLimit = await contract.getFunction("approve").estimateGas(spender, amount);
 
-    const tx = await contract.approve(spender, amount);
+    const tx = await contract.approve(spender, amount, {gasPrice, gasLimit});
 
     waitForReceipt(tx.hash);
     return tx;

templates/react/next-wagmi-rainbowkit/.env.example

@@ -1 +1 @@
-WALLET_CONNECT_PROJECT_ID=
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=

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

@@ -13,9 +13,19 @@ export function SendTransaction() {
   const { getSigner, getProvider } = useEthereum();
 
   const { result: transaction, execute: sendTransaction, inProgress, error } = useAsync(async () => {
+    if (!address || !value) return;
+    const gasPrice = await getProvider()!.getGasPrice();
+    const gasLimit = await (await getSigner())!.estimateGas({
+      to: address,
+      value: ethers.parseEther(value),
+      gasPrice,
+    });
+
     const result = await (await getSigner())!.sendTransaction({
       to: address!,
       value: ethers.parseEther(value!),
+      gasPrice,
+      gasLimit,
     });
     waitForReceipt(result.hash);
     return result;

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

@@ -22,8 +22,8 @@ export function Token() {
     return {
       symbol,
       name,
-      decimals,
-      supply,
+      decimals: decimals.toString(), 
+      supply: supply.toString(),
     };
   };
 

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

@@ -15,8 +15,11 @@ export function WriteContract() {
 
     // random address for testing, replace with contract address that you want to allow to spend your tokens
     const spender = "0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044"
+
+    const gasPrice = await getProvider()!.getGasPrice();
+    const gasLimit = await contract.getFunction("approve").estimateGas(spender, amount);
 
-    const tx = await contract.approve(spender, amount);
+    const tx = await contract.approve(spender, amount, {gasLimit, gasPrice});
 
     waitForReceipt(tx.hash);
     return tx;

templates/react/vite-wagmi-web3modal/.env.example

@@ -1 +1 @@
-NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
+VITE_WALLET_CONNECT_PROJECT_ID=