From 5bafe41e1e86c9e61f9eea0f04f24442109a8883 Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Thu, 21 Mar 2024 09:42:13 -0400
Subject: [PATCH] feat: explorer host revenue calculator

---
 .changeset/clean-icons-divide.md              |  5 +++
 .../app/host-revenue-calculator/error.tsx     | 13 ++++++++
 .../app/host-revenue-calculator/not-found.tsx |  5 +++
 .../opengraph-image.tsx                       | 20 ++++++++++++
 .../app/host-revenue-calculator/page.tsx      | 31 +++++++++++++++++++
 .../components/Layout/NavDropdownMenu.tsx     | 12 +++++--
 apps/explorer/config/routes.ts                |  3 ++
 7 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/clean-icons-divide.md
 create mode 100644 apps/explorer/app/host-revenue-calculator/error.tsx
 create mode 100644 apps/explorer/app/host-revenue-calculator/not-found.tsx
 create mode 100644 apps/explorer/app/host-revenue-calculator/opengraph-image.tsx
 create mode 100644 apps/explorer/app/host-revenue-calculator/page.tsx

diff --git a/.changeset/clean-icons-divide.md b/.changeset/clean-icons-divide.md
new file mode 100644
index 000000000..058363a61
--- /dev/null
+++ b/.changeset/clean-icons-divide.md
@@ -0,0 +1,5 @@
+---
+'explorer': minor
+---
+
+The explorer now features a host revenue calculator tool.
diff --git a/apps/explorer/app/host-revenue-calculator/error.tsx b/apps/explorer/app/host-revenue-calculator/error.tsx
new file mode 100644
index 000000000..a3bdacf11
--- /dev/null
+++ b/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."
+    />
+  )
+}
diff --git a/apps/explorer/app/host-revenue-calculator/not-found.tsx b/apps/explorer/app/host-revenue-calculator/not-found.tsx
new file mode 100644
index 000000000..88859d0b1
--- /dev/null
+++ b/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." />
+}
diff --git a/apps/explorer/app/host-revenue-calculator/opengraph-image.tsx b/apps/explorer/app/host-revenue-calculator/opengraph-image.tsx
new file mode 100644
index 000000000..782102171
--- /dev/null
+++ b/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
+  )
+}
diff --git a/apps/explorer/app/host-revenue-calculator/page.tsx b/apps/explorer/app/host-revenue-calculator/page.tsx
new file mode 100644
index 000000000..eee0127f4
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/explorer/components/Layout/NavDropdownMenu.tsx b/apps/explorer/components/Layout/NavDropdownMenu.tsx
index 7f3f05d59..08aba5934 100644
--- a/apps/explorer/components/Layout/NavDropdownMenu.tsx
+++ b/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 />
diff --git a/apps/explorer/config/routes.ts b/apps/explorer/config/routes.ts
index 58447d42a..428be4aa6 100644
--- a/apps/explorer/config/routes.ts
+++ b/apps/explorer/config/routes.ts
@@ -20,4 +20,7 @@ export const routes = {
   faucet: {
     index: '/faucet',
   },
+  hostRevenueCalculator: {
+    index: '/host-revenue-calculator',
+  },
 }