Building a snap? Start here

[Montoya]

Resources

• MetaMask Snaps webpage
• Snaps directory to try allowlisted Snaps
• Builder Team Space to connect with our builder enablement team and learn how to get your Snap allowlisted
• Snaps documentation - includes a quick tutorial to get you started
• SIPs - Snaps Improvement Proposals
• More tutorials
• Tools
  • Snaps CLI
  • Snaps Simulator (can be used for E2E tests)
  • Template Snap Monorepo - rich template with TypeScript and React, including an attractive dapp UI you can build on
• Example reference Snaps, all are functional and open source:
  • Test Snaps: Demo • Repo
  • Example Snaps: Repo
  • Mystery Snap: Demo • Repo
  • Snappy Recovery: Demo • Repo
  • MobyMask transaction insights: Demo • Repo
  • Transaction Simulation with Ganache: Repo
  • Pet Fox game: Repo • Demo • Alternate demo
• Articles and blog posts:
  • Making the Wallet Personal by Christian Montoya
  • Permissionless Innovation and You by Erik Marks
  • Snaps in MetaMask Stable and Where We Go From Here by Dan Finlay
  • Decentralizing the Wallet Experience with Snaps by Christian Montoya
  • MetaMask Snaps Launch with Hardened JavaScript Under the Hood by Agoric
• Podcasts and Interviews:
  • MetaMask Snaps Public Launch [12 mins]
  • What is MetaMask Snaps? Main Functions and Features Explained [53 mins]
  • Deep dive into MetaMask Snaps [57 mins]
• Talks and workshops:
  • Building a universal web3 interface (Sept 2023) Video and Slides
  • It's our wallet, let's build it together (Mar 2023) Video and Slides
  • Building the future with MetaMask Snaps (Oct 2022) Video and Slides

[andreolf]

Great resources list @Montoya!

[andreolf]

Also check out the wishlist to get some inspiration: #474

[qpraise]

Thanks for making this resources available

[livingrockrises]

I am getting an empty object from this 'wallet_getSnaps' even though snap is installed in metamask. I haven'y made changes in template-monorepo. can you please suggest how to fix this?

[ritave]

Hey, this is a regression bug in the latest Chrome release. It's going to be fixed in the next release.

In the meantime, the bug should have been fixed in the build prepared for Devcon 2022

[tomarsachin2271]

This fixed the earlier bug but running the same template repository and when clicking on connect button its giving this error

inpage.js:1 MetaMask - RPC Error: A handler for SnapController:getPermittedSnaps has not been registered

[ritave]

Let's continue this conversation in the Bogota thread #821 (reply in thread)

[acryptoverse]

great

[golobitch]

Is it possible to create POST request with fetch method? When I do a following POST method (example of CURL bellow) for an API I just get error "Failed to fetch".

curl --location --request POST 'https://s.altnet.rippletest.net:51234' \
--header 'Content-Type: text/plain' \
--data-raw '{
    "method": "account_info",
    "params": [
        {
            "account": "rDtBYnfg4ehGdYKg98GbxPK63w2rWzYUpT",
            "ledger_index": "current"
        }
    ]
}'

[Montoya]

Hi, I think the way to post with fetch is like this: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_json_data

But I will double check with the team

[rekmarks]

@golobitch can you please confirm that the way you are using fetch does not work in a web page, and if so, share your JS/TS code here?

Edit: To be clear, using POST should be possible.

[golobitch]

Hi guys,
sorry for late response.

And yes, I checked everything. I found out that issue was on server side. Server side did not have CORS implemented. Because of that, requests failed.

Thank you for pointing me in right direction! :)

[golobitch]

I have one question regarding persistence of data. For example, if snap generates crypto wallet, how can we regenerate this wallet if user for instance, deletes snap?

So, If I have method for generating seed and it take one parameter (entropy), how can I always get the same entropy for same user?
I know that there are methods callable only by snaps (eg snap_getBip32Entropy etc.), but this is not ok is it?

Because somebody can also create a Snap, that gets this entropy, and basically it has access to the same seed that was used for generating wallet.

