# Approach V1

In this new v1, we will build further on v0 to create an intuitive experience that is focused on the fun of swapping!

To achieve this, we will take add following concepts:
1. **improvements**
2. **home-page**
3. **open-swap/trait-offer model**
4. **swap-preview**
5. **rarity**
6. **realtime datamodel**

On top of this we will make **improvements** (6.) to the components build in V0.

## 1. real-time datamodel
### Notifications
To increase comfort of use, we want to create a notifications-system for the user to receive notifications about his swaps in real-time.

In the top right corner, we will show a notif-badge, indicating w a number and colour if there are any new notifs that the user should read. When clicking this notif, the user will navigate to the swap this notif is concerning.


### Swap updates
The new homepage (see 2.) will contain
- a section that shows the most recent swap (on top)
- a list of all swaps

To make this information as accurate as possible, we want this information to update w/o the user having to refresh the page. This way, the homepage will be a dynamic view on which the user sees the active community swapping in real-time.

### REQUIRED FROM BBB:
- websocket on server: decision where and how to host
- if using redis-db: decision where and how to host

## 2. homepage

We will build out a homepage, from which a user can start his/her journey. This homepage will contain, in order of appearance (see screenshot below):
- 'most recent swap'-area
- list of all swaps in table
- an area for trait-offers, showing:
- title "Looking for something specific?"
- input "What are you looking for?" + input "What can you offer?" + btn
- button "+ new offer"
- a list/collection of existing traitoffers, showing the bufficorn + what he is offering + what he is willing to swap for
- a area to display the full sets


### REQUIRED FROM BBB:
- approval UI design (Figma)

## 3. trait-offer model
We will build the front- and backend to enable a user to offer a trait for swapping. In a specific designated view, a user will be able to select the trait he offer, and also select for which specific traits he would be willing to swap.

His offer will appear in the list on the homepage (see screenshot in 2. -> area for trait-offers) so other users can see it and interact w it.


### REQUIRED FROM BBB:
- approval UI design (Figma)

## 4. rarity
In this v1 we will indicate the rarity of each buff w a single number, displayed everywhere next to the buff's id (see first screenshot below), having a speficic colour and icon. This number is a summary of different aspects, the combined rarity of every individual trait. All of this data is generated by a script supplied by the Bufficorn Buidle Brigade.

In the UI, when clicking this number, a popup will appear, showing the details that define this number (see second screenshot below).


### REQUIRED FROM BBB:
- approval UI design (Figma)
- rarity script

## 5. swap-preview
To the swap-view, we will add a preview mode, showing the result of the swap before it is actually executed. The preview will show the bufficorn as they would look after the swap and their new rarity.

This preview will be visually distinguable, on a different bg. There will be only a single button to exist this preview, so there can be no confusion.


### REQUIRED FROM BBB:
N/A

## 6. v0 improvements
On top of these new functionalities we will improve the existing components with the lessons learned from user feedback. These changes will apply to a few different aspects of both UI and backend:
### security-feeling / anti-rug
With 3 actions we will increase the feeling of security for the users.
- msg on external markets: the Bufficorn Buidle Brigade will adjust the msg that is displayed on the external markets to point out that bufficorns might be subject to trait-swapping in our app
- when a buff has offers on Opensea,... , he will not able to swap in our app
- Force to refresh to opensea/... API’s

### mobile adjustment swapview
As we anticipate a lot of in-person use of the app on EthDenver, we want to optimise for mobile accordingly. The changes are specifically to the swap-view:
- in the initial phase of a swap (= when choosing bufficorns), we will adjust the sizes of the 'CHOOSE BUFFICORN' and 'CHOOSE SWAPPEE'-boxes, so that the user will see all the key-elements in one overview: the two boxes ànd the question+button below
- in the next phase of a swap (= when the buffs ànd traits are choosen), we will show a minimized version of this setup, so that we can dedicate 50% of the viewheight to the actions the user has to take and the status of the swap


### REQUIRED FROM BBB:
- opensea API key
- approval mobile UI design (Figma)