Browser is not connecting to metamask

Hello guys, I am using Google canary with metamask for testing purposes.
I call this line in web3 to connect with metamask
But i do not get response from the browser side.
I have removed the await, but still My metamask is not connecting to the dapp. Should i change browsers?
Full code :

export const loadAccount = async (web3, dispatch) => {

  const accounts = web3.eth.GetAccounts()

//   const accounts = web3.eth.accounts;

// // window.ethereum

// const accounts = await eth.request({ method: 'eth_accounts' });

  const accounts = accounts[0]

  if(typeof accounts !== 'undefined'){

    dispatch(web3AccountLoaded(account))

    return account

  } else {

    window.alert('please connect your Metamask')

    return null

  }

}

Can you post FULL CODE?

Please format it like we explain it here: READ BEFORE POSTING - How to post code in the forum

Should i use this instead, since metamask docs is recommending to use this one.

const accounts = web3.eth.accounts;

// window.ethereum
const accounts = await ethereum.request({ method: 'eth_accounts' });

We can only help if you paste your entire code, all HTML, all JS

without it impossible to help as we don’t know what you are doing :slight_smile:

in the function you posted, we don’t see how you init web3

hey thanks!
I have solved the problem here. Here is the complete code before it didnt work

// export const loadAccount = async (web3, dispatch) => {

//   // window.web3.currentProvider

//   const accounts = web3.eth.getAccounts()

//   const account = await accounts[0]

//   if(typeof account !== 'undefined'){

//     dispatch(web3AccountLoaded(account))

//     return account

//   } else {

//     window.alert('Please login with MetaMask')

//     return null

//   }

// }

This is the code that is kind of working:

export const loadAccount = async (web3, dispatch) => {

  const loggersAC = await web3.eth.getAccounts(console.log);

  const network = await web3.eth.net.getNetworkType();

  await window.ethereum.enable();

  const accounts = web3.eth.getAccounts()

  const account = await accounts[0]

  console.log("account if it is connecting or not  ", loggersAC)

  console.log("account if it is connecting or not  ", network)

  if(typeof account !== 'undefined'){

    dispatch(web3AccountLoaded(account))

    return account

  } else {

    window.alert('Please login with MetaMask')

    return null

  }

}

The line of code that was needed was :
await window.ethereum.enable();

Here is the complete code with init web3

 import Web3 from 'web3'
import {
  web3Loaded,
  web3AccountLoaded,
  tokenLoaded,
  exchangeLoaded
} from './actions'
import Token from '../abis/Token.json'
import Exchange from '../abis/Exchange.json'
import '@metamask/legacy-web3'

export const loadWeb3 = async (dispatch) => {
  if(typeof window.web3.currentProvider!=='undefined'){
    let web3 = new Web3(window.web3.currentProvider)
    dispatch(web3Loaded(web3))
    return web3
  } else {
    window.alert('Please install MetaMask')
    window.location.assign("https://metamask.io/")
  }
}

// export const loadAccount = async (web3, dispatch) => {
//   // window.web3.currentProvider
//   const accounts = web3.eth.getAccounts()
//   const account = await accounts[0]
//   if(typeof account !== 'undefined'){
//     dispatch(web3AccountLoaded(account))
//     return account
//   } else {
//     window.alert('Please login with MetaMask')
//     return null
//   }
// }

export const loadAccount = async (web3, dispatch) => {
  const loggersAC = await web3.eth.getAccounts(console.log);
  const network = await web3.eth.net.getNetworkType();
  await window.ethereum.enable();
  const accounts = web3.eth.getAccounts()
  const account = await accounts[0]
  console.log("account if it is connecting or not  ", loggersAC)
  console.log("account if it is connecting or not  ", network)
  if(typeof account !== 'undefined'){
    dispatch(web3AccountLoaded(account))
    return account
  } else {
    window.alert('Please login with MetaMask')
    return null
  }
}

export const loadToken = async (web3, networkId, dispatch) => {
  try {
    const token = new web3.eth.Contract(Token.abi, Token.networks[networkId].address)
    dispatch(tokenLoaded(token))
    return token
  } catch (error) {
    console.log('Contract not deployed to the current network. Please select another network with Metamask.')
    return null
  }
}

export const loadExchange = async (web3, networkId, dispatch) => {
  try {
    const exchange = new web3.eth.Contract(Exchange.abi, Exchange.networks[networkId].address)
    dispatch(exchangeLoaded(exchange))
    return exchange
  } catch (error) {
    console.log('Contract not deployed to the current network. Please select another network with Metamask.')
    return null
  }
}

ok great that it worked

Hi I was wondering if someone can assist me with getting my Redux dev tools to load the “TOKEN_LOADED & EXCHANGE LOADED” as per the images shown. I have copied and pased the code that was given to me. I have pasted the full code below. Thank you please. I copied and pasted the the original code at least 5 or more times into the App.js , index.js , interactions.js , reducers.js , and action.js files.

Can you please share with me if I am missing something? In the meanwhile, I will continue on in the project. I hope to hear from you soon.

Regards,

import React, { Component } from 'react'
import './App.css'
import Navbar from './Navbar'
import Content from './Content'
import { connect } from 'react-redux'
import {
  loadWeb3,
  loadAccount,
  loadToken,
  loadExchange
} from '../store/interactions'
import { contractsLoadedSelector } from '../store/selectors'

class App extends Component {
  componentWillMount() {
    this.loadBlockchainData(this.props.dispatch)
  }

  async loadBlockchainData(dispatch) {
    const web3 = await loadWeb3(dispatch)
    const networkId = await web3.eth.net.getId()
    await loadAccount(web3, dispatch)
    const token = await loadToken(web3, networkId, dispatch)
    if(!token) {
      window.alert('Token smart contract not detected on the current network. Please select another network with Metamask.')
      return
    }
    const exchange = await loadExchange(web3, networkId, dispatch)
    if(!exchange) {
      window.alert('Exchange smart contract not detected on the current network. Please select another network with Metamask.')
      return
    }
  }

  render() {
    return (
      <div>
        <Navbar />
        { this.props.contractsLoaded ? <Content /> : <div className="content"></div> }
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    contractsLoaded: contractsLoadedSelector(state)
  }
}

export default connect(mapStateToProps)(App)
![Redux1|690x442](upload://ncUsfQh07QkosBIZyeGEBJUVwHu.jpeg) 

![Redux2|690x386](upload://m2tIdX7dLaWIZuFFBnuf8hT3rLo.jpeg)