What is MetaMask Snap?

A few days ago, ConsenSys announced the public roll-out of MetaMask Snaps Open Beta. MetaMask Snaps are essentially plugins that extend the capabilities of the MetaMask wallet. These “Snaps” are apps developed by third parties that can be installed to add new functionalities.

If we were to compare ConsenSys’ transformation of MetaMask to WeChat, then Snap could be seen as the WeChat Mini Program. As a result, it becomes evident that MetaMask, with its ambition, combined with ConsenSys’ scale and MetaMask’s user base, will alter the landscape of the wallet sector.

The official website has already listed 35 available Snaps and launched a Snap App Store: https://snaps.metamask.io/.

Partial List of Snaps

Technical Aspect of MetaMask Snap

So, what are MetaMask Snaps like from a technical standpoint? What are their capabilities and limitations? Are they secure? What’s the developer experience like? All these factors could determine the future potential of MetaMask Snaps.

Starting last year, LXDAO has been deeply involved in researching the implementation of Snaps. Several members have engaged in Snap development and participated in related hackathons. Today, we’ll delve into these questions from a technical perspective and even develop a Snap to give you a hands-on developer experience.

Getting Started with MetaMask Snap

Installing MetaMask Snap

You can generally install Snaps from the official MetaMask Snap marketplace, or directly from a project’s website. For instance, with UniPass, once you visit the app page, there will be a button to connect your MetaMask.

Clicking it initiates the Snap installation:

Using MetaMask Snap

Once installed, you can start using the product and its features. In this case, UniPass will create a smart contract account for you, which you can control through your MetaMask EOA (Externally Owned Account).

When you initiate a transfer, UniPass triggers a Snap pop-up to confirm if you want to execute the operation for the UniPass AA wallet.

After confirming through MetaMask, you can proceed with the transaction. In this scenario, MetaMask gains control over the UniPass AA wallet through the Snap, eliminating the need for UniPass to develop its own wallet plugin. This also allows for low-cost user onboarding via MetaMask.

What Insights Can We Gather From This Installation and Usage Process?

1. Fine-Grained Permission Control: Snaps offer intricate permission settings, encompassing wallet connections, network requests, and more. They’ve been designed with a “Principle of Least Privilege” approach, putting security first.
2. Package Management via NPM: As indicated by npm:@unipasswallet/unipass-snap, Snap relies on NPM for package and version management, this might have security issues, which we will detail later.
3. High Flexibility but Concise UI: Snaps are highly adaptable, allowing projects to develop and dictate their own features and logic. However, the user interface could use some refinement.
4. Simple and Reliable Experience: Snaps provide a smooth and reliable user experience, meeting both Beta and production-level standards.

Security always takes precedence when it comes to wallet products. Let’s delve into the security design of Snaps.

Are Snaps Secure?

Runtime Analysis of Snap Code

Snaps are based on NPM, which implies they are web and JavaScript applications. As we know, JavaScript is highly flexible but susceptible to attacks like XSS and phishing. So how does MetaMask Snap tackle these challenges?

Upon researching, we found that MetaMask has funded and integrated Agoric’s Hardened JavaScript (or Secure EcmaScript) as a “fully virtualized” sandboxing solution. Agoric has drafted a JavaScript restriction API and submitted a draft proposal to TC-39: TC-39 proposal.

In simple terms, Hardened JavaScript is a more secure subset of standard JavaScript. By adjusting some of JavaScript’s capabilities and limiting API calls, it reduces various risks. It creates a secure sandbox for executing the code and follows the “Principle of Least Privilege” in planning code permissions.

For more detailed technical specifics on Hardened JavaScript, please refer to: https://tvcutsem.github.io/assets/HardenedJS_BlueLava2022.pdf.

