UI/UX design

[JessicaDosseh]

@hxrts , @charleenfei , @seantking : Here is the first UX mockup (no code)

Question:
Since this design is based on the Cosmos design, would it be possible for us to start a pattern library with all the components and guidelines that cosmos uses for its designs to make it easier to pull from and make things consistent across the board when coding?

[JessicaDosseh]

---

First iteration

IBC Explorer Design

Visit Mockup
Click to watch mockup video

---

Design Breakdown

---

I'm using the User story Breakdown as reference.

• External User navigation

General functionality for people who want to view information and move on (quick decisions)

Priority Table view, add charts and other tables in the future, create a forum for active relayer discussion?, links to docs and repos + FAQ, other analytical functionalities.

• Internal User navigation

A space where we can store statistics for grant decisions and PR efforts, access to private information?, more in-depth settings + room for expansion.

• Table similar to Map of Zones

Note: For the first iteration this section will be really redundant

• Meta data similar to IBC Visualizer

This section is meant to display granular information

• Light and dark mode because why not

light	dark

[hxrts]

this is so cool!!! excited to dig into this on monday :)

[seantking]

Great Work!

[okwme]

🔥🔥🔥

[dogemos]

This is really awesome!

A suggestion I'd add is to set the home screen as an extremely simplified channel explorer interface.

For most users, I think they simply want to know 'what channels are available between chain-a and chain-b?'.

Having a simple Uniswap-like interface where users can choose 'Chain A (source)' and 'Chain B (destination)' and click a button to find which channels are available may be very helpful.

[JessicaDosseh]

---

Iteration # 2

IBC Explorer Design

Update

---

To start, we are stripping it back a little to build out core components.

Root Nav 
|── Body component 
          |── Chain Nav 
          |── Chain Name 
          |── Chain Data Table / Chain Meta Data 

Sorting

---

@hxrts suggested we start with Sort Direction and Sort Precedence for or data.

This then brings up a small question, would it be better to use Material UI to do this, or would it be better to create our own component with more flexibility if we will be adding our own sorting methods?

1. Sort Direction

Sort Direction is the general sorting functionality to sort from A → Z or from Z → A 

2. Sort Precedence

Sort Precedence lists all the fields selected to be part of the sorting hierarchy

Routing

---

@charleenfei to make this application dynamic, would we set up the routing to be something like this?

www.url.com/ExplorerType/ChainType

Where 
|──  ExplorerType = Root Nav 
|──  ChainType = Body component 

So in our case for the IBC explorer it would be: www.url.com/IBC-Explorer/Gaia-Hub

ExplorerType	ChainType
Navigate by clicking explorer icon	Navigate by clicking grid menu

If we are going the dynamic navigation, then would we do something like this for the base URL @ www.url.com/?

Stating with IBC Explorer	Expanding
www.url.com/IBC-Explorer	www.url.com/other-Explorer

Body Navigation

---

Mode	Left Navigation	Top Navigation
Light
Dark

Why the content in the table is redundant

---

The reason why the first table iteration will be redundant is because it will show all the links in one Connection.

As in the number of rows per Connection is equivalent to the sum of the deepest data link.

Because there are 6 Sequences, there will be 6 repetitive connection rows. 

Because there are 2 Channels within one Connection with 3 and 2 Sequences in each respectively, 
there will be a total of 5 rows.

[charleenfei]

cosmos

this is actually a great idea, I'm sorry for not responding to this earlier. Please do this! in the same repo for now though might make sense, until we get an idea of how much this will be used more generically, as i've had the experience of having to update scattered design pattern repos and usually am more pro monorepo.