48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
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 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 (
|
|
<>
|
|
<div key={chain._id} className="flex items-center justify-between">
|
|
<Typography
|
|
variant="h4"
|
|
sx={{ color: "#4C4E64DE" }}
|
|
className="select-none"
|
|
>
|
|
{chain.name}
|
|
</Typography>
|
|
|
|
<ChainButtons chain={chain} />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export const Route = createFileRoute("/$namespace/$chainId")({
|
|
component: ChainPage,
|
|
loader: async ({ params }) => {
|
|
await requireChains();
|
|
const chainState = useChainState.getState();
|
|
const chains = chainState.chains;
|
|
|
|
if (typeof chains === "undefined")
|
|
throw redirect({ to: "/$namespace", params });
|
|
|
|
const selectedChain = chainState.getChain(params.chainId);
|
|
if (!selectedChain) throw redirect({ to: "/$namespace", params });
|
|
},
|
|
});
|