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
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 instanceconst 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 stateconst 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 walletconsole.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 ourselvesamount: "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 explorerconst explorerLink = await dAppClient.blockExplorer.getTransactionLink(response.transactionHash,network,);console.log("Block Explorer:", explorerLink);// TODO: Remove temporary workaround in sandboxawait 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...
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.MAINNETconst 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 constructorTezos.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 stateconst 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 walletconsole.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 ourselvesamount: "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 explorerconst explorerLink = await wallet.client.blockExplorer.getTransactionLink(hash,network,);console.log("Block Explorer:", explorerLink);// TODO: Remove temporary workaround in sandboxawait 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...