Integrate web3 so that users don't have to type in their ETH address when shapeshifting

[coopermaruyama]

No description provided.

[jamesyoung]

FYI web3/web3.js#905

[youfoundron]

These seems like a fun one. New to web3 so I'll be getting some education. 🎓

[youfoundron]

Seems like our little exchange form is submitting on successful wallet address validation which is fired in a debounced onchange handler.

Since there is no submit button, the web3 enabled user will be stuck experiencing one of two scenarios:

1. A user's wallet address is prepopulated on componentWillMount, but they need to trigger an onchange for it to validate (triggering submission).
2. A user's wallet address is preopulated and immediately validated on componentWillMount, triggering submit before they have the chance to enter an amount of ETH to send.

To address this we can:

1. Add a submit button and force the user to manually submit.
2. Fire validation for every onblur of either input, and trigger submit if both pass validation.
3. Do something else?

I'm personally prone to option 2, but am open to any suggestions.

[coopermaruyama]

Hmmmm... Honestly if they don't have to type or copy-paste then I think both of those interactions are kind of awkward. My vote is that we stick to the conventions we're already used to seeing on web3 sites - the input box becomes a dropdown list.

If the user has web3, we should also be triggering the transaction for them to send to the deposit address. Basically right now, people have to type in ETH address, then copy the deposit address, then go open their wallet and manually enter the transaction.

For web3 users, we have all the APIs available so that they can simply:

1. choose from their saved addresses on a dropdown.
2. Transaction is auto-generated in metamask (or similar) and they just click 'Accept' and sign the transaction.

Thoughts? And yeah, this should be a really fun one!

[youfoundron]

@cooper care to show me an example of this user flow in the wild? Thanks! 😁

[coopermaruyama]

Yeah, examples off the top of my head are etheroll.com and etherdelta.github.io

Etherdelta has a dropdown to choose an address. Etheroll just chooses the first one for you.

Also, on Etheroll, when you place a bet, its creating an ETH transaction pre-filled for you with the right data, and then asks you to sign it via web3. we could do the same.

[youfoundron]

Looking at these two sites I'm thinking we should always do dropdown.

My reasoning being that selecting an address will act as the submit action, triggering address validation and transaction prefilling. Seem good?

[coopermaruyama]

Yeah, exactly what I had in mind.