middleware: route default home page to explore page (#346)

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';

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();
+};

src/shared/index.server.ts

@@ -0,0 +1 @@
+export { routingMiddleware } from './api/middleware';

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 },
 ];