Updated beacon-sdk version to v4.2.1 (#2874)

* Updated beacon-sdk version and added beacon-types package for import compatibility

* chore: enable and disable metrics in test dApp

* chore: enableMetrics in docs and website

* chore: fix test dApp to show the bug report link

* removed commented out code

* updated beacon version to 4.2.0

* test: mock indexedDB in unit test

* ci: fix vulnerabilities in package-lock.json

* chore: fix ci webstie deploy

* updated beacon version to 4.2.1

---------

Co-authored-by: Alireza Haghshenas <alirezahaghshenas@gmail.com>
Co-authored-by: huianyang <hui-an.yang@ecadlabs.com>

apps/taquito-test-dapp/package.json

@@ -24,7 +24,8 @@
     "vite": "^4.4.11"
   },
   "dependencies": {
-    "@airgap/beacon-sdk": "4.1.2",
+    "@airgap/beacon-sdk": "^4.2.1",
+    "@airgap/beacon-types": "^4.2.1",
     "@taquito/beacon-wallet": "^19.1.0",
     "@taquito/core": "^19.1.0",
     "@taquito/taquito": "^19.1.0",

apps/taquito-test-dapp/src/App.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { TezosToolkit } from "@taquito/taquito";
-  import { NetworkType } from "@airgap/beacon-sdk";
+  import { NetworkType } from "@airgap/beacon-types";
   import Select from "svelte-select";
   import { getRpcUrl } from "./config";
   import store from "./store";
@@ -75,15 +75,6 @@
   };
 
   onMount(() => {
-    // cleans up the local storage
-    if (window && window.localStorage) {
-      // finds the Beacon keys
-      const beaconKeys = Object.keys(window.localStorage).filter((key) =>
-        key.toLowerCase().includes("beacon")
-      );
-      // deletes the keys
-      beaconKeys.forEach((key) => delete window.localStorage[key]);
-    }
     // detects the browser
     let userAgent = navigator.userAgent;
     if (userAgent.match(/chrome|chromium|crios/i)) {
@@ -239,6 +230,14 @@
               on:change={() => store.updateDefaultEvents()}
             />
           </label>
+          <label>
+            <span class="select-title">Enable Metrics In Beacon:</span>
+            <input
+              type="checkbox"
+              checked={$store.enableMetrics}
+              on:change={(e) => store.updateEnableMetrics()}
+            />
+          </label>
         </div>
       </div>
     </div>

apps/taquito-test-dapp/src/config.ts

@@ -1,4 +1,4 @@
-import { NetworkType } from "@airgap/beacon-sdk";
+import { NetworkType } from '@airgap/beacon-types';
 
 export type SupportedNetworks = NetworkType.OXFORDNET | NetworkType.GHOSTNET | NetworkType.MAINNET | NetworkType.CUSTOM;
 

apps/taquito-test-dapp/src/lib/TestContainer.svelte

@@ -3,7 +3,7 @@
   import store from "../store";
   import type { TestSettings, TestResult } from "../types";
   import { shortenHash } from "../utils";
-  import { NetworkType } from "@airgap/beacon-sdk";
+  import { NetworkType } from "@airgap/beacon-types";
   import { getTzKtUrl } from "../config";
 
   let test: TestSettings | undefined;

apps/taquito-test-dapp/src/lib/Wallet.svelte

@@ -3,7 +3,6 @@
   import { fly } from "svelte/transition";
   import { TezosToolkit } from "@taquito/taquito";
   import { BeaconWallet } from "@taquito/beacon-wallet";
-  // import { BeaconEvent, defaultEventCallbacks } from "@airgap/beacon-sdk";
   import { BeaconEvent, type DAppClientOptions } from "@airgap/beacon-sdk";
   import store from "../store";
   import { formatTokenAmount, shortenHash } from "../utils";
@@ -19,10 +18,14 @@
     const options: DAppClientOptions = {
       name: "Taquito Test Dapp",
       matrixNodes: [defaultMatrixNode] as any,
-      network: { type: config.networkType },
+      network: {
+        type: config.networkType,
+        rpcUrl: getRpcUrl(config.networkType),
+      },
       walletConnectOptions: {
         projectId: 'ba97fd7d1e89eae02f7c330e14ce1f36',
-      }
+      },
+      enableMetrics: $store.enableMetrics,
     };
     // if ($store.disableDefaultEvents) {
     //   options.disableDefaultEvents = true;
@@ -40,14 +43,11 @@
   };
 
   const connectWallet = async () => {
-    setWallet({
-      networkType: $store.networkType
+    const wallet = await setWallet({
+      networkType: $store.networkType,
     });
-    const wallet = createNewWallet({
-          networkType: $store.networkType
-        });
 
-    subscribeToAllEvents(wallet);
+    await subscribeToAllEvents(wallet);
 
     try {
       await wallet.requestPermissions();
@@ -81,18 +81,7 @@
     store.updateSelectedTest(undefined);
   };
 
-  export const setWallet = async (config: {
-    networkType: SupportedNetworks,
-  }) => {
-    if (window && window.localStorage) {
-      // finds the Beacon keys
-      const beaconKeys = Object.keys(window.localStorage).filter((key) =>
-        key.toLowerCase().includes("beacon")
-      );
-      // deletes the keys
-      beaconKeys.forEach((key) => delete window.localStorage[key]);
-    }
-
+  export const setWallet = async (config: { networkType: SupportedNetworks }) => {
     store.updateNetworkType(config.networkType);
 
     const wallet = createNewWallet(config);
@@ -112,8 +101,8 @@
         store.updateUserBalance(balance.toNumber());
       }
     }
-
-  }
+    return wallet;
+  };
 
   onMount(async () => {
     store.updateNetworkType(defaultNetworkType);
@@ -131,43 +120,89 @@
     }
   });
 
-const saveLog = (data: unknown, eventType: BeaconEvent) => {
-  const log = JSON.stringify({eventType, data});
-  store.addEvent(log);
-};
-
-function subscribeToAllEvents(wallet: BeaconWallet) {
-  wallet.client.subscribeToEvent(BeaconEvent.PERMISSION_REQUEST_SENT, (data) => saveLog(data, BeaconEvent.PERMISSION_REQUEST_SENT));
-  wallet.client.subscribeToEvent(BeaconEvent.PERMISSION_REQUEST_SUCCESS, (data) => saveLog(data, BeaconEvent.PERMISSION_REQUEST_SUCCESS));
-  wallet.client.subscribeToEvent(BeaconEvent.PERMISSION_REQUEST_ERROR, (data) => saveLog(data, BeaconEvent.PERMISSION_REQUEST_ERROR));
-  wallet.client.subscribeToEvent(BeaconEvent.OPERATION_REQUEST_SENT, (data) => saveLog(data, BeaconEvent.OPERATION_REQUEST_SENT));
-  wallet.client.subscribeToEvent(BeaconEvent.OPERATION_REQUEST_SUCCESS, (data) => saveLog(data, BeaconEvent.OPERATION_REQUEST_SUCCESS));
-  wallet.client.subscribeToEvent(BeaconEvent.OPERATION_REQUEST_ERROR, (data) => saveLog(data, BeaconEvent.OPERATION_REQUEST_ERROR));
-  wallet.client.subscribeToEvent(BeaconEvent.SIGN_REQUEST_SENT, (data) => saveLog(data, BeaconEvent.SIGN_REQUEST_SENT));
-  wallet.client.subscribeToEvent(BeaconEvent.SIGN_REQUEST_SUCCESS, (data) => saveLog(data, BeaconEvent.SIGN_REQUEST_SUCCESS));
-  wallet.client.subscribeToEvent(BeaconEvent.SIGN_REQUEST_ERROR, (data) => saveLog(data, BeaconEvent.SIGN_REQUEST_ERROR));
-  wallet.client.subscribeToEvent(BeaconEvent.BROADCAST_REQUEST_SENT, (data) => saveLog(data, BeaconEvent.BROADCAST_REQUEST_SENT));
-  wallet.client.subscribeToEvent(BeaconEvent.BROADCAST_REQUEST_SUCCESS, (data) => saveLog(data, BeaconEvent.BROADCAST_REQUEST_SUCCESS));
-  wallet.client.subscribeToEvent(BeaconEvent.BROADCAST_REQUEST_ERROR, (data) => saveLog(data, BeaconEvent.BROADCAST_REQUEST_ERROR));
-  wallet.client.subscribeToEvent(BeaconEvent.ACKNOWLEDGE_RECEIVED, (data) => saveLog(data, BeaconEvent.ACKNOWLEDGE_RECEIVED));
-  wallet.client.subscribeToEvent(BeaconEvent.LOCAL_RATE_LIMIT_REACHED, (data) => saveLog(data, BeaconEvent.LOCAL_RATE_LIMIT_REACHED));
-  wallet.client.subscribeToEvent(BeaconEvent.NO_PERMISSIONS, (data) => saveLog(data, BeaconEvent.NO_PERMISSIONS));
+  const saveLog = (data: unknown, eventType: BeaconEvent) => {
+    const log = JSON.stringify({ eventType, data });
+    store.addEvent(log);
+  };
 
-  wallet.client.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (data) => {
-    saveLog(data, BeaconEvent.ACTIVE_ACCOUNT_SET)
-    store.updateUserAddress(data.address);
-    store.updateNetworkType(data.network.type as SupportedNetworks);
-  });
+  async function subscribeToAllEvents(wallet: BeaconWallet) {
+    await wallet.client.subscribeToEvent(BeaconEvent.PERMISSION_REQUEST_SENT, (data) =>
+      saveLog(data, BeaconEvent.PERMISSION_REQUEST_SENT),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.PERMISSION_REQUEST_SUCCESS, (data) =>
+      saveLog(data, BeaconEvent.PERMISSION_REQUEST_SUCCESS),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.PERMISSION_REQUEST_ERROR, (data) =>
+      saveLog(data, BeaconEvent.PERMISSION_REQUEST_ERROR),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.OPERATION_REQUEST_SENT, (data) =>
+      saveLog(data, BeaconEvent.OPERATION_REQUEST_SENT),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.OPERATION_REQUEST_SUCCESS, (data) =>
+      saveLog(data, BeaconEvent.OPERATION_REQUEST_SUCCESS),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.OPERATION_REQUEST_ERROR, (data) =>
+      saveLog(data, BeaconEvent.OPERATION_REQUEST_ERROR),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.SIGN_REQUEST_SENT, (data) =>
+      saveLog(data, BeaconEvent.SIGN_REQUEST_SENT),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.SIGN_REQUEST_SUCCESS, (data) =>
+      saveLog(data, BeaconEvent.SIGN_REQUEST_SUCCESS),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.SIGN_REQUEST_ERROR, (data) =>
+      saveLog(data, BeaconEvent.SIGN_REQUEST_ERROR),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.BROADCAST_REQUEST_SENT, (data) =>
+      saveLog(data, BeaconEvent.BROADCAST_REQUEST_SENT),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.BROADCAST_REQUEST_SUCCESS, (data) =>
+      saveLog(data, BeaconEvent.BROADCAST_REQUEST_SUCCESS),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.BROADCAST_REQUEST_ERROR, (data) =>
+      saveLog(data, BeaconEvent.BROADCAST_REQUEST_ERROR),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.ACKNOWLEDGE_RECEIVED, (data) =>
+      saveLog(data, BeaconEvent.ACKNOWLEDGE_RECEIVED),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.LOCAL_RATE_LIMIT_REACHED, (data) =>
+      saveLog(data, BeaconEvent.LOCAL_RATE_LIMIT_REACHED),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.NO_PERMISSIONS, (data) =>
+      saveLog(data, BeaconEvent.NO_PERMISSIONS),
+    );
+
+    await wallet.client.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, (data) => {
+      saveLog(data, BeaconEvent.ACTIVE_ACCOUNT_SET);
+      store.updateUserAddress(data.address);
+      store.updateNetworkType(data.network.type as SupportedNetworks);
+    });
 
-  wallet.client.subscribeToEvent(BeaconEvent.ACTIVE_TRANSPORT_SET, (data) => saveLog(data, BeaconEvent.ACTIVE_TRANSPORT_SET));
-  wallet.client.subscribeToEvent(BeaconEvent.SHOW_PREPARE, (data) => saveLog(data, BeaconEvent.SHOW_PREPARE));
-  wallet.client.subscribeToEvent(BeaconEvent.HIDE_UI, (data) => saveLog(data, BeaconEvent.HIDE_UI));
-  wallet.client.subscribeToEvent(BeaconEvent.PAIR_INIT, (data) => saveLog(data, BeaconEvent.PAIR_INIT));
-  wallet.client.subscribeToEvent(BeaconEvent.PAIR_SUCCESS, (data) => saveLog(data, BeaconEvent.PAIR_SUCCESS));
-  wallet.client.subscribeToEvent(BeaconEvent.CHANNEL_CLOSED, (data) => saveLog(data, BeaconEvent.CHANNEL_CLOSED));
-  wallet.client.subscribeToEvent(BeaconEvent.INTERNAL_ERROR, (data) => saveLog(data, BeaconEvent.INTERNAL_ERROR));
-  wallet.client.subscribeToEvent(BeaconEvent.UNKNOWN, (data) => saveLog(data, BeaconEvent.UNKNOWN));
-}
+    await wallet.client.subscribeToEvent(BeaconEvent.ACTIVE_TRANSPORT_SET, (data) =>
+      saveLog(data, BeaconEvent.ACTIVE_TRANSPORT_SET),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.SHOW_PREPARE, (data) =>
+      saveLog(data, BeaconEvent.SHOW_PREPARE),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.HIDE_UI, (data) =>
+      saveLog(data, BeaconEvent.HIDE_UI),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.PAIR_INIT, (data) =>
+      saveLog(data, BeaconEvent.PAIR_INIT),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.PAIR_SUCCESS, (data) =>
+      saveLog(data, BeaconEvent.PAIR_SUCCESS),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.CHANNEL_CLOSED, (data) =>
+      saveLog(data, BeaconEvent.CHANNEL_CLOSED),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.INTERNAL_ERROR, (data) =>
+      saveLog(data, BeaconEvent.INTERNAL_ERROR),
+    );
+    await wallet.client.subscribeToEvent(BeaconEvent.UNKNOWN, (data) =>
+      saveLog(data, BeaconEvent.UNKNOWN),
+    );
+  }
 </script>
 
 <style lang="scss">

