Merge pull request #534 from SiaFoundation/03-21-feat_explorer_host_r…

…evenue_calculator

feat: explorer host revenue calculator

.changeset/clean-icons-divide.md

@@ -0,0 +1,5 @@
+---
+'explorer': minor
+---
+
+The explorer now features a host revenue calculator tool.

apps/explorer/app/host-revenue-calculator/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { StateError } from '../../components/StateError'
+
+export default function Page({ error }: { error: Error }) {
+  console.error(error)
+  return (
+    <StateError
+      code={500}
+      message="Error, there was an issue loading the calculator."
+    />
+  )
+}

apps/explorer/app/host-revenue-calculator/not-found.tsx

@@ -0,0 +1,5 @@
+import { StateError } from '../../components/StateError'
+
+export default function Page() {
+  return <StateError message="There was an issue loading the calculator." />
+}

apps/explorer/app/host-revenue-calculator/opengraph-image.tsx

@@ -0,0 +1,20 @@
+import { getOGImage } from '../../components/OGImage'
+
+export const alt = 'Faucet'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export const contentType = 'image/png'
+
+export default async function Image() {
+  return getOGImage(
+    {
+      title: 'Host revenue calculator',
+      subtitle:
+        'Calculator for modeling revenue based on storage cost, usage, pricing, and collateral.',
+    },
+    size
+  )
+}

apps/explorer/app/host-revenue-calculator/page.tsx

@@ -0,0 +1,31 @@
+import { Metadata } from 'next'
+import { routes } from '../../config/routes'
+import { buildMetadata } from '../../lib/utils'
+import { Container, Heading } from '@siafoundation/design-system'
+
+export function generateMetadata(): Metadata {
+  const title = 'Host revenue calculator'
+  const description =
+    'Calculator for modeling revenue based on storage cost, usage, pricing, and collateral.'
+  const url = routes.hostRevenueCalculator.index
+  return buildMetadata({
+    title,
+    description,
+    url,
+  })
+}
+
+export default function Page() {
+  return (
+    <Container>
+      <div className="flex flex-col gap-3">
+        <Heading>Host Revenue Calculator</Heading>
+        <iframe
+          src="https://bafybeiguvt6gevjdyxmruhetnbryyqqdnvwqnwuu3bobjuh35vg4trgvwm.ipfs.fsd.link"
+          width="100%"
+          height="1000px"
+        />
+      </div>
+    </Container>
+  )
+}

apps/explorer/components/Layout/NavDropdownMenu.tsx

@@ -11,6 +11,7 @@ import {
   ThemeRadio,
 } from '@siafoundation/design-system'
 import { Menu24 } from '@siafoundation/react-icons'
+import { routes } from '../../config/routes'
 
 type Props = React.ComponentProps<typeof Button> & {
   trigger?: React.ReactNode
@@ -29,7 +30,7 @@ export function NavDropdownMenu({ trigger, children, ...props }: Props) {
       }
       contentProps={{ align: 'end' }}
     >
-      <DropdownMenuGroup className="py-1 px-1 w-[120px]">
+      <DropdownMenuGroup className="py-1 px-1">
         <DropdownMenuLabel className="px-1">Network</DropdownMenuLabel>
         <DropdownMenuItem className="p-2">
           <Link href={webLinks.explore.mainnet} underline="none">
@@ -42,15 +43,20 @@ export function NavDropdownMenu({ trigger, children, ...props }: Props) {
           </Link>
         </DropdownMenuItem>
       </DropdownMenuGroup>
-      <DropdownMenuGroup className="py-1 px-1 w-[120px]">
+      <DropdownMenuGroup className="py-1 px-1">
         <DropdownMenuLabel className="px-1">Tools</DropdownMenuLabel>
         <DropdownMenuItem className="p-2">
           <Link href={webLinks.explore.testnetZenFaucet} underline="none">
             Zen Faucet
           </Link>
         </DropdownMenuItem>
+        <DropdownMenuItem className="p-2">
+          <Link href={routes.hostRevenueCalculator.index} underline="none">
+            Host Revenue Calculator
+          </Link>
+        </DropdownMenuItem>
       </DropdownMenuGroup>
-      <DropdownMenuGroup className="py-1 px-1 w-[120px]">
+      <DropdownMenuGroup className="py-1 px-1">
         <DropdownMenuLabel className="px-1">Settings</DropdownMenuLabel>
         <div className="py-2 px-1">
           <CurrencyFiatSelector />

apps/explorer/config/routes.ts

@@ -20,4 +20,7 @@ export const routes = {
   faucet: {
     index: '/faucet',
   },
+  hostRevenueCalculator: {
+    index: '/host-revenue-calculator',
+  },
 }