fix: prod build fixes, website downloads

.changeset/large-drinks-carry.md

@@ -0,0 +1,5 @@
+---
+'website': minor
+---
+
+Binary downloads are now the latest stable version.

.changeset/quick-cobras-cross.md

@@ -0,0 +1,5 @@
+---
+'explorer': minor
+---
+
+The explorer now shows average prices on the home page.

.changeset/witty-eggs-fail.md

@@ -2,4 +2,4 @@
 'explorer': minor
 ---
 
-The explorer has been revamped and not supports searching for and viewing hosts.
+The explorer has been revamped and now supports searching for and viewing hosts.

apps/explorer/app/address/[id]/page.tsx

@@ -5,11 +5,12 @@ import { routes } from '../../../config/routes'
 import { buildMetadata } from '../../../lib/utils'
 import { siaCentralApi } from '../../../config'
 import { notFound } from 'next/navigation'
+import { truncate } from '@siafoundation/design-system'
 
 export function generateMetadata({ params }): Metadata {
   const id = decodeURIComponent((params?.id as string) || '')
-  const title = `Address ${id}`
-  const description = `View details for address ${id}`
+  const title = `Address ${truncate(id, 30)}`
+  const description = 'View details for Sia address.'
   const url = routes.address.view.replace(':id', id)
   return buildMetadata({
     title,

apps/explorer/app/block/[id]/page.tsx

@@ -11,8 +11,8 @@ export function generateMetadata({ params }): Metadata {
   const id = decodeURIComponent((params?.id as string) || '')
   const height = Number(id || 0) as number
   if (isNaN(height)) {
-    const title = getTitleId('Block', id)
-    const description = getTitleId('View details for block', id)
+    const title = getTitleId('Block', id, 30)
+    const description = 'View details for Sia block.'
     const url = routes.block.view.replace(':id', id)
     return buildMetadata({
       title,
@@ -21,7 +21,7 @@ export function generateMetadata({ params }): Metadata {
     })
   }
   const title = `Block ${height.toLocaleString()}`
-  const description = `View details for block ${height.toLocaleString()}`
+  const description = 'View details for Sia block.'
   const url = routes.block.view.replace(':id', id)
   return buildMetadata({
     title,

apps/explorer/app/contract/[id]/page.tsx

@@ -10,11 +10,12 @@ import { routes } from '../../../config/routes'
 import { buildMetadata } from '../../../lib/utils'
 import { siaCentralApi } from '../../../config'
 import { notFound } from 'next/navigation'
+import { truncate } from '@siafoundation/design-system'
 
 export function generateMetadata({ params }): Metadata {
   const id = decodeURIComponent((params?.id as string) || '')
-  const title = `Contract ${id}`
-  const description = `View details for contact ${id}`
+  const title = `Contract ${truncate(id, 30)}`
+  const description = `View details for Sia contract.`
   const url = routes.contract.view.replace(':id', id)
   return buildMetadata({
     title,

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

@@ -9,6 +9,8 @@ import {
   getStorageCost,
   getUploadCost,
 } from '../../../lib/host'
+import { humanBytes, humanSpeed } from '@siafoundation/sia-js'
+import { truncate } from '@siafoundation/design-system'
 
 export const revalidate = 60
 
@@ -41,23 +43,40 @@ export default async function Image({ params }) {
   const values = [
     {
       label: 'storage',
-      value: getStorageCost({ host: h.host, rates: r.rates }),
+      value: getStorageCost({
+        price: h.host.settings.storage_price,
+        rates: r.rates,
+      }),
+      subvalue: humanBytes(h.host.settings.remaining_storage),
     },
     {
       label: 'download',
-      value: getDownloadCost({ host: h.host, rates: r.rates }),
+      value: getDownloadCost({
+        price: h.host.settings.download_price,
+        rates: r.rates,
+      }),
+      subvalue: humanSpeed(
+        (h.host.benchmark.data_size * 8) /
+          (h.host.benchmark.download_time / 1000)
+      ),
     },
     {
       label: 'upload',
-      value: getUploadCost({ host: h.host, rates: r.rates }),
+      value: getUploadCost({
+        price: h.host.settings.upload_price,
+        rates: r.rates,
+      }),
+      subvalue: humanSpeed(
+        (h.host.benchmark.data_size * 8) / (h.host.benchmark.upload_time / 1000)
+      ),
     },
   ]
 
   return getOGImage(
     {
       id: h.host.public_key,
       title: h.host.net_address,
-      subtitle: h.host.public_key,
+      subtitle: truncate(h.host.public_key, 30),
       initials: 'H',
       avatar: true,
       values,

apps/explorer/app/host/[id]/page.tsx

@@ -8,11 +8,12 @@ import { buildMetadata } from '../../../lib/utils'
 import { Host } from '../../../components/Host'
 import { siaCentralApi } from '../../../config'
 import { notFound } from 'next/navigation'
+import { truncate } from '@siafoundation/design-system'
 
 export function generateMetadata({ params }): Metadata {
   const id = decodeURIComponent((params?.id as string) || '')
-  const title = `Host ${id}`
-  const description = `View details for host ${id}`
+  const title = `Host ${truncate(id, 30)}`
+  const description = `View details for Sia host.`
   const url = routes.host.view.replace(':id', id)
   return buildMetadata({
     title,

apps/explorer/app/layout.tsx

@@ -2,6 +2,26 @@ import { Layout } from '../components/Layout'
 import '../config/style.css'
 import { NextAppSsrAppRouter } from '@siafoundation/design-system'
 import { appLink } from '../config'
+import { IBM_Plex_Sans, IBM_Plex_Mono } from '@next/font/google'
+import { cx } from 'class-variance-authority'
+
+const sans = IBM_Plex_Sans({
+  weight: ['100', '200', '300', '400', '500', '600', '700'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+  variable: '--font-sans',
+  display: 'swap',
+  preload: true,
+})
+
+const mono = IBM_Plex_Mono({
+  weight: ['100', '200', '300', '400', '500', '600', '700'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+  variable: '--font-mono',
+  display: 'swap',
+  preload: true,
+})
 
 export const metadata = {
   title: 'Explorer',
@@ -19,7 +39,11 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={cx(sans.variable, mono.variable)}
+    >
       <body>
         <NextAppSsrAppRouter>
           <Layout>{children}</Layout>

apps/explorer/app/page.tsx

@@ -4,6 +4,7 @@ import { Home } from '../components/Home'
 import {
   getSiaCentralBlockLatest,
   getSiaCentralBlocks,
+  getSiaCentralExchangeRates,
   getSiaCentralHosts,
   getSiaCentralHostsNetworkMetrics,
 } from '@siafoundation/sia-central'
@@ -30,7 +31,7 @@ export function generateMetadata(): Metadata {
 export const revalidate = 60
 
 export default async function HomePage() {
-  const [metrics, lastestBlock] = await Promise.all([
+  const [m, lb, r, h] = await Promise.all([
     getSiaCentralHostsNetworkMetrics({
       config: {
         api: siaCentralApi,
@@ -41,30 +42,38 @@ export default async function HomePage() {
         api: siaCentralApi,
       },
     }),
+    getSiaCentralExchangeRates({
+      config: {
+        api: siaCentralApi,
+      },
+    }),
+    getSiaCentralHosts({
+      params: {
+        limit: 5,
+      },
+      config: {
+        api: siaCentralApi,
+      },
+    }),
   ])
-  const lastBlockHeight = lastestBlock?.block.height || 0
-  const blocks = await getSiaCentralBlocks({
+
+  const lastBlockHeight = lb?.block.height || 0
+  const bs = await getSiaCentralBlocks({
     payload: {
       heights: range(lastBlockHeight - 5, lastBlockHeight),
     },
     config: {
       api: siaCentralApi,
     },
   })
-  const hosts = await getSiaCentralHosts({
-    params: {
-      limit: 5,
-    },
-    config: {
-      api: siaCentralApi,
-    },
-  })
+
   return (
     <Home
-      metrics={metrics}
+      metrics={m}
       blockHeight={lastBlockHeight}
-      blocks={blocks.blocks}
-      hosts={hosts.hosts}
+      blocks={bs.blocks}
+      hosts={h.hosts}
+      rates={r.rates}
     />
   )
 }

apps/explorer/app/tx/[id]/page.tsx

@@ -5,11 +5,12 @@ import { getSiaCentralTransaction } from '@siafoundation/sia-central'
 import { buildMetadata } from '../../../lib/utils'
 import { siaCentralApi } from '../../../config'
 import { notFound } from 'next/navigation'
+import { truncate } from '@siafoundation/design-system'
 
 export function generateMetadata({ params }): Metadata {
   const id = decodeURIComponent((params?.id as string) || '')
-  const title = `Transaction ${id}`
-  const description = `View details for transaction ${id}`
+  const title = `Transaction ${truncate(id, 30)}`
+  const description = `View details for Sia transaction.`
   const url = routes.transaction.view.replace(':id', id)
   return buildMetadata({
     title,

apps/explorer/components/Home/index.tsx

@@ -11,21 +11,25 @@ import { ContentLayout } from '../ContentLayout'
 import { reverse, sortBy } from 'lodash'
 import {
   SiaCentralBlock,
+  SiaCentralExchangeRates,
   SiaCentralHost,
   SiaCentralHostsNetworkMetricsResponse,
 } from '@siafoundation/sia-central'
 import { hashToAvatar } from '../../lib/avatar'
+import { getDownloadCost, getStorageCost, getUploadCost } from '../../lib/host'
 
 export function Home({
   metrics,
   blockHeight,
   blocks,
   hosts,
+  rates,
 }: {
   metrics: SiaCentralHostsNetworkMetricsResponse
   blockHeight: number
   blocks: SiaCentralBlock[]
   hosts: SiaCentralHost[]
+  rates: SiaCentralExchangeRates
 }) {
   const values = useMemo(() => {
     const list = [
@@ -120,9 +124,60 @@ export function Home({
           </div>
         ),
       },
+      {
+        label: 'Average storage price',
+        value: (
+          <Tooltip content="Average storage price per TB/month">
+            <Text
+              className="text-xl md:text-3xl"
+              weight="semibold"
+              color="contrast"
+            >
+              {getStorageCost({
+                price: metrics?.average.settings.storage_price,
+                rates,
+              })}
+            </Text>
+          </Tooltip>
+        ),
+      },
+      {
+        label: 'Average download price',
+        value: (
+          <Tooltip content="Average download price per TB">
+            <Text
+              className="text-xl md:text-3xl"
+              weight="semibold"
+              color="contrast"
+            >
+              {getDownloadCost({
+                price: metrics?.average.settings.download_price,
+                rates,
+              })}
+            </Text>
+          </Tooltip>
+        ),
+      },
+      {
+        label: 'Average upload price',
+        value: (
+          <Tooltip content="Average upload price per TB">
+            <Text
+              className="text-xl md:text-3xl"
+              weight="semibold"
+              color="contrast"
+            >
+              {getUploadCost({
+                price: metrics?.average.settings.upload_price,
+                rates,
+              })}
+            </Text>
+          </Tooltip>
+        ),
+      },
     ]
     return list
-  }, [metrics, blockHeight])
+  }, [metrics, blockHeight, rates])
 
   return (
     <ContentLayout

apps/explorer/components/HomeSkeleton/index.tsx

@@ -9,6 +9,9 @@ export function HomeSkeleton() {
           <Skeleton className="w-full h-[85px] sm:w-[180px] sm:h-[62px]" />
           <Skeleton className="w-full h-[85px] sm:w-[180px] sm:h-[62px]" />
           <Skeleton className="w-full h-[85px] sm:w-[180px] sm:h-[62px]" />
+          <Skeleton className="w-full h-[85px] sm:w-[180px] sm:h-[62px]" />
+          <Skeleton className="w-full h-[85px] sm:w-[180px] sm:h-[62px]" />
+          <Skeleton className="w-full h-[85px] sm:w-[180px] sm:h-[62px]" />
         </div>
       }
     >

apps/explorer/components/Host/HostPricing.tsx

@@ -20,17 +20,17 @@ type Props = {
 
 export function HostPricing({ host, rates }: Props) {
   const storageCost = useMemo(
-    () => getStorageCost({ host, rates }),
+    () => getStorageCost({ price: host.settings.storage_price, rates }),
     [rates, host]
   )
 
   const downloadCost = useMemo(
-    () => getDownloadCost({ host, rates }),
+    () => getDownloadCost({ price: host.settings.download_price, rates }),
     [rates, host]
   )
 
   const uploadCost = useMemo(
-    () => getUploadCost({ host, rates }),
+    () => getUploadCost({ price: host.settings.upload_price, rates }),
     [rates, host]
   )
 
@@ -92,7 +92,7 @@ export function HostPricing({ host, rates }: Props) {
         >
           <div className="flex justify-end">
             <Text color="subtle">
-              {humanBytes(host.settings.total_storage)}
+              {humanBytes(host.settings.remaining_storage)}
             </Text>
           </div>
         </Tooltip>

apps/explorer/components/OGImage/Background.tsx

@@ -8,7 +8,6 @@ export function Background() {
         alt="bg"
         src="https://sia.tech/assets/previews/leaves.png"
       />
-      <div tw="absolute bottom-0 left-0 right-0 h-1 bg-green-600" />
     </div>
   )
 }