Web3合约ABI,合约地址生成部署调用及创建,连接钱包,基础交易流程

Web3+MetaMask+常见交易相关交互

一、Web3合约地址以及合约ABI生成,部署,交易等流程

查询区块各种信息,钱包对钱包交易;合约方面的交易,使用生成web3合约的ide工具生成合约,部署合约,调用已部署的合约方法

1. remix生成合约地址和合约ABI步骤如下

remix IDE工具

(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钱包签约

点击verifyContract

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

相关推荐
Ashlee_code2 小时前
南太平洋金融基建革命:斐济-巴新交易所联盟的技术破局之路 ——从关税动荡到离岸红利,跨境科技如何重塑太平洋资本生态
java·开发语言·科技·金融·重构·web3·php
caijingshiye17 小时前
BitMart 启动中文品牌“币市”:引领加密资产本地化发展新篇章
人工智能·区块链
Dream Algorithm21 小时前
保证金率(Margin Ratio)
区块链
Ashlee_code1 天前
北极圈金融科技革命:奥斯陆证券交易所的绿色跃迁之路 ——从Visma千倍增长到碳信用衍生品,解码挪威资本市场的技术重构
科技·算法·金融·重构·架构·系统架构·区块链
007tg1 天前
007TG洞察:波场TRON上市观察,Web3流量工具的技术解析与应用
大数据·人工智能·产品运营·web3·职场发展·技术洞察·品牌运营
软件工程小施同学1 天前
【最新区块链论文录用资讯】CCF A--WWW 2025 23篇
区块链
Ashlee_code1 天前
关税战火中的技术方舟:新西兰证券交易所的破局之道 ——从15%关税冲击到跨塔斯曼结算联盟,解码下一代交易基础设施
java·python·算法·金融·架构·系统架构·区块链
懒猫gg2 天前
区块链概述
区块链
小七mod2 天前
【BTC】挖矿
区块链·比特币·btc·挖矿·pow·矿池·轻节点