Subscribe to all events in the test dApp (#2713)

* feat: subscribed to all events in the test dApp * chore: slightly improve apparance of event logs * chore: minor improvements to appearance * chore: clean unnecessary comments
ecadlabs · Nov 14, 2023 · 4f44dd7 · 4f44dd7
1 parent 082cfe0
commit 4f44dd7
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 86 deletions.
diff --git a/apps/taquito-test-dapp/src/App.svelte b/apps/taquito-test-dapp/src/App.svelte
@@ -3,7 +3,7 @@
   import { TezosToolkit } from "@taquito/taquito";
   import { NetworkType } from "@airgap/beacon-sdk";
   import Select from "svelte-select";
-  import { rpcUrl } from "./config";
+  import { getRpcUrl } from "./config";
   import store from "./store";
   import Layout from "./Layout.svelte";
   import TestContainer from "./lib/TestContainer.svelte";
@@ -35,30 +35,26 @@
   let networkError = false;
   let showCustomNetworkInput = false;
   let customNetworkInput = "https://";
-  const groupBy = (item) => item.group;
+  const groupBy = (item: { group: any }) => item.group;
 
-  const changeNetwork = (event) => {
+  const changeNetwork = (event: { detail: { value: string } }) => {
     networkError = false;
     showCustomNetworkInput = false;
-    const walletComponent = layout.getSideBar().getWallet();
     switch (event.detail.value.toLocaleLowerCase()) {
       case "mainnet":
         store.updateNetworkType(NetworkType.MAINNET);
         break;
       case "ghostnet":
         store.updateNetworkType(NetworkType.GHOSTNET);
         break;
-      case "mumbainet":
-        store.updateNetworkType(NetworkType.MUMBAINET);
-        break;
       case "nairobinet":
         store.updateNetworkType(NetworkType.NAIROBINET);
         break;
       case "custom":
         //TODO: input custom RPC URL
         showCustomNetworkInput = true;
         setTimeout(() => {
-          document.getElementById("custom-network-input").focus();
+          document.getElementById("custom-network-input")?.focus();
         }, 100);
         break;
       default:
@@ -67,7 +63,7 @@
     }
   };
 
-  const changeMatrixNode = (event) => {
+  const changeMatrixNode = (event: { detail: { value: string } }) => {
     switch (event.detail.value.toLocaleLowerCase()) {
       case "default":
         store.updateMatrixNode("beacon-node-1.sky.papers.tech");
@@ -77,9 +73,10 @@
         break;
       case "custom":
         store.updateMatrixNode("beacon-node-1.sky.papers.tech");
-        if (!rpcUrl.custom) {
+        if (!getRpcUrl(NetworkType.CUSTOM)) {
+          // TODO: This logic does not seem right
           // in case the user did not provide any custom network URL
-          store.updateTezos(new TezosToolkit(rpcUrl.ghostnet));
+          store.updateTezos(new TezosToolkit(getRpcUrl(NetworkType.GHOSTNET)));
         }
         break;
     }
@@ -116,7 +113,7 @@
 <style lang="scss">
   .connect-container {
     width: 100%;
-    height: 100%;
+    height: 60%;
     display: grid;
     place-items: center;
 
@@ -194,7 +191,7 @@
           <button
             on:click={() => {
               const wallet = document.getElementById("wallet-button");
-              wallet.click();
+              wallet?.click();
             }}
           >
             <span class="material-icons-outlined"> account_balance_wallet </span>

diff --git a/apps/taquito-test-dapp/src/Layout.svelte b/apps/taquito-test-dapp/src/Layout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import Sidebar from "./lib/Sidebar.svelte";
-  import TaquitoLogo from "./lib/TaquitoLogo.svelte";
   import store from "./store";
   let side: Sidebar;
 
@@ -25,6 +24,25 @@
       background: rgba(4, 189, 228, 0.8);
     }
   }
+  .events-container {
+    border: 1px solid navy;
+    margin: 3px;
+    padding: 3px;
+    grid-column: 1 / 3;
+    display: flex;
+    flex-direction: column;
+
+    > span {
+      color: white;
+      font-weight: bold;
+      font-size: larger;
+    }
+    ul {
+      overflow-y: scroll;
+      flex-grow: 1; 
+      background-color: skyblue;
+    }
+  }
 </style>
 
 <main>
@@ -35,6 +53,15 @@
   </div>
   <Sidebar bind:this={side}/>
   <slot />
+  <div class="events-container">
+    <span>Events ({$store.eventLogs.length}): <button on:click={store.clearEvents} style="display: inline;">clear</button></span>
+    <ul>
+      {#each $store.eventLogs as event}
+        <li>
+          <span class="material-icons-outlined"> event_note </span>
+          <span>{event}</span>
+        </li>
+      {/each}
+    </ul>
+  </div>  
 </main>
-<TaquitoLogo dir="normal" />
-<TaquitoLogo dir="reverse" />
diff --git a/apps/taquito-test-dapp/src/config.ts b/apps/taquito-test-dapp/src/config.ts
@@ -1,14 +1,31 @@
 import { NetworkType } from "@airgap/beacon-sdk";
 
-export const rpcUrl = {
-  mumbainet: "https://mumbainet.ecadinfra.com/",
-  nairobinet: "https://nairobinet.ecadinfra.com/",
-  ghostnet: "https://ghostnet.ecadinfra.com/",
-  ithacanet: "https://ithacanet.ecadinfra.com/",
-  mainnet: "https://mainnet.ecadinfra.com", //"https://mainnet-tezos.giganode.io"
-  custom: "https://ghostnet.ecadinfra.com/"
+export type SupportedNetworks = NetworkType.NAIROBINET | NetworkType.GHOSTNET | NetworkType.MAINNET | NetworkType.CUSTOM;
+
+const rpcUrls: Record<SupportedNetworks, string> = {
+  [NetworkType.NAIROBINET]: "https://nairobinet.ecadinfra.com/",
+  [NetworkType.GHOSTNET]: "https://ghostnet.ecadinfra.com/",
+  [NetworkType.MAINNET]: "https://mainnet.ecadinfra.com", //"https://mainnet-tezos.giganode.io"
+  [NetworkType.CUSTOM]: "https://ghostnet.ecadinfra.com/",
 };
 
+export const getRpcUrl = (networkType: SupportedNetworks): string => {
+  return rpcUrls[networkType];
+}
+
+export const getTzKtUrl = (networkType: SupportedNetworks): string | undefined => {
+  switch (networkType) {
+    case NetworkType.NAIROBINET:
+      return "https://nairobinet.tzkt.io";
+    case NetworkType.GHOSTNET:
+      return "https://ghostnet.tzkt.io";
+    case NetworkType.MAINNET:
+      return "https://tzkt.io";
+    case NetworkType.CUSTOM:
+      return undefined;
+  }
+}
+
 export const defaultMatrixNode = "beacon-node-1.sky.papers.tech";
 
 export const defaultNetworkType = NetworkType.GHOSTNET;

diff --git a/apps/taquito-test-dapp/src/lib/Sidebar.svelte b/apps/taquito-test-dapp/src/lib/Sidebar.svelte
@@ -21,7 +21,7 @@
 <style lang="scss">
   section {
     padding: 10px;
-    height: calc(100vh - 20px);
+    height: 100%;
     color: white;
     display: grid;
     grid-template-rows: 8% 5% 87%;
@@ -43,17 +43,14 @@
 
     ul {
       height: 95%;
-      list-style-image: url(description_white_24dp.svg);
+      list-style-image: url(../assets/icons/description_white_24dp.svg);
       list-style-position: inside;
-      overflow: auto;
+      overflow-y: scroll;
+      overflow-x: auto;
       margin-left: 0px;
       margin-bottom: 50px;
       padding: 5px 5px;
 
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
       li {
         background: rgba(80, 227, 194, 0.25);
         backdrop-filter: blur(4px);
@@ -103,6 +100,7 @@
       {/each}
     {:else}
       {#each $store.tests as test}
+        <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
         <li
           id={test.id}
           style={$store.userAddress ? "cursor:pointer" : "cursor:not-allowed"}

diff --git a/apps/taquito-test-dapp/src/lib/TestContainer.svelte b/apps/taquito-test-dapp/src/lib/TestContainer.svelte
@@ -4,7 +4,7 @@
   import type { TestSettings, TestResult } from "../types";
   import { shortenHash } from "../utils";
   import { NetworkType } from "@airgap/beacon-sdk";
-  import { stringify } from "@taquito/core";
+  import { getTzKtUrl } from "../config";
 
   let test: TestSettings | undefined;
   let executionTime = 0;
@@ -335,36 +335,12 @@
           {#if opHash}
             <div style="word-break:break-word;">
               Operation hash:
-              {#if $store.networkType === NetworkType.ITHACANET}
-                <a
-                  href={`https://better-call.dev/ithacanet/opg/${opHash}/contents`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {shortenHash(opHash)}
-                </a>
-              {:else if $store.networkType === NetworkType.HANGZHOUNET}
-                <a
-                  href={`https://better-call.dev/hangzhounet/opg/${opHash}/contents`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {shortenHash(opHash)}
-                </a>
-              {:else if $store.networkType === NetworkType.GHOSTNET}
-                <a
-                  href={`https://better-call.dev/ghostnet/opg/${opHash}/contents`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {shortenHash(opHash)}
-                </a>
-              {:else if $store.networkType === NetworkType.MAINNET}
-                <a href={`https://tzkt.io/${opHash}`} target="_blank" rel="noopener noreferrer">
+              {#if $store.networkType === NetworkType.CUSTOM}
+                {shortenHash(opHash)}
+              {:else}
+                <a href={`${getTzKtUrl($store.networkType)}/${opHash}`} target="_blank" rel="noopener noreferrer">
                   {shortenHash(opHash)}
                 </a>
-              {:else}
-                {shortenHash(opHash)}
               {/if}
             </div>
           {/if}

diff --git a/apps/taquito-test-dapp/src/lib/Wallet.svelte b/apps/taquito-test-dapp/src/lib/Wallet.svelte
@@ -4,17 +4,17 @@
   import { TezosToolkit } from "@taquito/taquito";
   import { BeaconWallet } from "@taquito/beacon-wallet";
   // import { BeaconEvent, defaultEventCallbacks } from "@airgap/beacon-sdk";
-  import type { DAppClientOptions, NetworkType } from "@airgap/beacon-sdk";
+  import { BeaconEvent, type DAppClientOptions } from "@airgap/beacon-sdk";
   import store from "../store";
   import { formatTokenAmount, shortenHash } from "../utils";
-  import { defaultMatrixNode, rpcUrl, defaultNetworkType } from "../config";
+  import { defaultMatrixNode, getRpcUrl, defaultNetworkType, type SupportedNetworks } from "../config";
   import type { TezosAccountAddress } from "../types";
 
   let showDialog = false;
   let connectedWallet = "";
 
   const createNewWallet = (config: {
-    networkType: NetworkType,
+    networkType: SupportedNetworks,
   }) => {
     const options: DAppClientOptions = {
       name: "Taquito Test Dapp",
@@ -47,13 +47,15 @@
           networkType: $store.networkType
         });
 
+    subscribeToAllEvents(wallet);
+
     try {
       await wallet.requestPermissions();
 
       const userAddress = (await wallet.getPKH()) as TezosAccountAddress;
       store.updateUserAddress(userAddress);
-
-      const Tezos = new TezosToolkit(rpcUrl[$store.networkType]);
+      const url = getRpcUrl($store.networkType);
+      const Tezos = new TezosToolkit(url);
       Tezos.setWalletProvider(wallet);
       store.updateTezos(Tezos);
 
@@ -72,15 +74,15 @@
   };
 
   const disconnectWallet = async () => {
-    await $store.wallet.clearActiveAccount();
+    await $store.wallet?.clearActiveAccount();
     store.updateUserAddress(undefined);
     store.updateUserBalance(undefined);
     store.updateWallet(undefined);
     store.updateSelectedTest(undefined);
   };
 
   export const setWallet = async (config: {
-    networkType: NetworkType,
+    networkType: SupportedNetworks,
   }) => {
     if (window && window.localStorage) {
       // finds the Beacon keys
@@ -95,7 +97,8 @@
 
     const wallet = createNewWallet(config);
     store.updateWallet(wallet);
-    const Tezos = new TezosToolkit(rpcUrl[config.networkType]);
+    const url = getRpcUrl(config.networkType);
+    const Tezos = new TezosToolkit(url);
     Tezos.setWalletProvider(wallet);
     store.updateTezos(Tezos);
 
@@ -127,6 +130,44 @@
       }
     }
   });
+
+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));
+
+  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));
+}
 </script>
 
 <style lang="scss">