使用Metamask钱包的DApp开发教程

Technical Blog 6months ago Dexnav

0 32

UsingMetamask钱包的DApp开发教程

Metamask是一个用于在浏览器中管理以太坊账户和与以太坊网络carry out交互的钱包插件。在DApp开发过程中，我们可以使用Metamask来方便地进行账户管理和交互。在本文中，我们将介绍如何在Metamask钱包中使用我们之前开发的DApp。

前置条件

在开始之前，您需要完成以下步骤：

安装并配置Ganache
InstallationTruffle
安装Metamask浏览器插件
编写和部署一个Smart Contracts，可以参考我们之前的文章

修改DApp代码

在开始之前，我们需要对之前编写的DApp进行一些修改，以便与Metamask进行交互。具体来说，我们需要修改DApp中的Web3.js连接部分。

在我们之前编写的Web3.js交互代码中，我们使用了以下代码连接到本地以太坊区块链：

const web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:7545'));

为了与Metamask进行交互，我们需要使用以下代码连接到以太坊网络：

const web3 = new Web3(window.ethereum);

上述代码将使用Metamask注入到浏览器中的ethereum对象连接到以太坊网络。

在Metamask中添加账户

在使用DApp之前，我们需要向Metamask中添加一个账户。打开Metamask插件，并按照提示完成账户创建步骤。

运行DApp

现在，我们已经准备好在Metamask中使用我们的DApp了。在终端中，进入您的DApp项目目录，并运行以下命令：

npm install
npm start

此命令将安装所需的依赖项，并启动您的DApp。在浏览器中打开http://localhost:3000，您将看到一个简单的页面，其中包含一个输入框和两个按钮。

在Metamask中切换到您之前创建的账户，并点击“Connect”按钮。这将使用Metamask连接到您的DApp，并在页面上显示您的账户地址。

接下来，您可以在输入框中输入一个整数值，并单击“Set”按钮，将该值存储到智能合约中。然后，单击“Get”按钮，检索当前存储在合约中的值，并在页面上显示它。

到这，您已成功在Metamask钱包中使用您的DApp！

下面是修改后的DApp代码：

import React, { useState } from 'react';
import './App.css';
import Web3 from 'web3';
import SimpleStorageContract from './contracts/SimpleStorage.json';

function App() {
  const [value, setValue] = useState(0);

  const connectToMetamask = async () => {
    try {
      // Request account access
      await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log('Connected to Metamask');
    } catch (error) {
      console.error('Error connecting to Metamask', error);
    }
  };

  const setValueOnChain = async () => {
    try {
      const web3 = new Web3(window.ethereum);
      const accounts = await web3.eth.getAccounts();
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = SimpleStorageContract.networks[networkId];
      const contract = new web3.eth.Contract(
        SimpleStorageContract.abi,
        deployedNetwork && deployedNetwork.address
      );
      await contract.methods.set(value).send({ from: accounts[0] });
      console.log('Value set on chain');
    } catch (error) {
      console.error('Error setting value on chain', error);
    }
  };

  const getValueFromChain = async () => {
    try {
      const web3 = new Web3(window.ethereum);
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = SimpleStorageContract.networks[networkId];
      const contract = new web3.eth.Contract(
        SimpleStorageContract.abi,
        deployedNetwork && deployedNetwork.address
      );
      const result = await contract.methods.get().call();
      setValue(result);
      console.log('Value retrieved from chain');
    } catch (error) {
      console.error('Error getting value from chain', error);
    }
  };

  return (
    <div classname="App">
      <header classname="App-header">
        <h1>Simple Storage DApp</h1>
        <button onclick="{connectToMetamask}">Connect</button>
        <p>Current Value: {value}</p>
        <input type="number" onchange="{(e)" > setValue(e.target.value)} />
        <button onclick="{setValueOnChain}">Set</button>
        <button onclick="{getValueFromChain}">Get</button>
      </header>
    </div>
  );
}

export default App;

在这个代码中，我们使用了window.ethereum.request()方法请求访问用户的以太坊账户，并使用用户选择的账户创建了一个新的Web3实例。我们还使用智能合约的ABI和地址创建了一个新的智能合约实例，并使用set().get()方法与智能合约进行交互。

定制开发：DexDao