Integration Tutorial <v0.1.13

Set up the repo and install packages

Step 1: Create a new repo with create-react-app

Create a new react project with react with name banana-wallet-demo and now let's move into to the directory

npx create-react-app banana-wallet-demo
cd banana-wallet-demo

Step 2: Run this setup file in the root of your project

Run the following commands in your terminal. To configure necessary packages and dependencies

# downloading setup.sh file
curl -o setup.sh https://raw.githubusercontent.com/Banana-Wallet/banana-tutorial/main/setup.sh

# running shell file with auth token
./setup.sh

# in case above command didn't work trying giving it execute permission
chmod +x setup.sh

Step 3: Modify package.json

Change package.json accordingly to use the start app with react-app-rewired

react-scripts start -> react-app-rewired start

Smart Contracts

We will be having a very basic smart contract for the demo purpose for this demo. 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:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract Greeter {

    uint256 a;

    function updateValue(uint256 _a) public{
        a = _a;
    }

    function getValue() public view returns(uint256){
        return a;
    }
}

You can deploy it using remix.ethereum.org and save the smart contract 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 worry about its deployment. Everything is handled by us in the SDK so you can just concentrate on building your Dapp.

Import and stuff

Now we need to prepare a frontend app for interacting with our smart contracts.

import { Banana } from '@rize-labs/banana-wallet-sdk/dist/BananaProvider'
import { Chains } from '@rize-labs/banana-wallet-sdk/dist/Constants';

After installing let’s import some packages.

Init Banana SDK instance

const getBananaInstance = () => {
    const jsonRpcMumbaiUrl = '<https://polygon-mumbai.g.alchemy.com/v2/cNkdRWeB8oylSQJSA2V3Xev2PYh5YGr4>'
    const bananaInstance = new Banana(Chains.mumbai, jsonRpcMumbaiUrl);
    setBananSdkInstance(bananaInstance)
 }

For simplicity here we are creating SDK instance for polygon mumbai network.

Creating Wallet

const createWallet = async () => {
    // for the first time when user creating wallet. walletName can't be empty
    if(walletName === "") {
      alert("Wallet name can't be empty!!")
      return;
    }
    // fetching counterFactual address for the walletName entered
    const walletAddres = await bananaSdkInstance.getWalletAddress(walletName);
 }

For the first time when the user creates a wallet. He needs to provide a unique identifier for his wallet. In the above function, we are stating a unique identifier as walletName. Once the unique identifier is passed into the getWalletAddress() method. It returns us the counterFactual address where the wallet will be deployed when the first transaction is made.

To check if the identifier entered by the user is unique or not you can use the isWalletNameUnqiue method of our SDK.

Connecting Wallet

const connectWallet = async () => {
    // fetching walletName when a user has already created wallet.
    const walletName = bananaSdkInstance.getWalletName();
    if(walletName) {
    // getting address for the walletName.
      const walletAddress = await bananaSdkInstance.getWalletAddress(walletName)
    } else {
      alert("You don't have wallet created!");
    }
  }

When the user wallet is created the wallet's public data is already cached into the user's cookie. The getWalletName function fetches the walletName from the cookie and once fetched we need to pass walletName into getWalletAddress to get the address and the rest of the things are handled for you by SDK.

Make transaction

const makeTransaction = async () => {
    // getting provider for the wallet
    const bananaProvider = await bananaSdkInstance.getAAProvider();
    //fetching signer for the wallet
    const bananaSigner = bananaProvider.getSigner();
    // address where we would be making transaction
    const greeterAddress = "0x454d3A39dFf28E15b82DE77122e3b0beb461CF22";

    // initializing contract
    let greeterContract = new ethers.Contract(
      greeterAddress,
      GreeterArtifact.abi,
      aaSigner
    );
    // getting callData for the function 
    const updateValueCallData = greeterContract.interface.encodeFunctionData("updateValue", ["10"]);
    try {
    // making transaction using execute call of sdk
        const txn = await bananaSdkInstance.execute(
            updateValueCallData,
            greeterAddress,
            "0"
        );    
    } catch (err) {
        console.log(err);
    }
  }

For making a transaction. you just need a signer for your wallet which you can get by just requesting the bananaProvider for the wallet using getAAProvider. After that, you need to get the callData for the function which you want to make a transaction for. Along with the address of the contract with which you want to interact and value (in case the function you are interacting is payable).

PS: just make sure your wallet is funded before you make any transaction.

Signing message

const signMessage = async () => {
    // signing message using signMessage method of sdk
    const response = await bananaSdkInstance.signMessage(messageTobeSigned, true);
     // response object
    /* {
        signedMessage: "0xsd121.....",
        signature: "0xdsdsds...." 
     } */    
}

Signing a message is as simple as it looks. You just need to pass a message which you need to sign along with a boolean value to the signMessage method. The boolean value indicates that you want to sign a message using the secp256k1 signature scheme and you are done.

You can read more about the signature messages and different signature schemes from our docs.

Full tutorial code here: https://github.com/Banana-Wallet/banana-tutorial

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

PreviousTutorial (React)NextIntegration Tutorial Latest

Last updated