Extending MetaMask: a Snap for Filecoin
Authored by mak muftic
Bringing Filecoin and Ethereum closer together with the first Snap on MetaMask Flask
As web3 continues to grow and the interoperability between ecosystems expands, it was only a matter of time for an integration between the world's foremost incentivized storage layer - Filecoin - and Ethereum. In that vein, ChainSafe is proud to have released FilSnap on MetaMask Flask to enable Filecoin support within MetaMask as an experimental feature.
Oh snap! What's a Snap?
First, we need to understand what MetaMask Flask is. Flask is MetaMask's recently announced canary distribution of their well-known crypto extension. It's an experimental version of MetaMask without guardrails, i.e. a testing ground for developers.
⚠️ Disclaimer: MetaMask Flask is only for testing purposes. All features are new and experimental, and you are exposing yourself to possible exploits by importing your real private keys into Flask.
Diving further, we get to Snaps, the first feature released on Flask. Snaps allow developers to expand the functionality of MetaMask at runtime without any involvement from the core MetaMask team. This creates extensibility and gives developers the flexibility to add their own features and release them to the public.
Snaps are essentially plugins for MetaMask - that is, custom programs that can run in isolated environments and can be used to customize the wallet experience in a tailored way. They can add new APIs to MetaMask, new features, modify existing functionalities using internal MetaMask APIs, and most powerfully - manage user keys for different protocols.
To learn more about using Snaps, check out the documentation here.
All told, there are still some technical limitations to the current iteration of Snaps, including the inability to modify the MetaMask UI as well as limited API between Snap and MetaMask. These things are being worked on, but nevertheless, the current release of Snaps gave ChainSafe an opportunity to flex our domain expertise in all things MetaMask, Ethereum, and Filecoin.
What is FilSnap?
Simply put, FilSnap allows dApp developers to build web3 applications that integrate Filecoin support through the MetaMask extension🤯 Although it's not yet available, the goal is for the Snap to eventually expand Metamask UI with the relevant information and interactions for the Filecoin network.
In its current state, the dApp itself must display the frontend for interacting with FilSnap. We created our demo dApp to showcase different functionalities. Here, users can view their Filecoin accounts and balances, send FIL transactions, and create cryptographically signed messages with their Filecoin keys. Here's our demo of what this could look like.
And here's an example illustrating how a dApp might use FilSnap more generally.
To zoom in on some of the details, how exactly does FilSnap create your Filecoin address? It uses entropy provided by Metamask through Snap exclusive RPC method snap_getBip44Entropy_*. From this entropy, FilSnap derives the final address. You can check details on how this is implemented here.
Snap also has the capability of persisting state objects, using the Snap exclusive RPC method snap_manageState. You can save an arbitrary object in the state. FilSnap uses this to persist the snap configuration (derivation path, RPC endpoint, etc.) and details on executed transactions.
Developing MetaMask Snaps brings its own set of challenges
The first issue is that Snaps are being executed in a virtual environment called Secure EcmaScript (SES). In practice, this means that developers can't use some standard JavaScript practices, and also, all libraries you intend to use need to be compatible with the SES environment.
We hit a few roadblocks with SES during FilSnap development but always found a solution by writing additional code ourselves or finding an alternative library. SES makes you more aware of the code overhead you are importing in your standard javascript project.
All Snaps are currently being distributed as npm packages, which you can find here. This npm URL is also presented as the origin of the snap on installation prompt when installing FilSnap.
Ultimately, we wanted dApp developers to add FilSnap support easily, so we created an additional package - Filsnap adapter. If you are a TypeScript maximalist (like us!), you can also find appropriate types for the adapter here.
These two packages enabled us to expose typed API toward FilSnap and pack boilerplate code for calling specific FilSnap RPC methods. It also exposes the snap installation process as a single method. You can check more details on exposed API here.
Below you can see how to send a basic FIL transaction using the FILsnap API.
const gasEstimate = await api.calculateGasForMessage({
to: toAddress,
value: amountAttoFIL,
});
const msg: MessageRequest = {
to: toAddress,
value: amountAttoFIL,
gaslimit: gasEstimate.gaslimit,
gasfeecap: gasEstimate.gasfeecap,
gaspremium: gasEstimate.gaspremium,
}
const response = await api.signMessage(msg);
const messageCid = await api.sendMessage(response.signedMessage);
FilSnap Demo
Interested to learn more? Get involved!
Check our demo dApp, install FilSnap, and send your first Filecoin transaction using Metamask. If you find a bug or have a feature you would like to see, check our repo and raise an issue.
Docs: https://github.com/chainsafe/filsnap/wiki
About ChainSafe
ChainSafe is a leading blockchain research and development firm specializing in infrastructure solutions for the decentralized web. Alongside client implementations for Ethereum, Polkadot, Filecoin, and Mina, we're building a portfolio of web3 products - Files, Storage, web3.unity, and more. As part of our mission to build innovative products for users and better tooling for developers, ChainSafe embodies an open source and community-oriented ethos. To learn more, click here.
