feat: testdapp with walletconnect option

ecadlabs · Oct 25, 2024 · 303376c · 303376c
1 parent f5fdb00
commit 303376c
Show file tree

Hide file tree

Showing 16 changed files with 852 additions and 296 deletions.
diff --git a/README.md b/README.md
@@ -80,6 +80,8 @@ Taquito is organized as a [monorepo](https://en.wikipedia.org/wiki/Monorepo), an
 | [@taquito/contracts-library](packages/taquito-contracts-library) | Provides functionality specify static data related to contracts                                      |
 | [@taquito/ledger-signer](packages/taquito-ledger-signer)         | Provides functionality for ledger signer provider                                                    |
 | [@taquito/timelock](packages/taquito-timelock)                   | Provides functionality to create and open timelocks                                                  |
+| [@taquito/wallet-connect](packages/taquito-wallet-connect)       | WalletConnect2 class can be injected into the `TezosToolkit` to work with the wallet API.            |
+
 
 ## API Documentation
 

diff --git a/apps/taquito-test-dapp/package.json b/apps/taquito-test-dapp/package.json
@@ -30,7 +30,9 @@
     "@taquito/core": "^20.1.0",
     "@taquito/taquito": "^20.1.0",
     "@taquito/utils": "^20.1.0",
+    "@taquito/wallet-connect-2": "^20.1.0",
     "buffer": "^6.0.3",
+    "svelte-modals": "^2.0.0-beta.2",
     "svelte-select": "^5.8.3",
     "vite-compatible-readable-stream": "^3.6.1"
   },

diff --git a/apps/taquito-test-dapp/src/App.svelte b/apps/taquito-test-dapp/src/App.svelte
@@ -4,7 +4,7 @@
   import { NetworkType } from "@airgap/beacon-types";
   import Select from "svelte-select";
   import { getRpcUrl } from "./config";
-  import store from "./store";
+  import store, { SDK } from "./store";
   import Layout from "./Layout.svelte";
   import TestContainer from "./lib/TestContainer.svelte";
 
