Skip to main content

Advanced Example

The following example will show:

  1. How to set the correct color mode
  2. How to connect a dApp to a wallet
  3. How to re-use an existing connection after a page refreshed
  4. How to send an operation request
  5. How to "disconnect" a wallet
import {
ColorMode,
DAppClient,
Network,
NetworkType,
TezosOperationType,
} from "@airgap/beacon-sdk";
// Set the network (Mainnet is default)
const network: Network = { type: NetworkType.MAINNET };
// Create a new DAppClient instance
const dAppClient = new DAppClient({
name: "Beacon Docs",
preferredNetwork: network.type,
});
let myAddress: string | undefined;
// OPTIONAL: Set the color mode
// Read the current theme of the docs page from local storage. This depends on your dApp state
const theme = localStorage.getItem("theme");
await dAppClient.setColorMode(
theme === "dark" ? ColorMode.DARK : ColorMode.LIGHT
);
// This code should be called every time the page is loaded or refreshed to see if the user has already connected to a wallet.
const activeAccount = await dAppClient.getActiveAccount();
if (activeAccount) {
// If defined, the user is connected to a wallet.
// You can now do an operation request, sign request, or send another permission request to switch wallet
console.log("Already connected:", activeAccount.address);
// You probably want to show the address in your UI somewhere.
myAddress = activeAccount.address;
} else {
// The user is NOT connected to a wallet.
// The following permission request should not be called on pageload,
// it should be triggered when the user clicks on a "connect" button on your page.
// This will trigger the pairing alert UI where the user can select which wallet to pair.
const permissions = await dAppClient.requestPermissions({
network: network,
});
console.log("New connection: ", permissions.address);
myAddress = permissions.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
},
],
});
console.log("Operation Hash:", response.transactionHash);
// Let's generate a link to see the transaction on a block explorer
const explorerLink = await dAppClient.blockExplorer.getTransactionLink(
response.transactionHash,
network
);
console.log("Block Explorer:", explorerLink);
// TODO: Remove temporary workaround in sandbox
await new Promise((resolve) => setTimeout(resolve, 1000));
// If you want to "disconnect" a wallet, clear the active account.
// This means the next time the active account is checked or a permission request is triggered, it will be like it's the users first interaction.
await dAppClient.clearActiveAccount();
https://example.com