Style and Design about burner-wallet HOT 68 CLOSED

Made a design, specifically to make it easy to use the wallet for a new user, without reading medium posts or watching videos- They are great, but I think a product should aim to explain itself.

The design guides the user through the whole life circle of a xDai wallet.

Also I am giving the user the choice to switch between sender and receiver, since that saves space on the screen. (And explains what the app can do, on first view.)

Sender

Receiver

Notes on implementation:

• The site saves the users position. So a sender who got xDAI in his wallet does not have to scroll to his wallet.
• The user sees the active area, while the next area is ~opaque. Like this:

PS: Let me know what you think. I don't plan to implement, but you can built on top of my figma file.

from burner-wallet.

It's done for the most part, I'll give it another 3-4 hours to take one final shot at it and make a PR for whatever I've done.

P.S. It's on the redesign branch of my fork.

from burner-wallet.

Hi, I have applied for this issue on Gitcoin but it seems like the corresponding comment from @gitcoinbot hasn't showed up here yet.

I'm planning on these lines -
Since the application is built in react, we can consider using a responsive component library like Material UI or Blueprint JS.
I'll prepare a mockup in one of those, discuss improvements with @austintgriffith and complete the design accordingly.

from burner-wallet.

@shailysangwan @davecraige I've imported my Sketch document to Figma.

https://www.figma.com/file/foeT5XpJAbkOutTRHPQWga2Z/Dai?node-id=0%3A127

Font requirements:

"FontAwesome5FreeSolid", "ArialRoundedMTBold", "InterUI-Bold", "InterUI-Regular", "InterUI-Medium", "InterUI-ExtraBold", "InterUI-SemiBold"

All the icons are done through FontAwesome so should be very easy for development.

InVision prototype is pretty much complete with the exception of the help/about section. Going to take a few notes from @seichris 's designs. Would appreciate some input!

from burner-wallet.

I'd like to throw my hat in the ring if I can be of use! I've been looking for a place to get started on this project. If it's getting too crowded of course I'll find something else. I also don't mind just brainstorming on design ideas. I'll post something later : )

from burner-wallet.

Thanks @austintgriffith my address is 0xD9b74f73d933Fde459766f74400971B29B90c9d2

Here is a mobile example of the same:

The plan is to adjust the QR code so that that screen always equals the height of the screen.

The UI is a little longer because it includes the alert, which would temporarily push the screen down while active.

I'll stay in the loop incase you want me to build this out. If I do end up writing this out, I'll have to take the refactoring gig as well because it would be super hard to do one without the other.

You have a hoard of if/else statements. State machines are particularly good for situations like this.

If i do end up working on this, how do you feel about using a finite state machine to handle react state for the refactor? I'd probably use xState https://github.com/davidkpiano/xstate or react-automata https://github.com/MicheleBertoli/react-automata#readme. I don't have to, it's just a really good fit for this scenario.

Have you ever worked with state charts or would you prefer I don't add the extra library?

If you have no idea what I'm talking about this is the best intro to statecharts I've found https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/ A little long but there's a talk of the same here https://www.youtube.com/watch?time_continue=1264&v=VU1NKX6Qkxc

If you don't already use them, I think you'll enjoy statecharts, the approach is very similar to the array mechanism you're currently using, just a little more robust.

from burner-wallet.

Also thought about keeping the code changes minimal - so i only added the switch on top and the feature to save the position.

You are right though. Maybe we can design a minimal one for the gitcoin issue and discuss advanced ones for advanced uses some place else.

from burner-wallet.

I think @mattybgits' design is my favorite so far but I would love to see some feedback from the community. Should we reward him and continue on to implementing? Anyone out there want to start the second half of this bounty and start implementing the design in React?

from burner-wallet.

Yup! I'm working on it.

from burner-wallet.

@davecraige Sorry! Didn't realise that the Figma document wasn't editable. I'll enable that!

Twitter is https://twitter.com/mattybchats

@starkblaze01 not entirely sure what's going on implementation wise. I tried to get in touch with @shailysangwan the other day, but no response so far.

from burner-wallet.

Just merged in the redesign from @shailysangwan. There are still some things TODO but I love how it looks so far!

from burner-wallet.

⚡️ A tip worth 25.00000 DAI (25.0 USD @ $1.0/DAI) has been granted to @seichris for this issue from @austintgriffith. ⚡️

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

• $45287.07 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 burner-wallet.

⚡️ A tip worth 25.00000 DAI (25.0 USD @ $1.0/DAI) has been granted to @joshpitzalis for this issue from @austintgriffith. ⚡️

