Multi-Market selector on Swivel Finance

The existing UI for browsing active markets in Swivel is suitable only for a handful of markets. But what would happen when we have several, or even dozens or hundreds of markets? We needed a way to make it easy for users to filter and find the markets they want to interact with.

Without compromising or having to refactor the current interface drastically, we needed to add more context and dynamic filtering. By re-imagining the list components that represent individual markets we boosted visual cues, adding more color and iconography to represent the tokens and protocols reflected. Additionally we implemented a typeahead search to filter the list by name, symbol, protocol, maturity, even current percentage rate.

We prevented the headache of needing to reimagine the broader UI to accommodate a more context rich market selection, and introduced a pattern that will scale no matter how many markets we ultimately support.