Merge pull request #2950 from pyth-network/cprussin/entropy-explorer-feedback

feat(entropy-explorer): implement some feedback items

Author: cprussin

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

@@ -3,12 +3,12 @@ import { Link } from "@pythnetwork/component-library/Link";
 import { useMemo } from "react";
 
 import styles from "./index.module.scss";
-import { EntropyDeployments } from "../../entropy-deployments";
+import type { EntropyDeployment } from "../../entropy-deployments";
 import { truncate } from "../../truncate";
 
 type Props = {
   value: string;
-  chain: keyof typeof EntropyDeployments;
+  chain: EntropyDeployment;
   isAccount?: boolean | undefined;
 };
 
@@ -21,11 +21,9 @@ export const Transaction = (props: Omit<Props, "isAccount">) => (
 );
 
 const Address = ({ value, chain, isAccount }: Props) => {
-  const { explorerTxTemplate, explorerAccountTemplate } =
-    EntropyDeployments[chain];
   const explorerTemplate = isAccount
-    ? explorerAccountTemplate
-    : explorerTxTemplate;
+    ? chain.explorerAccountTemplate
+    : chain.explorerTxTemplate;
   const truncatedValue = useMemo(() => truncate(value), [value]);
   return (
     <div className={styles.address}>

apps/entropy-explorer/src/components/Home/search-controls.module.scss renamed to apps/entropy-explorer/src/components/Home/chain-tag.module.scss

@@ -1,6 +1,6 @@
 @use "@pythnetwork/component-library/theme";
 
-.chainSelectItem {
+.chainTag {
   display: grid;
   grid-template-columns: max-content 1fr;
   gap: theme.spacing(2);

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

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+import Image from "next/image";
+import type { ComponentProps } from "react";
+
+import styles from "./chain-tag.module.scss";
+import type { EntropyDeployment } from "../../entropy-deployments";
+
+export const ChainTag = ({
+  chain,
+  className,
+  ...props
+}: { chain: EntropyDeployment } & ComponentProps<"div">) => (
+  <div className={clsx(styles.chainTag, className)} {...props}>
+    <Image alt="" src={chain.icon} width={20} height={20} />
+    {chain.name}
+  </div>
+);

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

@@ -27,6 +27,10 @@
       width: 100%;
 
       @include theme.breakpoint("lg") {
+        width: theme.spacing(80);
+      }
+
+      @include theme.breakpoint("xl") {
         width: theme.spacing(100);
       }
     }

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

@@ -12,7 +12,7 @@ import {
   ChainSelect,
   StatusSelect,
 } from "./search-controls";
-import { isValidDeployment } from "../../entropy-deployments";
+import { parseChainSlug } from "../../entropy-deployments";
 import type { Args } from "../../requests";
 import { getRequests, ResultType } from "../../requests";
 
@@ -94,12 +94,7 @@ const Results = async (props: Props) => {
               searchParams.search,
               searchParams.status,
             ].join(",")}
-            chain={
-              searchParams.chain !== undefined &&
-              isValidDeployment(searchParams.chain)
-                ? searchParams.chain
-                : undefined
-            }
+            chain={parseChainSlug(searchParams.chain)}
             search={searchParams.search}
             currentPage={results.currentPage}
             now={new Date()}

apps/entropy-explorer/src/components/Home/request-drawer.tsx

@@ -13,7 +13,6 @@ import { useNumberFormatter } from "react-aria";
 import TimeAgo from "react-timeago";
 
 import styles from "./request-drawer.module.scss";
-import { EntropyDeployments } from "../../entropy-deployments";
 import { getErrorDetails } from "../../errors";
 import type {
   Request,
@@ -25,6 +24,7 @@ import { truncate } from "../../truncate";
 import { Account, Transaction } from "../Address";
 import { Status as StatusComponent } from "../Status";
 import { Timestamp } from "../Timestamp";
+import { ChainTag } from "./chain-tag";
 
 export const mkRequestDrawer = (
   request: Request,
@@ -97,6 +97,11 @@ const RequestDrawerBody = ({
           },
         ]}
         rows={[
+          {
+            id: "chain",
+            field: "Chain",
+            value: <ChainTag chain={request.chain} />,
+          },
           {
             id: "requestTimestamp",
             field: "Request Timestamp",
@@ -244,8 +249,7 @@ const RequestDrawerBody = ({
 };
 
 const CallbackErrorInfo = ({ request }: { request: CallbackErrorRequest }) => {
-  const deployment = EntropyDeployments[request.chain];
-  const retryCommand = `cast send ${deployment.address} 'revealWithCallback(address, uint64, bytes32, bytes32)' ${request.provider} ${request.sequenceNumber.toString()} ${request.userContribution} ${request.randomNumber} -r ${deployment.rpc} --private-key <YOUR_PRIVATE_KEY>`;
+  const retryCommand = `cast send ${request.chain.address} 'revealWithCallback(address, uint64, bytes32, bytes32)' ${request.provider} ${request.sequenceNumber.toString()} ${request.userContribution} ${request.randomNumber} -r ${request.chain.rpc} --private-key <YOUR_PRIVATE_KEY>`;
 
   return (
     <>
@@ -268,7 +272,7 @@ const CallbackErrorInfo = ({ request }: { request: CallbackErrorRequest }) => {
           Help
         </Button>
         <div className={styles.failureMessage}>
-          <CallbackFailureMessage reason={request.returnValue} />
+          <FailureMessage reason={request.returnValue} />
         </div>
       </InfoBox>
       <InfoBox
@@ -288,7 +292,7 @@ const CallbackErrorInfo = ({ request }: { request: CallbackErrorRequest }) => {
             marginTop: "16px",
           }}
         >
-          <CopyButton text={retryCommand}>Copy Forge Command</CopyButton>
+          <CopyButton text={retryCommand}>Copy Cast Command</CopyButton>
           <Button
             size="sm"
             variant="ghost"
@@ -327,7 +331,7 @@ const RevealFailedInfo = ({ request }: { request: FailedRequest }) => (
       Help
     </Button>
     <div className={styles.failureMessage}>
-      <CallbackFailureMessage reason={request.reason} />
+      <FailureMessage reason={request.reason} />
     </div>
   </InfoBox>
 );
@@ -340,7 +344,7 @@ const getHelpLink = (reason: string) => {
   );
 };
 
-const CallbackFailureMessage = ({ reason }: { reason: string }) => {
+const FailureMessage = ({ reason }: { reason: string }) => {
   const details = getErrorDetails(reason);
   return details ? (
     <>
@@ -350,6 +354,8 @@ const CallbackFailureMessage = ({ reason }: { reason: string }) => {
       </p>
     </>
   ) : (
-    reason
+    <>
+      <b>Error response:</b> {reason}
+    </>
   );
 };

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

@@ -22,11 +22,6 @@
 
 .chain {
   @include theme.text("sm", "medium");
-
-  display: flex;
-  flex-flow: row nowrap;
-  gap: theme.spacing(2);
-  align-items: center;
 }
 
 .timestamp {

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

@@ -5,12 +5,13 @@ import { NoResults as NoResultsImpl } from "@pythnetwork/component-library/NoRes
 import type { RowConfig } from "@pythnetwork/component-library/Table";
 import { Table } from "@pythnetwork/component-library/Table";
 import { useDrawer } from "@pythnetwork/component-library/useDrawer";
-import Image from "next/image";
 import type { ComponentProps } from "react";
 import { useMemo } from "react";
 
+import { ChainTag } from "./chain-tag";
 import { mkRequestDrawer } from "./request-drawer";
 import styles from "./results.module.scss";
+import type { ChainSlug } from "../../entropy-deployments";
 import { EntropyDeployments } from "../../entropy-deployments";
 import type { Request } from "../../requests";
 import { Status } from "../../requests";
@@ -24,7 +25,7 @@ type Props = {
   search?: string | undefined;
   isUpdating?: boolean | undefined;
   now: Date;
-  chain?: keyof typeof EntropyDeployments | undefined;
+  chain: ChainSlug;
 };
 
 export const Results = ({
@@ -44,7 +45,7 @@ export const Results = ({
           drawer.open(mkRequestDrawer(request, now));
         },
         data: {
-          chain: <Chain chain={request.chain} />,
+          chain: <ChainTag className={styles.chain} chain={request.chain} />,
           timestamp: (
             <div className={styles.timestamp}>
               <Timestamp timestamp={request.requestTimestamp} now={now} />
@@ -86,7 +87,7 @@ type ResultsImplProps =
     }
   | {
       isLoading?: false | undefined;
-      chain?: keyof typeof EntropyDeployments | undefined;
+      chain: ChainSlug;
       rows: (RowConfig<(typeof defaultProps)["columns"][number]["id"]> & {
         textValue: string;
       })[];
@@ -132,7 +133,7 @@ const ResultsImpl = (props: ResultsImplProps) => (
 
 type NoResultsProps = {
   search?: string | undefined;
-  chain?: keyof typeof EntropyDeployments | undefined;
+  chain: ChainSlug;
 };
 
 const NoResults = ({ search, chain }: NoResultsProps) => {
@@ -143,7 +144,7 @@ const NoResults = ({ search, chain }: NoResultsProps) => {
         <>
           <p>
             We couldn{"'"}t find any results for your query on{" "}
-            {chain ? EntropyDeployments[chain].name : "any chain"}.
+            <ChainName chain={chain} />
           </p>
           <p>Would you like to try your search on a different chain?</p>
           <ChainSelect
@@ -159,14 +160,18 @@ const NoResults = ({ search, chain }: NoResultsProps) => {
   );
 };
 
-const Chain = ({ chain }: { chain: keyof typeof EntropyDeployments }) => {
-  const chainInfo = EntropyDeployments[chain];
-  return (
-    <div className={styles.chain}>
-      <Image alt="" src={chainInfo.icon} width={20} height={20} />
-      {chainInfo.name}
-    </div>
-  );
+const ChainName = ({ chain }: { chain: ChainSlug }) => {
+  switch (chain) {
+    case "all-mainnet": {
+      return "any mainnet chain";
+    }
+    case "all-testnet": {
+      return "any testnet chain";
+    }
+    default: {
+      return EntropyDeployments[chain].name;
+    }
+  }
 };
 
 const defaultProps = {
@@ -185,6 +190,7 @@ const defaultProps = {
       name: "SEQUENCE NUMBER",
       alignment: "center",
       width: 20,
+      isRowHeader: true,
     },
     {
       id: "timestamp" as const,