Agoric and MetaMask have co-developed the LavaMoat (https://github.com/LavaMoat/lavamoat) project to enhance the security of Snaps. LavaMoat primarily addresses the security risks of external dependencies in JavaScript projects.

Both Agoric and MetaMask have undergone black-box and white-box security tests and have published detailed security reports. (More details: https://agoric.com/blog/technology/purple-teaming-how-metamask-and-agoric-hunted-bugs-to-harden-javascript). Therefore, at the code execution level, we have ample reason to believe that Snaps are secure.

Open Source and Audited Code

Apart from explicit user authorization and least-privilege design, to be officially recognized, Snaps must be open-sourced, reducing the likelihood of malicious code. We also observed that Snaps listed on the official website have undergone third-party security audits, further enhancing their credibility.

Is there a security risk with Snaps managed via NPM?

Currently, Snaps are managed based on NPM packages and versioning. NPM is a widely used package management tool for the Web Development, allowing developers and project teams to release new packages and code independently.

MetaMask has no control over version releases on the NPM platform. There’s a possibility that the latest version changes might not be open-sourced or audited, isn’t there?

Upon official clarification, all changes to NPM package versions need to be reviewed by the official team and added to a whitelist before they can be installed. Therefore, even if a project team releases a new NPM package, it cannot be installed by users until it’s officially listed. This approach undoubtedly increases the cost of updating Snap versions but is indeed the safest solution. It reflects MetaMask Snap’s design philosophy of prioritizing security above all else.

Technical Capabilities and Limitations of MetaMask Snap

MetaMask Snap was recently announced officially, but it has actually been in development for over four years! The initial concept of MetaMask Snap was released by Dan Finlay on October 10, 2019, on Medium. Medium Article.

Balancing security, flexibility, and efficiency is a significant challenge. It’s evident that MetaMask has invested a lot of resources and preparation into this endeavor.

At present, three major APIs are mainly exposed:

1. Interoperability: Allows developers to build wallets for other chains based on MetaMask.
2. Transaction Insights: Enables developers to retrieve transaction data before a user initiates a transaction, for risk assessment.
3. Notifications: Allows direct messaging to users via Snaps, although this appears to require website support and seems somewhat limited.

Below is a brief introduction to the specific capabilities and effects opened by MetaMask Snap, to give you a more vivid understanding.

Notification capability

The Snap_notify interface can display notifications within MetaMask or the browser. Snaps can send direct messages to users through this interface, as shown in the image below.

Transaction Insights capability

When a user interacts with a smart contract, MetaMask triggers the Snap’s onTransaction event. MetaMask passes the unsigned raw transaction to the onTransaction handler method. Snaps can then return an interface on the secondary confirmation page of the transaction, customizing the displayed content.

Through this capability, features like secure auditing of transaction information and extended information displays can be realized.

Dialog interface and custom interface capabilities

The Dialog capability allows Snaps to pop up a separate window directly, similar to traditional Alert/Confirm/Prompt dialog boxes. These are used for reminders, confirmations, and information submissions, respectively.

Through Dialog, you’ll be able to customize simple interactive interfaces and operations to integrate with your DApp.

What can’t MetaMask Snap achieve at the moment?

Due to security reasons, Snap currently does not support third-party frontend frameworks and only provides a limited UIKit. Here, we still use Insight as an example, showcasing the UI component library available for developers.

As shown in the image, the current features include Heading (large text), Text (small text), Panel (a single-use card), Divider, Copyable (click to copy), and a subset of Markdown features (bold and italic). Therefore, interactive capabilities seem temporarily unachievable, and embedded HTML can’t be used for interactions. However, after posing a question in the official Discord, they stated these limitations are for security reasons and might be relaxed in upcoming versions.

Furthermore, for security reasons, external requests are only supported via the Fetch method and do not support additional request protocols such as WebSocket. Due to security, capability, and privacy limitations, it’s also not possible to access client information, such as the current URL that triggered Snap, making it challenging to implement a wider range of features.

Most of these issues stem from security concerns. We believe as security gets validated over time, more permissions will be granted.

With the introduction of these APIs, MetaMask has essentially evolved into an open-platform product. It feels akin to when WeChat launched its Official Account and Mini-programs, transforming from just a chat tool.

Back in 2019, MetaMask already foresaw the current market landscape with numerous public chains, project parties, and custom wallet requirements. Rather than each project developing its own plugin and users having to install multiple plugins, it’s more efficient to develop based on MetaMask Snap. In the first batch of Snaps, we saw wallets from ecosystems other than EVM, like Sui Wallet, Solana Wallet, and Arweave Wallet. Given its existing user base, MetaMask Snap is bound to significantly impact the wallet landscape.

In fact, the potential of MetaMask Snap might be even greater than we imagine, extending beyond just wallets. We can also see efforts from the EthSign team, who created a universal password manager called KeyChain based on MetaMask Snaps. All browser passwords can be encrypted and stored using the wallet key. By securing your wallet, you’re essentially securing all your passwords.

There’s also a creation from the Web3MQ team. Web3MQ is a high-performance decentralized communication relay network. The Web3MQ Snap will serve as its client to facilitate message interactions, notifications, alerts, and push functions. It will integrate with other DApps that are connected to Web3MQ, such as chat tools or blockchain-based games, among others. With the help of Web3MQ Snap, messages and updates will be automatically pushed to Metamask Snap users, eliminating the need for additional user authorization. This establishes a trustless connection between users and between users and applications.

Snaps are highly developer-centric. With the open API, how’s the developer experience? Let’s dive into creating a Snap to find out.

Creating a Snap for Testing

Thought Process

It’s well-known that most users often don’t know the smart contracts they’re interacting with, including the following concerns:

1. Whether the transaction contract has been replaced by a phishing site.
2. Whether the transaction contract is upgradeable.
3. Whether the smart contract is newly deployed and hasn’t been verified by many.
4. Whether the transaction contract is open-source.

For average users, expecting them to review the solidity code of contracts before every operation is a tall order. This situation is ideal for the Transaction Insight feature to analyze smart contracts, like using AI for a preliminary security audit, possibly filtering out 80% of basic phishing attacks.

Setting Up the Development Environment

Wallet Installation

First, install MetaMask Flask.

MetaMask Flask is a developer-centric version of the MetaMask extension, mainly used for previewing new features and experimental functionality development. Remember, it’s for development, not for daily use. Don’t import your daily-use private keys. We’re using Flask here primarily to preview our locally developed Snap.

It’s recommended to temporarily disable your regular MetaMask wallet and other browser wallets after installing or create a new Chrome profile to avoid conflicts.

Account Creation

After installing the wallet, create a new one just like a regular MetaMask wallet. This is a test wallet, so don’t import your daily-use wallet.

Next, we need to deposit some test coins into the newly created wallet, which can be obtained through faucets. The Snap discussed in this article uses Goerli, so the following content will primarily focus on Goerli.

To initialize a Snap based on a template, follow the official documentation. First, use the @metamask/create-snap CLI to create a new Snap project. At the same time, we’ll initialize using the official template:

yarn create @metamask/snap transaction-insights-snap && cd transaction-insights-snap

Snap File Structure

The main Snap files are in ./packages/snap. The directory structure is:

Snap’s configuration file is in snap.mainfest.json, and the main body of Snap is in ./src/index.ts, which is quite succinct.

Enabling Permissions

First, enable permissions. Add the following three lines to snap.mainfest.json:

jsonCopy code

“initialPermissions”: {

“endowment:transaction-insight”: {}, // Transaction insight

“endowment:ethereum-provider”: {}, // Access to RPC

“endowment:network-access”: {} //

In the manifest file, you can also update the description and proposedName to modify the project’s description and name.

Fetching Transactions

For this demo, all that’s needed is to modify the index.ts file to complete all functionalities. Below is a simplified code snippet. For the complete runnable code, please visit: https://github.com/LidamaoHub/insights.

tsxCopy code

import { OnTransactionHandler, OnRpcRequestHandler } from ‘@metamask/snaps-types’;

import { heading, panel, text, copyable, divider } from ‘@metamask/snaps-ui’;

export const onTransaction: OnTransactionHandler = async ({ transaction }) => {

// transaction includes values like to (contract address) and data (interaction data)

// Example code to fetch Audit information for the contract below

const info = await fetch(http://contract-info.audit.dev/?address=${transaction.to});

// Below is a UI sample code

return {

content: [

 text(

   `${info.riskList.length} risk item`,

 ),

 heading(`${info.riskList.length ? 'Risk List' : ''}`),

 ...info.riskList.map((item, i) => text(`${i + 1} ${item.text}`)),

 divider(),

 text(

   `More audit info from the following url`,

 ),

 copyable(

   `https://contract-info.audit.dev/mm${info.token}`,

 )

]

};

};

For more in-depth features, refer to the MetaMask Snap Developer Documentation.

After installation, your every transaction will display similar risk alerts:

The development experience with Snaps is currently quite smooth, with very few issues. The official templates are also rich and diverse. Experienced developers can usually get started and develop their required Snap within a few hours. However, the biggest bottleneck for official releases that cater to a mainstream audience will be security audits. Not all independent developers or small teams have the resources to conduct audits for their Snaps. Therefore, it is expected that the quantity and diversity of Snaps won’t experience explosive growth for a considerable time.

Developer Support

If you can successfully execute the above example, congratulations, you are a qualified Snap beginner developer!

Last year, MetaMask officially launched the MetaMask Grants DAO to fund high-value projects within the MetaMask ecosystem. It’s an employee-driven experimental initiative, aimed at offering grants to global external developers for building impactful experiences within the MetaMask ecosystem. A portion of MetaMask’s quarterly profits are funneled into this DAO, and its current annual budget stands at $2.4 million.

Any project that enriches the MetaMask ecosystem can apply for an official MetaMask Grant from the MetaMask Grants DAO. For more information, please visit https://metamaskgrants.org/.

It’s worth mentioning that LXDAO is honored to have applied for and received a grant from MetaMask this year, and has actively participated in the development of related projects, contributing to the MetaMask ecosystem!

Conclusion

We’ve dissected what Snap is from a technical perspective, its security considerations, limitations, and developer experience. In summary:

• Snaps are akin to WeChat Mini Programs, unlocking a broader canvas of possibilities for MetaMask.
• The security is relatively reliable. The code runs in a restricted sandbox environment. The code needs to be open-sourced and audited. The official team has set up an installation whitelist for installation authorization.
• Due to security concerns, the current API surface is somewhat limited. However, it still allows for a wide array of imaginative Snaps.
• With four years of refinement and real-world testing, the developer experience is top-notch. However, due to built-in security precautions, including a whitelist mechanism and mandatory audits, don’t expect a deluge of Snaps to flood the market any time soon. But this is understandable, WeChat Mini Programs had a slow start with very limited APIs, exploded since 2018, and now there are 450M+ DAU and 7M+ Mini-Programs.

Currently, MetaMask Snap is still undergoing rapid iterations. It’s anticipated that more permissions and capabilities will be opened up in the future. There’s hope for the introduction of a more open yet secure mechanism, such as a safe and permissionless low-cost audit system, so as to allow more developers to participate at a lower cost. If this issue is addressed, there can be an expected surge in demand in the future. There might even emerge dedicated Snap developer positions.

Leveraging MetaMask’s massive user base, indie devs may also find unique opportunities. Let’s keep our eyes peeled for the next game-changing innovations that Snaps will bring to the table.

Lastly, thank you for your article. I believe it will significantly contribute to raising awareness about the current state of MetaMask Snaps.

Please continue to follow our Twitter: @lxdao_official. We’ll be rolling out more MetaMask Snap-related content like workshops, so stay tuned!

Disclaimer：

1. This article is reprinted from [medium]. All copyrights belong to the original author [LXDAO]. If there are objections to this reprint, please contact the Gate Learn team（gatelearn@gate.io）, and they will handle it promptly.
2. Liability Disclaimer: The views and opinions expressed in this article are solely those of the author and do not constitute any investment advice.
3. Translations of the article into other languages are done by the Gate Learn team. Unless mentioned, copying, distributing, or plagiarizing the translated articles is prohibited.