From f69c6707c7ea166d2cc745240babbfeec01cff56 Mon Sep 17 00:00:00 2001
From: Yana <yanok87@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:56:58 +0700
Subject: [PATCH] wip

---
 .../public/profileImagePlaceholder.png        | Bin 0 -> 3832 bytes
 explorer-nextjs/src/app/page.tsx              |  94 ++++++++++++++++--
 2 files changed, 88 insertions(+), 6 deletions(-)
 create mode 100644 explorer-nextjs/public/profileImagePlaceholder.png

diff --git a/explorer-nextjs/public/profileImagePlaceholder.png b/explorer-nextjs/public/profileImagePlaceholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbeef84ed00905d134a9f76543c59d425a38a781
GIT binary patch
literal 3832
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

literal 0
HcmV?d00001

diff --git a/explorer-nextjs/src/app/page.tsx b/explorer-nextjs/src/app/page.tsx
index 35e1709eef..a6da680189 100644
--- a/explorer-nextjs/src/app/page.tsx
+++ b/explorer-nextjs/src/app/page.tsx
@@ -1,16 +1,17 @@
+"use client";
+
+import {
+  AccountStatsCard,
+  type IAccountStatsCardProps,
+} from "@/components/Cards/AccountStatsCard";
 import ExplorerCard from "@/components/Cards/ExplorerCard";
 import ExplorerHeroCard from "@/components/Cards/ExplorerHeroCard";
 import ExplorerListItem from "@/components/List/ListItem";
 import ProgressBar from "@/components/RatingMeter/RatingMeter";
 import StarRarating from "@/components/StarRating/StarRating";
+import TwoSidedSwitch from "@/components/TwoSidedButtonSwitch";
 import CopyFile from "@/components/icons/CopyFile";
 import Gateway from "@/components/icons/Gateway";
-("use client");
-import TwoSidedSwitch from "@/components/TwoSidedButtonSwitch";
-import {
-  AccountStatsCard,
-  type IAccountStatsCardProps,
-} from "@/components/cards/AccountStatsCard";
 import { CurrentEpochCard } from "@/components/landingPageComponents/CurrentEpochCard";
 import { NetworkStakeCard } from "@/components/landingPageComponents/NetworkStakeCard";
 import { NoiseCard } from "@/components/landingPageComponents/NoiseCard";
@@ -23,6 +24,84 @@ import React, { useEffect, useState } from "react";
 import { type ContentCardProps, MonoCard } from "../components/cards/MonoCard";
 import { type ExplorerData, getCacheExplorerData } from "./api";
 
+const explorerCard: ContentCardProps = {
+  overTitle: "SINGLE",
+  profileImage: {},
+  title: "SINGLE",
+  profileCountry: {
+    countryCode: "NO",
+    countryName: "Norway",
+  },
+  upDownLine: {
+    percentage: 10,
+    numberWentUp: true,
+  },
+  titlePrice: {
+    price: 1.15,
+    upDownLine: {
+      percentage: 10,
+      numberWentUp: true,
+    },
+  },
+  dataRows: {
+    rows: [
+      { key: "Market cap", value: "$ 1000000" },
+      { key: "24H VOL", value: "$ 1000000" },
+    ],
+  },
+  graph: {
+    data: [
+      {
+        date_utc: "2024-11-20",
+        numericData: 10,
+      },
+      {
+        date_utc: "2024-11-21",
+        numericData: 12,
+      },
+      {
+        date_utc: "2024-11-22",
+        numericData: 9,
+      },
+      {
+        date_utc: "2024-11-23",
+        numericData: 11,
+      },
+    ],
+    color: "#00CA33",
+    label: "Label",
+  },
+  nymAddress: {
+    address: "n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su",
+    title: "Nym address",
+  },
+  identityKey: {
+    address: "n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su",
+    title: "Nym address",
+  },
+  qrCode: {
+    url: "https://nymtech.net",
+  },
+  ratings: {
+    ratings: [
+      { title: "Rating-1", numberOfStars: 4 },
+      { title: "Rating-2", numberOfStars: 2 },
+      { title: "Rating-3", numberOfStars: 3 },
+    ],
+  },
+  progressBar: {
+    overTitle: "Current NGM epoch",
+    start: "2024-12-08T12:26:19Z",
+    showEpoch: true,
+  },
+  comments: true,
+  paragraph: "Additional line",
+  stakeButton: {
+    label: "Stake on node",
+    identityKey: "n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su",
+  },
+};
+
 const accountStatsCard: IAccountStatsCardProps = {
   overTitle: "Total value",
   priceTitle: 1990.0174,
@@ -146,6 +225,9 @@ export default function Home() {
                       // onSwitch={() => console.log("object :>> ")}
                     />
                   </Grid>
+                  <Grid size={{ xs: 12 }}>
+                    <AccountStatsCard {...accountStatsCard} />
+                  </Grid>
                 </Grid>
               </Grid>
               <Grid2 container spacing={4}>