display current chain

src/routes/$namespace/$chainId.tsx

@@ -1,22 +1,32 @@
 import { redirect } from "@tanstack/react-router";
+import { useParams } from "@tanstack/react-router";
 import { requireChains } from "@/entities/chain/lib";
 import { createFileRoute } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 
 import { useChainState } from "@/entities/chain/model";
 import { Typography } from "@mui/material";
+import { ChainButtons } from "@/widgets/chain-buttons";
 
 function ChainPage() {
-  const { selectedChain } = Route.useLoaderData();
+  const navigate = useNavigate({ from: "/$namespace/$chainId" });
+  const { chainId } = useParams({ from: "/$namespace/$chainId" });
+  const chain = useChainState((state) => state.getChain(chainId));
+  if (!chain) return navigate({ to: "/$namespace" });
 
   return (
     <>
-      <Typography
+      <div key={chain._id} className="flex items-center justify-between">
-        variant="h4"
+        <Typography
-        sx={{ color: "#4C4E64DE" }}
+          variant="h4"
-        className="select-none"
+          sx={{ color: "#4C4E64DE" }}
-      >
+          className="select-none"
-        {selectedChain!.name}
+        >
-      </Typography>
+          {chain.name}
+        </Typography>
+
+        <ChainButtons chain={chain} />
+      </div>
     </>
   );
 }
@@ -33,6 +43,5 @@ export const Route = createFileRoute("/$namespace/$chainId")({
 
     const selectedChain = chainState.getChain(params.chainId);
     if (!selectedChain) throw redirect({ to: "/$namespace", params });
-    return { selectedChain };
   },
 });