{"content":{"title":"React使用Web3modal/wagmi链接钱包（WalletConnect）!","body":"最开始，我是直接使用的 create-react-app 创建项目的\r\n` npx create-react-app  app-name  --template typescript`\r\n但是当我安装wagmi包时，就各种乱七八糟的错，不知道怎么解决\r\n\r\n![image.png](https://img.learnblockchain.cn/attachments/2023/11/9E3ZfH8d654df5244e29f.png)\r\n\r\n所以，后来我使用了Umi Max（React + UmiJS + Antd）\r\n不仅能正常使用wagmi，而且还能使用Antd的布局，对应Web前端新手的我来说，很nice\r\n首先，输入指令来创建umi项目：\r\n`npx create-umi@latest`\r\n然后，选择Ant Design Pro\r\n\r\n![image.png](https://img.learnblockchain.cn/attachments/2023/11/OO5CgdGv654df0ff86ef7.png)\r\n\r\n再输入指令安装wagmi包\r\n`npm install @web3modal/wagmi wagmi viem`\r\n\r\n然后复制粘贴下面代码就可以使用了。\r\n```\r\nimport {\r\n  createWeb3Modal,\r\n  defaultWagmiConfig,\r\n  useWeb3Modal,\r\n  useWeb3ModalEvents,\r\n  useWeb3ModalState,\r\n  useWeb3ModalTheme\r\n} from '@web3modal/wagmi/react'\r\nimport { WagmiConfig } from 'wagmi'\r\nimport { arbitrum, mainnet } from 'wagmi/chains'\r\n\r\n// @ts-expect-error 1. Get projectId\r\nconst projectId = import.meta.env.VITE_PROJECT_ID\r\nif (!projectId) {\r\n  throw new Error('VITE_PROJECT_ID is not set')\r\n}\r\n\r\n// 2. Create wagmiConfig\r\nconst chains = [mainnet, arbitrum]\r\nconst wagmiConfig = defaultWagmiConfig({\r\n  chains,\r\n  projectId,\r\n  metadata: {\r\n    name: 'Web3Modal React Example'\r\n  }\r\n})\r\n\r\n// 3. Create modal\r\ncreateWeb3Modal({\r\n  wagmiConfig,\r\n  projectId,\r\n  chains,\r\n  themeMode: 'light',\r\n  themeVariables: {\r\n    '--w3m-color-mix': '#00DCFF',\r\n    '--w3m-color-mix-strength': 20\r\n  }\r\n})\r\n\r\nexport default function App() {\r\n  // 4. Use modal hook\r\n  const modal = useWeb3Modal()\r\n  const state = useWeb3ModalState()\r\n  const { themeMode, themeVariables, setThemeMode } = useWeb3ModalTheme()\r\n  const events = useWeb3ModalEvents()\r\n\r\n  return (\r\n    <WagmiConfig config={wagmiConfig}>\r\n      <w3m-button />\r\n      <w3m-network-button />\r\n      <w3m-connect-button />\r\n      <w3m-account-button />\r\n\r\n      <button onClick={() => modal.open()}>Connect Wallet</button>\r\n      <button onClick={() => modal.open({ view: 'Networks' })}>Choose Network</button>\r\n      <button onClick={() => setThemeMode(themeMode === 'dark' ? 'light' : 'dark')}>\r\n        Toggle Theme Mode\r\n      </button>\r\n      <pre>{JSON.stringify(state, null, 2)}</pre>\r\n      <pre>{JSON.stringify({ themeMode, themeVariables }, null, 2)}</pre>\r\n      <pre>{JSON.stringify(events, null, 2)}</pre>\r\n    </WagmiConfig>\r\n  )\r\n}\r\n```\r\n\r\n这里我们简单介绍一下代码：\r\n[WalletConnect Web3Modal React官方文档](https://docs.walletconnect.com/web3modal/react/about)\r\n\r\n1、使用web3modal/wagmi ，需要有一个projectId。[马上去注册](https://cloud.walletconnect.com/app)\r\n2、需要创建一个 wagmiConfig 配置，包括支持哪些链。\r\n3、需要使用createWeb3Modal创建modal；\r\n有了上面3不，代码就能正常使用web3modal/wagmi了。\r\n4、const { open, close } = useWeb3Modal()\r\nuseWeb3Modal钩子包含 open 和close 两个方法，用于打开/关闭链接钱包界面：\r\n\r\n![image.png](https://img.learnblockchain.cn/attachments/2023/11/grsjwr2W654df8dd83fb8.png)\r\n\r\n5、const { open, selectedNetworkId时当前的网络ID； } = useWeb3ModalState()\r\nopen是boolean类型，当显示链接钱包界面，或者切换网络界面时为true，反之为false；\r\nselectedNetworkId时当前选择的网络ID；\r\n\r\n6、默认组件\r\nw3m-button （打开链接钱包界面）\r\nw3m-network-button （打开切换网络界面）\r\nw3m-connect-button （打开链接钱包界面）\r\nw3m-account-button （打开链接钱包界面）\r\n链接钱包前：\r\n![image.png](https://img.learnblockchain.cn/attachments/2023/11/1APwqrZu654df9df51663.png)\r\n\r\n链接钱包后：\r\n![image.png](https://img.learnblockchain.cn/attachments/2023/11/HB26Jvek654dfa406bf48.png)"},"author":{"user":"https://learnblockchain.cn/people/15134","address":null},"history":null,"timestamp":1699609825,"version":1}