exchange layout and market middleware

src/routes/exchange/[market]/index.tsx

@@ -0,0 +1,28 @@
+import { component$ } from "@builder.io/qwik";
+import { type RequestHandler, routeLoader$ } from "@builder.io/qwik-city";
+import { parseMarket } from "./parseMarket";
+
+export const onRequest: RequestHandler = ({ params, redirect, sharedMap }) => {
+  try {
+    const market = parseMarket(params.market);
+    sharedMap.set("quoteAsset", market.quoteAsset);
+    sharedMap.set("baseAsset", market.baseAsset);
+  } catch (error) {
+    redirect(300, "/");
+  }
+};
+
+export const useMarket = routeLoader$(({ sharedMap }) => {
+  return {
+    quoteAsset: sharedMap.get("quoteAsset") as string,
+    baseAsset: sharedMap.get("baseAsset") as string,
+  };
+});
+
+export default component$(() => {
+  const { quoteAsset, baseAsset } = useMarket().value;
+  console.log(quoteAsset);
+  console.log(baseAsset);
+
+  return <></>;
+});

src/routes/exchange/[market]/parseMarket.ts

@@ -0,0 +1,12 @@
+export const parseMarket = (market: string) => {
+  const regex = /^(\w+)-(\w+)$/;
+  const match = market.match(regex);
+  if (match) {
+    return {
+      quoteAsset: match[1].toUpperCase(),
+      baseAsset: match[2].toUpperCase(),
+    };
+  } else {
+    throw new Error("Cound not parse market");
+  }
+};

src/routes/exchange/layout.tsx

@@ -0,0 +1,9 @@
+import { component$, Slot } from "@builder.io/qwik";
+
+export default component$(() => {
+  return (
+    <>
+      <Slot />
+    </>
+  );
+});