From 4c71ae92c2756b9677d4029a896f82893188d6b2 Mon Sep 17 00:00:00 2001
From: Tal Derei <70081547+TalDerei@users.noreply.github.com>
Date: Tue, 4 Feb 2025 08:45:43 -0800
Subject: [PATCH] middleware: route default home page to explore page (#346)

---
 middleware.ts                     |  4 ++--
 src/pages/trade/api/middleware.ts | 23 --------------------
 src/pages/trade/index.server.ts   |  1 -
 src/shared/api/middleware.ts      | 35 +++++++++++++++++++++++++++++++
 src/shared/index.server.ts        |  1 +
 src/widgets/header/ui/links.ts    |  4 ++--
 6 files changed, 40 insertions(+), 28 deletions(-)
 delete mode 100644 src/pages/trade/api/middleware.ts
 delete mode 100644 src/pages/trade/index.server.ts
 create mode 100644 src/shared/api/middleware.ts
 create mode 100644 src/shared/index.server.ts

diff --git a/middleware.ts b/middleware.ts
index 5d3460f4..96834f6e 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,6 +1,6 @@
-// Redirects "/" and "/trade" paths to "/trade/:primary/:numeraire"
+// Redirects "/" and "/trade" paths to paths defined in the routing middleware.
 export const config = {
   matcher: ['/', '/trade'],
 };
 
-export { tradeMiddleware as middleware } from '@/pages/trade/index.server';
+export { routingMiddleware as middleware } from '@/shared/index.server';
diff --git a/src/pages/trade/api/middleware.ts b/src/pages/trade/api/middleware.ts
deleted file mode 100644
index fb691243..00000000
--- a/src/pages/trade/api/middleware.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NextResponse, NextRequest } from 'next/server';
-import { ChainRegistryClient } from '@penumbra-labs/registry';
-import { getClientSideEnv } from '@/shared/api/env/getClientSideEnv';
-import { assetPatterns } from '@penumbra-zone/types/assets';
-
-export const tradeMiddleware = async (request: NextRequest) => {
-  const { PENUMBRA_CHAIN_ID } = getClientSideEnv();
-
-  const chainRegistryClient = new ChainRegistryClient();
-  const registry = await chainRegistryClient.remote.get(PENUMBRA_CHAIN_ID);
-  const allAssets = registry
-    .getAllAssets()
-    .filter(m => !assetPatterns.delegationToken.matches(m.display))
-    .toSorted((a, b) => Number(b.priorityScore - a.priorityScore));
-
-  const baseAsset = allAssets[0]?.symbol;
-  const quoteAsset = allAssets[1]?.symbol;
-  if (!baseAsset || !quoteAsset) {
-    return NextResponse.redirect(new URL('not-found', request.url));
-  }
-
-  return NextResponse.redirect(new URL(`/trade/${baseAsset}/${quoteAsset}`, request.url));
-};
diff --git a/src/pages/trade/index.server.ts b/src/pages/trade/index.server.ts
deleted file mode 100644
index 44636ea9..00000000
--- a/src/pages/trade/index.server.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { tradeMiddleware } from './api/middleware';
diff --git a/src/shared/api/middleware.ts b/src/shared/api/middleware.ts
new file mode 100644
index 00000000..8460f089
--- /dev/null
+++ b/src/shared/api/middleware.ts
@@ -0,0 +1,35 @@
+import { NextResponse, NextRequest } from 'next/server';
+import { ChainRegistryClient } from '@penumbra-labs/registry';
+import { getClientSideEnv } from '@/shared/api/env/getClientSideEnv';
+import { assetPatterns } from '@penumbra-zone/types/assets';
+
+export const routingMiddleware = async (request: NextRequest) => {
+  const { pathname, origin } = request.nextUrl;
+
+  if (pathname === '/') {
+    // Redirect the default homepage to the 'explore' page.
+    // TODO: Replace this with a path to a fully designed landing page.
+    return NextResponse.redirect(`${origin}/explore`);
+  }
+
+  // Otherwise, route to the default trading pair on the trading page.
+  if (pathname === '/trade') {
+    const { PENUMBRA_CHAIN_ID } = getClientSideEnv();
+    const chainRegistryClient = new ChainRegistryClient();
+    const registry = await chainRegistryClient.remote.get(PENUMBRA_CHAIN_ID);
+    const allAssets = registry
+      .getAllAssets()
+      .filter(m => !assetPatterns.delegationToken.matches(m.display))
+      .toSorted((a, b) => Number(b.priorityScore - a.priorityScore));
+
+    const baseAsset = allAssets[0]?.symbol;
+    const quoteAsset = allAssets[1]?.symbol;
+    if (!baseAsset || !quoteAsset) {
+      return NextResponse.redirect(new URL('not-found', request.url));
+    }
+
+    return NextResponse.redirect(new URL(`/trade/${baseAsset}/${quoteAsset}`, request.url));
+  }
+
+  return NextResponse.next();
+};
diff --git a/src/shared/index.server.ts b/src/shared/index.server.ts
new file mode 100644
index 00000000..f453011b
--- /dev/null
+++ b/src/shared/index.server.ts
@@ -0,0 +1 @@
+export { routingMiddleware } from './api/middleware';
diff --git a/src/widgets/header/ui/links.ts b/src/widgets/header/ui/links.ts
index 68ed8680..51ab202e 100644
--- a/src/widgets/header/ui/links.ts
+++ b/src/widgets/header/ui/links.ts
@@ -2,8 +2,8 @@ import { MoonStar, ArrowUpFromDot, Coins } from 'lucide-react';
 import { PagePath } from '@/shared/const/pages';
 
 export const HEADER_LINKS = [
-  { label: 'Trade', value: PagePath.Trade, icon: ArrowUpFromDot },
   { label: 'Explore', value: PagePath.Explore, icon: Coins },
-  { label: 'Inspect', value: PagePath.Inspect, icon: MoonStar },
   { label: 'Portfolio', value: PagePath.Portfolio, icon: Coins },
+  { label: 'Trade', value: PagePath.Trade, icon: ArrowUpFromDot },
+  { label: 'Inspect', value: PagePath.Inspect, icon: MoonStar },
 ];