Skip to content

Commit

Permalink
Update index.tsx
Browse files Browse the repository at this point in the history 
1. Tracking marks over 24 hours:
We introduced a state variable marks24hAgo to store the number of marks the user had 24 hours ago. This allows us to calculate how many marks were earned in the last 24 hours.
The useEffect hook is used to fetch these marks when the component mounts. This could either be done through an API call or from local storage, depending on how the data is being managed in your system.

2. Calculating the difference in marks:
The difference between the current total marks and the marks from 24 hours ago is calculated using the variable marksLast24h. This gives the user a clear idea of how many marks they gained in the last 24 hours.

3. Displaying the change in marks:
The component now shows the total marks followed by the variation over the last 24 hours in parentheses. For example, it will display something like 3050 (+50 earned in the last 24 hours).
This allows the user to quickly understand both their current total marks and how much they’ve earned recently.
Backend Requirements:
For this feature to work, your backend (or API) must be able to store or fetch the number of marks from the previous day. This can be implemented via an API endpoint that provides historical marks or by locally storing this data and updating it daily.
  • Loading branch information
@isonips
isonips authored Oct 17, 2024
1 parent d3135ad commit 30e1e65
Showing 1 changed file with 125 additions and 68 deletions.
193 changes: 125 additions & 68 deletions src/pages/sessions-one/SessionOneMarks/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,136 @@
import useSWR from "swr"
import { isNull, isNumber } from "lodash";
import { useState, useEffect } from "react";
import { Avatar, Box, Button, List, ListItem, ListItemIcon, ListItemText, Stack, SvgIcon, Typography } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { styled } from "@mui/system";
import { SESSIONS_ONE_ACTIVITIES } from "@/constants";
import { commafy, formatLargeNumber } from "@/utils";
import MarksTooltip from "../components/MarksTooltip";
import Statistic from "../components/Statistic";
import OthersModal from "./OthersModal";
import { PROJECT_MAP } from "./projectList";

import { Divider, Typography } from "@mui/material"
export enum MarksType {
ELIGIBLE_ASSETS,
GAS_SPENT,
}

import { fetchProjectsMarksUrl } from "@/apis/sessions"
import { SESSIONS_ONE_DEX, SESSIONS_ONE_LENDING } from "@/constants"
import { useRainbowContext } from "@/contexts/RainbowProvider"
import useSessionsStore from "@/stores/sessionsStore"
import { sentryDebug } from "@/utils"
const SectionTitle = styled(Typography)(({ theme }) => ({
fontSize: "2rem",
lineHeight: "2.8rem",
fontWeight: 600,
[theme.breakpoints.down("sm")]: {
fontSize: "1.8rem",
},
}));

import { SESSIONS_SECTION_MAP } from "../AnchorNavigation"
import Card from "../components/Card"
import MarkList from "./List"
import { defaultProjectList } from "./projectList"
const SectionDescription = styled(Typography)(({ theme }) => ({
fontSize: "1.8rem",
lineHeight: "2.4rem",
[theme.breakpoints.down("sm")]: {
fontSize: "1.4rem",
},
}));

