How do I make my smart contract available for interaction with Metamask?

Question

I am using OpenZeppelin starter kit. I wrote a smart contract that simply contains two integers which can be called. I compiled and deployed the smart contract to my local Ganache blockchain. I have started my React Dapp and it's connected to Ganache through Metamask (I can see my account balance for example).

Please see my repository: https://github.com/Lennardmulder/ozreact

I now want my Dapp to have a button that allows the user to call the count function and show its results. I suspect I first need to use something like

var myContract = new web3.eth.Contract([...], '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe', {
    from: '0x1234567890123456789012345678901234567891', // default from address
    gasPrice: '20000000000' // default gas price in wei, 20 gwei in this case
});

With the right ABI and address inserted, to allow Metamask to interact with the smart contract? But where exactly do I define this in my code?

Answer 1

Taking a look at your smart contract here I don't see a getter method where your dApp can point to. In your smart contract place this code:

function getCount() public view returns(uint) {
    return count;
}

Now in your dApp you can access this new method like this:

myContract.methods.getCount().call({from: <ADDRESS>}, function(err, response) {
    if(!err) {
        console.log(response, 'response');
    } else {
        console.error(err, 'err');
    }
});

Also when upgrading and redeploying your contract don't forget to replace the contract address at new web3.eth.Contract().

Answer 2

To add to Miroslav's answer (sorry, I can't comment yet):

If you define your variable as public, the compiler will automatically generate a getter method with the same name as the variable. uint public count as declared in OPs contract will generate the function

function count() public view returns(uint) {
    return count;
}

There is no need to manually create a getter, just use const count = await instance.methods.count().call() inside an async function to get the value of count.

Take a look here to see how to connect web3 with metamask: How To Connect Web3 With MetaMask?