search

Agoric / dapp-offer-up

Offer Up is a simple Dapp for the Agoric smart contract platform that permits users to explore items for sale in a marketplace
6 stars 5 forks source link

UI: interactive offer #20

Closed dckc closed 9 months ago

dckc commented 10 months ago

fixes: #17

to try it out

Add --dapp-branch dc-ui-tweaks at the yarn create step:

yarn create @agoric/dapp --dapp-template dapp-offer-up --dapp-branch dc-ui-tweaks offer-up-tweaked

initial state

image

with wallet connected

image

make offer

image

kbennett2000 commented 10 months ago

That looks great! I love it - nice job!

dckc commented 10 months ago

to try it out

Add --dapp-branch dc-ui-tweaks at the yarn create step:

yarn create @agoric/dapp --dapp-template dapp-offer-up --dapp-branch dc-ui-tweaks offer-up-tweaked
dckc commented 9 months ago

there's no issue linked here so I'm not sure what the intended scope of this work is.

oops! now there is: #17

My main concern is that it's drifting further from a minimal example of hooking up ui-kit to a react app (maybe we can preserve that elsewhere?), but if Kris is aligned then I defer.

@sufyaankhan was the main advocate for a more visible offer UI. Yes, it's a balancing act. In due course we should write docs that explain every change we made to the react scaffold, and at that point, we might be able to organize it into files so that much of it is "just normal react code; nothing new here to explain" and the parts for watching vstorage and posting offers are emphasized. We'll want some ui-kits docs while we're at it.

yarn create is sweet!

it sure is! ack: MFig, MH, and co.

But I think in the PR description you have two branches passed as arguments, typo? --dapp-branch dc-ui-tweaks offer-up-tweaked

offer-up-tweaked was meant as the destination directory.

It might be useful to have some input validation, it's not clear that you can only select 3 places and need 0.25 IST. Maybe just a message somewhere that says "Select at most 3 places and pay at least 0.25 IST" or something would work? I think allowing you to make the offer with invalid inputs is okay so people can see what happens with failed offers.

Especially since...

Visually, I wonder if it would look cleaner if we just removed all the table borders, and gave the buttons some minimal styles (they just look like text right now)

I can give that a try... if you have specific suggestions, I'm open to them.

dckc commented 9 months ago

Input Validation

It might be useful to have some input validation, it's not clear that you can only select 3 places and need 0.25 IST. Maybe just a message somewhere that says "Select at most 3 places and pay at least 0.25 IST" or something would work? I think allowing you to make the offer with invalid inputs is okay so people can see what happens with failed offers.

OK, I elaborated a couple labels and added error styling when the offer doesn't meet contract constraints:

image

dckc commented 9 months ago

Button style

Visually, I wonder if it would look cleaner if we just removed all the table borders, and gave the buttons some minimal styles (they just look like text right now)

The button style suggestion seems straightforward:

image

remove borders?

I tried removing the table borders; it doesn't separate the give and want as clearly, to me, so I left it alone, for now. I'm open to further input.

image