Banking App

In this workshop we will learn how to create a Fullstack app using hardhat

Clone repo

First off we will clone the repo or import it into replit depending on your configuration.

https://github.com/XRPL-Commons/evm-banking-kryptoshpere-2024

From the root directory, run npm ito install common dependencies.

Deploy the banking smart contract

Navigate to the lending-contract folder and follow the instructions in the readme to deploy the contract:

• install dependencies with npm i

• add your private key to the .env file

• fix the hardhat config

• review the contract (in depth review of the contract here)

• compile the contract using npm run compile

• deploy the contract using npm run deploy

You can verify your contract has been deployed using the XRPL EVM Explorer

Run the Frontend

Navigate to the lending-frontend folder and follow the instructions in the readme to run the front end:

• install dependencies with npm i

• run the frontend with npm run dev and notice the Connect Wallet button does not work

We need to set up the web 3 context, to do this navigate to the .shared folder and fix the web3-context.ts file, your web app should now look like this.

• connect your account (the same EVM account you deployed the contract to)

• try to deposit

• fix the deposit function

• try to withdraw

• fix the withdraw function

• try to lend

• fix the lend function

• try to repay

• fix the repay function

Congratulations, you have just completed a full stack app using the XRPL EVM Sidechain.