Advanced Example

The following example will show:

How to set the correct color mode
How to connect a dApp to a wallet
How to re-use an existing connection after a page refreshed
How to send an operation request
How to "disconnect" a wallet

Beacon
Taquito

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

import { TezosToolkit } from "@taquito/taquito";
import { BeaconWallet } from "@taquito/beacon-wallet";
import {
  ColorMode,
  Network,
  NetworkType,
  TezosOperationType,
} from "@airgap/beacon-sdk";

// Set the network (Mainnet is default)
const network: Network = { type: NetworkType.MAINNET };

const Tezos = new TezosToolkit("https://mainnet-tezos.giganode.io");
const wallet = new BeaconWallet({
  name: "Beacon Docs",
  preferredNetwork: network.type,
}); // Takes the same arguments as the DAppClient constructor

Tezos.setWalletProvider(wallet);

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 wallet.client.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 wallet.client.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.
  wallet.requestPermissions({
    network: network,
  });
  myAddress = await wallet.getPKH();
  console.log("New connection: ", myAddress);
}

// 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 hash = await wallet.sendOperations([
  {
    kind: TezosOperationType.TRANSACTION,
    destination: myAddress, // Send to ourselves
    amount: "1", // Amount in mutez, the smallest unit in Tezos
  },
]);

console.log("Operation Hash:", hash);

// Let's generate a link to see the transaction on a block explorer
const explorerLink = await wallet.client.blockExplorer.getTransactionLink(
  hash,
  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 wallet.clearActiveAccount();

https://example.com