OK, this is a big one. It was an arduous task, so expect some... inconveniences. Sorry.
Includes:
A TokenSelect component that allows users to search a token by name or address, select a Token from a pre-selected "top tokens" list, or from a full tokens list.
A TokenDropdown component that puts TokenSelect to use and allows to show or hide it.
A TokenDropdownDemo component that uses both TokenDropdown and TokenSelect and it's an example of how you'd use all of this to select a token and do something with it.
A missing placeholder feature for the TokenLogo component that shows said placeholder when a token icon string is missing or erroneous (i.e.: wrong URL, etc.).
Every component should be properly documented (JSDocs, etc.), including props, CSS vars (if any), etc.
Regarding TokenSelect
What works:
Search feature.
Selecting a token from the "Top Tokens List"
Selecting a token from the full tokens list.
Top tokens list can be enabled or disabled.
Networks dropdown can be enabled or disabled (it won't show up if you don't provide a list of networks).
The component is theme-able, so devs should be able to modify colors of most if not all of the components by adding custom values to the components' exposed CSS vars (there's a list of them in the components' docs).
If CSS vars are not enough for the ambitious devs out there, every component should have a CSS class that will allow devs to further modify styles to their heart's content.
What kind of works: (spoilers: @fernandomg will improve it)
Network selection changes the list of "top tokens" depending on the availability of said tokens on the selected network, but the functionality is very basic: It's missing native tokens (i.e.: ETH); it looks tokens up by token symbol which results in false positives (i.e.: "UNI" will result in several tokens that use the "UNI" symbol"; it's the same list and order no matter the network; etc.
Maybe the list of top tokens could be a prop, or we could somehow make it more customizable so it's not a hardcoded thing hidden within the code.
What doesn't work: (epilogue: @fernandomg will fix it)
Network selection won't change the full list of tokens' contents. I don't know why, but I suspect it's because searchResult doesn't change when switching networks (searchResult being tokenList in the List component)
I guess withSuspense works, but I couldn't find a way to test it (it should display a spinner when the tokens list is loading).
Maybe we should clear searchTerm when the dropdown closes, but I'm not 100% sure.
Token balance is hardcoded.
This is a complex component, so that thing were we'd like devs to be able to replace or customize every component by one of their own is kind of impossible, or it requires to make things super hard (for us and for them). So if someone wants to replace, say, a button with their most liked button in the whole world they will have to modify TokenSelect's source code. I think CSS vars and CSS classes should be enough, but you never know...
Steps:
Scroll down the page, use the thing, see what works and what doesn't.
Type of change:
[x] New feature
[ ] Bug fix
[ ] Breaking change
[x] Enhancement
[x] Refactoring
[ ] Chore
How Has This Been Tested?
[x] Manual testing
[ ] Automated tests
[ ] Other (explain)
Remember to check that:
Your code follows the style guidelines of this project
You have performed a self-review of your code
You have commented your code in hard-to-understand areas
You have made corresponding changes to the documentation
Closes #130 Closes #149
Description:
OK, this is a big one. It was an arduous task, so expect some... inconveniences. Sorry.
Includes:
TokenSelect
component that allows users to search a token by name or address, select a Token from a pre-selected "top tokens" list, or from a full tokens list.TokenDropdown
component that putsTokenSelect
to use and allows to show or hide it.TokenDropdownDemo
component that uses bothTokenDropdown
andTokenSelect
and it's an example of how you'd use all of this to select a token and do something with it.TokenLogo
component that shows said placeholder when a token icon string is missing or erroneous (i.e.: wrong URL, etc.).Regarding
TokenSelect
What works:
What kind of works: (spoilers: @fernandomg will improve it)
What doesn't work: (epilogue: @fernandomg will fix it)
searchResult
doesn't change when switching networks (searchResult
beingtokenList
in theList
component)withSuspense
works, but I couldn't find a way to test it (it should display a spinner when the tokens list is loading).searchTerm
when the dropdown closes, but I'm not 100% sure.TokenSelect
's source code. I think CSS vars and CSS classes should be enough, but you never know...Steps:
Scroll down the page, use the thing, see what works and what doesn't.
Type of change:
How Has This Been Tested?
Remember to check that:
Screenshots
Default state
No balance
No top tokens
No network selection
Network selection
Search
Token placeholder (iearnDAIv2):
Video captures