apps/taquito-test-dapp/src/store.ts

@@ -10,6 +10,7 @@ interface State {
   userBalance: number | undefined;
   wallet: BeaconWallet | undefined;
   disableDefaultEvents: boolean;
+  enableMetrics: boolean;
   networkType: SupportedNetworks;
   customNetworkUrl: string | undefined;
   matrixNode: string;
@@ -26,6 +27,7 @@ const initialState: State = {
   wallet: undefined,
   matrixNode: defaultMatrixNode,
   disableDefaultEvents: false,
+  enableMetrics: true,
   networkType: defaultNetworkType,
   customNetworkUrl: undefined,
   confirmationObservableTest: undefined,
@@ -68,6 +70,11 @@ const state = {
       ...store,
       disableDefaultEvents: !store.disableDefaultEvents
     })),
+  updateEnableMetrics: () =>
+    store.update(store => ({
+      ...store,
+      enableMetrics: !store.enableMetrics
+    })),
   updateNetworkType: (networkType: SupportedNetworks, url?: string) =>
     store.update(store => ({
       ...store,

apps/taquito-test-dapp/src/tests.ts

@@ -9,7 +9,7 @@ import {
 import type { ContractProvider } from "@taquito/taquito";
 import type { BeaconWallet } from "@taquito/beacon-wallet";
 import { stringToBytes, verifySignature } from "@taquito/utils";
-import { SigningType, type RequestSignPayloadInput } from "@airgap/beacon-sdk";
+import { SigningType, type RequestSignPayloadInput } from "@airgap/beacon-types";
 import { get } from "svelte/store";
 import type { TestSettings, TestResult } from "./types";
 import store from "./store";

docs/originate.md

@@ -46,7 +46,7 @@ importKey(Tezos, "p2sk2obfVMEuPUnadAConLWk7Tf4Dt3n4svSgJwrgpamRqJXvaYcg1")
 import {  BeaconWallet } from '@taquito/beacon-wallet';
 import { TezosToolkit } from '@taquito/taquito';
 const Tezos = new TezosToolkit('https://ghostnet.ecadinfra.com');
-const option = { name: "nameOfWallet", network: { type: 'ghostnet' }}
+const option = { name: "nameOfWallet", network: { type: 'ghostnet' }, enableMetrics: true}
 const wallet = new BeaconWallet(option)
 await wallet.requestPermissions()
 Tezos.setWalletProvider(wallet)

docs/tutorial.md

@@ -501,6 +501,7 @@ const ConnectButton = ({
         name: "My dApp",
         preferredNetwork: NetworkType.GHOSTNET,
         disableDefaultEvents: false,
+        enableMetrics: true,
       });
       Tezos.setWalletProvider(wallet);
       setWallet(wallet);

docs/wallet_API.md

@@ -71,12 +71,15 @@ const options = {
       },
     },
   },
+  enableMetrics: true,
 };
 const wallet = new BeaconWallet(options);
 ```
 
 The necessary bare minimum to instantiate the wallet is an object with a `name` property that contains the name of your dapp and the network you want it to point to. In this case, we choose to point it to `ghostnet`. However, the Beacon wallet allows you to customize your dapp responses to different events. In the example above, instead of getting the default Beacon pop-up after the user connects the wallet, it will display the available data in the console. You can use whatever solution you prefer for feedback. You can find a list of all the default handlers [in the beacon-sdk Github repo](https://github.com/airgap-it/beacon-sdk/blob/master/packages/beacon-dapp/src/events.ts).
 
+The `enableMetrics` property is an optional parameter that allows you to enable or disable the collection of metrics. It also allows the user to report bugs via a link in the wallet pop-up.
+
 > Note: Previous versions of Beacon used to have a `preferredNetwork` property instead of `network`. This property has been removed in the latest version of Beacon, and you must now use the `network` property.
 
 The Beacon wallet requires an extra step to set up the network to connect to and the permissions:
@@ -116,7 +119,7 @@ Make sure you have the Beacon browser extension installed (the extension offers
 
 ```js live noInline wallet
 // import { BeaconWallet } from '@taquito/beacon-wallet';
-// const options = { name: 'exampleWallet' };
+// const options = { name: 'exampleWallet', enableMetrics: true };
 // const wallet = new BeaconWallet(options);
 
 wallet