[#219] fetch data for DRep details page

govtool/frontend/src/hooks/queries/useGetDRepListQuery.ts

@@ -4,7 +4,7 @@ import { QUERY_KEYS } from "@consts";
 import { useCardano } from "@context";
 import { getDRepList } from "@services";
 
-export const useGetDRepListQuery = () => {
+export const useGetDRepListQuery = (dRepView?: string) => {
   const { pendingTransaction } = useCardano();
 
   const { data, isLoading } = useQuery({
@@ -15,7 +15,7 @@ export const useGetDRepListQuery = () => {
         pendingTransaction.retireAsSoleVoter ||
         pendingTransaction.retireAsDrep)?.transactionHash,
     ],
-    queryFn: getDRepList,
+    queryFn: () => getDRepList(dRepView),
   });
 
   return { data, isLoading };

govtool/frontend/src/i18n/locales/en.ts

@@ -255,6 +255,9 @@ export const en = {
       abstainCardDescription: "Select this to vote ABSTAIN to every vote.",
       abstainCardTitle: "Abstain from Every Vote",
       automatedVotingOptions: "Automated Voting Options",
+      editBtn: "Edit DRep data",
+      meAsDRep: "This  DRep ID is connected  to your wallet",
+      myDRep: "This is your DRep",
       noConfidenceDescription:
         "Select this to signal no confidence in the current constitutional committee by voting NO on every proposal and voting YES to no confidence proposals",
       noConfidenceTitle: "Signal No Confidence on Every Vote",
@@ -596,6 +599,7 @@ export const en = {
     cancel: "Cancel",
     clear: "Clear",
     clickToCopy: "Click to copy link",
+    close: "Close",
     confirm: "Confirm",
     connectToDelegate: "Connect to delegate",
     continue: "Continue",

govtool/frontend/src/models/api.ts

@@ -8,9 +8,13 @@ export interface VoterInfo {
 
 export interface DRepData {
   drepId: string;
+  view: string;
   url: string;
   metadataHash: string;
   deposit: number;
+  votingPower: number;
+  status: 'Active' | 'Inactive' | 'Retired';
+  type: 'DRep' | 'SoleVoter';
 }
 
 export type Vote = "yes" | "no" | "abstain";

govtool/frontend/src/pages/DRepDetails.tsx

@@ -1,12 +1,20 @@
-import { Box, ButtonBase } from "@mui/material";
+import { PropsWithChildren, useState } from "react";
+import { Navigate, useNavigate, useParams } from "react-router-dom";
+import {
+  Box, ButtonBase, Chip, CircularProgress
+} from "@mui/material";
 
-import { Button, Typography } from "@atoms";
+import { Button, LoadingButton, Typography } from "@atoms";
 import { Card, Share } from "@molecules";
-import { ICONS } from "@consts";
-import { useScreenDimension, useTranslation } from "@hooks";
-import { openInNewTab } from "@utils";
-import { PropsWithChildren } from "react";
-import { useModal } from "@/context";
+import { ICONS, PATHS } from "@consts";
+import {
+  useGetAdaHolderCurrentDelegationQuery,
+  useGetDRepListQuery,
+  useScreenDimension,
+  useTranslation
+} from "@hooks";
+import { correctAdaFormat, openInNewTab } from "@utils";
+import { useCardano, useModal, useSnackbar } from "@/context";
 
 const LINKS = [
   "darlenelonglink1.DRepwebsiteorwhatever.com",
@@ -21,48 +29,129 @@ type DRepDetailsProps = {
 };
 
 export const DRepDetails = ({ isConnected }: DRepDetailsProps) => {
+  const {
+    buildSignSubmitConwayCertTx,
+    buildVoteDelegationCert,
+    dRepID: myDRepId,
+    pendingTransaction,
+    stakeKey
+  } = useCardano();
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const { openModal } = useModal();
+  const { addSuccessAlert, addErrorAlert } = useSnackbar();
   const { screenWidth } = useScreenDimension();
+  const { dRepId: dRepParam } = useParams();
+
+  const [isDelegating, setIsDelegating] = useState(false);
+
+  const { currentDelegation } = useGetAdaHolderCurrentDelegationQuery(stakeKey);
+  const { data, isLoading } = useGetDRepListQuery(dRepParam);
+  const dRep = data?.[0];
+
+  if (!dRep && isLoading) return <CircularProgress />;
+
+  if (!dRep) return <Navigate to={PATHS.error} />;
+
+  const {
+    drepId, view, status, votingPower, type
+  } = dRep;
+
+  const isMe = drepId === myDRepId || view === myDRepId;
+  const isMyDrep = drepId === currentDelegation || view === currentDelegation;
+  const inProgressDelegation = pendingTransaction.delegate?.resourceId;
+  const isMyDrepInProgress = drepId === inProgressDelegation || view === inProgressDelegation;
+
+  const delegate = async () => {
+    setIsDelegating(true);
+    try {
+      const certBuilder = await buildVoteDelegationCert(drepId);
+      const result = await buildSignSubmitConwayCertTx({
+        certBuilder,
+        type: "delegate",
+        resourceId: drepId,
+      });
+      if (result) {
+        addSuccessAlert(t("alerts.delegate.success"));
+      }
+    } catch (error) {
+      addErrorAlert(t("alerts.delegate.failed"));
+    } finally {
+      setIsDelegating(false);
+    }
+  };
 
   return (
-    <Card sx={{ borderRadius: 5, pb: 4, pt: 2.25 }}>
+    <Card
+      {...((isMe || isMyDrep) && {
+        border: true,
+        variant: "primary",
+      })}
+      {...(isMyDrepInProgress && {
+        variant: "warning",
+        label: t("inProgress"),
+      })}
+      sx={{
+        borderRadius: 5, mt: isMe || isMyDrep ? 1 : 0, pb: 4, pt: 2.25
+      }}
+    >
+      {(isMe || isMyDrep) && (
+        <Chip
+          color="primary"
+          label={isMe ? t("dRepDirectory.meAsDRep") : t("dRepDirectory.myDRep")}
+          sx={{
+            boxShadow: (theme) => theme.shadows[2],
+            color: (theme) => theme.palette.text.primary,
+            mb: 1.5,
+            px: 2,
+            py: 0.5,
+            width: '100%',
+          }}
+        />
+      )}
       <Box
         sx={{
           alignItems: "center",
           display: "flex",
           flexDirection: "row",
-          justifyContent: "space-between",
+          gap: 1,
           mb: 3
         }}
       >
         <Typography
           fontWeight={600}
-          sx={ellipsisStyles}
+          sx={{ ...ellipsisStyles, flex: 1 }}
           variant="title2"
         >
-          ExampleDRepName
+          {type}
         </Typography>
-        {/* TODO: connect link */}
-        <Share link="test" />
+        {isMe && (
+          <Button
+            onClick={() => navigate(PATHS.updateMetadata)}
+            variant="outlined"
+          >
+            {t("dRepDirectory.editBtn")}
+          </Button>
+        )}
+        <Share link={window.location.href} />
       </Box>
 
       <Box component="dl" gap={2} m={0}>
         <DRepDetailsInfoItem label={t("drepId")}>
-          <DRepId>
-            drep_1njkdnkjwenfk12321ndcnsjdcsndc
-          </DRepId>
+          <DRepId>{view}</DRepId>
         </DRepDetailsInfoItem>
         <DRepDetailsInfoItem label={t("status")}>
           {/* TODO: add status pill */}
           {/* <StatusPill /> */}
+          <Typography>{status}</Typography>
         </DRepDetailsInfoItem>
         <DRepDetailsInfoItem label={t("votingPower")}>
           <Typography sx={{ display: "flex", flexDirection: "row", mt: 0.5 }}>
             {'₳ '}
-            50,000,000
+            {correctAdaFormat(votingPower)}
           </Typography>
         </DRepDetailsInfoItem>
+        {/* TODO: fetch metadata, add views for metadata errors */}
         <DRepDetailsInfoItem label={t("email")}>
           <LinkWithIcon
             label="darlenelonglink.DRepwebsiteorwhatever.com"
@@ -85,14 +174,17 @@ export const DRepDetails = ({ isConnected }: DRepDetailsProps) => {
         }}
       >
         {isConnected ? (
-          <Button
-            // TODO: add delegate function
-            onClick={() => { }}
+          <LoadingButton
+            data-testid="delegate-button"
+            disabled={!!pendingTransaction.delegate}
+            isLoading={isDelegating}
+            onClick={delegate}
             size="extraLarge"
             sx={{ width: "100%" }}
+            variant="contained"
           >
             {t("delegate")}
-          </Button>
+          </LoadingButton>
         ) : (
           <Button
             onClick={() => openModal({ type: "chooseWallet" })}
@@ -111,6 +203,7 @@ export const DRepDetails = ({ isConnected }: DRepDetailsProps) => {
         sx={{ maxWidth: 608 }}
         variant="body1"
       >
+        {/* TODO replace with actual data */}
         I am the Cardano crusader carving his path in the blockchain
         battleground. With a mind sharper than a Ledger Nano X, this fearless
         crypto connoisseur fearlessly navigates the volatile seas of Cardano,

govtool/frontend/src/services/requests/getDRepList.ts

@@ -1,7 +1,7 @@
 import type { DRepData } from "@models";
 import { API } from "../API";
 
-export const getDRepList = async () => {
-  const response = await API.get<DRepData[]>("/drep/list");
+export const getDRepList = async (drepView?: string) => {
+  const response = await API.get<DRepData[]>("/drep/list", drepView ? { params: { drepView } } : undefined);
   return response.data;
 };

govtool/frontend/src/theme.ts

@@ -1,12 +1,6 @@
 import { createTheme } from "@mui/material/styles";
 import {
-  cyan,
-  errorRed,
-  fadedPurple,
-  orange,
-  primaryBlue,
-  progressYellow,
-  successGreen,
+  cyan, errorRed, orange, primaryBlue, progressYellow, successGreen,
 } from "./consts";
 
 export const theme = createTheme({
@@ -56,7 +50,7 @@ export const theme = createTheme({
         {
           props: { color: "default", variant: "filled" },
           style: {
-            backgroundColor: fadedPurple.c100,
+            backgroundColor: primaryBlue.c50
           },
         },
         {