MetaMask Snaps - Writing plugins for plugin wallets

Introduction

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

Extend the functionality of MetaMask

MetaMask is the most famous browser plugin 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

Using Snaps, you can support the following features:

Add new APIs
Support various blockchain protocols: support non-EVM based blockchains
Modify existing features/information: dialogs, notifications
Display transaction information: access blockchain nodes
Scheduled tasks: periodic user operations
Access the internet
Customize 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 a browser that does not have MetaMask installed.

For scaffolding initialization, refer to the official QuickStart guide: https://docs.metamask.io/snaps/get-started/quickstart/

The main modifications for our development are made in 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 documentation provides some tutorials, such as gas estimation and displaying transaction information.

I followed the official tutorial (https://docs.metamask.io/snaps/tutorials/gas-estimation/) to develop a gas estimation Snap.

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

It mainly uses internet access to retrieve the current gas fee from a third-party API.

To access the network and the third-party API, you need to add the permission "endowment:network-access": {} 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