Snaps Update + The Road Ahead

[Montoya]

gm,

We are about 2.5 months out from the launch of MetaMask Snaps Open Beta. In that time, over 56,000 users have tried Snaps. That's a huge testament to how Snaps is a game-changer for MetaMask. I want to start by thanking all of the builders who have embarked on this journey with us. We could not be more excited to continue to expand the Snaps platform and support you into 2024.

Recently we had our first ever Snaps Builders Meetup at DevConnect Istanbul 2023. I presented a roadmap update showcasing new features already available in Snaps and upcoming features that you will be able to take advantage of soon. This thread is an updated version of this roadmap. It covers the rest of this year and the start of Q1 2024. Read on to learn about all the new features in Snaps.

User experience improvements

As of Extension 11.4, the companion website for a Snap is always accessible from the Snap settings. If your Snap requires a dapp for the UI, users will always be able to find this dapp from the settings.

In 11.5, Snaps has moved one level up in the menu to be a top-level menu item.

In 11.6, which should ship the week of Dec. 4th, the Snaps Directory is always accessible from the Snaps menu. This will make it easier for users to discover more Snaps.

We have also simplified the installation flow so users can install Snaps with fewer steps.

In 11.7, we have greatly improved the speed of shasum validation, which means installing any Snap will be about 20 times faster than before! This will be a huge improvement for large Snaps that use zk circuits.

New features

In MetaMask Flask 11.7, we will be shipping 4 new features:

Links

We will ship support for links in custom UI, using Markdown syntax: [ ]( ). You will be able to use links in any text() component, like so: text("Hello, [world](https://metamask.io)!"). You will also be able to use it in the content of a notification. Here are examples of how links will look in dialogs, transaction insights, and notifications:

When a user clicks a link, they will see a modal showing them that they are being taken to an external site, like so:

Transaction severity

A non-breaking change to the transaction insights API will enable transaction insights Snaps to introduce extra friction when they perceive a transaction to be dangerous. By returning the optional flag severity: 'critical' in an onTransaction export, a user will see a warning modal with the content of the insight and will have to double-confirm before proceeding with the transaction. If multiple Snaps return this flag, the user will see multiple warnings in the modal. Any transaction insight Snap will be able to return the flag like so:

export const onTransaction: OnTransactionHandler = async ({
  transaction,
  chainId,
  transactionOrigin,
}) => {
  const insights = return {
    content: panel([
      heading('My Transaction Insights'),
      text('Here are the insights:'),
      ...(insights.map((insight) => text(insight.value)))
    ]),
    severity: 'critical' /* optional flag for dangerous transactions */
  };
};

In this new paradigm, all installed transaction insight Snaps will be invoked at the start of a transaction flow, ensuring that dangerous transactions are always detected. You can learn more about how to use this feature here.

Domain resolution

A new Snaps API will allow Snaps to suggest addresses for names and vice-versa, similar to our native ENS integration. Here is an example of a Snap that returns an address for a Lens profile ID:

Documentation for this feature will be available soon.

Snaps homepages

Snaps will finally be able to have a UI within MetaMask that users can access. A new endowment will allow Snaps to present a panel, which the user can access via the Snaps menu, like so:

This can be used in many ways:

• Blockchain Snaps can show account info and transaction history
• Notification Snaps can show subscribed channels
• Decentralized identity Snaps can show stored profiles and verifiable credentials
• Security Snaps can show account health info
• Any Snap can show user support info, links to companion dapps, and more

More custom UI

In future versions, we will add the following custom UI components:

• Icons
• Tooltips
• Forms & form controls
• Addresses / pet names
• Secrets
• Rows with columns

Then, we will tackle dynamic UI, which is the final step to building truly engaging use cases for Snaps. With a Snap homepage and dynamic UI, many Snaps will be able to integrate their full user experience directly into MetaMask. We are excited to see this become possible in Q1.

What features would you like to see? How are you using Snaps today? Share your thoughts in this thread and let's build the future of web3 together!

[KillianH]

Snaps homepages will be available in Flask 11.7 ? 👀

[Montoya]

Yes :) the UI in the homepage is not interactive but you can use any of the available UI components in it

[schnetzlerjoe]

@Montoya For us, Cosmos Extension, Metamask Homepage with full custom UI ability (show balances, allow form flows for transfers, etc) is huge.

Also, the one click install is of course big for us since we use dynamic slips (as the screenshot shows).

Very excited for the new additions! Keep up the great work Snaps team.

[mindofmar]

AMAZING update!! Excited to add the severity: critical to the Wallet Guard Snap.

My only feedback right now would be improving the update flow for Snaps users, so that users can receive all these great updates!

[Montoya]

We are working on a way for users to get new updates within the MetaMask extension :)

[kklas]

What programmability will the dynamic UI allow in terms of UI, including custom libraries, and fetching network resources?

[Montoya]

Not sure what you mean by custom libraries. The dynamic UI approach will give component-level control over updating the UI. You should be able to fetch network resources at any time. Essentially fire off a dialog, continue execution while waiting for the result of a network request, and fire an update to the UI component you wish to modify when the request finishes.

We will have examples of how this works in January, so you can get a better idea of what you will be able to do with it.

[kklas]

Will we be able to have more flexibility with UI components? The ones available in snap_dialog are far from enough to integrate a blockchain wallet Snap.

[Nick-1979]

Hello,

How can I implement the 'Update available' notification similar to the example (Update Snap) demonstrated in the Metamask Snaps latest tests: https://metamask.github.io/snaps/test-snaps/latest/
You can refer to the provided screenshot for clarity: https://i.postimg.cc/j5d9rjtW/Screenshot-2024-01-15-at-5-44-15-in-the-afternoon.png