This repository contains codebase and instructions for a React application, which serves a Batua web application to an end user.
When loaded, this web application will:
- create an Ethereum wallet
- store the wallet in local browser storage
- display wallet information
- public address - where user can receive Ethereum-based cryptocurrency
- wallet mnemonic - 24 words used to generate public/private keypair
- current balance - in a pre-configured ERC20 token
- allow user to choose to send the pre-configured ERC20 token
The wallet is hardcoded to connect to Matic's PoS Mumbai testnet for retrieving balance and publishing transactions. Balance shown is the balance of a synthesised Indian Rupee Stablecoin, whose token contract address can be found in src/config.json.
When transfer
transactions are sent, they are signed locally in the app, and then send to a Biconomy MetaTX relayer, which publishes the transaction and pays the gas / fees.
In order to use these instructions, you must have the following installed on a Linux or Mac:
npm
- see the get npm pagejq
- see this page to getjq
git
Run the following commands to clone this repository, then change to the repo's home directory:
git clone https://github.com/batuaWallet/L2-web-wallet.git
cd L2-web-wallet
Run the following to install the dependencies:
npm install
- Signup for an account on Biconomy's dashboard. You will need to click "Verify Now" in your Biconomy dashboard, then follow the instructions in your email to enter the OTP, in order to verify your account. Once you have completed the email verification, log in to your Biconomy dashboard:
- Click
+Register
to register a new Dapp, ensuring that you choose "Matic Testnet (Mumbai)" as the network:
-
Make a note of the
Api Key
for the Dapp, as this will be required by the app to authenticate with Biconomy, and looks something like this:nWLPpVVm1.ddc9aeb0-198f-4910-8367-6ab40bc5066c
-
Click "View Dapp", and next to "Smart Contracts", click
+ Add Contract
:
- For "Name", you can choose any name you like
- For "Address", choose the contract address of the token contract
- This is configured in src/config.json under
- To generate the "Application Binary Interface (ABI) run the following command, and copy / paste the output:
cat src/contracts/Rocket.json | jq .abi
Once you have completed all sections, click "Add", which will return you to the dashboard.
- Click "Manage APIs" and then select "+ New API"
- Select the smart contract added in the previous step
- Select "ExecuteMetaTransaction" method
- For "Name", you can choose any name you like
- Click "Enable" to "Native MetaTX"
Once the details have been completed, you must first click "+ Add" and then "Save"
- Once the new API has been saved, make a note of the
Api Id
, which looks something like this:623e01fe-c917-4dd1-9c89-4683489b4888
-
Copy
example.env
to.env
, perhaps by runningcp example.env .env
-
Open
.env
using your favourite text editor, and update the values as follows:
REACT_APP_API_ID
should be theApi Id
from step 6 of the section entitled Configure Biconomy.REACT_APP_API_KEY
should be theApi Key
from step 3 of the section entitled Configure Biconomy.
- Save the
.env
file and close your text editor.
Run the following command from this repo's home directory:
npm start
This will open a browser tab, and load http://localhost:3000/ where you can start to interact with the app.
Note: You can request test tokens by posting your request, and your wallet address in the Batua Telegram group.