Listening to Metamask Events with Ethers in Your Angular Application
As you build your Angular application that connects to multiple blockchain accounts through MetaMask, it’s essential to stay informed about events occurring in the context of your Ethereum-based services. In this article, we’ll explore how to set up Metamask event listening using Ethers and Angular.
What are Metamask Events?
MetaMask events are notifications that can be sent to or received from the MetaMask platform, indicating various state changes in your Ethereum account. These events can include things like:
- New accounts created
- Updated wallet balances
- Transaction events (e.g., receiving a transaction)
- Account ownership changes
Setting up the Ethers Provider and Signer
To listen to Metamask events in your Angular application, you’ll first need to obtain an instance of the Ethers provider. This will allow you to interact with the MetaMask API and send and receive events.
import { Component , OnInit } from '@angular/core';
import * as ethers from 'ethers';
@Component({
selector: 'app-example',
template: '
Example component.
'})
export class ExampleComponent implements OnInit { { export class ExampleComponent implements OnInit { .
myProviders: ethers.providers.Providers;
constructor() { }
ngOnInit(): void {
this.myProvider = new ethers.providers.Web3Provider(window.ethereum);
} }
} }
In the above code, we are creating an instance of the Web3 provider using the ethers package. You can get an instance of the Web3Provider by logging into your MetaMask account and accessing the provider instance.
Listening to Events
To listen to metamask events, you will need to subscribe to specific event types using the Ethers Subscription API.
import { Subscription } from ' rxjs ' ;
const subscription: Subscription = this.myProvider.eventSubscriptions.subscribe((event) => {
console.log(Event received: ${event.name});
});
In the above code, we are creating a subscription that listens to events. We can specify event types by passing them as an argument to the subscribe method.
Angular Service
To make it easier to manage subscriptions and listen to events in your Angular application, you can create a service.
import { Injectable } from '@angular/core';
import { EventSubscription } from './event-subscription';
@Injectable({
providedIn: 'root'
})
export class MetamaskService { .
private subscription : Subscription ;
constructor() { }
connectAccount ( account : string ) : void { {
this.subscription = this.myProvider.eventSubscriptions.subscribe((event) => {
console.log(Event received: ${event.name});
});
// Disconnect when account is closed
window.ethereum.onDisconnect(() => { { .
this.subscription.unsubscribe();
});
} }
} }
In the code above, we created a MetamaskService class that manages subscriptions and listens for events. We may use instances of this service to connect to your MetaMask account.
Putting it all together
To listen to metamask events in your Angular application, you will need to:
- Create an instance of the ethers provider.
- Subscribe to specific event types using the
subscribemethod.
- Use a service to manage subscriptions and handle event listeners.
Here is an updated example that demonstrates how to use these concepts:
“`typescript
import { Component , OnInit } from ‘@angular/core’;
import * as ethers from ‘ethers’;
@Component({
selector: ‘app-example’,
template: ‘
Example component.
‘
})
export class ExampleComponent implements OnInit { { export class ExampleComponent implements OnInit { .
myProviders: ethers.providers.Web3Providers;
subscription: Subscription;
constructor() { }
ngOnInit(): void {
this . myProvider = new ethers . providers . Web3Provider ( window .