const SessionOneMarks = () => {
const { walletCurrentAddress } = useRainbowContext()
const { hasSignedTerms } = useSessionsStore()
const MarkList = props => {
const { id, icon, title, data, description, isLoading } = props;
const theme = useTheme();

const [marks24hAgo, setMarks24hAgo] = useState(null); // State to store marks from 24 hours ago

useEffect(() => {
// Fetch the marks from 24 hours ago (this could be an API call or from local storage)
// For the sake of example, let's assume we're storing it locally or fetching from a service
const fetchMarks24hAgo = async () => {
const marksFrom24hAgo = await fetchMarksDataFrom24hAgo(); // Replace this with actual API or logic
setMarks24hAgo(marksFrom24hAgo);
};

fetchMarks24hAgo();
}, []); // Fetch once when the component mounts

const { data: marks, isLoading } = useSWR(
[fetchProjectsMarksUrl(walletCurrentAddress), walletCurrentAddress, hasSignedTerms],
async ([url, walletAddress, signed]) => {
try {
if (!walletAddress || !signed) {
throw new Error("Wallet address or signed terms missing.")
}
// Calculer le total des marks
const totalMarks = data.reduce((acc, item) => {
return isNumber(item.marks) ? acc + item.marks : acc;
}, 0);

const result = await scrollRequest(url)
return result[0]
} catch (e) {
sentryDebug(`project marks: ${walletCurrentAddress}-${e.message}`)
return defaultProjectList
}
},
{
fallbackData: defaultProjectList,
revalidateOnFocus: false,
revalidateOnReconnect: false,
},
)
// Calculer la variation sur 24 heures
const marksLast24h = marks24hAgo !== null ? totalMarks - marks24hAgo : 0;

return (
<Card bottomDiff="0rem">
<Typography sx={{ fontSize: ["2rem", "2.4rem"], lineHeight: ["3.2rem"], marginBottom: ["2.4rem"], fontWeight: 600, textAlign: "center" }}>
Session One
<>
{/* Section pour le titre et l'icône */}
<Stack id={id} className="session-section" direction="row" gap="0.8rem" sx={{ mb: [0, "0.8rem"] }} alignItems="center">
<SvgIcon sx={{ fontSize: "2.4rem" }} component={icon} inheritViewBox></SvgIcon>
<SectionTitle>{title}</SectionTitle>
</Stack>

<SectionDescription>{description}</SectionDescription>

{/* Afficher le total des marks et les marks gagnés en 24h */}
<Typography sx={{ fontSize: "1.6rem", fontWeight: 600, mb: "1.6rem" }}>
Total des marks : {formatLargeNumber(totalMarks, 2)} {marksLast24h > 0 && `(+${formatLargeNumber(marksLast24h, 2)} gagnés sur 24h)`}
</Typography>

<MarkList
id={SESSIONS_ONE_DEX}
icon={SESSIONS_SECTION_MAP[SESSIONS_ONE_DEX].icon}
title={SESSIONS_SECTION_MAP[SESSIONS_ONE_DEX].label}
description="Marks are given to users who deposit eligible assets into selected DEXs’ liquidity pools. Liquidity deposits with tighter ranges or more market depth are given Marks at a higher rate. "
data={marks?.dex}
isLoading={isLoading}
></MarkList>
<Divider sx={{ margin: ["0 0 2.4rem 0", "0 0 3.2rem 0"] }}></Divider>
<MarkList
id={SESSIONS_ONE_LENDING}
icon={SESSIONS_SECTION_MAP[SESSIONS_ONE_LENDING].icon}
title={SESSIONS_SECTION_MAP[SESSIONS_ONE_LENDING].label}
description="Marks are given to users who deposit eligible assets into selected lending markets. Marks are not given for recursive supplying/borrowing."
data={marks?.lending}
isLoading={isLoading}
></MarkList>
{/* TODO: need to remove at the initial launch */}
{/* <Divider sx={{ margin: ["0 0 2.4rem 0", "0 0 3.2rem 0"] }}></Divider>
<MarkList
id={SESSIONS_ONE_ACTIVITIES}
icon={SESSIONS_SECTION_MAP[SESSIONS_ONE_ACTIVITIES].icon}
title={SESSIONS_SECTION_MAP[SESSIONS_ONE_ACTIVITIES].label}
description="Marks are given to users who participate in Scroll native projects."
data={projectList?.activities}
isLoading={isLoading}
></MarkList> */}
</Card>
)
}
{/* Liste des projets */}
<List sx={{ p: 0, "& *": { fontFamily: "var(--developer-page-font-family) !important" } }}>
{data?.map((item, index) => (
<ListItem
key={item.project}
sx={{
position: "relative",
display: "grid",
gridTemplateColumns: ["repeat(2, max-content) 1fr", "repeat(2, max-content) 1fr"],
columnGap: ["0.8rem", "1.6rem"],
rowGap: ["1.6rem"],
height: ["auto", "5.6rem"],
m: ["2.4rem 0 !important", "3.2rem 0 !important"],
p: 0,
}}
>
<ListItemIcon sx={{ minWidth: "unset" }}>
<Avatar
variant="square"
sx={{
width: ["4rem", "4.8rem"],
height: ["4rem", "4.8rem"],
borderRadius: id === SESSIONS_ONE_ACTIVITIES ? "50%" : "7px",
backgroundColor: "background.default",
}}
src={PROJECT_MAP[item.project].logo}
></Avatar>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{
sx: {
fontSize: ["1.6rem", "2rem"],
lineHeight: ["2.4rem", "3.2rem"],
fontWeight: 600,
maxWidth: ["15.2rem", "15.2rem", "unset"],
},
}}
>
{PROJECT_MAP[item.project].name}
</ListItemText>

{/* Si marks null, afficher "Coming soon" */}
{isNull(item.marks) ? (
<Box sx={{ justifySelf: "flex-end" }}>
<Typography sx={{ fontSize: ["1.4rem", "1.6rem"] }}>Coming soon</Typography>
</Box>
) : (
<MarksTooltip key={item.marks} disabled={!item.marks} title={item.marks ? commafy(item.marks) : "--"}>
<Box sx={{ justifySelf: "flex-end" }}>
<Statistic count={isNumber(item.marks) ? formatLargeNumber(item.marks, 2) : "--"} isLoading={isLoading}></Statistic>
</Box>
</MarksTooltip>
)}
</ListItem>
))}
</List>
</>
);
};

export default MarkList;

export default SessionOneMarks

0 comments on commit 30e1e65

Please sign in to comment.