Add search functionality to the search component

explorer-nextjs/src/app/account/[id]/page.tsx

@@ -0,0 +1,80 @@
+import type { CurrencyRates, IAccountBalancesInfo } from "@/app/api/types";
+import { NYM_ACCOUNT_ADDRESS, NYM_PRICES_API } from "@/app/api/urls";
+import { AccountBalancesCard } from "@/components/accountPageComponents/AccountBalancesCard";
+import { AccountInfoCard } from "@/components/accountPageComponents/AccountInfoCard";
+import { ContentLayout } from "@/components/contentLayout/ContentLayout";
+import SectionHeading from "@/components/headings/SectionHeading";
+import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
+import { Box, Grid2 } from "@mui/material";
+
+export default async function Account({
+  params,
+}: {
+  params: Promise<{ address: string }>;
+}) {
+  // const address = (await params).address;
+  console.log("(await params).address :>> ", (await params).address);
+  const address = "n1z0msxu8c098umdhnthpr2ac3ck2n3an97dm8pn";
+
+  const nymAccountAddress = `${NYM_ACCOUNT_ADDRESS}${address}`;
+  const accountData = await fetch(nymAccountAddress, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json; charset=utf-8",
+    },
+    next: { revalidate: 60 },
+    // refresh event list cache at given interval
+  });
+  const nymAccountBalancesData: IAccountBalancesInfo = await accountData.json();
+
+  if (!nymAccountBalancesData) {
+    return null;
+  }
+  console.log("nymAccountBalancesData :>> ", nymAccountBalancesData);
+  const nymPrice = await fetch(NYM_PRICES_API, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json; charset=utf-8",
+    },
+    next: { revalidate: 60 },
+    // refresh event list cache at given interval
+  });
+
+  const nymPriceData: CurrencyRates = await nymPrice.json();
+
+  console.log("nymPriceData :>> ", nymPriceData);
+
+  console.log("nymAccountData :>> ", nymAccountBalancesData);
+  return (
+    <ContentLayout>
+      <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}>
+          <AccountInfoCard accountInfo={nymAccountBalancesData} />
+        </Grid2>
+        <Grid2 size={8}>
+          <AccountBalancesCard
+            accountInfo={nymAccountBalancesData}
+            nymPrice={nymPriceData.usd}
+          />
+        </Grid2>
+      </Grid2>
+    </ContentLayout>
+  );
+}

explorer-nextjs/src/app/api/urls.ts

@@ -23,9 +23,9 @@ export const CURRENT_EPOCH_REWARDS =
 export const CIRCULATING_NYM_SUPPLY =
   "https://validator.nymtech.net/api/v1/circulating-supply";
 export const NYM_NODE_DESCRIPTION =
-  "https://nym-api.swiss-staking.ch/v1/nym-nodes/described";
+  "https://validator.nymtech.net/api/v1/nym-nodes/described";
 export const NYM_NODE_BONDED =
-  "https://nym-api.swiss-staking.ch/v1/nym-nodes/bonded";
+  "https://validator.nymtech.net/api/v1/nym-nodes/bonded";
 export const NYM_ACCOUNT_ADDRESS =
   "https://explorer.nymtech.net/api/v1/tmp/unstable/account/";
 export const NYM_PRICES_API =

explorer-nextjs/src/app/nym-node/[id]/page.tsx

@@ -16,6 +16,7 @@ export default async function NymNode({
   params: Promise<{ id: string; account?: string }>;
 }) {
   const id = Number((await params).id);
+  console.log("id :>> ", id);
 
   const response = await fetch(NYM_NODES, {
     headers: {
@@ -38,6 +39,8 @@ export default async function NymNode({
     return null;
   }
 
+  const ownerAccount = nodeBondInfo[0].bond_information.owner;
+
   return (
     <ContentLayout>
       <Grid2 container columnSpacing={5} rowSpacing={5}>

explorer-nextjs/src/components/input/Input.tsx

@@ -3,11 +3,22 @@ import { TextField } from "@mui/material";
 const Input = ({
   placeholder,
   fullWidth,
+  value,
+  onChange,
 }: {
   placeholder?: string;
   fullWidth?: boolean;
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }) => {
-  return <TextField placeholder={placeholder} fullWidth={fullWidth} />;
+  return (
+    <TextField
+      placeholder={placeholder}
+      fullWidth={fullWidth}
+      value={value}
+      onChange={onChange}
+    />
+  );
 };
 
 export default Input;

explorer-nextjs/src/components/search/NodeAndAddressSearch.tsx

@@ -1,22 +1,100 @@
 "use client";
+import type { IBondInfo } from "@/app/api";
+import { NYM_NODE_BONDED } from "@/app/api/urls";
 import { Search } from "@mui/icons-material";
-import { Button, Stack } from "@mui/material";
+import { Button, CircularProgress, Stack, Typography } from "@mui/material";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import Input from "../input/Input";
 
 const NodeAndAddressSearch = () => {
   const router = useRouter();
+  const [inputValue, setInputValue] = useState("");
+  const [errorText, setErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSearch = async () => {
+    setErrorText(""); // Clear any previous error messages
+    setIsLoading(true); // Start loading
+
+    try {
+      if (inputValue.startsWith("n1")) {
+        // Fetch Nym Address data
+        const response = await fetch(
+          `https://explorer.nymtech.net/api/v1/tmp/unstable/account/${inputValue}`,
+        );
+
+        if (response.ok) {
+          try {
+            const data = await response.json();
+            if (data) {
+              router.push(`/account/${inputValue}`);
+              return;
+            }
+          } catch {
+            setErrorText("Such Nym address doesn't exist");
+            return;
+          }
+        } else {
+          setErrorText("Such Nym address doesn't exist");
+          return;
+        }
+      } else {
+        // Fetch Nym Nodes data
+        const response = await fetch(NYM_NODE_BONDED);
+
+        if (response.ok) {
+          const nodes = await response.json();
+          const matchingNode = nodes.data.find(
+            (node: IBondInfo) =>
+              node.bond_information.node.identity_key === inputValue,
+          );
+
+          if (matchingNode) {
+            router.push(`/nym-node/${matchingNode.bond_information.node_id}`);
+            return;
+          }
+        }
+        setErrorText("Such Nym Node identity key doesn't exist");
+      }
+    } catch (error) {
+      setErrorText("An unexpected error occurred. Please try again.");
+      console.error(error);
+    } finally {
+      setIsLoading(false); // Stop loading
+    }
+  };
+
   return (
-    <Stack spacing={4} direction="row">
-      <Input placeholder="Node ID / Nym Address" fullWidth />
-      <Button
-        variant="contained"
-        endIcon={<Search />}
-        size="large"
-        onClick={() => router.push("/nym-node/123")}
-      >
-        Search
-      </Button>
+    <Stack spacing={2} direction="column">
+      <Stack spacing={4} direction="row">
+        <Input
+          placeholder="Node ID / Nym Address"
+          fullWidth
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+        />
+        <Button
+          variant="contained"
+          endIcon={
+            isLoading ? (
+              <CircularProgress size={24} color="inherit" />
+            ) : (
+              <Search />
+            )
+          }
+          size="large"
+          onClick={handleSearch}
+          sx={{ height: "56px" }} // Match the TextField height
+        >
+          Search
+        </Button>
+      </Stack>
+      {errorText && (
+        <Typography color="error" variant="body4">
+          {errorText}
+        </Typography>
+      )}
     </Stack>
   );
 };