Merge pull request #40 from airgap-it/feat/update_docs

feat: added events examples

src/docs/getting-started/first-dapp.mdx

@@ -85,6 +85,24 @@ If the following code returns an address, there is no need to send another permi
 
 The `beacon-sdk` is now fully set up and ready to receive operation requests.
 
+> If you want to add reactivity to your DApp when an active account changes, then you have to subscribe to `BeaconEvent.ACTIVE_ACCOUNT_SET`.
+
+<RunnableCode>
+
+<!-- embedme getting-started-active-account-events.beacon.ts -->
+
+```ts
+// TODO
+```
+
+<!-- embedme getting-started-active-account-events.taquito.ts -->
+
+```ts
+// TODO
+```
+
+</RunnableCode>
+
 ## Operation Request
 
 <RunnableCode>
@@ -103,6 +121,24 @@ The `beacon-sdk` is now fully set up and ready to receive operation requests.
 
 </RunnableCode>
 
+> Alternatively with `BeaconEvent.ACTIVE_ACCOUNT_SET`
+
+<RunnableCode>
+
+<!-- embedme getting-started-operation-request-events.beacon.ts -->
+
+```ts
+// TODO
+```
+
+<!-- embedme getting-started-operation-request-events.taquito.ts -->
+
+```ts
+// TODO
+```
+
+</RunnableCode>
+
 ## User Interaction Best Practice
 
 Take a look a the [best practice](/getting-started/best-practices) for recommendations on Beacon user interface components.

src/examples/getting-started-active-account-events.beacon.ts

@@ -0,0 +1,25 @@
+/// START
+import { BeaconEvent, DAppClient } from "@airgap/beacon-sdk";
+/// END
+
+async () => {
+  /// START
+  const dAppClient = new DAppClient({ name: "Beacon Docs" });
+
+  // Listen for all the active account changes
+  dAppClient.subscribeToEvent(
+    BeaconEvent.ACTIVE_ACCOUNT_SET,
+    async (account) => {
+      // An active account has been set, update the dApp UI
+      console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
+    }
+  );
+
+  // Check if we are connected. If not, do a permission request first.
+  const activeAccount = await dAppClient.getActiveAccount();
+  if (!activeAccount) {
+    await dAppClient.requestPermissions();
+  }
+
+  /// END
+};

src/examples/getting-started-active-account-events.taquito.ts

@@ -0,0 +1,20 @@
+/// START
+import { TezosToolkit } from "@taquito/taquito";
+import { BeaconWallet } from "@taquito/beacon-wallet";
+import { BeaconEvent } from "@airgap/beacon-sdk";
+/// END
+
+async () => {
+  /// START
+  const Tezos = new TezosToolkit("https://mainnet-tezos.giganode.io");
+  const wallet = new BeaconWallet({ name: "Beacon Docs Taquito" });
+
+  Tezos.setWalletProvider(wallet);
+
+  wallet.client.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (account) => {
+    // An active account has been set
+    console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
+  });
+
+  /// END
+};

src/examples/getting-started-operation-request-events.beacon.ts

@@ -0,0 +1,43 @@
+/// START
+import {
+  BeaconEvent,
+  DAppClient,
+  TezosOperationType,
+} from "@airgap/beacon-sdk";
+/// END
+
+async () => {
+  /// START
+  const dAppClient = new DAppClient({ name: "Beacon Docs" });
+
+  // Listen for all the active account changes
+  dAppClient.subscribeToEvent(
+    BeaconEvent.ACTIVE_ACCOUNT_SET,
+    async (account) => {
+      // An active account has been set, update the dApp UI
+      console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
+
+      // 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: account.address, // Send to ourselves
+            amount: "1", // Amount in mutez, the smallest unit in Tezos
+          },
+        ],
+      });
+
+      console.log(response);
+    }
+  );
+
+  // Check if we are connected. If not, do a permission request first.
+  const activeAccount = await dAppClient.getActiveAccount();
+  if (!activeAccount) {
+    await dAppClient.requestPermissions();
+  }
+
+  /// END
+};

src/examples/getting-started-operation-request-events.taquito.ts

@@ -0,0 +1,46 @@
+/// START
+import { TezosToolkit } from "@taquito/taquito";
+import { BeaconWallet } from "@taquito/beacon-wallet";
+import {
+  BeaconEvent,
+  DAppClient,
+  TezosOperationType,
+} from "@airgap/beacon-sdk";
+/// END
+
+async () => {
+  /// START
+  const Tezos = new TezosToolkit("https://mainnet-tezos.giganode.io");
+  const wallet = new BeaconWallet({ name: "Beacon Docs Taquito" });
+
+  Tezos.setWalletProvider(wallet);
+
+  // Listen for all the active account changes
+  wallet.client.subscribeToEvent(
+    BeaconEvent.ACTIVE_ACCOUNT_SET,
+    async (account) => {
+      // An active account has been set, update the dApp UI
+      console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
+
+      // 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 wallet.sendOperations([
+        {
+          kind: TezosOperationType.TRANSACTION,
+          destination: account.address, // Send to ourselves
+          amount: "1", // Amount in mutez, the smallest unit in Tezos
+        },
+      ]);
+
+      console.log(response);
+    }
+  );
+
+  // Check if we are connected. If not, do a permission request first.
+  const activeAccount = await wallet.client.getActiveAccount();
+  if (!activeAccount) {
+    await wallet.client.requestPermissions();
+  }
+
+  /// END
+};