Contract has not been deployed to detected network (network/artifact mismatch)

Question

I'm having some issues determining and connecting with the right MetaMask network.

In Ganache, my RPC server is 127.0.0.1.7545 and the network id is 5777. However, when I try to create a custom RPC in MetaMask with this info, I get the following error:

The endpoint returned a different chain ID: 1337

This is my truffle-config.js:

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*" // Match any network id
    },
    develop: {
      port: 8545
    }
  }
};

I'm hoping this would match to any network id as I've specified, but the console shows the following error:

Contract has not been deployed to detected network (network/artifact mismatch)

I've already tried truffle migrate --reset , without success. I've also tried creating an explicit network for testrpc in truffle-config.js - that didn't work either.

Any help would be much appreciated!

Answer 1

You are seeing that error because your contract is deployed to Ganache but you are connected to a different network.

The code that you are writing to load the contract should be inside try/catch block.

inside loading contract logic:

export const loadContract = async (name, provider) => {
  // Load the contract

  // set the provider

  let deployedContract = null;
  try {
    // Get the contract
    deployedContract = await _contract.deployed();
  } catch {
    console.error("You are connected to the wrong network");
  }

  return deployedContract;
};

In the component that you are using loadContract , call it inside useEffect .

useEffect(() => {
      // Detect Provider

      if (provider) {
        // contract should be loaded when provider exists
        const contract = await loadContract("ContractName", provider);
       rLoaded: true,
       // Add More logic
      } else {
        console.error("Please, install Metamask.");
      }
    };
  }, []);

Now you need to make sure if you are not connected to Ganache, disable the button, so your app won't crash. for this create a state variable

 // You probably already have logic to get account and contract
  const canConnectToContract = account && contract;

now write a proper ui:

{!canConnectToContract && (
    <h2>Connect to Ganache</h2>
  )}

  <button
    disabled={!canConnectToContract}
 
  >
    Donate 1 Ethreum
  </button>