display chain name

src/routes/$namespace/$chainId.tsx

@@ -1,22 +1,38 @@
 import { redirect } from "@tanstack/react-router";
 import { requireChains } from "@/entities/chain/lib";
-import { useChainState } from "@/entities/chain/model";
 import { createFileRoute } from "@tanstack/react-router";
 
+import { useChainState } from "@/entities/chain/model";
+import { Typography } from "@mui/material";
+
 function ChainPage() {
-  return <div className="mt-8">Content</div>;
+  const { selectedChain } = Route.useLoaderData();
+
+  return (
+    <>
+      <Typography
+        variant="h4"
+        sx={{ color: "#4C4E64DE" }}
+        className="select-none"
+      >
+        {selectedChain!.name}
+      </Typography>
+    </>
+  );
 }
 
 export const Route = createFileRoute("/$namespace/$chainId")({
   component: ChainPage,
   loader: async ({ params }) => {
     await requireChains();
-    const chains = useChainState.getState().chains;
+    const chainState = useChainState.getState();
+    const chains = chainState.chains;
 
     if (typeof chains === "undefined")
       throw redirect({ to: "/$namespace", params });
 
-    const selectedChain = chains.find((value) => value._id === params.chainId);
+    const selectedChain = chainState.getChain(params.chainId);
     if (!selectedChain) throw redirect({ to: "/$namespace", params });
+    return { selectedChain };
   },
 });