list of erc20 coins should be more elegant

[owocki]

http://bits.owocki.com/2n1B3R0U422W/Image%202017-09-25%20at%205.09.12%20AM.png

requirements:

• design a method for working with the erc20 coins that is more elegant than this
• if a list is presented, they must be in alphabetical order
• it'd be greaet to detect which coins a user actually has
• mileestone 1: propose design. milestone 2: submit PR

[gitcoinbot]

This issue now has a funding of 0.02 ETH attached to it.

Learn more at: https://gitcoin.co/bounty/details?url=https://github.com/gitcoinco/web/issues/3

[gasolin]

Here's the prototype UI that replace the dropdown

• when user click the select another Token link, show a list of tokens
• user click one of token, the list of tokens is gone and show the selected token and the select another Token link

https://jsfiddle.net/gasolin/n4s1qwhu/

@owocki how do you think?

[owocki]

first, hi 👋 -- thanks for taking an interest in this bounty!

i think that it works at a small scale, and i appreciate the prototype, but with i'm worried aobut what it'd look like with 100+ supported tokens ( see https://gitcoin.co/static/v2/js/tokens.js to see all of the supported tokens ). i wonder if an auto complete interface or a searchable "" box might be better patterns to adopt... @mbeylin what do you think?

[owocki]

also, sorry -- i guess i didnt make the 100+ thing clear in the original requirements list. i guess thats why its good that there's 'milestones' in here.

[mbeylin]

It seems like this could easily be accomplished with the react-select module, or a ui element which replicates it. The basic idea being that the dropdown has a maximum length, and searching with a query helps to refine the list.

http://jedwatson.github.io/react-select/

[owocki]

i like the UI of react-select but im not crazy about adding all of these dependancies to the page http://bits.owocki.com/1l1g002M3b0T/Screen%20Shot%202017-09-30%20at%209.58.08%20AM.png

[gasolin]

Ooh so you still want a dropdown menu but with search function:sweat_smile: If we want jquery only, select2 seems a good fit https://select2.org/getting-started/basic-usage

[owocki]

Ooh so you still want a dropdown menu but with search function:sweat_smile:

just generally want a dropdown that scales for large lists... but yeah, a dropdown with search sounds great :)

If we want jquery only, select2 seems a good fit https://select2.org/getting-started/basic-usage

that looks good to me. want to submit a PR and a claim for this bounty? i'm happy to send a Gitcoin Tip in addition to the bounty since the requirements / investigation took a little longer than expected.

[gitcoinbot]

The funding of 0.02 ETH attached to this issue has been approved & issue.d

Learn more at: https://gitcoin.co/funding/details?url=https://github.com/gitcoinco/web/issues/3

[gitcoinbot]

⚡️ A tip worth 0.01 ETH has been granted to @gasolin for this issue from @owocki. ⚡️

Nice work @gasolin, check your email for further instructions. | Send a Tip