Giter VIP home page Giter VIP logo

scrt-auction's Introduction

Secret Auction UI

Set up

Run yarn to install the dependencies

yarn

Run development

Copy .env.testnet example to .env then run the app using the script provided

cp .env.testnet .env
yarn dev

scrt-auction's People

Contributors

edithmoreno avatar jsandovalg avatar luiseel avatar the-dusky avatar walter-lkmx avatar yepayepayepa avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

scrt-auction's Issues

Notifications

We should add notifications similar to the 3 steps of auction creation through out the application.
Interfaces that require notifications are:

  • place a bid
  • retract a bid
  • close bid + extend if no offers
  • close bid
  • change min bid (price)

Confusion on the "red" and "green" triangles for auction filters

I can't quite figure out what these triangles are for on the filters for "sell" and "min bid". Sorry! I clicked them multiple times .... oh I see it's sorted by the bid amount ascending/descending.

image

Also, it's not clear -- is that column the latest bid amount? That's my guess, but maybe the list view should have a header.

This is a font awesome sorting icon that might be more intuitive:

image

https://fontawesome.com/icons/sort

Bid page sections

After a seller has completed extending the auction with a different price, the cancel auction section should no longer be expanded
image

This screenshot is from after I've completed the TX to extend the auction with a different price

Change "Enter" button text for auction creator when updating the asking price

This is kind of a minor UI improvement suggestion ... after clicking on the "Update Asking Price" button and entering a new price there's a button that says "Enter" to submit the change.

image

I think it should be something other than "Enter" ... like "Submit" or "Update" to affirm the action the user is taking. Unless "Enter" is the preferred action verbiage?

Feel free to close this if it doesn't make sense!

My auctions tab - new tab

Let's create this tab and show Alice all information she requires to see her auctions
Buyer tab
image

Seller tab
image

Increase Allowance is confusing to me

Haha I didn't really understand what it meant when I created the auction, but I did it because I was supposed to.

From what I can tell it just gets the tokens I'm selling and deposits them into the auction contract, like an escrow.

Maybe change the verbiage to something like that?

image

I think that the average user of the Secret Auctions app doesn't really care that it's a factory contract that the tokens are being transferred to and locked ... kind of thinking in layman's terms here. This verbiage is something a developer would be interested in knowing though imho.

Rename "ends at" to something clearer

There appears to be some confusion about why an auction stays open and accepts bids after the ends at time. Since the ends at time is only when ANYONE can close the auction, not actually a forced time to close, maybe we should just label the time "anyone can close at" or something similar (but more eloquent lol)

Renaming main auction page ACTION currently named BID in different scenarios

Ideally we should think about the main call to action for different uesrs
Bidder

  • Bid if the action is still open
  • Bid if the action end time has passed but there are no bids (we can also keep the main action as close). @Baedrick can someone bid to an auction which has the end time passed but hasn't been closed?
  • End if action end time has passed and there are bids

Seller

  • Edit - if the auction is open (because the seller can change the min price, extend if possible, close, make a bid)
  • End in all cases if the auction is closed

Need validation check when attempting to change the minimum bid to the same value

I clicked on "Change minimum bid" and didn't actually change the amount, then clicked "Change ..." and the Secret Auction app started the Keplr interaction.

Just need a check so that the "Change ..." button is disabled until the minimum bid is changed. Or some other solution, like a validator error saying the amount hasn't been changed.

image

Auction Info is difficult to read

It would be great if this was styled so it's easier on the eyes. 😄

image

Suggestions:

  • differentiate between the label and data or content
  • a bit more vertical spacing for the font that's being used
  • vary the font choices a bit (?)
  • for the "Status" label it says "Accepting Bids: " and then a note or info, maybe that could be on the next line and italicized or something

Maybe add an "info" button to a closed auction

People might still want to look at the auction description or other data after it has closed, so maybe add an "info" button that would do an auction_info query and go to the appropriate screen

Bid page

Does status need to show that "tokens are consigned" as it's automated in the last iteration?

I suggest we just say "Accepting Bids" unless there's no scenario where tokens are not consigned or if that's possible, I would rather have two states:

  • "Accepting Bids"
  • "Accepting Bids, however [tokens] are not consigned" -> I would add a red exclamation mark for this state
    image

UI Improvement for "sell" and "min bid" at top

It wasn't clear to me that these were filters, initially, until I clicked the dropdowns and started choosing specific coins.

image

I think it would be great to make it more clear that those are search filters.

Also, the "min bid" label doesn't seem to fit because the user's not really filtering on minimum bid amounts.

Add timezone to dates in Grid and List view

Looking at the "ends at" time I think it's UTC, but I'm not sure. It would be great to have the timezone stated or even better would be translating it to the user's timezone 😃

image

Not able to set filter to view auctions created by me

I created an auction and also the viewing key (as part of the new auction process). I can see the viewing key, but the filter to select auctions create by me is disabled.

image

