First dApp

Installation#

Let's get started with your first dApp. You have to install the necessary dependencies.

Beacon
Taquito

npm install --save @airgap/beacon-sdk

Setup#

You can then import the beacon-sdk package and create a DAppClient instance. This instance will be used throughout your dApp to interact with the users wallet. Once created, you can send a permission request to prompt the user to connect to his wallet.

Beacon
Taquito

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

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

try {
  console.log("Requesting permissions...");
  const permissions = await dAppClient.requestPermissions();
  console.log("Got permissions:", permissions.address);
} catch (error) {
  console.log("Got error:", error);
}

https://example.com

After the connection is successfully established and the user has shared his account, the result will be returned.

info

The DAppClient instance should be a singleton. Avoid creating multiple copies of it, which could lead to unexpected behaviour.

Check#

Now let's introduce a check to see if the SDK is already connected to the dApp. This code should be run after the page is loaded to get the users address and show it in your UI. If the following code returns an address, there is no need to send another permission request, unless you want to pair a different account.

Beacon
Taquito

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

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

// The following code should always be run during pageload if you want to show if the user is connected.
const activeAccount = await dAppClient.getActiveAccount();
if (activeAccount) {
  // User already has account connected, everything is ready
  // You can now do an operation request, sign request, or send another permission request to switch wallet
  console.log("Already connected:", activeAccount.address);
  return activeAccount;
} else {
  // The user is not connected. A button should be displayed where the user can connect to his wallet.
  console.log("Not connected!");
}

https://example.com

The beacon-sdk is now fully set up and ready to receive operation requests.

If you want to add reactivity to your DApp when an active account changes, then you have to subscribe to BeaconEvent.ACTIVE_ACCOUNT_SET.

Beacon
Taquito

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, async (account) => {
  // An active account has been set, update the dApp UI
  console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
});

// Check if we are connected. If not, do a permission request first.
const activeAccount = await dAppClient.getActiveAccount();
if (!activeAccount) {
  await dAppClient.requestPermissions();
}

https://example.com

Operation Request#

Beacon
Taquito

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

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

let myAddress: string | undefined;

// Check if we are connected. If not, do a permission request first.
const activeAccount = await dAppClient.getActiveAccount();
if (!activeAccount) {
  const permissions = await dAppClient.requestPermissions();
  console.log("New connection:", permissions.address);
  myAddress = permissions.address;
} else {
  myAddress = activeAccount.address;
}

// At this point we are connected to an account.
// Let's send a simple transaction to the wallet that sends 1 mutez to ourselves.
const response = await dAppClient.requestOperation({
  operationDetails: [
    {
      kind: TezosOperationType.TRANSACTION,
      destination: myAddress, // Send to ourselves
      amount: "1", // Amount in mutez, the smallest unit in Tezos
    },
  ],
});

https://example.com

Alternatively with BeaconEvent.ACTIVE_ACCOUNT_SET

Beacon
Taquito

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

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

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

  // At this point we are connected to an account.
  // Let's send a simple transaction to the wallet that sends 1 mutez to ourselves.
  const response = await dAppClient.requestOperation({
    operationDetails: [
      {
        kind: TezosOperationType.TRANSACTION,
        destination: account.address, // Send to ourselves
        amount: "1", // Amount in mutez, the smallest unit in Tezos
      },
    ],
  });

  console.log(response);
});

// Check if we are connected. If not, do a permission request first.
const activeAccount = await dAppClient.getActiveAccount();
if (!activeAccount) {
  await dAppClient.requestPermissions();
}

https://example.com

User Interaction Best Practice#

Take a look a the best practice for recommendations on Beacon user interface components.