Merge pull request #336 from IntersectMBO/feat/219-drep-directory-dre…

…p-details-page

feat/219-drep-directory-drep-details-page

govtool/frontend/src/App.tsx

@@ -23,6 +23,8 @@ import {
   DashboardGovernanceActionsCategory,
   RetireAsSoleVoter,
   DRepDirectory,
+  DRepDetails,
+  DRepDirectoryContent,
 } from "@pages";
 import {
   callAll,
@@ -104,12 +106,27 @@ export default () => {
             path={PATHS.dashboardGovernanceActionsCategory}
             element={<DashboardGovernanceActionsCategory />}
           />
+          <Route element={<DRepDirectory />}>
+            <Route
+              path={PATHS.dashboardDRepDirectory}
+              element={<DRepDirectoryContent isConnected />}
+            />
+            <Route
+              path={PATHS.dashboardDrepDirectoryDrep}
+              element={<DRepDetails isConnected />}
+            />
+          </Route>
+        </Route>
+        <Route element={<DRepDirectory />}>
+          <Route
+            path={PATHS.dRepDirectory}
+            element={<DRepDirectoryContent />}
+          />
           <Route
-            path={PATHS.dashboardDRepDirectory}
-            element={<DRepDirectory />}
+            path={PATHS.drepDirectoryDrep}
+            element={<DRepDetails />}
           />
         </Route>
-        <Route path={PATHS.dRepDirectory} element={<DRepDirectory />} />
         <Route
           path={PATHS.createGovernanceAction}
           element={<CreateGovernanceAction />}

govtool/frontend/src/components/atoms/StakeRadio.tsx

@@ -71,6 +71,7 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
         <Box alignItems="center" display="flex">
           <Typography color={isChecked ? "white" : "#8E908E"} variant="body2">
             {t("votingPower")}
+            :
           </Typography>
           {powerIsLoading ? (
             <Typography color={isChecked ? "white" : "#8E908E"} variant="body2">

govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx

@@ -60,7 +60,7 @@ export const AutomatedVotingCard = ({
           {t("dRepDirectory.votingPower")}
         </Typography>
         <Typography sx={{ display: "flex", flexDirection: "row", mt: 0.5 }}>
-          <Typography fontWeight={400}>₳</Typography>
+          {'₳ '}
           {votingPower}
         </Typography>
       </Box>

govtool/frontend/src/components/molecules/Share.tsx

@@ -0,0 +1,107 @@
+import { MouseEvent, useState } from "react";
+import { Box, ButtonBase, Popover } from "@mui/material";
+
+import { Typography } from "@atoms";
+import { ICONS } from "@consts";
+import { useSnackbar } from "@context";
+import { useTranslation } from "@hooks";
+
+export const Share = ({ link }: { link: string }) => {
+  const { addSuccessAlert } = useSnackbar();
+  const { t } = useTranslation();
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const [isActive, setIsActive] = useState<boolean>(true);
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const onCopy = (event: MouseEvent<HTMLButtonElement>) => {
+    navigator.clipboard.writeText(link);
+    addSuccessAlert(t("alerts.copiedToClipboard"));
+    setIsActive(false);
+    event.stopPropagation();
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
+
+  return (
+    <>
+      <ButtonBase
+        aria-describedby={id}
+        onClick={handleClick}
+        sx={(theme) => ({
+          alignItems: "center",
+          bgcolor: open ? "#F7F9FB" : "transparent",
+          borderRadius: 50,
+          boxShadow: open ? theme.shadows[1] : "none",
+          cursor: "pointer",
+          display: "flex",
+          justifyContent: "center",
+          padding: 1.5,
+          transition: 'all 0.3s',
+          '&:hover': {
+            boxShadow: theme.shadows[1],
+            bgcolor: "#F7F9FB",
+          }
+        })}
+      >
+        <img alt="" height={24} width={24} src={ICONS.share} />
+      </ButtonBase>
+      <Popover
+        id={id}
+        open={open}
+        onClose={handleClose}
+        anchorEl={anchorEl}
+        marginThreshold={12}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+      >
+        <Box
+          sx={{
+            alignItems: "center",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            padding: "12px 24px",
+            px: 3,
+            width: 148,
+          }}
+        >
+          <Typography sx={{ alignSelf: "flex-start" }}>{t("share")}</Typography>
+          <ButtonBase
+            onClick={onCopy}
+            sx={{
+              alignItems: "center",
+              bgcolor: isActive ? "lightBlue" : "neutralWhite",
+              borderRadius: 50,
+              boxShadow: (theme) => theme.shadows[1],
+              cursor: "pointer",
+              display: "flex",
+              height: 48,
+              justifyContent: "center",
+              width: 48,
+              mt: 1.5,
+              mb: 1,
+            }}
+          >
+            <img alt="link" height={24} src={ICONS.link} width={24} />
+          </ButtonBase>
+          <Typography variant="caption">{isActive ? t("clickToCopy") : t("linkCopied")}</Typography>
+        </Box>
+      </Popover>
+    </>
+  );
+};

govtool/frontend/src/components/molecules/index.ts

@@ -16,6 +16,7 @@ export * from "./LinkWithIcon";
 export * from "./OrderActionsChip";
 export * from "./Step";
 export * from "./PageTitle";
+export * from "./Share";
 export * from "./VoteActionForm";
 export * from "./VotesSubmitted";
 export * from "./WalletInfoCard";

govtool/frontend/src/components/organisms/index.ts

@@ -15,7 +15,6 @@ export * from "./DelegateTodRepStepOne";
 export * from "./DelegateTodRepStepTwo";
 export * from "./Drawer";
 export * from "./DrawerMobile";
-export * from "./DRepDirectoryContent";
 export * from "./ExternalLinkModal";
 export * from "./Footer";
 export * from "./GovernanceActionDetailsCard";

govtool/frontend/src/consts/icons.ts

@@ -27,6 +27,7 @@ export const ICONS = {
   guidesIcon: "/icons/Guides.svg",
   helpIcon: "/icons/Help.svg",
   link: "/icons/Link.svg",
+  share: "/icons/Share.svg",
   sortActiveIcon: "/icons/SortActive.svg",
   sortIcon: "/icons/Sort.svg",
   sortWhiteIcon: "/icons/SortWhite.svg",

govtool/frontend/src/consts/paths.ts

@@ -2,12 +2,14 @@ export const PATHS = {
   createGovernanceAction: "/create_governance_action",
   dashboardGovernanceActionsAction: "/connected/governance_actions/:proposalId",
   dashboardGovernanceActionsCategory:
-    "/connected/governance_actions/category/:category",
+  "/connected/governance_actions/category/:category",
   dashboardGovernanceActions: "/connected/governance_actions",
   dashboardDRepDirectory: "/connected/drep_directory",
+  dashboardDrepDirectoryDrep: "/connected/drep_directory/:dRepId",
   dashboard: "/dashboard",
   delegateTodRep: "/delegate",
   dRepDirectory: "/drep_directory",
+  drepDirectoryDrep: "/drep_directory/:dRepId",
   error: "/error",
   faqs: "/faqs",
   governanceActions: "/governance_actions",

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

@@ -4,18 +4,18 @@ 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({
     queryKey: [
       QUERY_KEYS.useGetDRepListKey,
       pendingTransaction.registerAsSoleVoter ||
-        pendingTransaction.registerAsDrep ||
-        pendingTransaction.retireAsSoleVoter ||
-        pendingTransaction.retireAsDrep,
+      pendingTransaction.registerAsDrep ||
+      pendingTransaction.retireAsSoleVoter ||
+      pendingTransaction.retireAsDrep,
     ],
-    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",
@@ -587,21 +590,30 @@ export const en = {
       usingUnregisteredStakeKeys:
         "Warning, no registered stake keys, using unregistered stake keys",
     },
+    about: "About",
     abstain: "Abstain",
     addLink: "+ Add link",
     back: "Back",
     backToDashboard: "Back to dashboard",
     backToList: "Back to the list",
     cancel: "Cancel",
     clear: "Clear",
+    clickToCopy: "Click to copy link",
+    close: "Close",
     confirm: "Confirm",
+    connectToDelegate: "Connect to delegate",
     continue: "Continue",
+    copiedLink: "Copied link",
     delegate: "Delegate",
+    drepId: "DRep ID",
+    email: "Email",
     here: "here",
-    info: "Info",
     inProgress: "In progress",
+    info: "Info",
     learnMore: "Learn more",
+    linkCopied: "Link copied",
     loading: "Loading...",
+    moreInformation: "More information",
     myDRepId: "My DRep ID:",
     nextStep: "Next step",
     no: "No",
@@ -611,11 +623,13 @@ export const en = {
     required: "required",
     seeTransaction: "See transaction",
     select: "Select",
+    share: "Share",
     skip: "Skip",
     sortBy: "Sort by",
+    status: "Status",
     submit: "Submit",
     thisLink: "this link",
-    votingPower: "Voting power:",
+    votingPower: "Voting power",
     yes: "Yes",
   },
 };

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";