Feat/docs update (#53)

* fix: add warning banner * feat: add taquito examples * fix: typos * chore: update deps * fix: typo * fix: disconnect examples * feat: add destroy * fix: remove note * fix: remove async
airgap-it · May 7, 2024 · 02ed0d1 · 02ed0d1
1 parent 72fa8f8
commit 02ed0d1
Show file tree

Hide file tree

Showing 10 changed files with 2,705 additions and 2,601 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,28 +23,28 @@
     "embed-code": "npm run generate-monaco-types && npm run prettier && tsc --module es2015 --target es2015 --moduleResolution node --esModuleInterop true src/examples/*.ts && node scripts/copy-examples.js && npm run clear-folders && cp -r src/docs/* build-docs/ && rm -r docs && mv build-docs docs && npm run pretty-docs"
   },
   "dependencies": {
-    "@airgap/beacon-sdk": "^4.1.2",
-    "@docusaurus/core": "3.1.1",
-    "@docusaurus/plugin-client-redirects": "^3.1.1",
-    "@docusaurus/preset-classic": "3.1.1",
-    "@docusaurus/theme-live-codeblock": "^3.1.1",
-    "@mdx-js/react": "^3.0.0",
+    "@airgap/beacon-sdk": "^4.2.1",
+    "@docusaurus/core": "3.3.2",
+    "@docusaurus/plugin-client-redirects": "^3.3.2",
+    "@docusaurus/preset-classic": "3.3.2",
+    "@docusaurus/theme-live-codeblock": "^3.3.2",
+    "@mdx-js/react": "^3.0.1",
     "@monaco-editor/react": "^4.6.0",
-    "@taquito/beacon-wallet": "^19.0.0",
-    "@taquito/taquito": "^19.0.0",
-    "clsx": "^2.1.0",
-    "mermaid": "^10.8.0",
+    "@taquito/beacon-wallet": "^19.2.0",
+    "@taquito/taquito": "^19.2.0",
+    "clsx": "^2.1.1",
+    "mermaid": "^10.9.0",
     "prism-react-renderer": "^2.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.1.1",
-    "@tsconfig/docusaurus": "^2.0.2",
+    "@docusaurus/module-type-aliases": "3.3.2",
+    "@tsconfig/docusaurus": "^2.0.3",
     "classnames": "^2.5.1",
     "docusaurus-node-polyfills": "^1.0.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.5"
   },
   "browserslist": {
     "production": [

diff --git a/src/ExecuteExample.ts b/src/ExecuteExample.ts
@@ -1,9 +1,13 @@
 import broadcastRequestBeacon from "./examples/broadcast-request.beacon";
 import broadcastRequestTaquito from "./examples/broadcast-request.taquito";
+import destroyBeacon from "./examples/destroy.beacon";
+import destroyTaquito from "./examples/destroy.taquito";
 import differentNodeBeacon from "./examples/different-node.beacon";
 import differentNodeTaquito from "./examples/different-node.taquito";
 import disableUIBeacon from "./examples/disable-all-ui.beacon";
 import disableUITaquito from "./examples/disable-all-ui.taquito";
+import disconnectWalletBeacon2 from "./examples/disconnect-wallet-2.beacon";
+import disconnectWalletTaquito2 from "./examples/disconnect-wallet-2.taquito";
 import disconnectWalletBeacon from "./examples/disconnect-wallet.beacon";
 import disconnectWalletTaquito from "./examples/disconnect-wallet.taquito";
 import exampleAdvancedBeacon from "./examples/example-advanced.beacon";
@@ -131,6 +135,18 @@ export class ExecuteExample {
       case "taquito disconnect wallet":
         await disconnectWalletTaquito(updateLogs);
         break;
+      case "beacon destroy":
+        await destroyBeacon(updateLogs);
+        break;
+      case "taquito destroy":
+        await destroyTaquito(updateLogs);
+        break;
+      case "beacon disconnect wallet 2":
+        await disconnectWalletBeacon2(updateLogs);
+        break;
+      case "taquito disconnect wallet 2":
+        await disconnectWalletTaquito2(updateLogs);
+        break;
       case "beacon broadcast request":
         await broadcastRequestBeacon(updateLogs);
         break;

diff --git a/src/docs/getting-started/first-dapp.mdx b/src/docs/getting-started/first-dapp.mdx
@@ -55,7 +55,7 @@ import { DAppClient } from "@airgap/beacon-sdk";
 const dAppClient = new DAppClient({ name: "Beacon Docs" });
 
 // Listen for all the active account changes
-dAppClient.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, async (account) => {
+dAppClient.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (account) => {
   // An active account has been set, update the dApp UI
   console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
 });
@@ -84,13 +84,10 @@ 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);
-  },
-);
+wallet.client.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (account) => {
+  // An active account has been set, update the dApp UI
+  console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
+});
 
 try {
   console.log("Requesting permissions...");
@@ -231,7 +228,7 @@ if (!activeAccount) {
 
 </TabItem>
 
- <TabItem value="taquito">
+<TabItem value="taquito">
 
 ```ts live
 // taquito request operation with events
@@ -283,6 +280,63 @@ if (!activeAccount) {
 
 Please refer to our dedicated [page](/guides/disconnecting-a-wallet) on how to disconnect your dApp based on your needs.
 
+## Destroy
+
+`destroy` needs to be implemented to ensure proper lifecycle management of `dAppClient`.
+
+This function is designed to be called as the final action of `dAppClient` when it is no longer needed.
+
+The destroy function is used to clean up resources and remove all Beacon values from storage.
+
+Once this function is executed, the current instance of `dAppClient` becomes unusable.
+
+<Tabs
+  groupId="beaconOrTaquito7"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
+
+    ```ts live
+    // beacon destroy
+    import { DAppClient } from "@airgap/beacon-sdk";
+
+    const dAppClient = new DAppClient({ name: "Beacon Docs" });
+
+    dAppClient
+      .destroy()
+      .then(() => {
+        logger.log("Instance destroyed.");
+      })
+      .catch((err) => logger.log("Error: ", err.message));
+    ```
+
+  </TabItem>
+  <TabItem value="taquito">
+
+    ```ts live
+    // taquito destroy
+    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);
+
+    try {
+      await wallet.disconnect();
+    } catch (err: any) {
+      logger.log("Error: ", err.message);
+    }
+    ```
+
+  </TabItem>
+</Tabs>
+
 ## User Interaction Best Practice
 
 Take a look a the [best practice](/getting-started/best-practices) for recommendations on Beacon user interface components.
diff --git a/src/docs/guides/disconnecting-a-wallet.mdx b/src/docs/guides/disconnecting-a-wallet.mdx
@@ -20,8 +20,18 @@ Namely there are 3 errors that `disconnect` can throw which are:
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
+<Tabs
+  groupId="beaconOrTaquitoDAW2"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+<TabItem value="beacon">
+
 ```ts live
-// beacon disconnect wallet
+// beacon disconnect wallet 2
 import { DAppClient } from "@airgap/beacon-sdk";
 const dAppClient = new DAppClient({ name: "Beacon Docs" });
 
@@ -33,6 +43,29 @@ dAppClient
   .catch((err) => console.error(err.message));
 ```
 
+</TabItem>
+<TabItem value="taquito">
+
+```ts live
+// taquito disconnect wallet 2
+import { TezosToolkit } from "@taquito/taquito";
+import { BeaconWallet } from "@taquito/beacon-wallet";
+import Logger from "../Logger";
+const Tezos = new TezosToolkit("https://mainnet.api.tez.ie");
+const wallet = new BeaconWallet({ name: "Beacon Docs Taquito" });
+
+Tezos.setWalletProvider(wallet);
+
+try {
+  await wallet.client.disconnect();
+} catch (err: any) {
+  logger.log("Error: ", err.message);
+}
+```
+
+</TabItem>
+</Tabs>
+
 ## ClearActiveAccount
 
 `clearActiveAccount` manages the process of clearing the currently active account and only its associated active transport.
@@ -46,7 +79,7 @@ This method ensures that all data linked to the active account is removed, and t
 > Note: Only for WalletConnect, `clearActiveAccount` will also resets all transport references behaving similarly to `disconnect`
 
 <Tabs
-  groupId="beaconOrTaquitoDAW"
+  groupId="beaconOrTaquitoDAW2"
   defaultValue="beacon"
   values={[
     { label: "Beacon", value: "beacon" },
@@ -61,7 +94,8 @@ import { DAppClient } from "@airgap/beacon-sdk";
 const dAppClient = new DAppClient({ name: "Beacon Docs" });
 
 dAppClient
-  .clearActiveAccount(() => {
+  .clearActiveAccount()
+  .then(() => {
     const account = await dAppClient.getActiveAccount();
     console.log("Active Account", account);
   })

diff --git a/src/docs/guides/migration-guide.mdx b/src/docs/guides/migration-guide.mdx
@@ -1,5 +1,12 @@
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
 # Migration Guide: Updating to Event Subscription
 
+:::warning Mandatory Subscription
+Since version 4.2.0, it is mandatory to subscribe to `ACTIVE_ACCOUNT_SET`.
+:::
+
 This guide outlines the steps to migrate from using `dAppClient.getActiveAccount()` to the new event subscription method with `BeaconEvent.ACTIVE_ACCOUNT_SET` for handling active account changes.
 
 ## Why Migrate?
@@ -16,40 +23,116 @@ The shift to using the event subscription method is crucial for several reasons:
 
 `requestPermissions()` still returns an active account. However, be aware that it might not capture subsequent account changes made in the wallet.
 
-```typescript
-// Old usage
-const activeAccount = await dAppClient.requestPermissions();
-```
+<Tabs
+  groupId="beaconOrTaquitoMigration1"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
+
+    ```typescript
+    // Old usage
+    const permissions = await dAppClient.requestPermissions();
+    ```
+
+  </TabItem>
+  <TabItem value="taquito">
+
+    ```typescript
+    // Old usage
+    const permissions = await wallet.client.requestPermissions();
+    ```
+
+  </TabItem>
+</Tabs>
 
 ### 2. Set Up the Event Subscription
 
 Next, implement an event listener for BeaconEvent.ACTIVE_ACCOUNT_SET. This event is triggered whenever there is a change in the active account, allowing your dApp to stay updated.
 
-```typescript
-// New method
-dAppClient.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (account) => {
-  // An active account has been set, update the dApp UI
-  console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
-});
-```
+<Tabs
+  groupId="beaconOrTaquitoMigration2"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
+    ```typescript
+    // New method
+    dAppClient.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (account) => {
+      // An active account has been set, update the dApp UI
+      console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
+    });
+    ```
+  </TabItem>
+  <TabItem value="taquito">
+    ```typescript
+    // New method
+    wallet.client.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (data) => {
+      // An active account has been set, update the dApp UI
+      console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
+    });
+    ```
+  </TabItem>
+</Tabs>
 
 ### 3. Handle the Active Account
 
 Adapt your dApp's logic to handle updates from both requestPermissions() and the event subscription. This ensures your dApp remains synchronized with the current active account.
 
 The end result should look something like this:
 
+<Tabs
+  groupId="beaconOrTaquitoMigration3"
+  defaultValue="beacon"
+  values={[
+    { label: "Beacon", value: "beacon" },
+    { label: "Taquito", value: "taquito" },
+  ]}
+>
+  <TabItem value="beacon">
+
 ```ts live
 // beacon get active account with events
 import { BeaconEvent, DAppClient } from "@airgap/beacon-sdk";
 
 const dAppClient = new DAppClient({ name: "Beacon Docs" });
 
 // Listen for all the active account changes
-dAppClient.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, async (account) => {
+dAppClient.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (account) => {
   // An active account has been set, update the dApp UI
   console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
 });
 
-dAppClient.requestPermissions();
+const permissions = await dAppClient.requestPermissions();
 ```
+
+</TabItem>
+  <TabItem value="taquito">
+
+```ts live
+// taquito permission request
+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);
+
+// Listen for all the active account changes
+wallet.client.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (account) => {
+  // An active account has been set, update the dApp UI
+  console.log(`${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `, account);
+});
+
+const permissions = await wallet.client.requestPermissions();
+```
+
+  </TabItem>
+</Tabs>