入门指南

快速设置

推荐使用 create-wagmi 命令行界面（CLI）来设置你的 wagmi 应用。这将使用 TypeScript 设置一个新的 wagmi 应用程序，并安装所需的依赖。

npm init wagmi

当设置完成后，你可以通过运行 npm run dev 来启动你的应用程序，然后导航到 http://localhost:3000。

了解更多？查看 create-wagmi CLI 文档。

手动设置

安装

安装 wagmi 和 viem

bash npm i wagmi viem

配置链

首先，配置你想要使用的链和相应的 Provider

import { configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
 
const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()],
)

这个例子使用了以太坊主网（Mainnet），但是，你也可以传入任何 evm 兼容链。

注意:在生产应用中，不建议只将 publicProvider 传递给 configureChains，因为 Public Provider 有速率限制，建议还传递一个 alchemyProvider 或 infuraProvider。

阅读更多关于链的信息。

创建 wagmi config

接下来，使用 createConfig 创建一个 wagmi config 实例，并将 configureChains 的结果传递给它。

import { WagmiConfig, createConfig, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
 
const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()],
)
 
const config = createConfig({
  autoConnect: true,
  publicClient,
  webSocketPublicClient,
})

阅读更多关于 Client 配置。

用 `WagmiConfig` Component

最后，用 WagmiConfig Component wrap app，并将 config 传递给它。

const config = createConfig({
  autoConnect: true,
  publicClient,
  webSocketPublicClient,
})
 
function App() {
  return (
    <WagmiConfig config={config}>
      <YourRoutes />
    </WagmiConfig>
  )
}

继续前进吧!

使用 Hook 吧，WagmiConfig 里面的每一个 component 现在都可以使用 wagmi hooks 了!

import { useAccount, useConnect, useEnsName } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
 
function Profile() {
  const { address, isConnected } = useAccount()
  const { data: ensName } = useEnsName({ address })
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  })
 
  if (isConnected) return <div>Connected to {ensName ?? address}</div>
  return <button onClick={() => connect()}>Connect Wallet</button>
}

想了解更多吗？请查看例子，了解如何在真实世界的场景中使用 wagmi，或者继续阅读文档。

与其他库对比