chore: cleanup

apps/namadillo/src/App/Masp/ShieldedBalanceChart.tsx

@@ -1,26 +1,48 @@
 import { Heading, PieChart, SkeletonLoading } from "@namada/components";
-import { ProgressBarNames } from "@namada/shared";
+import { ProgressBarNames, SdkEvents } from "@namada/shared";
 import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary";
 import { FiatCurrency } from "App/Common/FiatCurrency";
-import {
-  shieldedSyncProgressAtom,
-  shieldedTokensAtom,
-} from "atoms/balance/atoms";
+import { shieldedSyncAtom, shieldedTokensAtom } from "atoms/balance/atoms";
 import { getTotalDollar } from "atoms/balance/functions";
 import { useAtomValue } from "jotai";
+import { useEffect, useState } from "react";
 import { colors } from "theme";
 
 export const ShieldedBalanceChart = (): JSX.Element => {
   const shieldedTokensQuery = useAtomValue(shieldedTokensAtom);
-  const shieledSyncProgressScanned = useAtomValue(
-    shieldedSyncProgressAtom(ProgressBarNames.Scanned)
-  );
-  const shieledSyncProgressFetched = useAtomValue(
-    shieldedSyncProgressAtom(ProgressBarNames.Fetched)
-  );
-  const shieledSyncProgressApplied = useAtomValue(
-    shieldedSyncProgressAtom(ProgressBarNames.Applied)
-  );
+  const shieldedSyncProgress = useAtomValue(shieldedSyncAtom);
+
+  const [progress, setProgress] = useState({
+    [ProgressBarNames.Scanned]: 0,
+    [ProgressBarNames.Fetched]: 0,
+    [ProgressBarNames.Applied]: 0,
+  });
+
+  useEffect(() => {
+    shieldedSyncProgress &&
+      shieldedSyncProgress.on(
+        SdkEvents.ProgressBarIncremented,
+        ({ name, current, total }) => {
+          const perc =
+            total === 0 ? 0 : (
+              Math.min(Math.floor((current / total) * 100), 100)
+            );
+          setProgress((prev) => ({
+            ...prev,
+            [name]: perc,
+          }));
+        }
+      );
+
+    shieldedSyncProgress &&
+      shieldedSyncProgress.on(SdkEvents.ProgressBarFinished, ({ name }) => {
+        setProgress((prev) => ({
+          ...prev,
+          [name]: 100,
+        }));
+      });
+  }, [shieldedSyncProgress]);
+
   const shieldedDollars = getTotalDollar(shieldedTokensQuery.data);
 
   return (
@@ -66,38 +88,12 @@ export const ShieldedBalanceChart = (): JSX.Element => {
           }
           <div className="absolute top-0 right-0 text-right">
             Shieled sync progress: <br />
-            <Progress name="Scanned" {...shieledSyncProgressScanned} />
-            <Progress name="Fetched" {...shieledSyncProgressFetched} />
-            <Progress name="Applied" {...shieledSyncProgressApplied} />
+            Scanned: {progress[ProgressBarNames.Scanned]}% <br />
+            Fetched: {progress[ProgressBarNames.Fetched]}% <br />
+            Applied: {progress[ProgressBarNames.Applied]}%
           </div>
         </AtomErrorBoundary>
       </div>
     </div>
   );
 };
-
-const Progress = ({
-  name,
-  status,
-  current,
-  total,
-}: {
-  name: string;
-  status: string;
-  current: number;
-  total: number;
-}): JSX.Element => {
-  const perc = current === 0 && total === 0 ? 0 : (current / total) * 100;
-  return (
-    <div>
-      {name}:
-      {status === "pending" ?
-        <div>-</div>
-      : status === "loading" ?
-        <div>{Math.floor(perc)}%</div>
-      : status === "success" ?
-        <div>100%</div>
-      : <div>error</div>}
-    </div>
-  );
-};

apps/namadillo/src/atoms/balance/atoms.ts

@@ -1,4 +1,5 @@
 import { Asset } from "@chain-registry/types";
