From f1ed219a4d7825f0c05e225aced5f3f2a5d5c8f9 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Thu, 13 Nov 2025 23:05:42 -0300
Subject: [PATCH 01/29] First visual update

---
 src/SearchPage.jsx      |  24 +-
 src/TransactionCard.jsx | 529 ++++++++++++++++++++++++++++++++++++----
 2 files changed, 492 insertions(+), 61 deletions(-)

diff --git a/src/SearchPage.jsx b/src/SearchPage.jsx
index deb48cf..72e21da 100644
--- a/src/SearchPage.jsx
+++ b/src/SearchPage.jsx
@@ -1,8 +1,11 @@
+// src/SearchPage.jsx
 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 { TransactionDetailsPanel } from "./TransactionCard";
 
 const KEY_SEARCH = "tx-search";
 
@@ -58,6 +61,7 @@ export default function SearchPage() {
 
   return (
     <Stack spacing={2}>
+      {/* Formulario de búsqueda */}
       <Paper variant="outlined" sx={{ p: 2 }}>
         <Box component="form" onSubmit={onSubmit}>
           <Stack direction="row" spacing={2}>
@@ -89,8 +93,10 @@ export default function SearchPage() {
         </Box>
       </Paper>
 
+      {/* Estado de carga */}
       {hasSubmitted && query.fetchStatus === "fetching" && <Typography>Searching…</Typography>}
 
+      {/* Errores (incluido 404 sin changeset) */}
       {hasSubmitted && query.isError && (
         <Paper variant="outlined" sx={{ p: 2 }}>
           {query.error?.status === 404 ? (
@@ -112,13 +118,17 @@ 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>
+      {/* Resultado: panel amigable reutilizando TransactionDetailsPanel */}
+      {hasSubmitted && query.isSuccess && query.data?.changeset && (
+        <TransactionDetailsPanel
+          txDetails={query.data.changeset}
+          safeTxHash={query.data.safeTxHash}
+          chainId={chainId}
+          safeAddress={safeAddress}
+          txKey={query.data.safeTxHash}
+          // En la búsqueda no tenemos address book cargado aquí
+          addressBook={undefined}
+        />
       )}
     </Stack>
   );
diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index f91492f..4b89292 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -1,7 +1,23 @@
 import React from "react";
 
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { Accordion, AccordionDetails, AccordionSummary, Grid, Paper, Stack, Typography } from "@mui/material";
+import LaunchIcon from "@mui/icons-material/Launch";
+
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Grid,
+  Paper,
+  Stack,
+  Typography,
+  Skeleton,
+  Box,
+  Chip,
+  Tooltip,
+  Button,
+  Collapse,
+} from "@mui/material";
 
 import { useQuery } from "@tanstack/react-query";
 
@@ -11,10 +27,348 @@ import { useWallet } from "./wallet";
 import { useSafe } from "./safe-ui";
 import WalletActionButton from "./WalletActionButton";
 
-function TransactionCard({ transaction, onConfirm, readOnly = false }) {
-  const txKey = transaction.safeTxHash || transaction.transactionHash || transaction.txHash;
+function chainPrefixFromId(chainId) {
+  switch (Number(chainId)) {
+    case 1:
+      return "eth";
+    case 137:
+      return "matic";
+    case 42161:
+      return "arb1";
+    default:
+      return String(chainId);
+  }
+}
+
+function truncateMiddle(str, visible = 6) {
+  if (!str) return "";
+  if (str.length <= visible * 2 + 3) return str;
+  return `${str.slice(0, visible)}…${str.slice(-visible)}`;
+}
+
+function buildSteps(txDetails) {
+  if (!txDetails) return [];
+
+  const batch = txDetails.batch;
+  if (batch && Array.isArray(batch.targets) && batch.targets.length) {
+    const targets = batch.targets || [];
+    const values = batch.values || [];
+    const payloads = batch.payloads || [];
+    const asArgs = batch.asArgs || [];
+
+    return targets.map((target, index) => {
+      const value = values[index];
+      const payload = payloads[index];
+      const args = asArgs[index];
+
+      return {
+        id: `batch-${index}`,
+        title: `Call #${index + 1}`,
+        to: target,
+        value,
+        token: null,
+        summary: payload ? `Calldata: ${truncateMiddle(payload, 10)}` : null,
+        rawArgs: args,
+      };
+    });
+  }
+
+  const rawSteps = Array.isArray(txDetails.steps) ? txDetails.steps : null;
+  if (rawSteps && rawSteps.length) return rawSteps;
+
+  const summary = txDetails.summary || null;
+  const description = txDetails.description || null;
+
+  const title = summary || description || "Transaction";
+
+  const to = txDetails.to || txDetails.target || null;
+  const value = txDetails.value ?? null;
+  const token = txDetails.tokenSymbol || (txDetails.token && txDetails.token.symbol) || null;
+
+  const bodySummary =
+    summary && summary !== title ? summary : description && description !== title ? description : null;
+
+  return [
+    {
+      id: "main",
+      title,
+      to,
+      value,
+      token,
+      summary: bodySummary,
+    },
+  ];
+}
+
+function StepItem({ index, step, addressBook }) {
+  const title = step.title || step.name || step.action || `Step ${index + 1}`;
+
+  const to = step.to || step.recipient || step.target || null;
+
+  const value = step.value ?? step.amount ?? null;
+  const token = step.token || step.tokenSymbol || step.asset || null;
+
+  const summary = step.summary || step.description || null;
+
+  const displayName = to && addressBook ? addressBook[to] : undefined;
+
+  return (
+    <Box
+      sx={{
+        mt: 0.5,
+        p: 1,
+        borderRadius: 1,
+        border: (theme) => `1px solid ${theme.palette.divider}`,
+        backgroundColor: "rgba(255,255,255,0.02)",
+      }}
+    >
+      <Stack direction="row" spacing={1.5} alignItems="flex-start">
+        <Box
+          sx={{
+            width: 24,
+            height: 24,
+            borderRadius: "50%",
+            border: (theme) => `1px solid ${theme.palette.primary.main}`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "0.75rem",
+            fontWeight: 600,
+            color: "primary.main",
+            flexShrink: 0,
+            mt: 0.25,
+          }}
+        >
+          {index + 1}
+        </Box>
+
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
+            {title}
+          </Typography>
+
+          {summary && (
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
+              {summary}
+            </Typography>
+          )}
+
+          <Stack spacing={0.25}>
+            {to && (
+              <Typography variant="caption" color="text.secondary">
+                To: <Address address={to} displayName={displayName} />
+              </Typography>
+            )}
+
+            {value != null && (
+              <Typography variant="caption" color="text.secondary">
+                Amount:{" "}
+                <Typography component="span" variant="caption" sx={{ fontFamily: "monospace" }}>
+                  {String(value)}
+                  {token ? ` ${token}` : ""}
+                </Typography>
+              </Typography>
+            )}
+          </Stack>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addressBook }) {
+  const [showRaw, setShowRaw] = React.useState(false);
+
+  const steps = buildSteps(txDetails);
+  const chainPrefix = chainPrefixFromId(chainId);
+  const baseSafeUrl =
+    chainPrefix && safeAddress ? `https://app.safe.global/transactions/tx?safe=${chainPrefix}:${safeAddress}` : null;
+
+  const safeIdParam = safeTxHash ? safeTxHash : txKey && safeAddress ? `multisig_${safeAddress}_${txKey}` : null;
+
+  const safeUrl = baseSafeUrl && safeIdParam ? `${baseSafeUrl}&id=${safeIdParam}` : null;
+
+  const networks = txDetails?.networks || txDetails?.network || null;
+  const via = txDetails?.via || null;
+  const timelock = txDetails?.timelock || null;
+  const contract = txDetails?.contract || null;
+
+  const viaAddress = via?.address;
+  const viaType = via?.type;
+  const viaDisplayName = viaAddress && addressBook ? addressBook[viaAddress] : undefined;
+
+  const timelockRelayAddress = timelock?.execution_relay?.address;
+  const timelockRelayDisplayName = timelockRelayAddress && addressBook ? addressBook[timelockRelayAddress] : undefined;
+
+  const contractTarget = contract?.target;
+  const contractTargetName = contractTarget && addressBook ? addressBook[contractTarget] : undefined;
+
+  const hasTimelockBadge =
+    !!timelock && ((timelock.delay && String(timelock.delay) !== "min") || !!timelock.execution_relay);
+
+  const titleDescription = txDetails?.description || "Multisig transaction";
+
+  return (
+    <Paper variant="outlined" sx={{ p: 2 }}>
+      <Typography variant="h6" sx={{ fontWeight: 600 }} gutterBottom>
+        {titleDescription}
+      </Typography>
+
+      <Typography variant="overline" color="text.secondary" sx={{ letterSpacing: 0.6, fontWeight: 600 }}>
+        Transaction details
+      </Typography>
+
+      {safeTxHash && (
+        <Box sx={{ mb: 1 }}>
+          <Typography variant="caption" color="text.secondary">
+            safeTxHash:{" "}
+            <Tooltip title={safeTxHash}>
+              <Box component="span" sx={{ fontFamily: "monospace" }}>
+                {truncateMiddle(safeTxHash, 8)}
+              </Box>
+            </Tooltip>
+          </Typography>
+        </Box>
+      )}
+
+      <Stack spacing={0.5} sx={{ mb: 1.5 }}>
+        {networks && (
+          <Stack direction="row" spacing={0.5} alignItems="center">
+            <Typography variant="caption" color="text.secondary">
+              Networks:
+            </Typography>
+            {Array.isArray(networks) ? (
+              networks.map((n) => (
+                <Chip
+                  key={n}
+                  size="small"
+                  label={String(n)}
+                  variant="outlined"
+                  sx={{ height: 20, fontSize: "0.7rem" }}
+                />
+              ))
+            ) : (
+              <Chip size="small" label={String(networks)} variant="outlined" sx={{ height: 20, fontSize: "0.7rem" }} />
+            )}
+          </Stack>
+        )}
+
+        {viaAddress && (
+          <Typography variant="caption" color="text.secondary">
+            Via ({viaType || "via"}): <Address address={viaAddress} displayName={viaDisplayName} />
+          </Typography>
+        )}
+
+        {timelock && (
+          <Stack direction="row" spacing={0.5} alignItems="center">
+            <Typography variant="caption" color="text.secondary">
+              Timelock: delay={String(timelock.delay || "n/a")}
+              {timelockRelayAddress && (
+                <>
+                  {" "}
+                  · relay: <Address address={timelockRelayAddress} displayName={timelockRelayDisplayName} />
+                </>
+              )}
+            </Typography>
+            {hasTimelockBadge && (
+              <Chip
+                size="small"
+                label="Timelocked"
+                color="warning"
+                variant="outlined"
+                sx={{ height: 20, fontSize: "0.7rem" }}
+              />
+            )}
+          </Stack>
+        )}
+
+        {contractTarget && (
+          <Typography variant="caption" color="text.secondary">
+            Contract target: <Address address={contractTarget} displayName={contractTargetName} />
+          </Typography>
+        )}
+      </Stack>
+
+      <Typography variant="overline" color="text.secondary" sx={{ letterSpacing: 0.6, fontWeight: 600 }}>
+        Steps
+      </Typography>
+
+      {steps.length ? (
+        <Stack spacing={1} sx={{ mt: 0.5 }}>
+          {steps.map((step, index) => (
+            <StepItem key={step.id || index} index={index} step={step} addressBook={addressBook} />
+          ))}
+        </Stack>
+      ) : (
+        <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+          No structured steps were provided for this transaction.
+        </Typography>
+      )}
+
+      <Stack direction="row" spacing={1} sx={{ mt: 1.5, mb: 1 }} alignItems="center" justifyContent="space-between">
+        <Box>
+          {safeUrl && (
+            <Button
+              size="small"
+              variant="outlined"
+              color="inherit"
+              component="a"
+              href={safeUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              endIcon={<LaunchIcon fontSize="small" />}
+            >
+              Open in Safe web app
+            </Button>
+          )}
+        </Box>
+
+        <Button size="small" variant="text" onClick={() => setShowRaw((v) => !v)}>
+          {showRaw ? "Hide raw JSON" : "Show raw JSON"}
+        </Button>
+      </Stack>
+
+      <Collapse in={showRaw} unmountOnExit>
+        <Box
+          component="pre"
+          sx={{
+            mt: 1,
+            maxHeight: 260,
+            overflow: "auto",
+            fontSize: "0.75rem",
+            backgroundColor: "rgba(255,255,255,0.02)",
+            borderRadius: 1,
+            p: 1,
+          }}
+        >
+          {JSON.stringify(txDetails, null, 2)}
+        </Box>
+      </Collapse>
+    </Paper>
+  );
+}
+
+function TransactionCard({
+  transaction,
+  onConfirm,
+  readOnly = false,
+  variant,
+  txDetails: txDetailsProp,
+  safeTxHash: safeTxHashProp,
+}) {
+  const hasTransaction = !!transaction;
+  const { curAccount } = useWallet();
+  const { owners, chainId, safeAddress } = useSafe();
+
+  const txKey = hasTransaction
+    ? transaction.safeTxHash || transaction.transactionHash || transaction.txHash
+    : safeTxHashProp;
+
+  const shouldFetchDetails = !txDetailsProp && hasTransaction && !!transaction.safeTxHash;
+
   const txDetailsResponse = useQuery({
     queryKey: [KEY_TRANSACTION_DETAILS, txKey],
+    enabled: shouldFetchDetails,
     queryFn: async () => getTransactionDetails(transaction.safeTxHash),
   });
 
@@ -23,26 +377,54 @@ function TransactionCard({ transaction, onConfirm, readOnly = false }) {
     queryFn: getAddressBook,
     staleTime: Infinity,
     gcTime: Infinity,
+    enabled: hasTransaction,
   });
 
-  const { curAccount } = useWallet();
-  const { owners, chainId, safeAddress } = useSafe();
+  const addressBook = addressBookResponse.data || {};
+  const txDetails = txDetailsProp || txDetailsResponse.data;
 
-  function chainPrefixFromId(chainId) {
-    switch (Number(chainId)) {
-      case 1:
-        return "eth";
-      case 137:
-        return "matic";
-      case 42161:
-        return "arb1";
-      default:
-        return String(chainId);
-    }
+  if (!hasTransaction || variant === "panel") {
+    if (!txDetails) return null;
+    return (
+      <DetailsPanel
+        txDetails={txDetails}
+        safeTxHash={safeTxHashProp}
+        chainId={chainId}
+        safeAddress={safeAddress}
+        txKey={txKey}
+        addressBook={addressBook}
+      />
+    );
+  }
+
+  if (shouldFetchDetails && txDetailsResponse.isPending) {
+    return (
+      <Accordion elevation={2}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Skeleton variant="text" width="60%" />
+        </AccordionSummary>
+        <AccordionDetails>
+          <Grid container spacing={2}>
+            <Grid item xs={8}>
+              <Paper variant="outlined" sx={{ p: 2 }}>
+                <Skeleton variant="text" width="80%" />
+                <Skeleton variant="text" width="40%" />
+                <Skeleton variant="text" width="60%" />
+              </Paper>
+            </Grid>
+            <Grid item xs={4}>
+              <Paper variant="outlined" sx={{ p: 2 }}>
+                <Skeleton variant="text" width="50%" />
+                <Skeleton variant="rectangular" height={80} />
+              </Paper>
+            </Grid>
+          </Grid>
+        </AccordionDetails>
+      </Accordion>
+    );
   }
 
-  if (txDetailsResponse.isPending) return <div>Loading...</div>;
-  if (txDetailsResponse.isError) {
+  if (shouldFetchDetails && txDetailsResponse.isError) {
     if (txDetailsResponse.error?.status === 404) {
       const chainPrefix = chainPrefixFromId(chainId);
       const safeIdPart = `multisig_${safeAddress}_${txKey}`;
@@ -54,8 +436,8 @@ function TransactionCard({ transaction, onConfirm, readOnly = false }) {
           </AccordionSummary>
           <AccordionDetails>
             <Grid container spacing={2}>
-              <Grid item size={12}>
-                <Paper variant="outlined" style={{ padding: 12 }}>
+              <Grid item xs={12}>
+                <Paper variant="outlined" sx={{ p: 2 }}>
                   <Typography color="text.secondary">
                     No changeset found for transaction{" "}
                     <a href={safeUrl} target="_blank" rel="noopener noreferrer">
@@ -69,12 +451,17 @@ function TransactionCard({ transaction, onConfirm, readOnly = false }) {
         </Accordion>
       );
     }
-    return <div>Error: {String(txDetailsResponse.error?.message || txDetailsResponse.error)}</div>;
+    return (
+      <Paper sx={{ p: 2 }} variant="outlined">
+        <Typography color="error">
+          Error: {String(txDetailsResponse.error?.message || txDetailsResponse.error)}
+        </Typography>
+      </Paper>
+    );
   }
 
-  const txDetails = txDetailsResponse.data;
-
-  const isOwner = owners.map((o) => o?.toLowerCase()).includes(curAccount);
+  const safeOwners = owners || [];
+  const isOwner = safeOwners.map((o) => o?.toLowerCase()).includes(curAccount);
   const alreadySigned = transaction.confirmations
     .map((c) => c.owner?.toLowerCase())
     .includes(curAccount?.toLowerCase());
@@ -84,14 +471,57 @@ function TransactionCard({ transaction, onConfirm, readOnly = false }) {
   return (
     <Accordion elevation={2}>
       <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
-        <Typography>
-          {txDetails.description} ({transaction.safeTxHash})
-        </Typography>
+        <Stack direction="row" spacing={2} sx={{ alignItems: "center", flex: 1, minWidth: 0 }}>
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography
+              sx={{
+                fontWeight: 600,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {txDetails?.description || "Multisig transaction"}
+            </Typography>
+            <Stack direction="row" spacing={1} sx={{ mt: 0.5 }} alignItems="center">
+              {transaction.safeTxHash && (
+                <Tooltip title={transaction.safeTxHash}>
+                  <Typography
+                    variant="caption"
+                    color="text.secondary"
+                    sx={{
+                      fontFamily: "monospace",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      maxWidth: 200,
+                    }}
+                  >
+                    {truncateMiddle(transaction.safeTxHash, 6)}
+                  </Typography>
+                </Tooltip>
+              )}
+              <Chip label={`Nonce ${transaction.nonce}`} size="small" variant="outlined" sx={{ fontSize: "0.7rem" }} />
+            </Stack>
+          </Box>
+
+          {!readOnly && (
+            <Box sx={{ ml: 1 }}>
+              <WalletActionButton
+                onClick={onConfirm}
+                disabled={!signEnabled}
+                style={{ marginBottom: "10px", width: "100%" }}
+              >
+                {isOwner ? "Approve" : "Switch to an owner account"}
+              </WalletActionButton>
+            </Box>
+          )}
+        </Stack>
       </AccordionSummary>
       <AccordionDetails>
         <Grid container spacing={2}>
-          <Grid item size={8}>
-            <Paper style={{ height: "100%" }} variant="outlined">
+          <Grid item xs={8}>
+            <Paper sx={{ height: "100%", p: 2 }} variant="outlined">
               <Typography>
                 Nonce: {transaction.nonce} <br />
                 Confirmations: {`${transaction.confirmations?.length}/${transaction.confirmationsRequired}`} <br />
@@ -99,43 +529,34 @@ function TransactionCard({ transaction, onConfirm, readOnly = false }) {
               </Typography>
             </Paper>
           </Grid>
-          <Grid item container size={4}>
-            <Paper style={{ height: "100%", width: "100%" }} variant="outlined">
+
+          <Grid item xs={4}>
+            <Paper sx={{ height: "100%", width: "100%", p: 2 }} variant="outlined">
               <Grid container spacing={2}>
-                <Grid item size={12}>
+                <Grid item xs={12}>
                   <Typography variant="h6">Signers</Typography>
                 </Grid>
-                <Grid item size={12} sx={{ margin: "0 10%" }}>
+                <Grid item xs={12} sx={{ margin: "0 10%" }}>
                   <Stack direction="column" spacing={1}>
                     {transaction.confirmations.length === 0 && <Typography>No signatures yet</Typography>}
                     {transaction.confirmations.map((signer) => (
-                      <Address
-                        key={signer.owner}
-                        address={signer.owner}
-                        displayName={addressBookResponse.data?.[signer.owner]}
-                      />
+                      <Address key={signer.owner} address={signer.owner} displayName={addressBook[signer.owner]} />
                     ))}
                   </Stack>
                 </Grid>
-                {!readOnly && (
-                  <Grid item container size={12} justifyContent="center">
-                    <WalletActionButton
-                      onClick={onConfirm}
-                      disabled={!signEnabled}
-                      style={{ marginBottom: "10px", width: "90%" }}
-                    >
-                      {isOwner ? "Approve" : "Switch to an owner account"}
-                    </WalletActionButton>
-                  </Grid>
-                )}
               </Grid>
             </Paper>
           </Grid>
-          <Grid item size={12}>
-            <Paper variant="outlined">
-              <Typography variant="h6">Transaction Details</Typography>
-              <pre>{txDetails.original_yaml}</pre>
-            </Paper>
+
+          <Grid item xs={12}>
+            <DetailsPanel
+              txDetails={txDetails}
+              safeTxHash={transaction.safeTxHash}
+              chainId={chainId}
+              safeAddress={safeAddress}
+              txKey={txKey}
+              addressBook={addressBook}
+            />
           </Grid>
         </Grid>
       </AccordionDetails>

From 6c575c433370e63c5d17df797d48a87e9282d410 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Thu, 13 Nov 2025 23:07:53 -0300
Subject: [PATCH 02/29] Search Page updated

---
 src/SearchPage.jsx | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/SearchPage.jsx b/src/SearchPage.jsx
index 72e21da..d7d7d81 100644
--- a/src/SearchPage.jsx
+++ b/src/SearchPage.jsx
@@ -1,11 +1,10 @@
-// src/SearchPage.jsx
 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 { TransactionDetailsPanel } from "./TransactionCard";
+import TransactionCard from "./TransactionCard";
 
 const KEY_SEARCH = "tx-search";
 
@@ -61,7 +60,6 @@ export default function SearchPage() {
 
   return (
     <Stack spacing={2}>
-      {/* Formulario de búsqueda */}
       <Paper variant="outlined" sx={{ p: 2 }}>
         <Box component="form" onSubmit={onSubmit}>
           <Stack direction="row" spacing={2}>
@@ -93,10 +91,8 @@ export default function SearchPage() {
         </Box>
       </Paper>
 
-      {/* Estado de carga */}
       {hasSubmitted && query.fetchStatus === "fetching" && <Typography>Searching…</Typography>}
 
-      {/* Errores (incluido 404 sin changeset) */}
       {hasSubmitted && query.isError && (
         <Paper variant="outlined" sx={{ p: 2 }}>
           {query.error?.status === 404 ? (
@@ -118,17 +114,8 @@ export default function SearchPage() {
         </Paper>
       )}
 
-      {/* Resultado: panel amigable reutilizando TransactionDetailsPanel */}
       {hasSubmitted && query.isSuccess && query.data?.changeset && (
-        <TransactionDetailsPanel
-          txDetails={query.data.changeset}
-          safeTxHash={query.data.safeTxHash}
-          chainId={chainId}
-          safeAddress={safeAddress}
-          txKey={query.data.safeTxHash}
-          // En la búsqueda no tenemos address book cargado aquí
-          addressBook={undefined}
-        />
+        <TransactionCard txDetails={query.data.changeset} safeTxHash={query.data.safeTxHash} readOnly />
       )}
     </Stack>
   );

From 52d3c60976c6b02dfbdb4db6519ece2ed8411d3d Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Fri, 14 Nov 2025 16:06:27 -0300
Subject: [PATCH 03/29] Fix elements distribution

---
 src/TransactionCard.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 4b89292..fda6d15 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -405,14 +405,14 @@ function TransactionCard({
         </AccordionSummary>
         <AccordionDetails>
           <Grid container spacing={2}>
-            <Grid item xs={8}>
+            <Grid item xs={12} md={8}>
               <Paper variant="outlined" sx={{ p: 2 }}>
                 <Skeleton variant="text" width="80%" />
                 <Skeleton variant="text" width="40%" />
                 <Skeleton variant="text" width="60%" />
               </Paper>
             </Grid>
-            <Grid item xs={4}>
+            <Grid item xs={12} md={4}>
               <Paper variant="outlined" sx={{ p: 2 }}>
                 <Skeleton variant="text" width="50%" />
                 <Skeleton variant="rectangular" height={80} />
@@ -520,7 +520,7 @@ function TransactionCard({
       </AccordionSummary>
       <AccordionDetails>
         <Grid container spacing={2}>
-          <Grid item xs={8}>
+          <Grid item xs={12} md={8}>
             <Paper sx={{ height: "100%", p: 2 }} variant="outlined">
               <Typography>
                 Nonce: {transaction.nonce} <br />
@@ -530,7 +530,7 @@ function TransactionCard({
             </Paper>
           </Grid>
 
-          <Grid item xs={4}>
+          <Grid item xs={12} md={4}>
             <Paper sx={{ height: "100%", width: "100%", p: 2 }} variant="outlined">
               <Grid container spacing={2}>
                 <Grid item xs={12}>

From 61a69c5ae3263f1b73578501cc42fb2f4abdc82b Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Fri, 14 Nov 2025 18:29:43 -0300
Subject: [PATCH 04/29] Update resume row

---
 src/TransactionCard.jsx | 112 ++++++++++++++++++++--------------------
 1 file changed, 57 insertions(+), 55 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index fda6d15..46319d9 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -102,14 +102,10 @@ function buildSteps(txDetails) {
 
 function StepItem({ index, step, addressBook }) {
   const title = step.title || step.name || step.action || `Step ${index + 1}`;
-
   const to = step.to || step.recipient || step.target || null;
-
   const value = step.value ?? step.amount ?? null;
   const token = step.token || step.tokenSymbol || step.asset || null;
-
   const summary = step.summary || step.description || null;
-
   const displayName = to && addressBook ? addressBook[to] : undefined;
 
   return (
@@ -185,7 +181,6 @@ function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addr
     chainPrefix && safeAddress ? `https://app.safe.global/transactions/tx?safe=${chainPrefix}:${safeAddress}` : null;
 
   const safeIdParam = safeTxHash ? safeTxHash : txKey && safeAddress ? `multisig_${safeAddress}_${txKey}` : null;
-
   const safeUrl = baseSafeUrl && safeIdParam ? `${baseSafeUrl}&id=${safeIdParam}` : null;
 
   const networks = txDetails?.networks || txDetails?.network || null;
@@ -404,21 +399,28 @@ function TransactionCard({
           <Skeleton variant="text" width="60%" />
         </AccordionSummary>
         <AccordionDetails>
-          <Grid container spacing={2}>
-            <Grid item xs={12} md={8}>
-              <Paper variant="outlined" sx={{ p: 2 }}>
-                <Skeleton variant="text" width="80%" />
-                <Skeleton variant="text" width="40%" />
-                <Skeleton variant="text" width="60%" />
-              </Paper>
-            </Grid>
-            <Grid item xs={12} md={4}>
-              <Paper variant="outlined" sx={{ p: 2 }}>
-                <Skeleton variant="text" width="50%" />
-                <Skeleton variant="rectangular" height={80} />
-              </Paper>
+          <Stack spacing={2}>
+            <Grid container spacing={2}>
+              <Grid item xs={12} md={8}>
+                <Paper variant="outlined" sx={{ p: 2 }}>
+                  <Skeleton variant="text" width="80%" />
+                  <Skeleton variant="text" width="40%" />
+                  <Skeleton variant="text" width="60%" />
+                </Paper>
+              </Grid>
+              <Grid item xs={12} md={4}>
+                <Paper variant="outlined" sx={{ p: 2 }}>
+                  <Skeleton variant="text" width="50%" />
+                  <Skeleton variant="rectangular" height={80} />
+                </Paper>
+              </Grid>
             </Grid>
-          </Grid>
+
+            <Paper variant="outlined" sx={{ p: 2 }}>
+              <Skeleton variant="text" width="30%" />
+              <Skeleton variant="rectangular" height={120} sx={{ mt: 1 }} />
+            </Paper>
+          </Stack>
         </AccordionDetails>
       </Accordion>
     );
@@ -519,46 +521,46 @@ function TransactionCard({
         </Stack>
       </AccordionSummary>
       <AccordionDetails>
-        <Grid container spacing={2}>
-          <Grid item xs={12} md={8}>
-            <Paper sx={{ height: "100%", p: 2 }} variant="outlined">
-              <Typography>
-                Nonce: {transaction.nonce} <br />
-                Confirmations: {`${transaction.confirmations?.length}/${transaction.confirmationsRequired}`} <br />
-                Modified: {transaction.modified}
-              </Typography>
-            </Paper>
-          </Grid>
+        <Stack spacing={2}>
+          <Grid container spacing={2}>
+            <Grid item xs={12} md={8}>
+              <Paper sx={{ height: "100%", p: 2 }} variant="outlined">
+                <Typography>
+                  Nonce: {transaction.nonce} <br />
+                  Confirmations: {`${transaction.confirmations?.length}/${transaction.confirmationsRequired}`} <br />
+                  Modified: {transaction.modified}
+                </Typography>
+              </Paper>
+            </Grid>
 
-          <Grid item xs={12} md={4}>
-            <Paper sx={{ height: "100%", width: "100%", p: 2 }} variant="outlined">
-              <Grid container spacing={2}>
-                <Grid item xs={12}>
-                  <Typography variant="h6">Signers</Typography>
-                </Grid>
-                <Grid item xs={12} sx={{ margin: "0 10%" }}>
-                  <Stack direction="column" spacing={1}>
-                    {transaction.confirmations.length === 0 && <Typography>No signatures yet</Typography>}
-                    {transaction.confirmations.map((signer) => (
-                      <Address key={signer.owner} address={signer.owner} displayName={addressBook[signer.owner]} />
-                    ))}
-                  </Stack>
+            <Grid item xs={12} md={4}>
+              <Paper sx={{ height: "100%", width: "100%", p: 2 }} variant="outlined">
+                <Grid container spacing={2}>
+                  <Grid item xs={12}>
+                    <Typography variant="h6">Signers</Typography>
+                  </Grid>
+                  <Grid item xs={12} sx={{ margin: "0 10%" }}>
+                    <Stack direction="column" spacing={1}>
+                      {transaction.confirmations.length === 0 && <Typography>No signatures yet</Typography>}
+                      {transaction.confirmations.map((signer) => (
+                        <Address key={signer.owner} address={signer.owner} displayName={addressBook[signer.owner]} />
+                      ))}
+                    </Stack>
+                  </Grid>
                 </Grid>
-              </Grid>
-            </Paper>
+              </Paper>
+            </Grid>
           </Grid>
 
-          <Grid item xs={12}>
-            <DetailsPanel
-              txDetails={txDetails}
-              safeTxHash={transaction.safeTxHash}
-              chainId={chainId}
-              safeAddress={safeAddress}
-              txKey={txKey}
-              addressBook={addressBook}
-            />
-          </Grid>
-        </Grid>
+          <DetailsPanel
+            txDetails={txDetails}
+            safeTxHash={transaction.safeTxHash}
+            chainId={chainId}
+            safeAddress={safeAddress}
+            txKey={txKey}
+            addressBook={addressBook}
+          />
+        </Stack>
       </AccordionDetails>
     </Accordion>
   );

From 7e18efbbce7e991c1958c5867bc472163d923d79 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Fri, 14 Nov 2025 19:17:46 -0300
Subject: [PATCH 05/29] Deleted scroll on raw JSON

---
 src/TransactionCard.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 46319d9..e30a898 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -328,12 +328,12 @@ function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addr
           component="pre"
           sx={{
             mt: 1,
-            maxHeight: 260,
-            overflow: "auto",
             fontSize: "0.75rem",
             backgroundColor: "rgba(255,255,255,0.02)",
             borderRadius: 1,
-            p: 1,
+            p: 1.5,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
           }}
         >
           {JSON.stringify(txDetails, null, 2)}

From af55ebcaffd083545cfd5ce9f20733e76e46c710 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Wed, 19 Nov 2025 16:59:06 -0300
Subject: [PATCH 06/29] Some visual fixes and button functions

---
 src/TransactionCard.jsx | 210 ++++++++++++++++++++++++++++++++++------
 1 file changed, 179 insertions(+), 31 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 0763140..b1fa9ee 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -46,6 +46,63 @@ function truncateMiddle(str, visible = 6) {
   return `${str.slice(0, visible)}…${str.slice(-visible)}`;
 }
 
+function formatScalarForYaml(v) {
+  if (v === null) return "null";
+  if (typeof v === "boolean") return v ? "true" : "false";
+  if (typeof v === "number") return String(v);
+  if (typeof v === "string") {
+    if (v === "" || /\s/.test(v) || /[:{}[\],&*#?|<>=!%@`]/.test(v)) {
+      const escaped = v.replace(/"/g, '\\"');
+      return `"${escaped}"`;
+    }
+    return v;
+  }
+  return String(v);
+}
+
+function jsonToYaml(value, indent = 0) {
+  const ind = "  ".repeat(indent);
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) return ind + "[]";
+    return value
+      .map((item) => {
+        if (item && typeof item === "object") {
+          const child = jsonToYaml(item, indent + 1);
+          const lines = child.split("\n");
+          const [first, ...rest] = lines;
+          let out = `${ind}- ${first.trimStart()}`;
+          if (rest.length) {
+            out += "\n" + rest.map((l) => (l.startsWith("  ") ? ind + l : ind + "  " + l.trimStart())).join("\n");
+          }
+          return out;
+        }
+        return `${ind}- ${formatScalarForYaml(item)}`;
+      })
+      .join("\n");
+  }
+
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value);
+    if (!entries.length) return ind + "{}";
+    return entries
+      .map(([k, v]) => {
+        if (v && typeof v === "object") {
+          const child = jsonToYaml(v, indent + 1);
+          const lines = child.split("\n");
+          if (lines.length === 1 && !Array.isArray(v)) {
+            return `${ind}${k}: ${lines[0].trim()}`;
+          }
+          return `${ind}${k}:\n${child}`;
+        }
+        return `${ind}${k}: ${formatScalarForYaml(v)}`;
+      })
+      .join("\n");
+  }
+
+  return ind + formatScalarForYaml(value);
+}
+
 function buildSteps(txDetails) {
   if (!txDetails) return [];
 
@@ -60,6 +117,19 @@ function buildSteps(txDetails) {
       const value = values[index];
       const payload = payloads[index];
       const args = asArgs[index];
+      let method = null;
+      if (args && typeof args === "object") {
+        method =
+          args.method ||
+          args.function ||
+          args.fn ||
+          args.name ||
+          args.selector ||
+          args.signature ||
+          args.contractMethod ||
+          args.contract_method ||
+          null;
+      }
 
       return {
         id: `batch-${index}`,
@@ -69,6 +139,7 @@ function buildSteps(txDetails) {
         token: null,
         summary: payload ? `Calldata: ${truncateMiddle(payload, 10)}` : null,
         rawArgs: args,
+        method,
       };
     });
   }
@@ -108,6 +179,26 @@ function StepItem({ index, step, addressBook }) {
   const summary = step.summary || step.description || null;
   const displayName = to && addressBook ? addressBook[to] : undefined;
 
+  const method =
+    step.method ||
+    step.function ||
+    step.functionName ||
+    step.selector ||
+    step.signature ||
+    step.contractMethod ||
+    step.contract_method ||
+    (step.rawArgs && typeof step.rawArgs === "object"
+      ? step.rawArgs.method ||
+        step.rawArgs.function ||
+        step.rawArgs.fn ||
+        step.rawArgs.name ||
+        step.rawArgs.selector ||
+        step.rawArgs.signature
+      : null);
+
+  const args =
+    step.rawArgs ?? step.args ?? step.parameters ?? step.params ?? step.contractArgs ?? step.contract_args ?? null;
+
   return (
     <Box
       sx={{
@@ -156,6 +247,15 @@ function StepItem({ index, step, addressBook }) {
               </Typography>
             )}
 
+            {method && (
+              <Typography variant="caption" color="text.secondary">
+                Method:{" "}
+                <Typography component="span" variant="caption" sx={{ fontFamily: "monospace" }}>
+                  {String(method)}
+                </Typography>
+              </Typography>
+            )}
+
             {value != null && (
               <Typography variant="caption" color="text.secondary">
                 Amount:{" "}
@@ -165,6 +265,24 @@ function StepItem({ index, step, addressBook }) {
                 </Typography>
               </Typography>
             )}
+
+            {args != null && (
+              <Box
+                component="pre"
+                sx={{
+                  mt: 0.5,
+                  fontSize: "0.7rem",
+                  fontFamily: "monospace",
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word",
+                  backgroundColor: "rgba(255,255,255,0.02)",
+                  borderRadius: 1,
+                  p: 1,
+                }}
+              >
+                {typeof args === "string" ? args : JSON.stringify(args, null, 2)}
+              </Box>
+            )}
           </Stack>
         </Box>
       </Stack>
@@ -173,7 +291,8 @@ function StepItem({ index, step, addressBook }) {
 }
 
 function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addressBook }) {
-  const [showRaw, setShowRaw] = React.useState(false);
+  const [showYaml, setShowYaml] = React.useState(false);
+  const [showJson, setShowJson] = React.useState(false);
 
   const steps = buildSteps(txDetails);
   const chainPrefix = chainPrefixFromId(chainId);
@@ -203,6 +322,9 @@ function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addr
 
   const titleDescription = txDetails?.description || "Multisig transaction";
 
+  const rawYaml = jsonToYaml(txDetails || {});
+  const rawJson = JSON.stringify(txDetails || {}, null, 2);
+
   return (
     <Paper variant="outlined" sx={{ p: 2 }}>
       <Typography variant="h6" sx={{ fontWeight: 600 }} gutterBottom>
@@ -217,11 +339,9 @@ function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addr
         <Box sx={{ mb: 1 }}>
           <Typography variant="caption" color="text.secondary">
             safeTxHash:{" "}
-            <Tooltip title={safeTxHash}>
-              <Box component="span" sx={{ fontFamily: "monospace" }}>
-                {truncateMiddle(safeTxHash, 8)}
-              </Box>
-            </Tooltip>
+            <Box component="span" sx={{ fontFamily: "monospace", wordBreak: "break-all" }}>
+              {safeTxHash}
+            </Box>
           </Typography>
         </Box>
       )}
@@ -318,12 +438,35 @@ function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addr
           )}
         </Box>
 
-        <Button size="small" variant="text" onClick={() => setShowRaw((v) => !v)}>
-          {showRaw ? "Hide raw JSON" : "Show raw JSON"}
-        </Button>
+        <Stack direction="row" spacing={1}>
+          <Button size="small" variant={showYaml ? "contained" : "outlined"} onClick={() => setShowYaml((v) => !v)}>
+            YAML
+          </Button>
+          <Button size="small" variant={showJson ? "contained" : "outlined"} onClick={() => setShowJson((v) => !v)}>
+            JSON
+          </Button>
+        </Stack>
       </Stack>
 
-      <Collapse in={showRaw} unmountOnExit>
+      <Collapse in={showYaml} unmountOnExit>
+        <Box
+          component="pre"
+          sx={{
+            mt: 1,
+            fontSize: "0.75rem",
+            backgroundColor: "rgba(255,255,255,0.02)",
+            borderRadius: 1,
+            p: 1.5,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            fontFamily: "monospace",
+          }}
+        >
+          {rawYaml}
+        </Box>
+      </Collapse>
+
+      <Collapse in={showJson} unmountOnExit>
         <Box
           component="pre"
           sx={{
@@ -334,9 +477,10 @@ function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addr
             p: 1.5,
             whiteSpace: "pre-wrap",
             wordBreak: "break-word",
+            fontFamily: "monospace",
           }}
         >
-          {JSON.stringify(txDetails, null, 2)}
+          {rawJson}
         </Box>
       </Collapse>
     </Paper>
@@ -382,6 +526,15 @@ function TransactionCard({
   const addressBook = addressBookResponse.data || {};
   const txDetails = txDetailsProp || txDetailsResponse.data;
 
+  const handleApproveClick = React.useCallback(
+    (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      if (onConfirm) onConfirm();
+    },
+    [onConfirm]
+  );
+
   if (!hasTransaction || variant === "panel") {
     if (!txDetails) return null;
     return (
@@ -405,14 +558,14 @@ function TransactionCard({
         <AccordionDetails>
           <Stack spacing={2}>
             <Grid container spacing={2}>
-              <Grid item xs={12} md={8}>
+              <Grid item xs={12} md={6}>
                 <Paper variant="outlined" sx={{ p: 2 }}>
                   <Skeleton variant="text" width="80%" />
                   <Skeleton variant="text" width="40%" />
                   <Skeleton variant="text" width="60%" />
                 </Paper>
               </Grid>
-              <Grid item xs={12} md={4}>
+              <Grid item xs={12} md={6}>
                 <Paper variant="outlined" sx={{ p: 2 }}>
                   <Skeleton variant="text" width="50%" />
                   <Skeleton variant="rectangular" height={80} />
@@ -491,21 +644,16 @@ function TransactionCard({
             </Typography>
             <Stack direction="row" spacing={1} sx={{ mt: 0.5 }} alignItems="center">
               {transaction.safeTxHash && (
-                <Tooltip title={transaction.safeTxHash}>
-                  <Typography
-                    variant="caption"
-                    color="text.secondary"
-                    sx={{
-                      fontFamily: "monospace",
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      maxWidth: 200,
-                    }}
-                  >
-                    {truncateMiddle(transaction.safeTxHash, 6)}
-                  </Typography>
-                </Tooltip>
+                <Typography
+                  variant="caption"
+                  color="text.secondary"
+                  sx={{
+                    fontFamily: "monospace",
+                    wordBreak: "break-all",
+                  }}
+                >
+                  {transaction.safeTxHash}
+                </Typography>
               )}
               <Chip label={`Nonce ${transaction.nonce}`} size="small" variant="outlined" sx={{ fontSize: "0.7rem" }} />
             </Stack>
@@ -514,7 +662,7 @@ function TransactionCard({
           {!readOnly && (
             <Box sx={{ ml: 1 }}>
               <WalletActionButton
-                onClick={onConfirm}
+                onClick={handleApproveClick}
                 disabled={!signEnabled}
                 style={{ marginBottom: "10px", width: "100%" }}
               >
@@ -527,7 +675,7 @@ function TransactionCard({
       <AccordionDetails>
         <Stack spacing={2}>
           <Grid container spacing={2}>
-            <Grid item xs={12} md={8}>
+            <Grid item xs={12} md={6}>
               <Paper sx={{ height: "100%", p: 2 }} variant="outlined">
                 <Typography>
                   Nonce: {transaction.nonce} <br />
@@ -537,7 +685,7 @@ function TransactionCard({
               </Paper>
             </Grid>
 
-            <Grid item xs={12} md={4}>
+            <Grid item xs={12} md={6}>
               <Paper sx={{ height: "100%", width: "100%", p: 2 }} variant="outlined">
                 <Grid container spacing={2}>
                   <Grid item xs={12}>

From a03b300516aca79662f7aba7baa4f08892792fdc Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Wed, 19 Nov 2025 17:44:40 -0300
Subject: [PATCH 07/29] Reorganized details panel & information y transaction
 card

---
 src/TransactionCard.jsx | 298 ++++++++++++++++++++--------------------
 1 file changed, 149 insertions(+), 149 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index b1fa9ee..9e12409 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -7,14 +7,12 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Grid,
   Paper,
   Stack,
   Typography,
   Skeleton,
   Box,
   Chip,
-  Tooltip,
   Button,
   Collapse,
 } from "@mui/material";
@@ -46,63 +44,6 @@ function truncateMiddle(str, visible = 6) {
   return `${str.slice(0, visible)}…${str.slice(-visible)}`;
 }
 
-function formatScalarForYaml(v) {
-  if (v === null) return "null";
-  if (typeof v === "boolean") return v ? "true" : "false";
-  if (typeof v === "number") return String(v);
-  if (typeof v === "string") {
-    if (v === "" || /\s/.test(v) || /[:{}[\],&*#?|<>=!%@`]/.test(v)) {
-      const escaped = v.replace(/"/g, '\\"');
-      return `"${escaped}"`;
-    }
-    return v;
-  }
-  return String(v);
-}
-
-function jsonToYaml(value, indent = 0) {
-  const ind = "  ".repeat(indent);
-
-  if (Array.isArray(value)) {
-    if (value.length === 0) return ind + "[]";
-    return value
-      .map((item) => {
-        if (item && typeof item === "object") {
-          const child = jsonToYaml(item, indent + 1);
-          const lines = child.split("\n");
-          const [first, ...rest] = lines;
-          let out = `${ind}- ${first.trimStart()}`;
-          if (rest.length) {
-            out += "\n" + rest.map((l) => (l.startsWith("  ") ? ind + l : ind + "  " + l.trimStart())).join("\n");
-          }
-          return out;
-        }
-        return `${ind}- ${formatScalarForYaml(item)}`;
-      })
-      .join("\n");
-  }
-
-  if (value && typeof value === "object") {
-    const entries = Object.entries(value);
-    if (!entries.length) return ind + "{}";
-    return entries
-      .map(([k, v]) => {
-        if (v && typeof v === "object") {
-          const child = jsonToYaml(v, indent + 1);
-          const lines = child.split("\n");
-          if (lines.length === 1 && !Array.isArray(v)) {
-            return `${ind}${k}: ${lines[0].trim()}`;
-          }
-          return `${ind}${k}:\n${child}`;
-        }
-        return `${ind}${k}: ${formatScalarForYaml(v)}`;
-      })
-      .join("\n");
-  }
-
-  return ind + formatScalarForYaml(value);
-}
-
 function buildSteps(txDetails) {
   if (!txDetails) return [];
 
@@ -171,7 +112,7 @@ function buildSteps(txDetails) {
   ];
 }
 
-function StepItem({ index, step, addressBook }) {
+function StepItem({ index, step, addressBook, addresses }) {
   const title = step.title || step.name || step.action || `Step ${index + 1}`;
   const to = step.to || step.recipient || step.target || null;
   const value = step.value ?? step.amount ?? null;
@@ -199,6 +140,17 @@ function StepItem({ index, step, addressBook }) {
   const args =
     step.rawArgs ?? step.args ?? step.parameters ?? step.params ?? step.contractArgs ?? step.contract_args ?? null;
 
+  const contractAddressKey = step.contract_address_key || step.contractAddressKey || null;
+  const contractType = step.contract_type || step.contractType || null;
+
+  const contractTarget = (step.contract && step.contract.target) || step.contract_target || null;
+  const resolvedContractAddress =
+    contractTarget || (contractAddressKey && addresses && addresses[contractAddressKey]) || null;
+  const resolvedContractName =
+    resolvedContractAddress && addressBook ? addressBook[resolvedContractAddress] : undefined;
+
+  const parsedArgs = step.parsedArguments || step.parsed_args || null;
+
   return (
     <Box
       sx={{
@@ -247,6 +199,22 @@ function StepItem({ index, step, addressBook }) {
               </Typography>
             )}
 
+            {contractAddressKey && (
+              <Typography variant="caption" color="text.secondary">
+                Contract key:{" "}
+                <Typography component="span" variant="caption" sx={{ fontFamily: "monospace" }}>
+                  {contractAddressKey}
+                  {contractType ? ` (${contractType})` : ""}
+                </Typography>
+              </Typography>
+            )}
+
+            {resolvedContractAddress && (
+              <Typography variant="caption" color="text.secondary">
+                Contract addr: <Address address={resolvedContractAddress} displayName={resolvedContractName} />
+              </Typography>
+            )}
+
             {method && (
               <Typography variant="caption" color="text.secondary">
                 Method:{" "}
@@ -283,6 +251,24 @@ function StepItem({ index, step, addressBook }) {
                 {typeof args === "string" ? args : JSON.stringify(args, null, 2)}
               </Box>
             )}
+
+            {parsedArgs != null && (
+              <Box
+                component="pre"
+                sx={{
+                  mt: 0.5,
+                  fontSize: "0.7rem",
+                  fontFamily: "monospace",
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word",
+                  backgroundColor: "rgba(255,255,255,0.02)",
+                  borderRadius: 1,
+                  p: 1,
+                }}
+              >
+                {typeof parsedArgs === "string" ? parsedArgs : JSON.stringify(parsedArgs, null, 2)}
+              </Box>
+            )}
           </Stack>
         </Box>
       </Stack>
@@ -290,7 +276,7 @@ function StepItem({ index, step, addressBook }) {
   );
 }
 
-function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addressBook }) {
+function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress, txKey, addressBook }) {
   const [showYaml, setShowYaml] = React.useState(false);
   const [showJson, setShowJson] = React.useState(false);
 
@@ -320,33 +306,58 @@ function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addr
   const hasTimelockBadge =
     !!timelock && ((timelock.delay && String(timelock.delay) !== "min") || !!timelock.execution_relay);
 
-  const titleDescription = txDetails?.description || "Multisig transaction";
-
-  const rawYaml = jsonToYaml(txDetails || {});
+  const rawYaml = txDetails?.original_yaml || "";
   const rawJson = JSON.stringify(txDetails || {}, null, 2);
 
-  return (
-    <Paper variant="outlined" sx={{ p: 2 }}>
-      <Typography variant="h6" sx={{ fontWeight: 600 }} gutterBottom>
-        {titleDescription}
-      </Typography>
+  const showTxMeta = Boolean(transaction);
+
+  const confirmationsCount = transaction?.confirmations?.length ?? 0;
+  const confirmationsRequired = transaction?.confirmationsRequired ?? null;
+
+  const signers = Array.isArray(transaction?.confirmations) ? transaction.confirmations : [];
 
+  return (
+    <Paper
+      variant="outlined"
+      sx={{
+        p: 2,
+        mx: "auto",
+      }}
+    >
       <Typography variant="overline" color="text.secondary" sx={{ letterSpacing: 0.6, fontWeight: 600 }}>
         Transaction details
       </Typography>
 
-      {safeTxHash && (
-        <Box sx={{ mb: 1 }}>
-          <Typography variant="caption" color="text.secondary">
-            safeTxHash:{" "}
-            <Box component="span" sx={{ fontFamily: "monospace", wordBreak: "break-all" }}>
-              {safeTxHash}
-            </Box>
-          </Typography>
-        </Box>
-      )}
+      <Stack spacing={0.5} sx={{ mb: 1.5, mt: 0.5 }}>
+        {showTxMeta && (
+          <>
+            <Typography variant="caption" color="text.secondary">
+              Nonce:{" "}
+              <Typography component="span" variant="caption" sx={{ fontFamily: "monospace" }}>
+                {transaction.nonce}
+              </Typography>
+            </Typography>
+
+            <Typography variant="caption" color="text.secondary">
+              Confirmations:{" "}
+              <Typography component="span" variant="caption" sx={{ fontFamily: "monospace" }}>
+                {confirmationsRequired != null
+                  ? `${confirmationsCount}/${confirmationsRequired}`
+                  : String(confirmationsCount)}
+              </Typography>
+            </Typography>
+
+            {transaction.modified && (
+              <Typography variant="caption" color="text.secondary">
+                Modified:{" "}
+                <Typography component="span" variant="caption" sx={{ fontFamily: "monospace" }}>
+                  {transaction.modified}
+                </Typography>
+              </Typography>
+            )}
+          </>
+        )}
 
-      <Stack spacing={0.5} sx={{ mb: 1.5 }}>
         {networks && (
           <Stack direction="row" spacing={0.5} alignItems="center">
             <Typography variant="caption" color="text.secondary">
@@ -377,7 +388,10 @@ function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addr
         {timelock && (
           <Stack direction="row" spacing={0.5} alignItems="center">
             <Typography variant="caption" color="text.secondary">
-              Timelock: delay={String(timelock.delay || "n/a")}
+              Timelock: delay:{" "}
+              <Typography component="span" variant="caption" sx={{ fontFamily: "monospace" }}>
+                {String(timelock.delay)}
+              </Typography>
               {timelockRelayAddress && (
                 <>
                   {" "}
@@ -402,6 +416,30 @@ function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addr
             Contract target: <Address address={contractTarget} displayName={contractTargetName} />
           </Typography>
         )}
+
+        {showTxMeta && (
+          <Box sx={{ mt: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              Signers:
+            </Typography>
+            <Stack direction="row" spacing={1} sx={{ mt: 0.5, flexWrap: "wrap" }}>
+              {signers.length === 0 && (
+                <Typography variant="caption" color="text.secondary">
+                  No signatures yet
+                </Typography>
+              )}
+              {signers.map((signer) => (
+                <Chip
+                  key={signer.owner}
+                  size="small"
+                  label={addressBook[signer.owner] || signer.owner}
+                  variant="outlined"
+                  sx={{ height: 24, fontSize: "0.7rem" }}
+                />
+              ))}
+            </Stack>
+          </Box>
+        )}
       </Stack>
 
       <Typography variant="overline" color="text.secondary" sx={{ letterSpacing: 0.6, fontWeight: 600 }}>
@@ -411,7 +449,13 @@ function DetailsPanel({ txDetails, safeTxHash, chainId, safeAddress, txKey, addr
       {steps.length ? (
         <Stack spacing={1} sx={{ mt: 0.5 }}>
           {steps.map((step, index) => (
-            <StepItem key={step.id || index} index={index} step={step} addressBook={addressBook} />
+            <StepItem
+              key={step.id || index}
+              index={index}
+              step={step}
+              addressBook={addressBook}
+              addresses={txDetails?.addresses}
+            />
           ))}
         </Stack>
       ) : (
@@ -540,6 +584,7 @@ function TransactionCard({
     return (
       <DetailsPanel
         txDetails={txDetails}
+        transaction={transaction}
         safeTxHash={safeTxHashProp}
         chainId={chainId}
         safeAddress={safeAddress}
@@ -557,21 +602,11 @@ function TransactionCard({
         </AccordionSummary>
         <AccordionDetails>
           <Stack spacing={2}>
-            <Grid container spacing={2}>
-              <Grid item xs={12} md={6}>
-                <Paper variant="outlined" sx={{ p: 2 }}>
-                  <Skeleton variant="text" width="80%" />
-                  <Skeleton variant="text" width="40%" />
-                  <Skeleton variant="text" width="60%" />
-                </Paper>
-              </Grid>
-              <Grid item xs={12} md={6}>
-                <Paper variant="outlined" sx={{ p: 2 }}>
-                  <Skeleton variant="text" width="50%" />
-                  <Skeleton variant="rectangular" height={80} />
-                </Paper>
-              </Grid>
-            </Grid>
+            <Paper variant="outlined" sx={{ p: 2 }}>
+              <Skeleton variant="text" width="80%" />
+              <Skeleton variant="text" width="40%" />
+              <Skeleton variant="text" width="60%" />
+            </Paper>
 
             <Paper variant="outlined" sx={{ p: 2 }}>
               <Skeleton variant="text" width="30%" />
@@ -594,18 +629,14 @@ function TransactionCard({
             <Typography>{txKey}</Typography>
           </AccordionSummary>
           <AccordionDetails>
-            <Grid container spacing={2}>
-              <Grid item xs={12}>
-                <Paper variant="outlined" sx={{ p: 2 }}>
-                  <Typography color="text.secondary">
-                    No changeset found for transaction{" "}
-                    <a href={safeUrl} target="_blank" rel="noopener noreferrer">
-                      {transaction.safeTxHash || txKey}
-                    </a>
-                  </Typography>
-                </Paper>
-              </Grid>
-            </Grid>
+            <Paper variant="outlined" sx={{ p: 2 }}>
+              <Typography color="text.secondary">
+                No changeset found for transaction{" "}
+                <a href={safeUrl} target="_blank" rel="noopener noreferrer">
+                  {transaction.safeTxHash || txKey}
+                </a>
+              </Typography>
+            </Paper>
           </AccordionDetails>
         </Accordion>
       );
@@ -673,46 +704,15 @@ function TransactionCard({
         </Stack>
       </AccordionSummary>
       <AccordionDetails>
-        <Stack spacing={2}>
-          <Grid container spacing={2}>
-            <Grid item xs={12} md={6}>
-              <Paper sx={{ height: "100%", p: 2 }} variant="outlined">
-                <Typography>
-                  Nonce: {transaction.nonce} <br />
-                  Confirmations: {`${transaction.confirmations?.length}/${transaction.confirmationsRequired}`} <br />
-                  Modified: {transaction.modified}
-                </Typography>
-              </Paper>
-            </Grid>
-
-            <Grid item xs={12} md={6}>
-              <Paper sx={{ height: "100%", width: "100%", p: 2 }} variant="outlined">
-                <Grid container spacing={2}>
-                  <Grid item xs={12}>
-                    <Typography variant="h6">Signers</Typography>
-                  </Grid>
-                  <Grid item xs={12} sx={{ margin: "0 10%" }}>
-                    <Stack direction="column" spacing={1}>
-                      {transaction.confirmations.length === 0 && <Typography>No signatures yet</Typography>}
-                      {transaction.confirmations.map((signer) => (
-                        <Address key={signer.owner} address={signer.owner} displayName={addressBook[signer.owner]} />
-                      ))}
-                    </Stack>
-                  </Grid>
-                </Grid>
-              </Paper>
-            </Grid>
-          </Grid>
-
-          <DetailsPanel
-            txDetails={txDetails}
-            safeTxHash={transaction.safeTxHash}
-            chainId={chainId}
-            safeAddress={safeAddress}
-            txKey={txKey}
-            addressBook={addressBook}
-          />
-        </Stack>
+        <DetailsPanel
+          txDetails={txDetails}
+          transaction={transaction}
+          safeTxHash={transaction.safeTxHash}
+          chainId={chainId}
+          safeAddress={safeAddress}
+          txKey={txKey}
+          addressBook={addressBook}
+        />
       </AccordionDetails>
     </Accordion>
   );

From afbfa3a61472f948b6028725148a5cb1cb43403f Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Wed, 19 Nov 2025 18:06:38 -0300
Subject: [PATCH 08/29] Fix signers Chip

---
 src/TransactionCard.jsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 9e12409..1e9f81e 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -429,13 +429,7 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
                 </Typography>
               )}
               {signers.map((signer) => (
-                <Chip
-                  key={signer.owner}
-                  size="small"
-                  label={addressBook[signer.owner] || signer.owner}
-                  variant="outlined"
-                  sx={{ height: 24, fontSize: "0.7rem" }}
-                />
+                <Address key={signer.owner} address={signer.owner} displayName={addressBook[signer.owner]} />
               ))}
             </Stack>
           </Box>

From 65dba5d2edd59229087ebf9ae536a6aa6fba4f0b Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Wed, 26 Nov 2025 19:13:29 -0300
Subject: [PATCH 09/29] Copy address button

---
 src/Address.jsx | 61 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/Address.jsx b/src/Address.jsx
index 77227df..b8f2961 100644
--- a/src/Address.jsx
+++ b/src/Address.jsx
@@ -1,10 +1,18 @@
 import React from "react";
-import { Typography, Popover } from "@mui/material";
+import { Typography, Popover, Box, Stack, IconButton } from "@mui/material";
 import Chip from "@mui/material/Chip";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { shortAddress } from "./utils";
 
+async function copyToClipboard(text) {
+  if (!navigator.clipboard || !window.isSecureContext) return false;
+  await navigator.clipboard.writeText(text);
+  return true;
+}
+
 function Address({ displayName = null, address }) {
   const [popAnchor, setPopAnchor] = React.useState(null);
+  const [copied, setCopied] = React.useState(false);
 
   const handlePopoverOpen = (event) => {
     setPopAnchor(event.currentTarget);
@@ -16,30 +24,59 @@ function Address({ displayName = null, address }) {
 
   const popOpen = Boolean(popAnchor);
 
+  const onCopy = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const ok = await copyToClipboard(address);
+    setCopied(ok);
+    window.setTimeout(() => setCopied(false), 900);
+  };
+
   return (
     <>
       <Chip
         label={displayName || shortAddress(address)}
-        aria-owns={popOpen ? "mouse-over-popover" : undefined}
+        aria-owns={popOpen ? "address-popover" : undefined}
         aria-haspopup="true"
         onClick={handlePopoverOpen}
+        variant="outlined"
+        sx={{
+          height: 26,
+          borderRadius: 2,
+          maxWidth: 260,
+          "& .MuiChip-label": { overflow: "hidden", textOverflow: "ellipsis" },
+        }}
       />
+
       <Popover
-        id="mouse-over-popover"
+        id="address-popover"
         open={popOpen}
         anchorEl={popAnchor}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
         onClose={handlePopoverClose}
         disableRestoreFocus
+        sx={{ p: 1, borderRadius: 2 }}
       >
-        <Typography sx={{ p: 1 }}>{address}</Typography>
+        <Stack spacing={0.75} sx={{ minWidth: 260 }}>
+          <Typography variant="caption" sx={{ fontFamily: "monospace" }}>
+            {address}
+          </Typography>
+
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <IconButton size="small" onClick={onCopy} aria-label="Copy address">
+              <ContentCopyIcon fontSize="inherit" />
+            </IconButton>
+
+            <Box sx={{ flex: 1 }} />
+
+            {copied && (
+              <Typography variant="caption" color="success.main" sx={{ fontWeight: 700 }}>
+                Copied
+              </Typography>
+            )}
+          </Box>
+        </Stack>
       </Popover>
     </>
   );

From 4e5ba76f2e82b8704f53e91f617af6e49107fda4 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Wed, 26 Nov 2025 21:55:13 -0300
Subject: [PATCH 10/29] Fix window clipboard function

---
 src/Address.jsx | 76 ++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 60 insertions(+), 16 deletions(-)

diff --git a/src/Address.jsx b/src/Address.jsx
index b8f2961..ade3f21 100644
--- a/src/Address.jsx
+++ b/src/Address.jsx
@@ -1,34 +1,52 @@
 import React from "react";
-import { Typography, Popover, Box, Stack, IconButton } from "@mui/material";
+import { Typography, Popover, Box, Stack, IconButton, TextField, Button } from "@mui/material";
 import Chip from "@mui/material/Chip";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { shortAddress } from "./utils";
 
 async function copyToClipboard(text) {
-  if (!navigator.clipboard || !window.isSecureContext) return false;
-  await navigator.clipboard.writeText(text);
-  return true;
+  try {
+    if (!navigator.clipboard || !window.isSecureContext) return true;
+    await navigator.clipboard.writeText(text);
+    return false;
+  } catch {
+    return true;
+  }
 }
 
 function Address({ displayName = null, address }) {
   const [popAnchor, setPopAnchor] = React.useState(null);
   const [copied, setCopied] = React.useState(false);
+  const [manualOpen, setManualOpen] = React.useState(false);
+  const inputRef = React.useRef(null);
 
-  const handlePopoverOpen = (event) => {
-    setPopAnchor(event.currentTarget);
-  };
+  const popOpen = Boolean(popAnchor);
 
-  const handlePopoverClose = () => {
-    setPopAnchor(null);
-  };
+  const handlePopoverOpen = (event) => setPopAnchor(event.currentTarget);
+  const handlePopoverClose = () => setPopAnchor(null);
 
-  const popOpen = Boolean(popAnchor);
+  React.useEffect(() => {
+    if (!manualOpen) return;
+    const id = window.setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+        inputRef.current.select();
+      }
+    }, 0);
+    return () => window.clearTimeout(id);
+  }, [manualOpen]);
 
   const onCopy = async (e) => {
     e.preventDefault();
     e.stopPropagation();
-    const ok = await copyToClipboard(address);
-    setCopied(ok);
+
+    const needsManual = await copyToClipboard(address);
+    if (needsManual) {
+      setManualOpen(true);
+      return;
+    }
+
+    setCopied(true);
     window.setTimeout(() => setCopied(false), 900);
   };
 
@@ -56,10 +74,12 @@ function Address({ displayName = null, address }) {
         transformOrigin={{ vertical: "top", horizontal: "left" }}
         onClose={handlePopoverClose}
         disableRestoreFocus
-        sx={{ p: 1, borderRadius: 2 }}
+        slotProps={{
+          paper: { sx: { p: 1, borderRadius: 2, maxWidth: 440 } },
+        }}
       >
-        <Stack spacing={0.75} sx={{ minWidth: 260 }}>
-          <Typography variant="caption" sx={{ fontFamily: "monospace" }}>
+        <Stack spacing={0.75} sx={{ minWidth: 320 }}>
+          <Typography variant="caption" sx={{ fontFamily: "monospace", wordBreak: "break-all" }}>
             {address}
           </Typography>
 
@@ -76,6 +96,30 @@ function Address({ displayName = null, address }) {
               </Typography>
             )}
           </Box>
+
+          {manualOpen && (
+            <Box sx={{ pt: 0.5 }}>
+              <Typography variant="caption" color="text.secondary" sx={{ display: "block", mb: 0.75 }}>
+                Clipboard is blocked in embedded mode. Copy manually:
+              </Typography>
+
+              <TextField
+                fullWidth
+                size="small"
+                inputRef={inputRef}
+                value={address}
+                slotProps={{
+                  input: { readOnly: true, sx: { fontFamily: "monospace" } },
+                }}
+              />
+
+              <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 1 }}>
+                <Button size="small" variant="text" onClick={() => setManualOpen(false)}>
+                  Close
+                </Button>
+              </Box>
+            </Box>
+          )}
         </Stack>
       </Popover>
     </>

From 607d4b877ed41af283a515baf5f21180c656fd8d Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Wed, 26 Nov 2025 23:19:47 -0300
Subject: [PATCH 11/29] chain utils and url constructor

---
 src/Address.jsx         | 111 ++++++++--------------------------------
 src/TransactionCard.jsx |  29 ++---------
 src/chain-utils.js      |  29 +++++++++++
 3 files changed, 52 insertions(+), 117 deletions(-)
 create mode 100644 src/chain-utils.js

diff --git a/src/Address.jsx b/src/Address.jsx
index ade3f21..d3203cd 100644
--- a/src/Address.jsx
+++ b/src/Address.jsx
@@ -1,54 +1,20 @@
 import React from "react";
-import { Typography, Popover, Box, Stack, IconButton, TextField, Button } from "@mui/material";
+import { Typography, Popover, Link, Stack } from "@mui/material";
 import Chip from "@mui/material/Chip";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { shortAddress } from "./utils";
-
-async function copyToClipboard(text) {
-  try {
-    if (!navigator.clipboard || !window.isSecureContext) return true;
-    await navigator.clipboard.writeText(text);
-    return false;
-  } catch {
-    return true;
-  }
-}
+import { explorerAddressUrl } from "./chain-utils";
+import { useSafe } from "./safe-ui";
 
 function Address({ displayName = null, address }) {
   const [popAnchor, setPopAnchor] = React.useState(null);
-  const [copied, setCopied] = React.useState(false);
-  const [manualOpen, setManualOpen] = React.useState(false);
-  const inputRef = React.useRef(null);
-
-  const popOpen = Boolean(popAnchor);
+  const { chainId } = useSafe();
 
   const handlePopoverOpen = (event) => setPopAnchor(event.currentTarget);
   const handlePopoverClose = () => setPopAnchor(null);
 
-  React.useEffect(() => {
-    if (!manualOpen) return;
-    const id = window.setTimeout(() => {
-      if (inputRef.current) {
-        inputRef.current.focus();
-        inputRef.current.select();
-      }
-    }, 0);
-    return () => window.clearTimeout(id);
-  }, [manualOpen]);
-
-  const onCopy = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const needsManual = await copyToClipboard(address);
-    if (needsManual) {
-      setManualOpen(true);
-      return;
-    }
+  const popOpen = Boolean(popAnchor);
 
-    setCopied(true);
-    window.setTimeout(() => setCopied(false), 900);
-  };
+  const url = explorerAddressUrl(chainId, address);
 
   return (
     <>
@@ -58,14 +24,8 @@ function Address({ displayName = null, address }) {
         aria-haspopup="true"
         onClick={handlePopoverOpen}
         variant="outlined"
-        sx={{
-          height: 26,
-          borderRadius: 2,
-          maxWidth: 260,
-          "& .MuiChip-label": { overflow: "hidden", textOverflow: "ellipsis" },
-        }}
+        sx={{ height: 26, borderRadius: 2 }}
       />
-
       <Popover
         id="address-popover"
         open={popOpen}
@@ -74,51 +34,20 @@ function Address({ displayName = null, address }) {
         transformOrigin={{ vertical: "top", horizontal: "left" }}
         onClose={handlePopoverClose}
         disableRestoreFocus
-        slotProps={{
-          paper: { sx: { p: 1, borderRadius: 2, maxWidth: 440 } },
-        }}
+        slotProps={{ paper: { sx: { p: 1, borderRadius: 2, maxWidth: 520 } } }}
       >
-        <Stack spacing={0.75} sx={{ minWidth: 320 }}>
-          <Typography variant="caption" sx={{ fontFamily: "monospace", wordBreak: "break-all" }}>
-            {address}
-          </Typography>
-
-          <Box sx={{ display: "flex", alignItems: "center" }}>
-            <IconButton size="small" onClick={onCopy} aria-label="Copy address">
-              <ContentCopyIcon fontSize="inherit" />
-            </IconButton>
-
-            <Box sx={{ flex: 1 }} />
-
-            {copied && (
-              <Typography variant="caption" color="success.main" sx={{ fontWeight: 700 }}>
-                Copied
-              </Typography>
-            )}
-          </Box>
-
-          {manualOpen && (
-            <Box sx={{ pt: 0.5 }}>
-              <Typography variant="caption" color="text.secondary" sx={{ display: "block", mb: 0.75 }}>
-                Clipboard is blocked in embedded mode. Copy manually:
-              </Typography>
-
-              <TextField
-                fullWidth
-                size="small"
-                inputRef={inputRef}
-                value={address}
-                slotProps={{
-                  input: { readOnly: true, sx: { fontFamily: "monospace" } },
-                }}
-              />
-
-              <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 1 }}>
-                <Button size="small" variant="text" onClick={() => setManualOpen(false)}>
-                  Close
-                </Button>
-              </Box>
-            </Box>
+        <Stack spacing={0.75}>
+          <Typography sx={{ fontFamily: "monospace", fontSize: 12, wordBreak: "break-all" }}>{address}</Typography>
+          {url && (
+            <Link
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              underline="hover"
+              sx={{ fontFamily: "monospace", fontSize: 12, wordBreak: "break-all" }}
+            >
+              {url}
+            </Link>
           )}
         </Stack>
       </Popover>
diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 1e9f81e..5a25d8a 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -20,24 +20,12 @@ import {
 import { useQuery } from "@tanstack/react-query";
 
 import { KEY_TRANSACTION_DETAILS, KEY_ADDRESS_BOOK, getAddressBook, getTransactionDetails } from "./safe-api";
+import { chainPrefixFromId } from "./chain-utils";
 import Address from "./Address";
 import { useWallet } from "./wallet";
 import { useSafe } from "./safe-ui";
 import WalletActionButton from "./WalletActionButton";
 
-function chainPrefixFromId(chainId) {
-  switch (Number(chainId)) {
-    case 1:
-      return "eth";
-    case 137:
-      return "matic";
-    case 42161:
-      return "arb1";
-    default:
-      return String(chainId);
-  }
-}
-
 function truncateMiddle(str, visible = 6) {
   if (!str) return "";
   if (str.length <= visible * 2 + 3) return str;
@@ -317,13 +305,7 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
   const signers = Array.isArray(transaction?.confirmations) ? transaction.confirmations : [];
 
   return (
-    <Paper
-      variant="outlined"
-      sx={{
-        p: 2,
-        mx: "auto",
-      }}
-    >
+    <Paper variant="outlined" sx={{ p: 2, mx: "auto" }}>
       <Typography variant="overline" color="text.secondary" sx={{ letterSpacing: 0.6, fontWeight: 600 }}>
         Transaction details
       </Typography>
@@ -540,7 +522,6 @@ function TransactionCard({
   const txKey = hasTransaction
     ? transaction.safeTxHash || transaction.transactionHash || transaction.txHash
     : safeTxHashProp;
-
   const shouldFetchDetails = !txDetailsProp && hasTransaction && !!transaction.safeTxHash;
 
   const txDetailsResponse = useQuery({
@@ -649,7 +630,6 @@ function TransactionCard({
   const alreadySigned = transaction.confirmations
     .map((c) => c.owner?.toLowerCase())
     .includes(curAccount?.toLowerCase());
-
   const signEnabled = !alreadySigned && isOwner;
 
   return (
@@ -672,10 +652,7 @@ function TransactionCard({
                 <Typography
                   variant="caption"
                   color="text.secondary"
-                  sx={{
-                    fontFamily: "monospace",
-                    wordBreak: "break-all",
-                  }}
+                  sx={{ fontFamily: "monospace", wordBreak: "break-all" }}
                 >
                   {transaction.safeTxHash}
                 </Typography>
diff --git a/src/chain-utils.js b/src/chain-utils.js
new file mode 100644
index 0000000..9c842ee
--- /dev/null
+++ b/src/chain-utils.js
@@ -0,0 +1,29 @@
+export const SAFE_PREFIX_BY_CHAIN_ID = {
+  1: "eth",
+  137: "matic",
+  42161: "arb1",
+  11155111: "sep",
+};
+
+export const EXPLORER_BY_CHAIN_ID = {
+  1: "https://etherscan.io",
+  137: "https://polygonscan.com",
+  42161: "https://arbiscan.io",
+  11155111: "https://sepolia.etherscan.io",
+};
+
+export function chainPrefixFromId(chainId) {
+  return SAFE_PREFIX_BY_CHAIN_ID[Number(chainId)] || String(chainId);
+}
+
+export function explorerAddressUrl(chainId, address) {
+  const base = EXPLORER_BY_CHAIN_ID[Number(chainId)];
+  if (!base) return null;
+  return `${base}/address/${address}`;
+}
+
+export function explorerTxUrl(chainId, txHash) {
+  const base = EXPLORER_BY_CHAIN_ID[Number(chainId)];
+  if (!base) return null;
+  return `${base}/tx/${txHash}`;
+}

From 50f0e50f11b9544c3bf3a38c94d8ac03629354b0 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Wed, 26 Nov 2025 23:39:07 -0300
Subject: [PATCH 12/29] Address using address as url instead of clipboard

---
 src/Address.jsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/Address.jsx b/src/Address.jsx
index d3203cd..d16119d 100644
--- a/src/Address.jsx
+++ b/src/Address.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Typography, Popover, Link, Stack } 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";
@@ -9,11 +9,7 @@ function Address({ displayName = null, address }) {
   const [popAnchor, setPopAnchor] = React.useState(null);
   const { chainId } = useSafe();
 
-  const handlePopoverOpen = (event) => setPopAnchor(event.currentTarget);
-  const handlePopoverClose = () => setPopAnchor(null);
-
   const popOpen = Boolean(popAnchor);
-
   const url = explorerAddressUrl(chainId, address);
 
   return (
@@ -22,7 +18,8 @@ function Address({ displayName = null, address }) {
         label={displayName || shortAddress(address)}
         aria-owns={popOpen ? "address-popover" : undefined}
         aria-haspopup="true"
-        onClick={handlePopoverOpen}
+        onClick={(e) => setPopAnchor(e.currentTarget)}
+        onDelete={undefined}
         variant="outlined"
         sx={{ height: 26, borderRadius: 2 }}
       />
@@ -32,24 +29,26 @@ function Address({ displayName = null, address }) {
         anchorEl={popAnchor}
         anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
         transformOrigin={{ vertical: "top", horizontal: "left" }}
-        onClose={handlePopoverClose}
+        onClose={() => setPopAnchor(null)}
         disableRestoreFocus
         slotProps={{ paper: { sx: { p: 1, borderRadius: 2, maxWidth: 520 } } }}
       >
-        <Stack spacing={0.75}>
-          <Typography sx={{ fontFamily: "monospace", fontSize: 12, wordBreak: "break-all" }}>{address}</Typography>
-          {url && (
+        <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)}
             >
-              {url}
+              {address}
             </Link>
+          ) : (
+            address
           )}
-        </Stack>
+        </Typography>
       </Popover>
     </>
   );

From 5d374e24f503363407284b9fae7767a82394a6a1 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Wed, 26 Nov 2025 23:50:24 -0300
Subject: [PATCH 13/29] Visual update for tooltip

---
 src/Address.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Address.jsx b/src/Address.jsx
index d16119d..505af23 100644
--- a/src/Address.jsx
+++ b/src/Address.jsx
@@ -21,7 +21,6 @@ function Address({ displayName = null, address }) {
         onClick={(e) => setPopAnchor(e.currentTarget)}
         onDelete={undefined}
         variant="outlined"
-        sx={{ height: 26, borderRadius: 2 }}
       />
       <Popover
         id="address-popover"
@@ -31,7 +30,6 @@ function Address({ displayName = null, address }) {
         transformOrigin={{ vertical: "top", horizontal: "left" }}
         onClose={() => setPopAnchor(null)}
         disableRestoreFocus
-        slotProps={{ paper: { sx: { p: 1, borderRadius: 2, maxWidth: 520 } } }}
       >
         <Typography sx={{ fontFamily: "monospace", fontSize: 12, wordBreak: "break-all" }}>
           {url ? (

From cd92cd267b445c7ec4c5cec2fef765a548ffc9e8 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Thu, 27 Nov 2025 00:06:25 -0300
Subject: [PATCH 14/29] Visual update on each step from transaction card

---
 src/TransactionCard.jsx | 265 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 242 insertions(+), 23 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 5a25d8a..c07be4e 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -32,6 +32,199 @@ function truncateMiddle(str, visible = 6) {
   return `${str.slice(0, visible)}…${str.slice(-visible)}`;
 }
 
+function isHexAddress(v) {
+  return typeof v === "string" && /^0x[a-fA-F0-9]{40}$/.test(v);
+}
+
+function safeJsonStringify(v, space = 2) {
+  try {
+    return JSON.stringify(v, null, space);
+  } catch {
+    return String(v);
+  }
+}
+
+function normalizeArgItems(args) {
+  if (args == null) return [];
+
+  if (Array.isArray(args)) {
+    return args.map((a, i) => {
+      if (a && typeof a === "object" && !Array.isArray(a)) {
+        const name = a.name ?? a.argName ?? a.key ?? null;
+        const type = a.type ?? a.argType ?? a.kind ?? null;
+        const value = a.value !== undefined ? a.value : a;
+        return { name, type, value, index: i };
+      }
+      return { name: null, type: null, value: a, index: i };
+    });
+  }
+
+  if (typeof args === "object") {
+    return Object.entries(args).map(([k, v], i) => ({ name: k, type: null, value: v, index: i }));
+  }
+
+  return [{ name: null, type: null, value: args, index: 0 }];
+}
+
+function pickTransformPayload(obj, key) {
+  if (!obj || typeof obj !== "object") return null;
+  if (obj[key] !== undefined) return obj[key];
+  if (obj.type === key) {
+    if (obj.value !== undefined) return obj.value;
+    if (obj[key] !== undefined) return obj[key];
+    return obj;
+  }
+  return null;
+}
+
+function buildChangesetTransforms({ addresses, addressBook }) {
+  const getAddressFromKeyOrAddress = (value) => {
+    const resolved = addresses?.[value] || value;
+    if (isHexAddress(resolved)) {
+      return { kind: "address", value: resolved, displayName: addressBook?.[resolved] };
+    }
+    return { kind: "text", value: resolved };
+  };
+
+  const getRole = (value) => {
+    if (value && typeof value === "object") {
+      const role = value.role ?? value.key ?? value.value ?? value.name ?? value.id;
+      return { kind: "text", value: role != null ? String(role) : safeJsonStringify(value, 0) };
+    }
+    return { kind: "text", value: String(value) };
+  };
+
+  const getComponentRole = (value) => {
+    if (value && typeof value === "object") {
+      const component = value.component ?? value.address_key ?? value.addressKey ?? value.addr ?? value.address;
+      const role = value.role ?? value.key ?? value.value ?? value.name ?? value.id;
+      const comp = component != null ? getAddressFromKeyOrAddress(component) : null;
+      const roleTxt = role != null ? String(role) : "";
+      if (comp?.kind === "address") return { kind: "text", value: `${comp.value}:${roleTxt}` };
+      return { kind: "text", value: `${String(component)}:${roleTxt}` };
+    }
+    return { kind: "text", value: safeJsonStringify(value, 0) };
+  };
+
+  const getEnumValue = (value) => {
+    if (value && typeof value === "object") {
+      const enumName = value.enum || value.name || value.type;
+      const key = value.key ?? value.value ?? value.id ?? value.label;
+      if (enumName && key != null) return { kind: "text", value: `${enumName}.${String(key)}` };
+      if (key != null) return { kind: "text", value: String(key) };
+      return { kind: "text", value: safeJsonStringify(value, 0) };
+    }
+    return { kind: "text", value: String(value) };
+  };
+
+  return {
+    address_key: (value) => getAddressFromKeyOrAddress(value),
+    role: (value) => getRole(value),
+    component_role: (value) => getComponentRole(value),
+    enum: (value) => getEnumValue(value),
+  };
+}
+
+function transformValue(value, transforms) {
+  if (value == null) return { kind: "text", value: "" };
+
+  if (Array.isArray(value)) {
+    return { kind: "list", value: value.map((v) => transformValue(v, transforms)) };
+  }
+
+  if (typeof value === "object") {
+    for (const k of Object.keys(transforms)) {
+      const payload = pickTransformPayload(value, k);
+      if (payload !== null) return transforms[k](payload);
+    }
+    return { kind: "json", value };
+  }
+
+  if (isHexAddress(value)) return { kind: "address", value };
+  return { kind: "text", value: String(value) };
+}
+
+function renderTransformedValue(v) {
+  if (!v) return null;
+
+  if (v.kind === "address") {
+    return <Address address={v.value} displayName={v.displayName} />;
+  }
+
+  if (v.kind === "list") {
+    const items = Array.isArray(v.value) ? v.value : [];
+    return (
+      <Stack spacing={0.5} sx={{ mt: 0.25 }}>
+        {items.map((it, idx) => (
+          <Box key={idx}>{renderTransformedValue(it)}</Box>
+        ))}
+      </Stack>
+    );
+  }
+
+  if (v.kind === "json") {
+    return (
+      <Typography
+        component="span"
+        variant="caption"
+        sx={{ fontFamily: "monospace", whiteSpace: "pre-wrap", wordBreak: "break-word" }}
+      >
+        {safeJsonStringify(v.value, 2)}
+      </Typography>
+    );
+  }
+
+  return (
+    <Typography
+      component="span"
+      variant="caption"
+      sx={{ fontFamily: "monospace", whiteSpace: "pre-wrap", wordBreak: "break-word" }}
+    >
+      {String(v.value)}
+    </Typography>
+  );
+}
+
+function argTypeFromParsed(item) {
+  if (!item || typeof item !== "object") return null;
+
+  if (item.type && typeof item.type === "string") return item.type;
+
+  if (item.enum) return item.enum;
+  if (item.type === "enum" && item.enum) return item.enum;
+
+  if (item.address_key != null || item.type === "address_key") return "address";
+  if (item.component_role != null || item.type === "component_role") return "component_role";
+  if (item.role != null || item.type === "role") return "role";
+
+  return null;
+}
+
+function methodSignature(methodName, argItems) {
+  if (!methodName) return null;
+
+  const types = argItems
+    .map((a) => {
+      if (!a) return null;
+
+      if (a.type) {
+        if (a.type === "address_key") return "address";
+        if (a.type === "enum") {
+          const v = a.value;
+          if (v && typeof v === "object") return v.enum || v.name || "enum";
+          return "enum";
+        }
+        return a.type;
+      }
+
+      const inferred = argTypeFromParsed(a.value);
+      return inferred || null;
+    })
+    .filter(Boolean);
+
+  return `${methodName}(${types.join(", ")})`;
+}
+
 function buildSteps(txDetails) {
   if (!txDetails) return [];
 
@@ -108,7 +301,7 @@ function StepItem({ index, step, addressBook, addresses }) {
   const summary = step.summary || step.description || null;
   const displayName = to && addressBook ? addressBook[to] : undefined;
 
-  const method =
+  const methodName =
     step.method ||
     step.function ||
     step.functionName ||
@@ -125,9 +318,11 @@ function StepItem({ index, step, addressBook, addresses }) {
         step.rawArgs.signature
       : null);
 
-  const args =
+  const argsRaw =
     step.rawArgs ?? step.args ?? step.parameters ?? step.params ?? step.contractArgs ?? step.contract_args ?? null;
 
+  const parsedArgs = step.parsedArguments || step.parsed_args || null;
+
   const contractAddressKey = step.contract_address_key || step.contractAddressKey || null;
   const contractType = step.contract_type || step.contractType || null;
 
@@ -137,7 +332,12 @@ function StepItem({ index, step, addressBook, addresses }) {
   const resolvedContractName =
     resolvedContractAddress && addressBook ? addressBook[resolvedContractAddress] : undefined;
 
-  const parsedArgs = step.parsedArguments || step.parsed_args || null;
+  const argItems = normalizeArgItems(parsedArgs ?? argsRaw);
+  const transforms = React.useMemo(
+    () => buildChangesetTransforms({ addresses, addressBook }),
+    [addresses, addressBook]
+  );
+  const signature = methodSignature(methodName, argItems);
 
   return (
     <Box
@@ -203,11 +403,11 @@ function StepItem({ index, step, addressBook, addresses }) {
               </Typography>
             )}
 
-            {method && (
+            {signature && (
               <Typography variant="caption" color="text.secondary">
                 Method:{" "}
                 <Typography component="span" variant="caption" sx={{ fontFamily: "monospace" }}>
-                  {String(method)}
+                  {signature}
                 </Typography>
               </Typography>
             )}
@@ -222,29 +422,48 @@ function StepItem({ index, step, addressBook, addresses }) {
               </Typography>
             )}
 
-            {args != null && (
-              <Box
-                component="pre"
-                sx={{
-                  mt: 0.5,
-                  fontSize: "0.7rem",
-                  fontFamily: "monospace",
-                  whiteSpace: "pre-wrap",
-                  wordBreak: "break-word",
-                  backgroundColor: "rgba(255,255,255,0.02)",
-                  borderRadius: 1,
-                  p: 1,
-                }}
-              >
-                {typeof args === "string" ? args : JSON.stringify(args, null, 2)}
+            {argItems.length > 0 && (
+              <Box sx={{ mt: 0.5 }}>
+                <Typography variant="caption" color="text.secondary">
+                  Arguments:
+                </Typography>
+
+                <Stack spacing={0.5} sx={{ mt: 0.5 }}>
+                  {argItems.map((a) => {
+                    const label = a.name
+                      ? `${a.name}${a.type ? ` (${a.type})` : ""}`
+                      : a.type
+                      ? a.type
+                      : `arg${a.index}`;
+                    const tv = transformValue(a.value, transforms);
+                    return (
+                      <Stack
+                        key={`${a.index}-${label}`}
+                        direction="row"
+                        spacing={1}
+                        alignItems="flex-start"
+                        sx={{ flexWrap: "wrap" }}
+                      >
+                        <Typography
+                          variant="caption"
+                          color="text.secondary"
+                          sx={{ minWidth: 140, fontFamily: "monospace" }}
+                        >
+                          {label}:
+                        </Typography>
+                        <Box sx={{ flex: 1, minWidth: 0 }}>{renderTransformedValue(tv)}</Box>
+                      </Stack>
+                    );
+                  })}
+                </Stack>
               </Box>
             )}
 
-            {parsedArgs != null && (
+            {parsedArgs == null && argsRaw != null && (
               <Box
                 component="pre"
                 sx={{
-                  mt: 0.5,
+                  mt: 0.75,
                   fontSize: "0.7rem",
                   fontFamily: "monospace",
                   whiteSpace: "pre-wrap",
@@ -254,7 +473,7 @@ function StepItem({ index, step, addressBook, addresses }) {
                   p: 1,
                 }}
               >
-                {typeof parsedArgs === "string" ? parsedArgs : JSON.stringify(parsedArgs, null, 2)}
+                {typeof argsRaw === "string" ? argsRaw : safeJsonStringify(argsRaw, 2)}
               </Box>
             )}
           </Stack>

From cb59d51877f622978b4997943cccb477173e3020 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Thu, 27 Nov 2025 00:27:51 -0300
Subject: [PATCH 15/29] Fix transformed values

---
 src/TransactionCard.jsx | 284 ++++++++++++++++++++++------------------
 1 file changed, 159 insertions(+), 125 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index c07be4e..83798c8 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -44,46 +44,13 @@ function safeJsonStringify(v, space = 2) {
   }
 }
 
-function normalizeArgItems(args) {
-  if (args == null) return [];
-
-  if (Array.isArray(args)) {
-    return args.map((a, i) => {
-      if (a && typeof a === "object" && !Array.isArray(a)) {
-        const name = a.name ?? a.argName ?? a.key ?? null;
-        const type = a.type ?? a.argType ?? a.kind ?? null;
-        const value = a.value !== undefined ? a.value : a;
-        return { name, type, value, index: i };
-      }
-      return { name: null, type: null, value: a, index: i };
-    });
-  }
-
-  if (typeof args === "object") {
-    return Object.entries(args).map(([k, v], i) => ({ name: k, type: null, value: v, index: i }));
-  }
-
-  return [{ name: null, type: null, value: args, index: 0 }];
-}
-
-function pickTransformPayload(obj, key) {
-  if (!obj || typeof obj !== "object") return null;
-  if (obj[key] !== undefined) return obj[key];
-  if (obj.type === key) {
-    if (obj.value !== undefined) return obj.value;
-    if (obj[key] !== undefined) return obj[key];
-    return obj;
-  }
-  return null;
-}
-
 function buildChangesetTransforms({ addresses, addressBook }) {
   const getAddressFromKeyOrAddress = (value) => {
     const resolved = addresses?.[value] || value;
     if (isHexAddress(resolved)) {
       return { kind: "address", value: resolved, displayName: addressBook?.[resolved] };
     }
-    return { kind: "text", value: resolved };
+    return { kind: "text", value: resolved ?? "" };
   };
 
   const getRole = (value) => {
@@ -91,7 +58,7 @@ function buildChangesetTransforms({ addresses, addressBook }) {
       const role = value.role ?? value.key ?? value.value ?? value.name ?? value.id;
       return { kind: "text", value: role != null ? String(role) : safeJsonStringify(value, 0) };
     }
-    return { kind: "text", value: String(value) };
+    return { kind: "text", value: value != null ? String(value) : "" };
   };
 
   const getComponentRole = (value) => {
@@ -114,7 +81,7 @@ function buildChangesetTransforms({ addresses, addressBook }) {
       if (key != null) return { kind: "text", value: String(key) };
       return { kind: "text", value: safeJsonStringify(value, 0) };
     }
-    return { kind: "text", value: String(value) };
+    return { kind: "text", value: value != null ? String(value) : "" };
   };
 
   return {
@@ -125,25 +92,6 @@ function buildChangesetTransforms({ addresses, addressBook }) {
   };
 }
 
-function transformValue(value, transforms) {
-  if (value == null) return { kind: "text", value: "" };
-
-  if (Array.isArray(value)) {
-    return { kind: "list", value: value.map((v) => transformValue(v, transforms)) };
-  }
-
-  if (typeof value === "object") {
-    for (const k of Object.keys(transforms)) {
-      const payload = pickTransformPayload(value, k);
-      if (payload !== null) return transforms[k](payload);
-    }
-    return { kind: "json", value };
-  }
-
-  if (isHexAddress(value)) return { kind: "address", value };
-  return { kind: "text", value: String(value) };
-}
-
 function renderTransformedValue(v) {
   if (!v) return null;
 
@@ -185,46 +133,131 @@ function renderTransformedValue(v) {
   );
 }
 
-function argTypeFromParsed(item) {
-  if (!item || typeof item !== "object") return null;
+function transformFallback(value) {
+  if (value == null) return { kind: "text", value: "" };
+  if (Array.isArray(value)) return { kind: "list", value: value.map(transformFallback) };
+  if (typeof value === "object") return { kind: "json", value };
+  if (isHexAddress(value)) return { kind: "address", value };
+  return { kind: "text", value: String(value) };
+}
+
+function transformArg({ spec, parsed, transforms }) {
+  if (spec && typeof spec === "object" && !Array.isArray(spec) && spec.transform) {
+    const t = spec.transform;
+    const v = spec.value;
+    const fn = transforms?.[t];
+    if (fn) {
+      const tv = fn(v);
+      return { primary: tv, secondary: parsed };
+    }
+    return { primary: transformFallback(v), secondary: parsed };
+  }
+
+  if (parsed !== undefined) {
+    return { primary: transformFallback(parsed), secondary: undefined };
+  }
+
+  return { primary: transformFallback(spec), secondary: undefined };
+}
 
-  if (item.type && typeof item.type === "string") return item.type;
+function getStepMethodName(step) {
+  return (
+    step?.method ||
+    step?.function ||
+    step?.functionName ||
+    step?.selector ||
+    step?.signature ||
+    step?.contractMethod ||
+    step?.contract_method ||
+    (step?.rawArgs && typeof step.rawArgs === "object"
+      ? step.rawArgs.method ||
+        step.rawArgs.function ||
+        step.rawArgs.fn ||
+        step.rawArgs.name ||
+        step.rawArgs.selector ||
+        step.rawArgs.signature
+      : null)
+  );
+}
 
-  if (item.enum) return item.enum;
-  if (item.type === "enum" && item.enum) return item.enum;
+function getStepAbi(txDetails, step) {
+  const contractType = step?.contract_type || step?.contractType || null;
+  const methodName = getStepMethodName(step);
+  if (!contractType || !methodName) return null;
+  return txDetails?.abis?.[contractType]?.[methodName] || null;
+}
 
-  if (item.address_key != null || item.type === "address_key") return "address";
-  if (item.component_role != null || item.type === "component_role") return "component_role";
-  if (item.role != null || item.type === "role") return "role";
+function typeLabelFromSpecOrAbi({ spec, abiInput }) {
+  if (spec?.transform === "enum") {
+    const obj = spec.value;
+    if (obj && typeof obj === "object") {
+      return obj.enum || obj.name || "enum";
+    }
+    return "enum";
+  }
+  if (spec?.transform === "address_key") return "address";
+  if (spec?.transform === "component_role") return "component_role";
+  if (spec?.transform === "role") return "role";
 
+  if (abiInput?.type) return String(abiInput.type);
   return null;
 }
 
-function methodSignature(methodName, argItems) {
+function buildMethodSignature({ methodName, specs, abi }) {
   if (!methodName) return null;
 
-  const types = argItems
-    .map((a) => {
-      if (!a) return null;
-
-      if (a.type) {
-        if (a.type === "address_key") return "address";
-        if (a.type === "enum") {
-          const v = a.value;
-          if (v && typeof v === "object") return v.enum || v.name || "enum";
-          return "enum";
-        }
-        return a.type;
-      }
+  const abiInputs = Array.isArray(abi?.inputs) ? abi.inputs : null;
 
-      const inferred = argTypeFromParsed(a.value);
-      return inferred || null;
-    })
-    .filter(Boolean);
+  const count = Math.max(specs?.length || 0, abiInputs?.length || 0);
+  if (!count) return `${methodName}()`;
+
+  const types = Array.from({ length: count }).map((_, i) => {
+    const spec = specs?.[i];
+    const abiInput = abiInputs?.[i];
+    return typeLabelFromSpecOrAbi({ spec, abiInput }) || "unknown";
+  });
 
   return `${methodName}(${types.join(", ")})`;
 }
 
+function buildArgRows({ step, txDetails }) {
+  const specs = Array.isArray(step?.arguments) ? step.arguments : null;
+  const parsed = Array.isArray(step?.parsedArguments) ? step.parsedArguments : null;
+
+  const abi = getStepAbi(txDetails, step);
+  const abiInputs = Array.isArray(abi?.inputs) ? abi.inputs : null;
+
+  const count = Math.max(specs?.length || 0, parsed?.length || 0, abiInputs?.length || 0);
+
+  return Array.from({ length: count }).map((_, i) => {
+    const spec = specs?.[i];
+    const parsedValue = parsed?.[i];
+
+    const abiInput = abiInputs?.[i] || null;
+    const name = abiInput?.name || spec?.name || spec?.argName || null;
+
+    const type = typeLabelFromSpecOrAbi({ spec, abiInput });
+
+    return {
+      index: i,
+      name,
+      type,
+      spec,
+      parsed: parsedValue,
+    };
+  });
+}
+
+function renderSecondaryParsed({ secondary }) {
+  if (secondary === undefined || secondary === null) return null;
+  const asText = typeof secondary === "string" ? secondary : safeJsonStringify(secondary, 0);
+  return (
+    <Typography component="span" variant="caption" color="text.secondary" sx={{ ml: 1, fontFamily: "monospace" }}>
+      ({asText})
+    </Typography>
+  );
+}
+
 function buildSteps(txDetails) {
   if (!txDetails) return [];
 
@@ -271,7 +304,6 @@ function buildSteps(txDetails) {
 
   const summary = txDetails.summary || null;
   const description = txDetails.description || null;
-
   const title = summary || description || "Transaction";
 
   const to = txDetails.to || txDetails.target || null;
@@ -293,35 +325,14 @@ function buildSteps(txDetails) {
   ];
 }
 
-function StepItem({ index, step, addressBook, addresses }) {
-  const title = step.title || step.name || step.action || `Step ${index + 1}`;
+function StepItem({ index, step, addressBook, addresses, txDetails }) {
+  const title = step.title || step.name || step.action || step.description || `Step ${index + 1}`;
+
   const to = step.to || step.recipient || step.target || null;
+  const displayName = to && addressBook ? addressBook[to] : undefined;
   const value = step.value ?? step.amount ?? null;
   const token = step.token || step.tokenSymbol || step.asset || null;
-  const summary = step.summary || step.description || null;
-  const displayName = to && addressBook ? addressBook[to] : undefined;
-
-  const methodName =
-    step.method ||
-    step.function ||
-    step.functionName ||
-    step.selector ||
-    step.signature ||
-    step.contractMethod ||
-    step.contract_method ||
-    (step.rawArgs && typeof step.rawArgs === "object"
-      ? step.rawArgs.method ||
-        step.rawArgs.function ||
-        step.rawArgs.fn ||
-        step.rawArgs.name ||
-        step.rawArgs.selector ||
-        step.rawArgs.signature
-      : null);
-
-  const argsRaw =
-    step.rawArgs ?? step.args ?? step.parameters ?? step.params ?? step.contractArgs ?? step.contract_args ?? null;
-
-  const parsedArgs = step.parsedArguments || step.parsed_args || null;
+  const summary = step.summary || null;
 
   const contractAddressKey = step.contract_address_key || step.contractAddressKey || null;
   const contractType = step.contract_type || step.contractType || null;
@@ -332,12 +343,22 @@ function StepItem({ index, step, addressBook, addresses }) {
   const resolvedContractName =
     resolvedContractAddress && addressBook ? addressBook[resolvedContractAddress] : undefined;
 
-  const argItems = normalizeArgItems(parsedArgs ?? argsRaw);
+  const methodName = getStepMethodName(step);
+
   const transforms = React.useMemo(
     () => buildChangesetTransforms({ addresses, addressBook }),
     [addresses, addressBook]
   );
-  const signature = methodSignature(methodName, argItems);
+
+  const argRows = React.useMemo(() => buildArgRows({ step, txDetails }), [step, txDetails]);
+
+  const signature = React.useMemo(() => {
+    const specs = Array.isArray(step?.arguments) ? step.arguments : null;
+    const abi = getStepAbi(txDetails, step);
+    return buildMethodSignature({ methodName, specs, abi });
+  }, [methodName, step, txDetails]);
+
+  const hasAnyArgs = argRows.some((r) => r.spec !== undefined || r.parsed !== undefined) && argRows.length > 0;
 
   return (
     <Box
@@ -422,23 +443,33 @@ function StepItem({ index, step, addressBook, addresses }) {
               </Typography>
             )}
 
-            {argItems.length > 0 && (
+            {hasAnyArgs && (
               <Box sx={{ mt: 0.5 }}>
                 <Typography variant="caption" color="text.secondary">
                   Arguments:
                 </Typography>
 
                 <Stack spacing={0.5} sx={{ mt: 0.5 }}>
-                  {argItems.map((a) => {
-                    const label = a.name
-                      ? `${a.name}${a.type ? ` (${a.type})` : ""}`
-                      : a.type
-                      ? a.type
-                      : `arg${a.index}`;
-                    const tv = transformValue(a.value, transforms);
+                  {argRows.map((row) => {
+                    // Build a nice label:
+                    const label = row.name
+                      ? `${row.name}${row.type ? ` (${row.type})` : ""}`
+                      : row.type
+                      ? row.type
+                      : `arg${row.index}`;
+
+                    const { primary, secondary } = transformArg({
+                      spec: row.spec,
+                      parsed: row.parsed,
+                      transforms,
+                    });
+
+                    const showSecondary =
+                      secondary !== undefined && (row.spec?.transform === "enum" || primary.kind !== "address");
+
                     return (
                       <Stack
-                        key={`${a.index}-${label}`}
+                        key={`${row.index}-${label}`}
                         direction="row"
                         spacing={1}
                         alignItems="flex-start"
@@ -447,11 +478,14 @@ function StepItem({ index, step, addressBook, addresses }) {
                         <Typography
                           variant="caption"
                           color="text.secondary"
-                          sx={{ minWidth: 140, fontFamily: "monospace" }}
+                          sx={{ minWidth: 170, fontFamily: "monospace" }}
                         >
                           {label}:
                         </Typography>
-                        <Box sx={{ flex: 1, minWidth: 0 }}>{renderTransformedValue(tv)}</Box>
+                        <Box sx={{ flex: 1, minWidth: 0, display: "flex", alignItems: "center", flexWrap: "wrap" }}>
+                          {renderTransformedValue(primary)}
+                          {showSecondary && renderSecondaryParsed({ secondary })}
+                        </Box>
                       </Stack>
                     );
                   })}
@@ -459,7 +493,7 @@ function StepItem({ index, step, addressBook, addresses }) {
               </Box>
             )}
 
-            {parsedArgs == null && argsRaw != null && (
+            {!hasAnyArgs && step.rawArgs != null && (
               <Box
                 component="pre"
                 sx={{
@@ -473,7 +507,7 @@ function StepItem({ index, step, addressBook, addresses }) {
                   p: 1,
                 }}
               >
-                {typeof argsRaw === "string" ? argsRaw : safeJsonStringify(argsRaw, 2)}
+                {typeof step.rawArgs === "string" ? step.rawArgs : safeJsonStringify(step.rawArgs, 2)}
               </Box>
             )}
           </Stack>
@@ -520,7 +554,6 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
 
   const confirmationsCount = transaction?.confirmations?.length ?? 0;
   const confirmationsRequired = transaction?.confirmationsRequired ?? null;
-
   const signers = Array.isArray(transaction?.confirmations) ? transaction.confirmations : [];
 
   return (
@@ -650,6 +683,7 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
               step={step}
               addressBook={addressBook}
               addresses={txDetails?.addresses}
+              txDetails={txDetails}
             />
           ))}
         </Stack>
@@ -660,7 +694,7 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
       )}
 
       <Stack direction="row" spacing={1} sx={{ mt: 1.5, mb: 1 }} alignItems="center" justifyContent="space-between">
-        <Box>
+        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
           {safeUrl && (
             <Button
               size="small"

From 3f2accb2d1d204b69fedaf3962113c30dad85c00 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Thu, 27 Nov 2025 11:07:05 -0300
Subject: [PATCH 16/29] Fix blank spaces and unknown param

---
 src/TransactionCard.jsx | 427 ++++++++++++++++++++--------------------
 1 file changed, 218 insertions(+), 209 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 83798c8..17b7637 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -15,6 +15,7 @@ import {
   Chip,
   Button,
   Collapse,
+  Link,
 } from "@mui/material";
 
 import { useQuery } from "@tanstack/react-query";
@@ -45,12 +46,14 @@ function safeJsonStringify(v, space = 2) {
 }
 
 function buildChangesetTransforms({ addresses, addressBook }) {
-  const getAddressFromKeyOrAddress = (value) => {
-    const resolved = addresses?.[value] || value;
+  const getAddressFromKeyOrAddress = (value, preferLabel = null) => {
+    const resolved = (addresses && value != null ? addresses[value] : null) || value;
     if (isHexAddress(resolved)) {
-      return { kind: "address", value: resolved, displayName: addressBook?.[resolved] };
+      // Preferimos el label (ej: RM_IHE) cuando viene desde address_key
+      const displayName = preferLabel || addressBook?.[resolved];
+      return { kind: "address", value: resolved, displayName };
     }
-    return { kind: "text", value: resolved ?? "" };
+    return { kind: "text", value: resolved != null ? String(resolved) : "" };
   };
 
   const getRole = (value) => {
@@ -73,11 +76,14 @@ function buildChangesetTransforms({ addresses, addressBook }) {
     return { kind: "text", value: safeJsonStringify(value, 0) };
   };
 
-  const getEnumValue = (value) => {
+  const getEnumValue = (value, parsedValue = null) => {
     if (value && typeof value === "object") {
       const enumName = value.enum || value.name || value.type;
       const key = value.key ?? value.value ?? value.id ?? value.label;
-      if (enumName && key != null) return { kind: "text", value: `${enumName}.${String(key)}` };
+      if (enumName && key != null) {
+        const suffix = parsedValue != null && parsedValue !== "" ? ` (${String(parsedValue)})` : "";
+        return { kind: "text", value: `${enumName}.${String(key)}${suffix}` };
+      }
       if (key != null) return { kind: "text", value: String(key) };
       return { kind: "text", value: safeJsonStringify(value, 0) };
     }
@@ -85,13 +91,30 @@ function buildChangesetTransforms({ addresses, addressBook }) {
   };
 
   return {
-    address_key: (value) => getAddressFromKeyOrAddress(value),
+    address_key: (value) => getAddressFromKeyOrAddress(value, typeof value === "string" ? value : null),
     role: (value) => getRole(value),
     component_role: (value) => getComponentRole(value),
-    enum: (value) => getEnumValue(value),
+    enum: (value, parsedValue = null) => getEnumValue(value, parsedValue),
   };
 }
 
+// Soporta objetos tipo { transform: "enum", value: {...} } (deploy-scripts)
+function transformArgumentSpec(spec, transforms, parsedValue = null) {
+  if (!spec || typeof spec !== "object") return null;
+  const t = spec.transform || spec.type || null;
+  const v = spec.value !== undefined ? spec.value : spec;
+
+  if (t && transforms[t]) {
+    return transforms[t](v, parsedValue);
+  }
+
+  // fallback razonable
+  if (typeof v === "string" && isHexAddress(v)) return { kind: "address", value: v };
+  if (Array.isArray(v)) return { kind: "list", value: v.map((x) => ({ kind: "text", value: String(x) })) };
+  if (v && typeof v === "object") return { kind: "json", value: v };
+  return { kind: "text", value: v != null ? String(v) : "" };
+}
+
 function renderTransformedValue(v) {
   if (!v) return null;
 
@@ -133,129 +156,100 @@ function renderTransformedValue(v) {
   );
 }
 
-function transformFallback(value) {
-  if (value == null) return { kind: "text", value: "" };
-  if (Array.isArray(value)) return { kind: "list", value: value.map(transformFallback) };
-  if (typeof value === "object") return { kind: "json", value };
-  if (isHexAddress(value)) return { kind: "address", value };
-  return { kind: "text", value: String(value) };
+function getFunctionAbi(abis, contractType, fnName) {
+  if (!abis || !contractType || !fnName) return null;
+  return abis?.[contractType]?.[fnName] || null;
 }
 
-function transformArg({ spec, parsed, transforms }) {
-  if (spec && typeof spec === "object" && !Array.isArray(spec) && spec.transform) {
-    const t = spec.transform;
-    const v = spec.value;
-    const fn = transforms?.[t];
-    if (fn) {
-      const tv = fn(v);
-      return { primary: tv, secondary: parsed };
-    }
-    return { primary: transformFallback(v), secondary: parsed };
-  }
-
-  if (parsed !== undefined) {
-    return { primary: transformFallback(parsed), secondary: undefined };
-  }
-
-  return { primary: transformFallback(spec), secondary: undefined };
+function cleanTypeLabel(t) {
+  if (!t) return null;
+  return String(t).trim().replace(/\s+/g, " ");
 }
 
-function getStepMethodName(step) {
-  return (
-    step?.method ||
-    step?.function ||
-    step?.functionName ||
-    step?.selector ||
-    step?.signature ||
-    step?.contractMethod ||
-    step?.contract_method ||
-    (step?.rawArgs && typeof step.rawArgs === "object"
-      ? step.rawArgs.method ||
-        step.rawArgs.function ||
-        step.rawArgs.fn ||
-        step.rawArgs.name ||
-        step.rawArgs.selector ||
-        step.rawArgs.signature
-      : null)
+function inferSignatureTypes({ abiInputs, argsSpec, parsedArgs }) {
+  const n = Math.max(
+    Array.isArray(abiInputs) ? abiInputs.length : 0,
+    Array.isArray(argsSpec) ? argsSpec.length : 0,
+    Array.isArray(parsedArgs) ? parsedArgs.length : 0
   );
-}
-
-function getStepAbi(txDetails, step) {
-  const contractType = step?.contract_type || step?.contractType || null;
-  const methodName = getStepMethodName(step);
-  if (!contractType || !methodName) return null;
-  return txDetails?.abis?.[contractType]?.[methodName] || null;
-}
 
-function typeLabelFromSpecOrAbi({ spec, abiInput }) {
-  if (spec?.transform === "enum") {
-    const obj = spec.value;
-    if (obj && typeof obj === "object") {
-      return obj.enum || obj.name || "enum";
+  const out = [];
+  for (let i = 0; i < n; i++) {
+    const spec = Array.isArray(argsSpec) ? argsSpec[i] : null;
+    const parsed = Array.isArray(parsedArgs) ? parsedArgs[i] : null;
+    const inp = Array.isArray(abiInputs) ? abiInputs[i] : null;
+
+    // Preferimos enum name si el spec lo trae (más humano que uint8)
+    if (spec && typeof spec === "object" && (spec.transform || spec.type) === "enum") {
+      const enumName = spec?.value?.enum || spec?.value?.name;
+      out.push(cleanTypeLabel(enumName || "enum"));
+      continue;
     }
-    return "enum";
-  }
-  if (spec?.transform === "address_key") return "address";
-  if (spec?.transform === "component_role") return "component_role";
-  if (spec?.transform === "role") return "role";
-
-  if (abiInput?.type) return String(abiInput.type);
-  return null;
-}
 
-function buildMethodSignature({ methodName, specs, abi }) {
-  if (!methodName) return null;
+    if (spec && typeof spec === "object" && (spec.transform || spec.type) === "address_key") {
+      out.push("address");
+      continue;
+    }
 
-  const abiInputs = Array.isArray(abi?.inputs) ? abi.inputs : null;
+    const abiType = cleanTypeLabel(inp?.type);
+    if (abiType) {
+      out.push(abiType);
+      continue;
+    }
 
-  const count = Math.max(specs?.length || 0, abiInputs?.length || 0);
-  if (!count) return `${methodName}()`;
+    if (typeof parsed === "string" && isHexAddress(parsed)) {
+      out.push("address");
+      continue;
+    }
 
-  const types = Array.from({ length: count }).map((_, i) => {
-    const spec = specs?.[i];
-    const abiInput = abiInputs?.[i];
-    return typeLabelFromSpecOrAbi({ spec, abiInput }) || "unknown";
-  });
+    // fallback mínimo
+    out.push(null);
+  }
 
-  return `${methodName}(${types.join(", ")})`;
+  return out.filter(Boolean);
 }
 
-function buildArgRows({ step, txDetails }) {
-  const specs = Array.isArray(step?.arguments) ? step.arguments : null;
-  const parsed = Array.isArray(step?.parsedArguments) ? step.parsedArguments : null;
-
-  const abi = getStepAbi(txDetails, step);
-  const abiInputs = Array.isArray(abi?.inputs) ? abi.inputs : null;
-
-  const count = Math.max(specs?.length || 0, parsed?.length || 0, abiInputs?.length || 0);
-
-  return Array.from({ length: count }).map((_, i) => {
-    const spec = specs?.[i];
-    const parsedValue = parsed?.[i];
+function formatMethodSignature(methodName, types) {
+  if (!methodName) return null;
+  const t = Array.isArray(types) ? types.map(cleanTypeLabel).filter(Boolean) : [];
+  return `${methodName}(${t.join(", ")})`;
+}
 
-    const abiInput = abiInputs?.[i] || null;
-    const name = abiInput?.name || spec?.name || spec?.argName || null;
+function buildArgumentRows({ abiInputs, argsSpec, parsedArgs, transforms }) {
+  const n = Math.max(
+    Array.isArray(abiInputs) ? abiInputs.length : 0,
+    Array.isArray(argsSpec) ? argsSpec.length : 0,
+    Array.isArray(parsedArgs) ? parsedArgs.length : 0
+  );
 
-    const type = typeLabelFromSpecOrAbi({ spec, abiInput });
+  const rows = [];
+  for (let i = 0; i < n; i++) {
+    const inp = Array.isArray(abiInputs) ? abiInputs[i] : null;
+    const spec = Array.isArray(argsSpec) ? argsSpec[i] : null;
+    const parsed = Array.isArray(parsedArgs) ? parsedArgs[i] : null;
+
+    const name = (inp?.name && String(inp.name).trim()) || (spec?.name && String(spec.name).trim()) || `arg${i}`;
+    const type =
+      cleanTypeLabel(inp?.type) ||
+      cleanTypeLabel(spec?.type) ||
+      (spec?.transform ? cleanTypeLabel(spec.transform) : null);
+
+    // Preferimos el spec porque tiene info humana (enum keys, address_key, etc.)
+    let tv = null;
+    if (spec && typeof spec === "object") {
+      tv = transformArgumentSpec(spec, transforms, parsed);
+    } else if (parsed !== null && parsed !== undefined) {
+      // parsed raw
+      if (typeof parsed === "string" && isHexAddress(parsed)) tv = { kind: "address", value: parsed };
+      else tv = { kind: "text", value: String(parsed) };
+    } else if (spec != null) {
+      tv = { kind: "text", value: String(spec) };
+    }
 
-    return {
-      index: i,
-      name,
-      type,
-      spec,
-      parsed: parsedValue,
-    };
-  });
-}
+    rows.push({ key: `${i}-${name}`, name, type, tv });
+  }
 
-function renderSecondaryParsed({ secondary }) {
-  if (secondary === undefined || secondary === null) return null;
-  const asText = typeof secondary === "string" ? secondary : safeJsonStringify(secondary, 0);
-  return (
-    <Typography component="span" variant="caption" color="text.secondary" sx={{ ml: 1, fontFamily: "monospace" }}>
-      ({asText})
-    </Typography>
-  );
+  return rows;
 }
 
 function buildSteps(txDetails) {
@@ -304,6 +298,7 @@ function buildSteps(txDetails) {
 
   const summary = txDetails.summary || null;
   const description = txDetails.description || null;
+
   const title = summary || description || "Transaction";
 
   const to = txDetails.to || txDetails.target || null;
@@ -325,14 +320,30 @@ function buildSteps(txDetails) {
   ];
 }
 
-function StepItem({ index, step, addressBook, addresses, txDetails }) {
+function StepItem({ index, step, addressBook, addresses, abis }) {
   const title = step.title || step.name || step.action || step.description || `Step ${index + 1}`;
-
   const to = step.to || step.recipient || step.target || null;
-  const displayName = to && addressBook ? addressBook[to] : undefined;
   const value = step.value ?? step.amount ?? null;
   const token = step.token || step.tokenSymbol || step.asset || null;
   const summary = step.summary || null;
+  const displayName = to && addressBook ? addressBook[to] : undefined;
+
+  const methodName =
+    step.method ||
+    step.function ||
+    step.functionName ||
+    step.selector ||
+    step.signature ||
+    step.contractMethod ||
+    step.contract_method ||
+    (step.rawArgs && typeof step.rawArgs === "object"
+      ? step.rawArgs.method ||
+        step.rawArgs.function ||
+        step.rawArgs.fn ||
+        step.rawArgs.name ||
+        step.rawArgs.selector ||
+        step.rawArgs.signature
+      : null);
 
   const contractAddressKey = step.contract_address_key || step.contractAddressKey || null;
   const contractType = step.contract_type || step.contractType || null;
@@ -343,28 +354,34 @@ function StepItem({ index, step, addressBook, addresses, txDetails }) {
   const resolvedContractName =
     resolvedContractAddress && addressBook ? addressBook[resolvedContractAddress] : undefined;
 
-  const methodName = getStepMethodName(step);
+  const argsSpec = Array.isArray(step.arguments) ? step.arguments : null;
+  const parsedArgs = Array.isArray(step.parsedArguments)
+    ? step.parsedArguments
+    : Array.isArray(step.parsed_args)
+    ? step.parsed_args
+    : null;
+
+  const fnAbi = getFunctionAbi(abis, contractType, methodName);
+  const abiInputs = Array.isArray(fnAbi?.inputs) ? fnAbi.inputs : [];
 
   const transforms = React.useMemo(
     () => buildChangesetTransforms({ addresses, addressBook }),
     [addresses, addressBook]
   );
 
-  const argRows = React.useMemo(() => buildArgRows({ step, txDetails }), [step, txDetails]);
+  const signatureTypes = inferSignatureTypes({ abiInputs, argsSpec, parsedArgs });
+  const signature = methodName ? formatMethodSignature(methodName, signatureTypes) : null;
 
-  const signature = React.useMemo(() => {
-    const specs = Array.isArray(step?.arguments) ? step.arguments : null;
-    const abi = getStepAbi(txDetails, step);
-    return buildMethodSignature({ methodName, specs, abi });
-  }, [methodName, step, txDetails]);
+  const rows = buildArgumentRows({ abiInputs, argsSpec, parsedArgs, transforms });
 
-  const hasAnyArgs = argRows.some((r) => r.spec !== undefined || r.parsed !== undefined) && argRows.length > 0;
+  // Deja de mostrar "unknown": si no hay tipos, simplemente mostramos method()
+  const signatureClean = signature && /\(\s*\)/.test(signature) ? `${methodName}()` : signature;
 
   return (
     <Box
       sx={{
         mt: 0.5,
-        p: 1,
+        p: 1.25,
         borderRadius: 1,
         border: (theme) => `1px solid ${theme.palette.divider}`,
         backgroundColor: "rgba(255,255,255,0.02)",
@@ -384,7 +401,7 @@ function StepItem({ index, step, addressBook, addresses, txDetails }) {
             fontWeight: 600,
             color: "primary.main",
             flexShrink: 0,
-            mt: 0.25,
+            mt: 0.15,
           }}
         >
           {index + 1}
@@ -401,7 +418,7 @@ function StepItem({ index, step, addressBook, addresses, txDetails }) {
             </Typography>
           )}
 
-          <Stack spacing={0.25}>
+          <Stack spacing={0.35}>
             {to && (
               <Typography variant="caption" color="text.secondary">
                 To: <Address address={to} displayName={displayName} />
@@ -424,11 +441,11 @@ function StepItem({ index, step, addressBook, addresses, txDetails }) {
               </Typography>
             )}
 
-            {signature && (
+            {signatureClean && (
               <Typography variant="caption" color="text.secondary">
                 Method:{" "}
                 <Typography component="span" variant="caption" sx={{ fontFamily: "monospace" }}>
-                  {signature}
+                  {signatureClean}
                 </Typography>
               </Typography>
             )}
@@ -443,73 +460,43 @@ function StepItem({ index, step, addressBook, addresses, txDetails }) {
               </Typography>
             )}
 
-            {hasAnyArgs && (
+            {rows.length > 0 && (
               <Box sx={{ mt: 0.5 }}>
-                <Typography variant="caption" color="text.secondary">
+                <Typography variant="caption" color="text.secondary" sx={{ display: "block", mb: 0.25 }}>
                   Arguments:
                 </Typography>
 
-                <Stack spacing={0.5} sx={{ mt: 0.5 }}>
-                  {argRows.map((row) => {
-                    // Build a nice label:
-                    const label = row.name
-                      ? `${row.name}${row.type ? ` (${row.type})` : ""}`
-                      : row.type
-                      ? row.type
-                      : `arg${row.index}`;
-
-                    const { primary, secondary } = transformArg({
-                      spec: row.spec,
-                      parsed: row.parsed,
-                      transforms,
-                    });
-
-                    const showSecondary =
-                      secondary !== undefined && (row.spec?.transform === "enum" || primary.kind !== "address");
-
-                    return (
-                      <Stack
-                        key={`${row.index}-${label}`}
-                        direction="row"
-                        spacing={1}
-                        alignItems="flex-start"
-                        sx={{ flexWrap: "wrap" }}
+                <Stack spacing={0.5} sx={{ mt: 0.25 }}>
+                  {rows.map((r) => (
+                    <Box
+                      key={r.key}
+                      sx={{
+                        display: "grid",
+                        gridTemplateColumns: "minmax(90px, 150px) 1fr",
+                        columnGap: 1.25,
+                        alignItems: "start",
+                      }}
+                    >
+                      <Typography
+                        variant="caption"
+                        color="text.secondary"
+                        sx={{ fontFamily: "monospace", whiteSpace: "nowrap" }}
                       >
-                        <Typography
-                          variant="caption"
-                          color="text.secondary"
-                          sx={{ minWidth: 170, fontFamily: "monospace" }}
-                        >
-                          {label}:
-                        </Typography>
-                        <Box sx={{ flex: 1, minWidth: 0, display: "flex", alignItems: "center", flexWrap: "wrap" }}>
-                          {renderTransformedValue(primary)}
-                          {showSecondary && renderSecondaryParsed({ secondary })}
-                        </Box>
-                      </Stack>
-                    );
-                  })}
+                        {r.name}
+                        {r.type ? (
+                          <Typography component="span" variant="caption" sx={{ opacity: 0.75 }}>
+                            {` (${r.type})`}
+                          </Typography>
+                        ) : null}
+                        :
+                      </Typography>
+
+                      <Box sx={{ minWidth: 0 }}>{renderTransformedValue(r.tv)}</Box>
+                    </Box>
+                  ))}
                 </Stack>
               </Box>
             )}
-
-            {!hasAnyArgs && step.rawArgs != null && (
-              <Box
-                component="pre"
-                sx={{
-                  mt: 0.75,
-                  fontSize: "0.7rem",
-                  fontFamily: "monospace",
-                  whiteSpace: "pre-wrap",
-                  wordBreak: "break-word",
-                  backgroundColor: "rgba(255,255,255,0.02)",
-                  borderRadius: 1,
-                  p: 1,
-                }}
-              >
-                {typeof step.rawArgs === "string" ? step.rawArgs : safeJsonStringify(step.rawArgs, 2)}
-              </Box>
-            )}
           </Stack>
         </Box>
       </Stack>
@@ -554,8 +541,15 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
 
   const confirmationsCount = transaction?.confirmations?.length ?? 0;
   const confirmationsRequired = transaction?.confirmationsRequired ?? null;
+
   const signers = Array.isArray(transaction?.confirmations) ? transaction.confirmations : [];
 
+  // opcional: link al YAML original (si viene commit_ref + original_path)
+  const commitRef = txDetails?.commit_ref;
+  const originalPath = txDetails?.original_path;
+  const changesetSourceUrl =
+    commitRef && originalPath ? `https://github.com/ensuro/deploy-scripts/blob/${commitRef}/${originalPath}` : null;
+
   return (
     <Paper variant="outlined" sx={{ p: 2, mx: "auto" }}>
       <Typography variant="overline" color="text.secondary" sx={{ letterSpacing: 0.6, fontWeight: 600 }}>
@@ -650,24 +644,6 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
             Contract target: <Address address={contractTarget} displayName={contractTargetName} />
           </Typography>
         )}
-
-        {showTxMeta && (
-          <Box sx={{ mt: 1 }}>
-            <Typography variant="caption" color="text.secondary">
-              Signers:
-            </Typography>
-            <Stack direction="row" spacing={1} sx={{ mt: 0.5, flexWrap: "wrap" }}>
-              {signers.length === 0 && (
-                <Typography variant="caption" color="text.secondary">
-                  No signatures yet
-                </Typography>
-              )}
-              {signers.map((signer) => (
-                <Address key={signer.owner} address={signer.owner} displayName={addressBook[signer.owner]} />
-              ))}
-            </Stack>
-          </Box>
-        )}
       </Stack>
 
       <Typography variant="overline" color="text.secondary" sx={{ letterSpacing: 0.6, fontWeight: 600 }}>
@@ -683,7 +659,7 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
               step={step}
               addressBook={addressBook}
               addresses={txDetails?.addresses}
-              txDetails={txDetails}
+              abis={txDetails?.abis}
             />
           ))}
         </Stack>
@@ -693,8 +669,26 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
         </Typography>
       )}
 
+      {showTxMeta && (
+        <Box sx={{ mt: 1.25 }}>
+          <Typography variant="caption" color="text.secondary">
+            Signers:
+          </Typography>
+          <Stack direction="row" spacing={1} sx={{ mt: 0.5, flexWrap: "wrap" }}>
+            {signers.length === 0 && (
+              <Typography variant="caption" color="text.secondary">
+                No signatures yet
+              </Typography>
+            )}
+            {signers.map((signer) => (
+              <Address key={signer.owner} address={signer.owner} displayName={addressBook[signer.owner]} />
+            ))}
+          </Stack>
+        </Box>
+      )}
+
       <Stack direction="row" spacing={1} sx={{ mt: 1.5, mb: 1 }} alignItems="center" justifyContent="space-between">
-        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
+        <Stack direction="row" spacing={1}>
           {safeUrl && (
             <Button
               size="small"
@@ -709,7 +703,21 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
               Open in Safe web app
             </Button>
           )}
-        </Box>
+
+          {changesetSourceUrl && (
+            <Button
+              size="small"
+              variant="outlined"
+              color="inherit"
+              component={Link}
+              href={changesetSourceUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Open YAML (GitHub)
+            </Button>
+          )}
+        </Stack>
 
         <Stack direction="row" spacing={1}>
           <Button size="small" variant={showYaml ? "contained" : "outlined"} onClick={() => setShowYaml((v) => !v)}>
@@ -775,6 +783,7 @@ function TransactionCard({
   const txKey = hasTransaction
     ? transaction.safeTxHash || transaction.transactionHash || transaction.txHash
     : safeTxHashProp;
+
   const shouldFetchDetails = !txDetailsProp && hasTransaction && !!transaction.safeTxHash;
 
   const txDetailsResponse = useQuery({

From f719b1b566116e1e22eacd246cd19ba1c035cea7 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Thu, 27 Nov 2025 11:42:55 -0300
Subject: [PATCH 17/29] Smaller blank spaces and fallback argument

---
 src/TransactionCard.jsx | 124 ++++++++++++++++++++++++----------------
 1 file changed, 74 insertions(+), 50 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 17b7637..068ec0f 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -15,7 +15,7 @@ import {
   Chip,
   Button,
   Collapse,
-  Link,
+  Link as MuiLink,
 } from "@mui/material";
 
 import { useQuery } from "@tanstack/react-query";
@@ -45,11 +45,15 @@ function safeJsonStringify(v, space = 2) {
   }
 }
 
+function cleanTypeLabel(t) {
+  if (!t) return null;
+  return String(t).trim().replace(/\s+/g, " ");
+}
+
 function buildChangesetTransforms({ addresses, addressBook }) {
   const getAddressFromKeyOrAddress = (value, preferLabel = null) => {
     const resolved = (addresses && value != null ? addresses[value] : null) || value;
     if (isHexAddress(resolved)) {
-      // Preferimos el label (ej: RM_IHE) cuando viene desde address_key
       const displayName = preferLabel || addressBook?.[resolved];
       return { kind: "address", value: resolved, displayName };
     }
@@ -90,25 +94,32 @@ function buildChangesetTransforms({ addresses, addressBook }) {
     return { kind: "text", value: value != null ? String(value) : "" };
   };
 
+  const getBucket = (value, parsedValue = null) => {
+    const label = value != null ? String(value) : "";
+    if (parsedValue == null || parsedValue === "" || String(parsedValue) === label) {
+      return { kind: "text", value: label };
+    }
+    const pv = typeof parsedValue === "string" ? parsedValue : String(parsedValue);
+    const suffix = pv.startsWith("0x") ? truncateMiddle(pv, 10) : truncateMiddle(pv, 12);
+    return { kind: "text", value: `${label} (${suffix})` };
+  };
+
   return {
     address_key: (value) => getAddressFromKeyOrAddress(value, typeof value === "string" ? value : null),
     role: (value) => getRole(value),
     component_role: (value) => getComponentRole(value),
     enum: (value, parsedValue = null) => getEnumValue(value, parsedValue),
+    bucket: (value, parsedValue = null) => getBucket(value, parsedValue),
   };
 }
 
-// Soporta objetos tipo { transform: "enum", value: {...} } (deploy-scripts)
 function transformArgumentSpec(spec, transforms, parsedValue = null) {
   if (!spec || typeof spec !== "object") return null;
   const t = spec.transform || spec.type || null;
   const v = spec.value !== undefined ? spec.value : spec;
 
-  if (t && transforms[t]) {
-    return transforms[t](v, parsedValue);
-  }
+  if (t && transforms[t]) return transforms[t](v, parsedValue);
 
-  // fallback razonable
   if (typeof v === "string" && isHexAddress(v)) return { kind: "address", value: v };
   if (Array.isArray(v)) return { kind: "list", value: v.map((x) => ({ kind: "text", value: String(x) })) };
   if (v && typeof v === "object") return { kind: "json", value: v };
@@ -125,7 +136,7 @@ function renderTransformedValue(v) {
   if (v.kind === "list") {
     const items = Array.isArray(v.value) ? v.value : [];
     return (
-      <Stack spacing={0.5} sx={{ mt: 0.25 }}>
+      <Stack spacing={0.35} sx={{ mt: 0.15 }}>
         {items.map((it, idx) => (
           <Box key={idx}>{renderTransformedValue(it)}</Box>
         ))}
@@ -161,11 +172,6 @@ function getFunctionAbi(abis, contractType, fnName) {
   return abis?.[contractType]?.[fnName] || null;
 }
 
-function cleanTypeLabel(t) {
-  if (!t) return null;
-  return String(t).trim().replace(/\s+/g, " ");
-}
-
 function inferSignatureTypes({ abiInputs, argsSpec, parsedArgs }) {
   const n = Math.max(
     Array.isArray(abiInputs) ? abiInputs.length : 0,
@@ -179,14 +185,18 @@ function inferSignatureTypes({ abiInputs, argsSpec, parsedArgs }) {
     const parsed = Array.isArray(parsedArgs) ? parsedArgs[i] : null;
     const inp = Array.isArray(abiInputs) ? abiInputs[i] : null;
 
-    // Preferimos enum name si el spec lo trae (más humano que uint8)
-    if (spec && typeof spec === "object" && (spec.transform || spec.type) === "enum") {
+    const specT = spec && typeof spec === "object" ? spec.transform || spec.type : null;
+
+    if (specT === "enum") {
       const enumName = spec?.value?.enum || spec?.value?.name;
       out.push(cleanTypeLabel(enumName || "enum"));
       continue;
     }
-
-    if (spec && typeof spec === "object" && (spec.transform || spec.type) === "address_key") {
+    if (specT === "bucket") {
+      out.push("bucket");
+      continue;
+    }
+    if (specT === "address_key") {
       out.push("address");
       continue;
     }
@@ -202,7 +212,6 @@ function inferSignatureTypes({ abiInputs, argsSpec, parsedArgs }) {
       continue;
     }
 
-    // fallback mínimo
     out.push(null);
   }
 
@@ -215,6 +224,17 @@ function formatMethodSignature(methodName, types) {
   return `${methodName}(${t.join(", ")})`;
 }
 
+function defaultNameFromSpec(spec, i) {
+  const t = spec && typeof spec === "object" ? spec.transform || spec.type : null;
+  if (t === "bucket") return "bucket";
+  if (t === "address_key") return "address";
+  if (t === "role") return "role";
+  if (t === "component_role") return "component_role";
+  if (t === "enum") return spec?.value?.enum || "enum";
+  if (t) return String(t);
+  return `arg${i}`;
+}
+
 function buildArgumentRows({ abiInputs, argsSpec, parsedArgs, transforms }) {
   const n = Math.max(
     Array.isArray(abiInputs) ? abiInputs.length : 0,
@@ -228,22 +248,26 @@ function buildArgumentRows({ abiInputs, argsSpec, parsedArgs, transforms }) {
     const spec = Array.isArray(argsSpec) ? argsSpec[i] : null;
     const parsed = Array.isArray(parsedArgs) ? parsedArgs[i] : null;
 
-    const name = (inp?.name && String(inp.name).trim()) || (spec?.name && String(spec.name).trim()) || `arg${i}`;
+    const name =
+      (inp?.name && String(inp.name).trim()) ||
+      (spec?.name && String(spec.name).trim()) ||
+      (spec && typeof spec === "object" ? defaultNameFromSpec(spec, i) : `arg${i}`);
+
     const type =
       cleanTypeLabel(inp?.type) ||
       cleanTypeLabel(spec?.type) ||
       (spec?.transform ? cleanTypeLabel(spec.transform) : null);
 
-    // Preferimos el spec porque tiene info humana (enum keys, address_key, etc.)
     let tv = null;
     if (spec && typeof spec === "object") {
       tv = transformArgumentSpec(spec, transforms, parsed);
     } else if (parsed !== null && parsed !== undefined) {
-      // parsed raw
       if (typeof parsed === "string" && isHexAddress(parsed)) tv = { kind: "address", value: parsed };
       else tv = { kind: "text", value: String(parsed) };
     } else if (spec != null) {
       tv = { kind: "text", value: String(spec) };
+    } else {
+      tv = { kind: "text", value: "" };
     }
 
     rows.push({ key: `${i}-${name}`, name, type, tv });
@@ -371,12 +395,10 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
 
   const signatureTypes = inferSignatureTypes({ abiInputs, argsSpec, parsedArgs });
   const signature = methodName ? formatMethodSignature(methodName, signatureTypes) : null;
+  const signatureClean = methodName ? signature || `${methodName}()` : null;
 
   const rows = buildArgumentRows({ abiInputs, argsSpec, parsedArgs, transforms });
 
-  // Deja de mostrar "unknown": si no hay tipos, simplemente mostramos method()
-  const signatureClean = signature && /\(\s*\)/.test(signature) ? `${methodName}()` : signature;
-
   return (
     <Box
       sx={{
@@ -401,24 +423,24 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
             fontWeight: 600,
             color: "primary.main",
             flexShrink: 0,
-            mt: 0.15,
+            mt: 0.1,
           }}
         >
           {index + 1}
         </Box>
 
         <Box sx={{ flex: 1, minWidth: 0 }}>
-          <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.5 }}>
+          <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 0.35 }}>
             {title}
           </Typography>
 
           {summary && (
-            <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 0.35 }}>
               {summary}
             </Typography>
           )}
 
-          <Stack spacing={0.35}>
+          <Stack spacing={0.25}>
             {to && (
               <Typography variant="caption" color="text.secondary">
                 To: <Address address={to} displayName={displayName} />
@@ -461,37 +483,40 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
             )}
 
             {rows.length > 0 && (
-              <Box sx={{ mt: 0.5 }}>
+              <Box sx={{ mt: 0.35 }}>
                 <Typography variant="caption" color="text.secondary" sx={{ display: "block", mb: 0.25 }}>
                   Arguments:
                 </Typography>
 
-                <Stack spacing={0.5} sx={{ mt: 0.25 }}>
+                <Stack spacing={0.35}>
                   {rows.map((r) => (
                     <Box
                       key={r.key}
                       sx={{
-                        display: "grid",
-                        gridTemplateColumns: "minmax(90px, 150px) 1fr",
-                        columnGap: 1.25,
-                        alignItems: "start",
+                        display: "flex",
+                        alignItems: "baseline",
+                        gap: 1.25,
+                        minWidth: 0,
                       }}
                     >
-                      <Typography
-                        variant="caption"
-                        color="text.secondary"
-                        sx={{ fontFamily: "monospace", whiteSpace: "nowrap" }}
+                      <Box
+                        sx={{
+                          minWidth: 115,
+                          maxWidth: 180,
+                          fontFamily: "monospace",
+                          fontSize: "0.75rem",
+                          color: "text.secondary",
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                        }}
+                        title={`${r.name}${r.type ? ` (${r.type})` : ""}`}
                       >
                         {r.name}
-                        {r.type ? (
-                          <Typography component="span" variant="caption" sx={{ opacity: 0.75 }}>
-                            {` (${r.type})`}
-                          </Typography>
-                        ) : null}
-                        :
-                      </Typography>
-
-                      <Box sx={{ minWidth: 0 }}>{renderTransformedValue(r.tv)}</Box>
+                        {r.type ? <Box component="span" sx={{ opacity: 0.75 }}>{` (${r.type})`}</Box> : null}:
+                      </Box>
+
+                      <Box sx={{ flex: 1, minWidth: 0 }}>{renderTransformedValue(r.tv)}</Box>
                     </Box>
                   ))}
                 </Stack>
@@ -544,7 +569,6 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
 
   const signers = Array.isArray(transaction?.confirmations) ? transaction.confirmations : [];
 
-  // opcional: link al YAML original (si viene commit_ref + original_path)
   const commitRef = txDetails?.commit_ref;
   const originalPath = txDetails?.original_path;
   const changesetSourceUrl =
@@ -556,7 +580,7 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
         Transaction details
       </Typography>
 
-      <Stack spacing={0.5} sx={{ mb: 1.5, mt: 0.5 }}>
+      <Stack spacing={0.4} sx={{ mb: 1.5, mt: 0.5 }}>
         {showTxMeta && (
           <>
             <Typography variant="caption" color="text.secondary">
@@ -709,7 +733,7 @@ function DetailsPanel({ txDetails, transaction, safeTxHash, chainId, safeAddress
               size="small"
               variant="outlined"
               color="inherit"
-              component={Link}
+              component={MuiLink}
               href={changesetSourceUrl}
               target="_blank"
               rel="noopener noreferrer"

From 4243f9fffec3a1f9ab2c02b1b5701460e168e522 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Thu, 27 Nov 2025 12:01:01 -0300
Subject: [PATCH 18/29] Test fix in labels & arguments UI

---
 src/TransactionCard.jsx | 38 ++++++++++++++++++--------------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 068ec0f..0eaedde 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -94,14 +94,9 @@ function buildChangesetTransforms({ addresses, addressBook }) {
     return { kind: "text", value: value != null ? String(value) : "" };
   };
 
-  const getBucket = (value, parsedValue = null) => {
+  const getBucket = (value) => {
     const label = value != null ? String(value) : "";
-    if (parsedValue == null || parsedValue === "" || String(parsedValue) === label) {
-      return { kind: "text", value: label };
-    }
-    const pv = typeof parsedValue === "string" ? parsedValue : String(parsedValue);
-    const suffix = pv.startsWith("0x") ? truncateMiddle(pv, 10) : truncateMiddle(pv, 12);
-    return { kind: "text", value: `${label} (${suffix})` };
+    return { kind: "text", value: label };
   };
 
   return {
@@ -488,21 +483,21 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
                   Arguments:
                 </Typography>
 
-                <Stack spacing={0.35}>
+                <Box sx={{ display: "grid", rowGap: 0.6 }}>
                   {rows.map((r) => (
                     <Box
                       key={r.key}
                       sx={{
-                        display: "flex",
-                        alignItems: "baseline",
-                        gap: 1.25,
+                        display: "grid",
+                        gridTemplateColumns: "320px 1fr",
+                        columnGap: 2,
+                        alignItems: "start",
                         minWidth: 0,
                       }}
                     >
-                      <Box
+                      <Typography
+                        variant="body2"
                         sx={{
-                          minWidth: 115,
-                          maxWidth: 180,
                           fontFamily: "monospace",
                           fontSize: "0.75rem",
                           color: "text.secondary",
@@ -512,14 +507,17 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
                         }}
                         title={`${r.name}${r.type ? ` (${r.type})` : ""}`}
                       >
-                        {r.name}
-                        {r.type ? <Box component="span" sx={{ opacity: 0.75 }}>{` (${r.type})`}</Box> : null}:
-                      </Box>
-
-                      <Box sx={{ flex: 1, minWidth: 0 }}>{renderTransformedValue(r.tv)}</Box>
+                        <Box component="span">{r.name} </Box>
+                        <Box component="span" sx={{ opacity: 0.7 }}>
+                          ({r.type || "raw"})
+                        </Box>
+                        <Box component="span">:</Box>
+                      </Typography>
+
+                      <Box sx={{ minWidth: 0 }}>{renderTransformedValue(r.tv)}</Box>
                     </Box>
                   ))}
-                </Stack>
+                </Box>
               </Box>
             )}
           </Stack>

From d7110704055ecb82933ccbad28d389ab4603461b Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Thu, 27 Nov 2025 12:11:39 -0300
Subject: [PATCH 19/29] Adjust with of argument name

---
 src/TransactionCard.jsx | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 0eaedde..046d272 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -139,24 +139,23 @@ function renderTransformedValue(v) {
     );
   }
 
+  const commonSx = {
+    fontFamily: "monospace",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    display: "block",
+  };
+
   if (v.kind === "json") {
     return (
-      <Typography
-        component="span"
-        variant="caption"
-        sx={{ fontFamily: "monospace", whiteSpace: "pre-wrap", wordBreak: "break-word" }}
-      >
+      <Typography component="div" variant="caption" sx={commonSx}>
         {safeJsonStringify(v.value, 2)}
       </Typography>
     );
   }
 
   return (
-    <Typography
-      component="span"
-      variant="caption"
-      sx={{ fontFamily: "monospace", whiteSpace: "pre-wrap", wordBreak: "break-word" }}
-    >
+    <Typography component="div" variant="caption" sx={commonSx}>
       {String(v.value)}
     </Typography>
   );
@@ -489,8 +488,9 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
                       key={r.key}
                       sx={{
                         display: "grid",
-                        gridTemplateColumns: "320px 1fr",
-                        columnGap: 2,
+                        gridTemplateColumns: { xs: "1fr", sm: "minmax(120px, 210px) 1fr" },
+                        columnGap: { xs: 0, sm: 2 },
+                        rowGap: { xs: 0.25, sm: 0 },
                         alignItems: "start",
                         minWidth: 0,
                       }}
@@ -501,9 +501,10 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
                           fontFamily: "monospace",
                           fontSize: "0.75rem",
                           color: "text.secondary",
-                          whiteSpace: "nowrap",
+                          whiteSpace: { xs: "normal", sm: "nowrap" },
                           overflow: "hidden",
                           textOverflow: "ellipsis",
+                          minWidth: 0,
                         }}
                         title={`${r.name}${r.type ? ` (${r.type})` : ""}`}
                       >
@@ -514,7 +515,9 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
                         <Box component="span">:</Box>
                       </Typography>
 
-                      <Box sx={{ minWidth: 0 }}>{renderTransformedValue(r.tv)}</Box>
+                      <Box sx={{ minWidth: 0, display: "flex", justifyContent: "flex-start" }}>
+                        {renderTransformedValue(r.tv)}
+                      </Box>
                     </Box>
                   ))}
                 </Box>

From fdee443fa6bd8906537a56d0939e2d0c36dd32d4 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Thu, 27 Nov 2025 12:19:31 -0300
Subject: [PATCH 20/29] gridTemplateColumns of arguments size adjusted

---
 src/TransactionCard.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 046d272..72be6b5 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -488,7 +488,7 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
                       key={r.key}
                       sx={{
                         display: "grid",
-                        gridTemplateColumns: { xs: "1fr", sm: "minmax(120px, 210px) 1fr" },
+                        gridTemplateColumns: { sm: "minmax(0, max-content) minmax(0, 1fr)" },
                         columnGap: { xs: 0, sm: 2 },
                         rowGap: { xs: 0.25, sm: 0 },
                         alignItems: "start",

From a7f53beedc9280af4709e67602da0e4fbd1402df Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Fri, 28 Nov 2025 17:08:30 -0300
Subject: [PATCH 21/29] Deleted gap between row & column

---
 src/TransactionCard.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 72be6b5..6779157 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -482,15 +482,13 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
                   Arguments:
                 </Typography>
 
-                <Box sx={{ display: "grid", rowGap: 0.6 }}>
+                <Box sx={{ display: "grid" }}>
                   {rows.map((r) => (
                     <Box
                       key={r.key}
                       sx={{
                         display: "grid",
                         gridTemplateColumns: { sm: "minmax(0, max-content) minmax(0, 1fr)" },
-                        columnGap: { xs: 0, sm: 2 },
-                        rowGap: { xs: 0.25, sm: 0 },
                         alignItems: "start",
                         minWidth: 0,
                       }}

From 9d7a9caea41ec15725d443c84046c7ec45637067 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Fri, 28 Nov 2025 18:05:16 -0300
Subject: [PATCH 22/29] Fix label and values lineup

---
 src/TransactionCard.jsx | 81 ++++++++++++++++++++++++++---------------
 1 file changed, 52 insertions(+), 29 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 6779157..ed606f3 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -482,42 +482,65 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
                   Arguments:
                 </Typography>
 
-                <Box sx={{ display: "grid" }}>
-                  {rows.map((r) => (
-                    <Box
-                      key={r.key}
-                      sx={{
-                        display: "grid",
-                        gridTemplateColumns: { sm: "minmax(0, max-content) minmax(0, 1fr)" },
-                        alignItems: "start",
-                        minWidth: 0,
-                      }}
-                    >
-                      <Typography
-                        variant="body2"
+                <Box sx={{ display: "grid", rowGap: 0.6 }}>
+                  {rows.map((r) => {
+                    const kind = r.tv?.kind;
+                    const isMultiline = kind === "json" || kind === "list";
+
+                    return (
+                      <Box
+                        key={r.key}
                         sx={{
-                          fontFamily: "monospace",
-                          fontSize: "0.75rem",
-                          color: "text.secondary",
-                          whiteSpace: { xs: "normal", sm: "nowrap" },
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
+                          display: "grid",
+                          gridTemplateColumns: { sm: "minmax(0, max-content) minmax(0, 1fr)" },
+                          columnGap: 2,
+                          alignItems: isMultiline ? "start" : "center",
                           minWidth: 0,
                         }}
-                        title={`${r.name}${r.type ? ` (${r.type})` : ""}`}
                       >
-                        <Box component="span">{r.name} </Box>
-                        <Box component="span" sx={{ opacity: 0.7 }}>
-                          ({r.type || "raw"})
+                        <Box
+                          sx={{
+                            minWidth: 0,
+                            display: "flex",
+                            alignItems: isMultiline ? "start" : "center",
+                            pr: 0.25,
+                          }}
+                        >
+                          <Typography
+                            variant="caption"
+                            sx={{
+                              fontFamily: "monospace",
+                              fontSize: "0.75rem",
+                              color: "text.secondary",
+                              whiteSpace: "nowrap",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              lineHeight: 1.2,
+                            }}
+                            title={`${r.name}${r.type ? ` (${r.type})` : ""}`}
+                          >
+                            <Box component="span">{r.name}</Box>{" "}
+                            <Box component="span" sx={{ opacity: 0.7 }}>
+                              ({r.type || "raw"})
+                            </Box>
+                            <Box component="span">:</Box>
+                          </Typography>
                         </Box>
-                        <Box component="span">:</Box>
-                      </Typography>
 
-                      <Box sx={{ minWidth: 0, display: "flex", justifyContent: "flex-start" }}>
-                        {renderTransformedValue(r.tv)}
+                        <Box
+                          sx={{
+                            minWidth: 0,
+                            display: "flex",
+                            alignItems: isMultiline ? "start" : "center",
+                          }}
+                        >
+                          <Box component="span" sx={{ display: "inline-flex", alignItems: "center", minWidth: 0 }}>
+                            {renderTransformedValue(r.tv)}
+                          </Box>
+                        </Box>
                       </Box>
-                    </Box>
-                  ))}
+                    );
+                  })}
                 </Box>
               </Box>
             )}

From 62a4c449dd109409f3ab19055458225ee1999017 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Mon, 1 Dec 2025 12:50:42 -0300
Subject: [PATCH 23/29] Fix accordion span only expands when clicking Icon

---
 src/TransactionCard.jsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index ed606f3..f7b62f7 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -16,6 +16,7 @@ import {
   Button,
   Collapse,
   Link as MuiLink,
+  IconButton,
 } from "@mui/material";
 
 import { useQuery } from "@tanstack/react-query";
@@ -826,6 +827,8 @@ function TransactionCard({
   const { curAccount } = useWallet();
   const { owners, chainId, safeAddress } = useSafe();
 
+  const [expanded, setExpanded] = React.useState(false);
+
   const txKey = hasTransaction
     ? transaction.safeTxHash || transaction.transactionHash || transaction.txHash
     : safeTxHashProp;
@@ -941,8 +944,24 @@ function TransactionCard({
   const signEnabled = !alreadySigned && isOwner;
 
   return (
-    <Accordion elevation={2}>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
+    <Accordion expanded={expanded} onChange={() => {}} elevation={2}>
+      <AccordionSummary
+        expandIcon={
+          <IconButton
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              setExpanded((v) => !v);
+            }}
+            aria-label={expanded ? "Collapse" : "Expand"}
+          >
+            <ExpandMoreIcon />
+          </IconButton>
+        }
+        aria-controls="panel1a-content"
+        id="panel1a-header"
+      >
         <Stack direction="row" spacing={2} sx={{ alignItems: "center", flex: 1, minWidth: 0 }}>
           <Box sx={{ flex: 1, minWidth: 0 }}>
             <Typography

From 22dc7242e24c0e5b881a81c362710c9b47cfd6d3 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Mon, 1 Dec 2025 13:18:14 -0300
Subject: [PATCH 24/29] Expand only on click button

---
 src/TransactionCard.jsx | 49 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index f7b62f7..29dfc72 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -865,6 +865,12 @@ function TransactionCard({
     [onConfirm]
   );
 
+  const handleToggleExpand = React.useCallback((e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setExpanded((v) => !v);
+  }, []);
+
   if (!hasTransaction || variant === "panel") {
     if (!txDetails) return null;
     return (
@@ -946,18 +952,45 @@ function TransactionCard({
   return (
     <Accordion expanded={expanded} onChange={() => {}} elevation={2}>
       <AccordionSummary
+        onClick={(e) => {
+          if (e.target.closest("[data-accordion-toggle]")) return;
+          e.preventDefault();
+          e.stopPropagation();
+        }}
         expandIcon={
-          <IconButton
-            size="small"
-            onClick={(e) => {
+          <Box
+            data-accordion-toggle
+            onClick={handleToggleExpand}
+            onMouseDown={(e) => {
               e.stopPropagation();
-              e.preventDefault();
-              setExpanded((v) => !v);
+            }}
+            sx={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              p: 0.5,
+              borderRadius: 1,
+              cursor: "pointer",
+              userSelect: "none",
             }}
             aria-label={expanded ? "Collapse" : "Expand"}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                setExpanded((v) => !v);
+              }
+            }}
           >
-            <ExpandMoreIcon />
-          </IconButton>
+            <ExpandMoreIcon
+              sx={{
+                transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 150ms ease",
+              }}
+            />
+          </Box>
         }
         aria-controls="panel1a-content"
         id="panel1a-header"
@@ -989,7 +1022,7 @@ function TransactionCard({
           </Box>
 
           {!readOnly && (
-            <Box sx={{ ml: 1 }}>
+            <Box sx={{ ml: 1 }} onClick={(e) => e.stopPropagation()}>
               <WalletActionButton
                 onClick={handleApproveClick}
                 disabled={!signEnabled}

From 6ad1e47feb4d7f9bb33067a6b7d12d7d2c9e9d8c Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Mon, 1 Dec 2025 13:37:57 -0300
Subject: [PATCH 25/29] Revert last commits due to some cache error

---
 src/TransactionCard.jsx | 58 +++--------------------------------------
 1 file changed, 3 insertions(+), 55 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 29dfc72..ed606f3 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -16,7 +16,6 @@ import {
   Button,
   Collapse,
   Link as MuiLink,
-  IconButton,
 } from "@mui/material";
 
 import { useQuery } from "@tanstack/react-query";
@@ -827,8 +826,6 @@ function TransactionCard({
   const { curAccount } = useWallet();
   const { owners, chainId, safeAddress } = useSafe();
 
-  const [expanded, setExpanded] = React.useState(false);
-
   const txKey = hasTransaction
     ? transaction.safeTxHash || transaction.transactionHash || transaction.txHash
     : safeTxHashProp;
@@ -865,12 +862,6 @@ function TransactionCard({
     [onConfirm]
   );
 
-  const handleToggleExpand = React.useCallback((e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    setExpanded((v) => !v);
-  }, []);
-
   if (!hasTransaction || variant === "panel") {
     if (!txDetails) return null;
     return (
@@ -950,51 +941,8 @@ function TransactionCard({
   const signEnabled = !alreadySigned && isOwner;
 
   return (
-    <Accordion expanded={expanded} onChange={() => {}} elevation={2}>
-      <AccordionSummary
-        onClick={(e) => {
-          if (e.target.closest("[data-accordion-toggle]")) return;
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-        expandIcon={
-          <Box
-            data-accordion-toggle
-            onClick={handleToggleExpand}
-            onMouseDown={(e) => {
-              e.stopPropagation();
-            }}
-            sx={{
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              p: 0.5,
-              borderRadius: 1,
-              cursor: "pointer",
-              userSelect: "none",
-            }}
-            aria-label={expanded ? "Collapse" : "Expand"}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                e.stopPropagation();
-                setExpanded((v) => !v);
-              }
-            }}
-          >
-            <ExpandMoreIcon
-              sx={{
-                transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-                transition: "transform 150ms ease",
-              }}
-            />
-          </Box>
-        }
-        aria-controls="panel1a-content"
-        id="panel1a-header"
-      >
+    <Accordion elevation={2}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
         <Stack direction="row" spacing={2} sx={{ alignItems: "center", flex: 1, minWidth: 0 }}>
           <Box sx={{ flex: 1, minWidth: 0 }}>
             <Typography
@@ -1022,7 +970,7 @@ function TransactionCard({
           </Box>
 
           {!readOnly && (
-            <Box sx={{ ml: 1 }} onClick={(e) => e.stopPropagation()}>
+            <Box sx={{ ml: 1 }}>
               <WalletActionButton
                 onClick={handleApproveClick}
                 disabled={!signEnabled}

From 9d8434cb5a8518d7f4de4d286e86f4bdb44ec059 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Mon, 1 Dec 2025 18:07:22 -0300
Subject: [PATCH 26/29] Proposal Title and basic details in SearchPage

---
 src/SearchPage.jsx | 62 ++++++++++++++++++++++++----------------------
 src/safe-api.js    | 19 ++++++++++++++
 2 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/src/SearchPage.jsx b/src/SearchPage.jsx
index d7d7d81..964cd8e 100644
--- a/src/SearchPage.jsx
+++ b/src/SearchPage.jsx
@@ -3,26 +3,16 @@ import { Box, Stack, TextField, MenuItem, Button, Paper, Typography, Link } from
 import { useQuery } from "@tanstack/react-query";
 
 import { useSafe } from "./safe-ui";
-import { getTransactionDetailsByKey } from "./safe-api";
+import { chainPrefixFromId } from "./chain-utils";
+import { KEY_TRANSACTIONS, getChangesetAndSafeTxHashByKey, getSafeTransaction } from "./safe-api";
 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 = React.useMemo(() => ({ chainId, safeAddress }), [chainId, safeAddress]);
+
   const [mode, setMode] = React.useState("safeTxHash");
   const [searchText, setSearchText] = React.useState("");
   const [submittedQuery, setSubmittedQuery] = React.useState(null);
@@ -30,23 +20,23 @@ export default function SearchPage() {
   const chainPrefix = chainPrefixFromId(chainId);
   const hasSubmitted = !!submittedQuery?.text;
 
-  const query = useQuery({
+  const searchQuery = useQuery({
     queryKey: [KEY_SEARCH, submittedQuery?.mode, submittedQuery?.text, chainId, safeAddress],
     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 };
+      return getChangesetAndSafeTxHashByKey(safe, { type: submittedQuery.mode, key: submittedQuery.text });
     },
   });
 
+  const safeTxHash = searchQuery.data?.safeTxHash || null;
+
+  const txMetaQuery = useQuery({
+    queryKey: [KEY_TRANSACTIONS, "search-meta", chainId, safeAddress, safeTxHash],
+    enabled: !!safeTxHash,
+    queryFn: async () => getSafeTransaction(safe, safeTxHash),
+  });
+
   function onSubmit(e) {
     e.preventDefault();
     const text = searchText.trim();
@@ -91,11 +81,13 @@ export default function SearchPage() {
         </Box>
       </Paper>
 
-      {hasSubmitted && query.fetchStatus === "fetching" && <Typography>Searching…</Typography>}
+      {hasSubmitted && (searchQuery.fetchStatus === "fetching" || txMetaQuery.fetchStatus === "fetching") && (
+        <Typography>Searching…</Typography>
+      )}
 
-      {hasSubmitted && query.isError && (
+      {hasSubmitted && (searchQuery.isError || txMetaQuery.isError) && (
         <Paper variant="outlined" sx={{ p: 2 }}>
-          {query.error?.status === 404 ? (
+          {searchQuery.error?.status === 404 ? (
             <Typography color="text.secondary">
               No changeset found for transaction{" "}
               {submittedQuery?.text && (
@@ -109,13 +101,23 @@ export default function SearchPage() {
               )}
             </Typography>
           ) : (
-            <Typography color="error">Error: {String(query.error?.message || query.error)}</Typography>
+            <Typography color="error">
+              Error:{" "}
+              {String(
+                searchQuery.error?.message || txMetaQuery.error?.message || searchQuery.error || txMetaQuery.error
+              )}
+            </Typography>
           )}
         </Paper>
       )}
 
-      {hasSubmitted && query.isSuccess && query.data?.changeset && (
-        <TransactionCard txDetails={query.data.changeset} safeTxHash={query.data.safeTxHash} readOnly />
+      {hasSubmitted && searchQuery.isSuccess && searchQuery.data?.changeset && (
+        <TransactionCard
+          transaction={txMetaQuery.data || undefined}
+          txDetails={searchQuery.data.changeset}
+          safeTxHash={searchQuery.data.safeTxHash}
+          readOnly
+        />
       )}
     </Stack>
   );
diff --git a/src/safe-api.js b/src/safe-api.js
index ce090f6..dbe26b8 100644
--- a/src/safe-api.js
+++ b/src/safe-api.js
@@ -110,6 +110,11 @@ export async function resolveSafeTxHashFromTxHash(safe, txHash) {
   return safeTxHash;
 }
 
+export async function getSafeTransaction(safe, safeTxHash) {
+  const apiKit = getApi(safe.chainId);
+  return apiKit.getTransaction(safeTxHash);
+}
+
 export async function getTransactionDetailsByKey(safe, { type, key }) {
   if (type === "txHash") {
     const safeTxHash = await resolveSafeTxHashFromTxHash(safe, key);
@@ -117,3 +122,17 @@ export async function getTransactionDetailsByKey(safe, { type, key }) {
   }
   return getTransactionDetails(key);
 }
+export async function getChangesetAndSafeTxHashByKey(safe, { type, key }) {
+  const k = String(key || "").trim();
+  if (!k) return null;
+
+  if (type === "txHash") {
+    const safeTxHash = await resolveSafeTxHashFromTxHash(safe, k);
+    const changeset = await getTransactionDetails(safeTxHash);
+    return { safeTxHash, changeset };
+  }
+
+  const safeTxHash = k;
+  const changeset = await getTransactionDetails(safeTxHash);
+  return { safeTxHash, changeset };
+}

From 3a17172b3d78f40bbae3812b7615e71707034230 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Mon, 1 Dec 2025 18:16:55 -0300
Subject: [PATCH 27/29] Unique query when searching

---
 src/SearchPage.jsx | 52 ++++++++++++++++++++++------------------------
 src/safe-api.js    |  8 ++++++-
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/SearchPage.jsx b/src/SearchPage.jsx
index 964cd8e..ec57b01 100644
--- a/src/SearchPage.jsx
+++ b/src/SearchPage.jsx
@@ -3,15 +3,15 @@ import { Box, Stack, TextField, MenuItem, Button, Paper, Typography, Link } from
 import { useQuery } from "@tanstack/react-query";
 
 import { useSafe } from "./safe-ui";
+import { getChangesetAndSafeTxHashByKey, getSafeTransaction } from "./safe-api";
 import { chainPrefixFromId } from "./chain-utils";
-import { KEY_TRANSACTIONS, getChangesetAndSafeTxHashByKey, getSafeTransaction } from "./safe-api";
 import TransactionCard from "./TransactionCard";
 
 const KEY_SEARCH = "tx-search";
 
 export default function SearchPage() {
-  const { chainId, safeAddress } = useSafe();
-  const safe = React.useMemo(() => ({ chainId, safeAddress }), [chainId, safeAddress]);
+  const safe = useSafe();
+  const { chainId, safeAddress } = safe;
 
   const [mode, setMode] = React.useState("safeTxHash");
   const [searchText, setSearchText] = React.useState("");
@@ -20,21 +20,24 @@ export default function SearchPage() {
   const chainPrefix = chainPrefixFromId(chainId);
   const hasSubmitted = !!submittedQuery?.text;
 
-  const searchQuery = useQuery({
+  const query = useQuery({
     queryKey: [KEY_SEARCH, submittedQuery?.mode, submittedQuery?.text, chainId, safeAddress],
     enabled: hasSubmitted,
     queryFn: async () => {
       if (!submittedQuery) return null;
-      return getChangesetAndSafeTxHashByKey(safe, { type: submittedQuery.mode, key: submittedQuery.text });
-    },
-  });
 
-  const safeTxHash = searchQuery.data?.safeTxHash || null;
+      const base = await getChangesetAndSafeTxHashByKey(safe, {
+        type: submittedQuery.mode,
+        key: submittedQuery.text,
+      });
+
+      if (!base?.safeTxHash) return null;
+
+      const txMeta = await getSafeTransaction(safe, base.safeTxHash);
 
-  const txMetaQuery = useQuery({
-    queryKey: [KEY_TRANSACTIONS, "search-meta", chainId, safeAddress, safeTxHash],
-    enabled: !!safeTxHash,
-    queryFn: async () => getSafeTransaction(safe, safeTxHash),
+      return { ...base, txMeta };
+    },
+    refetchOnWindowFocus: false,
   });
 
   function onSubmit(e) {
@@ -48,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 }}>
@@ -81,13 +85,11 @@ export default function SearchPage() {
         </Box>
       </Paper>
 
-      {hasSubmitted && (searchQuery.fetchStatus === "fetching" || txMetaQuery.fetchStatus === "fetching") && (
-        <Typography>Searching…</Typography>
-      )}
+      {isSearching && <Typography>Searching…</Typography>}
 
-      {hasSubmitted && (searchQuery.isError || txMetaQuery.isError) && (
+      {hasSubmitted && query.isError && (
         <Paper variant="outlined" sx={{ p: 2 }}>
-          {searchQuery.error?.status === 404 ? (
+          {query.error?.status === 404 ? (
             <Typography color="text.secondary">
               No changeset found for transaction{" "}
               {submittedQuery?.text && (
@@ -101,21 +103,17 @@ export default function SearchPage() {
               )}
             </Typography>
           ) : (
-            <Typography color="error">
-              Error:{" "}
-              {String(
-                searchQuery.error?.message || txMetaQuery.error?.message || searchQuery.error || txMetaQuery.error
-              )}
-            </Typography>
+            <Typography color="error">Error: {String(query.error?.message || query.error)}</Typography>
           )}
         </Paper>
       )}
 
-      {hasSubmitted && searchQuery.isSuccess && searchQuery.data?.changeset && (
+      {!isSearching && hasSubmitted && query.isSuccess && query.data?.changeset && (
         <TransactionCard
-          transaction={txMetaQuery.data || undefined}
-          txDetails={searchQuery.data.changeset}
-          safeTxHash={searchQuery.data.safeTxHash}
+          key={query.data.safeTxHash}
+          transaction={query.data.txMeta}
+          txDetails={query.data.changeset}
+          safeTxHash={query.data.safeTxHash}
           readOnly
         />
       )}
diff --git a/src/safe-api.js b/src/safe-api.js
index dbe26b8..064f34a 100644
--- a/src/safe-api.js
+++ b/src/safe-api.js
@@ -112,7 +112,13 @@ export async function resolveSafeTxHashFromTxHash(safe, txHash) {
 
 export async function getSafeTransaction(safe, safeTxHash) {
   const apiKit = getApi(safe.chainId);
-  return apiKit.getTransaction(safeTxHash);
+  try {
+    return await apiKit.getTransaction(safeTxHash);
+  } catch (e) {
+    const err = new Error(`SafeTxService error fetching txMeta for ${safeTxHash}: ${e?.message || e}`);
+    err.cause = e;
+    throw err;
+  }
 }
 
 export async function getTransactionDetailsByKey(safe, { type, key }) {

From 2796f36132bbb9686e0b326fd7aac55de1c181d8 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Mon, 1 Dec 2025 19:57:38 -0300
Subject: [PATCH 28/29] Render raw amount values

---
 src/TransactionCard.jsx | 82 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 80 insertions(+), 2 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index ed606f3..3d38bdf 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -44,6 +44,85 @@ function safeJsonStringify(v, space = 2) {
     return String(v);
   }
 }
+function asBigIntMaybe(v) {
+  if (v == null) return null;
+  if (typeof v === "bigint") return v;
+
+  if (typeof v === "number" && Number.isFinite(v)) {
+    return BigInt(Math.trunc(v));
+  }
+
+  if (typeof v === "string") {
+    const s = v.trim();
+    if (!s) return null;
+    try {
+      if (s.startsWith("0x") || s.startsWith("0X")) return BigInt(s);
+      if (/^[0-9]+$/.test(s)) return BigInt(s);
+    } catch {
+      return null;
+    }
+  }
+
+  return null;
+}
+
+function formatUnitsDecimal(raw, decimals) {
+  const bi = asBigIntMaybe(raw);
+  const d = Number(decimals);
+  if (bi == null || !Number.isFinite(d) || d < 0) return null;
+
+  const neg = bi < 0n;
+  const abs = neg ? -bi : bi;
+
+  const s = abs.toString();
+  const whole = s.length > d ? s.slice(0, -d) : "0";
+  const fracRaw = s.length > d ? s.slice(-d) : s.padStart(d, "0");
+  const frac = fracRaw.replace(/0+$/, "");
+
+  return `${neg ? "-" : ""}${whole}${frac ? "." + frac : ""}`;
+}
+
+function inferDecimalsFromStep(step) {
+  return (
+    step?.decimals ?? step?.tokenDecimals ?? step?.token_decimals ?? step?.assetDecimals ?? step?.asset_decimals ?? null
+  );
+}
+
+function renderAmountWithRaw({ value, token, step }) {
+  const isObj = value && typeof value === "object" && !Array.isArray(value);
+
+  const raw = isObj ? value.raw ?? value.value ?? value.amount ?? null : value;
+  const rawStr = raw != null ? String(raw) : "";
+
+  const decimals = isObj
+    ? value.decimals ?? value.tokenDecimals ?? value.token_decimals ?? inferDecimalsFromStep(step)
+    : inferDecimalsFromStep(step);
+
+  const pretty =
+    (isObj ? value.formatted ?? value.pretty ?? null : null) ||
+    (decimals != null ? formatUnitsDecimal(raw, decimals) : null);
+
+  if (pretty) {
+    return (
+      <>
+        {pretty}
+        {token ? ` ${token}` : ""}
+        {rawStr && (
+          <Box component="span" sx={{ opacity: 0.7 }}>
+            {` (raw: ${rawStr})`}
+          </Box>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {rawStr || "-"}
+      {token ? ` ${token}` : ""}
+    </>
+  );
+}
 
 function cleanTypeLabel(t) {
   if (!t) return null;
@@ -470,8 +549,7 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
               <Typography variant="caption" color="text.secondary">
                 Amount:{" "}
                 <Typography component="span" variant="caption" sx={{ fontFamily: "monospace" }}>
-                  {String(value)}
-                  {token ? ` ${token}` : ""}
+                  {renderAmountWithRaw({ value, token, step })}
                 </Typography>
               </Typography>
             )}

From 1ebc4b47ee161978c2f74d41816a778d1347db04 Mon Sep 17 00:00:00 2001
From: LucasCambon <lucambon08@gmail.com>
Date: Tue, 2 Dec 2025 11:23:45 -0300
Subject: [PATCH 29/29] Fix amount parsed value & raw value

---
 src/TransactionCard.jsx | 43 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/TransactionCard.jsx b/src/TransactionCard.jsx
index 3d38bdf..7272788 100644
--- a/src/TransactionCard.jsx
+++ b/src/TransactionCard.jsx
@@ -44,6 +44,7 @@ function safeJsonStringify(v, space = 2) {
     return String(v);
   }
 }
+
 function asBigIntMaybe(v) {
   if (v == null) return null;
   if (typeof v === "bigint") return v;
@@ -308,6 +309,19 @@ function defaultNameFromSpec(spec, i) {
   return `arg${i}`;
 }
 
+function isAmountArg(name, type, spec) {
+  const n = String(name || "").toLowerCase();
+  const t = String(type || "").toLowerCase();
+  const st = String(spec?.transform || spec?.type || "").toLowerCase();
+
+  if (n === "amount" || n.endsWith("_amount")) return true;
+  if (t === "amount" || st === "amount") return true;
+
+  if ((t.includes("uint") || t.includes("int")) && n.includes("amount")) return true;
+
+  return false;
+}
+
 function buildArgumentRows({ abiInputs, argsSpec, parsedArgs, transforms }) {
   const n = Math.max(
     Array.isArray(abiInputs) ? abiInputs.length : 0,
@@ -343,7 +357,17 @@ function buildArgumentRows({ abiInputs, argsSpec, parsedArgs, transforms }) {
       tv = { kind: "text", value: "" };
     }
 
-    rows.push({ key: `${i}-${name}`, name, type, tv });
+    const isAmount = isAmountArg(name, type, spec || {});
+    const amountValue =
+      parsed !== null && parsed !== undefined
+        ? parsed
+        : spec && typeof spec === "object" && spec.value !== undefined
+        ? spec.value
+        : tv?.kind === "text"
+        ? tv.value
+        : null;
+
+    rows.push({ key: `${i}-${name}`, name, type, tv, isAmount, amountValue });
   }
 
   return rows;
@@ -613,7 +637,22 @@ function StepItem({ index, step, addressBook, addresses, abis }) {
                           }}
                         >
                           <Box component="span" sx={{ display: "inline-flex", alignItems: "center", minWidth: 0 }}>
-                            {renderTransformedValue(r.tv)}
+                            {r.isAmount ? (
+                              <Typography
+                                component="div"
+                                variant="caption"
+                                sx={{
+                                  fontFamily: "monospace",
+                                  whiteSpace: "pre-wrap",
+                                  wordBreak: "break-word",
+                                  display: "block",
+                                }}
+                              >
+                                {renderAmountWithRaw({ value: r.amountValue, token, step })}
+                              </Typography>
+                            ) : (
+                              renderTransformedValue(r.tv)
+                            )}
                           </Box>
                         </Box>
                       </Box>