Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Combine designs for tx statuses, with animation #57

Closed
learner-long-life opened this issue Apr 5, 2020 · 26 comments
Closed

Combine designs for tx statuses, with animation #57

learner-long-life opened this issue Apr 5, 2020 · 26 comments
Labels
design
Projects
ZK Transfer Demo

Comments

@learner-long-life
Copy link
Contributor

Background

This is a design task that is part of a web demo to let people experiment with and develop intuition about zero-knowledge assets. Democracy.js is a project of the Invisible College, a distributed research lab that welcomes collaboration and is offering paid apprenticeships for our existing projects or stipends for you to develop your own projects. Currently, we're looking for people who enjoy any of the following:

  • implementing and designing new Ethereum node software that distributes and incentives partial state or stateless storage between "mini" nodes
  • performing UX and design research for web3 usability, specifically for private trading
  • using Whisper, Secure Scuttlebutt, or other distributed private messengers to coordinate online cryptographic actions

You can view our current ZK transfer demo-in-progress at:
https://zk-transfer.netlify.com

We welcome collaboration, discussion, and learning together. Please join our gitter channel and ask questions throughout working on this task.

Description

Your job is to combine two previous mockups, specifically the box that displays transaction statuses, which include minting of new assets (this occurs automatically):

The rightmost two columns of this demo represent different modes, one for a successfully mined tx and one for failure.

https://www.figma.com/file/KEV19jwlvgd3m9lexQx9KL/Confidential-Transfer-Demo?node-id=0%3A1

image

These should be reworked to match the style of the existing demo, and added to this mockup as a third column, to the right of Step 2 (Recipient List)

https://www.figma.com/file/46KvltxYaEXPazXweqQIEV/Confidential-Transfer-Demo?node-id=31%3A2

image

The mockup should be animated for adding new tx's (adding a newest tx is on bottom, older tx's get shifted upward in a scrollbox view) and waiting for a tx to be mined.

Designs that we admire, for their cleanness and simplicity,
are MakerDAO's Oasis and Uniswap.

How to Work on This Task

Fork this Figma and make your changes to it:
https://www.figma.com/file/46KvltxYaEXPazXweqQIEV/Confidential-Transfer-Demo?node-id=31%3A2

When you're ready for feedback, page a link to your new figma in the Github issue.
We'll work through any issues or design wrinkles together, and when we're both happy, you'll submit the Figma URL into the Gitcoin bounty.

We look forward to working with you.
@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 35.0 DAI (35.0 USD @ $1.0/DAI) attached to it as part of the invisible-college fund.

@learner-long-life
Copy link
Contributor Author

learner-long-life commented Apr 5, 2020 •
edited

welcome @developerfred . Based on your skills with Go and other work, would you be more interested in some backend / Ethereum node dev work ? I'll be posting more bounties soon related to these other roles:

https://github.com/invisible-college/democracy/wiki/Stipend-Postings

@developerfred
Copy link

@cryptogoth yes of course, i would also like to work with issues in golang.

@developerfred
Copy link

@cryptogoth i need access to Figma files, you can invite me codingsh@pm.me

@Calvinoea
Copy link

Hello. I spent some time working on this design. I hope it could be of help in some way. https://www.figma.com/file/ajsV8h73fqv8bB48YW83qX/Combined-Designs?node-id=0%3A1

@learner-long-life
Copy link
Contributor Author

Thanks for reaching out @Calvinoea , @developerfred is currently working on this task, but we will have other bounties in the future.

@gitcoinbot
Copy link

