feat: estimate network block height, detect and support zen testnet, …

…add network endpoint

.changeset/bright-emus-chew.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The sync screen now shows the correct network block height when using the Zen testnet.

.changeset/five-balloons-dress.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/react-renterd': minor
+---
+
+Add useConsensusNetwork.

.changeset/hip-vans-learn.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+FormSubmitButton now shows animated dots when loading.

.changeset/modern-eagles-hammer.md

@@ -0,0 +1,7 @@
+---
+'hostd': minor
+'renterd': minor
+'@siafoundation/design-system': minor
+---
+
+The unlock form now times out after 5s and shows a new 'Error, daemon did not respond' error - this occurs when the wallet is re-indexing.

.changeset/shaggy-files-dress.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/react-renterd': minor
+---
+
+Add useNetworkBlockHeight.

.changeset/silent-files-behave.md

@@ -0,0 +1,6 @@
+---
+'renterd': minor
+'@siafoundation/react-renterd': minor
+---
+
+The network block height is now estimated. renterd no longer uses SiaStats for anything so the 3rd party data privacy toggle has also been removed.

apps/renterd/components/Files/DirectoryDropdownMenu.tsx

@@ -42,7 +42,7 @@ export function DirectoryDropdownMenu({ path }: Props) {
       contentProps={{ align: 'start' }}
     >
       <DropdownMenuLabel>Directory actions</DropdownMenuLabel>
-      {obj.data?.entries.find((e) => e === path) ? (
+      {obj.data?.entries.find((e) => e.name === path) ? (
         <DropdownMenuItem
           onSelect={() =>
             deleteObject.delete({

apps/renterd/components/SyncScreen/index.tsx

@@ -14,30 +14,32 @@ import {
   DropdownMenuLeftSlot,
 } from '@siafoundation/design-system'
 import { useAppSettings } from '@siafoundation/react-core'
-import { useConsensusState, useSyncerPeers } from '@siafoundation/react-renterd'
-import { useSiaStatsNetworkStatus } from '@siafoundation/react-core'
+import {
+  useNetworkBlockHeight,
+  useConsensusState,
+  useSyncerPeers,
+} from '@siafoundation/react-renterd'
 import { useDialog } from '../../contexts/dialog'
 import { routes } from '../../config/routes'
 import { RenterdPublicLayout } from '../RenterdPublicLayout'
 
 export function SyncScreen() {
-  const { settings, lock, isUnlocked } = useAppSettings()
+  const { lock, isUnlocked } = useAppSettings()
   const { openDialog } = useDialog()
   const state = useConsensusState()
   const peers = useSyncerPeers()
-  const status = useSiaStatsNetworkStatus()
 
   const currentBlockHeight = state.data?.BlockHeight || 0
-  const networkBlockHeight = status.data?.block_height || 0
+  const networkBlockHeight = useNetworkBlockHeight()
 
   const percent =
     isUnlocked && currentBlockHeight && networkBlockHeight
-      ? ((currentBlockHeight / networkBlockHeight) * 100).toFixed(1)
+      ? (Math.min(currentBlockHeight / networkBlockHeight, 1) * 100).toFixed(1)
       : 0
 
-  const moreThan1BlockToSync =
+  const moreThan10BlockToSync =
     currentBlockHeight && networkBlockHeight
-      ? networkBlockHeight - currentBlockHeight > 1
+      ? networkBlockHeight - currentBlockHeight > 10
       : false
 
   return (
@@ -88,43 +90,34 @@ export function SyncScreen() {
             </div>
             <Separator className="w-full mb-3" />
             <>
-              {settings.siaStats ? (
-                <ProgressBar
-                  variant="accent"
-                  value={
-                    currentBlockHeight && networkBlockHeight
-                      ? currentBlockHeight
-                      : 0
-                  }
-                  max={networkBlockHeight || 1}
-                  className=""
-                />
-              ) : (
-                <ProgressBar
-                  variant="accent"
-                  value={1}
-                  max={1}
-                  className="animate-pulse"
-                />
-              )}
+              <ProgressBar
+                variant="accent"
+                value={
+                  currentBlockHeight && networkBlockHeight
+                    ? currentBlockHeight
+                    : 0
+                }
+                max={networkBlockHeight || 1}
+                className=""
+              />
               <div className="flex justify-between mt-1.5">
                 <Text color="verySubtle" size="10">
                   Syncing...
                 </Text>
-                {isUnlocked && settings.siaStats ? (
-                  currentBlockHeight && networkBlockHeight ? (
+                {isUnlocked && currentBlockHeight && networkBlockHeight ? (
+                  currentBlockHeight > networkBlockHeight ? (
+                    <Text color="verySubtle" size="10">
+                      {`(${percent}%)`}
+                    </Text>
+                  ) : (
                     <Text color="verySubtle" size="10">
                       {`${currentBlockHeight.toLocaleString()} / ${networkBlockHeight.toLocaleString()} (${percent}%)`}
                     </Text>
-                  ) : null
-                ) : currentBlockHeight ? (
-                  <Text color="verySubtle" size="10">
-                    {currentBlockHeight.toLocaleString()}
-                  </Text>
+                  )
                 ) : null}
               </div>
             </>
-            {(!settings.siaStats || moreThan1BlockToSync) && (
+            {moreThan10BlockToSync && (
               <Text color="subtle" size="14" className="mt-2">
                 Welcome to Sia! The blockchain is syncing to the current network
                 height. Depending on your system this process may take a while.

apps/renterd/contexts/dialog.tsx

@@ -101,6 +101,7 @@ export function Dialogs() {
       <SettingsDialog
         open={dialog === 'settings'}
         onOpenChange={onOpenChange}
+        showSiaStats={false}
       />
       <RenterdSendSiacoinDialog />
       <WalletSingleAddressDetailsDialog

libs/design-system/src/app/AppUnlockForm.tsx

@@ -35,11 +35,13 @@ async function checkPassword<Response extends ResponseWithSynced>({
         'Content-Type': 'application/json',
         Authorization: 'Basic ' + btoa(`:${password}`),
       },
+      timeout: 5_000,
     })
     return {
       isSynced: response.data.Synced || response.data.synced,
     }
   } catch (e: unknown) {
+    const code = (e as AxiosError).code
     const resp = (e as AxiosError).response
     if (resp?.status === 504) {
       return {
@@ -51,6 +53,11 @@ async function checkPassword<Response extends ResponseWithSynced>({
         error: 'Error, wrong password',
       }
     }
+    if (code === 'ECONNABORTED') {
+      return {
+        error: 'Error, daemon did not respond',
+      }
+    }
     return {
       error: 'Error, something went wrong',
     }

libs/design-system/src/app/SettingsDialog.tsx

@@ -20,9 +20,14 @@ import { Dialog } from '../core/Dialog'
 type Props = {
   open: boolean
   onOpenChange: (open: boolean) => void
+  showSiaStats?: boolean
 }
 
-export function SettingsDialog({ open, onOpenChange }: Props) {
+export function SettingsDialog({
+  open,
+  onOpenChange,
+  showSiaStats = true,
+}: Props) {
   const { settings, setSettings, setCurrency, currencyOptions } =
     useAppSettings()
 
@@ -113,27 +118,29 @@ export function SettingsDialog({ open, onOpenChange }: Props) {
                 </Paragraph>
               </div>
             </Alert>
-            <Alert>
-              <div className="flex flex-col gap-4">
-                <div className="flex gap-2 items-center">
-                  <Text>
-                    <Information16 />
-                  </Text>
-                  <Heading size="20" className="flex-1">
-                    SiaStats
-                  </Heading>
-                  <Switch
-                    size="medium"
-                    checked={settings.siaStats}
-                    onCheckedChange={(val) => setSettings({ siaStats: val })}
-                  />
+            {showSiaStats ? (
+              <Alert>
+                <div className="flex flex-col gap-4">
+                  <div className="flex gap-2 items-center">
+                    <Text>
+                      <Information16 />
+                    </Text>
+                    <Heading size="20" className="flex-1">
+                      SiaStats
+                    </Heading>
+                    <Switch
+                      size="medium"
+                      checked={settings.siaStats}
+                      onCheckedChange={(val) => setSettings({ siaStats: val })}
+                    />
+                  </div>
+                  <Paragraph size="14">
+                    The app fetches the network block height from the SiaStats
+                    API. This data is used to calculate sync progress.
+                  </Paragraph>
                 </div>
-                <Paragraph size="14">
-                  The app fetches the network block height from the SiaStats
-                  API. This data is used to calculate sync progress.
-                </Paragraph>
-              </div>
-            </Alert>
+              </Alert>
+            ) : null}
           </div>
         </div>
         <Separator className="w-full" />

libs/design-system/src/components/Form.tsx

@@ -7,6 +7,7 @@ import { SiacoinField } from '../core/SiacoinField'
 import BigNumber from 'bignumber.js'
 import { VariantProps } from '../types'
 import { cx } from 'class-variance-authority'
+import { LoadingDots } from './LoadingDots'
 
 type FormFieldProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -304,7 +305,7 @@ export function FormSubmitButton({
         state={formik.isSubmitting ? 'waiting' : undefined}
         type="submit"
       >
-        {children}
+        {formik.isSubmitting ? <LoadingDots /> : children}
       </Button>
     </>
   )

libs/react-core/src/blockHeight.tsx

@@ -0,0 +1,13 @@
+const genesis = 1433600000
+export function getMainnetBlockHeight() {
+  // (now - genesis) / 10min = est block height
+  return Math.round((new Date().getTime() - genesis * 1000) / (1000 * 60 * 10))
+}
+
+const zenGenesis = 1673600000
+export function getTestnetZenBlockHeight() {
+  // (now - genesis) / 10min = est block height
+  return Math.round(
+    (new Date().getTime() - zenGenesis * 1000) / (1000 * 60 * 10)
+  )
+}

libs/react-core/src/index.ts

@@ -9,6 +9,7 @@ export * from './useGetDownload'
 export * from './useSiaStats'
 export * from './useSiaCentral'
 export * from './useAppSettings'
+export * from './blockHeight'
 
 export * from './workflows'
 export * from './coreProvider'

libs/react-renterd/src/bus.ts

@@ -1,3 +1,4 @@
+import useSWR from 'swr'
 import {
   useDeleteFunc,
   useGetSwr,
@@ -10,6 +11,8 @@ import {
   Currency,
   PublicKey,
   Transaction,
+  getMainnetBlockHeight,
+  getTestnetZenBlockHeight,
 } from '@siafoundation/react-core'
 import {
   AddObjectRequest,
@@ -43,6 +46,37 @@ export function useConsensusState(args?: HookArgsSwr<void, ConsensusState>) {
   })
 }
 
+export type ConsensusNetwork = {
+  Name: string
+}
+
+export function useConsensusNetwork(
+  args?: HookArgsSwr<void, ConsensusNetwork>
+) {
+  return useGetSwr({
+    ...args,
+    route: '/bus/consensus/network',
+  })
+}
+
+export function useNetworkBlockHeight(): number {
+  const network = useConsensusNetwork()
+  const res = useSWR(
+    ['renterd/blockHeight', network],
+    () => {
+      if (network.data?.Name === 'zen') {
+        return getTestnetZenBlockHeight()
+      }
+      return getMainnetBlockHeight()
+    },
+    {
+      refreshInterval: 5_000,
+      keepPreviousData: true,
+    }
+  )
+  return res.data || 0
+}
+
 export function useConsensusAcceptBlock(
   args?: HookArgsCallback<void, Block, void>
 ) {

server/Caddyfile-dev

@@ -7,6 +7,7 @@
 # 127.0.0.1 host.local
 # 127.0.0.1 renter.local
 # 127.0.0.1 renterd.local
+# 127.0.0.1 renterd.zen.local
 
 (cors) {
   @cors_preflight method OPTIONS
@@ -102,3 +103,8 @@ renterd.local {
   import cors
   reverse_proxy localhost:9980
 }
+
+renterd.zen.local {
+  import cors
+  reverse_proxy localhost:9880
+}