Nice work @joshpitzalis! To redeem your tip, login to Gitcoin at https://gitcoin.co/explorer and select 'Claim Tip' from dropdown menu in the top right, or check your email for a link to the tip redemption page.

• $45287.07 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 burner-wallet.

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

This issue now has a funding of 100.0 DAI (100.0 USD @ $1.0/DAI) attached to it.

• 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
• $56,649.44 more funded OSS Work available on the Gitcoin Issue Explorer

from burner-wallet.

@shailysangwan if you need any help, let me know. I was considering taking this on but it looks like you're on it.

There is no need to use a component library. There are so few components you can write them custom.

I found 2 nice references that I thought would be good for the project
https://dribbble.com/shots/4134552-Masternode-Crypto-Coin-Wallet-Redesign
https://dribbble.com/shots/4134609-Phore-Crypto-Coin-Wallet-Preview

...and potentially this logo to replace the emoji https://thenounproject.com/term/flame/344414/

Just thoughts.

Stuff I found when I was considering taking it on.

Also, I think this is a great project to use vh units. So that you can get the whole app in a single screen, no scrolling. The fun bit would be adapting the screen to mobile so there is also no scroll on mobile.

Anyway best of luck with it.

I had a look at the source and its looks like you have quite the refactor ahead of you.

from burner-wallet.

Thanks for the interest guys! I would love to see some mockups for how we can make this app look stunning. Please hit me up here, or on twitter/telegram @austingriffith with any questions.

If we have two mockups going in parallel I would be happy to reward that optionality with $25 DAI to the one we don't select just for a thank you for your efforts. It's important that this design be incredibly intuitive even for non-english speakers.

Also, yes, the code is all in one big App.js file right now because I wrote most of it in the airport on the way to devcon :) There is another bounty to refactor it and I'm confident it will be solid soon.

With that in mind, ideally, the designer who creates the mockup can also implement it into the React code. Thanks guys! Reach out to me on twitter/telegram and let's talk more!

from burner-wallet.

@austintgriffith I love the concept! Excited to see this being worked on ❤️

Just wanted to throw a couple of possible user questions worth thinking about regarding UX:

1. Can I only send DAI to the address? Can I send ETH? What happens if I send ETH?
2. Since 'Burn Private Key' is such a 'destructive' button, we might want to put a bit more description for the users on what the button actually does.
   It might also be a good idea to add a second confirmation step ('Are you sure you want to burn your private key? Your wallet will be gone blah blah' [Yes] [Cancel]) to prevent users from accidentally tapping on the button.

All the best to whoever's doing the design 🙂

from burner-wallet.

Didn't realise design and implementation were two separate bounties. The bounty description made it sound like the same gig. The comment above makes it sound like its two different jobs. I'ma little confused. Either way here is a mock up of what I was thinking.

from burner-wallet.

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

Work has been started.

These users each claimed they can complete the work by 3 months ago.
Please review their action plans below:

1) shailysangwan has started work.

Since the application is built in react, we can use a component library like Material UI or Blueprint JS.
I'll create a mockup using one of these, discuss improvements with the mentor and complete the design accordingly.

Learn more on the Gitcoin Issue Details page.

2) figure8labs has started work.

I can do either or both design and implementation (or just assist those who are already on it). I'll post a couple ideas on the github issue.

Learn more on the Gitcoin Issue Details page.

3) starkblaze01 has started work.

I can make components responsive and user Interactive using react-strap.

Learn more on the Gitcoin Issue Details page.

4) mattybgits has started work.

Can provide UX/UI designs.

Goal is to produce an end to end InVision prototype that covers the existing flows of the current application and adds a few additional things from the issue log.

• Mobile web focused
• Simplistic interface
• Minimal text, focus on intuitive and language agnostic interactions

Will also look into creating definitions / descriptions of key functions that can be easily translated.

Learn more on the Gitcoin Issue Details page.

5) seichris has started work.

My goal is to come up with a self-explanatory design. The wallet should guide a user who is new to crypto through the whole process needed to pay in crypto.

• Design will be made in Figma and link will be posted in #5

Learn more on the Gitcoin Issue Details page.

from burner-wallet.

@austintgriffith I'm guessing zero feedback on my initial sketch means you don't like it. Do I still get the 25 DAI for not being selected like you said?

from burner-wallet.

Oh no! Sorry! Everything is all good. I've been staying away from Git for the weekend :)
I like the design but I'd like to see more too. I'm happy to send 25 USD for your efforts!
One thing to keep in mind is this is a mobile first app.
We should design it to look best on a phone and then expand it out to Desktop use.

