Skip to content

Commit 54d202a

Browse files
Dhaiwat10Dhaiwat10
authored
update docs to be compatible with wagmi > 0.3.x (#11)
1 parent b77b138 commit 54d202a

9 files changed

+21
-210
lines changed

‎pages/frontend/detect-wrong-network.mdx

+2-8
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,16 @@ import Callout from 'nextra-theme-docs/callout'
22

33
# Detecting if the user is on the wrong network
44

5-
<Callout>
6-
The content on this site is based off of version `0.2.28` of `wagmi`. The
7-
`0.3.0` version release brought in tons of breaking API changes. The content
8-
on this site has not been updated to be compatible with it yet.
9-
</Callout>
10-
115
You can easily detect if the user is on the wrong network using the `useNetwork` hook from `wagmi`.
126

137
```tsx
148
import { useNetwork } from 'wagmi'
159

1610
const Page = () => {
17-
const [{ data, error, loading }] = useNetwork()
11+
const { activeChain } = useNetwork()
1812

1913
// checks if the user is not on mainnet. 1 => mainnet's chain ID. See https://chainlist.org/ for other chains
20-
const wrongNetwork = data.chain?.id !== 1
14+
const wrongNetwork = activeChain?.id !== 1
2115

2216
return <div>{wrongNetwork && <p>You are on the wrong network!</p>}</div>
2317
}

‎pages/frontend/ens.mdx

+3-28
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,15 @@ import Callout from 'nextra-theme-docs/callout'
66
To learn more about ENS: https://www.youtube.com/watch?v=jssRnV5Ob6A
77
</Callout>
88

9-
<Callout>
10-
The content on this site is based off of version `0.2.28` of `wagmi`. The
11-
`0.3.0` version release brought in tons of breaking API changes. The content
12-
on this site has not been updated to be compatible with it yet.
13-
</Callout>
14-
15-
### Resolving the connected wallet's ENS name
16-
17-
To show the user's connected wallet's ENS name in your app, we make use of the `useAccount` hook from `wagmi`.
18-
19-
```tsx
20-
import { useAccount } from 'wagmi'
21-
22-
const Page = () => {
23-
const [{ data: accountData }] = useAccount({ fetchEns: true })
24-
25-
return (
26-
<div>
27-
Your ENS name is:
28-
{accountData?.ens.name}
29-
</div>
30-
)
31-
}
32-
```
33-
349
### Resolving any valid Ethereum address's ENS name
3510

36-
For this, we make use of the `useEnsLookup` hook from `wagmi`.
11+
For this, we make use of the `useEnsName` hook from `wagmi`.
3712

3813
```tsx
39-
import { useEnsLookup } from 'wagmi'
14+
import { useEnsName } from 'wagmi'
4015

4116
const Page = () => {
42-
const [{ data: ens }] = useEnsLookup({
17+
const { data: ens } = useEnsName({
4318
address: '0xD933A3Ec19065dfAEc5CCaA4bfD6cd1dd370D9F3',
4419
})
4520

‎pages/frontend/interacting-with-contract.mdx

-6
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,6 @@ import Callout from 'nextra-theme-docs/callout'
77
https://www.quicknode.com/guides/solidity/what-is-an-abi
88
</Callout>
99

10-
<Callout>
11-
The content on this site is based off of version `0.2.28` of `wagmi`. The
12-
`0.3.0` version release brought in tons of breaking API changes. The content
13-
on this site has not been updated to be compatible with it yet.
14-
</Callout>
15-
1610
The most straight-forward way to interact with a smart contract is to use the `useContract` hook from `wagmi`.
1711

1812
```tsx

‎pages/frontend/project-setup.mdx

-6
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,6 @@ import Callout from 'nextra-theme-docs/callout'
22

33
# Project setup
44

5-
<Callout>
6-
The content on this site is based off of version `0.2.28` of `wagmi`. The
7-
`0.3.0` version release brought in tons of breaking API changes. The content
8-
on this site has not been updated to be compatible with it yet.
9-
</Callout>
10-
115
This cheatsheet is based around projects using React, TypeScript and [wagmi](https://wagmi.sh).
126

137
### Quick start

‎pages/frontend/read-contract.mdx

+6-12
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,13 @@ import Callout from 'nextra-theme-docs/callout'
77
https://www.quicknode.com/guides/solidity/what-is-an-abi
88
</Callout>
99

10-
<Callout>
11-
The content on this site is based off of version `0.2.28` of `wagmi`. The
12-
`0.3.0` version release brought in tons of breaking API changes. The content
13-
on this site has not been updated to be compatible with it yet.
14-
</Callout>
15-
1610
We make use of the `useContractRead` hook from `wagmi` to read from a smart contract.
1711

1812
```tsx
1913
import { useContractRead } from 'wagmi'
2014

2115
const Page = () => {
22-
const [{ data, error, loading }, read] = useContractRead(
16+
const { data, isError, isLoading } = useContractRead(
2317
{
2418
addressOrName: 'your_contracts_address',
2519
abi: your_contracts_abi,
@@ -35,7 +29,7 @@ For example, if you want to read the `greeting` from a `Greeter` contract:
3529
import { useContractRead } from 'wagmi'
3630

3731
const Page = () => {
38-
const [{ data, error, loading }, read] = useContractRead(
32+
const { data, isError, isLoading } = useContractRead(
3933
{
4034
addressOrName: 'greeter_address',
4135
abi: Greeter_ABI,
@@ -49,13 +43,13 @@ const Page = () => {
4943

5044
---
5145

52-
If you want to programatically read instead of reading on page load, you can use the `read` function directly:
46+
If you want to programatically read instead of reading on page load, you can use the `refetch` function directly:
5347

5448
```tsx
5549
import { useContractRead } from 'wagmi'
5650

5751
const Page = () => {
58-
const [_, read] = useContractRead(
52+
const { refetch } = useContractRead(
5953
{
6054
addressOrName: 'greeter_address',
6155
abi: Greeter_ABI,
@@ -64,8 +58,8 @@ const Page = () => {
6458
)
6559

6660
const handleClick = async () => {
67-
const { data } = read()
68-
console.log(`Greeting: ${data}`)
61+
const res = refetch()
62+
console.log(`Greeting: ${res}`)
6963
}
7064

7165
return <button onClick={handleClick}>Read greeting</button>

‎pages/frontend/sign-message.mdx

+3-9
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,17 @@ import Callout from 'nextra-theme-docs/callout'
22

33
# Signing a message
44

5-
<Callout>
6-
The content on this site is based off of version `0.2.28` of `wagmi`. The
7-
`0.3.0` version release brought in tons of breaking API changes. The content
8-
on this site has not been updated to be compatible with it yet.
9-
</Callout>
10-
115
We make use of the `useSignMessage` hook from `wagmi` to sign messages.
126

137
```tsx
148
import { useSignMessage } from 'wagmi'
159

1610
const Page = () => {
17-
const [_, signMessage] = useSignMessage()
11+
const { signMessageAsync } = useSignMessage()
1812

1913
const onClick = async () => {
20-
const { data, error } = signMessage({ message: 'gm' })
21-
console.log(`Signed message: ${data}`)
14+
const signature = await signMessageAsync({ message: 'gm' })
15+
console.log(`Signed message: ${signature}`)
2216
}
2317

2418
return <button onClick={onClick}>Sign Message</button>

‎pages/frontend/switch-networks.mdx

+2-8
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,14 @@ import Callout from 'nextra-theme-docs/callout'
22

33
# Switching networks
44

5-
<Callout>
6-
The content on this site is based off of version `0.2.28` of `wagmi`. The
7-
`0.3.0` version release brought in tons of breaking API changes. The content
8-
on this site has not been updated to be compatible with it yet.
9-
</Callout>
10-
115
We make use of the `useNetwork` hook from `wagmi` to switch networks.
126

137
```tsx
148
import { useNetwork } from 'wagmi'
159

1610
const Page = () => {
17-
const [{ data, error, loading }, switchNetwork] = useNetwork()
18-
const currentChainId = data.chain?.id
11+
const { activeChain, switchNetwork} = useNetwork()
12+
const currentChainId = activeChain?.id
1913

2014
// 1 => mainnet's chain ID. For other networks, see https://chainlist.org
2115
const desiredChainId = 1

‎pages/frontend/wallet-connections.mdx

+3-125
Original file line numberDiff line numberDiff line change
@@ -2,131 +2,9 @@ import Callout from 'nextra-theme-docs/callout'
22

33
# Wallet connections
44

5-
<Callout>
6-
The content on this site is based off of version `0.2.28` of `wagmi`. The
7-
`0.3.0` version release brought in tons of breaking API changes. The content
8-
on this site has not been updated to be compatible with it yet.
9-
</Callout>
10-
115
[create-web3-frontend](https://github.com/dhaiwat10/create-web3-frontend) already does this for you.
126

13-
1. First, setup the `wagmi` Provider at the root of your app.
14-
15-
If you're using Next.js, this would be done in `pages/_app.tsx`. If you're using create-react-app, this would be done in `src/index.tsx`.
16-
17-
```tsx
18-
import '../styles/globals.css'
19-
import type { AppProps } from 'next/app'
20-
import { Connector, Provider, chain, defaultChains } from 'wagmi'
21-
import { InjectedConnector } from 'wagmi/connectors/injected'
22-
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
23-
import { WalletLinkConnector } from 'wagmi/connectors/walletLink'
24-
import { providers } from 'ethers'
25-
26-
// Get environment variables
27-
const infuraId = process.env.NEXT_PUBLIC_INFURA_ID as string
28-
29-
// Pick chains
30-
const chains = defaultChains
31-
const defaultChain = chain.mainnet
32-
33-
// Set up connectors
34-
type ConnectorsConfig = { chainId?: number }
35-
const connectors = ({ chainId }: ConnectorsConfig) => {
36-
const rpcUrl =
37-
chains.find((x) => x.id === chainId)?.rpcUrls?.[0] ??
38-
defaultChain.rpcUrls[0]
39-
return [
40-
new InjectedConnector({ chains }),
41-
new WalletConnectConnector({
42-
chains,
43-
options: {
44-
infuraId,
45-
qrcode: true,
46-
},
47-
}),
48-
new WalletLinkConnector({
49-
chains,
50-
options: {
51-
appName: 'create-web3-frontend',
52-
jsonRpcUrl: `${rpcUrl}/${infuraId}`,
53-
},
54-
}),
55-
]
56-
}
57-
58-
// Set up providers
59-
type ProviderConfig = { chainId?: number; connector?: Connector }
60-
const isChainSupported = (chainId?: number) =>
61-
chains.some((x) => x.id === chainId)
62-
63-
const provider = ({ chainId }: ProviderConfig) =>
64-
providers.getDefaultProvider(
65-
isChainSupported(chainId) ? chainId : defaultChain.id,
66-
{
67-
infuraId,
68-
}
69-
)
70-
const webSocketProvider = ({ chainId }: ProviderConfig) =>
71-
isChainSupported(chainId)
72-
? new providers.InfuraWebSocketProvider(chainId, infuraId)
73-
: undefined
74-
75-
function MyApp({ Component, pageProps }: AppProps) {
76-
return (
77-
<Provider
78-
autoConnect
79-
connectors={connectors}
80-
provider={provider}
81-
webSocketProvider={webSocketProvider}
82-
>
83-
<Component {...pageProps} />
84-
</Provider>
85-
)
86-
}
87-
88-
export default MyApp
89-
```
90-
91-
2. Now, setup the wallet connection screen wherever you wish.
92-
93-
```tsx
94-
import type { NextPage } from 'next'
95-
import { FC } from 'react'
96-
import { useConnect, useAccount } from 'wagmi'
97-
98-
const Home: NextPage = () => {
99-
const [{ data: connectData, error: connectError }, connect] = useConnect()
100-
const { connected } = connectData
101-
const [{ data: accountData }, disconnect] = useAccount()
102-
103-
if (connected) {
104-
return (
105-
<div>
106-
<p>Welcome {accountData?.address}</p>
107-
<button onClick={disconnect}>Disconnect</button>
108-
<InfoSection />
109-
</div>
110-
)
111-
}
112-
113-
return (
114-
<div>
115-
<p>Connect your wallet:</p>
116-
<div>
117-
{/* connectData.connectors contains the list of available 'connectors' like Metamask, WalletConnect, etc */}
118-
{connectData.connectors.map((x) => (
119-
<button key={x.id} onClick={() => connect(x)}>
120-
{x.name}
121-
{!x.ready && ' (unsupported)'}
122-
</button>
123-
))}
124-
</div>
125-
126-
{connectError && <p>{connectError?.message ?? 'Failed to connect'}</p>}
127-
</div>
128-
)
129-
}
7+
You have two options.
1308

131-
export default Home
132-
```
9+
1. Use [Rainbowkit](https://www.rainbowkit.com) (recommended, fastest and prettiest), or
10+
2. If you want to make a 'custom' wallet connection interface, refer the [wallet connection guide in the wagmi docs](https://wagmi.sh/examples/connect-wallet)

‎pages/frontend/write-contract.mdx

+2-8
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,13 @@ import Callout from 'nextra-theme-docs/callout'
77
https://www.quicknode.com/guides/solidity/what-is-an-abi
88
</Callout>
99

10-
<Callout>
11-
The content on this site is based off of version `0.2.28` of `wagmi`. The
12-
`0.3.0` version release brought in tons of breaking API changes. The content
13-
on this site has not been updated to be compatible with it yet.
14-
</Callout>
15-
1610
We make use of the `useContractWrite` hook from `wagmi` to read from a smart contract.
1711

1812
```tsx
1913
import { useContractWrite } from 'wagmi'
2014

2115
const Page = () => {
22-
const [{ data, error, loading }, write] = useContractWrite(
16+
const { data, error, loading, write } = useContractWrite(
2317
{
2418
addressOrName: 'your_contracts_address',
2519
abi: your_contracts_abi,
@@ -35,7 +29,7 @@ For example, if you want to set the `greeting` i.e. call `setGreeting` for a `Gr
3529
import { useContractWrite } from 'wagmi'
3630

3731
const Page = () => {
38-
const [{ data, error, loading }, write] = useContractWrite(
32+
const { data, error, loading, write } = useContractWrite(
3933
{
4034
addressOrName: 'greeter_address',
4135
abi: Greeter_ABI,

0 commit comments

Comments
 (0)