wagmi2.X （一）

我使用的是vue来创建的项目，第一步就是直接根据官方文档新建一个vue项目：

npm create wagmi@latest

具体的配置根据自己的喜好，配置完成后我们就可以正常的进行钱包链接了，但是如何进行自定义的一些配置呢？

先改造main.ts：

import { VueQueryPlugin } from '@tanstack/vue-query'
import { WagmiPlugin } from '@wagmi/vue'
import { createApp } from 'vue'
import App from './App.vue'
import './style.css'
import { config } from './wagmi'
const app = createApp(App)
app.use(WagmiPlugin, { config }).use(VueQueryPlugin, {})app.mount('#app')

从main中可以看到我们需要创建一个config，config里面放置的就是我们的自定义配置：

import { http, createConfig } from '@wagmi/vue'
import { base, mainnet } from '@wagmi/vue/chains'
import { walletConnect } from '@wagmi/vue/connectors'
const projectId = ''
export const config = createConfig({  
    chains: QngTestnet,  
    connectors: [    
        walletConnect({ projectId })  ],  
        transports: {    
            [mainnet.id]: http(), //这个地方的id配置的是你需要的正式网络的chainID   
            [base.id]: http(),  },//不用说是测试环境的
        })
export const QngTestnet = {  
    id: ,  
    name: '',  
    network: '',  
    nativeCurrency: {    
        decimals:,    
        name: '',    
        symbol: ''  
    },  
    rpcUrls: {    
        public: { 
            http: [''] 
        },    
        default: { 
            http: [''] 
        }  
    },  
    blockExplorers: {   
        etherscan: { 
            name: '', 
            url: '' 
        },    
    default: { 
            name: '', 
            url: '' 
        }  
    }
}

其中的QngTestnet就是我们的网络rpc设置，projectId就是申请的项目地址

connectors中配置你需要的钱包信息，因为我只需要一个matemask所以此处就只配置了一个wallet，会自动添加matemask的

至此一个简单的钱包链接功能就完成了，如果想进行一些合约方面的交互则需要配合wagmi/core和viem进行使用。