Merge branch 'yana/search-component' into feature/explorer_v2

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

@@ -78,7 +78,7 @@ export default async function Account({
                   {
                     label: "Account",
                     isSelected: true,
-                    link: "/account/1",
+                    link: `/account/${address}`,
                   },
                 ]}
               />

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

@@ -46,7 +46,11 @@ export default async function NymNode({
             <SectionHeading title="Nym Node Details" />
             <ExplorerButtonGroup
               options={[
-                { label: "Nym Node", isSelected: true, link: "/nym-node/1" },
+                {
+                  label: "Nym Node",
+                  isSelected: true,
+                  link: `/nym-node/${id}`,
+                },
                 {
                   label: "Account",
                   isSelected: false,

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