区块链中的前端交互

Js脚本演示

与传统Web2交互不同的是：Web3的前端需要和区块链进行交互，把区块链视为后端存储数据的分布式数据库，然后智能合约为后端服务，然后通过RPC这个中间界协议与合约进行交互

（里面的私钥钱包为测试开发用的，一点也没存钱，只是存了一些Telos的测试代币）

import { ethers, JsonRpcProvider,Wallet,formatEther } from "ethers"
 
const SEND_WALLET = "0x813b0b6fc63155e028fbef8211b5dcd90b99520e"
const RECEIVE_WALLET= "0xdb5e3cd2baa4fde3b0f69b0de76afa7c7d9676eb"
 
const SEND_WALLET_KEY = "4d1a064fcf426a80a8325743fd35f86ae9956cbf40e0361228c83834ec09b766"
const RPC_URL = "https://rpc.testnet.telos.net"
 
const provider = new ethers.JsonRpcProvider(RPC_URL)
const wallet = new ethers.Wallet(SEND_WALLET_KEY,provider)
 
//查询账户余额
const send_ballance = await provider.getBalance(wallet.address)
const receive_ballance = await provider.getBalance(RECEIVE_WALLET)
 
console.log(`发送账户余额：${ethers.formatEther(send_ballance)}`)
console.log(`收款账户余额：${ethers.formatEther(receive_ballance)}`)
 
//发起交易
const tx = {
    to:RECEIVE_WALLET,
    value: ethers.parseEther("1")
}
 
const receipt = await wallet.sendTransaction(tx)
 
const balance = await provider.getBalance(RECEIVE_WALLET); 
console.log(`收款账号目前余额: ${balance}`);

工程项目中的交互

主要是用的RanbowKit中的与钱包交互的组件，这个工具会把与上面ethers.js的代码封装为React组件库，能够让开发者降低心智的使用他

reference

https://openbuild.xyz/learn/challenges/2036589711/1716360093