feat(entropy-explorer): implement some feedback items

Author: cprussin

apps/entropy-explorer/package.json

@@ -11,7 +11,7 @@
     "fix:format": "prettier --write .",
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
-    "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_TBkf9EyQjQF37gs4Vk0sQKJj97kE vercel env pull",
+    "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_34F8THr7mZ3eAOQoCLdo8xWj9fdT vercel env pull",
     "start:dev": "next dev --port 3006",
     "start:prod": "next start --port 3006",
     "test:format": "prettier --check .",
@@ -29,6 +29,7 @@
     "react": "catalog:",
     "react-aria": "catalog:",
     "react-dom": "catalog:",
+    "react-timeago": "catalog:",
     "viem": "catalog:",
     "wagmi": "catalog:",
     "zod": "catalog:"

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

@@ -0,0 +1,24 @@
+@use "@pythnetwork/component-library/theme";
+
+.address {
+  display: flex;
+  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

@@ -0,0 +1,34 @@
+import { CopyButton } from "@pythnetwork/component-library/CopyButton";
+import { Link } from "@pythnetwork/component-library/Link";
+import { useMemo } from "react";
+
+import styles from "./index.module.scss";
+import { EntropyDeployments } from "../../entropy-deployments";
+import { truncate } from "../../truncate";
+
+type Props = {
+  value: string;
+  chain: keyof typeof EntropyDeployments;
+  alwaysTruncate?: boolean | undefined;
+};
+
+export const Address = ({ value, chain, alwaysTruncate }: Props) => {
+  const { explorer } = EntropyDeployments[chain];
+  const truncatedValue = useMemo(() => truncate(value), [value]);
+  return (
+    <div
+      data-always-truncate={alwaysTruncate ? "" : undefined}
+      className={styles.address}
+    >
+      <Link
+        href={explorer.replace("$ADDRESS", value)}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <code className={styles.truncated}>{truncatedValue}</code>
+        <code className={styles.full}>{value}</code>
+      </Link>
+      <CopyButton text={value} iconOnly />
+    </div>
+  );
+};

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

@@ -31,7 +31,9 @@ export const ChainSelect = (
   </Suspense>
 );
 
-type Deployment = ReturnType<typeof entropyDeploymentsByNetwork>[number];
+type Deployment =
+  | ReturnType<typeof entropyDeploymentsByNetwork>[number]
+  | { id: "all" };
 
 const ResolvedChainSelect = (
   props: ConstrainedOmit<
@@ -49,6 +51,11 @@ const useResolvedProps = () => {
   const { chain, setChain } = useQuery();
   const chains = useMemo(
     () => [
+      {
+        name: "ALL",
+        options: [{ id: "all" as const }],
+        hideLabel: true,
+      },
       {
         name: "MAINNET",
         options: entropyDeploymentsByNetwork("mainnet", collator),
@@ -62,30 +69,42 @@ const useResolvedProps = () => {
   );
 
   const showChain = useCallback(
-    (chain: Deployment) => (
-      <div className={styles.chainSelectItem}>
-        <ChainIcon id={chain.chainId} />
-        {chain.name}
-      </div>
-    ),
+    (chain: Deployment) =>
+      chain.id === "all" ? (
+        "All"
+      ) : (
+        <div className={styles.chainSelectItem}>
+          <ChainIcon id={chain.chainId} />
+          {chain.name}
+        </div>
+      ),
     [],
   );
 
-  const chainTextValue = useCallback((chain: Deployment) => chain.name, []);
+  const chainTextValue = useCallback(
+    (chain: Deployment) => (chain.id === "all" ? "All" : chain.name),
+    [],
+  );
+  // eslint-disable-next-line import/namespace
+  const viemChain = chain ? viemChains[chain] : undefined;
 
   return {
-    selectedKey: chain ?? undefined,
+    selectedKey: chain ?? ("all" as const),
     onSelectionChange: setChain,
     optionGroups: chains,
     show: showChain,
     textValue: chainTextValue,
+    buttonLabel: viemChain?.name ?? "Chain",
+    ...(viemChain && {
+      icon: () => <ChainIcon id={viemChain.id} />,
+    }),
   };
 };
 
 const defaultProps = {
   label: "Chain",
   hideLabel: true,
-  defaultButtonLabel: "Select Chain",
+  defaultButtonLabel: "Chain",
 } as const;
 
 const entropyDeploymentsByNetwork = (

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

@@ -5,6 +5,7 @@ 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";
 
 export const Home = () => (
   <div className={styles.home}>
@@ -16,6 +17,11 @@ export const Home = () => (
         toolbar={
           <>
             <ChainSelect variant="outline" size="sm" placement="bottom right" />
+            <StatusSelect
+              variant="outline"
+              size="sm"
+              placement="bottom right"
+            />
             <SearchBar className={styles.searchBar ?? ""} />
           </>
         }

apps/entropy-explorer/src/components/Home/request-drawer.module.scss

@@ -0,0 +1,59 @@
+@use "@pythnetwork/component-library/theme";
+
+.requestDrawer {
+  gap: theme.spacing(8);
+  padding-bottom: theme.spacing(8);
+
+  .cards {
+    display: grid;
+    gap: theme.spacing(4);
+    grid-template-columns: repeat(2, 1fr);
+    padding-left: theme.spacing(4);
+    padding-right: theme.spacing(4);
+  }
+
+  .details {
+    width: 100%;
+    overflow: auto;
+
+    .field {
+      @include theme.text("sm", "normal");
+
+      color: theme.color("muted");
+    }
+
+    .gasMeter {
+      margin-right: 5%;
+
+      .gasMeterLabel {
+        @include theme.text("xs", "medium");
+      }
+    }
+  }
+
+  .message {
+    margin-left: theme.spacing(4);
+    margin-right: theme.spacing(4);
+    position: relative;
+
+    p {
+      margin: 0;
+
+      &.details {
+        margin-top: theme.spacing(2);
+      }
+    }
+
+    .code {
+      border-radius: theme.border-radius("lg");
+      font-size: theme.font-size("sm");
+      line-height: 125%;
+    }
+
+    .copyButton {
+      position: absolute;
+      top: theme.spacing(2);
+      right: calc(theme.spacing(2) + 0.25em);
+    }
+  }
+}