如何通过 Remix 将 Dapp 连接到 Metamask 并与部署在 Ropsten 上的智能合约进行交互

Posted 2023-02-18

【中文标题】如何通过 Remix 将 Dapp 连接到 Metamask 并与部署在 Ropsten 上的智能合约进行交互

【英文标题】：How to connect Dapp to Metamask and interact with smart contract deployed on Ropsten via Remix

【发布时间】：2021-10-08 11:01:53

【问题描述】：

我通过 remix 将智能合约部署到 ropsten 测试网，现在我想通过网站（dapp）与之交互。我正在创建一个拍卖 dapp。用户必须输入他想要为文章出价的 ETH 数量。通过按钮单击提交值后，我希望元掩码弹出并处理事务。

我从https://docs.metamask.io/guide/getting-started.html#basic-considerations得到了连接元掩码的js代码

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;

它运行良好 Metamask 正在弹出，但我卡住的部分是如何将 dapp 连接到部署的 ropsten 合约（通过 remix 部署它，它在 ropsten etherscan 上可见）。

我尝试将它与这个 js 脚本连接起来

<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>

但我不知道如何将其连接到部署在 ropsten 上的合约。

在网上阅读了一些资料后，我创建了一个 infura 节点来连接合约，但我又卡住了。当我只使用元掩码与 dapp 交互时，是否必须连接到 infura 节点？

【参考方案1】：

查看question，了解如何将您的 Web3 与 Metamask 连接。

一旦您成功连接到 Metamask。您需要将 contractABI 放入

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

和合同地址在

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

然后你可以通过在

中提供

contractABI

和

contractAddress

来初始化contract对象

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

这个contract 对象将允许您与已部署的合约进行交互..

【讨论】：

如何连接部署在 ropsten 测试网上的合约，我不知道如何获取合约地址 url

我自己没有用 Metamask 试过这个。但首先确保您的 Metamask 已切换到 Ropsten 测试网，因为这是您的合约所在的位置。您需要首先与 Metamask 建立成功的连接。我已经在我的回答中发布了另一个类似的问题。建立连接后，您基本上已连接到您的合同。你只需要在初始化后执行它的功能