Metamask: MetaMask eth_requestAccounts not retrieving wallet address after signing in

February 10, 2025 Dedon CRYPTOCURRENCY

Here is a draft of the article:

Metamask: MetaMask eth_requestAccounts not retrieving wallet address after signing in

I’m integrating MetaMask into my Next.js app with Wagmi, and I’m encountering an issue where after connecting to MetaMask, the wallet address isn’t retrieved immediately. The app asks for signing via Web3 Browser before requesting the wallet’s address.

The Issue:

When a user connects to MetaMask, it sends an eth_requestAccounts request to retrieve their wallet addresses. However, this process typically takes around 1-2 seconds to complete and return the wallet addresses in JSON format. Unfortunately, after signing in to MetaMask using the Web3 Browser provided by Wagmi, the app doesn’t immediately request the wallet addresses.

The Problem:

As a result, my Next.js app asks for signing via the eth_requestAccounts API call every time I try to sign with MetaMask. This can lead to:

Frequent requests: The user is asked to authenticate again every second or so, which can be annoying and disrupt their workflow.

Unnecessary errors

: If the wallet address isn’t retrieved correctly, my app might throw errors when trying to access it.

How to Fix:

To resolve this issue, you need to handle the eth_requestAccounts response from MetaMask correctly. Here are a few approaches:

1. Use onSuccess hook

You can use the onSuccess hook provided by Wagmi to wait for the wallet address after requesting it using eth_requestAccounts. This ensures that your app waits for the address before asking for signing again.


import { useWagmi } from 'wagmi';

import MetaMaskProvider from 'metamask-provider';


const MyApp = ({ Component, pageProps }) => {

  const { connect } = useWagmi();

  return (

    

      

    

  );

};


export default MyApp;

2. Use onError hook

Alternatively, you can use the onError hook provided by Wagmi to handle errors related to MetaMask requests.


import { useWagmi } from 'wagmi';

import MetaMaskProvider from 'metamask-provider';


const MyApp = ({ Component, pageProps }) => {

  const { connect } = useWagmi();

  return (

    

      

    

  );

};


export default MyApp;

3. Use eth_requestAccounts with a timeout

If you prefer to handle the response yourself, you can use setTimeout() to wait for the address before asking for signing again.


import { useEffect, useState } from 'react';

import MetaMaskProvider from 'metamask-provider';


const MyApp = ({ Component, pageProps }) => {

  const [walletAddress, setWalletAddress] = useState('');

  const { connect } = useWagmi();

  useEffect(() => {

    fetch(

      .then(response => response.json())

      .then(data => setWalletAddress(data.address))

      .catch(error => console.error('Error:', error));

  }, [walletAddress]);


  const handleSign = () => {

    fetch( {

      method: 'POST',

      headers: { 'Content-Type': 'application/json' },

      body: JSON.stringify({

        from: walletAddress,

        to: '',

        data: '',

      }),

    })

      .then(response => response.json())

      .then(data => console.log('Signed:', data))

      .catch(error => console.error('Error:', error));

  };


  return (

    

      

    

  );

};

These are just a few examples of how you can handle the eth_requestAccounts response from MetaMask in your Next.js app with Wagmi.

Tags:

Previous Next