Merge pull request #2766 from pyth-network/cprussin/entropy-explorer-live

feat(entropy-explorer): bind to live apis

Author: cprussin

apps/entropy-explorer/NOTES.org

@@ -0,0 +1,54 @@
+* TODO Lock timestamp to when page loaded & add sync button
+* TODO Add TODO items in requests.ts
+- providerContribution
+- gasUsed + randomNumber in errored state
+
+* TODO Connect the wallet to execute the transaction.
+* TODO Have a blinking yellow-coloured pending status that can be turned Green using an event listener.
+* TODO A dashboard on the home page to display reference material, such as current fees and usage.
+* TODO Many people use the Block number to search in explorers as well. We can think about it.
+
+* DONE Removing badges from the sequence number + making it bold
+CLOSED: [2025-05-09 Fri 20:06]
+* DONE Rename Caller -> From or Sender
+CLOSED: [2025-05-09 Fri 20:08]
+* DONE Option to filter Callback Status
+CLOSED: [2025-05-09 Fri 20:08]
+* DONE Reorder Failed Tx Fields.
+CLOSED: [2025-05-09 Fri 20:11]
+** Request Timestamp
+** Callback Timestamp
+** Request Tx +Hash+
+** From / Sender
+** Callback Tx +Hash+
+** Provider
+** +User Random Number+ User Contribution
+** Gas Used
+* DONE Put the cast command in the code background with syntax colouring/highlighting.
+CLOSED: [2025-05-09 Fri 20:11]
+* DONE Decoding [[https://docs.pyth.network/entropy/error-codes][Error codes]].
+CLOSED: [2025-05-12 Mon 13:53]
+* DONE The timestamp should be shown in the following format ~9 secs ago (May-09-2025 12:47:11 PM +utc:)~
+CLOSED: [2025-05-12 Mon 14:30]
+* DONE Tooltips
+CLOSED: [2025-05-12 Mon 22:37]
+** Request Tx
+** Callback Tx
+** User Random Number / User Contribution
+** Provider Random Number / User Contribution
+* DONE Show delay/latency (delta between callbackTimestamp and requestTimestamp) somehow
+CLOSED: [2025-05-12 Mon 22:45]
+* DONE As @Tejas mentioned above, a tooltip button for the code can be used, or it can redirect them [[https://docs.pyth.network/entropy/debug-callback-failures][here]].
+CLOSED: [2025-05-12 Mon 22:48]
+* DONE Finish paginator
+CLOSED: [2025-06-06 Fri 11:10]
+* DONE Improve use-search-params
+CLOSED: [2025-06-06 Fri 19:55]
+* DONE Fix callback error page for unknown callback errors (i.e. when fortuna sends a string that isn't an error code)
+CLOSED: [2025-06-06 Fri 20:07]
+* DONE Improve not found message, especially for invalid search
+CLOSED: [2025-06-10 Tue 12:24]
+* DONE Improve ErrorResult handling
+CLOSED: [2025-06-10 Tue 12:24]
+* DONE Add all chains + icons
+CLOSED: [2025-06-10 Tue 16:12]

apps/entropy-explorer/next.config.js

@@ -7,6 +7,13 @@ const config = {
 
   pageExtensions: ["ts", "tsx", "mdx"],
 
+  images: {
+    remotePatterns: [
+      new URL("https://icons.llamao.fi/icons/chains/*?w=20&h=20"),
+      new URL("https://www.tabichain.com/images/new2/tabi.svg"),
+    ],
+  },
+
   logging: {
     fetches: {
       fullUrl: true,

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(44);
+    }
+
     .searchBar {
       width: 100%;
 
       @include theme.breakpoint("lg") {
         width: theme.spacing(100);
       }
     }
+
+    .cardBody {
+      background: theme.color("background", "primary");
+      border-radius: theme.border-radius("xl");
+    }
   }
 }