https://github.com/protofire/simplestate-ui
https://github.com/protofire/simplestate-ui
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/protofire/simplestate-ui
- Owner: protofire
- Created: 2022-11-14T14:18:33.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-06T12:33:03.000Z (almost 3 years ago)
- Last Synced: 2023-05-16T23:26:35.803Z (over 2 years ago)
- Language: TypeScript
- Homepage: https://simplestate.netlify.app/
- Size: 418 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simplestate UI
Real estate tokenization UI.
### Running this project
1. Create an [Achemy](https://dashboard.alchemy.com/) account. Under dashboard select "Create App" for the corresponding network.
- Polygon Mumbai for testing.
- Polygon for prod.
---
2. Install dependencies.
```sh
yarn install
```
---
3. Create an `.env` file at the root folder of the project and set the following variables
```sh
VITE_REGISTRY_CONTRACT_ADDRESS='0x...'
VITE_FACTORY_CONTRACT_ADDRESS='0x...'
VITE_UNDERLYING_TOKEN_ADDRESS='0x...' # USDS
VITE_RENT_INCOME_CONTRACT_ADDRESS='0x...'
VITE_SIMPLEARN_CONTRACT_ADDRESS='0x...'
VITE_ALCHEMY_ENDPOINT='https://polygon-mainnet.g.alchemy.com/v2/...' # the endpoint for your Alchemy app.
VITE_CHAIN_ID=80001 # 80001 for mumbai testnet, 137 for polygon mainnet
```
---
4. Run in local mode
```sh
yarn dev
```
> Make sure to connect your wallet in the right network (Polygon mumbai or Polygon mainnet).
### Deployment
You can deploy the app to any hosting service, we recommend using [Netlify](https://www.netlify.com/) since it offers CI/CD integration + environment variables support.
1. Create a netlify account.
2. Go to [upload app dashboard](https://app.netlify.com/start).
3. Select Github and link the existing repository to the app using `main` branch.
4. Add environment variables present in `.env`.
5. Trigger deploy.
### Project tooling + structure
We use `vite` as the react framework following the standard structure for React applications. The UI library is `mantine` and for smart contracts interactions we use `ethers.js` library.
The Frontend interacts directly with the smart contracts (without any backend layer).
Under `pages/` folder, each sub-folder represents one tab (see UI) and its corresponding sub-components.
Under `hooks/` folder, we have the scripts corresponding to the metamask connection (`useMetamask`), the contracts setup (`useContract`) and the contracts interaction for performing operations on-chain (`useApi`).