from burner-wallet.

Sorry for the long delay over the weekend. I've approved multiple designers and I'd like to get multiple designs pitched to this thread. There are new funders joining the project and it is very important that the product be both beautiful and intuitive. Having the optionality behind different designs will enable this. We will try to reward everyone accordingly for their work!

from burner-wallet.

💰 A crowdfund contribution worth 50.00000 DAI (50.0 USD @ $1.0/DAI) has been attached to this funded issue from @mikemcdonald.💰

Want to chip in also? Add your own contribution here.

from burner-wallet.

💰 A crowdfund contribution worth 100.00000 DAI (100.0 USD @ $1.0/DAI) has been attached to this funded issue from @mkosowsk.💰

Want to chip in also? Add your own contribution here.

from burner-wallet.

100 DAI from the ECF Web 3.0 Infrastructure Fund! Looking forward to the results :)

from burner-wallet.

💰 A crowdfund contribution worth 100.00000 DAI (100.0 USD @ $1.0/DAI) has been attached to this funded issue from @.💰

Want to chip in also? Add your own contribution here.

from burner-wallet.

💰 A crowdfund contribution worth 0.48000 ETH (102.47 USD @ $213.48/ETH) has been attached to this funded issue from @gianni-dalerta.💰

Want to chip in also? Add your own contribution here.

from burner-wallet.

Lot's of funds for this issue! I'm very excited to see designs! Feel free to post early mockups here in github to gauge community reaction!

from burner-wallet.

@starkblaze01 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 burner-wallet.

@gitcoinbot, working on it.

from burner-wallet.

Unfortunately I don't have a lot of coding experience but wanted to throw a design together. Most flows will be the same as the existing application.

• Minimal text so it can easily be translated
• Super simple

One thing we might want is a small explanation that can be easily translated for a couple of key things:

• The gist of what it is
• What burning does
• The xDia bridge

Don't seem to be able to 'Start Work' on GitCoin which is slightly odd.

from burner-wallet.

Just updated the bounty so you can start work :)

from burner-wallet.

Whoa there's a lot of activity here, cool. Sorry for the delay, this week was overwhelming, going to post later today!

from burner-wallet.

Yes! Please post designs here! Even if you are unable to implement them into React we'd love to see your work. Perhaps we can split this into two bounties; one for design and one for implementation. If you are interested in getting started with implementation, checkout the starter guide I tweeted about: https://twitter.com/austingriffith/status/1062488114948595713

from burner-wallet.

Tidied it up. No idea what posting etiquette is on Github, tell me to cool my jets if I'm spamming. Starting on interactions now, aiming to have something up on InVision by Friday.

(are gradients still cool?)

from burner-wallet.

@seichris This is cool.
I thought about adding new functionality to the app in my designs but then I wasn't sure if that was part of the brief. I wanted to add a tx history to my designs, I thought that would be useful. Persisting the data would be tricky, we have to add a db to the mix and then decide on an authentication strategy. We could just do local storage to try the feature out first though. Ultimately, I decided to only design for features that were already coded.
@austintgriffith whats the brief here? If we can just draw in new functionality that opens things up quite a bit.

from burner-wallet.

@seichris This design is really nice, very rad. Any way to export from Figma -> Sketch? Would love to play with the design a bit.

from burner-wallet.

@jakerockland Thanks! Figma -> Sketch is not possible. Only svg export. You could copy-pasta my figma into a new figma file though.

from burner-wallet.

Extending this bounty to make sure we have adequate time to both design and implement. There is a new merge to the master branch that breaks the monolithic React file into easy to use components. Let's try to get designs submitted here soon so the community can choose and tweak and then let's start making moves toward implementing in React. If you have any questions or concerns feel free to hit me up directly on telegram @austingriffith. Multiple people will be paid on this relative to their contribution and what we end up using. If you are actively designing or implementing a design, please callback here so we can collaborate.

from burner-wallet.

@austintgriffith is there a deadline for when you will want to start the design work? I don't have time to work on this any more. I'll be available again on the 14th of December. Any chance you could put a rough deadline down and then we can schedule around it?

from burner-wallet.

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

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

1. @seichris

@austintgriffith please take a look at the submitted work:

• PR by @seichris

• 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
• $43,834.81 more funded OSS Work available on the Gitcoin Issue Explorer

from burner-wallet.

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

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

1. @seichris

@austintgriffith please take a look at the submitted work:

• PR by @seichris

• 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
• $43,934.81 more funded OSS Work available on the Gitcoin Issue Explorer

