Merge pull request #6 from ensuro/update/transactions-detail-ui

Update: Transactions detail UI

Author: gnpar

src/Address.jsx

@@ -1,45 +1,52 @@
 import React from "react";
-import { Typography, Popover } from "@mui/material";
+import { Typography, Popover, Link } from "@mui/material";
 import Chip from "@mui/material/Chip";
 import { shortAddress } from "./utils";
+import { explorerAddressUrl } from "./chain-utils";
+import { useSafe } from "./safe-ui";
 
 function Address({ displayName = null, address }) {
   const [popAnchor, setPopAnchor] = React.useState(null);
-
-  const handlePopoverOpen = (event) => {
-    setPopAnchor(event.currentTarget);
-  };
-
-  const handlePopoverClose = () => {
-    setPopAnchor(null);
-  };
+  const { chainId } = useSafe();
 
   const popOpen = Boolean(popAnchor);
+  const url = explorerAddressUrl(chainId, address);
 
   return (
     <>
       <Chip
         label={displayName || shortAddress(address)}
-        aria-owns={popOpen ? "mouse-over-popover" : undefined}
+        aria-owns={popOpen ? "address-popover" : undefined}
         aria-haspopup="true"
-        onClick={handlePopoverOpen}
+        onClick={(e) => setPopAnchor(e.currentTarget)}
+        onDelete={undefined}
+        variant="outlined"
       />
       <Popover
-        id="mouse-over-popover"
+        id="address-popover"
         open={popOpen}
         anchorEl={popAnchor}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-        onClose={handlePopoverClose}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+        onClose={() => setPopAnchor(null)}
         disableRestoreFocus
       >
-        <Typography sx={{ p: 1 }}>{address}</Typography>
+        <Typography sx={{ fontFamily: "monospace", fontSize: 12, wordBreak: "break-all" }}>
+          {url ? (
+            <Link
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              underline="hover"
+              sx={{ fontFamily: "monospace", fontSize: 12, wordBreak: "break-all" }}
+              onClick={() => setPopAnchor(null)}
+            >
+              {address}
+            </Link>
+          ) : (
+            address
+          )}
+        </Typography>
       </Popover>
     </>
   );

src/SearchPage.jsx

@@ -1,26 +1,18 @@
 import * as React from "react";
 import { Box, Stack, TextField, MenuItem, Button, Paper, Typography, Link } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
+
 import { useSafe } from "./safe-ui";
-import { getTransactionDetailsByKey } from "./safe-api";
+import { getChangesetAndSafeTxHashByKey, getSafeTransaction } from "./safe-api";
+import { chainPrefixFromId } from "./chain-utils";
+import TransactionCard from "./TransactionCard";
 
 const KEY_SEARCH = "tx-search";
 
-function chainPrefixFromId(chainId) {
-  switch (Number(chainId)) {
-    case 1:
-      return "eth";
-    case 137:
-      return "matic";
-    case 42161:
-      return "arb1";
-    default:
-      return String(chainId);
-  }
-}
-
 export default function SearchPage() {
-  const { chainId, safeAddress } = useSafe();
+  const safe = useSafe();
+  const { chainId, safeAddress } = safe;
+
   const [mode, setMode] = React.useState("safeTxHash");
   const [searchText, setSearchText] = React.useState("");
   const [submittedQuery, setSubmittedQuery] = React.useState(null);
@@ -33,16 +25,19 @@ export default function SearchPage() {
     enabled: hasSubmitted,
     queryFn: async () => {
       if (!submittedQuery) return null;
-      const changeset = await getTransactionDetailsByKey(
-        { chainId, safeAddress },
-        { type: submittedQuery.mode, key: submittedQuery.text.trim() }
-      );
-      const safeTxHash =
-        submittedQuery.mode === "safeTxHash"
-          ? submittedQuery.text.trim()
-          : changeset?.safeTxHash || changeset?.safe_tx_hash || submittedQuery.text.trim();
-      return { safeTxHash, changeset };
+
+      const base = await getChangesetAndSafeTxHashByKey(safe, {
+        type: submittedQuery.mode,
+        key: submittedQuery.text,
+      });
+
+      if (!base?.safeTxHash) return null;
+
+      const txMeta = await getSafeTransaction(safe, base.safeTxHash);
+
+      return { ...base, txMeta };
     },
+    refetchOnWindowFocus: false,
   });
 
   function onSubmit(e) {
@@ -56,6 +51,7 @@ export default function SearchPage() {
     ? `https://app.safe.global/transactions/tx?safe=${chainPrefix}:${safeAddress}`
     : null;
 
+  const isSearching = hasSubmitted && query.fetchStatus === "fetching";
   return (
     <Stack spacing={2}>
       <Paper variant="outlined" sx={{ p: 2 }}>
@@ -89,7 +85,7 @@ export default function SearchPage() {
         </Box>
       </Paper>
 
-      {hasSubmitted && query.fetchStatus === "fetching" && <Typography>Searching…</Typography>}
+      {isSearching && <Typography>Searching…</Typography>}
 
       {hasSubmitted && query.isError && (
         <Paper variant="outlined" sx={{ p: 2 }}>
@@ -112,13 +108,14 @@ export default function SearchPage() {
         </Paper>
       )}
 
-      {hasSubmitted && query.isSuccess && (
-        <Paper variant="outlined" sx={{ p: 2 }}>
-          <Typography variant="h6" gutterBottom>
-            Changeset for safeTxHash {query.data.safeTxHash}
-          </Typography>
-          <pre style={{ margin: 0, overflowX: "auto" }}>{JSON.stringify(query.data.changeset, null, 2)}</pre>
-        </Paper>
+      {!isSearching && hasSubmitted && query.isSuccess && query.data?.changeset && (
+        <TransactionCard
+          key={query.data.safeTxHash}
+          transaction={query.data.txMeta}
+          txDetails={query.data.changeset}
+          safeTxHash={query.data.safeTxHash}
+          readOnly
+        />
       )}
     </Stack>
   );