Skip to content

Commit d9584a6

Browse files
Dhaiwat10Dhaiwat10
authored
Migrate to wagmi 0.3.1 (#9)
* Migrate to `wagmi` 0.3.1 * 1.0.0
1 parent 347ce12 commit d9584a6

File tree

6 files changed

+136
-157
lines changed

6 files changed

+136
-157
lines changed

‎create-app.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export async function createApp({
9898
'[email protected]',
9999
'[email protected]',
100100
'next',
101-
'wagmi@0.2.28',
101+
'wagmi@0.3.1',
102102
'ethers',
103103
];
104104
/**

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-web3-frontend",
3-
"version": "0.3.2",
3+
"version": "1.0.0",
44
"description": "Initialize a React web3 frontend using Next.js, wagmi, ethers and TailwindCSS",
55
"repository": "https://github.com/dhaiwat10/create-web3-frontend",
66
"author": "Dhaiwat Pandya <[email protected]>",

‎templates/default/pages/_app.js

Lines changed: 30 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import '../styles/globals.css';
2-
import { Connector, Provider, chain, defaultChains } from 'wagmi';
2+
import { chain, createClient, defaultChains, Provider } from 'wagmi';
3+
import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
34
import { InjectedConnector } from 'wagmi/connectors/injected';
45
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
5-
import { WalletLinkConnector } from 'wagmi/connectors/walletLink';
6-
import { providers } from 'ethers';
76

87
// Get environment variables
98
const infuraId = process.env.NEXT_PUBLIC_INFURA_ID;
@@ -13,52 +12,37 @@ const chains = defaultChains;
1312
const defaultChain = chain.mainnet;
1413

1514
// Set up connectors
16-
const connectors = ({ chainId }) => {
17-
const rpcUrl =
18-
chains.find((x) => x.id === chainId)?.rpcUrls?.[0] ??
19-
defaultChain.rpcUrls[0];
20-
return [
21-
new InjectedConnector({ chains }),
22-
new WalletConnectConnector({
23-
chains,
24-
options: {
25-
infuraId,
26-
qrcode: true,
27-
},
28-
}),
29-
new WalletLinkConnector({
30-
chains,
31-
options: {
32-
appName: 'create-web3-frontend',
33-
jsonRpcUrl: `${rpcUrl}/${infuraId}`,
34-
},
35-
}),
36-
];
37-
};
38-
39-
// Set up providers
40-
const isChainSupported = (chainId) => chains.some((x) => x.id === chainId);
41-
42-
const provider = ({ chainId }) =>
43-
providers.getDefaultProvider(
44-
isChainSupported(chainId) ? chainId : defaultChain.id,
45-
{
46-
infuraId,
47-
}
48-
);
49-
const webSocketProvider = ({ chainId }) =>
50-
isChainSupported(chainId)
51-
? new providers.InfuraWebSocketProvider(chainId, infuraId)
52-
: undefined;
15+
const client = createClient({
16+
autoConnect: true,
17+
connectors({ chainId }) {
18+
const chain = chains.find((x) => x.id === chainId) ?? defaultChain;
19+
const rpcUrl = chain.rpcUrls.infura
20+
? `${chain.rpcUrls.infura}/${infuraId}`
21+
: chain.rpcUrls.default;
22+
return [
23+
new InjectedConnector(),
24+
new CoinbaseWalletConnector({
25+
options: {
26+
appName: 'create-web3-frontend',
27+
chainId: chain.id,
28+
jsonRpcUrl: rpcUrl,
29+
},
30+
}),
31+
new WalletConnectConnector({
32+
options: {
33+
qrcode: true,
34+
rpc: {
35+
[chain.id]: rpcUrl,
36+
},
37+
},
38+
}),
39+
];
40+
},
41+
});
5342

5443
function MyApp({ Component, pageProps }) {
5544
return (
56-
<Provider
57-
autoConnect
58-
connectors={connectors}
59-
provider={provider}
60-
webSocketProvider={webSocketProvider}
61-
>
45+
<Provider client={client}>
6246
<Component {...pageProps} />
6347
</Provider>
6448
);

‎templates/default/pages/index.js

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import { useConnect, useAccount } from 'wagmi';
1+
import { useAccount, useConnect, useDisconnect, useEnsName } from 'wagmi';
22

33
const Home = () => {
4-
const [{ data: connectData, error: connectError }, connect] = useConnect();
5-
const { connected } = connectData;
6-
const [{ data: accountData }, disconnect] = useAccount({
7-
fetchEns: true,
8-
});
4+
const { data: account } = useAccount();
5+
const { data: ensName } = useEnsName({ address: account?.address });
6+
const { connect, connectors, error, isConnecting, pendingConnector } =
7+
useConnect();
8+
const { disconnect } = useDisconnect();
99

10-
if (connected) {
10+
if (account) {
1111
return (
1212
<div className='py-24 text-center'>
13-
<p className='text-2xl font-bold'>
14-
Welcome {accountData?.ens?.name || accountData?.address}
15-
</p>
13+
<div>
14+
{ensName ? `${ensName} (${account.address})` : account.address}
15+
</div>
16+
<div>Connected to {account?.connector?.name}</div>
1617
<button
17-
className='mx-auto mt-10 rounded bg-slate-200 p-2'
18-
onClick={disconnect}
18+
className='rounded bg-slate-200 p-2'
19+
onClick={() => disconnect()}
1920
>
2021
Disconnect
2122
</button>
22-
<InfoSection />
2323
</div>
2424
);
2525
}
@@ -29,24 +29,24 @@ const Home = () => {
2929
<h1 className='text-2xl font-bold'>Welcome to create-web3-frontend</h1>
3030
<p className='mt-10'>Connect your wallet:</p>
3131
<div className='mt-5 flex justify-center gap-6'>
32-
{/* connectData.connectors contains the list of available 'connectors' like Metamask, WalletConnect, etc */}
33-
{connectData.connectors.map((x) => (
34-
<button
35-
className='rounded bg-slate-200 p-2'
36-
key={x.id}
37-
onClick={() => connect(x)}
38-
>
39-
{x.name}
40-
{!x.ready && ' (unsupported)'}
41-
</button>
42-
))}
32+
{connectors.map((connector) => {
33+
return (
34+
<button
35+
className='rounded bg-slate-200 p-2'
36+
key={connector.id}
37+
onClick={() => connect(connector)}
38+
>
39+
{connector.name}
40+
{!connector.ready && ' (unsupported)'}
41+
{isConnecting &&
42+
connector.id === pendingConnector?.id &&
43+
' (connecting)'}
44+
</button>
45+
);
46+
})}
4347
</div>
4448

45-
{connectError && (
46-
<p className='text-red-500'>
47-
{connectError?.message ?? 'Failed to connect'}
48-
</p>
49-
)}
49+
{error && <div>{error.message}</div>}
5050

5151
<InfoSection />
5252
</div>
@@ -73,6 +73,13 @@ const InfoSection = () => {
7373
>
7474
Open an issue on Github
7575
</a>
76+
<a
77+
href='https://twitter.com/dhaiwat10'
78+
target='_blank'
79+
className='underline text-gray-600'
80+
>
81+
DM me on Twitter
82+
</a>
7683
</div>
7784
</div>
7885
);

‎templates/typescript/pages/_app.tsx

Lines changed: 30 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import '../styles/globals.css';
22
import type { AppProps } from 'next/app';
3-
import { Connector, Provider, chain, defaultChains } from 'wagmi';
3+
import { chain, createClient, defaultChains, Provider } from 'wagmi';
4+
import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
45
import { InjectedConnector } from 'wagmi/connectors/injected';
56
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
6-
import { WalletLinkConnector } from 'wagmi/connectors/walletLink';
7-
import { providers } from 'ethers';
87

98
// Get environment variables
109
const infuraId = process.env.NEXT_PUBLIC_INFURA_ID as string;
@@ -14,55 +13,37 @@ const chains = defaultChains;
1413
const defaultChain = chain.mainnet;
1514

1615
// Set up connectors
17-
type ConnectorsConfig = { chainId?: number };
18-
const connectors = ({ chainId }: ConnectorsConfig) => {
19-
const rpcUrl =
20-
chains.find((x) => x.id === chainId)?.rpcUrls?.[0] ??
21-
defaultChain.rpcUrls[0];
22-
return [
23-
new InjectedConnector({ chains }),
24-
new WalletConnectConnector({
25-
chains,
26-
options: {
27-
infuraId,
28-
qrcode: true,
29-
},
30-
}),
31-
new WalletLinkConnector({
32-
chains,
33-
options: {
34-
appName: 'create-web3-frontend',
35-
jsonRpcUrl: `${rpcUrl}/${infuraId}`,
36-
},
37-
}),
38-
];
39-
};
40-
41-
// Set up providers
42-
type ProviderConfig = { chainId?: number; connector?: Connector };
43-
const isChainSupported = (chainId?: number) =>
44-
chains.some((x) => x.id === chainId);
45-
46-
const provider = ({ chainId }: ProviderConfig) =>
47-
providers.getDefaultProvider(
48-
isChainSupported(chainId) ? chainId : defaultChain.id,
49-
{
50-
infuraId,
51-
}
52-
);
53-
const webSocketProvider = ({ chainId }: ProviderConfig) =>
54-
isChainSupported(chainId)
55-
? new providers.InfuraWebSocketProvider(chainId, infuraId)
56-
: undefined;
16+
const client = createClient({
17+
autoConnect: true,
18+
connectors({ chainId }) {
19+
const chain = chains.find((x) => x.id === chainId) ?? defaultChain;
20+
const rpcUrl = chain.rpcUrls.infura
21+
? `${chain.rpcUrls.infura}/${infuraId}`
22+
: chain.rpcUrls.default;
23+
return [
24+
new InjectedConnector(),
25+
new CoinbaseWalletConnector({
26+
options: {
27+
appName: 'create-web3-frontend',
28+
chainId: chain.id,
29+
jsonRpcUrl: rpcUrl,
30+
},
31+
}),
32+
new WalletConnectConnector({
33+
options: {
34+
qrcode: true,
35+
rpc: {
36+
[chain.id]: rpcUrl,
37+
},
38+
},
39+
}),
40+
];
41+
},
42+
});
5743

5844
function MyApp({ Component, pageProps }: AppProps) {
5945
return (
60-
<Provider
61-
autoConnect
62-
connectors={connectors}
63-
provider={provider}
64-
webSocketProvider={webSocketProvider}
65-
>
46+
<Provider client={client}>
6647
<Component {...pageProps} />
6748
</Provider>
6849
);

‎templates/typescript/pages/index.tsx

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
import { NextPage } from 'next';
2-
import { FC } from 'react';
3-
import { useConnect, useAccount } from 'wagmi';
1+
import type { NextPage } from 'next';
2+
import type { FC } from 'react';
3+
import { useAccount, useConnect, useDisconnect, useEnsName } from 'wagmi';
44

55
const Home: NextPage = () => {
6-
const [{ data: connectData, error: connectError }, connect] = useConnect();
7-
const { connected } = connectData;
8-
const [{ data: accountData }, disconnect] = useAccount({
9-
fetchEns: true,
10-
});
6+
const { data: account } = useAccount();
7+
const { data: ensName } = useEnsName({ address: account?.address });
8+
const { connect, connectors, error, isConnecting, pendingConnector } =
9+
useConnect();
10+
const { disconnect } = useDisconnect();
1111

12-
if (connected) {
12+
if (account) {
1313
return (
1414
<div className='py-24 text-center'>
15-
<p className='text-2xl font-bold'>
16-
Welcome {accountData?.ens?.name || accountData?.address}
17-
</p>
15+
<div>
16+
{ensName ? `${ensName} (${account.address})` : account.address}
17+
</div>
18+
<div>Connected to {account?.connector?.name}</div>
1819
<button
19-
className='mx-auto mt-10 rounded bg-slate-200 p-2'
20-
onClick={disconnect}
20+
className='rounded bg-slate-200 p-2'
21+
onClick={() => disconnect()}
2122
>
2223
Disconnect
2324
</button>
24-
<InfoSection />
2525
</div>
2626
);
2727
}
@@ -31,24 +31,24 @@ const Home: NextPage = () => {
3131
<h1 className='text-2xl font-bold'>Welcome to create-web3-frontend</h1>
3232
<p className='mt-10'>Connect your wallet:</p>
3333
<div className='mt-5 flex justify-center gap-6'>
34-
{/* connectData.connectors contains the list of available 'connectors' like Metamask, WalletConnect, etc */}
35-
{connectData.connectors.map((x) => (
36-
<button
37-
className='rounded bg-slate-200 p-2'
38-
key={x.id}
39-
onClick={() => connect(x)}
40-
>
41-
{x.name}
42-
{!x.ready && ' (unsupported)'}
43-
</button>
44-
))}
34+
{connectors.map((connector) => {
35+
return (
36+
<button
37+
className='rounded bg-slate-200 p-2'
38+
key={connector.id}
39+
onClick={() => connect(connector)}
40+
>
41+
{connector.name}
42+
{!connector.ready && ' (unsupported)'}
43+
{isConnecting &&
44+
connector.id === pendingConnector?.id &&
45+
' (connecting)'}
46+
</button>
47+
);
48+
})}
4549
</div>
4650

47-
{connectError && (
48-
<p className='text-red-500'>
49-
{connectError?.message ?? 'Failed to connect'}
50-
</p>
51-
)}
51+
{error && <div>{error.message}</div>}
5252

5353
<InfoSection />
5454
</div>
@@ -75,6 +75,13 @@ const InfoSection: FC = () => {
7575
>
7676
Open an issue on Github
7777
</a>
78+
<a
79+
href='https://twitter.com/dhaiwat10'
80+
target='_blank'
81+
className='underline text-gray-600'
82+
>
83+
DM me on Twitter
84+
</a>
7885
</div>
7986
</div>
8087
);

0 commit comments

Comments
 (0)