Skip to content

Commit 8c22905

Browse files
Dhaiwat10Dhaiwat10
authored
add rainbowkit 🌈 and ankr rpc ⚓️😉 (#10)
1 parent d9584a6 commit 8c22905

File tree

6 files changed

+64
-171
lines changed

6 files changed

+64
-171
lines changed

‎create-app.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,9 @@ export async function createApp({
9898
'[email protected]',
9999
'[email protected]',
100100
'next',
101-
'wagmi@0.3.1',
101+
'wagmi@0.4.5',
102102
'ethers',
103+
'@rainbow-me/[email protected]',
103104
];
104105
/**
105106
* Default devDependencies.

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-web3-frontend",
3-
"version": "1.0.0",
3+
"version": "1.1.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]>",
@@ -12,7 +12,9 @@
1212
"next.js",
1313
"web3",
1414
"wagmi",
15-
"tailwind"
15+
"tailwind",
16+
"rainbowkit",
17+
"rainbow"
1618
],
1719
"bin": {
1820
"create-web3-frontend": "./dist/index.js"

‎templates/default/pages/_app.js

Lines changed: 24 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,36 @@
11
import '../styles/globals.css';
2-
import { chain, createClient, defaultChains, Provider } from 'wagmi';
3-
import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
4-
import { InjectedConnector } from 'wagmi/connectors/injected';
5-
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
2+
import '@rainbow-me/rainbowkit/styles.css';
3+
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
4+
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
5+
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
6+
import { publicProvider } from 'wagmi/providers/public';
67

7-
// Get environment variables
8-
const infuraId = process.env.NEXT_PUBLIC_INFURA_ID;
8+
const { chains, provider } = configureChains(
9+
[chain.mainnet],
10+
[
11+
jsonRpcProvider({ rpc: () => ({ http: 'https://rpc.ankr.com/eth' }) }),
12+
publicProvider(),
13+
]
14+
);
915

10-
// Pick chains
11-
const chains = defaultChains;
12-
const defaultChain = chain.mainnet;
16+
const { connectors } = getDefaultWallets({
17+
appName: 'My RainbowKit App',
18+
chains,
19+
});
1320

14-
// Set up connectors
15-
const client = createClient({
21+
const wagmiClient = createClient({
1622
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-
},
23+
connectors,
24+
provider,
4125
});
4226

4327
function MyApp({ Component, pageProps }) {
4428
return (
45-
<Provider client={client}>
46-
<Component {...pageProps} />
47-
</Provider>
29+
<WagmiConfig client={wagmiClient}>
30+
<RainbowKitProvider chains={chains}>
31+
<Component {...pageProps} />
32+
</RainbowKitProvider>
33+
</WagmiConfig>
4834
);
4935
}
5036

‎templates/default/pages/index.js

Lines changed: 5 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,13 @@
1-
import { useAccount, useConnect, useDisconnect, useEnsName } from 'wagmi';
1+
import { ConnectButton } from '@rainbow-me/rainbowkit';
22

33
const Home = () => {
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();
9-
10-
if (account) {
11-
return (
12-
<div className='py-24 text-center'>
13-
<div>
14-
{ensName ? `${ensName} (${account.address})` : account.address}
15-
</div>
16-
<div>Connected to {account?.connector?.name}</div>
17-
<button
18-
className='rounded bg-slate-200 p-2'
19-
onClick={() => disconnect()}
20-
>
21-
Disconnect
22-
</button>
23-
</div>
24-
);
25-
}
26-
274
return (
28-
<div className='py-24 text-center'>
29-
<h1 className='text-2xl font-bold'>Welcome to create-web3-frontend</h1>
30-
<p className='mt-10'>Connect your wallet:</p>
31-
<div className='mt-5 flex justify-center gap-6'>
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-
})}
5+
<div className='py-6 justify-center text-center'>
6+
<div className='flex justify-center'>
7+
<ConnectButton />
478
</div>
489

49-
{error && <div>{error.message}</div>}
50-
10+
<h1 className='text-4xl font-bold mt-6'>🚀 create-web3-frontend</h1>
5111
<InfoSection />
5212
</div>
5313
);
@@ -56,7 +16,6 @@ const Home = () => {
5616
const InfoSection = () => {
5717
return (
5818
<div className='mt-10'>
59-
<hr className='my-4' />
6019
<h2 className='text-xl font-bold'>If you need help</h2>
6120
<div className='flex flex-col gap-2 mt-2'>
6221
<a

‎templates/typescript/pages/_app.tsx

Lines changed: 24 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,37 @@
11
import '../styles/globals.css';
2+
import '@rainbow-me/rainbowkit/styles.css';
3+
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
4+
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
5+
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
6+
import { publicProvider } from 'wagmi/providers/public';
27
import type { AppProps } from 'next/app';
3-
import { chain, createClient, defaultChains, Provider } from 'wagmi';
4-
import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
5-
import { InjectedConnector } from 'wagmi/connectors/injected';
6-
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
78

8-
// Get environment variables
9-
const infuraId = process.env.NEXT_PUBLIC_INFURA_ID as string;
9+
const { chains, provider } = configureChains(
10+
[chain.mainnet],
11+
[
12+
jsonRpcProvider({ rpc: () => ({ http: 'https://rpc.ankr.com/eth' }) }),
13+
publicProvider(),
14+
]
15+
);
1016

11-
// Pick chains
12-
const chains = defaultChains;
13-
const defaultChain = chain.mainnet;
17+
const { connectors } = getDefaultWallets({
18+
appName: 'My RainbowKit App',
19+
chains,
20+
});
1421

15-
// Set up connectors
16-
const client = createClient({
22+
const wagmiClient = createClient({
1723
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-
},
24+
connectors,
25+
provider,
4226
});
4327

4428
function MyApp({ Component, pageProps }: AppProps) {
4529
return (
46-
<Provider client={client}>
47-
<Component {...pageProps} />
48-
</Provider>
30+
<WagmiConfig client={wagmiClient}>
31+
<RainbowKitProvider chains={chains}>
32+
<Component {...pageProps} />
33+
</RainbowKitProvider>
34+
</WagmiConfig>
4935
);
5036
}
5137

‎templates/typescript/pages/index.tsx

Lines changed: 5 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,15 @@
11
import type { NextPage } from 'next';
22
import type { FC } from 'react';
3-
import { useAccount, useConnect, useDisconnect, useEnsName } from 'wagmi';
3+
import { ConnectButton } from '@rainbow-me/rainbowkit';
44

55
const Home: NextPage = () => {
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();
11-
12-
if (account) {
13-
return (
14-
<div className='py-24 text-center'>
15-
<div>
16-
{ensName ? `${ensName} (${account.address})` : account.address}
17-
</div>
18-
<div>Connected to {account?.connector?.name}</div>
19-
<button
20-
className='rounded bg-slate-200 p-2'
21-
onClick={() => disconnect()}
22-
>
23-
Disconnect
24-
</button>
25-
</div>
26-
);
27-
}
28-
296
return (
30-
<div className='py-24 text-center'>
31-
<h1 className='text-2xl font-bold'>Welcome to create-web3-frontend</h1>
32-
<p className='mt-10'>Connect your wallet:</p>
33-
<div className='mt-5 flex justify-center gap-6'>
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-
})}
7+
<div className='py-6 justify-center text-center'>
8+
<div className='flex justify-center'>
9+
<ConnectButton />
4910
</div>
5011

51-
{error && <div>{error.message}</div>}
52-
12+
<h1 className='text-4xl font-bold mt-6'>🚀 create-web3-frontend</h1>
5313
<InfoSection />
5414
</div>
5515
);
@@ -58,7 +18,6 @@ const Home: NextPage = () => {
5818
const InfoSection: FC = () => {
5919
return (
6020
<div className='mt-10'>
61-
<hr className='my-4' />
6221
<h2 className='text-xl font-bold'>If you need help</h2>
6322
<div className='flex flex-col gap-2 mt-2'>
6423
<a

0 commit comments

Comments
 (0)