Any idea how this can be done in secure way? One solution is probably to also have a backend system, that will return some salt via API?

[Montoya]

Key derivation is deterministic. If you use snap_getBip32Entropy to generate a key, and then the user deletes the snap, and then installs it again, and you generate again, you will get the same keypair.

This is and should be OK. If someone installs a Filecoin snap, they expect to be able to generate keypairs from their SRP. If they install another Filecoin snap, they should understand that it will potentially use the same keypairs. We may change how this works in the future, but for now that is the recommended way to generate keys.

I do not recommend using a server-side solution for this.

[golobitch]

Great. Thank you for help. Going back to coding :)

[golobitch]

Hi guys,
when I try to use coin type 144 (XRP), it is asking me the following:

Control your "Ripple" accounts and assets.

and

You are granting Ripple key access to the snap "MySnap". This is irrevocable and grants "MySnap" control of your Ripple accounts and assets. Make sure you trust "MySnap" before proceeding.

Ripple should be replaced with XRPL.
So basically

Control your "XRPL" accounts and assets

and

You are granting XRPL key access to the snap "MySnap". This is irrevocable and grants "MySnap" control of your XRPL accounts and assets. Make sure you trust "MySnap" before proceeding.

To help you understand why is this. Ripple is nothing else that just a company that has created XRP Ledger and of course XRP coin.

Should this be filled as issue here, or where is it that this string is coming from?

[Montoya]

Hi, the string comes from: https://github.com/satoshilabs/slips/blob/master/slip-0044.md

And thus the issue should be reported there.

[ghost]

• ETH Rio https://www.youtube.com/watch?v=XL3OduRT8js

Should have saved it on FileCoin, haha.

[Montoya]

Oh sheesh.... I might have a local copy, I hope I do

[Montoya]

Good news, I finally managed to find a local copy and upload it... almost 1 month later!

[CARLO-IITI]

I am not able to connect my MetaMask Flask to my local host. I have installed the flask but the button depicting Install MetaMask Flask is not changing to Connect

[Montoya]

Hi, you currently have both MetaMask and MetaMask Flask installed in the same browser profile and they will not work together. You should create a new browser profile for Flask and install it there, then it will work.

Also please remember to only use Flask with test accounts. Do not import your SRP that you use for your real funds into Flask!

[alekcangp]

Is it possible to add one more snap example to the resources?

[ritave]

Hello @alekcangp, that's not possible.

Examples are meant to allow newcomers to learn how to build their own snaps in a clear way, not to be used as a marketing channel.

Thank you for understanding.

[amritanshu19]

when i use yarn start, i get the following error:
Usage Error: Couldn't find a script named "start".

[amritanshu19]

thanks but I think updates have been made to snaps-monorepo but i'm using template-snap-monorepo, should i use snaps-monorepo and is there difference in building and running this than later one?

[Montoya]

Sorry, I understand this can be confusing. The CLI tool and the utils package that is used to build and run the project is in snaps-monorepo. The template files are in template-snap-monorepo.

[amritanshu19]

ok, unfortunately still not working :( , it triggers infinite loop if i use yarn start in root and if i use it in site the snap doesn't launch

[Montoya]

OK, going forward continue to do:

mm-snap build && mm-snap serve

In the snap folder and then do:

yarn start

in the site folder

[amritanshu19]

thank you, it is working

[kunxl-gg]

Was trying to build a test snap to store the data given by the user in an input field. I connected everything according to the docs. Am I doing something wrong. What does this error mean.

[kunxl-gg]

One more following up to that. I made some changes to the snap template, but it doesn't show on the wallet.

[ritave]

Hey @Kunal-GG thank you for reporting this, seems some kind of our assumption is broken and an internal error reaches you, I've created an issue (#1166) and someone from our team will try to debug it with you

[Montoya]

I made some changes to the snap template, but it doesn't show on the wallet.

Did you reconnect the snap before clicking the hello button? You have to reconnect & re-install the snap each time you change the source code.

[kunxl-gg]

I made some changes to the snap template, but it doesn't show on the wallet.

Did you reconnect the snap before clicking the hello button? You have to reconnect & re-install the snap each time you change the source code.

Yes

[FrederikBolding]

@Kunal-GG Can you still reproduce the initial error you posted about with the latest version of Flask? If so, could you provide us with steps on how to reproduce it?

[kunxl-gg]

Defined the clear function here but it doesn't clear the data stored in metamask-flask are we doing something wrong.

[Montoya]

Are you calling 'ClearAddress' correctly from your dapp? You can try putting a console.log before the return to see if the code is reached.

[2773kartik]

Methods apart from hello are not working in the switch case. What might be the possible issue here?

[Montoya]

Are you using break; or return; in each of the switch cases? A code sample would help :)

