From 3d65f2f8a3bafd03278fb97469e298f491db706b Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Fri, 26 Jan 2024 19:34:41 -0300
Subject: [PATCH 1/2] Improving transaction details

---
 .../TxTable/TxDetail/AdvancedDetail.tsx       | 108 ------------------
 .../TxDetail/AdvancedDetail/ArgsTable.tsx     | 101 ++++++++++++++++
 .../TxTable/TxDetail/AdvancedDetail/index.tsx |  95 +++++++++++++++
 .../TxDetail/AdvancedDetail/styled.tsx        |  48 ++++++++
 src/components/TxTable/TxDetail/index.tsx     |  23 +---
 5 files changed, 246 insertions(+), 129 deletions(-)
 delete mode 100644 src/components/TxTable/TxDetail/AdvancedDetail.tsx
 create mode 100644 src/components/TxTable/TxDetail/AdvancedDetail/ArgsTable.tsx
 create mode 100644 src/components/TxTable/TxDetail/AdvancedDetail/index.tsx
 create mode 100644 src/components/TxTable/TxDetail/AdvancedDetail/styled.tsx

diff --git a/src/components/TxTable/TxDetail/AdvancedDetail.tsx b/src/components/TxTable/TxDetail/AdvancedDetail.tsx
deleted file mode 100644
index b5a0c741..00000000
--- a/src/components/TxTable/TxDetail/AdvancedDetail.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Box, Grid } from "@mui/material";
-import { Fragment } from "react";
-
-import { TransactionProposedItemUi } from "@/domain/TransactionProposedItemUi";
-
-import { CustomGridItem } from "./styled";
-
-type Props = { data: TransactionProposedItemUi };
-
-export const AdvancedDetail = ({ data }: Props) => {
-  const DATA = {
-    "Method selector": data.selector,
-    "Method name": data.methodName ?? "-",
-    "Raw args": data.rawArgs ?? "-",
-    Argument: 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], index) => {
-        if (Array.isArray(value)) {
-          return (
-            <Fragment key={name + index}>
-              <Grid
-                item
-                sx={{
-                  color: "#837376",
-                }}
-                xs={3}
-                sm={3}
-                md={3}
-              >{`${name}s (decoded):`}</Grid>
-              <CustomGridItem colType="value" />
-              <Grid
-                item
-                xs={3}
-                sm={3}
-                md={3}
-                color="#837376"
-                pl={"1.5rem"}
-                sx={{
-                  fontWeight: "bolder",
-                  fontSize: "0.8rem",
-                  marginTop: "0.5rem",
-                  textTransform: "uppercase",
-                }}
-                mb={index === value.length - 1 ? "1rem" : ""}
-              >
-                {name} name
-              </Grid>
-              <Grid
-                item
-                xs={9}
-                sm={9}
-                md={9}
-                sx={{
-                  fontWeight: "bolder",
-                  fontSize: "0.8rem",
-                  marginTop: "0.5rem",
-                  textTransform: "uppercase",
-                }}
-              >
-                {name} value
-              </Grid>
-              {value.map((element, index) => {
-                return (
-                  <Fragment key={element.name + index}>
-                    <Grid
-                      item
-                      xs={3}
-                      sm={3}
-                      md={3}
-                      color="#837376"
-                      pl={"1.5rem"}
-                      mb={index === value.length - 1 ? "0.5rem" : ""}
-                    >{`${element.name}:`}</Grid>
-                    <Grid item xs={9} sm={9} md={9}>
-                      {element.value}
-                    </Grid>
-                  </Fragment>
-                );
-              })}
-            </Fragment>
-          );
-        }
-        return (
-          <Fragment key={index}>
-            <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>
-  );
-};
diff --git a/src/components/TxTable/TxDetail/AdvancedDetail/ArgsTable.tsx b/src/components/TxTable/TxDetail/AdvancedDetail/ArgsTable.tsx
new file mode 100644
index 00000000..2d4899f0
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/TxTable/TxDetail/AdvancedDetail/index.tsx b/src/components/TxTable/TxDetail/AdvancedDetail/index.tsx
new file mode 100644
index 00000000..ce03f2f9
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/TxTable/TxDetail/AdvancedDetail/styled.tsx b/src/components/TxTable/TxDetail/AdvancedDetail/styled.tsx
new file mode 100644
index 00000000..7b92e2e4
--- /dev/null
+++ b/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,
+}));
diff --git a/src/components/TxTable/TxDetail/index.tsx b/src/components/TxTable/TxDetail/index.tsx
index 7e4369c5..47d24bae 100644
--- a/src/components/TxTable/TxDetail/index.tsx
+++ b/src/components/TxTable/TxDetail/index.tsx
@@ -1,5 +1,5 @@
 import { Box, Typography } from "@mui/material";
