Add search functionality to the search component

nymtech · Dec 19, 2024 · 615e996 · 615e996
1 parent 997c75c
commit 615e996
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 25 deletions.
diff --git a/explorer-nextjs/src/app/account/[id]/page.tsx b/explorer-nextjs/src/app/account/[id]/page.tsx
@@ -10,11 +10,9 @@ import { Box, Grid2 } from "@mui/material";
 export default async function Account({
   params,
 }: {
-  params: Promise<{ address: string }>;
+  params: Promise<{ id: string }>;
 }) {
-  // const address = (await params).address;
-  console.log("(await params).address :>> ", (await params).address);
-  const address = "n1z0msxu8c098umdhnthpr2ac3ck2n3an97dm8pn";
+  const address = (await params).id;
 
   const nymAccountAddress = `${NYM_ACCOUNT_ADDRESS}${address}`;
   const accountData = await fetch(nymAccountAddress, {
@@ -30,7 +28,6 @@ export default async function Account({
   if (!nymAccountBalancesData) {
     return null;
   }
-  console.log("nymAccountBalancesData :>> ", nymAccountBalancesData);
   const nymPrice = await fetch(NYM_PRICES_API, {
     headers: {
       Accept: "application/json",
@@ -42,9 +39,6 @@ export default async function Account({
 
   const nymPriceData: CurrencyRates = await nymPrice.json();
 
-  console.log("nymPriceData :>> ", nymPriceData);
-
-  console.log("nymAccountData :>> ", nymAccountBalancesData);
   return (
     <ContentLayout>
       <Grid2 container columnSpacing={5} rowSpacing={5}>
@@ -59,7 +53,7 @@ export default async function Account({
                 {
                   label: "Account",
                   isSelected: true,
-                  link: "/account/1",
+                  link: `/account/${address}`,
                 },
               ]}
             />

diff --git a/explorer-nextjs/src/app/api/urls.ts b/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 =

diff --git a/explorer-nextjs/src/app/nym-node/[id]/page.tsx b/explorer-nextjs/src/app/nym-node/[id]/page.tsx
@@ -16,6 +16,7 @@ export default async function NymNode({
   params: Promise<{ id: string }>;
 }) {
   const id = Number((await params).id);
+  console.log("id :>> ", id);
 
   const descriptionData = await fetch(NYM_NODE_DESCRIPTION, {
     headers: {
@@ -37,7 +38,7 @@ export default async function NymNode({
   });
   const nymbondedData = await bondedData.json();
 
-  if (!bondedData || !nymNodesDescription) {
+  if (!nymbondedData || !nymNodesDescription) {
     return null;
   }
 
@@ -49,6 +50,8 @@ export default async function NymNode({
     (item: INodeDescription) => item.node_id === id,
   );
 
+  const ownerAccount = nodeBondInfo[0].bond_information.owner;
+
   return (
     <ContentLayout>
       <Grid2 container columnSpacing={5} rowSpacing={5}>
@@ -63,7 +66,7 @@ export default async function NymNode({
                 {
                   label: "Account",
                   isSelected: false,
-                  link: "/account/1",
+                  link: `/account/${ownerAccount}`,
                 },
               ]}
             />

diff --git a/explorer-nextjs/src/components/input/Input.tsx b/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;
diff --git a/explorer-nextjs/src/components/search/NodeAndAddressSearch.tsx b/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>
   );
 };