Banana <> Rainbow (Next)

Set up the repo and install packages

Step 1: Create a brand-new Next app

Create a new Next project using an existing project template available here with the name banana-sdk-demo and now let's move into it.

npx create-next-app@latest banana-sdk-demo --use-npm --example ""
cd banana-sdk-demo

Step 2: Installing rainbowkit, wagmi and Banana rainbow plugin package

npm install @rainbow-me/rainbowkit@0.8.1 wagmi@0.9.0 @rize-labs/banana-rainbowkit-plugin

Smart Contracts

We will have a fundamental smart contract for this demo's purpose. There will be two functionalities:

  • Make a transaction to the blockchain by making a state variable change its value.

  • Fetch value of state variable

Here is the smart contract code:

pragma solidity ^0.8.12;

contract Sample {

    uint public stakedAmount = 0;
    function stake() external payable {
        stakedAmount = stakedAmount + msg.value;

    function returnStake() external {

You can deploy it using and save the smart contract address.

For your reference, a sample contract has been deployed on polygon Mumbai here it's address:


Building the frontend

We will have a simple front end with some buttons to interact with the blockchain. Although Banana SDK provides you with a smart contract wallet you don't need to worry about its deployment. We handle everything in the SDK so you can just concentrate on building your Dapp.

In _app.js

let's import the required for rainbow Next project by default sets up pages/index.js which would be rendered via the home route / In this tutorial, We will create pages/_app.js from where we would drill down the context of Rainbow and wagmi. Inside _app.js let's import packages from wagmi and Rainbow

Importing packages from Rainbowkit

import "@rainbow-me/rainbowkit/styles.css";
import '../styles/globals.css'
import {
} from "@rainbow-me/rainbowkit";
import {
} from "@rainbow-me/rainbowkit/wallets";

let's import modules required from wagmi

import { polygonMumbai, optimismGoerli, goerli, gnosis, gnosisChiado  } from "@wagmi/chains";
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
import { configureChains, createClient, WagmiConfig } from "wagmi";

Importing BananaWallet plugin and few chains which are not by default avalaible in wagmi or Rainbow from banana-rainbowkit-plugin package

import { BananaWallet, astarChain, shibuyaChain } from '@rize-labs/banana-rainbowkit-plugin'

Configure chains and providers

const { chains, provider } = configureChains( 
  // currently on these three chains are supported by BananaWallet
  [polygonMumbai, optimismGoerli, goerli, gnosis, gnosisChiado, astarChain, shibuyaChain ],
        rpc: chain => ({ http: chain.rpcUrls.default.http[0] }),


Download SampleAbi.js from here SampleAbi.js and put it in abi/SampleAbi.js and for css you can download it from here and put it into styles/globals.css and import it in pages/_app.js after creating _app.js.

Creating connectors for rainbow

  const connectors = connectorsForWallets([
      groupName: "Recommended",
      wallets: [
        BananaWallet({ chains, connect: { networkId: 80001 } }), // networkId: 592 for astar
        metaMaskWallet({ chains, shimDisconnect: true }),
        rainbowWallet({ chains }),
        walletConnectWallet({ chains }),
        injectedWallet({ chains, shimDisconnect: true }),

Creating wagmiClient

  const wagmiClient = createClient({
    autoConnect: true,

Providing context of Rainbowkit and wagmi

  return (
    <div className="App">
      <WagmiConfig client={wagmiClient}>
        <RainbowKitProvider chains={chains}>
          <Demo />

Putting all together you can find the final App.js file here

Let's start modifying pages/index.js which will contain logic for doing multiple things with wallet instance

Importing Hooks from wagmi

import { useSigner, useProvider, useAccount } from "wagmi";

Extracting signers and providers from wagmi hooks

const { isConnected } = useAccount();
const provider = useProvider();
const { data: signer } = useSigner();

Implementing function to getChainid of current chain

  const getChainID = async () => {
    try {
      const chainId = await signer.getChainId();
    } catch (e) {

Implementing function to getBalance of an address

  const getBalance = async () => {
    try {
      const account = await signer.getAddress();
      const balanceChk1 = await provider!.getBalance(account);
    } catch (e) {

Implementing function to get network info

  const getNetworks = async () => {
    try {
      const network = await provider!.getNetwork();
    } catch (e) {

Implementing function to sign Message using Banana Wallet

  const signMessage = async () => {
    try {
      const message = "Welcome to Banana Wallet";

      const sig = await signer.signBananaMessage(message);
    } catch (e) {

implementing function to sendEth

  const sendETH = async () => {
    try {
      const toAddress = ethers.Wallet.createRandom().address;

      const tx1 = {
        gasLimit: "0x55555",
        to: toAddress,
        value: ethers.utils.parseEther("0.000001"),
        data: "0x",

      const txnResp = await signer.sendTransaction(tx1);
    } catch (e) {

Implementing function to make call to smart contract method

  const stakeTxn = async () => {
    try {
      const amount = "0.00001";

      const tx = {
        gasLimit: "0x55555",
        to: SampleContractAddress,
        value: ethers.utils.parseEther(amount),
        data: new ethers.utils.Interface(SampleAbi).encodeFunctionData(

      const txn = await signer.sendTransaction(tx);
    } catch (err) {

Putting all together

Full code can be found here

PS: if you face unexpected export token issue you can fix it by creating next config file in the root of your project and mentioning banana-rainbowkit-plugin package inside transpilePackages array like this.

// next.config.js
const nextConfig = {
    transpilePackages: ['@rize-labs/banana-rainbowkit-plugin'],
module.exports = nextConfig;

If you have any questions please post them Banana SDK Discord forum.

Last updated