Add blog card fixes, not found page

explorer-nextjs/src/app/(pages)/account/[address]/not-found/page.tsx

@@ -4,6 +4,7 @@ import SectionHeading from "@/components/headings/SectionHeading";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { Box, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
+import Markdown from "react-markdown";
 
 export default async function Account({
   params,
@@ -20,6 +21,7 @@ export default async function Account({
             <Box sx={{ display: "flex", justifyContent: "space-between" }}>
               <SectionHeading title="Nym Node Details" />
               <ExplorerButtonGroup
+                onPage="Account"
                 options={[
                   {
                     label: "Nym Node",
@@ -37,13 +39,16 @@ export default async function Account({
           </Grid>
         </Grid>
         <Typography variant="h5">
-          Is this your accont? Set up your node!
+          <Markdown className="reactMarkDownLink">
+            This account does’t have a Nym node bonded. Is this your account?
+            Start [setting up your node](https://nym.com/docs) today!
+          </Markdown>
         </Typography>
         <Grid container columnSpacing={5} rowSpacing={5}>
           <Grid size={12}>
             <SectionHeading title="Onboarding" />
           </Grid>
-          <BlogArticlesCards limit={4} />
+          <BlogArticlesCards ids={[4]} />
         </Grid>
       </ContentLayout>
     );

explorer-nextjs/src/app/(pages)/explorer/page.tsx

@@ -2,15 +2,19 @@ import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
 import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
 import NodeTableWithAction from "@/components/nodeTable/NodeTableWithAction";
+import NodeAndAddressSearch from "@/components/search/NodeAndAddressSearch";
 import { Wrapper } from "@/components/wrapper";
-import { Box } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 
 export default function ExplorerPage() {
   return (
     <ContentLayout>
       <Wrapper>
-        <SectionHeading title="Explorer" />
+        <Stack gap={5}>
+          <SectionHeading title="Explorer" />
+          <NodeAndAddressSearch />
+        </Stack>
         <Box sx={{ mt: 5 }}>
           <NodeTableWithAction />
         </Box>

explorer-nextjs/src/app/globals.css

@@ -52,3 +52,9 @@ a {
   width: 8px;
   height: 8px;
 }
+
+.reactMarkDownLink a {
+  color: #00ca33;
+  display: inline;
+  font-weight: 700;
+}

explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx

@@ -3,8 +3,8 @@ import { fetchAccountBalance, fetchNymPrice } from "@/app/api";
 import { Skeleton, Stack, Typography } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import type { IRewardDetails } from "../../app/api/types";
-import { AccountBalancesTable } from "../cards/AccountBalancesTable";
 import ExplorerCard from "../cards/ExplorerCard";
+import { AccountBalancesTable } from "./AccountBalancesTable";
 
 export interface IAccontStatsRowProps {
   type: string;

explorer-nextjs/src/components/blogs/BlogArticleCards.tsx

@@ -6,7 +6,13 @@ import type { BlogArticleWithLink } from "./types";
 
 // TODO: Articles should be sorted by date
 
-const BlogArticlesCards = async ({ limit }: { limit?: number }) => {
+const BlogArticlesCards = async ({
+  limit,
+  ids,
+}: {
+  limit?: number;
+  ids?: Array<number>;
+}) => {
   const blogsDir = path.join(process.cwd(), "/src/data");
   const blogsDirFilenames = await fs.readdir(blogsDir);
 
@@ -23,11 +29,30 @@ const BlogArticlesCards = async ({ limit }: { limit?: number }) => {
     }),
   );
 
-  const limitedBlogArticles = limit
-    ? blogArticles.slice(0, limit)
-    : blogArticles;
+  const limitedOrFilteredBlogArticles = (
+    blogArticles: BlogArticleWithLink[],
+    limit?: number,
+    ids?: number[],
+  ): BlogArticleWithLink[] => {
+    let filteredArticles = blogArticles;
 
-  return limitedBlogArticles
+    // Filter by IDs if provided
+    if (ids && ids.length > 0) {
+      filteredArticles = filteredArticles.filter((article) =>
+        ids.includes(article.id),
+      );
+    }
+
+    // Apply limit if provided
+    if (limit) {
+      filteredArticles = filteredArticles.slice(0, limit);
+    }
+
+    return filteredArticles;
+  };
+  const articles = limitedOrFilteredBlogArticles(blogArticles, limit, ids);
+
+  return articles
     .sort((a, b) => {
       // sort by date
       return (

explorer-nextjs/src/components/blogs/types.ts

@@ -1,6 +1,7 @@
 type Content = { type: string; text: string };
 
 type BlogArticle = {
+  id: number;
   title: string;
   label: string;
   description: string;

explorer-nextjs/src/components/landingPageComponents/StakersNumberCard.tsx

@@ -41,7 +41,7 @@ export const RewardsCard = () => {
   const allStakers = getActiveStakersNumber(observatoryNodes);
 
   return (
-    <ExplorerCard label="Active stakers number">
+    <ExplorerCard label="NYM Stakers">
       <Typography variant="h3" sx={{ color: "pine.950" }}>
         {allStakers}
       </Typography>

explorer-nextjs/src/components/nodeTable/NodeTable.tsx

@@ -284,11 +284,11 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         enableColumnFilter: false,
         header: "Favorite",
         accessorKey: "Favorite",
-        size: 110,
+        size: 50,
 
         Header: (
           <Stack direction="row" alignItems="center">
-            <ColumnHeading>Favorite</ColumnHeading>
+            <ColumnHeading>Fav</ColumnHeading>
           </Stack>
         ),
         sortingFn: (a, b) => {

explorer-nextjs/src/components/staking/StakeTable.tsx

@@ -456,7 +456,6 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         sortingFn: (rowA, rowB) => {
           const saturationA = rowA.original.node?.stakeSaturation || 0;
           const saturationB = rowB.original.node?.stakeSaturation || 0;
-          console.log("sorting :>> ", saturationA, saturationB);
           return saturationA - saturationB;
         },
         Cell: ({ row }) =>
@@ -473,11 +472,11 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         header: "Favorite",
         accessorKey: "Favorite",
         enableColumnFilter: false,
-        size: 80,
+        size: 50,
 
         Header: (
           <Stack direction="row" alignItems="center">
-            <ColumnHeading>Favorite</ColumnHeading>
+            <ColumnHeading>Fav</ColumnHeading>
           </Stack>
         ),
         sortingFn: (rowA, rowB) => {

explorer-nextjs/src/data/blog-template-1.json

@@ -1,4 +1,5 @@
 {
+  "id": 1,
   "title": "Welcome to the Nym Network Explorer",
   "label": "Onboarding",
   "description": "Let's unpack the key features of the long awaited features together!",

explorer-nextjs/src/data/blog-template-2.json

@@ -1,4 +1,5 @@
 {
+  "id": 2,
   "title": "How to find the best nodes to stake your $NYM?",
   "label": "Onboarding",
   "description": "Follow this simple guide to learn more about staking!",

explorer-nextjs/src/data/blog-template-3.json

@@ -1,4 +1,5 @@
 {
+  "id": 3,
   "title": "Beginners guide to buying and swapping $NYM",
   "label": "Onboarding",
   "description": "Let us help you find the most convenient way for you to participate in securing the Nym NGM.",

explorer-nextjs/src/data/blog-template-4.json

@@ -1,4 +1,5 @@
 {
+  "id": 4,
   "title": "Become a Nym Node Operator",
   "label": "Onboarding",
   "description": "VAnyone can operate a Nym node, this article is an overview of what you'll need to set up and run a successful Nym node.",