diff --git a/src/routes/$namespace/$chainId.tsx b/src/routes/$namespace/$chainId.tsx index 02e651c..7ab85e1 100644 --- a/src/routes/$namespace/$chainId.tsx +++ b/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 ( <> - - {selectedChain!.name} - +
+ + {chain.name} + + + +
); } @@ -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 }; }, });