Multisig UI Development Update 2

Abel
Confio
Published in
4 min readDec 7, 2023

It’s been a while since the last (and first) Development Update, so let’s jump right into the list of upcoming features for the Multisig UI.

Group “add msg” buttons by module

The list of supported messages that can be added to a transaction keeps growing, which is good, but that also meant the old UI was reaching its limit for what is acceptable for a Big List™.

The Big List™ of “add msg” buttons

So, we grouped them nicely into modules:

Grouped “add msg” buttons

Account View

There’s a new header on the app. On the left side, you can see a button with the name of the chain you’re connected to, but we’ll talk about that one later. You can click on the user placeholder icon on the right side to go to the new Account view.

New Account view with connect wallet buttons

Once you’re on that view, you can choose the wallet to connect with Keplr or Ledger. For Keplr, you need to enter your password on the extension popup before the connection can succeed, whereas, for Ledger, you need to have installed and opened the Cosmos Ledger app.

Once you connect to your wallet, you will be able to check your address, your pubKey, and your balance on that chain. The address and pubKey badges can be copied to your clipboard by clicking on them, and a toast message on the lower-right side of your screen will notify you.

New Account view with connected Keplr after clicking on pubKey’s badge

There’s also a View in explorer button that will let you see your account information on the configured explorer to that end. That would be basically the current functionality for the new Account view, simple but helpful.

New chain connection

If you click on the aforementioned button to the left of the header, a new chain connection modal window will open.

New chain connection window

This window shows all of the chains listed on the chain-registry repo with their corresponding logo. The list can be filtered with the input field at the top, and the last four networks you connected to are listed at the top for your convenience. If you hover over a network, it will show related data:

Card that shows chain-related data when hovering

There you can see the logo, the full name, the chain ID, the name of the fee token, a collapsible list of the rpc endpoints, and a link that will take you to the chain’s files on the chain-registry repo.

Customizing a chain

Whether you want to tweak the gas price of a network or to connect to a local simapp, you might want to customize some of the network-related parameters. You can do that by clicking on the Custom chain tab at the top left corner of the chains window, which will show a form like this:

The Custom chain form

Once you customize the network parameters to your liking, you should give it a unique Local Registry Name, which needs to be different from all of the mainnets and testnets from the chain registry.

Either if you submit the form or if you click on one of the networks of the list on the other tab, you will be shown the following confirmation screen:

The confirmation screen before connecting to a new chain

After making sure the destination network is the one you want, you can either Connect to it or Edit it to go (back) to the Custom chain form.

And if you want to get rid of a custom chain you created, you can hover over it, and its card will show a double-click delete button:

The hover card for custom chains allows its deletion with a double-click

Other development tasks

The forms in the Create transaction view now trim the fields to remove whitespace at the beginning and the end of the text inputs.

What’s next?

Some features that are good candidates to be implemented are:

  • Use the new toast component for all the errors in the app.
  • Show a list of validators when adding Staking messages instead of manually entering their address.
  • For IBC MsgTransfer, show a list of destination networks instead of manually entering channel and port.

And that’s a wrap-up for the second Multisig UI Development Update; stay tuned for the next one!

--

--