MetaMask Snaps - Writing Plugins for Plugin Wallets

metamask-snap-banner

Introduction#

Official website: https://metamask.io/snaps/

Extend the functionality of MetaMask

MetaMask is the most famous browser extension wallet in the EVM ecosystem, and Snaps is a new feature of MetaMask that extends its functionality to provide users with diversified/customized services.

As of June 2023, MetaMask is the only wallet provider that supports custom plugins.

Features#

Snaps supports the following features:

Adding new APIs
Supporting various blockchain protocols: Supporting non-EVM based blockchains
Modifying existing features/information: dialogs, reminders
Displaying transaction information: accessing blockchain nodes
Scheduled tasks: periodic user operations
Accessing the internet
Customizing UI

Development#

Developer documentation: https://docs.metamask.io/snaps/

To develop MetaMask Snaps, you need to use MetaMask Flask Wallet, which is the developer version of MetaMask. In addition, you need to have Node.js and Yarn environment installed locally.

Note: MetaMask and MetaMask Flask cannot be enabled simultaneously in the same browser. It is recommended to install MetaMask Flask on another browser that does not have MetaMask installed.

For scaffolding initialization, refer to the official QuickStart.

The main modifications for our development are made to packages/snap/src/index.ts.

import { OnRpcRequestHandler } from '@metamask/snaps-types';
import { panel, text } from '@metamask/snaps-ui';

/**
 * Handle incoming JSON-RPC requests, sent through `wallet_invokeSnap`.
 *
 * @param args - The request handler args as object.
 * @param args.origin - The origin of the request, e.g., the website that
 * invoked the snap.
 * @param args.request - A validated JSON-RPC request object.
 * @returns The result of `snap_dialog`.
 * @throws If the request method is not valid for this snap.
 */
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.');
  }
};

The website page configuration is located in the packages/site path.

Official Tutorials#

The official provides some functional tutorials, such as gas estimation and displaying transaction information.

I followed the official tutorial to develop a gas estimation Snap.

Repo: https://github.com/Confucian-e/gas-estimation-snap

It mainly obtains the current gas fee through internet access to a third-party API.

To access the network and the third-party API, you need to add "endowment:network-access": {} permission under initialPermissions in packages/snap/snap.manifest.json.

Then, add the relevant logic code in packages/snap/src/index.ts to respond and display it to the user.

snaps-gas-estimation