Which UI components would you like to see in transaction insights?

[Montoya]

Hello Snap devs, we would like to get your feedback on which UI components you would like to be able to use in transaction insight views. On top of what is currently possible, we are adding support for the following:

• Links
• SVG images (non interactive)

We are also planning to add:

• Key / value pairs, like this example:
  

What else would you like to see? Lists? Tables? Something more complex? Feel free to include examples.

[mindofmar]

Awesome additions. Images (PNGs specifically) for state changes would be a huge win. Also tooltips are always a nice to have.

[eriknson]

Why do you specifically need PNGs over e.g. SVGs?

[mindofmar]

Mainly because within a lot of web3 metadata, the image URLs are served as PNG

[eriknson]

Ok, that makes sense, I’ll discuss including PNG support with the team.

[azep-ninja]

Tooltips for sure as already mentioned, and disclore/accordion to show/hide content so if data is displayed that maybe long it can be expandable without immidiately taking up the full windows and scrolling forever.

Default

Expanded

[gmkung]

Here are the things on the wishlist from team Kleros!

• Links (already mentioned)
• Tooltips (already mentioned)
• PNG images (also mentioned)
• Richer formatting (color in text, emoticons 💡 🚫 🆗 )
• Ability to display Snap in signature and token transfer flows (already in roadmap I believe)

[eriknson]

Thanks for this input, much appreciated.

Emoticons is already available, let us know if you have any issues using them though.

[eriknson]

Any specific reason to wanting PNGs specifically?

We enjoy vectorized images, so our initial scope (as of now) will be SVGs. Would this work for your use case?

[gmkung]

Most of the images we curate through our token curated registries are in PNG as that's the most commonly available forma. We can convert them to SVG but it would add complexity to the Snap.

[eriknson]

Makes sense, will discuss this w/ the team

[vidorge]

Would be cool if copyable elements could be collapsed by default with only first (or few) lines showing with the possibility to expand.
This would allow displaying more meaningful data in the already small window.

[juanforta]

We agree with all the suggestions proposed. On top, would be great a setting that would allow the user to automatically add the 3rd party snap data within the "Details" window. Is integrating snaps with the transaction flow on the roadmap?

[dzimiks]

• Accordion
• Rich Markdown support
• Adding custom styling (CSS, tailwind, anything would be helpful)
• Ability to embed/render charts - pie, bar, line, etc.
• Writing custom React/HTML code
• Alert/Callout component
• Badge/Button component
• Dropdown Menu with actionable items/links
• Input/Select/Checkbox/Forms - it can be useful if someone needs to enter third-party API key or similar

[danfinlay]

• List item picker (let a user select from a list of provided items)
• Pet name renderer (let MetaMask insert its best name for an item that the snap has reference to, like an ethereum address being substituted for an address book name).

[wangkui0508]

I'd like to see a safe subset of HTML and CSS. Many UI components can be made using such a subset. Just like Qt does: https://doc.qt.io/qt-6/richtext-html-subset.html

[Alex-distributed-lab]

Button components
Different font sizes (at least basic S, M, L, XL)
Subtabs like on the main Metamask page
Cards with attachable elements (pictures, text)
Scrollbars (including horizontal)
Dropdowns

[Nick-1979]

Hello, this is Kami from Polkagate. We believe that adding the following components is essential:

1. A select component is crucial for the UI, especially for multi-chain platforms that require a chain-switching option for their users.
2. A skeleton component, which displays a loading indicator, would be highly beneficial during data retrieval or loading processes.

Thank you.