0

I am new to this community and I had a question, in my opinion I think basic, but I have not found much information, see if you can help me.

I have been developing smart contracts, both in Remix and locally with Truffle and connecting the latter to a React frontend. But my question is... how could I connect a local frontend with a contract deployed in a testnet like Kovan? What would be the steps?

I already have a contract in Kovan ready to connect, but I don't understand how I should connect locally.

Thanks in advance and best regards!

0

First of all you need to use metamask or other provider in order to connect your frontend with the blockchain. Make sure that you select Kovan network in metamask app. Here is the template for that;

const Web3 = require("web3");
const ethEnabled = async () => {
 if (window.ethereum) {
 await window.ethereum.send('eth_requestAccounts');
 window.web3 = new Web3(window.ethereum);
return true;
}
return false;
}

Then you need to create instances of your contract, and your contract methods afterwards. In order to do that, you need a special js library called as web3.js or ethers.js (if you use hardhat instead of truffle).

    // Get network provider and web3 instance.
    const web3 = await getWeb3();

    // Use web3 to get the user's accounts.
    const accounts = await web3.eth.getAccounts();        

    // Get the contract instance.
    const networkId = await web3.eth.net.getId();
    const deployedNetwork = SimpleStorageContract.networks[networkId];
    const contract = new web3.eth.Contract(
      SimpleStorageContract.abi,
      deployedNetwork && deployedNetwork.address,
    );

getWeb3() in here is just that metamask code in a separated file.

In order to create an instance of your contract, you need the ABI, and the address of the deployed contract. ABI is stored in the json file that is created after deployment (or compile, i'm not sure right now sorry). In order to use contract functions;

myContract.methods.myMethod([param1[, param2[, ...]]]) 

myContract is the contract instance, we called it contract above. methods is a web3 method, and the myMethod is the function name in the contract. Since they are async, you're gonna need await before them, and instantiate them as a const as well.

You can define wherever you want to deploy in truffle config, networks section. And you can run while migrating, if you want;

networks: {
development: {
host: "127.0.0.1",
port: 8545,
network_id: "*", // match any network
websockets: true
},
live: {
host: "178.25.19.88", // Random IP for example purposes (do not use)
port: 80,
network_id: 1,        // Ethereum public network

$ truffle migrate --network networkName

networkName is in this example development, and live.

6
  • Thanks for the info @TolgaKmbl, is it necessary to migrate with truffle to Kovan, or just having a contract already deployed in Kovan, could I connect to a frontend without previously migrating with Truffle? I have seen something about Infura but I don't understand it well. If I import a contract in react to interact with it, must it be in local? or how would I import one from a testnet?
    – Iván M.M
    Aug 14 at 9:02
  • You will need an infura RPC url and your wallet's mnemonic to deploy on testnet. networks: { rinkeby: { provider: () => { return new HDWalletProvider(process.env.MNEMONIC, process.env.RINKEBY_RPC_URL) }, network_id: '4', . You can put them in an .env file like that MNEMONIC="..." RPC_URL="https://kovan.infura.io/v3/..." . And then migrate with truffle. I think you only need the contract address and the ABI file to connect with contract.
    – TolgaKmbl
    Aug 14 at 15:52
  • I don't think there is a difference to connect testnet or local. You can check out the web3.js docs for the better info. Just make sure to change your metamask wallet server.
    – TolgaKmbl
    Aug 14 at 15:52
  • Also i think you will need to install truffle-hdwallet-provider. However i'm not so sure about whether it is still needed or not. Please have a look at another source.
    – TolgaKmbl
    Aug 14 at 16:22
  • Hi! Thx for all. Finally i conected my React frontend to Kovan SC, only modifing the .json in ./contracts folder.
    – Iván M.M
    Aug 14 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.