fix: remove redirect loader (#189)

* feat: add not found page

* feat: add page middleware

app/not-found.tsx

@@ -0,0 +1 @@
+export { NotFoundPage as default } from '@/pages/not-found';

middleware.ts

@@ -0,0 +1,6 @@
+// Redirects "/" and "/trade" paths to "/trade/:primary/:numeraire"
+export const config = {
+  matcher: ['/', '/trade'],
+};
+
+export { tradeMiddleware as middleware } from '@/pages/trade/index.server';

src/pages/not-found/index.ts

@@ -0,0 +1 @@
+export { NotFoundPage } from './page';

src/pages/not-found/link.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import Link from 'next/link';
+import { PagePath } from '@/shared/const/pages';
+import { Button } from '@penumbra-zone/ui/Button';
+
+export const GoBackLink = () => {
+  return (
+    <div className='w-full desktop:w-48 desktop:mt-0'>
+      <Link href={PagePath.Trade}>
+        <Button>Go back</Button>
+      </Link>
+    </div>
+  );
+};

src/pages/not-found/page.tsx

@@ -0,0 +1,21 @@
+import { XCircle } from 'lucide-react';
+import { Text } from '@penumbra-zone/ui/Text';
+import { PenumbraWaves } from '@/pages/explore/ui/waves';
+import { GoBackLink } from './link';
+
+export const NotFoundPage = () => {
+  return (
+    <div>
+      <PenumbraWaves />
+
+      <section className='h-[calc(100dvh_-_80px)] max-w-[1062px] flex flex-col items-center justify-center desktop:justify-start gap-6 pt-8 px-4 mx-auto text-neutral-light'>
+        <div className='flex flex-col gap-4 grow justify-center items-center desktop:justify-start desktop:grow-0'>
+          <XCircle className='size-12' />
+          <Text large>Page not found</Text>
+        </div>
+
+        <GoBackLink />
+      </section>
+    </div>
+  );
+};

src/pages/trade/api/middleware.ts

@@ -0,0 +1,23 @@
+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));
+};

src/pages/trade/index.server.ts

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