from burner-wallet.

Oops. Shot too early. Didn't implement anything yet.

from burner-wallet.

We're supposed to start work? I thought one of the design is going to be picked first?

from burner-wallet.

Ah k. Then a deadline definitely would make sense.

from burner-wallet.

Yeah let's get a couple good designs and let the community/collaborators/contributors decide what works best. Then, phase two will start and we can implement the design in React.

Designers will be paid a portion of the bounty once we select a good design and the implementor will be paid the remaining amount to get it in React.

from burner-wallet.

⚡️ A *Magical Unicorn* Kudos has been sent to @mattybgits for this issue from @austintgriffith. ⚡️ The sender had the following public comments: rad design Nice work @mattybgits! Your Kudos has automatically been sent in the ETH address we have on file.

from burner-wallet.

from burner-wallet.

@austingriffith I'd like to do the second half!

from burner-wallet.

I would say go ahead and award @mattybgits, the design looks cool and it would be good to get something implemented 😀

from burner-wallet.

@austintgriffith + everyone else. InVision prototype for the 3 sending processes. Hotspots should be working. Working out copy for saving and deleting, a little info modal + an explanation of the xDai Bridge. Let me know what you think, would appreciate some feedback.

https://invis.io/NFP3H7LUK2T

from burner-wallet.

⚡️ A tip worth 50.00000 DAI (50.0 USD @ $1.0/DAI) has been granted to @mattybgits for this issue from @austintgriffith. ⚡️

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

• $33517.91 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 burner-wallet.

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

This Bounty has been completed.

Additional Tips for this Bounty:

• austintgriffith tipped 50.0000 DAI worth 50.0 USD to mattybgits.

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

from burner-wallet.

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

This Bounty has been completed.

Additional Tips for this Bounty:

• austintgriffith tipped 50.0000 DAI worth 50.0 USD to mattybgits.

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

from burner-wallet.

This issue is back open again. Sorry, I don't know how to use Gitcoin. I'd love to see the second half of this bounty! I think @shailysangwan might be working on getting the design implemented in React?

from burner-wallet.

@shailysangwan If you need anything, let me know! Can send through style info and should have the rest of the screens uploaded to InVision by tomorrow early afternoon at the latest.

from burner-wallet.

👋 Hi everyone, does anyone want to start a Figma file for all these great ideas and designs? Happy to jump in and help.

from burner-wallet.

Hey there, just wondering what the status is on this project.
@mattybgits congratulations on winning the gig. Great work. Are you also working on desktop and tablet designs or just the mobile views?
@shailysangwan are you still working on dev? whats the ETA? Do you need any help? Here is you need me. Happy to work on this if you decide not to.
@austintgriffith I sent you my ethereum wallet id but I never got paid for runner up design work? Do I need to rejoin the gitcoin gig? I'm unclear how this works. Please let me know.

from burner-wallet.

@joshpitzalis cheers mate! I don't envision the desktop version being too different. Will take a crack at some layouts today though.

from burner-wallet.

@joshpitzalis I've been working on it, it'll be completed soon.

from burner-wallet.

@mattybgits nice work on the designs! Great hustle. (Any thoughts on also making the file editable to others?)

Also what is your Twitter account again? Mine is http://www.twitter.com/DaveCraige

from burner-wallet.

Is somebody still working on the implementation part?
I can help with on it.

from burner-wallet.

⚡️ A *Creative Cat* Kudos has been sent to @shailysangwan for this issue from @austintgriffith. ⚡️ Nice work @shailysangwan! Your Kudos has automatically been sent in the ETH address we have on file.

from burner-wallet.

⚡️ A tip worth 50.00000 DAI (50.0 USD @ $1.0/DAI) has been granted to @shailysangwan for this issue from @austintgriffith. ⚡️

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

• $43787.23 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 burner-wallet.

@austintgriffith the people who did design work, but didn't get picked. You said you were going to pay us $25 for our efforts. I've checked in about this twice now and I never get a response. Is that still on the table?

from burner-wallet.

Yes of course, sorry for the slow responses.

from burner-wallet.

⚡️ A tip worth 200.00000 DAI (200.0 USD @ $1.0/DAI) has been granted to @shailysangwan for this issue from @gitcoinbot. ⚡️

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

• $50304.88 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 burner-wallet.

⚡️ A tip worth 109.00000 DAI (109.0 USD @ $1.0/DAI) has been granted to @mattybgits for this issue from @gitcoinbot. ⚡️

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

• $50304.88 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 burner-wallet.