MLH Fellowship Workshop - Web3 Integration 101

A demo guide for Major League Hacking Fellows to kickstar their journey in web3 with easy wallet connect integration.

Getting Started

Make sure you have Node.js installed and Metamask account up and running.

Tech Stack:

• RainbowKit: A React library that makes it easy to add wallet connection to your dapp. It's intuitive, responsive and customizable.
• Ankr RPC: Ankr's RPCs allow developers and their dApps to interface with data on different blockchains. RPCs are the connections that allow crypto wallets, dApps, DEXs, NFT platforms, and open-source software to interact with on-chain data and execute tasks like transactions. You can think of RPCs as portals to connect with different networks like Ethereum, the BNB Chain, or Polygon.
• React and Vite to build our frontend.
• wagmi: A collection of React Hooks for building frontends.

Vite Project Setup

First, start off by initializing a new Vite project from the terminal in the folder of your choice.

yarn create vite

• Once run the above command, it will prompt you to set your project name. Give your project a name, example rainbowkit-ankr-demo.
• And, set variant to Typescript.

• Now, change the directory to the newly created project folder and install the dependencies. In this case:

cd rainbowkit-ankr-demo

yarn

Setting Up Rainbowkit

Start by installing some dependencies required by RainbowKit + chakra-ui for styling:

yarn add @rainbow-me/rainbowkit wagmi ethers @chakra-ui/react

Importing + Configuring Rainbowkit using Ankr

Once the dependencies are installed, let's code to ship our first wallet connect button for the dApps.

• Replace the existing code in the main.tsx file under src directory to the following:

File: ./src/main.tsx

//Import RainbowKit, wagmi, and ethers etc
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import '@rainbow-me/rainbowkit/styles.css';
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
import { publicProvider } from 'wagmi/providers/public';
import { ChakraProvider } from '@chakra-ui/react';


//Configure desired chains and generate the required connectors. You will also need to setup a wagmi client.

//configureChains function allows you to configure your chains with node provider like Ankr. 
//This means you don't need to worry about defining RPC URLs and chain configuration in your connector or provider. 
//This is managed internally by wagmi.
//ConfigureChains accepts an array of chains and an array of providers.
const { chains, provider } = configureChains(
  [chain.goerli], // you can add more chains here
  [
    jsonRpcProvider({
      rpc: () => {
        return {
        // go to https://www.ankr.com/protocol/ to get a free RPC for your network
          http: 'https://rpc.ankr.com/eth_goerli', 
        };
      },
    }),
    publicProvider(),
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'Demo App',
  chains,
});

const wagmiClient = createClient({
  autoConnect: false,
  connectors,
  provider,
});

//Wrap your application with RainbowKitProvider, Chakra-UI and WagmiConfig.
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ChakraProvider>
      <WagmiConfig client={wagmiClient}>
        <RainbowKitProvider chains={chains}>
          <App />
        </RainbowKitProvider>
      </WagmiConfig>
    </ChakraProvider>
  </React.StrictMode>
);

Adding the Connect Wallet button

Import ConnectButton and add the component to your App.tsx file under src directory:

File: ./src/App.tsx

//In your app, import and render the ConnectButton component.

import { Container } from '@chakra-ui/react';
import { ConnectButton } from '@rainbow-me/rainbowkit';

function App() {
  return (
    <Container paddingY='10'>
      <ConnectButton />
    </Container>
  );
}

export default App;

Run the dApp locally

by running:

yarn dev

On your localhost, you'll be able to see the wallet connect button: