Metamask RPC methods do not exist - reactjs

Question

I have been following a tutorial on how to create my first Web3js application with solidity and react.
The tutorial was going great until I fall into this problem with metamask RPC.
The tutorial I have been following is this: https://www.youtube.com/watch?v=Wn_Kb3MR_cU&t=6333s&ab_channel=JavaScriptMastery
Right now I'm getting the following errors when trying to run function from ethereum:
inpage.js:1 MetaMask - RPC Error: The method "accounts " does not exist / is not available.
inpage.js:1 MetaMask - RPC Error: The method "eth_accounts " does not exist / is not available.
uncaught (in promise) {code: -32601, message: 'The method "eth_accounts " does not exist / is not available.', data: {…}, stack: '{\n "code": -32601,\n "message": "The method \\"eth…beogaeaoehlefnkodbefgpgknn/common-0.js:18:167275)'}
uncaught (in promise) {code: -32601, message: 'The method "eth_requestAccounts " does not exist / is not available.', data: {…}, stack: '{\n "code": -32601,\n "message": "The method \\"eth…beogaeaoehlefnkodbefgpgknn/common-0.js:18:167275)'}
The file that runs this is a context file TransactionContext.tsx:
import React, { useEffect, useState } from 'react';
import { ethers } from 'ethers';
import { contractABI, contractAddress } from '../utils/constants';
export const TransactionContext = React.createContext({} as any);
const { ethereum } = window as any;
const getEthereumContract = () => {
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const transactionsContract = new ethers.Contract(contractAddress, contractABI, signer);
console.log({
provider,
signer,
transactionsContract
})
}
export const TransactionProvider = ({ children }: any) => {
const [currentAccount, setCurrentAccount] = useState('');
const checkIfWalletIsConnected = async () => {
if (!ethereum) return alert("Please install metamask!");
const accounts = await ethereum.request({ method: 'eth_accounts '});
console.log(accounts);
}
const connectWallet = async () => {
try {
if (!ethereum) return alert("Please install metamask!");
const accounts = await ethereum.request({ method: 'eth_requestAccounts '});
setCurrentAccount(accounts[0]);
} catch (e) {
console.log(e);
throw new Error('No Ethereum object.')
}
}
useEffect(() => {
checkIfWalletIsConnected();
}, [])
return (
<TransactionContext.Provider value={{ connectWallet }}>
{children}
</TransactionContext.Provider>
)
}

Answer 1

I see 3 issues in your contract:
1- you are not returning the contract from getEthereumContract. it should be
const getEthereumContract = () => {
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const transactionsContract = new ethers.Contract(contractAddress, contractABI, signer);
return transactionsContract
}
I dont see you are using here yet but you might get bug in the future:
2- Error says 'The method "eth_accounts " does not exist ... you have extra space here "eth_accounts ". should be
const accounts = await ethereum.request({ method: 'eth_accounts'});
3- this is similar to second. You have extra space
const accounts = await ethereum.request({ method: 'eth_requestAccounts'});

Answer 2

You need to specify for which account you want to get the signer provider.getSigner(account)
On click of your connect button add this
async function connectWalletHandler() {
if (!ethereum) {
console.log("Make sure you have Metamask installed");
return;
} else {
console.log("Wallet exist");
}
const accounts = await ethereum.request({ method: "eth_requestAccounts" });
if (accounts.length !== 0) {
} else {
console.log("No authorized account found");
}
And put this code in you app.js
const [user,setUser]=useState(null);
Useeffect(()=>{
if (window.ethereum) {
const isMetaMaskConnected = async () => {
let provider = new ethers.providers.Web3Provider(window.ethereum);
const accounts = await provider.listAccounts();
let account = null;
if (accounts.length > 0) {
account = accounts[0];
}
let signer = provider.getSigner(account);
setUser({ provider: provider, signer: signer, account: account });
};
isMetaMaskConnected();
window.ethereum.on("chainChanged", (chainId) => {
window.location.reload();
});
window.ethereum.on("accountsChanged", () => {
window.location.reload();
});
} else {
}},[])
From now you have 3 option first user is null metamask not installed
2 user.account="" or null metamask installed and connected but locket
3 user.account have value this is when the wallet connected to the website and every thing 👍