Deploy a dApp with RainbowKit, Ankr, React, and Chakra-UI

Deploy a dApp with RainbowKit, Ankr, React, and Chakra-UI

joshcs.eth ᡍᡐ's photo
joshcs.eth ᡍᡐ
Β·May 16, 2022Β·

2 min read

🧱 Prerequisites

Set up our React App

Run the following command in your terminal to install the blank project, change to the new directory and start the development environment

yarn create react-app rainbowkit-ankr --template @chakra-ui && cd rainbowkit-ankr && yarn start

Install RainbowKit

Install RainbowKit and its dependencies, wagmi and ethers.

npm install @rainbow-me/rainbowkit wagmi ethers

Import RainbowKit

Import RainbowKit, wagmi, and ethers to your index.js file

import '@rainbow-me/rainbowkit/styles.css';

import {
  apiProvider,
  configureChains,
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { chain, createClient, WagmiProvider } from 'wagmi';

Configure RainbowKit

Configure the wallets, chains and generate the connectors. You will also set up a wagmi client in index.js

// imports

const { chains, provider } = configureChains(
  [chain.mainnet],
  [apiProvider.jsonRpc(chain => ({
      rpcUrl: `https://rpc.ankr.com/eth`}))]
);

const { connectors } = getDefaultWallets({
  appName: 'RainbowKit & Ankr dApp',
  chains
});

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

Wrap your Chakra-UI React App

Wrap your application with RainbowKitProvider and WagmiProvider in index.js

function App() {
  return (
    <WagmiProvider client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <ChakraProvider theme={theme}>
         <YourChakraReactApp />
        </ChakraProvider>
      </RainbowKitProvider>
    </WagmiProvider>
  );
}

root.render(
  <StrictMode>
    <WagmiProvider client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <ColorModeScript />
        <App />
      </RainbowKitProvider>
    </WagmiProvider>
  </StrictMode>
);

Add the connect wallet button

Import ConnectButton and add the component to your App.js file

import { ConnectButton } from '@rainbow-me/rainbowkit';

function App() {
  return (
    <ChakraProvider theme={theme}>
     {/* styling & components... */}
            <ConnectButton />
     {/* styling & components... */}    
    </ChakraProvider>
  );
}

Fix the error

You will see an error regarding webpack and utils, run the following command in your terminal to fix this

npm install util

πŸŽ‰ Log in with your Wallet of choice

Congratulations! You just created a React App with Ankr, RainbowKit, and Chakra-UI (with built in dark mode 😎)

login.gif

Next, you can deploy this to a hosting site of your choice. If you do, please comment the link below to share with the community!

View the repo on GitHub!

Β 
Share this

Impressum

Ankr is a decentralized Web3 infrastructure provider that operates an array of globally-distributed nodes serving 50 blockchain networks and RPC services to 16 blockchains. Ankr's infrastructure has processed over 2 trillion transactions and has helped drive the growth of the Web3 economy while powering a full suite of multi-chain tools for Web3 users and developers alike β€” making Ankr the fastest growing infrastructure company in Web3.