Merge pull request #1096 from IntersectMBO/fix/649-design-bug-payment…

…-address-needs-to-be-copyablereadable fix/649-design-bug-payment-address-needs-to-be-copyablereadable
IntersectMBO · May 28, 2024 · 75219d3 · 75219d3
2 parents e27c2f6 + 2fd2bf0
commit 75219d3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx
@@ -5,7 +5,7 @@ import { Typography, Tooltip, CopyButton, TooltipProps } from "@atoms";
 
 type BaseProps = {
   label: string;
-  text?: string;
+  text?: string | number;
   dataTestId?: string;
   isSliderCard?: boolean;
   tooltipProps?: Omit<TooltipProps, "children">;
@@ -109,6 +109,7 @@ export const GovernanceActionCardElement = ({
               sx={{
                 fontSize: isSliderCard ? 14 : 16,
                 fontWeight: 400,
+                maxWidth: textVariant === "oneLine" ? "283px" : "auto",
                 lineHeight: isSliderCard ? "20px" : "24px",
                 ...(textVariant === "oneLine" && { whiteSpace: "nowrap" }),
                 ...((textVariant === "oneLine" ||
@@ -131,7 +132,7 @@ export const GovernanceActionCardElement = ({
             </Typography>
             {isCopyButton && (
               <Box ml={1}>
-                <CopyButton text={text} variant="blueThin" />
+                <CopyButton text={text.toString()} variant="blueThin" />
               </Box>
             )}
           </Box>

diff --git a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx
@@ -7,10 +7,9 @@ import {
   DataMissingInfoBox,
   GovernanceActionDetailsCardHeader,
   GovernanceActionsDatesBox,
-  GovernanceActionDetailsCardOnChainData,
 } from "@molecules";
 import { useScreenDimension, useTranslation } from "@hooks";
-import { getProposalTypeNoEmptySpaces } from "@utils";
+import { getProposalTypeNoEmptySpaces, testIdFromLabel } from "@utils";
 import { MetadataValidationStatus } from "@models";
 
 type GovernanceActionDetailsCardDataProps = {
@@ -120,9 +119,16 @@ export const GovernanceActionDetailsCardData = ({
         textVariant="longText"
         dataTestId="rationale"
       />
-      {details && Object.keys(details).length !== 0 && (
-        <GovernanceActionDetailsCardOnChainData data={details} />
-      )}
+      {details &&
+        Object.keys(details).length !== 0 &&
+        Object.entries(details).map(([label, content]) => (
+          <GovernanceActionCardElement
+            isCopyButton={label.toLowerCase().includes("address")}
+            label={label}
+            text={content}
+            dataTestId={testIdFromLabel(label)}
+          />
+        ))}
       <GovernanceActionDetailsCardLinks links={links} />
     </Box>
   );