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

Beacon

Live Editor

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();

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();

Loading...

Taquito

Live Editor

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();

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();

Loading...