Skip to main content

Snaps quickstart

Get started with Snaps using the @metamask/create-snap CLI. With the CLI, you can initialize a snap monorepo project built with TypeScript and React.

Prerequisites​

  • Snaps installed

    tip

    Snaps works with the latest LTS version of Node.js, but we recommend using the version specified in the template's .nvmrc file.

  • A text editor (for example, VS Code)

  • Yarn version 3

Create the project​

Create a new snap project using the @metamask/create-snap CLI by running:

yarn create @metamask/snap your-snap-name

or

npm create @metamask/snap your-snap-name

See the section Snaps anatomy to learn about the anatomy of your snap project files.

Start the snap​

From the root of the newly created project, install the project dependencies using Yarn:

yarn install

Start the development server:

yarn start

You are now serving the snap and its front-end at http://localhost:8000.

Connect to the snap​

On the front-end, select the Connect button and the MetaMask Flask extension pops up and requires you to approve the snap's permissions.

Once connected, select the Send message button to display a custom message within a confirmation screen in MetaMask.

Customize the snap​

Open the project in a text editor. You can customize your snap by editing index.ts in the packages/snap/src folder.

index.ts contains an example request that uses the snap_dialog method to display a custom confirmation screen:

import { OnRpcRequestHandler } from '@metamask/snaps-types';
import { getMessage } from './message';

export const onRpcRequest: OnRpcRequestHandler = ({ origin, request }) => {
  switch (request.method) {
    case 'hello':
      return snap.request({
        method: 'snap_dialog',
        params: {
          type: 'Confirmation',
          content: panel([
            text(`Hello, **${origin}**!`),
            text('This custom confirmation is just for display purposes.'),
            text(
              'But you can edit the snap source code to make it do something, if you want to!',
            ),
          ]),
        },
      });
    default:
      throw new Error('Method not found.');
  }
};

Edit the text in the description or textAreaContent field and select the Reconnect button on the front-end to re-install the snap.

note

MetaMask automatically re-installs locally hosted snaps whenever it receives a connection request for them.

The next time you select the Send message button, you see the updated text in the confirmation screen.

You've now successfully connected, installed, interacted with, and customized your snap! Learn more about developing a snap.