From deb0ef381e198b356e800c04df3ca58f26074c89 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Thu, 12 Dec 2024 23:29:25 +0000
Subject: [PATCH] start account page

---
 explorer-nextjs/src/app/account/[id]/page.tsx | 62 +++++++++++++++++++
 explorer-nextjs/src/app/account/page.tsx      | 31 ----------
 explorer-nextjs/src/app/api/index.tsx         | 17 ++---
 3 files changed, 71 insertions(+), 39 deletions(-)
 create mode 100644 explorer-nextjs/src/app/account/[id]/page.tsx
 delete mode 100644 explorer-nextjs/src/app/account/page.tsx

diff --git a/explorer-nextjs/src/app/account/[id]/page.tsx b/explorer-nextjs/src/app/account/[id]/page.tsx
new file mode 100644
index 0000000000..021f520342
--- /dev/null
+++ b/explorer-nextjs/src/app/account/[id]/page.tsx
@@ -0,0 +1,62 @@
+import ExplorerCard from "@/components/cards/ExplorerCard";
+import { ContentLayout } from "@/components/contentLayout/ContentLayout";
+import SectionHeading from "@/components/headings/SectionHeading";
+import ExplorerListItem from "@/components/list/ListItem";
+import { StarRating } from "@/components/starRating";
+import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
+import { Box, Grid2, Stack } from "@mui/material";
+
+export default function Account() {
+  return (
+    <ContentLayout component="main">
+      <Grid2 container columnSpacing={5} rowSpacing={5}>
+        <Grid2 size={6}>
+          <SectionHeading title="Account Details" />
+        </Grid2>
+        <Grid2 size={6} justifyContent="flex-end">
+          <Box sx={{ display: "flex", justifyContent: "end" }}>
+            <ExplorerButtonGroup
+              options={[
+                { label: "Nym Node", isSelected: false, link: "/nym-node/1" },
+                {
+                  label: "Account",
+                  isSelected: true,
+                  link: "/account/1",
+                },
+              ]}
+            />
+          </Box>
+        </Grid2>
+        <Grid2 size={4}>
+          <ExplorerCard label="Action" sx={{ height: "100%" }}>
+            <div />
+          </ExplorerCard>
+        </Grid2>
+        <Grid2 size={8}>
+          <ExplorerCard label="Basic info">
+            <Stack gap={1}>
+              <ExplorerListItem
+                divider
+                label="NYM Address"
+                value="0x1234567890"
+              />
+              <ExplorerListItem
+                divider
+                label="Identity Key"
+                value="0x1234567890"
+              />
+              <ExplorerListItem
+                row
+                divider
+                label="Node bonded"
+                value="24/11/2024"
+              />
+              <ExplorerListItem row divider label="Nr. of stakes" value="56" />
+              <ExplorerListItem row label="Self bonded" value="10,000 NYM" />
+            </Stack>
+          </ExplorerCard>
+        </Grid2>
+      </Grid2>
+    </ContentLayout>
+  );
+}
diff --git a/explorer-nextjs/src/app/account/page.tsx b/explorer-nextjs/src/app/account/page.tsx
deleted file mode 100644
index ccbb63b126..0000000000
--- a/explorer-nextjs/src/app/account/page.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
-import { Wrapper } from "@/components/wrapper";
-import { Box, Typography } from "@mui/material";
-
-export default function AccountPage() {
-  return (
-    <div>
-      <main>
-        <Box sx={{ p: 5 }}>
-          <Wrapper>
-            <Typography fontWeight="light">Account page</Typography>
-            <ExplorerButtonGroup
-              options={[
-                {
-                  label: "Node",
-                  link: "/node",
-                  isSelected: false,
-                },
-                {
-                  label: "Account",
-                  link: "/account",
-                  isSelected: true,
-                },
-              ]}
-            />
-          </Wrapper>
-        </Box>
-      </main>
-    </div>
-  );
-}
diff --git a/explorer-nextjs/src/app/api/index.tsx b/explorer-nextjs/src/app/api/index.tsx
index 7a2d78766d..05afa50615 100644
--- a/explorer-nextjs/src/app/api/index.tsx
+++ b/explorer-nextjs/src/app/api/index.tsx
@@ -15,6 +15,14 @@ export interface IPacketsAndStakingData {
   total_stake: number;
 }
 
+export interface CurrentEpochData {
+  id: number;
+  current_epoch_id: number;
+  current_epoch_start: string;
+  epoch_length: { secs: number; nanos: number };
+  epochs_in_interval: number;
+  total_elapsed_epochs: number;
+}
 export interface ExplorerData {
   circulatingNymSupplyData: {
     circulating_supply: { denom: Denom; amount: string };
@@ -45,14 +53,7 @@ export interface ExplorerData {
     };
   };
   packetsAndStakingData: IPacketsAndStakingData[];
-  currentEpochData: {
-    id: number;
-    current_epoch_id: number;
-    current_epoch_start: string;
-    epoch_length: { secs: number; nanos: number };
-    epochs_in_interval: number;
-    total_elapsed_epochs: number;
-  };
+
   currentEpochRewardsData: {
     interval: {
       reward_pool: string;