interchainio / ibc-visualizer Goto Github PK

• Use the latest cosmjs (0.24.0-alpha.17+) and the stargate/cosmos client
• Connect to musselnet as a demo

As done in https://github.com/CosmWasm/code-explorer

The GitHub pages deployment should connect to a public testnet (musselnet for now).

In the code

      <div>
        {connectionsResponse?.connections?.length ? (
          <>
            <span className={style.title}>Connections / client</span>
            <HeightData height={connectionsResponse.height} />
            <div>
              {clientIds.map((clientId) => (
                <div key={clientId} className="flex flex-col items-start">
                  <div className={style.subtitle}>Client {clientId}</div>
                  {connectionsResponse.connections?.map((connection) => (
                    <Link
                      to={`${pathConnections}/${connection.id}`}
                      key={connection.id}
                      className={`${style.button} mt-2 block`}
                    >
                      Connection {ellideMiddle(connection.id ?? "–", 20)}
                    </Link>
                  ))}
                </div>
              ))}
            </div>
            {connectionsResponse.pagination?.nextKey?.length ? (
              <button onClick={loadMoreConnections}>Load more</button>
            ) : null}
          </>
        ) : (
          <span>No connections found</span>
        )}
      </div>

the title and height is not shown when the list of connections is empty. I think we need two checks here

• If connectionsResponse is set: show title, height and list (elements or "No connections found").
• If connectionsResponse is not set: show text "Loading data …"

A button always signals that an action is triggered. But here we just navigate in the all just like in a wikipedia document. I think most of the buttons we have right now should displayed as links.

We need a short description how to start the local blockchain and start the app

Right now if no chain is running the app just displays a black screen to the user. Let's catch connection errors and inform the user they need to make a chain available at the relevant location.

Whenever we have a group of data, it would be nice to show it in a table to make the information reasier to process.

Example to show the idea:

We don't need the borders, just the table layout.

1. Where is the docker image or docker-compose script?
2. Unclear what is todo with CosmJS package
3. ./start.sh is not part of the repo

It would be great to see these in a tree form in the main screen. For example when you click a connection, channels appear below, when clicked to a channel, ports will show up.