wagmi_react_wallet_connect_mainnet_sepolia_quickstart.ts

1import { http, createConfig, WagmiProvider } from 'wagmi'
2import { mainnet, sepolia } from 'wagmi/chains'
3import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
4
5const config = createConfig({
6  chains: [mainnet, sepolia],
7  transports: {
8    [mainnet.id]: http(),
9    [sepolia.id]: http(),
10  },
11})
12
13const queryClient = new QueryClient()
14
15function App() {
16  return (
17    <WagmiProvider config={config}>
18      <QueryClientProvider client={queryClient}>
19        {/* Your App Components */}
20        <WalletComponents />
21      </QueryClientProvider>
22    </WagmiProvider>
23  )
24}
25
26import { useAccount, useConnect, useDisconnect } from 'wagmi'
27
28function WalletComponents() {
29  const account = useAccount()
30  const { connectors, connect, status, error } = useConnect()
31  const { disconnect } = useDisconnect()
32
33  return (
34    <>
35      <div>
36        status: {account.status}
37        <br />
38        addresses: {JSON.stringify(account.addresses)}
39        <br />
40        chainId: {account.chainId}
41      </div>
42
43      {account.status === 'connected' && (
44        <button type="button" onClick={() => disconnect()}>
45          Disconnect
46        </button>
47      )}
48
49      <div>
50        {connectors.map((connector) => (
51          <button
52            key={connector.uid}
53            onClick={() => connect({ connector })}
54            type="button"
55          >
56            {connector.name}
57          </button>
58        ))}
59        <div>{status}</div>
60        <div>{error?.message}</div>
61      </div>
62    </>
63  )
64}
65
66export default App