Combine designs for tx statuses, with animation about democracy HOT 26 CLOSED

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

First draft

from democracy.

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

from democracy.

This legend I think we can make unnecessary.

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.

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?

(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.

from democracy.

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.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $87,214.02 more funded OSS Work available on the Gitcoin Issue Explorer

from democracy.

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

from democracy.

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

from democracy.

@cryptogoth i need access to Figma files, you can invite me [email protected]

from democracy.

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

from democracy.

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

from democracy.

@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

from democracy.

@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

from democracy.

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

from democracy.

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

from democracy.

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.

from democracy.

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

from democracy.

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

from democracy.

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

from democracy.

Very cool @elliottjobmann i can see it now.

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?

from democracy.

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.

from democracy.

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

from democracy.

⚡️ 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.

• $126311.70 in Funded OSS Work Available at: https://gitcoin.co/explorer
• Incentivize contributions to your repo: Send a Tip or Fund a PR
• No Email? Get help on the Gitcoin Slack

from democracy.

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.

from democracy.

@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.

from democracy.

@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.

from democracy.

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:

• PR by @elliottjobmann

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $115,438.54 more funded OSS Work available on the Gitcoin Issue Explorer

from democracy.

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.

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $116,150.79 more funded OSS Work available on the Gitcoin Issue Explorer

from democracy.