[Montoya]

The following tutorials have outdated code and will need to be updated:

• 30 minute guide: Build a simple address book snap
• 45 minute guide: Build a transaction insights snap with the 4byte API video and text guide
• 60 minute guide: Build an NFT vault contract, dapp and snap with Truffle

[atifnimran]

Hello

[einaralex]

Hey, I just cloned the 5-minute snap template, followed the guide and when I do visit localhost and click Connect, I get: An error happened: The method "wallet_enable" does not exist / is not available.

[ziad-saab]

@einaralex feel free to follow my gas estimate workshop from ETHDenver instead. it's much more up to date. As you know Flask and Snaps are moving really quickly, so even my ETHDenver tutorial might be slightly out of date, albeit much less:

https://github.com/ziad-saab/ethdenver-2023-metamask-snaps-workshop

[cryptoKevinL]

Is this the best place to start from to get used to using Snaps, the EthDenver version? The original docs are out of date for mm-snaps installation steps as well (for example yarn global add isn't support in Yarn v3 which is what says is required)

[Montoya]

That tutorial has been cleaned up and published here: https://docs.metamask.io/snaps/tutorials/transaction-insights/

There may still be some issues; I was not aware that yarn global add does not work in Yarn v3. You can also try:

npm install -g @metamask/snaps-cli

Or just clone the template and use that: https://docs.metamask.io/snaps/get-started/quickstart/

Whatever you do, make sure you are using the latest version of Flask :)

[cryptoKevinL]

is 10.29.0-flask.0 the latest? I installed the Chrome Extension a few month ago but going to download it again, do I need to remove it and re-install to get a newer version?

[Montoya]

Yes that is the latest, and it's the reference version for the v1 Snaps API that is shipping to the extension later this year.

[cryptoKevinL]

Hi @Montoya or @ziad-saab - Just wanted to check - is it ok to build a snap which is doing a combination of a cronjob, networkaccess, and notifications?

Basically we want to use fetch, to poll for new data from our API on the cronjob interval, and update the notification text for a notification to tell the user which accounts they have with new messages, in our dApp. We also aim to hold a signature value in the state of the Snap, to authenticate to the API.

It seems all of this is possible but didn't know if it broke any of the rules which would not allow it to be part of the first release?

[Montoya]

Yes, all of that is fine. You can combine those three APIs just as you described.

There is one limitation right now which is that you cannot do a signature request from a snap (because you have no way to connect to an Ethereum account), but for now you can follow this workaround: https://github.com/ziad-saab/siwe-metamask-snap#readme

[atifnimran]

****ok with I'm

[jeffgca]

@Montoya this list is out of date, are you actively updating it / is there a more recent doc?

( For example the canonical location for FIL Snap is now: https://github.com/filecoin-project/filsnap/ )

[Montoya]

Ah thank you for the reminder! I will fix it tonight

[therealharpaljadeja]

is this project open source?

[atifnimran]

Please help me

[Montoya]

Sorry, it's private

[ayush0x00]

Hey guys,
I was working on integrating aptos with metamask. I tried implementing other non-EVM chains like DogeCoin, which was successful. To integrate aptos I needed some Aptos network parameters as mentioned in the image (just replace dogecoin with Aptos). Any idea where I might find them? OR Any other workaround on how to integrate non-EVM chains with snaps?