Integration Tutorial (Mumbai)
Introductionβ
In this tutorial we will show how you can integrate Banana Wallet to your JavaScript or TypeScript-based frontend created using Next. We will demonstrate how to create a new wallet or connect an existing Banana Wallet on any dApp on mumbai chain.
Prerequisitesβ
Basic JavaScript/Typescript knowledge.
Previous experience building Next application
Enthusiasm to build an amazing dApp on Astar.
Getting startedβ
Step 1: Create a brand new Next app
Create a new Next project using an existing project template available here with name banana-sdk-demo
and now let's move into it.
Step 2: Installing banana sdk packageβ
Install @rize-labs/banana-wallet-sdk package with
Step 3: Smart Contract deploymentβ
For this demo, we will be using a very basic smart contract with only two functionalities:
Make a transaction to the blockchain by making a state variable change its value.
Fetch value of state variable.
Code for smart contract
You can deploy the contract on Mumbai Testnet using remix or something of your own choice.
For this demo we had already deployed it here:
0x3EEe2FbB0e698531fca47f6d6A9cecF48aDBcB0c
Step 4: Building the front endβ
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. Everything is handled by us in the SDK so you can concentrate on building your dApp.
Step 5: Importsβ
Next project by default sets up pages/index.js
which would be rendered via home route /
In this tutorial, we will be writing code in index.js only so that the above frontend would be available over the /
(home) route.
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
.
The code in _app.js
will look like this
Initializing some states for demo
Step 6: Initializing Banana SDK instance and creating methodsβ
For simplicity, in this example, we are creating an SDK instance for Polygon Mumbai.
Creating Wallet
Developers need to call the createWallet
method which will inherently ask the user for a wallet name. Once the username is provided, the wallet is initialized for the user, and the method returns an instance of the wallet.
Connecting wallet
When the user wallet is created the wallet's public data is cached in the user's cookie. Once the getWalletName
function fetches walletName
from the cookie, we pass walletName
it into connectWallet
which initializes and configures some wallet parameters internally, and returns a wallet instance.
Get ChainId
Getting chainId
is pretty straightforward. Developers should extract the signer from the wallet and use getChainId
it to obtain chainId
of the current network.
Get Network
Extracting the network is as easy as it looks. Developers should extract the provider from the wallet and use the getNetwork
method to obtain the chain info.
Make transaction
To initiate a transaction you will create a transaction object. Extract the signer from the wallet instance and initiate a transaction by passing the transaction object to the send transaction method. PS: Make sure your wallet is funded before you initiate transactions.
Signing message
Signing a message is as simple as it looks. Pass a message that needs to be signed, and the method will return an object { messageSigned: "", signature: "" }
messageSigned: message that was signed.
signature: signature for the signed message.
Step 7: Building the frontendβ
JSX code for frontend
If you are still unable to resolve the issue please post your query to Banana Discord here
If you have any questions please post them Banana SDK Discord forum.
Last updated