区块链相关(前端)

涉及前端连接钱包,签名,读写合约等.

区块链前端开发常用库

Web3.js

web3.js 是一个广泛使用的 Ethereum JavaScript API 库，允许开发者与以太坊区块链进行交互。

主要功能

连接以太坊节点
发送交易和查询链上数据
智能合约交互
账户管理

基本用法示例

import Web3 from 'web3';

// 连接到钱包提供商
const web3 = new Web3(window.ethereum);

// 获取账户地址
const accounts = await web3.eth.getAccounts();

// 调用智能合约
const contract = new web3.eth.Contract(abi, contractAddress);

官方文档

Wagmi

wagmi 是一个基于 React 的区块链开发工具库，兼容Javascript，Vue，简化了与 EVM 兼容链的交互逻辑，内置了常见的区块链操作钩子，支持多链和钱包集成。

主要功能

基于 React Hooks 的 API 设计，简化状态管理
内置钱包连接（MetaMask、Coinbase Wallet 等）
智能合约交互封装（读 / 写操作、事件监听）
多链支持与链切换管理
交易状态跟踪与错误处理

安装(以Vue为示例)

pnpm add @wagmi/vue viem@2.x @tanstack/vue-query

npm install @wagmi/vue viem@2.x @tanstack/vue-query

yarn add @wagmi/vue viem@2.x @tanstack/vue-query

bun add @wagmi/vue viem@2.x @tanstack/vue-query

Viem 是以太坊的TypeScript接口，用于执行区块链操作。
TanStack Query 是一个处理请求、缓存等的Apache状态管理器。
TypeScript是可选的，但强烈推荐。了解更多关于TypeScript support .

将插件添加到应用程序

plugins/wagmiConfig.ts

import { createConfig, http } from '@wagmi/vue'
import { mainnet, sepolia } from '@wagmi/vue/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

查看 WagmiPlugin文档以了解有关插件API的更多信息.

基本用法示例

获取用户钱包地址

<script setup lang="ts">
  import { useAccount, useEnsName } from '@wagmi/vue'

  const { address } = useAccount() //获取用户连接账号
  const { data, error, status } = useEnsName({ address })
</script>

<template>
  <div v-if="status === 'pending'">Loading ENS name</div>
  <div v-else-if="status === 'error'">
    Error fetching ENS name: {{error.message}}
  </div>
  <div v-else>ENS name: {{data}}</div>
</template>

智能合约交互

<script setup lang="ts">
  import { useReadContract } from 'wagmi'
  import { wagmiContractConfig } from './contracts'
//读取用户账户的地址为0x03A71968491d55603FFe1b11A9e23eF013f75bCF代币余额
  const { data: balance } = useReadContract({
    ...wagmiContractConfig,
    functionName: 'balanceOf',
    args: ['0x03A71968491d55603FFe1b11A9e23eF013f75bCF'],
  })
</script>

<template>
  <div>Balance: {{ balance?.toString() }}</div>
</template>

export const wagmiContractConfig = {
address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
abi: [
{
type: 'function',
name: 'balanceOf',
stateMutability: 'view',
inputs: [{ name: 'account', type: 'address' }],
outputs: [{ type: 'uint256' }],
},
{
type: 'function',
name: 'totalSupply',
stateMutability: 'view',
inputs: [],
outputs: [{ name: 'supply', type: 'uint256' }],
},
],
} as const

<script setup lang="ts">
  import {
    useWaitForTransactionReceipt,
    useWriteContract
  } from 'wagmi'
  import { abi } from './abi'

  const {
    data: hash,
    isPending,
    writeContract
  } = useWriteContract()

  function submit(event: Event) {
    const formData = new FormData(e.target as HTMLFormElement)
    const tokenId = formData.get('tokenId') as string
    //0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2为合约地址 调用mint方法 参数为tokenId
    writeContract({
      address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
      abi,
      functionName: 'mint',
      args: [BigInt(tokenId)],
    })
  }

  const { isLoading: isConfirming, isSuccess: isConfirmed } =
          useWaitForTransactionReceipt({
            hash,
          })
</script>

<template>
<form @submit.prevent="submit">
  <input name="tokenId" placeholder="69420" required />
  <button :disabled="isPending" type="submit">
    <span v-if="isPending">Sending...</span>
    <span v-else>Send</span>
  </button>
  <div v-if="hash">Transaction Hash: {{ hash }}</div>
  <div v-if="isConfirming">Waiting for confirmation...</div>
  <div v-if="isConfirmed">Transaction Confirmed!</div>
</form>
</template>

export const abi = [
  {
    name: 'mint',
    type: 'function',
    stateMutability: 'nonpayable',
    inputs: [{ internalType: 'uint32', name: 'tokenId', type: 'uint32' }],
    outputs: [],
  },
] as const

官方文档

Reown

Reown使构建者能够创建安全，用户友好和富有洞察力的钱包和应用程序UX。提供所有工具，以更快地启动和更智能地扩展。

主要功能

支持多种钱包的无缝连接
提供标准化的连接流程
支持移动端和桌面端钱包
管理多个应用的连接会话
提供会话状态的实时同步
支持会话的持久化存储
支持主流区块链网络

安装(以Vue+wagmi为示例)

pnpm add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem

yarn add @@reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem

npm install @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem

bun add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/vue-query @wagmi/vue viem

申请ProjectId

获取ProjectId

前往Reown仪表板并立即创建一个新项目！

申请ProjectId

在Reown仪表板上创建新项目，
并获取新的项目ID。

将插件添加到应用程序

plugins/wagmiConfig.ts

import type { AppKitNetwork } from '@reown/appkit/networks'

import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { bsc, bscTestnet } from '@reown/appkit/networks'

export const projectId = import.meta.env.VITE_PROJECT_ID

export const metadata = {
  name: 'AppKit',
  description: 'AppKit Example',
  url: 'http://192.168.0.209:9001',
  icons: ['https://avatars.githubusercontent.com/u/179229932'],
}
// 3. Set the networks
export const network = import.meta.env.MODE === 'production' ? bsc : bscTestnet
export const networks: [AppKitNetwork, ...AppKitNetwork[]] = [network]

// 4. Create Wagmi Adapter
export const wagmiAdapter = new WagmiAdapter({
  networks,
  projectId,
})

查看 WagmiPlugin文档以了解有关插件API的更多信息.

要打开AppKit，可以使用Reown的web组件或使用AppKit构建自己的按钮自定义组件在本例中，我们将使用组件 Web组件是不需要导入的全局html元素

<template>
  <appkit-button />
</template>

获取用户钱包地址

import { useAppKitAccount } from '@reown/appkit/vue' const accountData = useAppKitAccount()

<script setup lang="ts">

</script>
<template>
  <appkit-button />
</template>

智能合约交互

<script setup lang="ts">
  import { readContract } from "@wagmi/core";
  import {erc20Abi} from 'viem'

  const USDTAddress = "0x...";

  const data = readContract({
    abi: erc20Abi,
    address: USDTAddress,
    functionName: "symbol",
  });
</script>

官方文档

Viem

主要功能

Viem 是 Wagmi 的底层依赖，提供区块链核心功能
可与 Wagmi 结合使用，提供更高级的 React Hooks API
支持 AppKit 和其他现代 Web3 开发框架

官方文档

图片压缩

常用的图片压缩网站.