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
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
Step 3: Modify package.json
Change package.json
accordingly to use the start app with react-app-rewired
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:
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.
After installing letâs import some packages.
Init Banana SDK instance
For simplicity here we are creating SDK instance for polygon mumbai network.
Creating Wallet
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
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
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
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.
Last updated