Adding real owners count

src/components/layout/Navigation/NavLink.ts

@@ -1,6 +1,7 @@
 import {
-  BuildSharp as IconTxBuilder,
+  BuildSharp as IconSettings,
   HomeRounded,
+  Layers as IconTxBuilder,
   SvgIconComponent,
 } from "@mui/icons-material";
 
@@ -18,6 +19,7 @@ export type NavLink = {
 const icons = {
   HomeRounded,
   IconTxBuilder,
+  IconSettings,
 };
 
 export const MENU_ITEMS: NavLink[] = [
@@ -30,11 +32,19 @@ export const MENU_ITEMS: NavLink[] = [
     target: true,
   },
   {
-    id: "docs",
+    id: "tx-builder",
     title: "Tx Builder",
     type: "item",
     url: ROUTES.TxBuilder,
     icon: icons.IconTxBuilder,
     target: true,
   },
+  {
+    id: "settings",
+    title: "Settings",
+    type: "item",
+    url: ROUTES.Settings,
+    icon: icons.IconSettings,
+    target: true,
+  },
 ];

src/config/routes.ts

@@ -6,6 +6,7 @@ export const ROUTES = {
   Connect: "/connect",
   App: "/app",
   TxBuilder: "/app/transaction-builder",
+  Settings: "/app/settings",
 } as const;
 
 export type RouteValue = (typeof ROUTES)[keyof typeof ROUTES];

src/pages/app/index.tsx

@@ -1,9 +1,11 @@
 import { Grid, Typography } from "@mui/material";
+import Link from "next/link";
 
 import { AddressBookWidget } from "@/components/AddressBookWidget";
 import { SummaryCard } from "@/components/SummaryCard";
 import { XsignerBalanceText } from "@/components/SummaryCard/XsignerBalanceText";
 import { TransactionQueueWidget } from "@/components/TransactionQueueWidget";
+import { ROUTES } from "@/config/routes";
 import { useGetBalance } from "@/hooks/useGetBalance";
 import { useGetXsignerSelected } from "@/hooks/xsignerSelected/useGetXsignerSelected";
 
@@ -34,7 +36,13 @@ export default function AppDashboard() {
           <SummaryCard captionTitle="Tracked NFTs" caption="3" />
         </Grid>
         <Grid item xs={12} sm={6} md={3}>
-          <SummaryCard captionTitle="Owners" caption="0" />
+          <Link href={ROUTES.Settings}>
+            <SummaryCard
+              captionTitle="Owners"
+              caption={xSignerSelected?.owners.length.toString()}
+              isLoading={xSignerSelected ? false : true}
+            />
+          </Link>
         </Grid>
       </Grid>
       <Grid

src/pages/app/settings.tsx

@@ -0,0 +1,3 @@
+export default function SettingsPage() {
+  return <h1>Settings</h1>;
+}