@metamask/providers

What is @metamask/providers?

@metamask/providers is a package that provides a set of tools and utilities to interact with the MetaMask browser extension. It allows developers to integrate Ethereum-based applications with MetaMask, enabling functionalities such as connecting to the user's wallet, sending transactions, and interacting with smart contracts.

What are @metamask/providers's main functionalities?

Connecting to MetaMask

This feature allows you to connect to the user's MetaMask wallet and request access to their Ethereum accounts.

const { ethereum } = window;
if (ethereum) {
  ethereum.request({ method: 'eth_requestAccounts' })
    .then(accounts => console.log(accounts))
    .catch(err => console.error(err));
} else {
  console.log('MetaMask is not installed');
}

Sending Transactions

This feature allows you to send transactions from the user's MetaMask wallet to another Ethereum address.

const transactionParameters = {
  to: '0xRecipientAddress',
  from: ethereum.selectedAddress,
  value: '0x29a2241af62c0000', // 0.1 ETH
  gas: '0x5208', // 21000 GWEI
};
ethereum.request({
  method: 'eth_sendTransaction',
  params: [transactionParameters],
})
.then(txHash => console.log(txHash))
.catch(err => console.error(err));

Interacting with Smart Contracts

This feature allows you to interact with smart contracts deployed on the Ethereum blockchain using the user's MetaMask wallet.

const contractAddress = '0xYourContractAddress';
const abi = [
  // ABI array
];
const contract = new ethers.Contract(contractAddress, abi, ethereum);
contract.someMethod()
  .then(result => console.log(result))
  .catch(err => console.error(err));

Other packages similar to @metamask/providers

web3

web3 is a popular library for interacting with the Ethereum blockchain. It provides a comprehensive set of tools for sending transactions, interacting with smart contracts, and more. Compared to @metamask/providers, web3 is more general-purpose and can be used with various Ethereum providers, not just MetaMask.

ethers

ethers is a lightweight library for interacting with the Ethereum blockchain. It offers similar functionalities to @metamask/providers, such as sending transactions and interacting with smart contracts. ethers is known for its simplicity and ease of use, and it can be used with different Ethereum providers, including MetaMask.

web3modal

web3modal is a library that provides a simple way to connect to various Ethereum wallets, including MetaMask. It offers a user-friendly interface for selecting and connecting to different wallet providers. Compared to @metamask/providers, web3modal focuses on providing a seamless wallet connection experience.

README

MetaMask Providers

The Ethereum provider object injected by MetaMask into various environments. Contains a lot of implementation details specific to MetaMask, and is probably not suitable for out-of-the-box use with other wallets.

The BaseProvider implements the Ethereum JavaScript provider specification (EIP-1193), but must be modified by a sub-class in order to function. StreamProvider is such a sub-class, which synchronizes its state and marshals JSON-RPC messages via a duplex stream. MetamaskInpageProvider further extends StreamProvider to support legacy provider interfaces in addition to EIP-1193, and is used to instantiate the object injected by MetaMask into web pages as window.ethereum.

Usage

import { initializeProvider } from '@metamask/providers';

// Create a stream to a remote provider:
const metamaskStream = new LocalMessageDuplexStream({
  name: 'inpage',
  target: 'contentscript',
});

// this will initialize the provider and set it as window.ethereum
initializeProvider({
  connectionStream: metamaskStream,
});

const { ethereum } = window;

Types

Types are exposed at index.d.ts. They require Node.js EventEmitter and Duplex stream types, which you can grab from e.g. @types/node.

Do Not Modify the Provider

The Provider object should not be mutated by consumers under any circumstances. The maintainers of this package will neither fix nor take responsbility for bugs caused by third parties mutating the provider object.

Contributing

Setup

• Install Node.js version 16
  • If you are using nvm (recommended) running nvm use will automatically choose the right node version for you.
• Install Yarn v1
• Run yarn setup to install dependencies and run any requried post-install scripts
  • Warning: Do not use the yarn / yarn install command directly. Use yarn setup instead. The normal install command will skip required post-install scripts, leaving your development environment in an invalid state.

Testing and Linting

Run yarn test to run the tests once. To run tests on file changes, run yarn test:watch.

Run yarn lint to run the linter, or run yarn lint:fix to run the linter and fix any automatically fixable issues.

Release & Publishing

The project follows the same release process as the other libraries in the MetaMask organization:

1. Create a release branch
   • For a typical release, this would be based on main
   • To update an older maintained major version, base the release branch on the major version branch (e.g. 1.x)
2. Update the changelog
3. Update version in package.json file (e.g. yarn version --minor --no-git-tag-version)
4. Create a pull request targeting the base branch (e.g. main or 1.x)
5. Code review and QA
6. Once approved, the PR is squashed & merged
7. The commit on the base branch is tagged
8. The tag can be published as needed

Changelog

[18.2.0]

Added

• Add new export for initializeInpageProvider with legacy build system support (#391)
  • Previously this module could be imported from /dist/initializeInpageProvider, but this only worked with build systems that support the exports field (e.g. browserify).
  • This new initializeInpageProvider export has a JavaScript redirect for older build systems, so it should work correctly in all cases.