feat: implement sync status popover

next.config.mjs

@@ -2,6 +2,14 @@
 
 const nextConfig = {
   transpilePackages: ["@penumbra-zone/protobuf"],
+  experimental: {
+    swcPlugins: [
+      [
+        "@preact-signals/safe-react/swc",
+        { mode: "auto" }
+      ],
+    ],
+  },
   webpack: (config) => {
     config.module.rules.push({
       test: /\.svg$/i,

package.json

@@ -28,11 +28,13 @@
     "@emotion/styled": "^11.13.0",
     "@grpc/proto-loader": "^0.7.13",
     "@penumbra-labs/registry": "^11.3.1",
-    "@penumbra-zone/client": "^18.1.0",
-    "@penumbra-zone/protobuf": "^6.0.0",
+    "@penumbra-zone/client": "^19.0.0",
+    "@penumbra-zone/protobuf": "^6.1.0",
     "@penumbra-zone/transport-dom": "^7.5.0",
-    "@penumbra-zone/ui": "^9.0.0",
+    "@penumbra-zone/ui": "^10.0.0",
     "@penumbra-zone/wasm": "^26.2.0",
+    "@preact-signals/safe-react": "^0.7.0",
+    "@preact/signals-react": "^2.2.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@rehooks/component-size": "^1.0.3",
     "@styled-icons/octicons": "^10.47.0",

src/app/v2/layout.tsx

@@ -4,11 +4,13 @@ import { ReactNode } from 'react';
 import { PenumbraUIProvider } from '@penumbra-zone/ui/PenumbraUIProvider';
 import { Display } from '@penumbra-zone/ui/Display';
 import { Header } from '@/components/header';
+import { SyncBar } from '@/components/header/sync-bar.tsx';
 
 const V2Layout = ({ children }: { children: ReactNode }) => {
   return (
     <PenumbraUIProvider>
       <Display>
+        <SyncBar />
         <Header />
         {children}
       </Display>

src/components/copiedTx.tsx

@@ -3,7 +3,7 @@
 import React, { FC, useState } from "react";
 import { CopyIcon } from "@radix-ui/react-icons";
 import { HStack } from "@chakra-ui/react";
-import { Constants } from "@/constants/configConstants";
+import { Constants } from "@/utils/configConstants.ts";
 
 interface CopyTxToClipboardProps {
   txHash: string;

src/components/header/index.tsx

@@ -1,6 +1,6 @@
 import { Density } from '@penumbra-zone/ui/Density';
 import { HeaderLogo } from './logo.tsx';
-// import { StatusPopover } from './status-popover.tsx';
+import { StatusPopover } from './status-popover.tsx';
 import { MobileNav } from './mobile-nav.tsx';
 import { DesktopNav } from './desktop-nav.tsx';
 import { Connection } from './connection.tsx';
@@ -14,7 +14,7 @@ export const Header = () => {
 
       <Density compact>
         <div className='hidden gap-2 lg:flex'>
-          {/* <StatusPopover />*/}
+           <StatusPopover />
           <Connection />
         </div>
         <div className='block lg:hidden'>

src/components/header/mobile-nav.tsx

@@ -5,7 +5,7 @@ import { Button } from '@penumbra-zone/ui/Button';
 import { Dialog } from '@penumbra-zone/ui/Dialog';
 import { Display } from '@penumbra-zone/ui/Display';
 import { MenuItem } from '@penumbra-zone/ui/MenuItem';
-// import { StatusPopover } from './status-popover.tsx';
+import { StatusPopover } from './status-popover.tsx';
 import { HeaderLogo } from './logo.tsx';
 import { HEADER_LINKS } from './links.ts';
 import { Connection } from './connection.tsx';
@@ -31,7 +31,7 @@ export const MobileNav = () => {
               <HeaderLogo />
 
               <div className='flex gap-2'>
-                {/* <StatusPopover />*/}
+                <StatusPopover />
                 <Connection />
                 <Button iconOnly icon={X} onClick={() => setIsOpen(false)}>
                   Close

src/components/header/status-popover.tsx

@@ -0,0 +1,68 @@
+import { useEffect } from 'react';
+import { Blocks } from 'lucide-react';
+import { useComputed } from '@preact-signals/safe-react';
+import { Popover } from '@penumbra-zone/ui/Popover';
+import { Button } from '@penumbra-zone/ui/Button';
+import { Density } from '@penumbra-zone/ui/Density';
+import { Pill } from '@penumbra-zone/ui/Pill';
+import { Text } from '@penumbra-zone/ui/Text';
+import { penumbraStatus, penumbraStatusError, streamPenumbraStatus } from '@/state/status';
+import { useConnect } from '@/utils/penumbra/useConnect.ts';
+
+export const StatusPopover = () => {
+  const { connected } = useConnect();
+
+  // a ReactNode displaying the sync status in form of a pill
+  const pill = useComputed(() => {
+    if (penumbraStatusError.value) {
+      return <Pill context='technical-destructive'>Block Sync Error</Pill>;
+    }
+
+    if (!penumbraStatus.value) {
+      return null;
+    }
+
+    if (!penumbraStatus.value.syncing) {
+      return <Pill context='technical-success'>Blocks Synced</Pill>;
+    }
+
+    return <Pill context='technical-caution'>Block Syncing</Pill>;
+  });
+
+  useEffect(() => {
+    if (connected) {
+      void streamPenumbraStatus();
+    }
+  }, [connected]);
+
+  return (
+    <Popover>
+      <Popover.Trigger>
+        <Button icon={Blocks} iconOnly>
+          Status
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content align='end' side='bottom'>
+        <Density compact>
+          <div className='flex flex-col gap-4'>
+            <div className='flex flex-col gap-2'>
+              <Text technical>Status</Text>
+              {pill.value}
+              {penumbraStatusError.value}
+            </div>
+            {penumbraStatus.value && (
+              <div className='flex flex-col gap-2'>
+                <Text technical>Block Height</Text>
+                <Pill context='technical-default'>
+                  {penumbraStatus.value.latestKnownBlockHeight !== penumbraStatus.value.fullSyncHeight
+                    ? `${penumbraStatus.value.fullSyncHeight} of ${penumbraStatus.value.latestKnownBlockHeight}`
+                    : `${penumbraStatus.value.latestKnownBlockHeight}`}
+                </Pill>
+              </div>
+            )}
+          </div>
+        </Density>
+      </Popover.Content>
+    </Popover>
+  );
+};

src/components/header/sync-bar.tsx

@@ -0,0 +1,18 @@
+import { Progress } from '@penumbra-zone/ui/Progress';
+import { penumbraStatus, penumbraStatusError } from '@/state/status';
+
+export const SyncBar = () => {
+  return (
+    <div className='fixed left-0 top-0 h-1 w-full'>
+      {!penumbraStatus.value ? (
+        <Progress value={0} loading />
+      ) : (
+        <Progress
+          value={penumbraStatus.value.syncPercent ?? 0}
+          loading={penumbraStatus.value.updating}
+          error={Boolean(penumbraStatusError.value)}
+        />
+      )}
+    </div>
+  );
+};

src/pages/block/[block_height].tsx

@@ -16,7 +16,7 @@ import { BlockDetailedSummaryData } from "@/utils/types/block";
 import { BlockInfo, LiquidityPositionEvent } from "@/utils/indexer/types/lps";
 import { SwapExecutionWithBlockHeight } from "@/utils/protos/types/DexQueryServiceClientInterface";
 import { LoadingSpinner } from "@/components/util/loadingSpinner";
-import { Constants } from "@/constants/configConstants";
+import { Constants } from "@/utils/configConstants.ts";
 import { formatTimestampShort } from "@/components/blockTimestamp";
 import { AddIcon, MinusIcon } from "@chakra-ui/icons";
 import { innerToBech32Address } from "@/utils/math/bech32";

src/state/status/getSyncPercent.ts

@@ -0,0 +1,20 @@
+export const getSyncPercent = (
+  fullSyncHeight: bigint,
+  latestKnownBlockHeight: bigint,
+): { syncPercent: number, syncPercentStringified: string } => {
+  let percentSyncedNumber = 0;
+  if (latestKnownBlockHeight) {
+    percentSyncedNumber = Number(fullSyncHeight) / Number(latestKnownBlockHeight);
+    if (percentSyncedNumber > 1) {
+      percentSyncedNumber = 1;
+    }
+  }
+
+  // Round down to ensure whole numbers
+  const roundedPercentSyncedNumber = Math.floor(percentSyncedNumber * 100);
+
+  return {
+    syncPercent: roundedPercentSyncedNumber / 100,
+    syncPercentStringified: `${roundedPercentSyncedNumber}%`,
+  }
+};

src/state/status/index.ts

@@ -0,0 +1,65 @@
+import { signal } from '@preact-signals/safe-react';
+import { ViewService } from '@penumbra-zone/protobuf';
+import { penumbra } from '@/utils/penumbra/penumbra';
+import { getSyncPercent } from '@/state/status/getSyncPercent';
+
+interface StatusState {
+  /** Indicates that the account needs syncing with the blockchain */
+  syncing: boolean;
+  /** Indicates that the account is almost in sync with the blockchain (amount of unsynced blocks is less than 10) */
+  updating?: boolean;
+  /** The amount of synced blocks */
+  fullSyncHeight: bigint;
+  /** The total amount of blocks in the blockchain */
+  latestKnownBlockHeight?: bigint;
+  /** A number between 0 and 1 indicating the sync progress */
+  syncPercent: number;
+  /** A stringified sync percentage, e.g. '100%' or '17%' */
+  syncPercentStringified: string;
+}
+
+export const penumbraStatus = signal<StatusState>();
+export const penumbraStatusError = signal<string>();
+
+/**
+ * Initial status request doesn't return `latestKnownBlockHeight`.
+ * Instead, it returns `catchingUp` to know if the sync is in progress
+ */
+const getPenumbraStatus = async (): Promise<StatusState> => {
+  const status = await penumbra.service(ViewService).status({});
+  return {
+    syncing: status.catchingUp,
+    fullSyncHeight: status.fullSyncHeight,
+    latestKnownBlockHeight: status.catchingUp ? undefined : status.fullSyncHeight,
+    syncPercent: status.catchingUp ? 0 : 1,
+    syncPercentStringified: status.catchingUp ? '0%' : '100%',
+  };
+};
+
+/**
+ * Receives the status stream from the view service
+ * and stores it in the `penumbraStatus` signal.
+ */
+export const streamPenumbraStatus = async () => {
+  try {
+    penumbraStatus.value = await getPenumbraStatus();
+    penumbraStatusError.value = undefined;
+
+    const stream = penumbra.service(ViewService).statusStream({});
+    for await (const status of stream) {
+      const syncPercents = getSyncPercent(status.fullSyncHeight, status.latestKnownBlockHeight);
+
+      penumbraStatusError.value = undefined;
+      penumbraStatus.value = {
+        syncing: status.fullSyncHeight !== status.latestKnownBlockHeight,
+        fullSyncHeight: status.fullSyncHeight,
+        latestKnownBlockHeight: status.latestKnownBlockHeight,
+        ...syncPercents,
+      };
+    }
+  } catch (error) {
+    penumbraStatus.value = undefined;
+    penumbraStatusError.value = error instanceof Error ? `${error.name}: ${error.message}` : 'Streaming error';
+    setTimeout(() => void streamPenumbraStatus(), 1000);
+  }
+};

src/utils/token/tokenFetch.tsx

@@ -1,5 +1,5 @@
 import { uint8ArrayToBase64, base64ToUint8Array } from "../math/base64";
-import { Constants } from "../../constants/configConstants";
+import { Constants } from "../configConstants.ts";
 import {
   AssetId,
   AssetImage,

styles/v2.css

@@ -17,3 +17,8 @@ a {
 * {
   box-sizing: border-box;
 }
+
+body > section {
+  position: relative;
+  z-index: 0;
+}