@developerfred Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

  • reminder (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

1 similar comment
@gitcoinbot
Copy link

@developerfred Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

  • reminder (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

@developerfred due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

  • reminder (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

1 similar comment
@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

@developerfred due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

  • reminder (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

@gitcoinbot
Copy link

gitcoinbot commented Apr 16, 2020 •
edited

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 1 week, 6 days ago.
Please review their action plans below:

1) elliottjobmann has been approved to start work.

Yo! I just sent ya a message on gitter.... ing this bounty done.

Learn more on the Gitcoin Issue Details page.

@learner-long-life learner-long-life added this to Back Burner in ZK Transfer Demo Apr 16, 2020
@elliottjobmann
Copy link

https://www.figma.com/file/qqCXJTRhvxdpzpVGDc5oeM/Untitled?node-id=0%3A1

First draft

@learner-long-life
Copy link
Contributor Author

@elliottjobmann can you check that link? it doesn't work for me.

@elliottjobmann
Copy link

@cryptogoth
https://www.figma.com/file/qqCXJTRhvxdpzpVGDc5oeM/Untitled?node-id=0%3A1

@elliottjobmann
Copy link

If it doesn't work DM me your email address and I'll invite you

@learner-long-life
Copy link
Contributor Author

learner-long-life commented Apr 19, 2020 •
edited

Very cool @elliottjobmann i can see it now.
image

Can you say more about the icons and what various things do when the user clicks on or hovers over them?

If you had to animate some part of this status display, what would it do?

@elliottjobmann
Copy link

The only things that can currently do anything are the next arrow in the the first frame which advances the sender to the recipient page, the send arrow in the second frame which "sends" the transaction to the person next to it (initiating the etherscan transaction info which can't be seen at the moment but is there), and the transaction lists on the last three pages all can be scrolled to veiw older transactions
The failed transaction list item has a send symbol instead of the etherscan symbol. When a user hovers over it it would say "Reattempt transaction" or something like that. The etherscan symbols would pop up the transacation number and on-click would send you to the transaction page.

The part of the status display that I'd animate is the "Transaction Success/Failed!" area. I'd have that be the area where, after you click send, the etherscan data would appear and then change to success or failed status, adding the transaction to the bottom of the tx history.

@learner-long-life
Copy link
Contributor Author

Sure you can concentrate just on the third column (your last three frames), as the Step 1 and Step 2 columns are already animated in the demo.

I like the idea of "Retry" can you make that icon a circular arrow, like in your browser, instead of the paper airplane? Also, please add little text boxes to show what appears to the user when they hover.
"View transaction on Etherscan" and "Retry transaction" seem fine to me.

For the icons, I'd like to modify the "sent" and "received" green arrows so that the legend is not necessary. The red "X" is pretty clear for failed. How about

  • a green line on the right, with a green arrow coming from the left, to mean received
  • a green line on the left, with a green arrow going away from it to the right, to mean sent

@learner-long-life
Copy link
Contributor Author

This legend I think we can make unnecessary.
image

This we can also rework to be an animation of some kind, with text "Transaction in progress" larger than the past tx's above it, also with a link to the Etherscan. If the tx succeeds or fails, I think it should immediately become a box that pushes up into the list above, from the bottom.
image

Everywhere you currently have an Etherscan logo link, I'd like to replace with these two icons from Metamask, one for copying the tx hash, and one for linking to Etherscan. I think it's visually more confusing to have too many company's logos, and also brand-diluting. What do you think?
image

(Just a note for the implementor, you don't have to add this to the design):
The list shouldn't scroll, I think that will create more complexity. Older items for now should scroll off the top of the box and disappear.

Great work! I've sent a tip to your address on Gitcoin for all your effort so far.

@learner-long-life learner-long-life mentioned this issue Apr 20, 2020
Closed
@elliottjobmann
Copy link

Thanks! I'll have that sent as a pull request shortly! It's definitely been a struggle trying to get the navigation between the send frame and various transaction frames but i just about have it. There's a hidden frame that has different variations of what a transaction would look after listed that I'll send you a picture of. I'm curious about what your thoughts about how i noted different tokens is. I definitely agree with less company logos

@gitcoinbot
Copy link

⚡️ A tip worth 10.00000 DAI (10.0 USD @ $1.0/DAI) has been granted to @elliottjobmann for this issue from @cryptogoth. ⚡️

Nice work @elliottjobmann! Your tip has automatically been deposited in the ETH address we have on file.

@learner-long-life
Copy link
Contributor Author

Oh I forgot, one last request. (Famous last words)

There are three types of successful tx
Sent, received, and minted, and the minting happens automatically after each page refresh.
Could you please design an icon for minting (eventually we'll have a sound effecting, like a Mario coin jingle), and show it in the examples of your mockup as a past transaction?

Thank you.

@learner-long-life learner-long-life mentioned this issue Apr 21, 2020
Closed
@learner-long-life
Copy link
Contributor Author

@elliottjobmann what you have in the figma now looks great, I wouldn't worry about my request above for a mint transaction. We can add that in a later issue.

Just copy and paste only the essential elements into a new Figma, so that it's clear to an implementor what to implement in React (even if it ends up being you). Thank you for your hard work! It looks great.

@learner-long-life
Copy link
Contributor Author

@elliottjobmann can you submit a link to your Figma in Gitcoin
https://gitcoin.co/issue/invisible-college/democracy/57/4171?mutate_worker_action=approve&worker=elliottjobmann

After that, everything looks great, and I'll close out this issue.

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 35.0 DAI (35.0 USD @ $1.0/DAI) has been submitted by:

  1. @elliottjobmann

@cryptogoth please take a look at the submitted work:

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

The funding of 35.0 DAI (35.0 USD @ $1.0/DAI) attached to this issue has been approved & issued to @elliottjobmann.

Additional Tips for this Bounty:

  • cryptogoth tipped 10.0000 DAI worth 10.0 USD to elliottjobmann.

ZK Transfer Demo automation moved this from Back Burner to Done Jul 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
design
Projects
ZK Transfer Demo
  
Done
Milestone
No milestone
Development

No branches or pull requests
5 participants
@learner-long-life @gitcoinbot @elliottjobmann @Calvinoea @developerfred