Yana/pending staking events (#5400)

* Add pending events to stake table * Add additional tanstack refetch on user stake/unstake/redeem rewards * refactor repeated fetch functions * clean up fetching functions * refactor & clean up * Add epoch waiting message on epoch change delay * fine tune epoch change * clean up * refactor imports * Add transaction hash to successful redeem rewards InfoModal * fix epoch time check and mobile header * Fix Loading modal width on mobile * fix epoch logic * clean up * clean up logs * add waiting for epoch to start to landing page * clean up * Add refetch of all queries on epoch change * Finalise state change on epoch change * clean up * fix build * Fix NodesTable mobile view * Fix stake table mobile view * fix typo * Fix blog articles height * Add loading skeletons to landing page cards * clean up * Add skeletons to cards * Add skeletons, and loading/error refetch on wallet balnce * clean up * Add active stakers card * clean up * change NGM to mixnet * Add TVL to Tokenomics card * Add last total stake to Stake Card * clean up * Fix stake sorting function in Stake Table * Add wrap of identity key and address to Basic Info Card * Add counter to epoch time on staking page * clean up * update epoch labels * Add circular loading on Toggle Button * Update Toggle button loading functionality * Add skeletons to account cards * Add search functionality on Enter * clean up * DOMpurify node name and description * Add column with id and identity key, wrap names to 2 lines * Set width of column headers to 110px * fix pending events for delegations * Fix Stake button proppagation * Add full country name to tooltips * Take out connect wallet from mobile menu toggle * finetune epoch change intervals * Add error text to Magic Search * fix build * Add react-markdown for Blog articles * fix graph's width and Table column headings * fix Magic Search loading * Fix grid on account page * fix account card address width * Fix permanent loading spinner on ToggleButton * clean up URL's, fix copy address on the Basic Card * replace mintscan with ping, open tx link on new page * Take out toggle button if no node bonded by address * Set fixed column width on tables * Add not-found page to account, when no node bonded * Add full country name to tables and node profile card * clean up * Table fixes * Fix sorting in Delegations table Node page * clean up * Fix line chart view * refactor epoch progress bar * remove unused imports * remove tanstack delclaration module * create epoch data provider * remove logic from togglebutton component * use epoch provider in components * invalidateQueries should be awaited * tidy up QualityIndicatorsCard component formatting * fix infinite loop in epoch provider --------- Co-authored-by: Yana <yanok87@users.noreply.github.com> Co-authored-by: fmtabbara <fmtabbara@hotmail.co.uk>
2025-02-12 15:15:45 +02:00
parent 077a64b076
commit 9e4e8a9b2b
72 changed files with 2582 additions and 1224 deletions
@@ -1,30 +1,12 @@
 "use client";

-import getNymNodes from "@/actions/getNymNodes";
-import type { ExplorerData } from "@/app/api";
-import type { IObservatoryNode } from "@/app/api/types";
-import { CURRENT_EPOCH_REWARDS } from "@/app/api/urls";
+import { Card, CardContent, Skeleton, Stack, Typography } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
+import DOMPurify from "isomorphic-dompurify";
+import { fetchEpochRewards, fetchObservatoryNodes } from "../../app/api";
+import type { ExplorerData, IObservatoryNode } from "../../app/api/types";
 import NodeTable from "./NodeTable";

-// Fetch function for epoch rewards
-const fetchEpochRewards = async (): Promise<
-  ExplorerData["currentEpochRewardsData"]
-> => {
-  const response = await fetch(CURRENT_EPOCH_REWARDS, {
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json; charset=utf-8",
-    },
-  });
-
-  if (!response.ok) {
-    throw new Error("Failed to fetch epoch rewards");
-  }
-
-  return response.json();
-};
-
 // Utility function to calculate node saturation point
 function getNodeSaturationPoint(
  totalStake: number,
@@ -52,8 +34,12 @@ const mappedNymNodes = (
      epochRewardsData.interval.stake_saturation_point,
    );

+    const cleanMoniker = DOMPurify.sanitize(
+      node.self_description.moniker,
+    ).replace(/&amp;/g, "&");
+
    return {
-      name: node.self_description.moniker,
+      name: cleanMoniker,
      nodeId: node.node_id,
      identity_key: node.identity_key,
      countryCode: node.description.auxiliary_details.location || null,
@@ -78,8 +64,6 @@ const NodeTableWithAction = () => {
  } = useQuery({
    queryKey: ["epochRewards"],
    queryFn: fetchEpochRewards,
-    staleTime: 60000, // Data is fresh for 60 seconds
-    refetchInterval: 60000, // Refetch every 60 seconds
  });

  // Use React Query to fetch Nym nodes
@@ -89,23 +73,41 @@ const NodeTableWithAction = () => {
    isError: isNodesError,
  } = useQuery({
    queryKey: ["nymNodes"],
-    queryFn: getNymNodes,
-    staleTime: 60000,
-    refetchInterval: 60000,
+    queryFn: fetchObservatoryNodes,
  });

  // Handle loading state
  if (isEpochLoading || isNodesLoading) {
-    return <div>Loading...</div>;
+    return (
+      <Card sx={{ height: "100%", mt: 5 }}>
+        <CardContent>
+          <Skeleton variant="text" height={100} />
+          <Skeleton variant="text" height={100} />
+          <Skeleton variant="text" height={100} />
+          <Skeleton variant="text" height={100} />
+        </CardContent>
+      </Card>
+    );
  }

  // Handle error state
  if (isEpochError || isNodesError) {
-    return <div>Error loading data. Please try again later.</div>;
+    return (
+      <Stack direction="row" spacing={1}>
+        <Typography variant="h5" sx={{ color: "pine.600", letterSpacing: 0.7 }}>
+          Error loading data. Please try again later.
+        </Typography>
+      </Stack>
+    );
  }

  // Map nodes with rewards data
-  const data = mappedNymNodes(nymNodes, epochRewardsData);
+
+  if (!epochRewardsData) {
+    return null;
+  }
+
+  const data = mappedNymNodes(nymNodes || [], epochRewardsData);

  return <NodeTable nodes={data} />;
 };