@@ -13,7 +13,6 @@
   let browser = "";
   let availableNetworks = [
     { value: "ghostnet", label: "Ghostnet", group: "current testnets" },
-    { value: "oxfordnet", label: "Oxfordnet", group: "current testnets" },
     { value: "parisnet", label: "Parisnet", group: "current testnets" },
     { value: "mainnet", label: "Mainnet", group: "mainnet" },
     { value: "dailynet", label: "Dailynet", group: "other testnets" },
@@ -40,9 +39,6 @@
       case "ghostnet":
         store.updateNetworkType(NetworkType.GHOSTNET);
         break;
-      case "oxfordnet":
-        store.updateNetworkType(NetworkType.OXFORDNET);
-        break;
       case "parisnet":
         store.updateNetworkType(NetworkType.PARISNET);
         break;
@@ -129,6 +125,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;
@@ -175,15 +183,32 @@
           <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>
+          </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

diff --git a/apps/taquito-test-dapp/src/config.ts b/apps/taquito-test-dapp/src/config.ts
@@ -1,13 +1,13 @@
-import { NetworkType } from '@airgap/beacon-types';
+import { NetworkType as NetworkTypeBeacon } from "@airgap/beacon-sdk";
+import { NetworkType as NetworkTypeWc2 } from "@taquito/wallet-connect-2";
 
-export type SupportedNetworks = NetworkType.PARISNET | NetworkType.OXFORDNET | NetworkType.GHOSTNET | NetworkType.MAINNET | NetworkType.CUSTOM;
+export type SupportedNetworks = NetworkTypeBeacon.MAINNET | NetworkTypeBeacon.GHOSTNET | NetworkTypeBeacon.PARISNET | NetworkTypeWc2.MAINNET | NetworkTypeWc2.GHOSTNET | NetworkTypeWc2.PARISNET | NetworkTypeBeacon.CUSTOM;
 
 const rpcUrls: Record<SupportedNetworks, string> = {
-  [NetworkType.MAINNET]: "https://mainnet.ecadinfra.com",
-  [NetworkType.GHOSTNET]: "https://ghostnet.ecadinfra.com/",
-  [NetworkType.OXFORDNET]: "https://oxfordnet.ecadinfra.com/",
-  [NetworkType.PARISNET]: "https://rpc.pariscnet.teztnets.com/",
-  [NetworkType.CUSTOM]: "https://ghostnet.ecadinfra.com/",
+  [NetworkTypeBeacon.MAINNET]: "https://mainnet.ecadinfra.com",
+  [NetworkTypeBeacon.GHOSTNET]: "https://ghostnet.ecadinfra.com/",
+  [NetworkTypeBeacon.PARISNET]: "https://rpc.pariscnet.teztnets.com/",
+  [NetworkTypeBeacon.CUSTOM]: "https://ghostnet.ecadinfra.com/",
 };
 
 export const getRpcUrl = (networkType: SupportedNetworks): string => {
@@ -16,22 +16,23 @@ export const getRpcUrl = (networkType: SupportedNetworks): string => {
 
 export const getTzKtUrl = (networkType: SupportedNetworks): string | undefined => {
   switch (networkType) {
-    case NetworkType.MAINNET:
+    case NetworkTypeBeacon.MAINNET:
+    case NetworkTypeWc2.MAINNET:
       return "https://tzkt.io";
-    case NetworkType.GHOSTNET:
+    case NetworkTypeBeacon.GHOSTNET:
+    case NetworkTypeWc2.GHOSTNET:
       return "https://ghostnet.tzkt.io";
-    case NetworkType.OXFORDNET:
-      return "https://oxfordnet.tzkt.io";
-    case NetworkType.PARISNET:
+    case NetworkTypeBeacon.PARISNET:
+    case NetworkTypeWc2.PARISNET:
       return "https://parisnet.tzkt.io";
-    case NetworkType.CUSTOM:
+    case NetworkTypeBeacon.CUSTOM:
       return undefined;
   }
 }
 
 export const defaultMatrixNode = "beacon-node-1.sky.papers.tech";
 
-export const defaultNetworkType = NetworkType.GHOSTNET;
+export const defaultNetworkType = NetworkTypeBeacon.GHOSTNET;
 
 // new protocol updated rpc url in example/data/test-dapp-contract.ts and npm -w example run example:deploy-dapp
 export const contractAddress = {

diff --git a/apps/taquito-test-dapp/src/lib/ModalActivePairing.svelte b/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}
diff --git a/apps/taquito-test-dapp/src/lib/TestContainer.svelte b/apps/taquito-test-dapp/src/lib/TestContainer.svelte
@@ -5,14 +5,26 @@
   import { shortenHash } from "../utils";
   import { NetworkType } from "@airgap/beacon-types";
   import { getTzKtUrl } from "../config";
+  import { BeaconWallet } from "@taquito/beacon-wallet";
 
   let test: TestSettings | undefined;
   let executionTime = 0;
   let loading = false;
   let success: boolean | undefined;
   let opHash = "";
-  let input = { text: "", fee: 400, storageLimit: 400, gasLimit: 1320, amount: 0, address: "", delegate: "", stake: 0, unstake: 0 };
+  let input = {
+    text: "",
+    fee: 400,
+    storageLimit: 400,
+    gasLimit: 1320,
+    amount: 0,
+    address: "",
+    delegate: "",
+    stake: 0,
+    unstake: 0,
+  };
   let testResult: { id: string; title: string; body: any };
+  let error: Error | undefined;
 
   const run = async () => {
     success = undefined;
@@ -70,7 +82,8 @@
           };
         }
       } else {
-        throw "Error";
+        error = result.error;
+        throw result.error;
       }
     } catch (error) {
       console.log(error);
@@ -82,7 +95,9 @@
   };
 
   const switchAccount = async () => {
-    await $store.wallet.clearActiveAccount();
+    if ($store.wallet instanceof BeaconWallet) {
+      await $store.wallet.clearActiveAccount();
+    }
     store.updateUserAddress(undefined);
     store.updateUserBalance(undefined);
     store.updateWallet(undefined);
@@ -306,21 +321,21 @@
             bind:value={input.text}
           />
         </div>
-        {:else if test.inputRequired && test.inputType === "delegate"}
+      {:else if test.inputRequired && test.inputType === "delegate"}
         <div class="test-input set-delegate">
           <label for="delegate-address">
             <span>Delegate address</span>
             <input type="delegate" id="delegate-address" bind:value={input.delegate} />
           </label>
         </div>
-        {:else if test.inputRequired && test.inputType === "stake"}
+      {:else if test.inputRequired && test.inputType === "stake"}
         <div class="test-input stake">
           <label for="stake-amount">
             <span>Stake amount</span>
             <input type="stake" id="stake-amount" bind:value={input.stake} />
           </label>
         </div>
-        {:else if test.inputRequired && test.inputType === "unstake"}
+      {:else if test.inputRequired && test.inputType === "unstake"}
         <div class="test-input unstake">
           <label for="unstake-amount">
             <span>Unstake amount</span>
@@ -392,6 +407,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">