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.

Live Editor
Loading...

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.

Live Editor
Loading...
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.

Live Editor
Loading...

Operation Request

Live Editor
Loading...

Alternatively with BeaconEvent.ACTIVE_ACCOUNT_SET

Live Editor
Loading...

User Interaction Best Practice

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