feat(entropy-explorer): bind to live apis

Author: cprussin

apps/entropy-explorer/package.json

@@ -23,15 +23,12 @@
     "@phosphor-icons/react": "catalog:",
     "@pythnetwork/component-library": "workspace:*",
     "clsx": "catalog:",
-    "connectkit": "catalog:",
     "next": "catalog:",
     "nuqs": "catalog:",
     "react": "catalog:",
     "react-aria": "catalog:",
     "react-dom": "catalog:",
     "react-timeago": "catalog:",
-    "viem": "catalog:",
-    "wagmi": "catalog:",
     "zod": "catalog:"
   },
   "devDependencies": {

apps/entropy-explorer/src/components/Address/index.module.scss

@@ -5,20 +5,4 @@
   flex-flow: row nowrap;
   gap: theme.spacing(2);
   font-size: theme.font-size("sm");
-
-  .full {
-    display: none;
-  }
-
-  &:not([data-always-truncate]) {
-    @include theme.breakpoint("xl") {
-      .truncated {
-        display: none;
-      }
-
-      .full {
-        display: unset;
-      }
-    }
-  }
 }

apps/entropy-explorer/src/components/Address/index.tsx

@@ -9,24 +9,32 @@ import { truncate } from "../../truncate";
 type Props = {
   value: string;
   chain: keyof typeof EntropyDeployments;
-  alwaysTruncate?: boolean | undefined;
+  isAccount?: boolean | undefined;
 };
 
-export const Address = ({ value, chain, alwaysTruncate }: Props) => {
-  const { explorer } = EntropyDeployments[chain];
+export const Account = (props: Omit<Props, "isAccount">) => (
+  <Address {...props} isAccount />
+);
+
+export const Transaction = (props: Omit<Props, "isAccount">) => (
+  <Address {...props} />
+);
+
+const Address = ({ value, chain, isAccount }: Props) => {
+  const { explorerTxTemplate, explorerAccountTemplate } =
+    EntropyDeployments[chain];
+  const explorerTemplate = isAccount
+    ? explorerAccountTemplate
+    : explorerTxTemplate;
   const truncatedValue = useMemo(() => truncate(value), [value]);
   return (
-    <div
-      data-always-truncate={alwaysTruncate ? "" : undefined}
-      className={styles.address}
-    >
+    <div className={styles.address}>
       <Link
-        href={explorer.replace("$ADDRESS", value)}
+        href={explorerTemplate.replace("$ADDRESS", value)}
         target="_blank"
         rel="noreferrer"
       >
-        <code className={styles.truncated}>{truncatedValue}</code>
-        <code className={styles.full}>{value}</code>
+        <code>{truncatedValue}</code>
       </Link>
       <CopyButton text={value} iconOnly />
     </div>

apps/entropy-explorer/src/components/Home/chain-select.tsx

@@ -19,12 +19,21 @@
   .body {
     @include theme.max-width;
 
+    .statusSelect {
+      width: theme.spacing(36);
+    }
+
     .searchBar {
       width: 100%;
 
       @include theme.breakpoint("lg") {
         width: theme.spacing(100);
       }
     }
+
+    .cardBody {
+      background: theme.color("background", "primary");
+      border-radius: theme.border-radius("xl");
+    }
   }
 }

apps/entropy-explorer/src/components/Home/index.module.scss

@@ -1,13 +1,25 @@
 import { ListDashes } from "@phosphor-icons/react/dist/ssr/ListDashes";
 import { Card } from "@pythnetwork/component-library/Card";
+import { ErrorPage } from "@pythnetwork/component-library/ErrorPage";
+import { NoResults } from "@pythnetwork/component-library/NoResults";
+import { Suspense } from "react";
 
-import { ChainSelect } from "./chain-select";
 import styles from "./index.module.scss";
-import { Results } from "./results";
-import { SearchBar } from "./search-bar";
-import { StatusSelect } from "./status-select";
+import { Results as ResultsImpl, ResultsLoading } from "./results";
+import {
+  SearchBar,
+  Paginator as PaginatorImpl,
+  ChainSelect,
+  StatusSelect,
+} from "./search-controls";
+import type { Args } from "../../requests";
+import { getRequests, ResultType } from "../../requests";
 
-export const Home = () => (
+type Props = {
+  searchParams: Promise<Args>;
+};
+
+export const Home = (props: Props) => (
   <div className={styles.home}>
     <h1 className={styles.header}>Requests</h1>
     <div className={styles.body}>
@@ -16,18 +28,106 @@ export const Home = () => (
         icon={<ListDashes />}
         toolbar={
           <>
-            <ChainSelect variant="outline" size="sm" placement="bottom right" />
+            <ChainSelect
+              label="Chain"
+              hideLabel
+              defaultButtonLabel="Chain"
+              variant="outline"
+              size="sm"
+              placement="bottom right"
+            />
             <StatusSelect
+              label="Status"
+              hideLabel
+              defaultButtonLabel="Status"
+              hideGroupLabel
               variant="outline"
               size="sm"
               placement="bottom right"
+              className={styles.statusSelect ?? ""}
+            />
+            <SearchBar
+              size="sm"
+              placeholder="Sequence number, provider, sender or tx hash"
+              className={styles.searchBar ?? ""}
             />
-            <SearchBar className={styles.searchBar ?? ""} />
           </>
         }
+        footer={
+          <Suspense>
+            <Paginator {...props} />
+          </Suspense>
+        }
       >
-        <Results />
+        <div className={styles.cardBody}>
+          <Suspense fallback={<ResultsLoading />}>
+            <Results {...props} />
+          </Suspense>
+        </div>
       </Card>
     </div>
   </div>
 );
+
+const Results = async (props: Props) => {
+  try {
+    const searchParams = await props.searchParams;
+    const results = await getRequests(searchParams);
+    switch (results.type) {
+      case ResultType.BadSearch: {
+        return (
+          <NoResults
+            header="Invalid Search"
+            body="Your search query is not a valid transaction hash, sequence number, or sender."
+            query={results.search}
+          />
+        );
+      }
+      case ResultType.ErrorResult: {
+        return;
+      }
+      case ResultType.Success: {
+        return (
+          <ResultsImpl
+            key={[
+              searchParams.chain,
+              searchParams.search,
+              searchParams.status,
+            ].join(",")}
+            search={searchParams.search}
+            currentPage={results.currentPage}
+            now={new Date()}
+          />
+        );
+      }
+    }
+  } catch (error) {
+    if (error instanceof Error) {
+      return <ErrorPage error={error} />;
+    } else {
+      const err = new Error("Unknown Error");
+      err.cause = error;
+      return <ErrorPage error={err} />;
+    }
+  }
+};
+
+const Paginator = async (props: Props) => {
+  try {
+    const searchParams = await props.searchParams;
+    const results = await getRequests(searchParams);
+    switch (results.type) {
+      case ResultType.Success: {
+        return <PaginatorImpl numPages={results.numPages} />;
+      }
+      case ResultType.BadSearch: {
+        return <PaginatorImpl numPages={0} />;
+      }
+      case ResultType.ErrorResult: {
+        return <></>;
+      }
+    }
+  } catch {
+    return <></>;
+  }
+};

apps/entropy-explorer/src/components/Home/index.tsx

@@ -36,6 +36,19 @@
     margin-right: theme.spacing(4);
     position: relative;
 
+    .helpButton {
+      position: absolute;
+      top: theme.spacing(2);
+      right: theme.spacing(2);
+    }
+
+    .failureMessage {
+      overflow: auto;
+      width: 100%;
+      display: flex;
+      word-break: break-word;
+    }
+
     p {
       margin: 0;