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 <[email protected]> Co-authored-by: fmtabbara <[email protected]>
nymtech · Feb 12, 2025 · 9aed938 · 9aed938
1 parent ea86106
commit 9aed938
Show file tree

Hide file tree

Showing 72 changed files with 2,563 additions and 1,205 deletions.
diff --git a/explorer-nextjs/package.json b/explorer-nextjs/package.json
@@ -28,16 +28,19 @@
     "@nymproject/react": "1.0.0",
     "@tanstack/react-query": "^5.64.2",
     "@tanstack/react-query-devtools": "^5.64.2",
+    "@tanstack/react-query-next-experimental": "^5.66.0",
     "@tanstack/react-table": "^8.20.6",
     "@uidotdev/usehooks": "^2.4.1",
     "chain-registry": "^1.69.64",
     "cldr-compact-number": "^0.4.0",
     "date-fns": "^4.1.0",
+    "isomorphic-dompurify": "^2.21.0",
     "material-react-table": "^3.0.3",
     "next": "15.0.3",
     "qrcode.react": "^4.1.0",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react-markdown": "^9.0.3",
     "react-random-avatars": "^1.3.1",
     "react-world-flags": "^1.6.0",
     "zod": "^3.24.1"

diff --git a/explorer-nextjs/src/actions/getNymNodes.ts b/explorer-nextjs/src/actions/getNymNodes.ts
diff --git a/explorer-nextjs/src/app/(pages)/account/[address]/not-found/page.tsx b/explorer-nextjs/src/app/(pages)/account/[address]/not-found/page.tsx
@@ -0,0 +1,57 @@
+import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
+import { ContentLayout } from "@/components/contentLayout/ContentLayout";
+import SectionHeading from "@/components/headings/SectionHeading";
+import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
+import { Box, Typography } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+export default async function Account({
+  params,
+}: {
+  params: Promise<{ address: string }>;
+}) {
+  try {
+    const address = (await params).address;
+
+    return (
+      <ContentLayout>
+        <Grid container columnSpacing={5} rowSpacing={5}>
+          <Grid size={12}>
+            <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+              <SectionHeading title="Nym Node Details" />
+              <ExplorerButtonGroup
+                options={[
+                  {
+                    label: "Nym Node",
+                    isSelected: true,
+                    link: `/account/${address}/not-found/`,
+                  },
+                  {
+                    label: "Account",
+                    isSelected: false,
+                    link: `/account/${address}`,
+                  },
+                ]}
+              />
+            </Box>
+          </Grid>
+        </Grid>
+        <Typography variant="h5">
+          Is this your accont? Set up your node!
+        </Typography>
+        <Grid container columnSpacing={5} rowSpacing={5}>
+          <Grid size={12}>
+            <SectionHeading title="Onboarding" />
+          </Grid>
+          <BlogArticlesCards limit={4} />
+        </Grid>
+      </ContentLayout>
+    );
+  } catch (error) {
+    let errorMessage = "An error occurred";
+    if (error instanceof Error) {
+      errorMessage = error.message;
+    }
+    throw new Error(errorMessage);
+  }
+}
diff --git a/explorer-nextjs/src/app/(pages)/account/[address]/page.tsx b/explorer-nextjs/src/app/(pages)/account/[address]/page.tsx
@@ -1,71 +1,34 @@
-import type { IAccountBalancesInfo, NymTokenomics } from "@/app/api/types";
-import type NodeData from "@/app/api/types";
-import { NYM_ACCOUNT_ADDRESS, NYM_NODES, NYM_PRICES_API } from "@/app/api/urls";
-import { AccountBalancesCard } from "@/components/accountPageComponents/AccountBalancesCard";
-import { AccountInfoCard } from "@/components/accountPageComponents/AccountInfoCard";
-import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
-import { ContentLayout } from "@/components/contentLayout/ContentLayout";
-import SectionHeading from "@/components/headings/SectionHeading";
-import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
+import { fetchNodes } from "@/app/api";
+import type { NodeData } from "@/app/api/types";
 import { Box, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
+import { AccountBalancesCard } from "../../../../components/accountPageComponents/AccountBalancesCard";
+import { AccountInfoCard } from "../../../../components/accountPageComponents/AccountInfoCard";
+import { ContentLayout } from "../../../../components/contentLayout/ContentLayout";
+import SectionHeading from "../../../../components/headings/SectionHeading";
+import ExplorerButtonGroup from "../../../../components/toggleButton/ToggleButton";
 
 export default async function Account({
   params,
 }: {
   params: Promise<{ address: string }>;
 }) {
   try {
-    const { address } = await params;
+    const address = (await params).address;
 
-    const accountData = await fetch(`${NYM_ACCOUNT_ADDRESS}${address}`, {
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json; charset=utf-8",
-      },
-      next: { revalidate: 60 },
-      // refresh event list cache at given interval
-    });
-
-    const response = await fetch(NYM_NODES, {
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json; charset=utf-8",
-      },
-      next: { revalidate: 60 },
-      // refresh event list cache at given interval
-    });
-
-    const nymNodes: NodeData[] = await response.json();
+    const nymNodes: NodeData[] = await fetchNodes();
 
     const nymNode = nymNodes.find(
       (node) => node.bond_information.owner === address,
     );
 
-    const nymAccountBalancesData: IAccountBalancesInfo =
-      await accountData.json();
-
-    if (!nymAccountBalancesData) {
-      return <Typography>Account not found</Typography>;
-    }
-
-    const nymPrice = await fetch(NYM_PRICES_API, {
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json; charset=utf-8",
-      },
-      next: { revalidate: 60 },
-      // refresh event list cache at given interval
-    });
-
-    const nymPriceData: NymTokenomics = await nymPrice.json();
-
     return (
       <ContentLayout>
         <Grid container columnSpacing={5} rowSpacing={5}>
           <Grid size={6}>
             <SectionHeading title="Account Details" />
           </Grid>
+
           <Grid size={6} justifyContent="flex-end">
             <Box sx={{ display: "flex", justifyContent: "end" }}>
               <ExplorerButtonGroup
@@ -75,7 +38,7 @@ export default async function Account({
                     isSelected: false,
                     link: nymNode
                       ? `/nym-node/${nymNode.node_id}`
-                      : "/nym-node/not-found",
+                      : `/account/${address}/not-found`,
                   },
                   {
                     label: "Account",
@@ -86,21 +49,13 @@ export default async function Account({
               />
             </Box>
           </Grid>
-          <Grid size={4}>
-            <AccountInfoCard accountInfo={nymAccountBalancesData} />
-          </Grid>
-          <Grid size={8}>
-            <AccountBalancesCard
-              accountInfo={nymAccountBalancesData}
-              nymPrice={nymPriceData.quotes.USD.price}
-            />
+
+          <Grid size={{ xs: 12, md: 4 }}>
+            <AccountInfoCard address={address} />
           </Grid>
-        </Grid>
-        <Grid container columnSpacing={5} rowSpacing={5}>
-          <Grid size={12}>
-            <SectionHeading title="Onboarding" />
+          <Grid size={{ xs: 12, md: 8 }}>
+            <AccountBalancesCard address={address} />
           </Grid>
-          <BlogArticlesCards limit={4} />
         </Grid>
       </ContentLayout>
     );

diff --git a/explorer-nextjs/src/app/(pages)/explorer/page.tsx b/explorer-nextjs/src/app/(pages)/explorer/page.tsx
@@ -1,20 +1,19 @@
 import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
-import CardSkeleton from "@/components/cards/Skeleton";
 import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
 import NodeTableWithAction from "@/components/nodeTable/NodeTableWithAction";
 import { Wrapper } from "@/components/wrapper";
+import { Box } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import { Suspense } from "react";
 
 export default function ExplorerPage() {
   return (
     <ContentLayout>
       <Wrapper>
         <SectionHeading title="Explorer" />
-        <Suspense fallback={<CardSkeleton sx={{ mt: 5 }} />}>
+        <Box sx={{ mt: 5 }}>
           <NodeTableWithAction />
-        </Suspense>
+        </Box>
         <Grid container columnSpacing={5} rowSpacing={5} mt={10}>
           <Grid size={12}>
             <SectionHeading title="Onboarding" />

diff --git a/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx b/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx
@@ -1,6 +1,4 @@
-import type { IObservatoryNode } from "@/app/api/types";
-import { DATA_OBSERVATORY_NODES_URL } from "@/app/api/urls";
-import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
+import { fetchNodeInfo } from "@/app/api";
 import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
 import { BasicInfoCard } from "@/components/nymNodePageComponents/BasicInfoCard";
@@ -22,25 +20,7 @@ export default async function NymNode({
   try {
     const id = Number((await params).id);
 
-    const observatoryResponse = await fetch(DATA_OBSERVATORY_NODES_URL, {
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json; charset=utf-8",
-      },
-      next: { revalidate: 60 },
-      // refresh event list cache at given interval
-    });
-
-    const observatoryNymNodes: IObservatoryNode[] =
-      await observatoryResponse.json();
-
-    if (!observatoryNymNodes) {
-      return null;
-    }
-
-    const observatoryNymNode = observatoryNymNodes.find(
-      (node) => node.node_id === id,
-    );
+    const observatoryNymNode = await fetchNodeInfo(id);
 
     if (!observatoryNymNode) {
       return null;
@@ -126,12 +106,6 @@ export default async function NymNode({
             <NodeChatCard />
           </Grid>
         </Grid>
-        <Grid container columnSpacing={5} rowSpacing={5}>
-          <Grid size={12}>
-            <SectionHeading title="Onboarding" />
-          </Grid>
-          <BlogArticlesCards limit={4} />
-        </Grid>
       </ContentLayout>
     );
   } catch (error) {

diff --git a/explorer-nextjs/src/app/(pages)/nym-node/not-found/page.tsx b/explorer-nextjs/src/app/(pages)/nym-node/not-found/page.tsx
diff --git a/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx b/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx
@@ -9,6 +9,7 @@ import { Box, Stack, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { format } from "date-fns";
 import Image from "next/image";
+import Markdown from "react-markdown";
 
 export default async function BlogPage({
   params,
@@ -104,7 +105,7 @@ export default async function BlogPage({
                     <SectionHeading title={section.heading} />
                     {section.text.map(({ text }) => (
                       <Typography key={text} variant="body2" sx={{ mt: 3 }}>
-                        {text}
+                        <Markdown>{text}</Markdown>
                       </Typography>
                     ))}
                   </Box>

diff --git a/explorer-nextjs/src/app/(pages)/stake/page.tsx b/explorer-nextjs/src/app/(pages)/stake/page.tsx
@@ -1,8 +1,8 @@
-import { ContentLayout } from "@/components/contentLayout/ContentLayout";
-import SectionHeading from "@/components/headings/SectionHeading";
-import OverviewCards from "@/components/staking/OverviewCards";
-import StakeTableWithAction from "@/components/staking/StakeTableWithAction";
-import SubHeaderRow from "@/components/staking/SubHeaderRow";
+import { ContentLayout } from "../../../components/contentLayout/ContentLayout";
+import SectionHeading from "../../../components/headings/SectionHeading";
+import OverviewCards from "../../../components/staking/OverviewCards";
+import StakeTableWithAction from "../../../components/staking/StakeTableWithAction";
+import SubHeaderRow from "../../../components/staking/SubHeaderRow";
 
 export default async function StakingPage() {
   return (