0

I deployed a smart contract via remix to the ropsten testnet and now I want to interact with it via website(dapp). I am creating a auction dapp. The user has to input the amount of ETH he want's to bid for the article. After the value is submitted via button click I want metamask to pop up and handle the transaction.

I got the js code for connecting to metamask from https://docs.metamask.io/guide/getting-started.html#basic-considerations

if (typeof window.ethereum !== 'undefined') {
    console.log('MetaMask is installed!');
 }
else{
      console.log('MetaMask not installed!');
}

const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');

ethereumButton.addEventListener('click', () => {
  getAccount();
});

async function getAccount() {
  const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
  const account = accounts[0];
  showAccount.innerHTML = account;
}

And it's working fine Metamask is poping up, but the part where I am stuck is how to connect the dapp to the deployed ropsten contract(deployed it via remix and it's visible on ropsten etherscan).

I tried to connect it with this js script

<script>
      // Initialize Web3
      if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
      } else {
        web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:7545'));
      }

      // Set Account
      web3.eth.defaultAccount = web3.eth.accounts[0];

      // Set Contract Abi
      var contractAbi = []; // Add Your Contract ABI here!!!

      // Set Contract Address
      var contractAddress = ''; // ?????

      // Set the Contract
      var contract = web3.eth.contract(contractAbi).at(contractAddress);
      ...

    </script>

But I don't know how to connect it to the contract deployed on ropsten.

After I done some reading on the internet I created a infura node to connect to the contract, but I got stuck again. Do I have to connect to infura node when I am only using metamask to interact with the dapp.

0

To talk to a smart contract you will need 3 elements:

  1. A web3 instance with a valid provider
  2. A contract skeleton a.k.a. the ABI
  3. A contract address

The first one you got right, by connecting to your wallet with Metamask. Make sure to select the Ropsten network in Metamask.

For the second step, once you have the code setup on Remix, search for the compile button in the Solidity compiler tab. After you compile, you will see a little button with the label "ABI". You can also reach this by clicking on Compilation Details in that same page. The ABI is a JSON object describing all the methods and parameters you've implemented in your contract. This is how your web3 instance will know what and how to encode/decode the data you'll be sending to the contract.

For the third step, you will have to go to the Deploy & run transactions tab. You should see a selector there for you to pick the contract you've just compiled. Below that input, you'll see a button to Deploy. Clicking that will deploy the contract on Ropsten, at a certain address, which will appear on the left side, in the section for deployed contracts. That is the contractAddress.

What is left for you to do is to start calling the contract methods.

const contract = new this.#web3.eth.Contract(ABI, address);
const call = contract.methods.yourReadMethod(paramA, paramB).call()
const transaction = contract.methods.yourWriteMethod(paramA, paramB).send()
   

See the docs for contract calls or transactions. You can also find nice code examples in the official tutorials from ethereum.org for setting up web3js and interacting with a contract.

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.