Page Not Found
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 00000000..e69de29b diff --git a/404.html b/404.html new file mode 100644 index 00000000..f6c33cbc --- /dev/null +++ b/404.html @@ -0,0 +1,13 @@ + + +
+ + +We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
The Custom Block Explorer
feature in Beacon SDK allows developers to integrate a block explorer of their choice into their dApp.
+This is particularly useful for applications that require specific functionalities or presentation styles offered by certain block explorers, or for those who wish to provide a more seamless user experience by integrating a block explorer directly into the app interface.
import {
BlockExplorer,
DAppClient,
NetworkType,
Network,
} from "@airgap/beacon-sdk";
class TzStatsBlockExplorer extends BlockExplorer {
constructor(
public readonly rpcUrls: { [key in NetworkType]: string } = {
[NetworkType.MAINNET]: "https://tzstats.com/",
[NetworkType.GHOSTNET]: "https://ghost.tzstats.com/",
[NetworkType.WEEKLYNET]: "https://ghost.tzstats.com/",
[NetworkType.DAILYNET]: "https://daily.tzstats.com/",
[NetworkType.DELPHINET]: "https://delphi.tzstats.com/",
[NetworkType.EDONET]: "https://edo.tzstats.com/",
[NetworkType.FLORENCENET]: "https://florence.tzstats.com/",
[NetworkType.GRANADANET]: "https://granada.tzstats.com/",
[NetworkType.HANGZHOUNET]: "https://hangzhounet.tzstats.com/",
[NetworkType.ITHACANET]: "https://ithaca.tzstats.com/",
[NetworkType.JAKARTANET]: "https://jakara.tzstats.com/",
[NetworkType.KATHMANDUNET]: "https://kathmandu.tzstats.com/",
[NetworkType.LIMANET]: "https://lima.tzstats.com/",
[NetworkType.MUMBAINET]: "https://mumbai.tzstats.com/",
[NetworkType.NAIROBINET]: "https://nairobi.tzstats.com/",
[NetworkType.OXFORDNET]: "https://oxford.tzstats.com/",
[NetworkType.CUSTOM]: "https://custom.tzstats.com/",
},
) {
super(rpcUrls);
}
public async getAddressLink(
address: string,
network: Network,
): Promise<string> {
const blockExplorer = await this.getLinkForNetwork(network);
return `${blockExplorer}/${address}`;
}
public async getTransactionLink(
transactionId: string,
network: Network,
): Promise<string> {
const blockExplorer = await this.getLinkForNetwork(network);
return `${blockExplorer}/${transactionId}`;
}
}
const dAppClient = new DAppClient({
name: "Beacon Docs",
blockExplorer: new TzStatsBlockExplorer(),
});
import { BlockExplorer, NetworkType, Network } from "@airgap/beacon-sdk";
import { TezosToolkit } from "@taquito/taquito";
import { BeaconWallet } from "@taquito/beacon-wallet";
class TzStatsBlockExplorer extends BlockExplorer {
constructor(
public readonly rpcUrls: { [key in NetworkType]: string } = {
[NetworkType.MAINNET]: "https://tzstats.com/",
[NetworkType.GHOSTNET]: "https://ghost.tzstats.com/",
[NetworkType.WEEKLYNET]: "https://ghost.tzstats.com/"",
[NetworkType.DAILYNET]: "https://daily.tzstats.com/",
[NetworkType.DELPHINET]: "https://delphi.tzstats.com/",
[NetworkType.EDONET]: "https://edo.tzstats.com/",
[NetworkType.FLORENCENET]: "https://florence.tzstats.com/",
[NetworkType.GRANADANET]: "https://granada.tzstats.com/",
[NetworkType.HANGZHOUNET]: "https://hangzhounet.tzstats.com/",
[NetworkType.ITHACANET]: "https://ithaca.tzstats.com/",
[NetworkType.JAKARTANET]: "https://jakara.tzstats.com/",
[NetworkType.KATHMANDUNET]: "https://kathmandu.tzstats.com/",
[NetworkType.LIMANET]: "https://lima.tzstats.com/",
[NetworkType.MUMBAINET]: "https://mumbai.tzstats.com/",
[NetworkType.NAIROBINET]: "https://nairobi.tzstats.com/",
[NetworkType.OXFORDNET]: "https://oxford.tzstats.com/",
[NetworkType.CUSTOM]: "https://custom.tzstats.com/",
},
) {
super(rpcUrls);
}
public async getAddressLink(
address: string,
network: Network,
): Promise<string> {
const blockExplorer = await this.getLinkForNetwork(network);
return `${blockExplorer}/${address}`;
}
public async getTransactionLink(
transactionId: string,
network: Network,
): Promise<string> {
const blockExplorer = await this.getLinkForNetwork(network);
return `${blockExplorer}/${transactionId}`;
}
}
const Tezos = new TezosToolkit("https://mainnet.api.tez.ie");
const wallet = new BeaconWallet({
name: "Beacon Docs Taquito",
blockExplorer: new TzStatsBlockExplorer(),
});
Tezos.setWalletProvider(wallet);
This wallet is intended for developers to debug their dApps.
A common issue with dApps is that users report that a certain functionality doesn't work for them. It is often cumbersome to reproduce this in a development environment because the dev team doesn't have access to the account. The Debug Wallet can help debug those cases.
+ +With the "watch-only" feature in the Debug Wallet it is possible to connect to any dApp using any tz account. The dApp can then be viewed from the eyes of that user and operations can be debugged with ease.
+It is possible to pair any Beacon-compatible wallet to the Debug Wallet. If you do that, the Debug Wallet acts as a "relay" between the dApp and the actual wallet. Requests and responses will be relayed, but the details can be inspected.
You can configure the dApp or Wallet to connect to a different beacon node. +Make sure the servers you use are whitelisted in the beacon network and federation is working correctly.
+import { DAppClient, Regions } from "@airgap/beacon-sdk"; + +const dAppClient = new DAppClient({ + name: "Beacon Docs", + matrixNodes: { + [Regions.EUROPE_WEST]: ["beacon-node-0.papers.tech:8448"], + }, +}); + +try { + console.log("Requesting permissions..."); + const permissions = await dAppClient.requestPermissions(); + console.log("Got permissions:", permissions.address); +} catch (error) { + console.error("Got error:", error); +} +
import { TezosToolkit } from "@taquito/taquito"; +import { BeaconWallet } from "@taquito/beacon-wallet"; +import { Regions } from "@airgap/beacon-sdk"; + +const Tezos = new TezosToolkit("https://mainnet.api.tez.ie"); +const wallet = new BeaconWallet({ + name: "Beacon Docs Taquito", + matrixNodes: { + [Regions.EUROPE_WEST]: ["beacon-node-0.papers.tech:8448"], + }, +}); + +Tezos.setWalletProvider(wallet); + +try { + const permissions = await wallet.client.requestPermissions(); + console.log("Got permissions:", permissions.address); +} catch (error) { + console.error("Got error:", error); +} +
The beacon-sdk deterministically chooses one of the nodes in the array. Changing the array of nodes will most likely lead to users losing their connection.
Thresholds could be abused to sign contract calls. Wallets must reject request with parameters.
Thresholds could be abused to sign contract calls. Wallets must reject request with parameters.
Push Notifications are in beta. There is no wallet that supports it at the moment.
The following page lists all the different options in Beacon to retrieve and display information about the SDK.
+import { BEACON_VERSION, SDK_VERSION } from "@airgap/beacon-sdk"; + +console.log("SDK Version", SDK_VERSION); +console.log("Beacon Version", BEACON_VERSION); +
import { BEACON_VERSION, SDK_VERSION } from "@airgap/beacon-sdk"; + +console.log("SDK Version", SDK_VERSION); +console.log("Beacon Version", BEACON_VERSION); +
import { DAppClient } from "@airgap/beacon-sdk"; + +const dAppClient = new DAppClient({ name: "Beacon Docs" }); + +console.log(`Connected Accounts:`, await dAppClient.getAccounts()); +console.log(`Connected Peers:`, await dAppClient.getPeers()); +
import { TezosToolkit } from "@taquito/taquito"; +import { BeaconWallet } from "@taquito/beacon-wallet"; + +const Tezos = new TezosToolkit("https://mainnet.api.tez.ie"); +const wallet = new BeaconWallet({ name: "Beacon Docs Taquito" }); + +Tezos.setWalletProvider(wallet); + +console.log(`Connected Accounts:`, await wallet.client.getAccounts()); +console.log(`Connected Peers:`, await wallet.client.getPeers()); +
import { DAppClient, NetworkType } from "@airgap/beacon-sdk"; + +const dAppClient = new DAppClient({ name: "Beacon Docs" }); + +const addressLink = await dAppClient.blockExplorer.getAddressLink( + "tz1MJx9vhaNRSimcuXPK2rW4fLccQnDAnVKJ", + { type: NetworkType.MAINNET }, +); +console.log("Address Link", addressLink); + +const txLink = await dAppClient.blockExplorer.getTransactionLink( + "onzCRJhQ9zPC38TLGhBTghCW7WAJpfUJ2NpwbbQKbW6LeEL8RfK", + { type: NetworkType.MAINNET }, +); +console.log("Transaction Link", txLink); + +console.log("\n\nConnection Info:\n"); +console.log("Status:", dAppClient.connectionStatus); +const accounts = await dAppClient.getAccounts(); +console.log("Accounts:", accounts); +const peers = await dAppClient.getPeers(); +console.log("Peers:", peers); + +console.log("\n\nDebug:\n"); +console.log("Local Beacon ID:", await dAppClient.beaconId); +const colorMode = await dAppClient.getColorMode(); +console.log("Color Mode:", colorMode); +const ownMetadata = await dAppClient.getOwnAppMetadata(); +console.log("Own Metadata:", ownMetadata); +
import { TezosToolkit } from "@taquito/taquito"; +import { BeaconWallet } from "@taquito/beacon-wallet"; +import { DAppClient, NetworkType } from "@airgap/beacon-sdk"; + +const Tezos = new TezosToolkit("https://mainnet.api.tez.ie"); +const wallet = new BeaconWallet({ name: "Beacon Docs Taquito" }); + +Tezos.setWalletProvider(wallet); + +const addressLink = await wallet.client.blockExplorer.getAddressLink( + "tz1MJx9vhaNRSimcuXPK2rW4fLccQnDAnVKJ", + { type: NetworkType.MAINNET }, +); +console.log("Address Link", addressLink); + +const txLink = await wallet.client.blockExplorer.getTransactionLink( + "onzCRJhQ9zPC38TLGhBTghCW7WAJpfUJ2NpwbbQKbW6LeEL8RfK", + { type: NetworkType.MAINNET }, +); +console.log("Transaction Link", txLink); + +console.log("\n\nConnection Info:\n"); +console.log("Status:", wallet.client.connectionStatus); +const accounts = await wallet.client.getAccounts(); +console.log("Accounts:", accounts); +const peers = await wallet.client.getPeers(); +console.log("Peers:", peers); + +console.log("\n\nDebug:\n"); +console.log("Local Beacon ID:", await wallet.client.beaconId); +const colorMode = await wallet.client.getColorMode(); +console.log("Color Mode:", colorMode); +const ownMetadata = await wallet.client.getOwnAppMetadata(); +console.log("Own Metadata:", ownMetadata); +
We strongly recommend keeping the default UI Elements. +Consistent UI helps users to interact with different dApps more easily.
The default UI elements have been designed with all wallets and user setups in mind. +It handles a lot of cases that are not obvious at first glance. If you really must overwrite the default UI.
+On desktop there is only one view with some wallets and the QR code.
On iOS, each mobile and webapp has its own entry because the device doesn't allow selection of a specific if multiple apps are installed.
On Android, there is one link for all mobile apps because the device lets you choose the specific app you want to open.
You can overwrite all of the default UI elements by doing the following.
+import { + BeaconEvent, + DAppClient, + defaultEventCallbacks, +} from "@airgap/beacon-sdk"; + +const dAppClient = new DAppClient({ + name: "Beacon Docs", + disableDefaultEvents: true, // Disable all events / UI. This also disables the pairing alert. + eventHandlers: { + // To keep the pairing alert, we have to add the following default event handlers back + [BeaconEvent.PAIR_INIT]: { + handler: defaultEventCallbacks.PAIR_INIT, + }, + [BeaconEvent.PAIR_SUCCESS]: { + handler: defaultEventCallbacks.PAIR_SUCCESS, + }, + }, +}); + +try { + console.log("Requesting permissions..."); + const permissions = await dAppClient.requestPermissions(); + console.log("Got permissions:", permissions.address); +} catch (error) { + console.error("Got error:", error); +} +
import { BeaconEvent, defaultEventCallbacks } from "@airgap/beacon-sdk"; +import { TezosToolkit } from "@taquito/taquito"; +import { BeaconWallet } from "@taquito/beacon-wallet"; + +const Tezos = new TezosToolkit("https://mainnet.api.tez.ie"); +const wallet = new BeaconWallet({ + name: "Beacon Docs Taquito", + disableDefaultEvents: true, // Disable all events / UI. This also disables the pairing alert. + eventHandlers: { + // To keep the pairing alert, we have to add the following default event handlers back + [BeaconEvent.PAIR_INIT]: { + handler: defaultEventCallbacks.PAIR_INIT, + }, + [BeaconEvent.PAIR_SUCCESS]: { + handler: defaultEventCallbacks.PAIR_SUCCESS, + }, + }, +}); + +Tezos.setWalletProvider(wallet); + +try { + await wallet.requestPermissions(); + const address = await wallet.getPKH(); + console.log("Got permissions:", address); +} catch (error) { + console.error("Got error:", error); +} +
You can also add your own logic to specific events and still keep the original behaviour.
+The same can be achieved without overwriting the default event handler by subscribing to an event. This method is preferred, if possible.
+import { + BeaconEvent, + DAppClient, + defaultEventCallbacks, + P2PPairingRequest, + PostMessagePairingRequest, + NetworkType, + WalletConnectPairingRequest, + AnalyticsInterface, +} from "@airgap/beacon-sdk"; + +const dAppClient = new DAppClient({ + name: "Beacon Docs", + eventHandlers: { + [BeaconEvent.PAIR_INIT]: { + // Every BeaconEvent can be overriden by passing a handler here. + // The default will not be executed anymore. To keep the default, + // you will have to call it again. + handler: async ( + data: { + p2pPeerInfo: () => Promise<P2PPairingRequest>; + postmessagePeerInfo: () => Promise<PostMessagePairingRequest>; + walletConnectPeerInfo: () => Promise<WalletConnectPairingRequest>; + networkType: NetworkType; + abortedHandler?(): void; + disclaimerText?: string; + analytics: AnalyticsInterface; + featuredWallets?: string[]; + }, + eventCallback?: any[] | undefined, + ): Promise<void> => { + await defaultEventCallbacks.PAIR_INIT(data); // Add this if you want to keep the default behaviour. + console.log("syncInfo", data, eventCallback); + }, + }, + }, +}); + +try { + console.log("Requesting permissions..."); + const permissions = await dAppClient.requestPermissions(); + console.log("Got permissions:", permissions.address); +} catch (error) { + console.error("Got error:", error); +} +
import { TezosToolkit } from "@taquito/taquito"; +import { BeaconWallet } from "@taquito/beacon-wallet"; +import { + BeaconEvent, + DAppClient, + defaultEventCallbacks, + P2PPairingRequest, + PostMessagePairingRequest, + NetworkType, + WalletConnectPairingRequest, + AnalyticsInterface, +} from "@airgap/beacon-sdk"; + +const Tezos = new TezosToolkit("https://mainnet.api.tez.ie"); +const wallet = new BeaconWallet({ + name: "Beacon Docs Taquito", + eventHandlers: { + [BeaconEvent.PAIR_INIT]: { + // Every BeaconEvent can be overriden by passing a handler here. + // The default will not be executed anymore. To keep the default, + // you will have to call it again. + handler: async ( + data: { + p2pPeerInfo: () => Promise<P2PPairingRequest>; + postmessagePeerInfo: () => Promise<PostMessagePairingRequest>; + walletConnectPeerInfo: () => Promise<WalletConnectPairingRequest>; + networkType: NetworkType; + abortedHandler?(): void; + disclaimerText?: string; + analytics: AnalyticsInterface; + featuredWallets?: string[]; + }, + eventCallback?: any[] | undefined, + ): Promise<void> => { + await defaultEventCallbacks.PAIR_INIT(data); // Add this if you want to keep the default behaviour. + console.log("syncInfo", data, eventCallback); + }, + }, + }, +}); + +Tezos.setWalletProvider(wallet); + +try { + console.log("Requesting permissions..."); + const permissions = await wallet.client.requestPermissions(); + console.log("Got permissions:", permissions.address); +} catch (error) { + console.error("Got error:", error); +} +
The closing of the pairing alert can not be listened to by default. The reason for this is the delay in the P2P connections. +It is possible that a user scans the pairing QR code with his wallet and then closes the alert while waiting for the connection to be established. +If the dApp interprets the "closing" of the alert as an abort, and a few seconds later the connection is established successfully, the behaviour could be unexpected.
+If you still want to be notified of the closing of the pairing window, you can do it in the following way, while keeping the default behaviour.
+import { + BeaconEvent, + DAppClient, + defaultEventCallbacks, + P2PPairingRequest, + PostMessagePairingRequest, + NetworkType, + WalletConnectPairingRequest, + AnalyticsInterface, +} from "@airgap/beacon-sdk"; + +const dAppClient = new DAppClient({ + name: "Beacon Docs", + eventHandlers: { + [BeaconEvent.PAIR_INIT]: { + // Every BeaconEvent can be overriden by passing a handler here. + // The default will not be executed anymore. To keep the default, + // you will have to call it again. + handler: async (data: { + p2pPeerInfo: () => Promise<P2PPairingRequest>; + postmessagePeerInfo: () => Promise<PostMessagePairingRequest>; + walletConnectPeerInfo: () => Promise<WalletConnectPairingRequest>; + networkType: NetworkType; + abortedHandler?(): void; + disclaimerText?: string; + analytics: AnalyticsInterface; + featuredWallets?: string[]; + }): Promise<void> => { + // If you want to attach your own "on alert closed" handler + // eslint-disable-next-line @typescript-eslint/unbound-method + const oldHandler = data.abortedHandler; + const newHandler = (): void => { + if (oldHandler) { + // Make sure to call the internal abortedHandler + oldHandler(); + } + // Add your own logic here + console.log("My logic"); + + data.abortedHandler = newHandler; // Replace the internal abortedHandler with the new one + await defaultEventCallbacks.PAIR_INIT(data); // Add this if you want to keep the default behaviour. + console.log("syncInfo", data); + }, + }, + }, + }); + + try { + console.log("Requesting permissions..."); + const permissions = await dAppClient.requestPermissions(); + console.log("Got permissions:", permissions.address); + } catch (error) { + console.error("Got error:", error); + } + +
import { TezosToolkit } from "@taquito/taquito"; +import { BeaconWallet } from "@taquito/beacon-wallet"; +import { + BeaconEvent, + DAppClient, + defaultEventCallbacks, + P2PPairingRequest, + PostMessagePairingRequest, + NetworkType, + WalletConnectPairingRequest, + AnalyticsInterface, +} from "@airgap/beacon-sdk"; + +const Tezos = new TezosToolkit("https://mainnet.api.tez.ie"); + const wallet = new BeaconWallet({ + name: "Beacon Docs Taquito", + eventHandlers: { + [BeaconEvent.PAIR_INIT]: { + // Every BeaconEvent can be overriden by passing a handler here. + // The default will not be executed anymore. To keep the default, + // you will have to call it again. + handler: async (data: { + p2pPeerInfo: () => Promise<P2PPairingRequest>; + postmessagePeerInfo: () => Promise<PostMessagePairingRequest>; + walletConnectPeerInfo: () => Promise<WalletConnectPairingRequest>; + networkType: NetworkType; + abortedHandler?(): void; + disclaimerText?: string; + analytics: AnalyticsInterface; + featuredWallets?: string[]; + }): Promise<void> => { + // If you want to attach your own "on alert closed" handler + // eslint-disable-next-line @typescript-eslint/unbound-method + const oldHandler = data.abortedHandler; + const newHandler = (): void => { + if (oldHandler) { + // Make sure to call the internal abortedHandler + oldHandler(); + } + // Add your own logic here + console.log("My logic"); + + data.abortedHandler = newHandler; // Replace the internal abortedHandler with the new one + await defaultEventCallbacks.PAIR_INIT(data); // Add this if you want to keep the default behaviour. + console.log("syncInfo", data); + }, + }, + }, + }); + + Tezos.setWalletProvider(wallet); + + try { + console.log("Requesting permissions..."); + const permissions = await wallet.client.requestPermissions(); + console.log("Got permissions:", permissions.address); + } catch (error) { + console.error("Got error:", error); + } + +