# Skygazers phase 1 — briefing

## Context
This document describes the agreement between the Skygazers team and Saimano ([e-mail]) for rebuilding the MVP of the Skygazers app.

This rebuild can be summed up in following views:
- Home
- Minting / Gallery
- Skygazer-detail

These views consist of some specific and some reoccuring elements (listed below), and are described below. The UI design can be found [in this Figma file](https://www.figma.com/file/gAdtKIbipfR1XAMfOLmztC/SKYGAZERS-Dapp?type=design&node-id=0-1&mode=design&t=V9o9XYfpiiiaIXqS-0).

When a user has not connected, all views shows the "welcome traveler"-component + topnavigation, inviting the user to connect his wallet to see the app in all his functionality.

## Home
Specific to the home-view, are following elements:
- a grid of the NFTs you own
- a grid of the total of all NFTs minted

The NFTs you own show following details:
- the image of the NFT
- NFT number (index)
- owner: 'Owned by you'
- Status of writing attached to NFT: "draft" is the only status in this phase, ("adventure"(+v-icon), "submitted"(+v-icon) are to be added later).
- Title of writing attached to NFT *
- First lines of intro of writing attached to NFT *
- Timestamp when writing was last saved

*The title and intro can fill up the entire space that is foreseen within the fixed height of the block: a very long title will then only leave room for 1 line of intro. Both will be truncated if they go even beyond that.

The NFTs in the total grid show following details:
- the image of the NFT
- NFT number (index)
- owner: 'Owned by {owner}'
- Status of writing attached to NFT: "draft" is the only status in this phase, ("adventure"(+v-icon), "submitted"(+v-icon) are to be added later).

## Mint (Gallery)

### Gallery
- In the gallery all NFT's are shown , both minted and not-yet-minted. When not minted, user can add the NFT to his cart (& remove it)
- list is paginated per group of 50 NFTs
- A user can then view the contents of his cart, and remove items he does not want. (see `components/mint/MintConfirmation.tsx`)
- The price of the NFT is determined by the order in which they are minted. In the cart overview the total price is shown (see `components/mint/MintConfirmation.tsx`)
- then the user can mint these NFTs by doing a smart contract call (see `hooks/write/useMintNFTs.tsx`)
- user should only be able to mint when he agrees to the T&C

### Sidebar
- In the sidebar there is a filter section and a block that shows the current price + how many available at this price
- Filter
- you can filter skygazers gallery on their traits
- there are trait categories (face top, face bottom,...) and individual traits (1.1, 1.2, ...)
- the filter should do an OR operation on each selected trait in a group (so selecting 1.1 and 1.2 shows NFTs with either 1.1 or 1.2 as a trait)
- but accross the categories, the filter should be an AND filter (example selecting 1.1, 1.2, 2.3 and 2.4 should show NFTs that have (1.1 OR 1.2) AND (2.3 OR 2.4))
- The filtering is currently implemented using a 2 dimensional array [category,trait]
- The logic for filtering out using the above description can be found in `components/mint/Gallery.tsx` - feel free to re-use this logic... or not :)
- The list with traits that each NFT has is stored in `data/traitsmap.json`

## Skygazer-detail
When clicking on a Skygazer you own, you'll see the Skygazer-detail-view of that Skygazer.

On this detail-view, you're asked to authenticate as being the owner of ths NFT. After doing this, you'll see a switch-btn, switching between "preview" and "edit mode".
- Preview shows the current draft w/o editing abilities.
- Edit mode shows
- the current draft with editing abilities: for the title, the intro and the bodycopy of the draft are shown in textareas, ready to be edited.
- a save button
- a timestamp of when it was last saved
- the IPFS hash of what was saved

On either modes you can see
- a collapse-expand menu "about managing a Skygazer", when expanded shows the FAQs about managing a Skygazer.
- a btn "visit collection" which is disabled for now.

### Editing your draft

- currently we set up a session using `siwe` and `next-auth/react` so that the user confirms ownership of the wallet that holds the NFT as access token to a DB backend (we use `gundb` now) - see `components/home/Login.tsx and Logout.tsx`
- currently the save operation should
- save the contents of the story as json on IPFS
- save the resulting IPFS hash in the database
- The user can always come back to this page, where the story data will be fetched from the database & IPFS.
- _FYI and out of scope of the current assignment_: In a later stage we will add voting to add your NFT story to a `SkyGazers Collection` which will link the NFT-id to the IPFS hash of his story.

## Reoccuring elements
### Topnavigation
The topnav is shown on all the views. It has the same design on desktop as on mobile, and is fixed on the top of the page.

When a user is connected, it consists of:
- the total balance of the STT owner by connected user: "{balance} STT"
- the address of connected user

When no user is connected, it consists simply of a connect btn.

### Navigation menu
The navigation menu is seen on the Home-view and on the Minting-view. There are 2 versions of the design: desktop and mobile.

The menu consist of:
- the Skygazers logo
- a menu listing the views: "home", "mint", "lore" (disabled in this phase) and "proposals" (disabled in this phase)

### Footer
The navigation menu is seen on all views. There are 2 versions of the design: desktop and mobile.

The footer consist of:
- the Skygazers logo
- a menu listing the views: "home", "mint", "lore" (disabled in this phase) and "proposals" (disabled in this phase)
- a menu listing external resources: a link to the Skygazers splash page, a link to the Skypaper, links to various socials