Migration Guide: Updating to Event Subscription

Mandatory Subscription

Since version 4.2.0, it is mandatory to subscribe to ACTIVE_ACCOUNT_SET.

This guide outlines the steps to migrate from using dAppClient.getActiveAccount() to the new event subscription method with BeaconEvent.ACTIVE_ACCOUNT_SET for handling active account changes.

Why Migrate?

The shift to using the event subscription method is crucial for several reasons:

• Real-Time Update: Subscribing to BeaconEvent.ACTIVE_ACCOUNT_SET enables your dApp to detect and respond to account changes in real-time, ensuring the application always reflects the current active account.

• Improved Reliability: This method prevents scenarios where your dApp might operate with outdated account information, enhancing the overall reliability and user experience.

Step-by-Step Migration

1. Update requestPermissions Usage

requestPermissions() still returns an active account. However, be aware that it might not capture subsequent account changes made in the wallet.

Beacon

// Old usage
const permissions = await dAppClient.requestPermissions();

Taquito

// Old usage
const permissions = await wallet.client.requestPermissions();

2. Set Up the Event Subscription

Next, implement an event listener for BeaconEvent.ACTIVE_ACCOUNT_SET. This event is triggered whenever there is a change in the active account, allowing your dApp to stay updated.

Beacon

// New method
dAppClient.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (account) => {
  // An active account has been set, update the dApp UI
  console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
});

Taquito

// New method
wallet.client.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (account) => {
  // An active account has been set, update the dApp UI
  console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
});

3. Handle the Active Account

Adapt your dApp's logic to handle updates from both requestPermissions and the event subscription. This ensures your dApp remains synchronized with the current active account.

The end result should look something like this:

Beacon

Example

import { BeaconEvent, DAppClient } from "@airgap/beacon-sdk";

const dAppClient = new DAppClient({ name: "Beacon Docs" });

// Listen for all the active account changes
dAppClient.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (account) => {
  // An active account has been set, update the dApp UI
  console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
});

const permissions = await dAppClient.requestPermissions();

Loading...

Taquito

Example

import { TezosToolkit } from "@taquito/taquito";
import { BeaconWallet } from "@taquito/beacon-wallet";

const Tezos = new TezosToolkit("https://mainnet.api.tez.ie");
const wallet = new BeaconWallet({ name: "Beacon Docs Taquito" });

Tezos.setWalletProvider(wallet);

// Listen for all the active account changes
wallet.client.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (account) => {
  // An active account has been set, update the dApp UI
  console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
});

const permissions = await wallet.client.requestPermissions();

Loading...

Advanced Example

If you need to add some custom logic inside the handler, check out our dedicated advanced example.