使用Metamask钱包的DApp开发教程
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()
方法与智能合约进行交互。
Please specify source if reproduced使用Metamask钱包的DApp开发教程 | Dexnav 区块链导航网