start account page

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>
+  );
+}

explorer-nextjs/src/app/account/page.tsx

@@ -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>
-  );
-}

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;