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

Last update: May 17, 2022

ankr-rainbowkit.png

🧱  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 😎 )

2022-05-16 06.28.48.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!

+++++++++++++++++++++++++++++++++++++++++++++++

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

yarn build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

GitHub

https://github.com/jcstein/rainbowkit-ankr
You might also like...

Starter project for firebase web with React, Chakra UI and auth pages added

Starter project for firebase web with React, Chakra UI and auth pages added

Firebase React Chakra UI Starter A starter project for Firebase web. Installation Clone the repository git clone [email protected]:stephenbaidu/firebase-

Jun 2, 2022

A Secreto Like Anonymous Message Built With React And Chakra UI

Secret Message A secreto like anonymous message. This project was bootstrapped w

Jun 9, 2022

A simple to-do list application developed with React, Chakra UI, React icons

A simple to-do list application developed with React, Chakra UI, React icons

React todo list Um aplicativo de lista de tarefas simples desenvolvido com React, Chakra UI, React icons Live Demo on Vercel 🚀 Getting Started Clone

Jun 14, 2022

A growing collection of responsive Chakra UI Templates ready to drop into your React project.

A growing collection of responsive Chakra UI Templates ready to drop into your React project.

Jun 20, 2022

This project was bootstrapped with Chakra UI & Create React App

This project was bootstrapped with Chakra UI & Create React App

Getting Started with Create React App This project was bootstrapped with Chakra UI & Create React App. ScreenShots Available Scripts In the project di

May 19, 2022

My personal portfolio made with React & Chakra UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Oct 29, 2021

React.js todo app with authorization, Testing: Cypress(e2e), UI (Chakra UI), Eslint, prettier, git hooks

React TypeScript template with Vite This is a React + TypeScript boilerplate built with Vite. What's inside? ReactJS Vite TypeScript Jest Testing Libr

Jan 28, 2022

Create React App Template with Chakra UI & Typescript

Create React App Template This project was bootstrapped using cra-template-app, a batteries included create-react-app template with Chakra UI & Typesc

Mar 16, 2022

React, Vite, Chakra based template

React, Vite, Chakra based template

RVC Dashboard Special thanks During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank

Jun 12, 2022
Nextjs-chakra-navigation-example - NextJS with chakra-ui responsive nav example

nextjs-chakra-navigation-example I looked at how to implement navigation in next

Jan 23, 2022
Ts-next-chakra-motion-kit - Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript

Typescript Next.js Chakra-UI Framer-Motion Starter Kit Start with a powerful tem

Jun 17, 2022
Simple Ether Wallet DApp with React, Typescript, useDApp, Chakra UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Feb 9, 2022
Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet

cronos-dapp-basic Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet You need to have node version 14

Dec 27, 2021
Dinos-nft-minting-dapp - A nice and easy way for linking an existing NFT smart contract to this minting dapp
Dinos-nft-minting-dapp - A nice and easy way for linking an existing NFT smart contract to this minting dapp

Welcome to HashLips ?? All the code in these repos was created and explained by

Jan 6, 2022
Create-dapp-solana-nextjs - Scaffolding for a Solana dapp using TS, Next.JS, Tailwinds CSS, and Daisy UI

Create Solana Dapp with Next.JS Want to start develop with Solana fetching NFTs

Jun 21, 2022
Dapp-core-components - A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

Feb 6, 2022
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

May 12, 2022
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

May 12, 2022
This project show how fast we can deploy react app in s3 and cloudfront. Try it and make yours

react-s3-cloudFront-serverless-template This project show how fast we can deploy react app in s3 and cloudfront with serverless framework. Try it and

Jun 24, 2022