[#920 - bug 2] DRep details page Back button fix

govtool/frontend/src/components/organisms/DRepCard.tsx

@@ -168,6 +168,7 @@ export const DRepCard = ({
                     ? PATHS.dashboardDRepDirectoryDRep
                     : PATHS.dRepDirectoryDRep
                   ).replace(":dRepId", view),
+                  { state: { enteredFromWithinApp: true } },
                 )
               }
             >

govtool/frontend/src/components/organisms/DashboardCards/DRepDashboardCard.tsx

@@ -42,7 +42,10 @@ export const DRepDashboardCard = ({
   };
 
   const navigateToDrepDirectory = () =>
-    navigate(PATHS.dashboardDRepDirectoryDRep.replace(":dRepId", dRepIDBech32));
+    navigate(
+      PATHS.dashboardDRepDirectoryDRep.replace(":dRepId", dRepIDBech32),
+      { state: { enteredFromWithinApp: true } },
+    );
 
   const cardProps: Partial<DashboardActionCardProps> = (() => {
     // transaction in progress

govtool/frontend/src/components/organisms/DashboardCards/DelegateDashboardCard.tsx

@@ -104,6 +104,7 @@ export const DelegateDashboardCard = ({
           ":dRepId",
           displayedDelegationId || "",
         ),
+        { state: { enteredFromWithinApp: true } },
       ),
     [displayedDelegationId],
   );

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

@@ -251,6 +251,7 @@ export const en = {
       editBtn: "Edit DRep data",
       delegationOptions: "Delegation Options",
       filterTitle: "DRep Status",
+      goToDRepDirectory: "Go to DRep Directory",
       meAsDRep: "This  DRep ID is connected  to your wallet",
       myDelegation: "You have delegated <strong>₳ {{ada}}</strong> to:",
       myDRep: "This is your DRep",

govtool/frontend/src/pages/DRepDetails.tsx

@@ -1,5 +1,10 @@
 import { PropsWithChildren } from "react";
-import { Navigate, useNavigate, useParams } from "react-router-dom";
+import {
+  Navigate,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "react-router-dom";
 import { Box, ButtonBase, Chip, CircularProgress } from "@mui/material";
 
 import { Button, StatusPill, Typography } from "@atoms";
@@ -35,12 +40,14 @@ export const DRepDetails = ({ isConnected }: DRepDetailsProps) => {
   const { dRepID: myDRepId, pendingTransaction } = useCardano();
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const location = useLocation();
   const { openModal } = useModal();
   const { screenWidth } = useScreenDimension();
   const { dRepId: dRepParam } = useParams();
-
   const { delegate, isDelegating } = useDelegateTodRep();
 
+  const displayBackButton = location.state?.enteredFromWithinApp || false;
+
   const { dRepData, isDRepListLoading } = useGetDRepListInfiniteQuery({
     searchPhrase: dRepParam,
   });
@@ -74,16 +81,25 @@ export const DRepDetails = ({ isConnected }: DRepDetailsProps) => {
 
   return (
     <>
-      <LinkWithIcon
-        data-testid="back-to-list-button"
-        label={t("backToList")}
-        onClick={() =>
-          navigate(
-            isConnected ? PATHS.dashboardDRepDirectory : PATHS.dRepDirectory,
-          )
-        }
-        sx={{ mb: 2 }}
-      />
+      {displayBackButton ? (
+        <LinkWithIcon
+          data-testid="back-button"
+          label={t("back")}
+          onClick={() => navigate(-1)}
+          sx={{ mb: 2 }}
+        />
+      ) : (
+        <LinkWithIcon
+          data-testid="go-to-drep-directory-button"
+          label={t("dRepDirectory.goToDRepDirectory")}
+          onClick={() =>
+            navigate(
+              isConnected ? PATHS.dashboardDRepDirectory : PATHS.dRepDirectory,
+            )
+          }
+          sx={{ mb: 2 }}
+        />
+      )}
       <Card
         {...((isMe || isMyDrep) && {
           border: true,