Skip to main content

Standalone Delegation

You can easily integrate beacon into your website, even if it's just a simple landing page or wordpress site.

Below is an example of a very simple page that adds a "delegate" button that establishes a Beacon connection and then sends a delegation request to the wallet.

To try this example, you can copy and paste the following snippet into a local file called index.html and open it in the browser.

Browser Extensions

Browser Extensions don't work if the index.html file is opened directly. Instead, you have to start a small webserver. You can do this with python: python -m SimpleHTTPServer 8080

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>Beacon Delegation Example</title>
    <!--
      Make sure you replace "2.3.13" with the latest version.
      https://www.srihash.org/
    -->
    <script
      src="https://unpkg.com/@airgap/beacon-sdk@2.3.13/dist/walletbeacon.min.js"
      integrity="sha384-oblhhE/eZ3yddPJZ4uyZeMBlMF25tKNIG5M1x7tExGI3mPk/aF0QusFnC3PzFSwI"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    Beacon Delegation Example
    <button id="connect">Connect and Delegate</button>

    <script>
      const bakerAddress = "tz1MJx9vhaNRSimcuXPK2rW4fLccQnDAnVKJ"; // Replace with baker address
      const bakerName = "Delegation Example dApp"; // Replace with baker name / website

      // Initiate DAppClient
      const client = new beacon.DAppClient({
        name: bakerName,
      });

      const delegate = () => {
        client.requestOperation({
          operationDetails: [
            {
              kind: beacon.TezosOperationType.DELEGATION,
              delegate: bakerAddress,
            },
          ],
        });

      // Add event listener to the button
      document.getElementById("connect").addEventListener("click", () => {
        // Check if we have an active account
        client.getActiveAccount().then((activeAccount) => {
          if (activeAccount) {
            // If we have an active account, send the delegate operation directly
            delegate();
          } else {
            // If we don't have an active account, we need to request permissions first and then send the delegate operation
            client.requestPermissions().then((permissions) => {
              delegate();
            });
          }
        });
      });
    </script>
  </body>
</html>