Merge branch 'bluewave-labs:develop' into develop

.github/workflows/first-issue-first-pr.yml

@@ -0,0 +1,9 @@
+            - name: First interaction
+  uses: actions/first-interaction@v1.3.0
+  with:
+    # Token for the repository. Can be passed in using {{ secrets.GITHUB_TOKEN }}
+    repo-token: 
+    # Comment to post on an individual's first issue
+    issue-message: Thanks for opening your first issue! :) # optional
+    # Comment to post on an individual's first pull request
+    pr-message: Thanks for creating your first PR! :)  # optional

src/Components/Inputs/Search/index.jsx

@@ -128,7 +128,7 @@ const Search = ({
 						<Typography
 							component="span"
 							className="input-error"
-							color={theme.palette.error.contrastText}
+							color={theme.palette.error.main}
 							mt={theme.spacing(2)}
 							sx={{
 								opacity: 0.8,
@@ -188,8 +188,8 @@ const Search = ({
 								color: "red",
 							},
 						"& li.MuiAutocomplete-option:hover:not([aria-selected='true'])": {
-							color: theme.palette.primary.main,
-							backgroundColor: theme.palette.primary.contrastTextSecondary,
+							color: theme.palette.secondary.contrastText,
+							backgroundColor: theme.palette.secondary.main,
 						},
 						"& .MuiAutocomplete-noOptions": {
 							px: theme.spacing(6),

src/Components/Link/index.jsx

@@ -14,7 +14,14 @@ const Link = ({ level, label, url }) => {
 	const theme = useTheme();
 
 	const levelConfig = {
-		primary: {},
+		primary: {
+			color: theme.palette.primary.contrastTextTertiary,
+			sx: {
+				":hover": {
+					color: theme.palette.primary.contrastTextSecondary,
+				},
+			},
+		},
 		secondary: {
 			color: theme.palette.primary.contrastTextSecondary,
 			sx: {

src/Components/Sidebar/index.jsx

@@ -17,6 +17,7 @@ import {
 } from "@mui/material";
 import ThemeSwitch from "../ThemeSwitch";
 import Avatar from "../Avatar";
+import StarPrompt from "../StarPrompt";
 import LockSvg from "../../assets/icons/lock.svg?react";
 import UserSvg from "../../assets/icons/user.svg?react";
 import TeamSvg from "../../assets/icons/user-two.svg?react";
@@ -608,6 +609,8 @@ function Sidebar() {
 				</List>
 			</Box>
 
+			{!collapsed && <StarPrompt />}
+
 			<List
 				component="nav"
 				disablePadding

src/Components/StarPrompt/index.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Typography, IconButton, Stack, Box } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { useTheme } from '@emotion/react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { setStarPromptOpen } from '../../Features/UI/uiSlice';
+
+const StarPrompt = ({
+  repoUrl = 'https://github.com/bluewave-labs/checkmate'
+}) => {
+  const theme = useTheme();
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const isOpen = useSelector((state) => state.ui?.starPromptOpen ?? true);
+  const mode = useSelector((state) => state.ui.mode);
+
+  const handleClose = () => {
+    dispatch(setStarPromptOpen(false));
+  };
+
+  const handleStarClick = () => {
+    window.open(repoUrl, '_blank');
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Stack
+      direction="column"
+      sx={{
+        width: '100%',
+        padding: `${theme.spacing(6)} ${theme.spacing(6)}`,
+        borderTop: `1px solid ${theme.palette.primary.lowContrast}`,
+        borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
+        borderRadius: 0,
+        gap: theme.spacing(1.5),
+        backgroundColor: theme.palette.primary.main,
+      }}
+    >
+      <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%" pl={theme.spacing(4)}>
+        <Typography 
+          variant="subtitle2" 
+          sx={{ 
+            color: mode === 'dark' ? theme.palette.primary.contrastText : theme.palette.text.primary,
+            mt: theme.spacing(3)
+          }}
+        >
+          {t('starPromptTitle')}
+        </Typography>
+        <IconButton
+          onClick={handleClose}
+          size="small"
+          sx={{
+            color: theme.palette.text.primary,
+            padding: 0,
+            marginTop: theme.spacing(-5),
+            '&:hover': {
+              backgroundColor: 'transparent',
+              opacity: 0.8
+            },
+          }}
+        >
+          <CloseIcon sx={{ fontSize: '1.25rem' }} />
+        </IconButton>
+      </Stack>
+
+      <Typography 
+        variant="body1"
+        sx={{ 
+          color: theme.palette.text.secondary,
+          fontSize: '0.938rem',
+          lineHeight: 1.5,
+          mb: 1,
+          px: theme.spacing(4)
+        }}
+      >
+        {t('starPromptDescription')}
+      </Typography>
+
+      <Box 
+        component="img"
+        src={`https://img.shields.io/github/stars/bluewave-labs/checkmate?label=checkmate&style=social${mode === 'dark' ? '&color=white' : ''}`}
+        alt="GitHub stars"
+        onClick={handleStarClick}
+        sx={{
+          cursor: 'pointer',
+          transform: 'scale(0.65)',
+          transformOrigin: 'left center',
+          '&:hover': {
+            opacity: 0.8
+          },
+          pl: theme.spacing(4),
+          filter: mode === 'dark' ? 'invert(1)' : 'none'
+        }}
+      />
+    </Stack>
+  );
+};
+
+export default StarPrompt;

src/Components/WalletProvider/index.css

@@ -0,0 +1,51 @@
+.wallet-adapter-dropdown {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap; 
+	justify-content: center; 
+	align-items: center; 
+	gap: var(--env-var-spacing-1); 
+}
+
+.wallet-adapter-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: auto;
+	height: var(--env-var-height-2) !important;
+	font-size: var(--env-var-font-size-medium-plus) !important;
+	font-weight: 500 !important;
+	margin: 0; 
+	padding: calc((var(--env-var-height-2) - var(--env-var-font-size-medium-plus) * 1.2) / 2) var(--env-var-spacing-1);
+	white-space: nowrap;
+}
+
+.wallet-adapter-modal-title {
+  font-size: var(--font-size-h5) !important;
+}
+
+/* Separator styling */
+.wallet-adapter-modal-divider {
+  background-color: var(--border-color) !important;
+  margin: var(--spacing-md) 0 !important;
+}
+
+/* Responsive fixes */
+@media (max-width: 1200px) { 
+	.wallet-adapter-button {
+		font-size: var(--env-var-font-size-medium) !important;
+		padding: calc((var(--env-var-height-2) - var(--env-var-font-size-medium) * 1.2) / 2)
+			var(--env-var-spacing-1-minus) !important;
+		
+	}
+}
+
+@media (max-width: 900px) { 
+  .wallet-adapter-modal-wrapper {
+    flex-direction: column !important;
+  }
+  
+  .wallet-adapter-modal-divider {
+    margin: var(--spacing-sm) 0 !important;
+  }
+}

src/Components/WalletProvider/index.jsx

@@ -9,6 +9,7 @@ import {
 import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
 import { clusterApiUrl } from "@solana/web3.js";
 import PropTypes from "prop-types";
+import "./index.css"; 
 
 // Default styles that can be overridden by your app
 import "@solana/wallet-adapter-react-ui/styles.css";

src/Features/UI/uiSlice.js

@@ -24,6 +24,7 @@ const initialState = {
 	timezone: "America/Toronto",
 	distributedUptimeEnabled: false,
 	language: "gb",
+	starPromptOpen: true,
 };
 
 const uiSlice = createSlice({
@@ -55,6 +56,9 @@ const uiSlice = createSlice({
 		setLanguage(state, action) {
 			state.language = action.payload;
 		},
+		setStarPromptOpen: (state, action) => {
+			state.starPromptOpen = action.payload;
+		},
 	},
 });
 
@@ -67,4 +71,5 @@ export const {
 	setTimezone,
 	setDistributedUptimeEnabled,
 	setLanguage,
+	setStarPromptOpen,
 } = uiSlice.actions;

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

@@ -30,7 +30,6 @@ const StatusHeader = ({ monitor, connectionStatus, elementToCapture }) => {
 	};
 
 	let bgColor = COLOR_MAP[connectionStatus];
-
 	return (
 		<ColContainer backgroundColor={bgColor}>
 			<Stack
@@ -61,7 +60,8 @@ const StatusHeader = ({ monitor, connectionStatus, elementToCapture }) => {
 								backgroundColor={theme.palette.successSecondary.lowContrast}
 								color={theme.palette.success.lowContrast}
 							>
-								{t("distributedUptimeDetailsStatusHeaderUptime")} {(monitor.totalUptime * 100).toFixed(2)}%
+								{t("distributedUptimeDetailsStatusHeaderUptime")}{" "}
+								{(monitor.uptimePercentage * 100).toFixed(2)}%
 							</Typography>
 						</Stack>
 						<Typography

src/Pages/Settings/index.jsx

@@ -298,7 +298,7 @@ const Settings = () => {
 								{t("settingsWalletDescription")}
 							</Typography>
 						</Box>
-						<Box>
+						<Box sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', gap: 2 }}>
 							<Stack
 								direction="row"
 								spacing={2}
@@ -401,6 +401,7 @@ const Settings = () => {
 					</ConfigBox>
 				)}
 
+
 				<ConfigBox>
 					<Box>
 						<Typography component="h1">{t("settingsAbout")}</Typography>

src/Pages/StatusPage/Status/index.jsx

@@ -24,7 +24,6 @@ const PublicStatus = () => {
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	// Utils
 	const theme = useTheme();
-	const isAdmin = useIsAdmin();
 	const location = useLocation();
 	const navigate = useNavigate();
 
@@ -33,7 +32,6 @@ const PublicStatus = () => {
 	const [deleteStatusPage, isDeleting] = useStatusPageDelete(fetchStatusPage, url);
 
 	// Setup
-	const currentPath = location.pathname;
 	let sx = { paddingLeft: theme.spacing(20), paddingRight: theme.spacing(20) };
 	let link = undefined;
 	const isPublic = location.pathname.startsWith("/status/uptime/public");

src/Pages/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx

@@ -25,7 +25,7 @@ const StatusPagesTable = ({ data }) => {
 						row.type === "distributed"
 							? `/status/distributed/public/${row.url}`
 							: `/status/uptime/public/${row.url}`;
-					navigate(url);
+						window.open(url, "_blank", "noopener,noreferrer")
 				}
 			},
 			render: (row) => {

src/Pages/Uptime/Details/Hooks/useChecksFetch.jsx

@@ -2,18 +2,30 @@ import { useState } from "react";
 import { useEffect } from "react";
 import { networkService } from "../../../../main";
 import { createToast } from "../../../../Utils/toastUtils";
-export const useChecksFetch = ({ monitorId, dateRange, page, rowsPerPage }) => {
+export const useChecksFetch = ({
+	monitorId,
+	monitorType,
+	dateRange,
+	page,
+	rowsPerPage,
+}) => {
 	const [checks, setChecks] = useState(undefined);
 	const [checksCount, setChecksCount] = useState(undefined);
 	const [isLoading, setIsLoading] = useState(false);
 	const [networkError, setNetworkError] = useState(false);
 
 	useEffect(() => {
+		if (!monitorType) {
+			console.warn("Monitor Type is not provided. Fetching checks will not proceed.");
+			return;
+		}
+
 		const fetchChecks = async () => {
 			try {
 				setIsLoading(true);
 				const res = await networkService.getChecksByMonitor({
 					monitorId: monitorId,
+					type: monitorType,
 					sortOrder: "desc",
 					limit: null,
 					dateRange: dateRange,
@@ -31,7 +43,7 @@ export const useChecksFetch = ({ monitorId, dateRange, page, rowsPerPage }) => {
 			}
 		};
 		fetchChecks();
-	}, [monitorId, dateRange, page, rowsPerPage]);
+	}, [monitorId, monitorType, dateRange, page, rowsPerPage]);
 
 	return [checks, checksCount, isLoading, networkError];
 };

src/Pages/Uptime/Details/index.jsx

@@ -59,8 +59,11 @@ const UptimeDetails = () => {
 		uiTimezone,
 	});
 
+	const monitorType = monitor?.type;
+
 	const [checks, checksCount, checksAreLoading, checksNetworkError] = useChecksFetch({
 		monitorId,
+		monitorType,
 		dateRange,
 		page,
 		rowsPerPage,

src/Utils/Theme/globalTheme.js

@@ -332,13 +332,13 @@ const baseTheme = (palette) => ({
 						color: palette.error.main,
 						opacity: 0.8,
 						fontSize: "var(--env-var-font-size-medium)",
-
 						marginLeft: 0,
 					},
 					"& .MuiFormHelperText-root.Mui-error": {
 						opacity: 0.8,
 						fontSize: "var(--env-var-font-size-medium)",
 						color: palette.error.main,
+						whiteSpace: 'nowrap',
 					},
 				}),
 			},

src/locales/gb.json

@@ -142,7 +142,8 @@
 	"settingsFailedToAddDemoMonitors": "Failed to add demo monitors",
 	"settingsMonitorsDeleted": "Successfully deleted all monitors",
 	"settingsFailedToDeleteMonitors": "Failed to delete all monitors",
-
+	"starPromptTitle": "Star Checkmate",
+	"starPromptDescription": "See the latest releases and help grow the community on GitHub"
 	"notifications": {
 		"enableNotifications": "Enable {{platform}} notifications",
 		"testNotification": "Test notification",

src/locales/tr.json

@@ -101,5 +101,7 @@
 	"settingsDemoMonitorsAdded": "Demo monitörler başarıyla eklendi",
 	"settingsFailedToAddDemoMonitors": "Demo monitörler eklenemedi",
 	"settingsMonitorsDeleted": "Tüm monitörler başarıyla silindi",
-	"settingsFailedToDeleteMonitors": "Monitörler silinemedi"
+	"settingsFailedToDeleteMonitors": "Monitörler silinemedi",
+    "starPromptTitle": "Checkmate yıldızla değerlendirin",
+   "starPromptDescription": "En son sürümleri görün ve GitHub'daki topluluğun büyümesine yardımcı olun"
 }