# NFT Tap Implementation - Version 0.9

## Overview
NFTap is a decentralized application for peer-to-peer NFT swaps. It offers a user-friendly interface for listing, exploring, and swapping NFTs. It uses smart contracts for secure and trustless transactions and is presented in the form of an interactive dashboard.

The idea [sketch](https://excalidraw.com/#json=F9_NTsbwHzYq4h2E4OWdK,RgUxN3t6Ba0JGSQGC7Lquw).

## Pages
### Landing Page
### Main Page

* All tables/views fit on one page

### Navbar:
* Top left corner:
* Logo
* Top right corner:
* Connect button
* Network dropdown button
* Profile icon
* Notification for offers
* Light/dark theme toggle

## Views/Tables

### MyStash
- **Purpose**: To view a user's own NFTs which are not listed for trade, and view selected NFTs from the Explore section.
- **Actions**:
- Scroll through my NFTs
- Publicly list my NFT
- Offer my NFT for other NFT(s)
- Clear selected image from the view
- **Data Displayed**:
- Image of my NFT
- Buttons to scroll through my NFTs. It should be clear which one of my NFTs is selected, but it can hint at which image is before and after
- Button to publicly list my NFT
- Button to offer my NFT for selected NFTs

### Explore
- **Purpose**: To explore NFTs listed by other users and select one or more NFTs to swap with. This is the central view of this App.
- **Actions**:
- Select desired NFTs, filter in ascending/descending order (age, queue, limit-to).
- Selected NFTs (up to 9-10) should be added to My Stash view with a button click
- Reset the filter
- **Data Displayed**:
- Select checkbox
- Image thumbnail
- Current owner (address or name)
- Queue (number of offered items for this NFT)
- Age (how long the item has been listed)
- Collection name or address
- Limit to (or something smarter)... user can limit which NFT he/she is willing to swap
- **View Options**:
- Grid
- List

### Filter - implemented on the Explore column header as a dropdown or popup
- **Purpose**: To filter data on the Explore table.
- **Actions**:
- Reset filter
- **Data Displayed**:
- Age range:
- Set range metric in hours, days, months
- Two-end slider
- Queue length:
- Two-end slider
- Collection:
- Select from dropdown (or paste the address)
- Checkbox to select only verified collections
- Select owner (write or paste the address)
- Button to reset the filter

### My Queue
- **Purpose**: To view a user's NFTs that are listed for swap and to see all the offers for those NFTs.
- **Actions**:
- Unlist: Remove NFT from the list
- Accept offered NFT
- Reject all offers for one NFT
- Reject all offers for all NFTs
- **Data Displayed**:
- Thumbnail
- Offered NFT name
- Owner name
- Collection name or address
- Queue length
- My NFT thumbnail
- Button Accept
- Button Reject (individual)
- Button Reject Queue for this NFT
- Button Reject all offers
- Button to unlist my NFT
- **Interaction**:
- Modals for all button clicks

### Pending
- **Purpose**: To view NFTs the user has offered to others.
- **Actions**:
- Revoke: Withdraw an offer
- **Data Displayed**:
- My NFT Thumbnail
- Age since offered
- Collection address or name
- Thumbnail of desired NFT
- Button to Revoke my offer
- Button to revoke all of my offers

### Leaderboard
- **Purpose**: To rank users based on various metrics.
- **Ranking Metrics**:
- Point = Listed + Offered + Rejected + Accepted*10
- Accepting an action actually executes the swap and is extra rewarded
- **Data Displayed**:
- App statistics:
- Listed
- Swapped
- Offered
- Total users
- Monthly active users
- Table with columns:
- Rank
- Username
- Points
- Listed
- Offered
- Accepted 10x
- Rejected
- Row with my stats

## Landing Page
- **Purpose**: To start the app and provide information on how it works.
- **Actions**:
- Start the app
- **Data Displayed**:
- Logo
- App statistics (see Inspiration section)
- Title
- Subtitle
- Illustration
- Button to start the app
- Infographic
- Detailed description of how it works
- Contact (Twitter, Telegram)

## Profile Modal
- **Purpose**: User needs to set up a name and profile NFT.
- **Actions**:
- Set up name and profile NFT
- **Data Displayed**:
- Name (randomize if not entered)
- Display the first found NFT, or a default image
- Enable scroll through user's NFTs

## Connect Wallet by ThirdWeb
Connect wallet Component by [ThirdWeb](https://portal.thirdweb.com/connect)

## Implementatioon frameworks
React, Next.js, Tailwind, Typescript
Development is on My Github repo, communication and comments through PRs

## Smart Contract
- You will implement the given Smart Contract interface using ThirdWeb sdk
- The Smart contract implementation is not required
- The interface draft is [here](https://hackmd.io/@maario/B1RVuSRVa)

## Appearance
- Main Theme: Dark Purple or blue
- Light Theme
- Font [Londrina Solid](https://fonts.google.com/specimen/Londrina+Solid)

## Inspiration
* [Dew.gg](https://dew.gg/sell), but with a warmer feel and larger fonts.
* [Nouns.wtf](https://nouns.wtf/), for the aesthetic and fonts.

## Current Figma design