v2.0.27

govtool/frontend/package.json

@@ -41,6 +41,7 @@
     "bech32": "^2.0.0",
     "blakejs": "^1.2.1",
     "buffer": "^6.0.3",
+    "cbor-web": "^10.0.3",
     "date-fns": "^2.30.0",
     "esbuild": "^0.25.0",
     "i18next": "^23.7.19",

govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx

@@ -15,13 +15,14 @@ import { useModal } from "@/context";
 
 type BaseProps = {
   label: string;
-  text?: React.ReactNode;
+  text?: string | number;
   dataTestId?: string;
   isSliderCard?: boolean;
   tooltipProps?: Omit<TooltipProps, "children">;
   marginBottom?: number;
   isSemiTransparent?: boolean;
   isValidating?: boolean;
+  children?: React.ReactNode;
 };
 
 type VariantProps = BaseProps & {
@@ -44,10 +45,11 @@ export const GovernanceActionCardElement = ({
   isMarkdown = false,
   isSemiTransparent = false,
   isValidating = false,
+  children,
 }: VariantProps) => {
   const { openModal } = useModal();
 
-  if (!text) return null;
+  if (text == null && children == null) return null;
 
   const renderTooltip = () =>
     tooltipProps && (
@@ -108,11 +110,13 @@ export const GovernanceActionCardElement = ({
         ...(isSemiTransparent && { opacity: 0.75 }),
       }}
     >
-      {typeof text === "string" && isMarkdown ? removeMarkdown(text) : text}
+      {isMarkdown ? removeMarkdown(text) : text}
     </Typography>
   );
 
-  const renderMarkdownText = ({ children }: PropsWithChildren) => (
+  const renderMarkdownText = ({
+    children: markdownChildren,
+  }: PropsWithChildren) => (
     <Typography
       sx={{
         fontSize: 16,
@@ -121,17 +125,18 @@ export const GovernanceActionCardElement = ({
         maxWidth: "auto",
       }}
     >
-      {children}
+      {markdownChildren}
     </Typography>
   );
 
   const markdownComponents = {
-    p: ({ children }: PropsWithChildren) => renderMarkdownText({ children }),
+    p: ({ children: markdownChildren }: PropsWithChildren) =>
+      renderMarkdownText({ children: markdownChildren }),
     br: () => <br />,
   };
 
-  const renderMarkdown = () => {
-    const formattedText = text
+  const renderMarkdown = (markdownText: string | number) => {
+    const formattedText = markdownText
       .toString()
       .replace(/\r\n|\r/g, "\n")
       .replace(
@@ -157,14 +162,14 @@ export const GovernanceActionCardElement = ({
     );
   };
 
-  const renderCopyButton = () =>
+  const renderCopyButton = (copyText: string | number) =>
     isCopyButton && (
       <Box ml={1}>
-        <CopyButton text={text.toString()} variant="blueThin" />
+        <CopyButton text={copyText.toString()} variant="blueThin" />
       </Box>
     );
 
-  const renderLinkButton = () =>
+  const renderLinkButton = (linkText: string | number) =>
     isLinkButton && (
       <Box ml={1}>
         <img
@@ -175,13 +180,32 @@ export const GovernanceActionCardElement = ({
           onClick={() =>
             openModal({
               type: "externalLink",
-              state: { externalLink: text.toString() },
+              state: { externalLink: linkText.toString() },
             })
           }
         />
       </Box>
     );
 
+  const renderTextOrChildren = () => {
+    if (text != null) {
+      return (
+        <>
+          {textVariant === "pill"
+            ? renderPillText()
+            : isMarkdown && !isSliderCard
+            ? renderMarkdown(text)
+            : renderStandardText()}
+          {renderCopyButton(text)}
+          {renderLinkButton(text)}
+        </>
+      );
+    }
+    if (children != null) {
+      return children;
+    }
+  };
+
   return (
     <Box
       data-testid={dataTestId}
@@ -220,13 +244,7 @@ export const GovernanceActionCardElement = ({
           flexDirection={isMarkdown ? "column" : "row"}
           fontFamily="Poppins, Arial"
         >
-          {textVariant === "pill"
-            ? renderPillText()
-            : isMarkdown && !isSliderCard
-            ? renderMarkdown()
-            : renderStandardText()}
-          {renderCopyButton()}
-          {renderLinkButton()}
+          {renderTextOrChildren()}
         </Box>
       )}
     </Box>

govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx

@@ -374,44 +374,43 @@ export const GovernanceActionDetailsCardData = ({
       )}
       <GovernanceActionCardElement
         label={t("govActions.authors.title")}
-        text={
-          <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
-            {(authors ?? []).length <= 0
-              ? t("govActions.authors.noDataAvailable")
-              : (authors ?? []).map((author) => (
-                <Box
-                  key={author.publicKey}
-                  sx={{ display: "flex", gap: 0.5, alignItems: "center" }}
-                >
-                  <AuthorSignatureStatus
-                    signature={author.signature}
-                    publicKey={author.publicKey}
-                    algorithm={author.witnessAlgorithm}
-                    jsonContent={jsonContent}
-                  />
-                  <span>{author.name}</span>
-                  <Tooltip
-                    heading={`${t("govActions.authors.witnessAlgorithm")}: ${
-                        author.witnessAlgorithm
-                      }`}
-                    paragraphOne={`${t("govActions.authors.publicKey")}: ${
-                        author.publicKey
-                      }`}
-                    paragraphTwo={`${t("govActions.authors.signature")}: ${
-                        author.signature
-                      }`}
-                    placement="bottom-end"
-                    arrow
-                  >
-                    <InfoOutlinedIcon fontSize="small" />
-                  </Tooltip>
-                </Box>
-                ))}
-          </Box>
-        }
         textVariant="longText"
         dataTestId="authors"
-      />
+      >
+        <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
+          {(authors ?? []).length <= 0
+            ? t("govActions.authors.noDataAvailable")
+            : (authors ?? []).map((author) => (
+              <Box
+                key={author.publicKey}
+                sx={{ display: "flex", gap: 0.5, alignItems: "center" }}
+              >
+                <AuthorSignatureStatus
+                  signature={author.signature}
+                  publicKey={author.publicKey}
+                  algorithm={author.witnessAlgorithm}
+                  jsonContent={jsonContent}
+                />
+                <span>{author.name}</span>
+                <Tooltip
+                  heading={`${t("govActions.authors.witnessAlgorithm")}: ${
+                      author.witnessAlgorithm
+                    }`}
+                  paragraphOne={`${t("govActions.authors.publicKey")}: ${
+                      author.publicKey
+                    }`}
+                  paragraphTwo={`${t("govActions.authors.signature")}: ${
+                      author.signature
+                    }`}
+                  placement="bottom-end"
+                  arrow
+                >
+                  <InfoOutlinedIcon fontSize="small" />
+                </Tooltip>
+              </Box>
+              ))}
+        </Box>
+      </GovernanceActionCardElement>
 
       <GovernanceActionDetailsCardLinks links={references} />
     </Box>

govtool/frontend/src/types/cbor-web.d.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+type CBORDecoded = Map<number | string, any> | any[];
+
+type BufferLike =
+  | string
+  | Buffer
+  | ArrayBuffer
+  | ArrayBufferView
+  | DataView
+  | stream.Readable;
+
+declare module "cbor-web" {
+  export function encode(input: any): Buffer;
+  export function decode(input: BufferLike): CBORDecoded;
+
+  export function encodeAsync(input: any): Promise<Buffer>;
+  export function decodeAsync(
+    input: BufferLike,
+  ): Promise<CBORDecoded>;
+}