Building a hackathon project with Snaps at ETH Denver? Look here

[Montoya]

gm hackers! Here is everything you need to know to participate in our hackathon bounty for MetaMask Snaps.

Bounty

The bounty is split into two categories. Each category will have one winner each, taking home $2500 USDC.

Bounty 1: Best Signature Insights Snap

Use the endowment:signature-insight permission to build a Snap that can decode signature payloads and warn users when they are about to sign something malicious or display useful information about a payload. You can demonstrate your Snap with the MetaMask Test Dapp.

Bounty 2: Embedded homepage with dynamic UI

Use the endowment:page-home permission to build a Snap that can embed a dedicated UI inside the MetaMask extension, and use the dynamic UI components to make it interactive!

To build and test with these new features, you will need to get a developer build of MetaMask Flask:

MetaMask Flask builds

In order to build a Signature Insights Snap or to use dynamic UI, you will need to use a recent build of MetaMask Flask from our develop branch. These new features are still in development -- they do not work in the versions of MetaMask Flask on the Google Chrome or Mozilla Firefox extension stores! Fortunately we have builds that you can use to test and demo your Snaps:

• Chrome
• Firefox

Follow the instructions to load developer extensions into Google Chrome or Mozilla Firefox. For Google Chrome: unzip the file, then follow these steps. For Mozilla Firefox, unzip the file, navigate to the directory, then follow these steps.

Next, you should follow the steps on our documentation to set up your development environment. Once you are done with that, come back here and learn how to use these new features:

Signature Insights

You can use the Signature Insights Example Snap to learn how to build a Signature Insights Snap. Feel free to use this as a starting point. You can use whatever techniques and whatever additional features (such as endowment:network-access or endowment:ethereum-provider) to decode signatures and display useful insights to the user.

Important: in order for the signature insight to be displayed, your insight handler must return severity:critical and you must click on the Sign button to view the insight. Otherwise, insights will not be shown. This is a limitation of the current signature flow that will be fixed in a future update.

Documentation for Signature Insights prepared just for this hackathon: https://docs.metamask.io/zs/interactive-ui/snaps/reference/entry-points/#onsignature

Homepage with interactive UI

You can use the Interactive UI Example Snap to learn how to make dynamic UI components inside of a Snap. To learn how to add a "home page entry point" to your Snap, see the docs for the onHomePage entry point. You can use whatever other features you want, and you can build whatever kind of application you want; the only requirement is to have a home page with interactive UI.

Documentation for interactive UI prepared just for this hackathon: https://docs.metamask.io/zs/interactive-ui/snaps/features/interactive-ui/

Requirements to qualify for the bounty

Your Snap should be published to npm as a public package and be installable in (the above developer build of) MetaMask Flask, the canary distribution of MetaMask. Judges should be able to install and run your Snap on their own machines.

Scoring criteria

• Utility
• Innovation
• Technical sophistication (correct usage of the Snaps API methods)
• Practicality
• UX
• Bonus points for:
  • Use of other Snaps APIs
  • Localization of Snaps UI (use getLocale)
  • Using other Consensys products (Linea, Infura, Phosphor)

Resources

Our builder engagement team made a tutorial video showing how you can use these new features in a Snap: https://youtu.be/6xVKEyzHvOE

Here's the example code from this video: https://github.com/mario-christopher/snaps-dynamic-ui

Questions? Need help?

Reply in this thread with questions! You can also find our DevRel team at the MetaMask swag table at the BUIDLHUB!