Merge pull request #1949 from kleros/fix/courts-page-name

fix: court name

Author: kemuru

web/src/pages/Courts/CourtDetails/StakePanel/index.tsx

@@ -44,7 +44,7 @@ const InputArea = styled(TagArea)`
   flex-direction: column;
 `;
 
-const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "Unknown Court" }) => {
+const StakePanel: React.FC<{ courtName: string | undefined }> = ({ courtName }) => {
   const [amount, setAmount] = useState("");
   const [isActive, setIsActive] = useState<boolean>(true);
   const [action, setAction] = useState<ActionType>(ActionType.stake);
@@ -65,7 +65,7 @@ const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "Unknown Cour
         <TextArea>
           <strong>{`${isStaking ? "Stake" : "Withdraw"} PNK`}</strong> {`${isStaking ? "to join the" : "from"}`}{" "}
           {courtName}
-          {courtName.toLowerCase().endsWith("court") || courtName.toLowerCase().startsWith("corte") ? null : " Court"}
+          {courtName?.toLowerCase().endsWith("court") || courtName?.toLowerCase().startsWith("corte") ? null : " Court"}
         </TextArea>
         <InputArea>
           <InputDisplay {...{ action, amount, setAmount }} />

web/src/pages/Courts/CourtDetails/index.tsx

@@ -8,7 +8,6 @@ import { Card, Breadcrumb } from "@kleros/ui-components-library";
 
 import { isProductionDeployment } from "consts/index";
 
-import { useCourtPolicy } from "queries/useCourtPolicy";
 import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree";
 
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -99,7 +98,6 @@ const StakePanelAndStats = styled.div`
 
 const CourtDetails: React.FC = () => {
   const { id } = useParams();
-  const { data: policy } = useCourtPolicy(id);
   const { data } = useCourtTree();
   const [isStakingMiniGuideOpen, toggleStakingMiniGuide] = useToggle(false);
   const navigate = useNavigate();
@@ -112,13 +110,16 @@ const CourtDetails: React.FC = () => {
       value: node.id,
     })) ?? [];
 
+  const currentCourt = courtPath?.[courtPath.length - 1];
+  const courtName = currentCourt?.name;
+
   return (
     <Container>
       <TopSearch />
       <StyledCard>
         <CourtHeader>
           <CourtInfo>
-            {policy ? policy.name : <StyledSkeleton width={200} />}
+            {data ? courtName : <StyledSkeleton width={200} />}
             {breadcrumbItems.length > 1 ? (
               <StyledBreadcrumb
                 items={breadcrumbItems}
@@ -138,7 +139,7 @@ const CourtDetails: React.FC = () => {
         </CourtHeader>
         <Divider />
         <StakePanelAndStats>
-          <StakePanel courtName={policy?.name} />
+          <StakePanel {...{ courtName }} />
           <Stats />
         </StakePanelAndStats>
       </StyledCard>