84 lines
2.7 KiB
Markdown
84 lines
2.7 KiB
Markdown
## ⚡ Overview
|
|
|
|
Minimal UI to interact with the contract, build with [React](https://reactjs.org/). It will allow you to:
|
|
|
|
- Mint your site
|
|
- List the minted sites
|
|
- View the details of the minted site
|
|
|
|
### ⚙️ Requirements
|
|
|
|
You'll need to have [nodejs](https://nodejs.org/en/) and [YARN](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) installed. Please do not use NPM for package installation.
|
|
|
|
Also, don't forget to check the [Getting started section](https://github.com/fleekxyz/non-fungible-apps/wiki/%F0%9F%93%98-Getting-Started) on the wiki if you didn't do it yet, cause you need to configure your wallet to be able to mint a site.
|
|
|
|
### Setting Contract Address and ABI
|
|
|
|
The contract address and ABI is set by pointing `ui/src/integrations/ethereum/contracts/FleekERC721.json` to the file from the deployment outputs in the contract sub project.
|
|
|
|
This can be a local deployment or a deployment on one of the networks. This maintains consistency between the deployed contracts and the info in the UI configuration.
|
|
|
|
### 🖥️ Running
|
|
|
|
To run the UI localy follow the steps:
|
|
|
|
1. Clone the repo, [check out how here](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).
|
|
|
|
2. Install the dependencies:
|
|
|
|
```bash
|
|
$ yarn
|
|
```
|
|
|
|
This also will generate the `.graphclient` folder. Every time you do a change on the queries files, you'll have to build again that folder, to do it run:
|
|
|
|
```bash
|
|
$ yarn graphclient build
|
|
```
|
|
|
|
3. To use ConnecKit is neccessary get an [Alchemy ID](https://alchemy.com/), so create an App and get the credentials. Then set the following .env file
|
|
|
|
```bash
|
|
VITE_ALCHEMY_API_KEY
|
|
VITE_ALCHEMY_APP_NAME
|
|
```
|
|
|
|
Also, you'll need to set up your firebase cretendials to make work the github login. Add to the .env file the following variables
|
|
|
|
```bash
|
|
VITE_FIREBASE_API_KEY
|
|
VITE_FIREBASE_AUTH_DOMAIN
|
|
VITE_FIREBASE_PROJECT_ID
|
|
VITE_FIREBASE_STORAGE_BUCKET
|
|
VITE_FIREBASE_MESSAGING_SENDER_ID
|
|
VITE_FIREBASE_APP_ID
|
|
VITE_FIREBASE_MEASUREMENT_ID
|
|
```
|
|
|
|
Get them from the project settings on the firebase dashboard. Read [this article](https://support.google.com/firebase/answer/7015592?hl=en#zippy=%2Cin-this-article) to know how to get your porject config
|
|
|
|
4. To interact with the contract, you need to set the Goerli RPC. Set this variable on the .env file
|
|
|
|
```bash
|
|
VITE_GOERLI_RPC
|
|
```
|
|
|
|
5. Start the local server running the app:
|
|
|
|
```bash
|
|
$ yarn dev
|
|
```
|
|
|
|
Now a local server should be running on [http://localhost:5173](http://localhost:5173).
|
|
|
|
### 🤖 Build public
|
|
|
|
As we use vite, to build a public distribution for production run:
|
|
|
|
```bash
|
|
$ vite build
|
|
```
|
|
|
|
This will create a dist folder for the deployment.
|
|
|