使用Metamask钱包的DApp开发教程

Technical Blog1years go (2023)发布 Dexnav
0

UsingMetamask钱包的DApp开发教程

交流分享:DexDao

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

前置条件

在开始之前,您需要完成以下步骤:

  1. 安装并配置Ganache
  2. InstallationTruffle
  3. 安装Metamask浏览器插件
  4. 编写和部署一个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

© 版权声明

Related posts

No comments

No comments...