From c26fe1977b3157ffcf448e1fdaffb9292e8acbc2 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Mon, 30 Dec 2024 22:59:32 +0000
Subject: [PATCH] display fallback when stake table is empty

---
 .../src/components/staking/StakeTable.tsx        | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/explorer-nextjs/src/components/staking/StakeTable.tsx b/explorer-nextjs/src/components/staking/StakeTable.tsx
index 14189be270..b9a928a375 100644
--- a/explorer-nextjs/src/components/staking/StakeTable.tsx
+++ b/explorer-nextjs/src/components/staking/StakeTable.tsx
@@ -2,7 +2,7 @@
 
 import { useNymClient } from "@/hooks/useNymClient";
 import { formatBigNum } from "@/utils/formatBigNumbers";
-import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Button, Stack, Tooltip, Typography } from "@mui/material";
 import type { Delegation } from "@nymproject/contract-clients/Mixnet.types";
 import {
   type MRT_ColumnDef,
@@ -14,6 +14,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import CountryFlag from "../countryFlag/CountryFlag";
 import Loading from "../loading";
 import InfoModal, { type InfoModalProps } from "../modal/InfoModal";
+import { Link } from "../muiLink";
 import ConnectWallet from "../wallet/ConnectWallet";
 import StakeActions from "./StakeActions";
 import type { MappedNymNode, MappedNymNodes } from "./StakeTableWithAction";
@@ -237,6 +238,19 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
     enableFullScreenToggle: false,
     enableHiding: false,
     paginationDisplayMode: "pages",
+    renderEmptyRowsFallback: () => (
+      <Stack gap={3} sx={{ p: 5 }} justifyContent="center" alignItems="center">
+        <Typography variant="body3">
+          You haven&apos;t staked on any nodes yet. Stake on a node to start
+          earning rewnotards.
+        </Typography>
+        <Button variant="contained" size="large">
+          <Link href="/explorer" underline="none" color="inherit">
+            Stake
+          </Link>
+        </Button>
+      </Stack>
+    ),
     muiPaginationProps: {
       showRowsPerPage: false,
       SelectProps: {