Skip to main content

Dialogs

You can display a dialog in the MetaMask UI using the snap_dialog API method. Dialogs can contain custom UI and interactive UI components.

There are three types of dialogs: alerts, confirmations, and prompts.

caution

Dialogs do not work when MetaMask is locked. To check if MetaMask is locked, use snap_getClientStatus.

Request permission to display dialogs

To display dialogs, first request the snap_dialog permission. Add the following to your Snap's manifest file:

snap.manifest.json
"initialPermissions": {
"snap_dialog": {}
}

Display an alert dialog

To display an alert that can only be acknowledged, call snap_dialog with type: "alert". The following example displays custom UI that alerts the user when something happens in the system:

index.js
import { panel, text, heading } from "@metamask/snaps-sdk";

await snap.request({
method: "snap_dialog",
params: {
type: "alert",
content: panel([
heading("Something happened in the system"),
text("The thing that happened is..."),
]),
},
});

// Code that should execute after the alert has been acknowledged.

Alert dialog example

Display a confirmation dialog

To display a confirmation that can be accepted or rejected, call snap_dialog with type: "confirmation". The following example displays custom UI that asks the user to confirm whether they would like to take an action:

index.js
import { panel, text, heading } from "@metamask/snaps-sdk";

const result = await snap.request({
method: "snap_dialog",
params: {
type: "confirmation",
content: panel([
heading("Would you like to take the action?"),
text("The action is..."),
]),
},
});

if (result === true) {
// Do the action.
}

Confirmation dialog example

Display a prompt dialog

To display a prompt where the user can enter a text response, call snap_dialog with type: "prompt". Prompt dialogs also accept a placeholder value that displays in the input field when no text is entered.

The following example displays custom UI that prompts the user to enter a wallet address:

index.js
import { panel, text, heading } from "@metamask/snaps-sdk";

const walletAddress = await snap.request({
method: "snap_dialog",
params: {
type: "prompt",
content: panel([
heading("What is the wallet address?"),
text("Please enter the wallet address to be monitored"),
]),
placeholder: "0x123...",
},
});

// walletAddress will be a string containing the address entered by the user.

Prompt dialog example

Example

See the @metamask/dialog-example-snap package for a full example of implementing dialogs. This example exposes a custom JSON-RPC API for dapps to display dialogs.