Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Subscribe to all events in the test dApp #2713

Merged
merged 4 commits into from
Nov 14, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: subscribed to all events in the test dApp
  • Loading branch information
ac10n committed Nov 8, 2023
commit d0aca3401426f9a948ab0feb54752ef83ffe5872
22 changes: 10 additions & 12 deletions apps/taquito-test-dapp/src/App.svelte
Original file line number Diff line number Diff line change
@@ -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,9 +35,9 @@
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();
@@ -48,17 +48,14 @@
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 +64,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 +74,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 +114,7 @@
<style lang="scss">
.connect-container {
width: 100%;
height: 100%;
height: 60%;
display: grid;
place-items: center;

@@ -194,7 +192,7 @@
<button
on:click={() => {
const wallet = document.getElementById("wallet-button");
wallet.click();
wallet?.click();
}}
>
<span class="material-icons-outlined"> account_balance_wallet </span>
19 changes: 19 additions & 0 deletions apps/taquito-test-dapp/src/Layout.svelte
Original file line number Diff line number Diff line change
@@ -25,6 +25,14 @@
background: rgba(4, 189, 228, 0.8);
}
}
.events-container {
background-color: skyblue;
width: 100%;
grid-column: 1 / 3;
ul {
overflow-y: scroll;
}
}
</style>

<main>
@@ -35,6 +43,17 @@
</div>
<Sidebar bind:this={side}/>
<slot />
<div class="events-container">
Events ({$store.eventLogs.length}): <button on:click={store.clearEvents}>clear</button>
<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" />
31 changes: 24 additions & 7 deletions apps/taquito-test-dapp/src/config.ts
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 4 additions & 6 deletions apps/taquito-test-dapp/src/lib/Sidebar.svelte
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@
<style lang="scss">
section {
padding: 10px;
height: calc(100vh - 20px);
height: calc(80vh - 20px);
color: white;
display: grid;
grid-template-rows: 8% 5% 87%;
@@ -45,15 +45,12 @@
height: 95%;
list-style-image: url(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"}
34 changes: 5 additions & 29 deletions apps/taquito-test-dapp/src/lib/TestContainer.svelte
Original file line number Diff line number Diff line change
@@ -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">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious of the reason to change from better-call.dev to tzkt

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAIK TzKt is the newer, more feature rick, more actively developed successor to BCD.

{shortenHash(opHash)}
</a>
{:else}
{shortenHash(opHash)}
{/if}
</div>
{/if}
51 changes: 43 additions & 8 deletions apps/taquito-test-dapp/src/lib/Wallet.svelte
Original file line number Diff line number Diff line change
@@ -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,38 @@
}
}
});

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));
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">
Loading