feat: update syncing view (#2066)

neocybereth · web-flow · commit cb3872944631 · 2025-06-02T21:46:51.000+12:00
diff --git a/apps/namadillo/src/App/Common/PulsingRing.tsx b/apps/namadillo/src/App/Common/PulsingRing.tsx
@@ -4,12 +4,9 @@ import { useScope } from "hooks/useScope";
 import { useRef } from "react";
 import { twMerge } from "tailwind-merge";
 
-type PulsingRingProps = { className?: string; size?: "small" | "large" };
+type PulsingRingProps = { className?: string };
 
-export const PulsingRing = ({
-  className,
-  size = "large",
-}: PulsingRingProps): JSX.Element => {
+export const PulsingRing = ({ className }: PulsingRingProps): JSX.Element => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   useScope(
@@ -49,10 +46,9 @@ export const PulsingRing = ({
     []
   );
 
-  const renderRing = (className: string, key?: number): JSX.Element => {
+  const renderRing = (className: string): JSX.Element => {
     return (
       <span
-        key={key}
         data-animation="ring"
         className={clsx(
           "block absolute aspect-square border border-yellow rounded-full",
@@ -63,17 +59,14 @@ export const PulsingRing = ({
     );
   };
 
-  const ringSizes =
-    size === "small" ?
-      ["h-[0.75em]", "h-[1.35em]", "h-[1.95em]"]
-    : ["h-[1.8em]", "h-[3em]", "h-[4.2em]"];
-
   return (
     <span
       ref={containerRef}
       className={twMerge("block relative leading-0", className)}
     >
-      {ringSizes.map((sizeClass, index) => renderRing(sizeClass, index))}
+      {renderRing("h-[1.8em]")}
+      {renderRing("h-[3em]")}
+      {renderRing("h-[4.2em]")}{" "}
     </span>
   );
 };
diff --git a/apps/namadillo/src/App/Layout/Sidebar.tsx b/apps/namadillo/src/App/Layout/Sidebar.tsx
@@ -1,10 +1,12 @@
+import { ShieldedSyncProgress } from "App/Masp/ShieldedSyncProgress";
 import { EpochInformation } from "App/Sidebars/EpochInformation";
 import { ReactNode } from "react";
 
 export const Sidebar = ({ children }: { children: ReactNode }): JSX.Element => {
   return (
     <aside className="flex flex-col gap-2 mt-1.5 lg:mt-0">
       <EpochInformation />
+      <ShieldedSyncProgress />
       {children}
     </aside>
   );
diff --git a/apps/namadillo/src/App/Layout/SyncIndicator.tsx b/apps/namadillo/src/App/Layout/SyncIndicator.tsx
@@ -1,16 +1,25 @@
 import { Tooltip } from "@namada/components";
+import { accountBalanceAtom, transparentBalanceAtom } from "atoms/accounts";
 import { indexerApiAtom } from "atoms/api";
-import { shieldedBalanceAtom, shieldedSyncProgress } from "atoms/balance/atoms";
+import { shieldedBalanceAtom } from "atoms/balance";
 import { fetchBlockHeightByTimestamp } from "atoms/balance/services";
 import { chainStatusAtom } from "atoms/chain";
+import { allProposalsAtom, votedProposalsAtom } from "atoms/proposals";
+import {
+  indexerHeartbeatAtom,
+  maspIndexerHeartbeatAtom,
+  rpcHeartbeatAtom,
+} from "atoms/settings";
 import {
   indexerServicesSyncStatusAtom,
   syncStatusAtom,
 } from "atoms/syncStatus/atoms";
+import { allValidatorsAtom, myValidatorsAtom } from "atoms/validators";
+import clsx from "clsx";
 import { useAtomValue } from "jotai";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
+import { IoCheckmarkCircleOutline } from "react-icons/io5";
 import { twMerge } from "tailwind-merge";
-import { PulsingRing } from "../Common/PulsingRing";
 
 const formatError = (
   errors: (string | Error)[],
@@ -21,43 +30,62 @@ const formatError = (
   }
 
   return (
-    <div>
-      {label && <div>{label}:</div>}
+    <div className="mb-2">
+      {label && (
+        <div
+          className={
+            label === "Error" ? "text-red-500 font-medium" : "font-medium"
+          }
+        >
+          {label}:
+        </div>
+      )}
       {errors.map((e) => {
         const string = e instanceof Error ? e.message : String(e);
-        return <div key={string}>{string}</div>;
+        return (
+          <div key={string} className="mt-1">
+            {string}
+          </div>
+        );
       })}
     </div>
   );
 };
 
+const LoadingSpinner = (): JSX.Element => {
+  return (
+    <i
+      className={clsx(
+        "inline-block w-2 h-2 border-2",
+        "border-transparent border-t-yellow rounded-[50%]",
+        "animate-loadingSpinner"
+      )}
+    />
+  );
+};
+
 export const SyncIndicator = (): JSX.Element => {
   const syncStatus = useAtomValue(syncStatusAtom);
   const indexerServicesSyncStatus = useAtomValue(indexerServicesSyncStatusAtom);
   const api = useAtomValue(indexerApiAtom);
   const chainStatus = useAtomValue(chainStatusAtom);
-  const shieldedProgress = useAtomValue(shieldedSyncProgress);
-  const { isFetching: isShieldedFetching } = useAtomValue(shieldedBalanceAtom);
+
+  // Individual atom status checks
+  const indexerHeartbeat = useAtomValue(indexerHeartbeatAtom);
+  const maspIndexerHeartbeat = useAtomValue(maspIndexerHeartbeatAtom);
+  const rpcHeartbeat = useAtomValue(rpcHeartbeatAtom);
+  const shieldedBalance = useAtomValue(shieldedBalanceAtom);
+  const transparentBalance = useAtomValue(transparentBalanceAtom);
+  const accountBalance = useAtomValue(accountBalanceAtom);
+  const myValidators = useAtomValue(myValidatorsAtom);
+  const allValidators = useAtomValue(allValidatorsAtom);
+  const allProposals = useAtomValue(allProposalsAtom);
+  const votedProposals = useAtomValue(votedProposalsAtom);
+
   const [blockHeightSync, setBlockHeightSync] = useState<boolean | null>(null);
   const [indexerBlockHeight, setIndexerBlockHeight] = useState<number | null>(
     null
   );
-  const [showShieldedSync, setShowShieldedSync] = useState(false);
-  const roundedProgress = useMemo(() => {
-    // Only update when the progress changes by at least 1%
-    return Math.min(Math.floor(shieldedProgress * 100), 100);
-  }, [Math.floor(shieldedProgress * 100)]);
-
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout> | undefined;
-    if (isShieldedFetching && roundedProgress < 100) {
-      // wait 2.5 s before we allow the ring to appear
-      timeout = setTimeout(() => setShowShieldedSync(true), 2500);
-    } else {
-      setShowShieldedSync(false);
-    }
-    return () => clearTimeout(timeout);
-  }, [isShieldedFetching, roundedProgress]);
 
   const { errors } = syncStatus;
   const { services } = indexerServicesSyncStatus;
@@ -73,6 +101,18 @@ export const SyncIndicator = (): JSX.Element => {
     indexerServicesSyncStatus.isSyncing ||
     !blockHeightSync;
 
+  // Check individual category status
+  const heartbeatStatus =
+    indexerHeartbeat.isSuccess &&
+    maspIndexerHeartbeat.isSuccess &&
+    rpcHeartbeat.isSuccess;
+  const balancesStatus =
+    shieldedBalance.isSuccess &&
+    transparentBalance.isSuccess &&
+    accountBalance.isSuccess;
+  const stakingStatus = myValidators.isSuccess && allValidators.isSuccess;
+  const governanceStatus = allProposals.isSuccess && votedProposals.isSuccess;
+
   useEffect(() => {
     (async () => {
       const indexerBlockHeight = await fetchBlockHeightByTimestamp(
@@ -86,35 +126,6 @@ export const SyncIndicator = (): JSX.Element => {
 
   return (
     <div className="flex gap-10 px-2 py-3">
-      {showShieldedSync && (
-        <div className="relative group/tooltip">
-          <div className="relative mt-1">
-            <PulsingRing size="small" />
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-yellow-500 rounded-full" />
-          </div>
-          <Tooltip
-            position="bottom"
-            className="z-10 w-max max-w-[220px] rounded-md p-4 -mb-6"
-          >
-            <div className="space-y-3">
-              <div className="text-md text-yellow">
-                Shielded sync: {roundedProgress}%
-              </div>
-              <div className="w-full bg-yellow-900 h-1">
-                <div
-                  className="bg-yellow-500 h-1 transition-all duration-300"
-                  style={{ width: `${roundedProgress}%` }}
-                />
-              </div>
-              <div className="text-sm text-neutral-400">
-                Syncing your shielded assets now. Balances will update in a few
-                seconds.
-              </div>
-            </div>
-          </Tooltip>
-        </div>
-      )}
-
       <div className="relative group/tooltip">
         <div
           className={twMerge(
@@ -124,14 +135,41 @@ export const SyncIndicator = (): JSX.Element => {
             isError && !isSyncing && "bg-red-500"
           )}
         />
-        <Tooltip
-          position="bottom"
-          className="z-10 w-max max-w-[200px] text-balance -mb-6"
-        >
+        <Tooltip position="bottom" className="z-10 w-max text-balance -mb-6">
           {isSyncing ?
-            "Syncing..."
+            <div className="py-2">
+              <div className="text-yellow font-medium">Syncing...</div>
+              <div>
+                Indexer Sync: {chainStatus?.height ?? "-"} /{" "}
+                {indexerBlockHeight ?? "-"}
+              </div>
+              <div className="flex items-center gap-1">
+                Heartbeat:{" "}
+                {heartbeatStatus ?
+                  <IoCheckmarkCircleOutline className="text-green-500" />
+                : <LoadingSpinner />}
+              </div>
+              <div className="flex items-center gap-1">
+                Balances:{" "}
+                {balancesStatus ?
+                  <IoCheckmarkCircleOutline className="text-green-500" />
+                : <LoadingSpinner />}
+              </div>
+              <div className="flex items-center gap-1">
+                Staking:{" "}
+                {stakingStatus ?
+                  <IoCheckmarkCircleOutline className="text-green-500" />
+                : <LoadingSpinner />}
+              </div>
+              <div className="flex items-center gap-1">
+                Governance:{" "}
+                {governanceStatus ?
+                  <IoCheckmarkCircleOutline className="text-green-500" />
+                : <LoadingSpinner />}
+              </div>
+            </div>
           : isError ?
-            <div>
+            <div className="max-w-xs break-words">
               {formatError(errors, "Error")}
               {formatError(services, "Lagging services")}
               {isChainStatusError && "Chain status not loaded."}
diff --git a/apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx b/apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx
@@ -0,0 +1,46 @@
+import { shieldedBalanceAtom, shieldedSyncProgress } from "atoms/balance/atoms";
+import { useRequiresNewShieldedSync } from "hooks/useRequiresNewShieldedSync";
+import { useAtomValue } from "jotai";
+import { useEffect, useMemo, useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+export const ShieldedSyncProgress = (): JSX.Element => {
+  const syncProgress = useAtomValue(shieldedSyncProgress);
+  const { isFetching } = useAtomValue(shieldedBalanceAtom);
+  const [showShieldedSync, setShowShieldedSync] = useState(false);
+  const requiresNewShieldedSync = useRequiresNewShieldedSync();
+
+  const roundedProgress = useMemo(() => {
+    // Only update when the progress changes by at least 1%
+    return Math.min(Math.floor(syncProgress * 100), 100);
+  }, [Math.floor(syncProgress * 100)]);
+
+  useEffect(() => {
+    let timeout = undefined;
+    if (isFetching && roundedProgress < 100) {
+      // wait 2.5 s before we allow the ring to appear
+      timeout = setTimeout(() => setShowShieldedSync(true), 2500);
+    } else {
+      setShowShieldedSync(false);
+    }
+    return () => clearTimeout(timeout);
+  }, [isFetching, roundedProgress]);
+
+  if (!showShieldedSync && !requiresNewShieldedSync) {
+    return <></>;
+  }
+
+  return (
+    <div className="relative bg-black text-yellow rounded-sm overflow-hidden text-xs font-medium py-2 px-3">
+      Shielded sync{" "}
+      {syncProgress === 1 ? "converting..." : `progress: ${roundedProgress}%`}
+      <div
+        className={twMerge(
+          "absolute bg-yellow top-0 left-0 w-full h-full mix-blend-difference origin-left",
+          roundedProgress > 0 && "transition-all"
+        )}
+        style={{ transform: `scaleX(${roundedProgress}%)` }}
+      />
+    </div>
+  );
+};
