• Home
  • Timeline
  • Me

Getting Started with the MetaMask Web3 API

Write Your Own Web3 Enabled Website!

Table Of Content

  • The Decentralized In dApp
  • MetaMask: The Web3 API
  • MetaMask Authentication
  • Interacting With The Blockchain
  • Storage, Protocols And The MetaMask API
  • Conclusion

The Decentralized In dApp

As the crypto winter continues to take hold and builders are focused on value rather than hype, I thought it would be a teachable moment to take a step back and discuss what it means to build a decentralized application (dApp).

Most applications in traditional web development have the same needs: authenticating users, storing data, and displaying information. This will lead you to use a database, a server, and a frontend framework. You will typically make use of cloud providers to fulfill most of these needs. It is a great way save time and money, but it introduces some privacy concerns along the way, as users don't really have a say in how third parties use their data.

But all is not lost! The Web3 ecosystem is gradually maturing. You can now build a completely decentralized application so that your users will have full control over their data and can interact with the application without having to trust a third party—a huge step forward in terms of privacy and security.

MetaMask: The Web3 API

With this in mind, I want to explore today where the MetaMask API fits into this picture. MetaMask is the most popular wallet for Ethereum, and Luckily for us, it also provides us with an API powerful enough to build a fully decentralized application. Let's take a look at how it works and how we can put it to use.

MetaMask is available as a browser extension, and this is most users' first interaction with Web3. When users download and activate the MetaMask extension, it will inject a global object called window.ethereum into the web page. It provides a set of methods to interact with the user's wallet and the Ethereum blockchain.

MetaMask Authentication

The MetaMask API contains a set of methods to authenticate users and gather the publicly available blockchain information associated with their identity. This information includes:

  • The user's address
  • The network they are connected to
  • The user's wallet balance.

Here is an overview of the methods available:

  • window.ethereum.request({ method: 'eth_requestAccounts' }) - This method will prompt the user to connect their wallet and return the list of addresses associated with it. It returns a promise that resolves to an array of addresses.
  • window.ethereum.request({ method: 'eth_getBalance', params: [address, 'latest'] }) - This method will return the balance of the address passed as a parameter. It returns a promise that resolves to a hex string representing the balance.
  • window.ethereum.request({ method: 'chainId' }) - This method will return the ID of the network the user is connected to. It returns a promise that resolves to a hex string representing the network ID.
  • window.ethereum.request({ method: personal_sign, params: [message, address] }) - This method will prompt the user to sign a message. This is typically done to build trust with the user that a specific action they are taking is in their hands. It returns a promise that resolves to a hex string representing the signature.

As we can see from the above, these are a powerful set of methods but are also pretty low-level. It means we will have to build a lot of the logic ourselves. This is where libraries like Wagmi and Wen-Tools come in. They provide a higher-level API that helps us build our authentication faster.

Soon MetaMask will be releasing an SDK with similar features! Stay tuned as this will be a great way to build Dapps!

Interacting With The Blockchain

The MetaMask API also provides a set of methods to interact with the Ethereum blockchain. We can read and write data to the blockchain, which works by proposing a passthrough to the Ethereum JSON-RPC API. The JSON-RPC API is a standard that allows us to interact with the Ethereum blockchain, and all Ethereum clients and wallets use it.

You can see the complete list of methods available here.

These methods are also low-level, but they allow you to interact with Smart Contracts without having to build a full Ethereum client. Typically, this is not something you would want to do as it is a lot of work to encode transactions. You would be in a better position by using a library like ethers.js or web3.js.

Storage, Protocols And The MetaMask API

While the MetaMask API is fully geared to interact with the Ethereum blockchain, it doesn't provide a way to interact with popular decentralized storage services like IPFS. It is also incapable of transactions with non-Ethereum-compatible blockchains. For this, you can instead use one of MetaMask's more innovative features called Snaps, which allows you to build plugins for the MetaMask extension. This means that you can build a plugin that will allow you to interact with IPFS and other blockchains.

Snaps are still in beta but are going to be stable soon! Stay tuned for more information!

Conclusion

The MetaMask API is a powerful tool that allows you to build fully decentralized applications. It sits lower in the abstraction stack than libraries like wagmi and wen-tools, but it is the foundational layer behind those libraries. It is also the foundation of the MetaMask SDK slated to be released soon.

I hope you enjoyed this article. If you have any questions or want to discuss the web3 ecosystem, feel free to shoot me an email, g.bibeaulaviolette@gmail.com!abstraction stack than libraries like wagmi and wen-tools, but it is the foundational layer behind those libraries. It is also the foundation of the MetaMask SDK which is going to be released soon.

I hope you enjoyed this article. If you have any questions or want to discuss the web3 ecosystem, feel free to shoot me an email, g.bibeaulaviolette@gmail.com!