improve tx details information

src/components/TxQueueWidget/TxQueueWidgetItem.tsx

@@ -1,7 +1,10 @@
 import Image from "next/image";
 import * as React from "react";
 
-import { TransactionProposedItemUi } from "@/domain/TransactionProposedItemUi";
+import {
+  isXsignerOrCustomContract,
+  TransactionProposedItemUi,
+} from "@/domain/TransactionProposedItemUi";
 import { TX_TYPE } from "@/hooks/transactions/const";
 import { formatDate, truncateAddress } from "@/utils/formatString";
 
@@ -44,7 +47,11 @@ export const TxQueueWidgetItem = ({ data, owners }: Props) => {
             height={30}
           />
           <StyledStack>
-            <span>{type === "Settings" ? methodName : type}</span>
+            <span>
+              {isXsignerOrCustomContract(type) && methodName
+                ? methodName
+                : type}
+            </span>
             <span>{date}</span>
             <p>
               {data.txMsg} {truncateAddress(to, 12)}

src/components/TxTable/TxDetail/AdvancedDetail/ArgsTable.tsx

@@ -0,0 +1,101 @@
+import {
+  Box,
+  Grid,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+
+import { ContractParam } from "@/domain/repositores/ISquidDbRepository";
+
+interface Props {
+  argName: string;
+  argValue: ContractParam[];
+  argKey: string;
+}
+
+export function ArgsTable({ argValue: value, argName: name, argKey }: Props) {
+  return (
+    <Stack
+      display="flex"
+      width="100%"
+      direction="row"
+      alignItems="center"
+      pt={2}
+      pb={2}
+    >
+      <Grid
+        item
+        sx={{
+          color: "#837376",
+        }}
+        xs={3}
+        sm={3}
+        md={3}
+      >
+        {`${name} (decoded):`}
+      </Grid>
+      <Box sx={{ overflowX: "auto" }}>
+        <TableContainer
+          component={Paper}
+          sx={{
+            borderRadius: "4px",
+            border: "1px solid rgba(0, 0, 0, 0.12)",
+            overflow: "auto",
+          }}
+        >
+          <Table aria-label={`args-table-${argKey}`} size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell
+                  sx={{
+                    paddingLeft: "0.4rem",
+                    color: "#837376",
+                    fontWeight: "bolder",
+                    textTransform: "uppercase",
+                    fontSize: "0.8rem",
+                    width: "5rem",
+                  }}
+                >
+                  name
+                </TableCell>
+                <TableCell
+                  sx={{
+                    color: "#837376",
+                    fontWeight: "bolder",
+                    textTransform: "uppercase",
+                    fontSize: "0.8rem",
+                  }}
+                >
+                  value
+                </TableCell>
+              </TableRow>
+            </TableHead>
+
+            <TableBody>
+              {value.map((element, index) => (
+                <TableRow
+                  key={element.name + index}
+                  sx={{
+                    "&:last-child td, &:last-child th": { border: 0 },
+                  }}
+                >
+                  <TableCell
+                    sx={{ color: "#837376", paddingLeft: "0.4rem" }}
+                    scope="row"
+                  >{`${element.name}:`}</TableCell>
+                  <TableCell colSpan={3}>{element.value}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Box>
+    </Stack>
+  );
+}

src/components/TxTable/TxDetail/AdvancedDetail/index.tsx

@@ -0,0 +1,95 @@
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { Box, Grid, Typography } from "@mui/material";
+import { Fragment, useState } from "react";
+
+import { TransactionProposedItemUi } from "@/domain/TransactionProposedItemUi";
+
+import { CustomGridItem } from "../styled";
+import { ArgsTable } from "./ArgsTable";
+import {
+  DetailsAccordion,
+  DetailsAccordionContent,
+  DetailsAccordionSummary,
+} from "./styled";
+
+type Props = { data: TransactionProposedItemUi };
+
+export function AdvancedDetail({ data }: Props) {
+  const [showAdvancedDetails, setShowAdvancedDetails] = useState(true);
+
+  return (
+    <DetailsAccordion
+      key={data.id}
+      expanded={showAdvancedDetails}
+      onChange={() => setShowAdvancedDetails(!showAdvancedDetails)}
+    >
+      <DetailsAccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls={`advanced-details-content-${data.id}`}
+        id={`advanced-details-header-${data.id}`}
+      >
+        <Typography
+          variant="subtitle1"
+          sx={{
+            fontWeight: "bold",
+            cursor: "pointer",
+            color: "#ffe873", // Color del enlace
+            textDecoration: "underline", // Subrayado para parecer un enlace
+          }}
+        >
+          Details
+        </Typography>
+      </DetailsAccordionSummary>
+      <DetailsAccordionContent>
+        <AdvancedDetailContent data={data} />
+      </DetailsAccordionContent>
+    </DetailsAccordion>
+  );
+}
+
+export function AdvancedDetailContent({ data }: Props) {
+  const DATA = {
+    "Method selector": data.selector,
+    "Raw args": data.rawArgs ?? "-",
+    "Method name": data.methodName ?? "-",
+    Arguments: data.args?.length === 0 || data.args === null ? "-" : data.args,
+    Value: data.valueAmount ?? data.value,
+    "Creation block #": data.creationBlockNumber,
+    "Last update block #": data.lastUpdatedBlockNumber,
+  };
+
+  return (
+    <Grid container>
+      {Object.entries(DATA).map(([name, value]) => {
+        const argKey = `${name}-${data.txId}`;
+
+        if (Array.isArray(value)) {
+          return (
+            <ArgsTable
+              key={argKey}
+              argKey={argKey}
+              argName={name}
+              argValue={value}
+            />
+          );
+        }
+        return (
+          <Fragment key={argKey}>
+            <CustomGridItem colType="name">{`${name}:`}</CustomGridItem>
+            <CustomGridItem colType="value">
+              <Box
+                sx={{
+                  padding: "0.6em 0",
+                  wordWrap: "break-word",
+                  wordBreak: "break-all",
+                }}
+              >
+                {value as string}
+              </Box>
+            </CustomGridItem>
+          </Fragment>
+        );
+      })}
+    </Grid>
+  );
+}

src/components/TxTable/TxDetail/AdvancedDetail/styled.tsx

@@ -0,0 +1,48 @@
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import Accordion, { AccordionProps } from "@mui/material/Accordion";
+import AccordionDetails, {
+  AccordionDetailsProps,
+} from "@mui/material/AccordionDetails";
+import AccordionSummary, {
+  AccordionSummaryProps,
+} from "@mui/material/AccordionSummary";
+import { styled } from "@mui/material/styles";
+
+export const DetailsAccordion = styled(Accordion)<AccordionProps>(() => ({
+  boxShadow: "none",
+  "&:before": {
+    display: "none",
+  },
+  "&.Mui-expanded": {
+    margin: 0,
+  },
+}));
+
+export const DetailsAccordionSummary = styled(
+  (props: AccordionSummaryProps) => (
+    <AccordionSummary expandIcon={<ArrowBackIosIcon />} {...props} />
+  )
+)(() => ({
+  backgroundColor: "inherit",
+  boxShadow: "none",
+  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
+    transform: "rotate(90deg)",
+  },
+  "&:before": {
+    display: "none",
+  },
+  "&.Mui-expanded": {
+    margin: 0,
+  },
+  "& .MuiAccordionSummary-content": {
+    margin: 0,
+  },
+  padding: 0,
+}));
+
+export const DetailsAccordionContent = styled(
+  AccordionDetails
+)<AccordionDetailsProps>(() => ({
+  backgroundColor: "#201A1B",
+  padding: 0,
+}));