fix: explorer host unscanned error

.changeset/wild-plums-guess.md

@@ -0,0 +1,5 @@
+---
+'explorer': minor
+---
+
+Fixed an error where looking up a host was showing an error page for unscanned hosts.

apps/explorer/app/host/[id]/opengraph-image.tsx

@@ -57,6 +57,19 @@ export default async function Image({ params }) {
     )
   }
 
+  if (!h.host.settings) {
+    return getOGImage(
+      {
+        id: h.host.public_key,
+        title: h.host.net_address,
+        subtitle: truncate(h.host.public_key, 30),
+        initials: 'H',
+        avatar: true,
+      },
+      size
+    )
+  }
+
   const values = [
     {
       label: 'storage',

apps/explorer/components/Home/HostListItem.tsx

@@ -13,10 +13,7 @@ import {
   CloudUpload16,
   VmdkDisk16,
 } from '@siafoundation/react-icons'
-import {
-  SiaCentralExchangeRates,
-  SiaCentralHost,
-} from '@siafoundation/sia-central'
+import { SiaCentralExchangeRates } from '@siafoundation/sia-central'
 import {
   getDownloadCost,
   getDownloadSpeed,
@@ -28,9 +25,10 @@ import {
 import { useMemo } from 'react'
 import { routes } from '../../config/routes'
 import { useExchangeRate } from '../../hooks/useExchangeRate'
+import { SiaCentralHostScanned } from '../Host/types'
 
 type Props = {
-  host: SiaCentralHost
+  host: SiaCentralHostScanned
   rates?: SiaCentralExchangeRates
   entity: EntityListItemLayoutProps
 }

apps/explorer/components/Home/index.tsx

@@ -26,6 +26,7 @@ import {
 } from '@siafoundation/units'
 import { HostListItem } from './HostListItem'
 import { useExchangeRate } from '../../hooks/useExchangeRate'
+import { SiaCentralHostScanned } from '../Host/types'
 
 export function Home({
   metrics,
@@ -222,19 +223,21 @@ export function Home({
         </div>
         <div>
           <EntityList title="Top hosts">
-            {hosts.map((host) => (
-              <HostListItem
-                key={host.public_key}
-                host={host}
-                rates={rates}
-                entity={{
-                  label: host.net_address,
-                  initials: 'H',
-                  avatar: hashToAvatar(host.public_key),
-                  href: routes.host.view.replace(':id', host.public_key),
-                }}
-              />
-            ))}
+            {hosts
+              .filter((host) => host.settings)
+              .map((host) => (
+                <HostListItem
+                  key={host.public_key}
+                  host={host as SiaCentralHostScanned}
+                  rates={rates}
+                  entity={{
+                    label: host.net_address,
+                    initials: 'H',
+                    avatar: hashToAvatar(host.public_key),
+                    href: routes.host.view.replace(':id', host.public_key),
+                  }}
+                />
+              ))}
           </EntityList>
         </div>
       </div>

apps/explorer/components/Host/HostHeader.tsx

@@ -6,6 +6,7 @@ import {
 import { hashToAvatar } from '../../lib/avatar'
 import { HostPricing } from './HostPricing'
 import { HostInfo } from './HostInfo'
+import { SiaCentralHostScanned } from './types'
 
 type Props = {
   host: SiaCentralHost
@@ -30,7 +31,9 @@ export function HostHeader({ host, rates }: Props) {
         />
         <div className="flex flex-wrap gap-3 items-start justify-between w-full">
           <HostInfo host={host} />
-          <HostPricing host={host} rates={rates} />
+          {host.settings && (
+            <HostPricing host={host as SiaCentralHostScanned} rates={rates} />
+          )}
         </div>
       </div>
     </div>

apps/explorer/components/Host/HostInfo.tsx

@@ -59,28 +59,30 @@ export function HostInfo({ host }: Props) {
             </Text>
           </Text>
         </Tooltip>
-        <Tooltip
-          content={
-            host.settings.accepting_contracts
-              ? 'Host is accepting contracts'
-              : 'Host is not accepting contracts'
-          }
-        >
-          <Text
-            size="14"
-            color={host.settings.accepting_contracts ? 'green' : 'subtle'}
-            className="flex gap-1 items-center"
+        {host.settings && (
+          <Tooltip
+            content={
+              host.settings.accepting_contracts
+                ? 'Host is accepting contracts'
+                : 'Host is not accepting contracts'
+            }
           >
-            {host.settings.accepting_contracts ? (
-              <CheckmarkFilled16 />
-            ) : (
-              <WarningFilled16 />
-            )}
-            {host.settings.accepting_contracts
-              ? 'Accepting contracts'
-              : 'Not accepting contracts'}
-          </Text>
-        </Tooltip>
+            <Text
+              size="14"
+              color={host.settings.accepting_contracts ? 'green' : 'subtle'}
+              className="flex gap-1 items-center"
+            >
+              {host.settings.accepting_contracts ? (
+                <CheckmarkFilled16 />
+              ) : (
+                <WarningFilled16 />
+              )}
+              {host.settings.accepting_contracts
+                ? 'Accepting contracts'
+                : 'Not accepting contracts'}
+            </Text>
+          </Tooltip>
+        )}
       </div>
       <div className="flex flex-wrap gap-x-2 gap-y-1 items-center">
         <Tooltip content={`Host version ${host.version}`}>

apps/explorer/components/Host/HostPricing.tsx

@@ -6,10 +6,7 @@ import {
   CloudUpload16,
   VmdkDisk16,
 } from '@siafoundation/react-icons'
-import {
-  SiaCentralExchangeRates,
-  SiaCentralHost,
-} from '@siafoundation/sia-central'
+import { SiaCentralExchangeRates } from '@siafoundation/sia-central'
 import { useMemo } from 'react'
 import {
   getDownloadCost,
@@ -21,9 +18,10 @@ import {
   getUploadSpeed,
 } from '@siafoundation/units'
 import { useExchangeRate } from '../../hooks/useExchangeRate'
+import { SiaCentralHostScanned } from './types'
 
 type Props = {
-  host: SiaCentralHost
+  host: SiaCentralHostScanned
   rates?: SiaCentralExchangeRates
 }
 

apps/explorer/components/Host/HostSettings.tsx

@@ -1,10 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import {
-  SiaCentralExchangeRates,
-  SiaCentralHost,
-} from '@siafoundation/sia-central'
+import { SiaCentralExchangeRates } from '@siafoundation/sia-central'
 import { DatumProps, ExplorerDatum } from '../ExplorerDatum'
 import { Panel, toFixedOrPrecision } from '@siafoundation/design-system'
 import BigNumber from 'bignumber.js'
@@ -20,9 +17,10 @@ import {
 } from '@siafoundation/units'
 import { useExchangeRate } from '../../hooks/useExchangeRate'
 import { siacoinToFiat } from '../../lib/currency'
+import { SiaCentralHostScanned } from './types'
 
 type Props = {
-  host: SiaCentralHost
+  host: SiaCentralHostScanned
   rates?: SiaCentralExchangeRates
 }
 

apps/explorer/components/Host/index.tsx

@@ -5,6 +5,9 @@ import {
 import { ContentLayout } from '../ContentLayout'
 import { HostHeader } from './HostHeader'
 import { HostSettings } from './HostSettings'
+import { Panel, Text } from '@siafoundation/design-system'
+import { SiaCentralHostScanned } from './types'
+import { formatDistance } from 'date-fns'
 
 type Props = {
   host: SiaCentralHost
@@ -14,7 +17,21 @@ type Props = {
 export function Host({ host, rates }: Props) {
   return (
     <ContentLayout heading={<HostHeader host={host} rates={rates} />}>
-      <HostSettings host={host} rates={rates} />
+      {host.settings ? (
+        <HostSettings host={host as SiaCentralHostScanned} rates={rates} />
+      ) : (
+        <Panel className="p-4 flex items-center">
+          <Text>
+            Detailed information will be available once the host has been
+            successfully scanned.
+            {host.last_scan !== '0001-01-01T00:00:00Z' &&
+              ` Last scan attempt was ${formatDistance(
+                new Date(host.last_scan),
+                new Date()
+              )} ago.`}
+          </Text>
+        </Panel>
+      )}
     </ContentLayout>
   )
 }

apps/explorer/components/Host/types.ts

@@ -0,0 +1,12 @@
+'use client'
+
+import {
+  SiaCentralHost,
+  SiaCentralHostSettings,
+} from '@siafoundation/sia-central'
+
+export type SiaCentralHostScanned = SiaCentralHost & {
+  settings: SiaCentralHostSettings
+  // price_table: SiaCentralHostPriceTable
+  // benchmark: SiaCentralHostBenchmark
+}

apps/explorer/tsconfig.json

@@ -25,8 +25,7 @@
     "**/*.js",
     "**/*.jsx",
     "next-env.d.ts",
-    "../../dist/apps/explorer-testnet-zen/.next/types/**/*.ts",
-    "../../dist/apps/explorer/.next/types/**/*.ts"
+    ".next/types/**/*.ts"
   ],
   "exclude": ["node_modules", "jest.config.ts"]
 }