Create a connect wallet button with Rainbow Kit react

Introduction

I have a Hackathon coming up and noticed that many articles on connecting a wallet button were outdated and this method seemed to work so I hope it helps someone out there!

This was made for beginner devs so if you are advanced this might make you a bit bored. Just a warning!

The inspiration for this blog was - link to main source blog

[blog.anishde.dev/make-a-beautiful-connect-w..

I noticed that the instructions from the blog are a bit intermediate. I'm including some of my notes to make it easier for beginners.

Before you start make sure to be using a dummy wallet. Do not use your main wallet for safety purposes.

Creating a Next.js app

Open VS Code (Visual Studio Code)

Screen Shot 2022-11-11 at 11.21.11 AM.png

Click on the tab terminal and click new terminal.

Screen Shot 2022-11-11 at 11.26.22 AM.png

In terminal first run npm install (type it in and click enter).

Screen Shot 2022-11-11 at 11.29.20 AM.png

Then go to where you would like the rainbow kit demo to be installed. My preference is the desktop to find it quicker.

In terminal type in cd desktop

Then there is the option to install with npm or yarn.

I decided to do this with npm and not yarn due to previous experiences. In terminal please include

With NPM

npm init @rainbow-me/rainbowkit@latest

and then click enter

Then open the folder in VS code. Should be in desktop if that is where you saved the folder

Screen Shot 2022-10-28 at 3.15.39 AM.png

This is a glimpse of what it would look like.

Check out the Readme.md first to inspect instructions and then

Now open a new terminal. Let gets to work!

Next we will be adding Rainbowkit to our React app.

In the new terminal input (still running with NPM)

With NPM

npm install @rainbow-me/rainbowkit wagmi ethers

Underneath the RainbowKit-APP you will see a list.

Click on the “>pages”

Another list will appear. This time click on “_app.tsx”

After you click, the page will appear as such

Screen Shot 2022-10-28 at 3.19.53 AM.png

Now in the page we will make a few changes. Delete what is in there and then add the code

import '../styles/globals.css';
import '@rainbow-me/rainbowkit/styles.css';
import type { AppProps } from 'next/app';
import { RainbowKitProvider, getDefaultWallets } from '@rainbow-me/rainbowkit';
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
    publicProvider()
  ]
);
const { connectors } = getDefaultWallets({
  appName: 'My RainbowKit App',
  chains
});
const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
})

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

export default MyApp;

Next up we will be changing the front end view of the page with our connecting wallet. Replace the code in pages “index.tsx “ after the import section with

export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>RainbowKit Demo</title>
<meta
name="description"
content="Demo app part of a tutorial on adding RainbowKit to a React application"
/>
<link rel="icon" href="/favicon.ico" />
</Head>

  <main className={styles.main}>
    <h1 className={styles.title} style={{ marginBottom: "4rem" }}>
      Welcome to this demo of{" "}
      <a href="<https://www.rainbowkit.com/>">RainbowKit</a>
    </h1>

    <ConnectButton />
  </main>
</div>


);
}