# Banking App

## 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 i`to 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](https://docs.xrpl-commons.org/evm-sidechain/banking-contract-key-concepts))
* 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.

<figure><img src="https://687573247-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaiWcC2TqNEZOxKKtciQt%2Fuploads%2Fgit-blob-037d299cc005fdeecb6d1414aa051341e728afe3%2FScreenshot%202024-09-28%20at%2008.09.34.png?alt=media" alt=""><figcaption></figcaption></figure>

* 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.