Also, in Grid or List view when the user is viewing the auctions, it would be helpful to denote in some visual way which ones are my auctions.

Auction info view for the seller

We can place the boxes horizontally to save space
image

Let's take out extend auction option as this will not be possible if there are pending bids. The only time it makes sense to extend the auction is when Alice is closing and there are no bids

A few functions defaulting to 1m gas when a lot less is enough

The increase allowance function defaults to using 1m gas. It costs under 110k, probably play it safe and pad that to 150k to give a little leeway for people writing their own token contracts that might be less efficient (or do more processing) than the reference implementation

The create auction tx defaults to 1m. It costs around 600k. Probably give this one an extra buffer and set it to 700k, since we do not really know how many active auctions there will be at one time.

create viewing key function defaults to 1m gas, but costs under 110k. 120k should be safe here.

Bid page - notification after Bid is placed

When I click on Place Bid, I'm not shown any notification although I can see that tokens have been moved by checking Keplr balances. Let's add a notification or pop up saying bid submitted or transaction confirmed. If helpful, pls tag @dogemos on discord to see how to add these

image

Also, the status of having open bids in the auction should change after I submit a bid
image

Getting 404 on Auction Info/Bid page

I clicked on an auction using the "Bid" button and once there reloaded the page and got a 404 - not found error.

Going back to the grid or list view the auction is shown, but clicking on the "Bid" button results in the same 404 error

image

However, it seems to be temporary! A few minutes later going back to the Auctions list and clicking on "Bid" for the auction in question displayed the correct information.

Add a "back" button to the Auction Info page

Clicking on the "Bid" button takes you to the Auction Info page where you can bid, or close an auction if it's ended.

It would be nice to give the user a visual element to click to go back to the dashboard or grid/list of auctions.

image

Some extra clarification on winning bid when closing an auction

I'm not sure how to put this exactly, but I placed a bid on an auction and then closed the auction. I didn't receive the tokens so I can only assume that my bid wasn't the highest bid.

It would be great to give the user more info there if possible in the context of a secret auction. For example, I'd like to see (on the Bidding Page):

  • number of bids
  • have I bid on this auction and if so, what was my bid
  • am I currently the winning bidder for the auction

This way I could place a higher bid before closing the auction to make sure I win the tokens! :-D

image

Not clear what user needs to do for the Viewing Keys

When I first clicked on the Key icon, I saw the viewing key for the "Factory address" and a button to create a viewing key.

I went ahead and created a viewing key, but I'm not sure that I needed to ... also, what is the UI referring to for the factory address?

image

I think maybe just adding a bit of verbiage to that window would make it easier for the user to understand.

Would be nice to have the auction title at the top of the Bid page

I forget which auction I clicked "Bid" on 🤯.

In the Grid or List view it's visually easy to see what I'm selecting:

image

but on the Bid page it's not so obvious. I'm wondering about maybe adding a title line that has the token icon and the auction token info:

image

similar to this, but on the same title line or something to that effect.

Seller shouldn't be able to bid on their own auction

The Bid button should be disabled or not visible for an auction where the user is a seller.

image

Maybe change "Bid" to "View"? I haven't gotten far enough to see if that makes sense though. Oh wait, the seller can change the minimum bid from clicking on that button so maybe it should say "Manage" or "Edit" instead of "Bid".

And if it's the seller editing their auction, leave out the fields and button for placing a bid.

image

Entering bid price modifies the minimum bid value

Two snapshots below: 1) showing the initial state of the bid price and minimum bid info and 2) the values of the fields after the default bid price has been modified.

Not sure why the minimum bid price changes as you modify the bid price. If it's correct behavior, maybe add a note to that area explaining what's happening.

image

image

I changed the bid price to 340 and the minimum bid field was automatically updated to be 1700.

Should be able to create an auction by inputting tokens' address

It's possible I missed it, but I don't see the ability to input the token addresses instead of using the presets from the drop down.

We want people to be able to create and sell their own SNIP20s, so there should be an option to input a token address (and the UI will look up the matching code hash needed for the create_auction message)

Auction mainpage UI - decimal points

Let’s fix decimal points (can wait after launch)


1st line
- Number and unit being sold should be on the same line
We have first line read “Selling 90.00 TSUNI”
2nd line
- Same number of decimal points -> 810.00 TSDAI
image

Make pointer consistent between using hand and arrow for UI elements

Sometimes hovering over a button or icon displays the "hand" icon and other times it's the "arrow" icon.

Buttons or other elements that are using the "arrow" icon:

  • New Auction
  • Active, Closed and Only Me filter buttons
  • Sell and Min bid dropdowns
  • Close auction button
  • Change minimum bid
  • Place bid button
  • Complete Close auction
  • Extend if no bids
  • Close with options

Buttons or other elements that are using the "hand" icon:

  • Secret Network logo
  • Auctions and FAQs links
  • Sell and Min bid sort elements
  • Viewing key icon
  • Keplr icon
  • Grid and List elements
  • Bid button

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.