Based on https://www.figma.com/file/zNZXiaA5xo2RIwLz6ng6Gq/2021_gnosisAuction_UI_final?node-id=0%3A1

Remove Est. Fill column from orders section:

Reasoning -> Increased activity right before the auction ends will possibly increase activity a lot, and make this Est. Fill unreliable, which could anger users.

Currenlty, if web3 is not connected, there is just a big connect button on the screen.

It would look much more professional if the data is still fetched api's and the basic design of the auction is shown.

Basically, this image should disappear:
https://user-images.githubusercontent.com/4015436/108748797-c2584c00-751d-11eb-9a16-6fab5a57f897.png

To take into account:

• I think that the filter, can't be done in this MVP
• Some new columns, like participation can't be done in this MVP

See design https://app.zeplin.io/project/5b71fb9cd86c791b1612c035/screen/602594fb7d9b4302c07fe347

Add end time + tool tip saying Time in GMT

The smart contract will not accept such an order, and will just not transfer any funds. This would result in a loss of gas: i.e.
https://rinkeby.etherscan.io/tx/0x8d1ac47ef8165499c715787be1fc5cc705733b98602dec4427719cea4bd48225

Hence, we need to warn the user within the "place order button"

The error message should be: "Pick a different price, already existing price"

The way the orderbook, the orders etc, is rendered is not optimized, it was implemented by a newbie.

Please, optimize it.

On page load, we are getting this error:

Let's investigate it and fix it

• Add amount of active auctions in the card (The API expose this , the amount of elements returned)
• Validate Featured Auctions is still working
• Links from the menu must work
• Connect button must work

Link to the design https://app.zeplin.io/project/5b71fb9cd86c791b1612c035/screen/602594fcf887978da293515a

Design https://zpl.io/bL69xQQ

In src/components/AuctionDetails/index.tsx we do

 {clearingPriceNumber > 0
 

use the approrpiate BigInt library for checks, don't convert to number and such to avoid problems.

Add a tooltip saying:

"Current Price" shows the current closing price of the auction if no more bids are submitted or canceled

Currently, the UI proposes always a price of 1, in order to actively ask for an input. We could alter the behaviour:

Stefans suggestion:

It would be useful if the price would always set to the min price of the auction. Maybe later to the min price to actually win 
based on the current order book

I am not sure of what is best. Wdyt?
@Rafanator @cmagan

Come up with a deployment process that:

• build the site as a IPFS-file
• publish the files
• pins the file on IPFS

Currently, the only wallet option on rinkeby is metamask. Please also enable Walletconnect on rinkeby.

The code for wallet connect should already be available, it's just that Uniswap had not enabled it for some reason on rinkeby.

Based on https://www.figma.com/file/zNZXiaA5xo2RIwLz6ng6Gq/2021_gnosisAuction_UI_final?node-id=0%3A1

Based on https://www.figma.com/file/zNZXiaA5xo2RIwLz6ng6Gq/2021_gnosisAuction_UI_final?node-id=0%3A1

As tittle suggests -> Change Min. Price to Min. sell price

If people are zooming in the graph by clicking on it, tthe graph modal shows up. Please show all auction details information in the graph via appropriated visualizations:

• Mark the lowest price
• Mark the current price
• Make sure font-sizes are appropriate
• Mark filled orders with darker colors compared to unfilled orders.

The orderbook should be updated upon order placement.

Either the orderbook is updated very regularly - if this is okay for the load of our servers -, or at least new user orders should immediately be appended with the newOrder hook.

The chart looks too compressed and not very nice as it is:

Please increase the height so it can be visible without requiring the modal. Something similar to:

Disable the modal once this is adjusted.

Currently, only the dark mode has an acceptable appearance. Please design the daylight mode as well appropriate and make sure that all information is easily readable in dark and bright mode.

Given the new design of the landing page, we should put the current auction table on a new site.

I suggest the following routes:

• /start. -> points to the landing page
  -/overview -> points to the auction table page
  -auction?auctionId=6 -> points to trading page with auction 6

The auction overview page should only contain the following table for now:

• Add duration (doesn't exist)
• Add title of the card , example GNO/DAI (doesn't exist)
• Verify the rest of the card works, ICON, Current Price, Deadline, Title of the card (Selling...)

Link to the design https://app.zeplin.io/project/5b71fb9cd86c791b1612c035/screen/602594fc20e5d2b89223a74b

Design: https://zpl.io/2vE3N6P

Design: https://zpl.io/29pmPQp

Let's discuss over here what could be the best way to manage token-logos?

Proposal 1:
We have a list of tokenlist for each network:
mainnet -> coingecko,
rinkeby ->defaultlist
xdai -> honeyswap list

If tokens auctioned off are not in the list on the respective network, then we warn the users...

Questions: will IDO project get their token logos listed so quickly, that we can show them?
@cmagan Where do token projects try to "list" their logo first? Is there a common base? Because then we would like to integrate with them first...

We are connecting to many api's. Even when the api is down, the site should show all other information and load appropiate

We should better consider the following case and deal with it

Number(undefined) = NaN

Switch the y axis of the chart to Volume(DAI).

This is because Gnosis Auction works different from normal orderbook exchanges.

In gnosis auction, bidders determine the price they want to bid at and the amount of BID tokens they want to submit, contrary to what happens in normal orderbook exchanges where bidders select the amount of sell tokens on their order.

I created this issue so I don't forget to check how the app looks on mobile (and to add some new designs when needed).

example: https://ido-v1-api-rinkeby.dev.gnosisdev.com/api/v1/get_auction_with_details/4

Add chart Zoom with mouse in similar to the one in https://mesa.eth.link/ 's orderbook, pictured below:

Reason: in the past, user "broke" the Mesa orderbook chart by placing orders with very big volumes at a very low or a very high price. Zooming in solves this.

Divide interface for mobile in half, similar as in this image:

Have Place Order section on top and Chart + detail sections below + order details at the bottom:

And order sections below (sorry I have no screenshot for that section right now).

Main: https://zpl.io/VY6qk4L
Confirm: https://zpl.io/bP6EvJk
Waiting: https://zpl.io/aX67kAp
Submitted: https://zpl.io/aR64E5N
Settled: https://zpl.io/2pw3l6M
Closed: https://zpl.io/2G8joKJ
Not cancellable auction warning: https://zpl.io/aB4zqMm

Currently, the orders are just the orders from the previous account. But for sure, the orders should be reset for the new account.

If we enter to this auction (http://localhost:3000/auction?auctionId=9&chainId=4) the application triggers this error

This should include header / footer / main contents area / scrolling, etc.

https://zpl.io/2vE3N6P
https://zpl.io/VY6qk4L
https://zpl.io/2jg3P0m

Currently, we have different states for the user input: orderPlacement, the orderbook, and the user orders. Though all of them are interlinked and actions in one state trigger also hooks on other states.

What is the best practice? Should they be merged to save hooks and improve the loading of the page. Or should be keep them separate, mostly for readability.

Tokens pairs in the auction pairs are quoted the wrong way, should be GNO/DAI in both cases:

To take into account:

• The unlock action is now another button
• The auction id subtitle have a copy button

The rest should work fine , max button, cancel order, place order, claim

Auction status to check:

• opened
• settled/claim
• closed

Verify modals, transition between them and correct functionality

Your auctions is working, but we need a section for this ?

Here is the design https://app.zeplin.io/project/5b71fb9cd86c791b1612c035/screen/602594fc45036006cf167c5a

Design https://zpl.io/ad63P1e