Merge pull request #348 from kleros/feat/click-on-staked-courts-details

feat: staked in courts click shows details
kleros · Feb 10, 2023 · 6be1a08 · 6be1a08
2 parents b8dc61d + 258751e
commit 6be1a08
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/src/components/court-list-item.js b/src/components/court-list-item.js
@@ -8,7 +8,7 @@ import ListItem from "./list-item";
 
 const { useDrizzle, useDrizzleState } = drizzleReactHooks;
 
-const CourtListItem = ({ ID, name }) => {
+const CourtListItem = ({ ID, name, onClick }) => {
   const { useCacheCall } = useDrizzle();
   const drizzleState = useDrizzleState((drizzleState) => ({
     account: drizzleState.accounts[0] || VIEW_ONLY_ADDRESS,
@@ -23,6 +23,7 @@ const CourtListItem = ({ ID, name }) => {
           <ETHAmount amount={stake} /> PNK
         </>
       }
+      onClick={onClick}
     >
       {name}
     </StyledListItem>
@@ -32,6 +33,7 @@ const CourtListItem = ({ ID, name }) => {
 CourtListItem.propTypes = {
   ID: t.number.isRequired,
   name: t.string.isRequired,
+  onClick: t.func.isRequired,
 };
 
 export default CourtListItem;

diff --git a/src/components/courts-list-card.js b/src/components/courts-list-card.js
@@ -1,46 +1,54 @@
 import { drizzleReactHooks } from "@drizzle/react-plugin";
 import React from "react";
+import t from "prop-types";
 import ListItem from "./list-item";
 import TitledListCard from "./titled-list-card";
 import CourtListItem from "./court-list-item";
 import { useDataloader, VIEW_ONLY_ADDRESS } from "../bootstrap/dataloader";
 
 const { useDrizzle, useDrizzleState } = drizzleReactHooks;
 
-const CourtsListCard = ({ apy }) => {
+const CourtsListCard = ({ apy, setActiveSubcourtID }) => {
   const { useCacheCall } = useDrizzle();
-  const drizzleState = useDrizzleState(drizzleState => ({
-    account: drizzleState.accounts[0] || VIEW_ONLY_ADDRESS
+  const drizzleState = useDrizzleState((drizzleState) => ({
+    account: drizzleState.accounts[0] || VIEW_ONLY_ADDRESS,
   }));
   const loadPolicy = useDataloader.loadPolicy();
   const juror = useCacheCall("KlerosLiquidExtraViews", "getJuror", drizzleState.account);
   let names = useCacheCall(
     ["PolicyRegistry"],
-    call =>
+    (call) =>
       juror &&
       [...new Set(juror.subcourtIDs)]
-        .filter(ID => ID !== "0")
-        .map(ID => String(ID - 1))
-        .map(ID => {
+        .filter((ID) => ID !== "0")
+        .map((ID) => String(ID - 1))
+        .map((ID) => {
           const policy = call("PolicyRegistry", "policies", ID);
           if (policy !== undefined) {
             const policyJSON = loadPolicy(policy);
             if (policyJSON)
               return {
                 name: policyJSON.name,
-                ID
+                ID,
               };
           }
           return undefined;
         })
   );
 
-  const loading = !names || names.some(n => n === undefined);
+  const loading = !names || names.some((n) => n === undefined);
   return (
     <TitledListCard loading={loading} prefix={names && names.length} title="Courts" apy={apy}>
       {!loading &&
         (names.length > 0 ? (
-          names.map((n, i) => <CourtListItem ID={Number(n.ID)} key={n.name} name={n.name} />)
+          names.map((n) => (
+            <CourtListItem
+              ID={Number(n.ID)}
+              key={n.name}
+              name={n.name}
+              onClick={() => setActiveSubcourtID(Number(n.ID))}
+            />
+          ))
         ) : (
           <>
             <ListItem key="Court-List-None">You are not staked in any courts.</ListItem>
@@ -50,4 +58,10 @@ const CourtsListCard = ({ apy }) => {
   );
 };
 
+CourtsListCard.propTypes = {
+  apy: t.number.isRequired,
+  setActiveSubcourtID: t.func.isRequired,
+  onClick: t.func.isRequired,
+};
+
 export default CourtsListCard;
diff --git a/src/containers/home.js b/src/containers/home.js
@@ -19,6 +19,7 @@ import RequiredChainIdModal from "../components/required-chain-id-modal";
 import SideChainPnkActions from "../components/side-chain/pnk-actions";
 import useChainId from "../hooks/use-chain-id";
 import { ReactComponent as Present } from "../assets/images/present.svg";
+import CourtDrawer from "../components/court-drawer";
 
 const { useDrizzleState } = drizzleReactHooks;
 
@@ -39,6 +40,8 @@ export default function Home() {
   const [isModalButtonVisible, setIsModalButtonVisible] = useState(false);
   const [apy, setApy] = useState(0);
 
+  const [activeSubcourtID, setActiveSubcourtID] = useState();
+
   useEffect(() => {
     setIsModalButtonVisible(false);
   }, [drizzleState.account]);
@@ -113,7 +116,7 @@ export default function Home() {
       <RewardCard />
       <Row gutter={32}>
         <Col lg={8}>
-          <CourtsListCard apy={apy > 1000000 ? apy : null} />
+          <CourtsListCard apy={apy > 1000000 ? apy : null} setActiveSubcourtID={setActiveSubcourtID} />
         </Col>
         <Col lg={8}>
           <CasesListCard />
@@ -125,6 +128,7 @@ export default function Home() {
       <OngoingCasesCard />
       <NotificationsCard />
       <SideChainPnkActions showGetSideChainPnkModal={false} />
+      {activeSubcourtID !== undefined && <CourtDrawer ID={activeSubcourtID} onClose={setActiveSubcourtID} />}
     </>
   );