Skip to main content

First dApp

Installation#

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

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.

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.

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.

Operation Request#

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