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.

Sign up for GitHub

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

Subscribe to all events in the test dApp #2713

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d0aca34
feat: subscribed to all events in the test dApp
ac10n Oct 25, 2023
e81ba36
chore: slightly improve apparance of event logs
ac10n Oct 25, 2023
248842b
chore: minor improvements to appearance
ac10n Oct 26, 2023
34d6ba1
chore: clean unnecessary comments
ac10n Nov 10, 2023
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
23 changes: 10 additions & 13 deletions apps/taquito-test-dapp/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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:
Expand All @@ -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");
Expand All @@ -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;
}
Expand Down Expand Up @@ -116,7 +113,7 @@
<style lang="scss">
.connect-container {
width: 100%;
height: 100%;
height: 60%;
display: grid;
place-items: center;

Expand Down Expand Up @@ -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>
Expand Down
33 changes: 30 additions & 3 deletions apps/taquito-test-dapp/src/Layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script lang="ts">
import Sidebar from "./lib/Sidebar.svelte";
import TaquitoLogo from "./lib/TaquitoLogo.svelte";
Copy link
Collaborator

Choose a reason for hiding this comment

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

possible to still have a static log somewhere in the background?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think it's OK to remove it for now. I've started a doc to improve the test dApp in notion

import store from "./store";
let side: Sidebar;

Expand All @@ -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>
Expand All @@ -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" />
31 changes: 24 additions & 7 deletions apps/taquito-test-dapp/src/config.ts
View file
Open in desktop
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;
Expand Down
12 changes: 5 additions & 7 deletions apps/taquito-test-dapp/src/lib/Sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -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);
Expand Down Expand Up @@ -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"}
Expand Down
34 changes: 5 additions & 29 deletions apps/taquito-test-dapp/src/lib/TestContainer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}
Expand Down
57 changes: 49 additions & 8 deletions apps/taquito-test-dapp/src/lib/Wallet.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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);

Expand All @@ -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
Expand All @@ -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);

Expand Down Expand Up @@ -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">
Expand Down
Loading
Loading