feat(wallet connect 2): @taquito/wallet-connect-2 package + support in the Taquito test dapp

apps/taquito-test-dapp/package.json

@@ -29,6 +29,7 @@
     "@taquito/taquito": "^15.0.0",
     "@taquito/utils": "^15.0.0",
     "buffer": "^6.0.3",
+    "svelte-modals": "^2.0.0-beta.2",
     "svelte-select": "^4.4.7",
     "vite-compatible-readable-stream": "^3.6.1"
   },

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

@@ -4,7 +4,7 @@
   import { NetworkType } from "@airgap/beacon-sdk";
   import Select from "svelte-select";
   import { rpcUrl } from "./config";
-  import store from "./store";
+  import store, { SDK } from "./store";
   import Layout from "./Layout.svelte";
   import TestContainer from "./lib/TestContainer.svelte";
 
@@ -42,14 +42,6 @@
         store.updateTezos(new TezosToolkit(rpcUrl.mainnet));
         store.updateNetworkType(NetworkType.MAINNET);
         break;
-      case "hangzhounet":
-        store.updateTezos(new TezosToolkit(rpcUrl.hangzhounet));
-        store.updateNetworkType(NetworkType.HANGZHOUNET);
-        break;
-      case "ithacanet":
-        store.updateTezos(new TezosToolkit(rpcUrl.ithacanet));
-        store.updateNetworkType(NetworkType.ITHACANET);
-        break;
       case "ghostnet":
         store.updateTezos(new TezosToolkit(rpcUrl.ghostnet));
         store.updateNetworkType(NetworkType.GHOSTNET);
@@ -149,6 +141,18 @@
           margin: 10px 0px;
         }
 
+        .sdk {
+          border: 1px solid;
+          border-radius: 10px;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          padding: 20px;
+          grid-row-gap: 10px;
+          align-items: center;
+          width: 100%;
+        }
+
         button {
           width: 100%;
           justify-content: center;
@@ -195,15 +199,50 @@
           <div>(use Chrome for a better experience)</div>
         {/if}
         <div class="options">
-          <button
-            on:click={() => {
-              const wallet = document.getElementById("wallet-button");
-              wallet.click();
-            }}
-          >
-            <span class="material-icons-outlined"> account_balance_wallet </span>
-            &nbsp; Connect your wallet
-          </button>
+          <div class="sdk">
+            <span><strong>Connect using beacon sdk</strong></span>
+            <button
+              on:click={() => {
+                const wallet = document.getElementById("wallet-button");
+                store.updateSdk(SDK.BEACON);
+                wallet.click();
+              }}
+            >
+              <span class="material-icons-outlined"> account_balance_wallet </span>
+              &nbsp; Connect your wallet
+            </button>
+            <label for="matrix-node-select" class="custom-select">
+              <span class="select-title">Matrix node:</span>
+              <Select
+                id="matrix-node-select"
+                containerStyles="width:200px"
+                items={availableMatrixNodes}
+                value={$store.matrixNode}
+                on:select={changeMatrixNode}
+              />
+            </label>
+            <label>
+              <span class="select-title">Disable default events:</span>
+              <input
+                type="checkbox"
+                checked={$store.disableDefaultEvents}
+                on:change={() => store.updateDefaultEvents()}
+              />
+            </label>
+          </div>
+          <div class="sdk">
+            <span><strong>Connect using Wallet Connect 2</strong></span>
+            <button
+              on:click={() => {
+                const walletConnect2 = document.getElementById("wallet-button");
+                store.updateSdk(SDK.WC2);
+                walletConnect2.click();
+              }}
+            >
+              <span class="material-icons-outlined"> account_balance_wallet </span>
+              &nbsp; Connect your wallet
+            </button>
+          </div>
           <button>
             <span class="material-icons-outlined"> usb </span>
             &nbsp; Connect your Nano ledger
@@ -236,24 +275,6 @@
               }}
             />
           {/if}
-          <label for="matrix-node-select" class="custom-select">
-            <span class="select-title">Matrix node:</span>
-            <Select
-              id="matrix-node-select"
-              containerStyles="width:200px"
-              items={availableMatrixNodes}
-              value={$store.matrixNode}
-              on:select={changeMatrixNode}
-            />
-          </label>
-          <label>
-            <span class="select-title">Disable default events:</span>
-            <input
-              type="checkbox"
-              checked={$store.disableDefaultEvents}
-              on:change={() => store.updateDefaultEvents()}
-            />
-          </label>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,79 @@
+<script>
+  import { createModalEventDispatcher } from "svelte-modals";
+
+  export let isOpen;
+  export let title;
+  export let options;
+
+  const dispatch = createModalEventDispatcher();
+</script>
+
+<style>
+  .modal {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: black;
+
+    /* allow click-through to backdrop */
+    pointer-events: none;
+  }
+
+  .contents {
+    min-width: 240px;
+    border-radius: 6px;
+    padding: 16px;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    pointer-events: auto;
+  }
+  .button {
+    color: black;
+    border-color: black;
+  }
+
+  h2 {
+    text-align: center;
+    font-size: 24px;
+  }
+
+  p {
+    text-align: center;
+    margin-top: 16px;
+  }
+
+  .actions {
+    margin-top: 32px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 8px;
+  }
+</style>
+
+{#if isOpen}
+  <div role="dialog" class="modal">
+    <div class="contents">
+      <h2>{title}</h2>
+      <div class="actions">
+        {#each options as option}
+          <button class="button" on:click={() => dispatch("select", option)}>
+            {option.peerMetadata.logo ?? ""}
+            {option.peerMetadata.name}
+          </button>
+        {/each}
+        <p>or</p>
+        <button class="button" on:click={() => dispatch("select", "new_pairing")}
+          >New Pairing</button
+        >
+      </div>
+    </div>
+  </div>
+{/if}

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

@@ -12,6 +12,7 @@
   let opHash = "";
   let input = { text: "", fee: 400, storageLimit: 400, gasLimit: 4000 };
   let testResult: { id: string; title: string; body: any };
+  let error: Error | undefined;
 
   const run = async () => {
     success = undefined;
@@ -63,7 +64,8 @@
           };
         }
       } else {
-        throw "Error";
+        error = result.error;
+        throw result.error;
       }
     } catch (error) {
       console.log(error);
@@ -274,7 +276,9 @@
             </div>
             {#if test.documentation}
               <div class="learn-more">
-                <a href={test.documentation} target="_blank" rel="noopener noreferrer">Learn more about <b>{test.keyword}</b> with Taquito</a>
+                <a href={test.documentation} target="_blank" rel="noopener noreferrer"
+                  >Learn more about <b>{test.keyword}</b> with Taquito</a
+                >
               </div>
             {/if}
           </div>
@@ -369,6 +373,15 @@
           <h4>
             Test failed <span class="material-icons-outlined"> sentiment_very_dissatisfied </span>
           </h4>
+          {#if error}
+            <div style="word-break:break-word; color:#b92a2a">
+              {#if error instanceof Error}
+                {error}
+              {:else}
+                {JSON.stringify(error)}
+              {/if}
+            </div>
+          {/if}
         </div>
       {/if}
       <div class="test-run">
@@ -383,7 +396,9 @@
       </div>
       {#if test.documentation}
         <div class="learn-more">
-          <a href={test.documentation} target="_blank" rel="noopener noreferrer">Learn more about <b>{test.keyword}</b> with Taquito</a>
+          <a href={test.documentation} target="_blank" rel="noopener noreferrer"
+            >Learn more about <b>{test.keyword}</b> with Taquito</a
+          >
         </div>
       {/if}
     {/if}