Merge pull request #14 from Giveth/10-multisig-sessions-count

Add MultisigSessionsCount section to the dashboard

Author: ae2079

src/components/views/home/Home.index.tsx

@@ -6,6 +6,7 @@ import TotalDonations from './TotalDonations';
 import DonationsCount from './DonationsCount';
 import NewDonorsCount from './NewDonorsCount';
 import NewDonorsDonationTotalUsd from './NewDonorsDonationTotalUsd';
+import MultisigSessionsCount from './MultisigSessionsCount';
 
 const HomeIndex = () => {
 	return (
@@ -22,6 +23,8 @@ const HomeIndex = () => {
 			<NewDonorsCount />
 			<hr />
 			<NewDonorsDonationTotalUsd />
+			<hr />
+			<MultisigSessionsCount />
 		</ContainerStyled>
 	);
 };

src/components/views/home/MultisigSessionsCount.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import {
+	H2,
+	H4,
+	H6,
+	IconHelpFilled16,
+	neutralColors,
+	Subline,
+} from '@giveth/ui-design-system';
+import styled from 'styled-components';
+import {
+	firstOfNextMonth,
+	firstOfGiveth,
+	thousandsSeparator,
+} from '../../../lib/helpers';
+import { Col, Row } from '../../styled-components/grid';
+import { FlexCenter } from '../../styled-components/flex';
+import { IconWithTooltip } from '../../IconWithTooltip';
+import Spinner from '../../Spinner';
+import DatePicker from '../../DatePicker';
+import useMultisigSessionsCount from '../../../hooks/useMultisigSessionsCount';
+
+const MultisigSessionsCount = () => {
+	const [fromDate, setFromDate] = useState(firstOfGiveth());
+	const [toDate, setToDate] = useState(firstOfNextMonth());
+	const { multisigSessionsCount, loading, error } = useMultisigSessionsCount(
+		fromDate,
+		toDate,
+	);
+
+	return (
+		<RowStyled>
+			<Col md={4}>
+				<FlexCenter gap='10px'>
+					<H4>Multisig Sessions Count</H4>
+					<IconWithTooltip
+						icon={<IconHelpFilled16 />}
+						direction={'top'}
+					>
+						<TooltipBody>
+							Total number of multisig sessions during the
+							selected timeframe.
+						</TooltipBody>
+					</IconWithTooltip>
+				</FlexCenter>
+			</Col>
+			<Col md={4}>
+				<div>
+					From: <DatePicker date={fromDate} setDate={setFromDate} />
+				</div>
+				<br />
+				<div>
+					To: <DatePicker date={toDate} setDate={setToDate} />
+				</div>
+				<br />
+			</Col>
+			<Col md={1} />
+			<Col md={2}>
+				<H6>Total:</H6>
+				{loading ? (
+					<Spinner />
+				) : (
+					<H2>
+						{multisigSessionsCount !== null
+							? thousandsSeparator(multisigSessionsCount)
+							: 'N/A'}
+					</H2>
+				)}
+				{error && <p style={{ color: 'red' }}>{error}</p>}
+			</Col>
+		</RowStyled>
+	);
+};
+
+const TooltipBody = styled(Subline)`
+	color: ${neutralColors.gray[100]};
+	width: 270px;
+`;
+
+const RowStyled = styled(Row)`
+	margin-top: 40px;
+	align-items: center;
+	margin-bottom: 40px;
+`;
+
+export default MultisigSessionsCount;

src/configuration.ts

@@ -4,8 +4,13 @@ const BASE_ROUTE = isDevelopment
 	? 'https://impact-graph.serve.giveth.io'
 	: 'https://mainnet.serve.giveth.io';
 
+const SWIE_AUTH_ROUTE = isDevelopment
+	? 'https://auth.serve.giveth.io'
+	: 'https://auth.giveth.io';
+
 const config = {
 	BACKEND_LINK: `${BASE_ROUTE}/graphql`,
+	SWIE_AUTH_MICROSERVICE_URL: SWIE_AUTH_ROUTE,
 };
 
 export default config;

src/hooks/useMultisigSessionsCount.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import config from '../configuration';
+
+const useMultisigSessionsCount = (fromDate: Date, toDate: Date) => {
+	const [multisigSessionsCount, setMultisigSessionsCount] = useState<
+		number | null
+	>(null);
+	const [loading, setLoading] = useState<boolean>(true);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		const fetchData = async () => {
+			setLoading(true);
+			setError(null);
+			try {
+				const url = new URL(
+					`${config.SWIE_AUTH_MICROSERVICE_URL}/v1/multisigSessionCount`,
+				);
+				url.searchParams.append(
+					'from',
+					fromDate.toISOString().split('T')[0],
+				);
+				url.searchParams.append(
+					'to',
+					toDate.toISOString().split('T')[0],
+				);
+
+				const response = await fetch(url.toString(), {
+					method: 'GET',
+				});
+				const data = await response.json();
+				setMultisigSessionsCount(data.count);
+			} catch (err) {
+				setError('Failed to fetch data');
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchData();
+	}, [fromDate, toDate]);
+
+	return { multisigSessionsCount, loading, error };
+};
+
+export default useMultisigSessionsCount;