fix web3.js v4.x issue with contract interaction

demo/react-app/src/components/Main.tsx

@@ -19,6 +19,7 @@ const Main = () => {
  switchChain,
  getTokenBalance,
  signAndSendTokenTransaction,
+ randomContractInteraction,
  } = useWeb3Auth();
 
  const loggedInView = (
@@ -55,6 +56,9 @@ const Main = () => {
  <button onClick={signAndSendTokenTransaction} className={styles.card}>
  Sign and Send Token Transaction
  </button>
+ <button onClick={randomContractInteraction} className={styles.card}>
+ Contract Interaction
+ </button>
  <button onClick={logout} className={styles.card}>
  Log Out
  </button>

demo/react-app/src/config/abi.ts

@@ -220,3 +220,15 @@ export const erc20Abi = [
  type: "event",
  },
 ] as const;
+
+export const randomContractAbi = [
+ { inputs: [{ internalType: "string", name: "initMessage", type: "string" }], stateMutability: "nonpayable", type: "constructor" },
+ { inputs: [], name: "message", outputs: [{ internalType: "string", name: "", type: "string" }], stateMutability: "view", type: "function" },
+ {
+ inputs: [{ internalType: "string", name: "newMessage", type: "string" }],
+ name: "update",
+ outputs: [],
+ stateMutability: "nonpayable",
+ type: "function",
+ },
+] as const;

demo/react-app/src/services/ethProvider.ts

@@ -1,7 +1,7 @@
 import { IProvider } from "@web3auth/base";
 import Web3 from "web3";
 import { IWalletProvider } from "./walletProvider";
-import { erc20Abi } from "../config/abi";
+import { erc20Abi, randomContractAbi } from "../config/abi";
 const tokenAddress = "0x655F2166b0709cd575202630952D71E2bB0d61Af";
 
 const ethProvider = (provider: IProvider, uiConsole: (...args: unknown[]) => void): IWalletProvider => {
@@ -85,6 +85,19 @@ const ethProvider = (provider: IProvider, uiConsole: (...args: unknown[]) => voi
  }
  };
 
+ const randomContractInteraction = async () => {
+ try {
+ const web3 = new Web3(provider as any);
+ const accounts = await web3.eth.getAccounts();
+ const contract = new web3.eth.Contract(randomContractAbi, "0x04cA407965D60C2B39d892a1DFB1d1d9C30d0334", { dataInputFill: "data" });
+ const txRes = await contract.methods.update(`Hello world ${Math.random().toString(36).substring(1, 5)}`).send({ from: accounts[0] });
+ uiConsole("txRes", txRes);
+ } catch (error) {
+ console.log("error", error);
+ uiConsole("error", error);
+ }
+ };
+
  const signTransaction = async () => {
  try {
  const web3 = new Web3(provider as any);
@@ -101,7 +114,16 @@ const ethProvider = (provider: IProvider, uiConsole: (...args: unknown[]) => voi
  uiConsole("error", error);
  }
  };
- return { getAccounts, getBalance, signMessage, signAndSendTransaction, signTransaction, getTokenBalance, signAndSendTokenTransaction };
+ return {
+ getAccounts,
+ getBalance,
+ signMessage,
+ signAndSendTransaction,
+ signTransaction,
+ getTokenBalance,
+ signAndSendTokenTransaction,
+ randomContractInteraction,
+ };
 };
 
 export default ethProvider;

demo/react-app/src/services/walletProvider.ts

@@ -11,6 +11,7 @@ export interface IWalletProvider {
  signMessage: () => Promise<void>;
  getTokenBalance?: () => Promise<void>;
  signAndSendTokenTransaction?: () => Promise<void>;
+ randomContractInteraction?: () => Promise<void>;
 }
 
 export const getWalletProvider = (chain: string, provider: IProvider, uiConsole: any): IWalletProvider => {

demo/react-app/src/services/web3auth.tsx

@@ -1,7 +1,7 @@
 import { ADAPTER_EVENTS, CHAIN_NAMESPACES, IProvider } from "@web3auth/base";
 import { Web3Auth } from "@web3auth/modal";
 import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
-import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";
+// import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";
 import { createContext, FunctionComponent, ReactNode, useCallback, useContext, useEffect, useState } from "react";
 import { CHAIN_CONFIG, CHAIN_CONFIG_TYPE } from "../config/chainConfig";
 import { WEB3AUTH_NETWORK_TYPE } from "../config/web3AuthNetwork";
@@ -25,6 +25,7 @@ export interface IWeb3AuthContext {
  switchChain: () => Promise<void>;
  getTokenBalance: () => Promise<void>;
  signAndSendTokenTransaction: () => Promise<void>;
+ randomContractInteraction: () => Promise<void>;
 }
 
 export const Web3AuthContext = createContext<IWeb3AuthContext>({
@@ -45,6 +46,7 @@ export const Web3AuthContext = createContext<IWeb3AuthContext>({
  switchChain: async () => {},
  getTokenBalance: async () => {},
  signAndSendTokenTransaction: async () => {},
+ randomContractInteraction: async () => {},
 });
 
 export function useWeb3Auth(): IWeb3AuthContext {
@@ -297,6 +299,15 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
  await provider.signAndSendTokenTransaction?.();
  };
 
+ const randomContractInteraction = async () => {
+ if (!provider) {
+ console.log("provider not initialized yet");
+ uiConsole("provider not initialized yet");
+ return;
+ }
+ await provider.randomContractInteraction?.();
+ };
+
  const uiConsole = (...args: unknown[]): void => {
  const el = document.querySelector("#console>p");
  if (el) {
@@ -322,6 +333,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
  switchChain,
  signAndSendTokenTransaction,
  getTokenBalance,
+ randomContractInteraction,
  };
  return <Web3AuthContext.Provider value={contextProvider}>{children}</Web3AuthContext.Provider>;
 };

packages/providers/ethereum-provider/src/providers/privateKeyProviders/ethPrivatekeyUtils.ts

@@ -49,6 +49,7 @@ export function getProviderHandlers({
  message: "Provider is not initialized",
  code: 4902,
  });
+ if (txParams.input && !txParams.data) txParams.data = txParams.input;
  const signedTx = await signTx(txParams, privKey, txFormatter);
  const txHash = await providerEngineProxy.request<[string], string>({
  method: "eth_sendRawTransaction",
@@ -63,6 +64,7 @@ export function getProviderHandlers({
  message: "Provider is not initialized",
  code: 4902,
  });
+ if (txParams.input && !txParams.data) txParams.data = txParams.input;
  const signedTx = await signTx(txParams, privKey, txFormatter);
  return `0x${signedTx.toString("hex")}`;
  },

packages/providers/ethereum-provider/src/rpc/interfaces.ts

@@ -35,7 +35,7 @@ export interface ExtendedTxData extends TxData {
  from: string;
 }
 
-export type TransactionParams = ExtendedFeeMarketEIP1559Transaction & ExtendedAccessListEIP2930TxData & ExtendedTxData;
+export type TransactionParams = ExtendedFeeMarketEIP1559Transaction & ExtendedAccessListEIP2930TxData & ExtendedTxData & { input?: string };
 
 export interface MessageParams<T> {
  from: string;