fix signature types and add icon in mini card to see complete content

Author: nachopiris

src/components/MiniCard.tsx

@@ -1,9 +1,13 @@
-import { Box } from "@mantine/core";
+import { Box, Tooltip } from "@mantine/core";
 import { ReactElement } from "react";
 import { notifications } from "@mantine/notifications";
-import { IconCopy } from '@tabler/icons-react';
+import { IconCopy, IconEye } from "@tabler/icons-react";
 
-export function MiniCard(args: { title: string, value: ReactElement | string, shortValue?: string }) {
+export function MiniCard(args: {
+  title: string;
+  value: ReactElement | string;
+  shortValue?: string;
+}) {
   const copyContent = async () => {
     if (typeof args.value === "string") {
       try {
@@ -21,28 +25,69 @@ export function MiniCard(args: { title: string, value: ReactElement | string, sh
         });
       }
     }
-  }
+  };
 
   return (
-    <Box style={{
-      border: "1px solid #f0f0f0",
-      borderRadius: 4,
-      padding: 16,
-      marginBottom: 16,
-      marginLeft: 8,
-      marginRight: 8
-    }}>
-      <div style={{
-        fontSize: 12,
-        color: "#666",
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between"
-      }}>{args.title}{args.shortValue && <IconCopy cursor="pointer" onClick={copyContent} size="1rem" stroke={1.5} />}</div>
-      <div style={{
-        fontWeight: 600,
-        color: "#333"
-      }}>{args.shortValue || args.value}</div>
+    <Box
+      style={{
+        border: "1px solid #f0f0f0",
+        borderRadius: 4,
+        padding: 16,
+        marginBottom: 16,
+        marginLeft: 8,
+        marginRight: 8,
+      }}
+    >
+      <div
+        style={{
+          fontSize: 12,
+          color: "#666",
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        {args.title}
+        {args.shortValue && (
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              columnGap: "10px",
+            }}
+          >
+            <Tooltip
+              label={
+                <div
+                  style={{
+                    maxWidth: "800px",
+                    whiteSpace: "normal",
+                    wordWrap: "break-word",
+                  }}
+                >
+                  {args.value}
+                </div>
+              }
+            >
+              <IconEye cursor="pointer" size="1rem" stroke={1.5}></IconEye>
+            </Tooltip>
+            <IconCopy
+              cursor="pointer"
+              onClick={copyContent}
+              size="1rem"
+              stroke={1.5}
+            />
+          </div>
+        )}
+      </div>
+      <div
+        style={{
+          fontWeight: 600,
+          color: "#333",
+        }}
+      >
+        {args.shortValue || args.value}
+      </div>
     </Box>
-  )
+  );
 }

src/sections/Message.tsx

@@ -343,15 +343,15 @@ export function StatefulMessage(props: {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    EIP 1271
+                    ERC-1271
                   </a>
                 ) : (
                   <a
                     href="https://eips.ethereum.org/EIPS/eip-6492"
                     target="_blank"
                     rel="noreferrer"
                   >
-                    EIP 6492
+                    ERC-6492
                   </a>
                 )}
               </div>