-import React, { useState } from "react";
+import React from "react";
 import { ChainId } from "useink/dist/chains";
 
 import { AccountAvatar } from "@/components/AddressAccountSelect/AccountAvatar";
@@ -47,7 +47,6 @@ export const AccountExplorer = ({ address, name, network }: TxInfoType) => {
 };
 
 export const TxDetails = ({ data, network, successTx }: Props) => {
-  const [showAdvancedDetails, setShowAdvancedDetails] = useState(true);
   const TxComponentType = ({ data }: Props): JSX.Element => {
     if (data.type === TX_TYPE.RECEIVE) {
       return <ReceivedDetail data={data} network={network} />;
@@ -107,25 +106,7 @@ export const TxDetails = ({ data, network, successTx }: Props) => {
         )}
         <Box mt={4}>
           <TxComponentType data={data} network={network} />
-          {data.selector ? (
-            <>
-              <Typography
-                variant="subtitle1"
-                sx={{
-                  fontWeight: "bold",
-                  marginTop: "22px",
-                  marginBottom: "22px",
-                  cursor: "pointer",
-                  color: "#ffe873",
-                  textDecoration: "underline",
-                }}
-                onClick={() => setShowAdvancedDetails(!showAdvancedDetails)}
-              >
-                {"Advanced Details"}
-              </Typography>
-              {!showAdvancedDetails ? <AdvancedDetail data={data} /> : null}
-            </>
-          ) : null}
+          {data.selector ? <AdvancedDetail data={data} /> : null}
         </Box>
       </Box>
     </Box>

From 4fab09c8ceff7f4a79dacaa67b3390b2ffedafd3 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Fri, 26 Jan 2024 19:53:24 -0300
Subject: [PATCH 2/2] Using method name when is xsigner or Custom Contract

---
 src/components/TxQueueWidget/TxQueueWidgetItem.tsx | 11 +++++++++--
 src/components/TxTable/TxDetailItem.tsx            |  7 +++++--
 src/domain/TransactionProposedItemUi.ts            |  6 ++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/TxQueueWidget/TxQueueWidgetItem.tsx b/src/components/TxQueueWidget/TxQueueWidgetItem.tsx
index 515598cb..cf8a6edd 100644
--- a/src/components/TxQueueWidget/TxQueueWidgetItem.tsx
+++ b/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)}
diff --git a/src/components/TxTable/TxDetailItem.tsx b/src/components/TxTable/TxDetailItem.tsx
index 48278694..299b50d4 100644
--- a/src/components/TxTable/TxDetailItem.tsx
+++ b/src/components/TxTable/TxDetailItem.tsx
@@ -18,6 +18,7 @@ import { ChainId } from "useink/dist/chains";
 
 import { LoadingSkeleton } from "@/components/common/LoadingSkeleton";
 import {
+  isXsignerOrCustomContract,
   TransactionDisplayInfo,
   TransactionProposedItemUi,
 } from "@/domain/TransactionProposedItemUi";
@@ -90,7 +91,9 @@ const buildItemType = (txData: TransactionProposedItemUi) => {
   if (success) {
     formatType = formatPastTime(type as keyof TransactionDisplayInfo["type"]);
   }
-  return formatType === "Settings" ? methodName : formatType;
+  return isXsignerOrCustomContract(formatType) && methodName
+    ? methodName
+    : formatType;
 };
 
 export const TxDetailItem = ({
@@ -179,7 +182,7 @@ export const TxDetailItem = ({
               priority
               width={30}
               height={30}
-              alt="test"
+              alt="image of type of Transaction"
             />
           </StyledGrid>
           <StyledGrid
diff --git a/src/domain/TransactionProposedItemUi.ts b/src/domain/TransactionProposedItemUi.ts
index f17102c2..c68dd12c 100644
--- a/src/domain/TransactionProposedItemUi.ts
+++ b/src/domain/TransactionProposedItemUi.ts
@@ -35,3 +35,9 @@ export const emptyDisplayInfo: TransactionDisplayInfo = {
   to: undefined,
   from: undefined,
 };
+
+export function isXsignerOrCustomContract(
+  type: TransactionDisplayInfo["type"]
+): boolean {
+  return type === "Settings" || type === "Custom Contract";
+}