feat(explorer): replace Sia Central with explored API for the host ro…

…ute (minus benchmarks)
SiaFoundation · Nov 21, 2024 · 5071f9d · 5071f9d
1 parent cf5c284
commit 5071f9d
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 102 deletions.
diff --git a/.changeset/neat-pumpkins-sparkle.md b/.changeset/neat-pumpkins-sparkle.md
@@ -0,0 +1,5 @@
+---
+'explorer': minor
+---
+
+Replaced Sia Central with explored API for the host route (minus benchmarks).
diff --git a/apps/explorer/app/host/[id]/page.tsx b/apps/explorer/app/host/[id]/page.tsx
@@ -6,6 +6,7 @@ import { notFound } from 'next/navigation'
 import { truncate } from '@siafoundation/design-system'
 import { siaCentral } from '../../../config/siaCentral'
 import { to } from '@siafoundation/request'
+import { explored } from '../../../config/explored'
 
 export function generateMetadata({ params }): Metadata {
   const id = decodeURIComponent((params?.id as string) || '')
@@ -23,14 +24,8 @@ export const revalidate = 0
 
 export default async function Page({ params }) {
   const id = params?.id as string
-  const [[h, error], [r]] = await Promise.all([
-    to(
-      siaCentral.host({
-        params: {
-          id,
-        },
-      })
-    ),
+  const [[host, hostError], [r]] = await Promise.all([
+    to(explored.hostByPubkey({ params: { id } })),
     to(
       siaCentral.exchangeRates({
         params: {
@@ -40,13 +35,13 @@ export default async function Page({ params }) {
     ),
   ])
 
-  if (error) {
-    throw error
+  if (hostError) {
+    throw hostError
   }
 
-  if (!h?.host) {
+  if (!host) {
     return notFound()
   }
 
-  return <Host host={h.host} rates={r?.rates} />
+  return <Host host={host} rates={r?.rates} />
 }
diff --git a/apps/explorer/components/Host/HostHeader.tsx b/apps/explorer/components/Host/HostHeader.tsx
@@ -1,39 +1,34 @@
 import { Avatar } from '@siafoundation/design-system'
-import {
-  SiaCentralExchangeRates,
-  SiaCentralHost,
-} from '@siafoundation/sia-central-types'
+import { SiaCentralExchangeRates } from '@siafoundation/sia-central-types'
+import { ExplorerHost } from '@siafoundation/explored-types'
 import { hashToAvatar } from '../../lib/avatar'
 import { HostPricing } from './HostPricing'
 import { HostInfo } from './HostInfo'
-import { SiaCentralHostScanned } from './types'
 
 type Props = {
-  host: SiaCentralHost
+  host: ExplorerHost
   rates?: SiaCentralExchangeRates
 }
 
 export function HostHeader({ host, rates }: Props) {
   return (
     <div className="flex flex-col gap-x-4 gap-y-4">
       <Avatar
-        src={hashToAvatar(host.public_key)}
+        src={hashToAvatar(host.publicKey)}
         shape="square"
         size="2"
         className="block sm:hidden relative top-0.5"
       />
       <div className="flex gap-x-4 gap-y-4 items-center">
         <Avatar
-          src={hashToAvatar(host.public_key)}
+          src={hashToAvatar(host.publicKey)}
           shape="square"
           size="4"
           className="hidden sm:block"
         />
         <div className="flex flex-wrap gap-3 items-start justify-between w-full">
           <HostInfo host={host} />
-          {host.settings && (
-            <HostPricing host={host as SiaCentralHostScanned} rates={rates} />
-          )}
+          {host.settings && <HostPricing host={host} rates={rates} />}
         </div>
       </div>
     </div>

diff --git a/apps/explorer/components/Host/HostInfo.tsx b/apps/explorer/components/Host/HostInfo.tsx
@@ -5,33 +5,37 @@ import {
   ValueCopyable,
   countryCodeEmoji,
 } from '@siafoundation/design-system'
+import { ExplorerHost } from '@siafoundation/explored-types'
 import {
   CheckmarkFilled16,
   Fork16,
   Time16,
   WarningFilled16,
 } from '@siafoundation/react-icons'
-import { SiaCentralHost } from '@siafoundation/sia-central-types'
 import { humanDate } from '@siafoundation/units'
 import { formatDistance } from 'date-fns'
 
 type Props = {
-  host: SiaCentralHost
+  host: ExplorerHost
 }
 
 export function HostInfo({ host }: Props) {
+  const estimatedUptime =
+    host.totalScans == 0
+      ? 0
+      : (host.successfulInteractions / host.totalScans) * 100
   return (
     <div className="flex flex-col">
       <ValueCopyable
         size="20"
         weight="semibold"
-        value={host.net_address}
+        value={host.netAddress}
         label="network address"
         maxLength={50}
       />
       <ValueCopyable
         color="subtle"
-        value={host.public_key}
+        value={host.publicKey}
         label="public key"
         maxLength={30}
       />
@@ -42,76 +46,76 @@ export function HostInfo({ host }: Props) {
       <div className="flex flex-wrap gap-x-2 gap-y-1 items-center pb-1">
         <Tooltip
           content={
-            host.online
-              ? `Host is online with ${host.estimated_uptime}% uptime`
-              : `Host is offline with ${host.estimated_uptime}% uptime`
+            host.lastScanSuccessful
+              ? `Host is online with ${estimatedUptime}% uptime`
+              : `Host is offline with ${estimatedUptime}% uptime`
           }
         >
           <Text
             size="14"
-            color={host.online ? 'green' : 'red'}
+            color={host.lastScanSuccessful ? 'green' : 'red'}
             className="flex gap-1 items-center"
           >
-            {host.online ? <CheckmarkFilled16 /> : <WarningFilled16 />}
-            {host.online ? 'Online' : 'Offline'}
+            {host.lastScanSuccessful ? (
+              <CheckmarkFilled16 />
+            ) : (
+              <WarningFilled16 />
+            )}
+            {host.lastScanSuccessful ? 'Online' : 'Offline'}
             <Text size="14" color="verySubtle">
-              {host.estimated_uptime}%
+              {estimatedUptime}%
             </Text>
           </Text>
         </Tooltip>
         {host.settings && (
           <Tooltip
             content={
-              host.settings.accepting_contracts
+              host.settings.acceptingcontracts
                 ? 'Host is accepting contracts'
                 : 'Host is not accepting contracts'
             }
           >
             <Text
               size="14"
-              color={host.settings.accepting_contracts ? 'green' : 'subtle'}
+              color={host.settings.acceptingcontracts ? 'green' : 'subtle'}
               className="flex gap-1 items-center"
             >
-              {host.settings.accepting_contracts ? (
+              {host.settings.acceptingcontracts ? (
                 <CheckmarkFilled16 />
               ) : (
                 <WarningFilled16 />
               )}
-              {host.settings.accepting_contracts
+              {host.settings.acceptingcontracts
                 ? '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}`}>
+        <Tooltip content={`Host version ${host.settings.version}`}>
           <Text size="14" color="subtle" className="flex gap-1 items-center">
             <Fork16 />
-            {host.version}
+            {host.settings.version}
           </Text>
         </Tooltip>
-        <Tooltip content={`Host located in ${host.country_code}`}>
+        <Tooltip content={`Host located in ${host.countryCode}`}>
           <div className="flex gap-1 items-center">
-            <Text size="14">{countryCodeEmoji(host.country_code)}</Text>
+            <Text size="14">{countryCodeEmoji(host.countryCode)}</Text>
             <Text size="14" color="subtle">
-              {host.country_code}
+              {host.countryCode}
             </Text>
           </div>
         </Tooltip>
         <Tooltip
-          content={`Host first seen at ${humanDate(host.first_seen_timestamp, {
+          content={`Host first seen at ${humanDate(host.knownSince, {
             dateStyle: 'medium',
             timeStyle: 'short',
           })}`}
         >
           <Text size="14" color="subtle" className="flex gap-1 items-center">
             <Time16 />
-            {formatDistance(
-              new Date(host.first_seen_timestamp),
-              new Date()
-            )}{' '}
-            old
+            {formatDistance(new Date(host.knownSince), new Date())} old
           </Text>
         </Tooltip>
       </div>

diff --git a/apps/explorer/components/Host/HostPricing.tsx b/apps/explorer/components/Host/HostPricing.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { ExplorerHost } from '@siafoundation/explored-types'
 import { Text, Tooltip } from '@siafoundation/design-system'
 import {
   CloudDownload16,
@@ -10,48 +11,52 @@ import { SiaCentralExchangeRates } from '@siafoundation/sia-central-types'
 import { useMemo } from 'react'
 import {
   getDownloadCost,
-  getDownloadSpeed,
-  getRemainingOverTotalStorage,
-  getRemainingStorage,
+  // getDownloadSpeed,
+  // getRemainingOverTotalStorage,
+  // getRemainingStorage,
   getStorageCost,
   getUploadCost,
-  getUploadSpeed,
+  // getUploadSpeed,
 } from '@siafoundation/units'
 import { useExchangeRate } from '../../hooks/useExchangeRate'
-import { SiaCentralHostScanned } from './types'
 
 type Props = {
-  host: SiaCentralHostScanned
+  host: ExplorerHost
   rates?: SiaCentralExchangeRates
 }
 
 export function HostPricing({ host, rates }: Props) {
   const exchange = useExchangeRate(rates)
   const storageCost = useMemo(
-    () => getStorageCost({ price: host.settings.storage_price, exchange }),
+    () => getStorageCost({ price: host.settings.storageprice, exchange }),
     [exchange, host]
   )
 
   const downloadCost = useMemo(
-    () => getDownloadCost({ price: host.settings.download_price, exchange }),
+    () =>
+      getDownloadCost({
+        price: host.settings.downloadbandwidthprice,
+        exchange,
+      }),
     [exchange, host]
   )
 
   const uploadCost = useMemo(
-    () => getUploadCost({ price: host.settings.upload_price, exchange }),
+    () =>
+      getUploadCost({ price: host.settings.uploadbandwidthprice, exchange }),
     [exchange, host]
   )
 
-  const downloadSpeed = useMemo(() => getDownloadSpeed(host), [host])
+  // const downloadSpeed = useMemo(() => getDownloadSpeed(host), [host])
 
-  const uploadSpeed = useMemo(() => getUploadSpeed(host), [host])
+  // const uploadSpeed = useMemo(() => getUploadSpeed(host), [host])
 
-  const remainingOverTotalStorage = useMemo(
-    () => getRemainingOverTotalStorage(host),
-    [host]
-  )
+  // const remainingOverTotalStorage = useMemo(
+  //   () => getRemainingOverTotalStorage(host),
+  //   [host]
+  // )
 
-  const remainingStorage = useMemo(() => getRemainingStorage(host), [host])
+  // const remainingStorage = useMemo(() => getRemainingStorage(host), [host])
 
   return (
     <div className="flex flex-col" data-testid="explorer-hostPricing">
@@ -87,7 +92,7 @@ export function HostPricing({ host, rates }: Props) {
           </div>
         </Tooltip>
       </div>
-      <div className="grid grid-cols-3 gap-4">
+      {/* <div className="grid grid-cols-3 gap-4">
         <Tooltip content={remainingOverTotalStorage}>
           <div className="flex justify-end">
             <Text color="subtle">{remainingStorage}</Text>
@@ -103,7 +108,7 @@ export function HostPricing({ host, rates }: Props) {
             <Text color="subtle">{uploadSpeed}</Text>
           </div>
         </Tooltip>
-      </div>
+      </div> */}
     </div>
   )
 }