[#220] fetch data for drep list

IntersectMBO · Mar 29, 2024 · 7194204 · 7194204
1 parent f36b3ab
commit 7194204
Show file tree

Hide file tree

Showing 10 changed files with 316 additions and 253 deletions.
diff --git a/govtool/frontend/src/components/atoms/StatusPill.tsx b/govtool/frontend/src/components/atoms/StatusPill.tsx
@@ -1,7 +1,7 @@
 import { Chip, ChipProps, styled } from "@mui/material";
 import { cyan, errorRed, successGreen } from "@/consts";
 
-type Status = 'active' | 'retired' | 'inactive';
+type Status = 'Active' | 'Inactive' | 'Retired';
 
 interface StatusPillProps {
   status: Status;
@@ -26,25 +26,25 @@ export const StatusPill = ({
 
 const getBgColor = (status: Status): string => {
   switch (status) {
-    case 'active':
+    case 'Active':
       return successGreen.c200;
-    case 'retired':
-      return errorRed.c100;
-    case 'inactive':
+    case 'Inactive':
       return cyan.c100;
-    // no default
+    case 'Retired':
+      return errorRed.c100;
+      // no default
   }
 };
 
 const getTextColor = (status: Status): string => {
   switch (status) {
-    case 'active':
+    case 'Active':
       return successGreen.c700;
-    case 'retired':
-      return errorRed.c500;
-    case 'inactive':
+    case 'Inactive':
       return cyan.c500;
-    // no default
+    case 'Retired':
+      return errorRed.c500;
+      // no default
   }
 };
 

diff --git a/govtool/frontend/src/components/organisms/DRepCard.tsx b/govtool/frontend/src/components/organisms/DRepCard.tsx
@@ -5,20 +5,44 @@ import { useTranslation } from "@hooks";
 import { Button, StatusPill, Typography } from "@atoms";
 import { Card } from "@molecules";
 import { correctAdaFormat } from "@/utils";
-import { ICONS } from "@/consts";
+import { ICONS, PATHS } from "@/consts";
+import { DRepData } from "@/models";
+
+type DRepCardProps = {
+  dRep: DRepData;
+  isConnected: boolean;
+  isInProgress?: boolean;
+  isMe?: boolean;
+  onDelegate?: () => void;
+}
 
 export const DRepCard = ({
+  dRep: {
+    status,
+    type,
+    view,
+    votingPower,
+  },
   isConnected,
-  name,
-  id,
-  votingPower,
-  status,
-}: any) => {
+  isInProgress,
+  isMe,
+  onDelegate,
+}: DRepCardProps) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
 
   return (
-    <Card sx={{ container: "root / inline-size", py: 2.5 }}>
+    <Card
+      {...(isMe && {
+        variant: 'primary',
+        label: 'Yourself'
+      })}
+      {...(isInProgress && {
+        variant: 'warning',
+        label: 'In Progress'
+      })}
+      sx={{ container: "root / inline-size", py: 2.5 }}
+    >
       <Box
         display="flex"
         flexDirection="column"
@@ -45,7 +69,7 @@ export const DRepCard = ({
             }}
           >
             <Box flex={1} minWidth={0}>
-              <Typography sx={ellipsisStyles}>{name}</Typography>
+              <Typography sx={ellipsisStyles}>{type}</Typography>
               <ButtonBase
                 sx={{
                   gap: 1,
@@ -57,7 +81,7 @@ export const DRepCard = ({
                 }}
               >
                 <Typography color="primary" variant="body2" sx={ellipsisStyles}>
-                  {id}
+                  {view}
                 </Typography>
                 <img alt="" src={ICONS.copyBlueIcon} />
               </ButtonBase>
@@ -108,13 +132,19 @@ export const DRepCard = ({
             },
           }}
         >
-          <Button variant="outlined" onClick={() => navigate(`/drep/${id}`)}>
+          <Button
+            variant="outlined"
+            onClick={() => navigate((isConnected
+              ? PATHS.dashboardDRepDirectoryDRep
+              : PATHS.dRepDirectoryDRep
+            ).replace(':dRepId', view))}
+          >
             {t("viewDetails")}
           </Button>
-          {status === "active" && isConnected && (
-            <Button>{t("delegate")}</Button>
+          {status === "Active" && isConnected && onDelegate && (
+            <Button onClick={onDelegate}>{t("delegate")}</Button>
           )}
-          {status === "active" && !isConnected && (
+          {status === "Active" && !isConnected && (
             <Button>{t("connectToDelegate")}</Button>
           )}
         </Box>

diff --git a/govtool/frontend/src/hooks/index.ts b/govtool/frontend/src/hooks/index.ts
@@ -2,6 +2,7 @@ export { useTranslation } from "react-i18next";
 
 export * from "./useDataActionsBar";
 export * from "./useDebounce";
+export * from "./useDelegateToDrep";
 export * from "./useFetchNextPageDetector";
 export * from "./useOutsideClick";
 export * from "./useSaveScrollPosition";

diff --git a/govtool/frontend/src/hooks/queries/useGetDRepListQuery.ts b/govtool/frontend/src/hooks/queries/useGetDRepListQuery.ts
@@ -1,21 +1,24 @@
-import { useQuery } from "react-query";
+import { UseQueryOptions, useQuery } from "react-query";
 
 import { QUERY_KEYS } from "@consts";
 import { useCardano } from "@context";
 import { getDRepList } from "@services";
+import { DRepData } from "@/models";
 
-export const useGetDRepListQuery = (dRepView?: string) => {
+export const useGetDRepListQuery = (dRepView?: string, options?: UseQueryOptions<DRepData[]>) => {
   const { pendingTransaction } = useCardano();
 
-  const { data, isLoading } = useQuery({
+  const { data, isLoading } = useQuery<DRepData[]>({
     queryKey: [
       QUERY_KEYS.useGetDRepListKey,
       (pendingTransaction.registerAsSoleVoter ||
         pendingTransaction.registerAsDrep ||
         pendingTransaction.retireAsSoleVoter ||
         pendingTransaction.retireAsDrep)?.transactionHash,
+      dRepView
     ],
     queryFn: () => getDRepList(dRepView),
+    ...options
   });
 
   return { data, isLoading };

diff --git a/govtool/frontend/src/hooks/useDelegateToDrep.ts b/govtool/frontend/src/hooks/useDelegateToDrep.ts
@@ -0,0 +1,45 @@
+import { useCallback, useState } from "react";
+import { useTranslation } from "@hooks";
+import { useCardano, useSnackbar } from "@/context";
+
+export const useDelegateTodRep = () => {
+  const {
+    buildSignSubmitConwayCertTx,
+    buildVoteDelegationCert,
+  } = useCardano();
+  const { t } = useTranslation();
+  const { addSuccessAlert, addErrorAlert } = useSnackbar();
+
+  const [isDelegating, setIsDelegating] = useState(false);
+
+  const delegate = useCallback(async (dRepId: string | undefined) => {
+    if (!dRepId) return;
+    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);
+    }
+  }, [
+    addErrorAlert,
+    addSuccessAlert,
+    buildSignSubmitConwayCertTx,
+    buildVoteDelegationCert,
+    t,
+  ]);
+
+  return {
+    delegate,
+    isDelegating,
+  };
+};