fix: explorer network differences

apps/explorer/app/opengraph-image.tsx

@@ -3,7 +3,7 @@ import {
   getSiaCentralHostsNetworkMetrics,
 } from '@siafoundation/sia-central'
 import { getOGImage } from '../components/OGImage'
-import { networkName, siaCentralApi } from '../config'
+import { network, siaCentralApi } from '../config'
 import { humanBytes } from '@siafoundation/sia-js'
 
 export const revalidate = 60
@@ -50,9 +50,9 @@ export default async function Image() {
 
   return getOGImage(
     {
-      title: networkName === 'Sia Mainnet' ? 'siascan' : 'siascan',
+      title: 'siascan',
       subtitle:
-        networkName === 'Sia Mainnet'
+        network === 'mainnet'
           ? 'Sia blockchain and host explorer.'
           : 'Zen testnet blockchain and host explorer.',
       values,

apps/explorer/app/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next'
-import { appLink, appName, networkName, siaCentralApi } from '../config'
+import { appLink, network, siaCentralApi } from '../config'
 import { Home } from '../components/Home'
 import {
   getSiaCentralBlockLatest,
@@ -9,23 +9,19 @@ import {
   getSiaCentralHostsNetworkMetrics,
 } from '@siafoundation/sia-central'
 import { range } from 'lodash'
+import { buildMetadata } from '../lib/utils'
 
 export function generateMetadata(): Metadata {
-  const title = networkName === 'Sia Mainnet' ? 'siascan' : 'siascan'
+  const title = 'siascan'
   const description =
-    networkName === 'Sia Mainnet'
+    network === 'mainnet'
       ? 'Sia blockchain and host explorer.'
       : 'Zen blockchain and host explorer.'
-  return {
+  return buildMetadata({
     title,
     description,
-    openGraph: {
-      title,
-      description,
-      url: appLink,
-      siteName: appName,
-    },
-  }
+    url: appLink,
+  })
 }
 
 export const revalidate = 60

apps/explorer/components/Faucet/index.tsx

@@ -40,7 +40,7 @@ export function Faucet() {
   return (
     <Container size="1">
       <div className="flex flex-col gap-12 min-h-[60vh]">
-        <Panel className="p-4 md:p-4 !rounded-lg !border-3 !border-gray-1100 dark:!border-graydark-500">
+        <Panel className="p-4 md:p-4 !rounded-lg !border-3">
           <div className="flex flex-col gap-2 items-center w-full">
             <Text>
               <FaucetIcon size={100} />

apps/explorer/components/Layout/NavDropdownMenu.tsx

@@ -7,8 +7,8 @@ import {
   Link,
   DropdownMenuGroup,
   DropdownMenuLabel,
+  Menu24,
 } from '@siafoundation/design-system'
-import { networkName } from '../../config'
 
 type Props = React.ComponentProps<typeof Button> & {
   trigger?: React.ReactNode
@@ -20,8 +20,8 @@ export function NavDropdownMenu({ trigger, children, ...props }: Props) {
     <DropdownMenu
       trigger={
         trigger || (
-          <Button size="medium" {...props}>
-            {networkName}
+          <Button variant="ghost" size="medium" {...props}>
+            <Menu24 />
           </Button>
         )
       }
@@ -30,16 +30,24 @@ export function NavDropdownMenu({ trigger, children, ...props }: Props) {
       <DropdownMenuGroup className="py-1 px-1 w-[120px]">
         <DropdownMenuLabel className="px-1">Network</DropdownMenuLabel>
         <DropdownMenuItem className="p-2">
-          <Link href={webLinks.explore.mainnet} underline="hover">
+          <Link href={webLinks.explore.mainnet} underline="none">
             Sia Mainnet
           </Link>
         </DropdownMenuItem>
         <DropdownMenuItem className="p-2">
-          <Link href={webLinks.explore.testnet} underline="hover">
+          <Link href={webLinks.explore.testnet} underline="none">
             Zen Testnet
           </Link>
         </DropdownMenuItem>
       </DropdownMenuGroup>
+      <DropdownMenuGroup className="py-1 px-1 w-[120px]">
+        <DropdownMenuLabel className="px-1">Tools</DropdownMenuLabel>
+        <DropdownMenuItem className="p-2">
+          <Link href={webLinks.explore.testnetFaucet} underline="none">
+            Zen Faucet
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
     </DropdownMenu>
   )
 }

libs/design-system/src/core/NavbarSite.tsx → apps/explorer/components/Layout/Navbar.tsx

@@ -1,32 +1,47 @@
-import { Container } from './Container'
-import { Heading } from './Heading'
-import { Link } from './Link'
-import { Logo } from './Logo'
+import {
+  Container,
+  Heading,
+  Link,
+  Logo,
+  Text,
+} from '@siafoundation/design-system'
 
 type Props = {
   appName?: string
+  network?: 'mainnet' | 'zen'
   homeHref: string
   children: React.ReactNode
 }
 
-export function NavbarSite({ appName, homeHref, children }: Props) {
+export function Navbar({ appName, network, homeHref, children }: Props) {
   return (
     <div className="py-3 z-10 bg-white dark:bg-graydark-50 border-b border-gray-200 dark:border-graydark-200">
+      {network !== 'mainnet' && (
+        <div className="absolute top-0 left-0 right-0  h-1 bg-amber-500 dark:bg-amber-400" />
+      )}
       <Container size="4" className="relative">
         <div className="flex items-center justify-between gap-2">
-          <div className="relative z-10 hidden sm:flex">
+          <div className="relative z-10 flex">
             <Link href={homeHref} underline="none">
               <div className="flex items-center gap-1.5 mr-2">
                 <Logo size={35} />
                 {appName && (
                   <Heading
                     font="mono"
                     size="24"
-                    className="hidden pl-0 md:block tracking-tight relative -top-px"
+                    className="hidden pl-0 pr-px md:block tracking-tight relative -top-px"
                   >
                     {appName}
                   </Heading>
                 )}
+                {network !== 'mainnet' && (
+                  <Text
+                    className="bg-amber-500 dark:bg-amber-400 rounded py-0 px-2 hidden sm:flex"
+                    color="lo"
+                  >
+                    {network}
+                  </Text>
+                )}
               </div>
             </Link>
           </div>

apps/explorer/components/Layout/index.tsx

@@ -1,34 +1,39 @@
-import {
-  NavbarSite,
-  FaucetIcon,
-  LinkButton,
-  Tooltip,
-} from '@siafoundation/design-system'
+import { FaucetIcon, LinkButton, Tooltip } from '@siafoundation/design-system'
 import { routes } from '../../config/routes'
 import { Search } from './Search'
-import { isMainnet, networkName } from '../../config'
+import { isMainnet, networkName, appName } from '../../config'
 import { NavDropdownMenu } from './NavDropdownMenu'
 import { Footer } from './Footer'
+import { Navbar } from './Navbar'
 
 type Props = {
+  network: 'mainnet' | 'zen'
   children: React.ReactNode
 }
 
-export function Layout({ children }: Props) {
+export function Layout({ network, children }: Props) {
   return (
     <div className="relative h-full bg-gray-100 dark:bg-graydark-50 overflow-hidden">
       <div className="relative z-10 h-full overflow-y-auto">
-        <NavbarSite appName="siascan" homeHref={routes.home.index}>
+        <Navbar
+          appName={appName}
+          homeHref={routes.home.index}
+          network={network}
+        >
           <Search />
           {!isMainnet && (
             <Tooltip content={`${networkName} Faucet`}>
-              <LinkButton size="medium" href={routes.faucet.index}>
+              <LinkButton
+                size="medium"
+                href={routes.faucet.index}
+                className="hidden md:flex"
+              >
                 <FaucetIcon />
               </LinkButton>
             </Tooltip>
           )}
           <NavDropdownMenu />
-        </NavbarSite>
+        </Navbar>
         <div className="flex flex-col gap-16">
           <div className="flex flex-col gap-5 relative mt-5 min-h-[65vh]">
             {children}

apps/explorer/components/OGImage/Preview.tsx

@@ -2,6 +2,7 @@
 import { Header } from './Header'
 import { Background } from './Background'
 import { cx } from 'class-variance-authority'
+import { network } from '../../config'
 
 type Props = {
   title: string
@@ -24,7 +25,7 @@ export function Preview({ title, subtitle, values }: Props) {
             values ? 'pb-6' : 'pb-10'
           )}
           style={{
-            gap: '7px',
+            gap: '8px',
           }}
         >
           <img
@@ -62,7 +63,12 @@ export function Preview({ title, subtitle, values }: Props) {
           </div>
         )}
       </div>
-      <div tw="absolute bottom-0 left-0 right-0 h-4 bg-green-600" />
+      <div
+        tw={cx(
+          'absolute bottom-0 left-0 right-0 h-4',
+          network !== 'mainnet' ? 'bg-amber-500' : 'bg-green-600'
+        )}
+      />
     </div>
   )
 }

apps/explorer/components/OGImageEntity/Preview.tsx

@@ -3,6 +3,7 @@
 import { cx } from 'class-variance-authority'
 import { Background } from '../OGImage/Background'
 import { Header } from './Header'
+import { network } from '../../config'
 
 type Props = {
   id: string
@@ -57,7 +58,7 @@ export function Preview({
         <div
           tw="flex justify-start items-center px-10 pb-6"
           style={{
-            gap: '7px',
+            gap: '8px',
           }}
         >
           <img
@@ -93,7 +94,12 @@ export function Preview({
           </div>
         </div>
       </div>
-      <div tw="absolute bottom-0 left-0 right-0 h-4 bg-green-600" />
+      <div
+        tw={cx(
+          'absolute bottom-0 left-0 right-0 h-4',
+          network !== 'mainnet' ? 'bg-amber-500' : 'bg-green-600'
+        )}
+      />
     </div>
   )
 }

apps/explorer/config/index.ts

@@ -1,10 +1,12 @@
 import { webLinks } from '@siafoundation/design-system'
 
+export const network = 'mainnet'
 export const networkName = 'Sia Mainnet'
+export const siteName = 'siascan.com'
 export const appName = 'siascan'
 export const appLink = webLinks.explore.mainnet
 export const isMainnet = true
 
 // APIs
-export const faucetApi = 'https://navigator.sia.tech/faucet/api'
+export const faucetApi = 'https://faucet.zen.sia.tech/api'
 export const siaCentralApi = 'https://api.siacentral.com/v2'

apps/explorer/config/testnet.ts

@@ -1,10 +1,12 @@
 import { webLinks } from '@siafoundation/design-system'
 
+export const network = 'zen'
 export const networkName = 'Zen Testnet'
-export const appName = 'Zen Testnet'
+export const siteName = 'zen.siascan.com'
+export const appName = 'siascan'
 export const appLink = webLinks.explore.testnet
 export const isMainnet = false
 
 // APIs
-export const faucetApi = 'https://navigator-zen.sia.tech/faucet/api'
+export const faucetApi = 'https://faucet.zen.sia.tech/api'
 export const siaCentralApi = 'https://api.siacentral.com/v2/zen'

apps/explorer/lib/utils.ts

@@ -1,7 +1,7 @@
 import { EntityType } from '@siafoundation/design-system'
 import { routes } from '../config/routes'
 import { Metadata } from 'next'
-import { appName } from '../config'
+import { siteName } from '../config'
 
 export function getHref(type: EntityType, value: string) {
   return routes[type].view.replace(':id', value)
@@ -23,7 +23,7 @@ export function buildMetadata({
       title,
       description,
       url,
-      siteName: appName,
+      siteName: siteName,
     },
   }
 }

libs/design-system/src/index.ts

@@ -1,7 +1,6 @@
 // core
 export * from './core/Accordion'
 export * from './core/Alert'
-export * from './core/NavbarSite'
 export * from './core/Avatar'
 export * from './core/Badge'
 export * from './core/Button'