# 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](/evm-sidechain/banking-contract-key-concepts.md))
* 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="/files/p8Vl9LCvQjC6T4bHUBzb" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.xrpl-commons.org/evm-sidechain/banking-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.