Metamask: Listening for metamask events with ethers in angular app

Listening for Metamask Events with Ethers in Angular App

As you build your Angular application that connects to various blockchain accounts through MetaMask, it’s essential to stay informed about the events that occur within the context of your Ethereum-based services. In this article, we’ll explore how to set up listening for metamask events using ethers and angular.

What are Metamask Events?

Metamask events are notifications that can be sent or received from the MetaMask platform, indicating various state changes on your Ethereum account. These events can include things like:

• New accounts created

• Wallet balances updated

• Transaction events (e.g., receipt of a transaction)

• Account ownership changes

Setting up Ethers Provider and Signer

To listen for metamask events in your Angular app, you’ll first need to obtain an ethers provider instance. 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 {

  myProvider: ethers.providers.Provider;


  constructor() { }


  ngOnInit(): void {

    this.myProvider = new ethers.providers.Web3Provider(window.ethereum);

  }

}

In the above code, we’re creating a Web3 provider instance using the ethers package. You can obtain an instance of Web3Provider by logging in to your MetaMask account and then accessing the provider’s instance.

Listening for Events

To listen for metamask events, you’ll 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’re creating a subscription that listens for 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 for events in your Angular app, 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 above code, we’ve created a MetamaskService class that manages subscriptions and listens for events. We can use instances of this service to connect to your MetaMask account.

Putting it all together

To listen for metamask events in your Angular app, you’ll need to:

• Create an ethers provider instance.

• Subscribe to specific event types using the subscribe method.

• Use a service to manage subscriptions and handle event listeners.

Here’s 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 {

myProvider: ethers.providers.Web3Provider;

subscription: Subscription;

constructor() { }

ngOnInit(): void {

this.myProvider = new ethers.providers.Web3Provider(window.