Feat: Migrate Hardcoded Strings in Auth and About

src/Pages/Auth/Register/Register.jsx

@@ -35,7 +35,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => {
 				textAlign="center"
 			>
 				<Box>
-					<Typography component="h1">Sign Up</Typography>
+					<Typography component="h1">{t("signUP")}</Typography>
 					<Typography>
 						{isSuperAdmin
 							? t("authRegisterCreateSuperAdminAccount")
@@ -67,7 +67,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => {
 				</Box>
 				<Box maxWidth={400}>
 					<Typography className="tos-p">
-						{t("authRegisterBySigningUp")}
+						{t("authRegisterBySigningUp")}{" "}
 						<Typography
 							component="span"
 							onClick={() => {

src/Pages/Auth/Register/StepOne/index.jsx

@@ -4,6 +4,7 @@ import { useTheme } from "@emotion/react";
 import { Box, Button, Stack, Typography } from "@mui/material";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import TextInput from "../../../../Components/Inputs/TextInput";
+import { useTranslation } from "react-i18next";
 
 StepOne.propTypes = {
 	form: PropTypes.object,
@@ -28,6 +29,7 @@ StepOne.propTypes = {
 function StepOne({ form, errors, onSubmit, onChange, onBack }) {
 	const theme = useTheme();
 	const inputRef = useRef(null);
+	const { t } = useTranslation();
 
 	useEffect(() => {
 		if (inputRef.current) {
@@ -43,8 +45,8 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
 				textAlign="center"
 			>
 				<Box>
-					<Typography component="h1">Sign Up</Typography>
-					<Typography>Enter your personal details</Typography>
+					<Typography component="h1">{t("signUp")}</Typography>
+					<Typography>{t("authRegisterStepOnePersonalDetails")}</Typography>
 				</Box>
 
 				<Box
@@ -107,7 +109,7 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
 							}}
 						>
 							<ArrowBackRoundedIcon />
-							Back
+							{t("commonBack")}
 						</Button>
 						<Button
 							variant="contained"
@@ -123,7 +125,7 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
 								},
 							}}
 						>
-							Continue
+							{t("continue")}
 						</Button>
 					</Stack>
 				</Box>

src/Pages/DistributedUptime/Create/index.jsx

@@ -19,6 +19,7 @@ import { monitorValidation } from "../../../Validation/validation";
 import { useParams } from "react-router-dom";
 import { useCreateDistributedUptimeMonitor } from "./Hooks/useCreateDistributedUptimeMonitor";
 import { useMonitorFetch } from "./Hooks/useMonitorFetch";
+import { useTranslation } from "react-i18next";
 
 // Constants
 const MS_PER_MINUTE = 60000;
@@ -41,6 +42,7 @@ const parseUrl = (url) => {
 const CreateDistributedUptime = () => {
 	const { monitorId } = useParams();
 	const isCreate = typeof monitorId === "undefined";
+	const { t } = useTranslation();
 
 	let BREADCRUMBS = [
 		{ name: `distributed uptime`, path: "/distributed-uptime" },
@@ -191,14 +193,14 @@ const CreateDistributedUptime = () => {
 						fontSize="inherit"
 						fontWeight="inherit"
 					>
-						monitor
+						{t("monitor")}
 					</Typography>
 				</Typography>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">General settings</Typography>
+						<Typography component="h2">{t("settingsGeneralSettings")}</Typography>
 						<Typography component="p">
-							Here you can select the URL of the host, together with the type of monitor.
+							{t("distributedUptimeCreateSelectURL")}
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(15)}>
@@ -232,9 +234,9 @@ const CreateDistributedUptime = () => {
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">Checks to perform</Typography>
+						<Typography component="h2">{t("distributedUptimeCreateChecks")}</Typography>
 						<Typography component="p">
-							You can always add or remove checks after adding your site.
+							{t("distributedUptimeCreateChecksDescription")}
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(12)}>
@@ -259,14 +261,14 @@ const CreateDistributedUptime = () => {
 										filled={https.toString()}
 										onClick={() => setHttps(true)}
 									>
-										HTTPS
+										{t("https")}
 									</Button>
 									<Button
 										variant="group"
 										filled={(!https).toString()}
 										onClick={() => setHttps(false)}
 									>
-										HTTP
+										{t("http")}
 									</Button>
 								</ButtonGroup>
 							) : (
@@ -291,9 +293,9 @@ const CreateDistributedUptime = () => {
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">Incident notifications</Typography>
+						<Typography component="h2">{t("distributedUptimeCreateIncidentNotification")}</Typography>
 						<Typography component="p">
-							When there is an incident, notify users.
+							{t("distributedUptimeCreateIncidentDescription")}
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(6)}>
@@ -310,7 +312,7 @@ const CreateDistributedUptime = () => {
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">Advanced settings</Typography>
+						<Typography component="h2">{t("distributedUptimeCreateAdvancedSettings")}</Typography>
 					</Box>
 					<Stack gap={theme.spacing(12)}>
 						<Select

src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx

@@ -5,6 +5,7 @@ import SmartToyIcon from "@mui/icons-material/SmartToy";
 import Dot from "../../../../../Components/Dot";
 // Utils
 import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
 
 const MESSAGES = [
 	"I've checked the network status, and we're seeing excellent performance across all regions.",
@@ -16,6 +17,7 @@ const MESSAGES = [
 
 const ChatBot = ({ sx }) => {
 	const theme = useTheme();
+	const { t } = useTranslation(); 
 	return (
 		<ColContainer
 			backgroundColor={theme.palette.chatbot.background}
@@ -37,7 +39,7 @@ const ChatBot = ({ sx }) => {
 					color={theme.palette.chatbot.textAccent}
 					sx={{ opacity: 0.4 }}
 				>
-					Now
+					{t("now")}
 				</Typography>
 			</Stack>
 			<Typography>{MESSAGES[Math.floor(Math.random() * MESSAGES.length)]}</Typography>

src/Pages/DistributedUptime/Details/Components/ControlsHeader/index.jsx

@@ -1,17 +1,18 @@
 // Components
-import { Box, Stack, Typography, Button } from "@mui/material";
+import { Box, Stack, Button } from "@mui/material";
 import Image from "../../../../../Components/Image";
 import SettingsIcon from "../../../../../assets/icons/settings-bold.svg?react";
 
 //Utils
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
-import { useLocation } from "react-router-dom";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 
 const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, monitorId }) => {
 	const theme = useTheme();
 	const navigate = useNavigate();
+	const { t } = useTranslation(); 
 
 	return (
 		<Stack
@@ -25,7 +26,7 @@ const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, monitorId }) => {
 					onClick={() => setIsDeleteOpen(!isDeleteOpen)}
 					loading={isDeleting}
 				>
-					Delete
+					{t("delete")}
 				</Button>
 			</Box>
 			<Box>
@@ -45,7 +46,7 @@ const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, monitorId }) => {
 						},
 					}}
 				>
-					<SettingsIcon /> Configure
+					<SettingsIcon /> {t("configure")}
 				</Button>
 			</Box>
 		</Stack>

src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx

@@ -6,9 +6,11 @@ import { ColContainer } from "../../../../../Components/StandardContainer";
 
 // Utils
 import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
+
 const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 	const theme = useTheme();
-
+	const { t } = useTranslation();
 	const statusColor = {
 		up: theme.palette.success.main,
 		down: theme.palette.error.main,
@@ -44,13 +46,13 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 					<thead>
 						<tr>
 							<th style={{ textAlign: "left", paddingLeft: theme.spacing(4) }}>
-								<Typography>COUNTRY</Typography>
+								<Typography>{t("country")}</Typography>
 							</th>
 							<th style={{ textAlign: "left", paddingLeft: theme.spacing(4) }}>
-								<Typography>CITY</Typography>
+								<Typography>{t("city")}</Typography>
 							</th>
 							<th style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
-								<Typography>RESPONSE</Typography>
+								<Typography>{t("response")}</Typography>
 							</th>
 							<th style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
 								<Typography sx={{ whiteSpace: "nowrap" }}>{"UPT BURNED"}</Typography>
@@ -74,7 +76,7 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 										<Typography>{city}</Typography>
 									</td>
 									<td style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
-										<Typography>{Math.floor(dataPoint.responseTime)} ms</Typography>
+										<Typography>{Math.floor(dataPoint.responseTime)} {t("ms")}</Typography>
 									</td>
 									<td style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
 										<Typography color={theme.palette.warning.main}>

src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx

@@ -4,9 +4,12 @@ import { formatDateWithTz } from "../../../../../../Utils/timeUtils";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import { useTranslation } from "react-i18next";
+
 const CustomToolTip = ({ active, payload, label }) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 	const theme = useTheme();
+	const { t } = useTranslation();
 	if (active && payload && payload.length) {
 		const responseTime = payload[0]?.payload?.originalAvgResponseTime
 			? payload[0]?.payload?.originalAvgResponseTime
@@ -51,7 +54,7 @@ const CustomToolTip = ({ active, payload, label }) => {
 						component="span"
 						sx={{ opacity: 0.8 }}
 					>
-						Response time:
+						{t("responseTime")}
 					</Typography>
 					<Typography component="span">
 						{Math.floor(responseTime)}
@@ -59,7 +62,7 @@ const CustomToolTip = ({ active, payload, label }) => {
 							component="span"
 							sx={{ opacity: 0.8 }}
 						>
-							ms
+							{t("ms")}
 						</Typography>
 					</Typography>
 				</Stack>

src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx

@@ -8,8 +8,11 @@ import ResponseTimeIcon from "../../../../../assets/icons/response-time-icon.svg
 
 // Utils
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+
 const DistributedUptimeResponseChart = ({ checks }) => {
 	const [chartType, setChartType] = useState("bar");
+	const { t } = useTranslation();
 	let Chart = null;
 	if (chartType === "area") {
 		Chart = DistributedUptimeResponseAreaChart;
@@ -23,13 +26,13 @@ const DistributedUptimeResponseChart = ({ checks }) => {
 				direction="row"
 				alignItems="center"
 			>
-				<Typography>Bar</Typography>
+				<Typography>{t("bar")}</Typography>
 				<Switch
 					color="main"
 					value={chartType}
 					onChange={(e) => setChartType(e.target.checked ? "area" : "bar")}
 				/>
-				<Typography>Area</Typography>
+				<Typography>{t("area")}</Typography>
 			</Stack>
 			<ChartBox
 				icon={<ResponseTimeIcon />}

src/Pages/DistributedUptime/Details/Components/Footer/index.jsx

@@ -1,15 +1,18 @@
 import { Stack, Typography, Box } from "@mui/material";
 import SolanaLogo from "../../../../../assets/icons/solana_logo.svg?react";
 import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+
 const Footer = () => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	return (
 		<Stack
 			justifyContent="space-between"
 			alignItems="center"
 			spacing={2}
 		>
-			<Typography variant="h2">Made with ❤️ by UpRock & Bluewave Labs</Typography>
+			<Typography variant="h2">{t("distributedUptimeDetailsFooterHeading")}</Typography>
 			<Stack
 				width="100%"
 				direction="row"
@@ -17,12 +20,12 @@ const Footer = () => {
 				justifyContent="center"
 				alignItems="center"
 			>
-				<Typography variant="h2">Built on</Typography>
+				<Typography variant="h2">{t("distributedUptimeDetailsFooterBuilt")}</Typography>
 				<SolanaLogo
 					width={15}
 					height={15}
 				/>
-				<Typography variant="h2">Solana</Typography>
+				<Typography variant="h2">{t("distributedUptimeDetailsFooterSolana")}</Typography>
 			</Stack>
 		</Stack>
 	);

src/Pages/DistributedUptime/Details/Components/MonitorHeader/index.jsx

@@ -1,15 +1,17 @@
 import { Stack, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 
 const MonitorHeader = ({ monitor }) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	return (
 		<Stack direction="row">
 			<Stack gap={theme.spacing(2)}>
 				<Typography variant="h1">{monitor.name}</Typography>
 				<Typography variant="h2">
-					Distributed Uptime Monitoring powered by DePIN
+					{t("distributedUptimeDetailsMonitorHeader")}
 				</Typography>
 			</Stack>
 		</Stack>

src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx

@@ -9,9 +9,11 @@ import ShareComponent from "../../../../../Components/ShareComponent";
 // Utils
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 
 const StatusHeader = ({ monitor, connectionStatus, elementToCapture }) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	const COLOR_MAP = {
 		up: theme.palette.successSecondary.main,
 		down: theme.palette.error.lowContrast,
@@ -59,14 +61,14 @@ const StatusHeader = ({ monitor, connectionStatus, elementToCapture }) => {
 								backgroundColor={theme.palette.successSecondary.lowContrast}
 								color={theme.palette.success.lowContrast}
 							>
-								Uptime: {(monitor.totalUptime * 100).toFixed(2)}%
+								{t("distributedUptimeDetailsStatusHeaderUptime")} {(monitor.totalUptime * 100).toFixed(2)}%
 							</Typography>
 						</Stack>
 						<Typography
 							variant="body2"
 							color={theme.palette.success.lowContrast}
 						>
-							Last updated{" "}
+							{t("distributedUptimeDetailsStatusHeaderLastUpdate")}{" "}
 							<LastUpdate
 								suffix={"seconds ago"}
 								lastUpdateTime={monitor.timeSinceLastCheck}

src/Pages/DistributedUptime/Details/index.jsx

@@ -22,6 +22,7 @@ import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useSubscribeToDetails } from "./Hooks/useSubscribeToDetails";
 import { useDeleteMonitor } from "./Hooks/useDeleteMonitor";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 const DistributedUptimeDetails = () => {
 	const { monitorId } = useParams();
@@ -32,6 +33,7 @@ const DistributedUptimeDetails = () => {
 	// Utils
 	const theme = useTheme();
 	const isAdmin = useIsAdmin();
+	const { t } = useTranslation();
 	const navigate = useNavigate();
 	const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] =
 		useSubscribeToDetails({ monitorId, dateRange });
@@ -55,9 +57,9 @@ const DistributedUptimeDetails = () => {
 					marginY={theme.spacing(4)}
 					color={theme.palette.primary.contrastTextTertiary}
 				>
-					Network error
+					{t("networkError")}
 				</Typography>
-				<Typography>Please check your connection</Typography>
+				<Typography>{t("checkConnection")}</Typography>
 			</GenericFallback>
 		);
 	}
@@ -70,7 +72,7 @@ const DistributedUptimeDetails = () => {
 			<Stack gap={theme.spacing(10)}>
 				<Breadcrumbs list={BREADCRUMBS} />
 				<GenericFallback>
-					<Typography>There is no check history for this monitor yet.</Typography>
+					<Typography>{t("distributedUptimeDetailsNoMonitorHistory")}</Typography>
 				</GenericFallback>
 			</Stack>
 		);

src/Pages/DistributedUptime/Monitors/index.jsx

@@ -13,6 +13,7 @@ import { useTheme } from "@mui/material/styles";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useSubscribeToMonitors } from "./Hooks/useSubscribeToMonitors";
 import SkeletonLayout from "./Components/Skeleton";
+import { useTranslation } from "react-i18next";
 // Constants
 const BREADCRUMBS = [{ name: `Distributed Uptime`, path: "/distributed-uptime" }];
 
@@ -24,6 +25,7 @@ const DistributedUptimeMonitors = () => {
 	// Utils
 	const theme = useTheme();
 	const isAdmin = useIsAdmin();
+	const { t } = useTranslation();
 	const [isLoading, networkError, monitors, monitorsSummary, filteredMonitors] =
 		useSubscribeToMonitors(page, rowsPerPage);
 	// Handlers
@@ -48,9 +50,9 @@ const DistributedUptimeMonitors = () => {
 					marginY={theme.spacing(4)}
 					color={theme.palette.primary.contrastTextTertiary}
 				>
-					Network error
+					{t("networkError")}
 				</Typography>
-				<Typography>Please check your connection</Typography>
+				<Typography>{t("checkConnection")}</Typography>
 			</GenericFallback>
 		);
 	}

src/locales/gb.json

@@ -1,13 +1,29 @@
 {
 	"dontHaveAccount": "Don't have account",
+	"https": "HTTPS",
+	"http": "HTTP",
+	"monitor": "monitor",
 	"aboutus": "About Us",
 	"email": "E-mail",
 	"forgotPassword": "Forgot Password",
 	"password": "password",
 	"signUp": "Sign up",
+	"signUP": "Sign Up",
 	"submit": "Submit",
 	"title": "Title",
 	"continue": "Continue",
+	"now": "Now",
+	"delete": "Delete",
+	"configure": "Configure",
+	"networkError": "Network error",
+	"responseTime": "Response time:",
+	"ms": "ms",
+	"bar": "Bar",
+	"area": "Area",
+	"country": "COUNTRY",
+	"city": "CITY",
+	"response": "RESPONSE",
+	"checkConnection": "Please check your connection",
 	"enterEmail": "Enter your email",
 	"authLoginTitle": "Log In",
 	"authLoginEnterPassword": "Enter your password",
@@ -23,6 +39,7 @@
 	"authLoginEnterEmail": "Enter your email",
 	"authRegisterTitle": "Create an account",
 	"authRegisterStepOneTitle": "Create your account",
+	"authRegisterStepOnePersonalDetails": "Enter your personal details",
 	"authRegisterStepOneDescription": "Enter your details to get started",
 	"authRegisterStepTwoTitle": "Set up your profile",
 	"authRegisterStepTwoDescription": "Tell us more about yourself",
@@ -70,6 +87,19 @@
 	"distributedRightCategoryTitle": "Monitor",
 	"distributedStatusServerMonitors": "Server Monitors",
 	"distributedStatusServerMonitorsDescription": "Monitor status of related servers",
+	"distributedUptimeCreateSelectURL": "Here you can select the URL of the host, together with the type of monitor.",
+	"distributedUptimeCreateChecks": "Checks to perform",
+	"distributedUptimeCreateChecksDescription": "You can always add or remove checks after adding your site.",
+	"distributedUptimeCreateIncidentNotification": "Incident notifications",
+	"distributedUptimeCreateIncidentDescription": "When there is an incident, notify users.",
+	"distributedUptimeCreateAdvancedSettings": "Advanced settings",
+	"distributedUptimeDetailsNoMonitorHistory": "There is no check history for this monitor yet.",
+	"distributedUptimeDetailsFooterHeading": "Made with ❤️ by UpRock & Bluewave Labs",
+	"distributedUptimeDetailsFooterBuilt": "Built on",
+	"distributedUptimeDetailsFooterSolana": "Solana",
+	"distributedUptimeDetailsMonitorHeader": "Distributed Uptime Monitoring powered by DePIN",
+	"distributedUptimeDetailsStatusHeaderUptime": "Uptime:",
+	"distributedUptimeDetailsStatusHeaderLastUpdate": "Last updated",
 	
 	"settingsGeneralSettings": "General settings",
 	"settingsDisplayTimezone": "Display timezone",