MetaMask Snaps - 為插件錢包撰寫插件

metamask-snap-banner

介紹#

官網：https://metamask.io/snaps/

擴展 MetaMask 的功能

MetaMask 是 EVM 系最著名的瀏覽器插件錢包，而 Snaps 則是其一個新功能 —— 為 MetaMask 做擴展，進而為使用者提供多樣化 / 定制化服務

截止到 2023 年 6 月，MetaMask 是唯一一家支持自定義插件的錢包提供商

功能#

使用 Snaps 可以支持以下功能：

增加新的 API
支持各種不同的區塊鏈協議：支持非 EVM 系區塊鏈
修改現有功能 / 資訊：對話框、提醒
展示交易資訊：能夠訪問區塊鏈節點
定時任務：使用者週期性操作
訪問互聯網
自定義 UI

開發#

開發者文件：https://docs.metamask.io/snaps/

想要開發 MetaMask Snaps 需要使用 MetaMask Flask 錢包，也就是 MetaMask 的開發者版本。除此之外，還需要本地安裝 Node.js 與 Yarn 環境

注意：MetaMask 和 MetaMask Flask 不能在同一個瀏覽器中同時啟用，最好將 MetaMask Flask 安裝到另一個未安裝 MetaMask 的瀏覽器上

腳手架初始化參考官方 QuickStart

我們開發功能主要對 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.');
  }
};

網站頁面的配置在 packages/site 路徑下

官方教程#

官方提供一些功能教程，比如預估 gas 和展示交易資訊

我參考官方教程嘗試了開發預估 gas 的 Snap

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

它主要是通過聯網訪問第三方 API 獲取當前 gas fee

需要在 packages/snap/snap.manifest.json 中的 initialPermissions 下添加 "endowment:network-access": {} 這個許可來訪問網絡，進而訪問第三方 API

然後在 packages/snap/src/index.ts 中增加相關邏輯代碼即可響應並展示給使用者

snaps-gas-estimation