+import { SdkEvents } from "@namada/shared";
 import {
   accountsAtom,
   defaultAccountAtom,
@@ -14,9 +15,9 @@ import { availableAssetsAtom } from "atoms/integrations";
 import { maspIndexerUrlAtom, rpcUrlAtom } from "atoms/settings";
 import { queryDependentFn } from "atoms/utils";
 import BigNumber from "bignumber.js";
+import EventEmitter from "events";
 import { atom } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
-import { atomFamily } from "jotai/utils";
 import { namadaAsset } from "registry/namadaAsset";
 import { AddressWithAsset } from "types";
 import {
@@ -55,13 +56,28 @@ export const viewingKeysAtom = atomWithQuery<[string, string[]]>((get) => {
   };
 });
 
-export const shieldedSyncProgressAtom = atomFamily((_name: string) =>
-  atom<{
-    status: "pending" | "loading" | "success";
-    current: number;
-    total: number;
-  }>({ status: "pending", current: 0, total: 0 })
-);
+export const shieldedSyncAtom = atom<EventEmitter | undefined>((get) => {
+  const viewingKeysQuery = get(viewingKeysAtom);
+  const namTokenAddressQuery = get(nativeTokenAddressAtom);
+  const rpcUrl = get(rpcUrlAtom);
+  const maspIndexerUrl = get(maspIndexerUrlAtom);
+
+  const viewingKeys = viewingKeysQuery.data;
+  if (!viewingKeys) {
+    return;
+  }
+  const namTokenAddress = namTokenAddressQuery.data;
+  const [_, allViewingKeys] = viewingKeys!;
+
+  const emitter = shieldedSync(
+    rpcUrl,
+    maspIndexerUrl,
+    namTokenAddress!,
+    allViewingKeys
+  );
+
+  return emitter;
+});
 
 export const shieldedBalanceAtom = atomWithQuery<
   { address: string; amount: BigNumber }[]
@@ -72,6 +88,7 @@ export const shieldedBalanceAtom = atomWithQuery<
   const namTokenAddressQuery = get(nativeTokenAddressAtom);
   const rpcUrl = get(rpcUrlAtom);
   const maspIndexerUrl = get(maspIndexerUrlAtom);
+  const shieldedSync = get(shieldedSyncAtom);
 
   return {
     refetchInterval: enablePolling ? 1000 : false,
@@ -82,22 +99,19 @@ export const shieldedBalanceAtom = atomWithQuery<
       namTokenAddressQuery.data,
       rpcUrl,
       maspIndexerUrl,
+      shieldedSync,
     ],
     ...queryDependentFn(async () => {
       const viewingKeys = viewingKeysQuery.data;
       const tokenAddresses = tokenAddressesQuery.data;
       if (!viewingKeys || !tokenAddresses) {
         return [];
       }
-      const namTokenAddress = namTokenAddressQuery.data;
-      const [viewingKey, allViewingKeys] = viewingKeys;
+      const [viewingKey] = viewingKeys;
 
-      await shieldedSync(
-        rpcUrl,
-        maspIndexerUrl,
-        namTokenAddress!,
-        allViewingKeys
-      );
+      await new Promise<void>((resolve) => {
+        shieldedSync!.once(SdkEvents.ProgressBarFinished, () => resolve());
+      });
 
       const response = await fetchShieldedBalance(
         viewingKey,

apps/namadillo/src/atoms/balance/services.ts

@@ -1,17 +1,16 @@
 import * as Comlink from "comlink";
+import { EventEmitter } from "events";
 
-import { Balance, SdkEvents } from "@namada/sdk/web";
-import { getDefaultStore } from "jotai";
+import { Balance } from "@namada/sdk/web";
 import { getSdkInstance } from "utils/sdk";
 import {
   Events,
+  ProgressBarFinished,
   ProgressBarIncremented,
   ProgressBarStarted,
   Worker as ShieldedSyncWorkerApi,
 } from "workers/ShieldedSyncWorker";
 import ShieldedSyncWorker from "workers/ShieldedSyncWorker?worker";
-// TODO: circular dependency
-import { shieldedSyncProgressAtom } from "./atoms";
 
 const sqsOsmosisApi = "https://sqs.osmosis.zone/";
 
@@ -23,74 +22,41 @@ export const fetchCoinPrices = async (
     `${sqsOsmosisApi}/tokens/prices?base=${assetBaseList.sort((a, b) => a.localeCompare(b)).join(",")}`
   ).then((res) => res.json());
 
-const isStarted = (event: Events): event is ProgressBarStarted => {
-  return event.type === SdkEvents.ProgressBarStarted;
-};
-
-const isIncremented = (event: Events): event is ProgressBarIncremented => {
-  return event.type === SdkEvents.ProgressBarIncremented;
-};
-
-const isFinished = (event: Events): event is ProgressBarStarted => {
-  return event.type === SdkEvents.ProgressBarFinished;
-};
+export type ShieldedSyncEventMap = Record<
+  string,
+  (ProgressBarStarted | ProgressBarIncremented | ProgressBarFinished)[]
+>;
 
-export const shieldedSync = async (
+export function shieldedSync(
   rpcUrl: string,
   maspIndexerUrl: string,
   token: string,
   viewingKeys: string[]
-): Promise<void> => {
+): EventEmitter<ShieldedSyncEventMap> {
   const worker = new ShieldedSyncWorker();
   const shieldedSyncWorker = Comlink.wrap<ShieldedSyncWorkerApi>(worker);
+  const emitter = new EventEmitter<ShieldedSyncEventMap>();
 
   worker.onmessage = (event: MessageEvent<Events>) => {
-    const store = getDefaultStore();
-    const { data } = event;
-
-    if (isStarted(data)) {
-      store.set(shieldedSyncProgressAtom(data.payload.name), {
-        status: "loading",
-        current: 0,
-        total: 0,
-      });
-    }
-    if (isIncremented(data)) {
-      const { name, current, total } = data.payload;
-
-      store.set(shieldedSyncProgressAtom(name), {
-        status: "loading",
-        current,
-        total,
-      });
-    }
-    if (isFinished(data)) {
-      store.set(shieldedSyncProgressAtom(data.payload.name), {
-        status: "success",
-        current: 0,
-        total: 0,
-      });
-    }
+    emitter.emit(event.data.type, event.data);
   };
 
-  await shieldedSyncWorker.init({
-    type: "init",
-    payload: {
-      rpcUrl,
-      maspIndexerUrl,
-      token,
-    },
-  });
+  (async () => {
+    await shieldedSyncWorker.init({
+      type: "init",
+      payload: { rpcUrl, maspIndexerUrl, token },
+    });
 
-  await shieldedSyncWorker.sync({
-    type: "sync",
-    payload: {
-      vks: viewingKeys,
-    },
-  });
+    await shieldedSyncWorker.sync({
+      type: "sync",
+      payload: { vks: viewingKeys },
+    });
 
-  worker.terminate();
-};
+    worker.terminate();
+  })();
+
+  return emitter;
+}
 
 export const fetchShieldedBalance = async (
   viewingKey: string,

apps/namadillo/src/workers/ShieldedSyncWorker.ts

@@ -3,12 +3,15 @@ import { getSdk, Sdk, SdkEvents } from "@namada/sdk/web";
 import * as Comlink from "comlink";
 import { Init, InitDone, Sync, SyncDone } from "./ShieldedSyncMessages";
 
-export type ProgressBarStarted = { type: string; payload: { name: string } };
+export type ProgressBarStarted = { type: string; name: string };
 export type ProgressBarIncremented = {
   type: string;
-  payload: { name: string; current: number; total: number };
+  name: string;
+  current: number;
+  total: number;
 };
-export type ProgressBarFinished = { type: string; payload: { name: string } };
+
+export type ProgressBarFinished = { type: string; name: string };
 export type Events =
   | ProgressBarStarted
   | ProgressBarIncremented
@@ -21,22 +24,23 @@ export class Worker {
     const { cryptoMemory } = await initMulticore();
     this.sdk = newSdk(cryptoMemory, m.payload);
 
-    addEventListener(SdkEvents.ProgressBarStarted, (data) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const payload = JSON.parse((data as any).detail);
-      postMessage({ type: SdkEvents.ProgressBarStarted, payload });
+    // TODO: this can be reduced to one event listener
+    addEventListener(SdkEvents.ProgressBarStarted, (e) => {
+      const event = e as CustomEvent<string>;
+      const payload = JSON.parse(event.detail);
+      postMessage({ ...payload, type: SdkEvents.ProgressBarStarted });
     });
 
-    addEventListener(SdkEvents.ProgressBarIncremented, (data) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const payload = JSON.parse((data as any).detail);
-      postMessage({ type: SdkEvents.ProgressBarIncremented, payload });
+    addEventListener(SdkEvents.ProgressBarIncremented, (e) => {
+      const event = e as CustomEvent<string>;
+      const payload = JSON.parse(event.detail);
+      postMessage({ ...payload, type: SdkEvents.ProgressBarIncremented });
     });
 
-    addEventListener(SdkEvents.ProgressBarFinished, (data) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const payload = JSON.parse((data as any).detail);
-      postMessage({ type: SdkEvents.ProgressBarFinished, payload });
+    addEventListener(SdkEvents.ProgressBarFinished, (e) => {
+      const event = e as CustomEvent<string>;
+      const payload = JSON.parse(event.detail);
+      postMessage({ ...payload, type: SdkEvents.ProgressBarFinished });
     });
 
     return { type: "init-done", payload: null };

packages/shared/lib/src/query.rs

@@ -32,8 +32,8 @@ use namada_sdk::state::BlockHeight;
 use namada_sdk::state::Key;
 use namada_sdk::token;
 use namada_sdk::tx::{
-    TX_BOND_WASM, TX_CLAIM_REWARDS_WASM, TX_REDELEGATE_WASM, TX_REVEAL_PK, TX_TRANSFER_WASM,
-    TX_UNBOND_WASM, TX_VOTE_PROPOSAL, TX_WITHDRAW_WASM, TX_IBC_WASM,
+    TX_BOND_WASM, TX_CLAIM_REWARDS_WASM, TX_IBC_WASM, TX_REDELEGATE_WASM, TX_REVEAL_PK,
+    TX_TRANSFER_WASM, TX_UNBOND_WASM, TX_VOTE_PROPOSAL, TX_WITHDRAW_WASM,
 };
 use namada_sdk::uint::I256;
 use namada_sdk::wallet::DatedKeypair;
@@ -370,6 +370,7 @@ impl Query {
             .fetched_tracker(progress_bar_fetched)
             .applied_tracker(progress_bar_applied)
             .shutdown_signal(shutdown_signal_web)
+            .block_batch_size(100)
             .wait_for_last_query_height(true)
             .retry_strategy(RetryStrategy::Times(10))
             .build();