use new hooks

src/Pages/DistributedUptimeStatus/Create/index.jsx

@@ -19,9 +19,8 @@ import { buildErrors } from "../../../Validation/error";
 import { createToast } from "../../../Utils/toastUtils";
 import { useNavigate } from "react-router-dom";
 import { useMonitorsFetch } from "../../StatusPage/Create/Hooks/useMonitorsFetch";
-import { useDUStatusPageFetchByUrl } from "../Status/Hooks/useDUStatusPageFetchByUrl";
 import { useTranslation } from "react-i18next";
-
+import { useFetchDepinStatusPage } from "../../../Hooks/useFetchDepinStatusPage";
 const CreateStatus = () => {
 	const theme = useTheme();
 	const { monitorId, url } = useParams();
@@ -32,7 +31,7 @@ const CreateStatus = () => {
 	const [createStatusPage, isLoading, networkError] = useCreateStatusPage(isCreate);
 
 	const [statusPageIsLoading, statusPageNetworkError, statusPage, _, isPublished] =
-		useDUStatusPageFetchByUrl({
+		useFetchDepinStatusPage({
 			url,
 			timeFrame: 30,
 			isCreate,
@@ -178,7 +177,9 @@ const CreateStatus = () => {
 					component="span"
 					fontSize="inherit"
 				>
-					{isCreate ? t("distributedUptimeStatusCreateYour") : t("distributedUptimeStatusEditYour")}{" "}
+					{isCreate
+						? t("distributedUptimeStatusCreateYour")
+						: t("distributedUptimeStatusEditYour")}{" "}
 				</Typography>
 				<Typography
 					component="span"
@@ -191,7 +192,9 @@ const CreateStatus = () => {
 			</Typography>
 			<ConfigBox>
 				<Stack>
-					<Typography component="h2">{t("distributedUptimeStatusCreateStatusPageAccess")}</Typography>
+					<Typography component="h2">
+						{t("distributedUptimeStatusCreateStatusPageAccess")}
+					</Typography>
 					<Typography component="p">
 						{t("distributedUptimeStatusCreateStatusPageReady")}
 					</Typography>
@@ -208,7 +211,9 @@ const CreateStatus = () => {
 			</ConfigBox>
 			<ConfigBox>
 				<Stack gap={theme.spacing(6)}>
-					<Typography component="h2">{t("distributedUptimeStatusBasicInfoHeader")}</Typography>
+					<Typography component="h2">
+						{t("distributedUptimeStatusBasicInfoHeader")}
+					</Typography>
 					<Typography component="p">
 						{t("distributedUptimeStatusBasicInfoDescription")}
 					</Typography>
@@ -241,7 +246,9 @@ const CreateStatus = () => {
 			<ConfigBox>
 				<Stack gap={theme.spacing(6)}>
 					<Typography component="h2">{t("distributedUptimeStatusLogoHeader")}</Typography>
-					<Typography component="p">{t("distributedUptimeStatusLogoDescription")} </Typography>
+					<Typography component="p">
+						{t("distributedUptimeStatusLogoDescription")}{" "}
+					</Typography>
 				</Stack>
 				<Stack
 					gap={theme.spacing(18)}
@@ -272,7 +279,9 @@ const CreateStatus = () => {
 			</ConfigBox>
 			<ConfigBox>
 				<Stack>
-					<Typography component="h2">{t("distributedUptimeStatusStandardMonitorsHeader")}</Typography>
+					<Typography component="h2">
+						{t("distributedUptimeStatusStandardMonitorsHeader")}
+					</Typography>
 					<Typography component="p">
 						{t("distributedUptimeStatusStandardMonitorsDescription")}
 					</Typography>

src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -23,8 +23,8 @@ import { RowContainer } from "../../../Components/StandardContainer";
 import { useTheme } from "@mui/material/styles";
 import { useState, useEffect, useRef } from "react";
 import { useParams } from "react-router-dom";
-import { useSubscribeToDetails } from "../../DistributedUptime/Details/Hooks/useSubscribeToDetails";
-import { useDUStatusPageFetchByUrl } from "./Hooks/useDUStatusPageFetchByUrl";
+import { useFetchDepinStatusPage } from "../../../Hooks/useFetchDepinStatusPage";
+import { useSubscribeToDepinDetails } from "../../../Hooks/useSubscribeToDepinDetails";
 import { useStatusPageDelete } from "../../StatusPage/Status/Hooks/useStatusPageDelete";
 import TimeFrameHeader from "./Components/TimeframeHeader";
 import SubHeader from "../../../Components/Subheader";
@@ -64,13 +64,13 @@ const DistributedUptimeStatus = () => {
 		statusPage,
 		monitorId,
 		isPublished,
-	] = useDUStatusPageFetchByUrl({
+	] = useFetchDepinStatusPage({
 		url,
 		timeFrame,
 	});
 
 	const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] =
-		useSubscribeToDetails({ monitorId, dateRange, isPublic, isPublished });
+		useSubscribeToDepinDetails({ monitorId, dateRange, isPublic, isPublished });
 
 	const [deleteStatusPage, isDeleting] = useStatusPageDelete(() => {
 		navigate("/distributed-uptime");
@@ -253,7 +253,11 @@ const DistributedUptimeStatus = () => {
 							sx={{ width: "50%" }}
 						/>
 						<InfoBox
-							heading={isSmallScreen ? t("distributedUptimeStatusUpt") : t("distributedUptimeStatusUptBurned")}
+							heading={
+								isSmallScreen
+									? t("distributedUptimeStatusUpt")
+									: t("distributedUptimeStatusUptBurned")
+							}
 							subHeading={safelyParseFloat(monitor?.uptBurnt).toFixed(4)}
 							img={UptLogo}
 							alt={t("distributedUptimeStatusUptLogo")}