Use custom UI
The snap_dialog
RPC method and
onTransaction
exported method use the
@metamask/snaps-ui
module to display custom user interface (UI) components.
To use custom UI, first install @metamask/snaps-ui
using the following command:
yarn add @metamask/snaps-ui
Then, whenever you're required to return a custom UI component, import the components from the package and build your UI with them. For example:
import { panel, heading, text } from '@metamask/snaps-ui';
// ...
const content = panel([
heading('Alert heading'),
text('Something happened in the system.'),
]);
return content;
Components
The NodeType
enum exported by @metamask/snaps-ui
details the available components.
copyable
Outputs a read-only text field with a copy-to-clipboard shortcut.
import { copyable } from '@metamask/snaps-ui';
// ...
const content = copyable('Text to be copied');
divider
Outputs a horizontal divider.
import { panel, divider, text } from '@metamask/snaps-ui';
// ...
const content = panel([
text('Text before the divider'),
divider(),
text('Text after the divider'),
]);
heading
Outputs a heading. This is useful for panel titles.
import { panel, heading, text } from '@metamask/snaps-ui';
// ...
const content = panel([
heading('Title of the panel'),
text('Text of the panel'),
]);
image
Outputs an image. This component takes an inline SVG. It does not support remote URLs. You can embed JPG or PNG in SVG using data URIs. The SVG is rendered within an \<img> tag, which prevents JavaScript or interaction events from being supported.
import { image } from '@metamask/snaps-ui';
// ...
const content = image('<svg width="400" height="400" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.514 17.874 9 5c.021.011.043.016.064.026s.051.021.078.031a.892.892 0 0 0 .688 0c.027-.01.052-.019.078-.031s.043-.015.064-.026l9-5A1 1 0 0 0 22 16.9L21 7V2a1 1 0 0 0-1.625-.781L14.649 5h-5.3L4.625 1.219A1 1 0 0 0 3 2v4.9l-1 10a1 1 0 0 0 .514.974ZM5 7V4.081l3.375 2.7A1 1 0 0 0 9 7h6a1 1 0 0 0 .625-.219L19 4.079V7.1l.934 9.345L13 20.3v-2.967l1.42-.946A1.3 1.3 0 0 0 15 15.3a1.3 1.3 0 0 0-1.3-1.3h-3.4A1.3 1.3 0 0 0 9 15.3a1.3 1.3 0 0 0 .58 1.084l1.42.946v2.97l-6.94-3.855Zm3.5 6a2 2 0 1 1 2-2 2 2 0 0 1-2 2Zm5-2a2 2 0 1 1 2 2 2 2 0 0 1-2-2Z"/></svg>');
panel
Outputs a panel, which can be used as a container for other components.
import { panel, heading, text } from '@metamask/snaps-ui';
// ...
const insights = [
/*...*/
];
const content = panel([
heading('Here are the transaction insights'),
...insights.map((insight) => text(insight.description)),
]);
spinner
Outputs a loading indicator.
import { panel, heading, spinner } from '@metamask/snaps-ui';
// ...
const content = panel([heading('Please wait...'), spinner()]);
text
Outputs text.
import { text } from '@metamask/snaps-ui';
// ...
const content = text('This is a simple text UI');
Markdown
Text-based components accept a very small subset of inline Markdown: **bold**
and _italic_
.
This subset will be increased in the future.
Emoji
Text-based components accept emoji.