Web3+MetaMask+常见交易相关交互
- 一、Web3合约地址以及合约ABI生成，部署，交易等流程
-
- [1. remix生成合约地址和合约ABI步骤如下](#1. remix生成合约地址和合约ABI步骤如下)
-
- [（1）在左侧文件面板中新建一个 Solidity 文件，合约代码如下（示例）：](#（1）在左侧文件面板中新建一个 Solidity 文件，合约代码如下（示例）：)
- （2）选择编译环境，并编译，拉到底部获取abi按钮，点击可复制合约ABI
- （3）接下来是合约地址的生成
- （4）合约校验及部署
- [2. 合约校验及部署,吊起metamask钱包签约](#2. 合约校验及部署,吊起metamask钱包签约)
- [3. 前端调用合约方法，并吊起钱包交互流程](#3. 前端调用合约方法，并吊起钱包交互流程)
- 二、额外web3基础操作如下
-
- [1. 获取最新的区块号](#1. 获取最新的区块号)
- [2. 查询平均 gas 价格](#2. 查询平均 gas 价格)
- [3. 指定要查询的区块号或哈希，获取区块信息](#3. 指定要查询的区块号或哈希，获取区块信息)
- [4. 钱包对钱包交易](#4. 钱包对钱包交易)
- 总结
一、Web3合约地址以及合约ABI生成，部署，交易等流程
查询区块各种信息，钱包对钱包交易；合约方面的交易，使用生成web3合约的ide工具生成合约，部署合约，调用已部署的合约方法
1. remix生成合约地址和合约ABI步骤如下
（1）在左侧文件面板中新建一个 Solidity 文件，合约代码如下（示例）：
c
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.30;
contract MyContract {
uint256 public value;
function setValue(uint256 _value) public {
value = _value;
}
}
（2）选择编译环境，并编译，拉到底部获取abi按钮，点击可复制合约ABI
（3）接下来是合约地址的生成
（4）合约校验及部署
能看到以下验证结果说明成功了
2. 合约校验及部署,吊起metamask钱包签约
3. 前端调用合约方法，并吊起钱包交互流程
（1）前端引入合约地址以及ABI,连接钱包，并调用合约写入方法
c
import React from "react";
import { useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import { JsonRpcProvider, ethers, BrowserProvider } from "ethers";
function App() {
// 测试网地址
var url = "https://apixx";
var customHttpProvider = new JsonRpcProvider(url);
// 测试合约交易
async function testABIcontract() {
// 合约地址
const contractAddress = "0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxa5";
// 合约ABI
const contractAbi = [
{
inputs: [
{
internalType: "uint256",
name: "_value",
type: "uint256",
},
],
name: "setValue",
outputs: [],
stateMutability: "nonpayable",
type: "function",
},
{
inputs: [],
name: "value",
outputs: [
{
internalType: "uint256",
name: "",
type: "uint256",
},
],
stateMutability: "view",
type: "function",
},
];
if (window.ethereum) {
// 连接 Provider 和 Signer
const provider = new ethers.BrowserProvider(aaa.ethereum); // 连接metamask
const signer = await provider.getSigner(); // 获取signer
console.log("连接 Provider 和 Signer");
// 3. 创建合约实例
const contract = new ethers.Contract(contractAddress, contractAbi, signer);
// 4. 调用合约方法
await contract.setValue(666); // 写入操作（需签名）
console.log("调用合约方法");
const currentValue = await contract.value(); // 读取操作
console.log("当前值:", currentValue.toString());
}
}
testABIcontract();
return (
<div className="App">
合约查询，交易等流程
</div>
);
}
export default App;（2）运行代码，吊起MetaMask钱包进行交易
（3）点击确认，控制台即输出当前写入结果，成功会输出当前写入的值
（4）钱包可对应查询到交易记录
二、额外web3基础操作如下
1. 获取最新的区块号
c
import React from "react";
import { useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import { JsonRpcProvider, ethers, BrowserProvider } from "ethers";
function App() {
// 测试网地址
var url = "https://xxxxxxxx";
var customHttpProvider = new JsonRpcProvider(url);
// 获取最新的区块号
async function getLatestBlockNumber() {
try {
const blockNumber = await customHttpProvider.getBlockNumber();
console.log("Latest block number:", blockNumber);
return blockNumber;
} catch (error) {
console.error("Error getting block number:", error);
}
}
getLatestBlockNumber();
return (
<div className="App">
web3基础操作如下
</div>
);
}
export default App;2. 查询平均 gas 价格
c
import React from "react";
import { useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import { JsonRpcProvider, ethers, BrowserProvider } from "ethers";
function App() {
// 测试网地址
var url = "https://xxxxxxxx";
var customHttpProvider = new JsonRpcProvider(url);
// 查询平均 gas 价格
async function getAverageGasPrice() {
const gasPrice = await customHttpProvider.getFeeData();
console.log("Current average gas price: ", gasPrice);
}
getAverageGasPrice();
return (
<div className="App">
web3基础操作如下
</div>
);
}
export default App;3. 指定要查询的区块号或哈希，获取区块信息
c
import React from "react";
import { useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import { JsonRpcProvider, ethers, BrowserProvider } from "ethers";
function App() {
// 测试网地址
var url = "https://xxxxxxxx";
var customHttpProvider = new JsonRpcProvider(url);
// 指定要查询的区块号或哈希
const blockNumberOrHash = 4211566 as any; // 或者使用区块哈希: "0xabss..."
// 获取区块信息
async function getBlockInfo(blockNumberOrHash: any) {
try {
const block = await customHttpProvider.getBlock(blockNumberOrHash);
console.log("获取区块指定要查询的区块号信息: ", block);
} catch (error) {
console.error("Error fetching block: ", error);
}
}
getBlockInfo(blockNumberOrHash);
return (
<div className="App">
web3基础操作如下
</div>
);
}
export default App;4. 钱包对钱包交易
c
import React from "react";
import { useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import { JsonRpcProvider, ethers, BrowserProvider } from "ethers";
function App() {
// 测试网地址
var url = "https://xxxxxxxx";
var customHttpProvider = new JsonRpcProvider(url);
async function metaToMetaTransation() {
if (window.ethereum) {
window.ethereum
.request({ method: "eth_requestAccounts" })
.then(async function (accounts: any) {
// 连接钱包（如 MetaMask）
const provider = new BrowserProvider(aaa.ethereum);
const signer = await provider.getSigner(); // 获取签名者
const address = accounts[0]; // 获取账户地址
// 使用签名者查询余额
provider.getBalance(address).then((balance) => {
console.log(`余额: ${ethers.formatEther(balance)} ETH`);
});
// 构建交易
const tx = {
to: "0xxxxxxxsadasdasdadasdas", // 目标钱包地址
value: ethers.parseEther("0.1"), // 转账金额（0.1 ETH）
};
// 发送交易
const txResponse = await signer.sendTransaction(tx);
console.log("交易哈希:", txResponse.hash);
// 等待交易确认
const receipt = await txResponse.wait();
console.log("交易确认:", receipt.blockNumber);
})
.catch((error: any) => {
console.error("Error connecting to MetaMask:", error);
});
} else {
console.log("Please install MetaMask!");
}
}
metaToMetaTransation();
return (
<div className="App">
web3基础操作如下
</div>
);
}
export default App;总结
测试网，主要用于协议开发、验证和质押测试，目前无法直接兑换成主网 ETH。
主要用途
专注于验证和质押功能测试，支持开发者在主网部署前测试协议升级。
代币限制
目前无官方兑换机制，开发者可通过该网络测试验证功能，但无法直接将测试币兑换为真实ETH。