chore/669-update-delegate-card

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

@@ -1,26 +1,33 @@
 import { Box, Divider } from "@mui/material";
 
-import { Button, Typography } from "@atoms";
+import { Button, LoadingButton, Typography } from "@atoms";
+import { primaryBlue } from "@consts";
+import { useModal } from "@context";
 import { useScreenDimension, useTranslation } from "@hooks";
-import { AutomatedVotingCardProps } from "./types";
+import { openInNewTab } from "@utils";
+
 import { Card } from "./Card";
-import { primaryBlue } from "@/consts";
-import { useModal } from "@/context";
+import { AutomatedVotingCardProps } from "./types";
 
 export const AutomatedVotingCard = ({
   description,
   inProgress,
   isConnected,
+  isDelegateLoading,
   isSelected,
   onClickDelegate,
   onClickInfo,
   title,
   votingPower,
+  transactionId,
 }: AutomatedVotingCardProps) => {
   const { isMobile, screenWidth } = useScreenDimension();
   const { openModal } = useModal();
   const { t } = useTranslation();
 
+  const onClickShowTransaction = () =>
+    openInNewTab(`https://sancho.cexplorer.io/tx/${transactionId}`);
+
   return (
     <Card
       {...(inProgress && {
@@ -37,7 +44,7 @@ export const AutomatedVotingCard = ({
         boxShadow: `0px 4px 15px 0px ${primaryBlue.c100}`,
         display: "flex",
         flex: 1,
-        flexDirection: screenWidth < 1440 ? "column" : "row",
+        flexDirection: screenWidth < 1024 ? "column" : "row",
         justifyContent: "space-between",
         mt: inProgress || isSelected ? 2 : 0,
         py: 2.25,
@@ -46,83 +53,106 @@ export const AutomatedVotingCard = ({
       <Box
         sx={{
           flex: 1,
-          mb: screenWidth < 1440 ? 1.5 : 0,
-          width: screenWidth < 1440 ? "100%" : "auto",
+          mb: screenWidth < 1024 ? 1.5 : 0,
+          width: screenWidth < 1024 ? "100%" : "auto",
         }}
       >
         <Typography>{title}</Typography>
-        <Typography fontWeight={400} sx={{ mt: 0.5 }} variant="body2">
+        <Typography
+          fontWeight={400}
+          sx={{
+            mt: 0.5,
+            color: screenWidth < 1024 ? "neutralGray" : "textBlack",
+            width: screenWidth < 1024 ? "auto" : "60%",
+          }}
+          variant="body2"
+        >
           {description}
         </Typography>
+        {transactionId && (
+          <Button
+            onClick={onClickShowTransaction}
+            sx={{ width: "fit-content", p: 0 }}
+            variant="text"
+          >
+            {t("dashboard.cards.showTransaction")}
+          </Button>
+        )}
       </Box>
-      <Divider
-        flexItem
-        orientation={screenWidth < 1440 ? "horizontal" : "vertical"}
-        sx={{ ml: screenWidth < 1440 ? 0 : 1 }}
-        variant={screenWidth < 1440 ? "fullWidth" : "middle"}
-      />
-      <Box
-        sx={{
-          alignContent: "flex-start",
-          display: "flex",
-          flexDirection: "column",
-          px: screenWidth < 1440 ? 0 : 4.25,
-          py: screenWidth < 1440 ? 1 : 0,
-          width: screenWidth < 1440 ? "100%" : "auto",
-        }}
-      >
-        <Typography color="neutralGray" fontWeight={500} variant="caption">
-          {t("dRepDirectory.votingPower")}
-        </Typography>
-        <Typography sx={{ display: "flex", flexDirection: "row", mt: 0.5 }}>
-          {'₳ '}
-          {votingPower}
-        </Typography>
-      </Box>
-      <Divider
-        flexItem
-        orientation={screenWidth < 1440 ? "horizontal" : "vertical"}
-        sx={{ mr: screenWidth < 1440 ? 0 : 1 }}
-        variant={screenWidth < 1440 ? "fullWidth" : "middle"}
-      />
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "row",
-          gap: 2.5,
-          mt: screenWidth < 1440 ? 3 : 0,
-          width: screenWidth < 1440 ? "100%" : "auto",
-        }}
-      >
-        <Button
-          // TODO handle button click
-          onClick={onClickInfo}
-          size={isMobile ? "medium" : "large"}
-          sx={{ flex: screenWidth < 768 ? 1 : undefined }}
-          variant="outlined"
-        >
-          {t("info")}
-        </Button>
-        {!isConnected
-          ? (
+      {!inProgress && !isSelected && (
+        <>
+          <Divider
+            flexItem
+            orientation={screenWidth < 1024 ? "horizontal" : "vertical"}
+            sx={{ ml: screenWidth < 1024 ? 0 : 1 }}
+            variant={screenWidth < 1024 ? "fullWidth" : "middle"}
+          />
+          <Box
+            sx={{
+              alignContent: "flex-start",
+              display: "flex",
+              flexDirection: "column",
+              px: screenWidth < 1024 ? 0 : 4.25,
+              py: screenWidth < 1024 ? 1 : 0,
+              width: screenWidth < 1024 ? "100%" : "auto",
+            }}
+          >
+            <Typography color="neutralGray" fontWeight={500} variant="caption">
+              {t("dRepDirectory.votingPower")}
+            </Typography>
+            <Typography sx={{ display: "flex", flexDirection: "row", mt: 0.5 }}>
+              {"₳ "}
+              {votingPower}
+            </Typography>
+          </Box>
+          <Divider
+            flexItem
+            orientation={screenWidth < 1024 ? "horizontal" : "vertical"}
+            sx={{ mr: screenWidth < 1024 ? 0 : 1 }}
+            variant={screenWidth < 1024 ? "fullWidth" : "middle"}
+          />
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              gap: 2.5,
+              mt: screenWidth < 1024 ? 3 : 0,
+              width: screenWidth < 1024 ? "100%" : "auto",
+            }}
+          >
             <Button
-              onClick={() => openModal({ type: "chooseWallet" })}
+              // TODO handle button click
+              onClick={onClickInfo}
               size={isMobile ? "medium" : "large"}
               sx={{ flex: screenWidth < 768 ? 1 : undefined }}
+              variant="outlined"
             >
-              {t("connectToDelegate")}
+              {t("info")}
             </Button>
-          )
-          : !isSelected && (
-            <Button
-              onClick={onClickDelegate}
-              size={isMobile ? "medium" : "large"}
-              sx={{ flex: screenWidth < 768 ? 1 : undefined }}
-            >
-              {t("delegate")}
-            </Button>
-          )}
-      </Box>
+            {!isConnected ? (
+              <Button
+                onClick={() => openModal({ type: "chooseWallet" })}
+                size={isMobile ? "medium" : "large"}
+                sx={{ flex: screenWidth < 768 ? 1 : undefined }}
+              >
+                {t("connectToDelegate")}
+              </Button>
+            ) : (
+              !isSelected && (
+                <LoadingButton
+                  isLoading={isDelegateLoading}
+                  onClick={onClickDelegate}
+                  size={isMobile ? "medium" : "large"}
+                  sx={{ flex: screenWidth < 768 ? 1 : undefined }}
+                  variant="contained"
+                >
+                  {t("delegate")}
+                </LoadingButton>
+              )
+            )}
+          </Box>
+        </>
+      )}
     </Card>
   );
 };

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

@@ -3,8 +3,9 @@ import { FC, ReactNode } from "react";
 
 import { Button, LoadingButton, LoadingButtonProps, Typography } from "@atoms";
 import { useScreenDimension, useTranslation } from "@hooks";
+import { openInNewTab } from "@utils";
+
 import { Card } from "./Card";
-import { openInNewTab } from "@/utils";
 
 export type DashboardActionCardProps = {
   buttons?: LoadingButtonProps[];
@@ -17,6 +18,7 @@ export type DashboardActionCardProps = {
   state?: "active" | "inProgress" | "default";
   title?: ReactNode;
   transactionId?: string;
+  isSpaceBetweenButtons?: boolean;
 };
 
 export const DashboardActionCard: FC<DashboardActionCardProps> = ({
@@ -33,6 +35,7 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
     state = "default",
     title,
     transactionId,
+    isSpaceBetweenButtons,
   } = props;
 
   const { screenWidth } = useScreenDimension();
@@ -103,20 +106,21 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
             )}
           </Typography>
         ) : null}
+        {children}
+        {transactionId && (
+          <Button
+            onClick={onClickShowTransaction}
+            sx={{ width: "fit-content", p: 0 }}
+            variant="text"
+          >
+            {t("dashboard.cards.showTransaction")}
+          </Button>
+        )}
       </Box>
-      {children}
-      {transactionId && (
-        <Button
-          onClick={onClickShowTransaction}
-          sx={{ width: "fit-content", p: 0 }}
-          variant="text"
-        >
-          {t("dashboard.cards.showTransaction")}
-        </Button>
-      )}
       <Box
         display="flex"
         flexDirection={screenWidth < 640 ? "column" : "row"}
+        justifyContent={isSpaceBetweenButtons ? "space-between" : undefined}
         mt={3}
         gap={2}
       >

govtool/frontend/src/components/molecules/SoleVoterAction.tsx → govtool/frontend/src/components/molecules/DelegationAction.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from "@hooks";
 import { Card } from "./Card";
 import { SoleVoterActionProps } from "./types";
 
-export const SoleVoterAction = ({
+export const DelegationAction = ({
   dRepId,
   onClickArrow,
   sx,

govtool/frontend/src/components/molecules/index.ts

@@ -10,6 +10,7 @@ export * from "./DataActionsBar";
 export * from "./DataActionsFilters";
 export * from "./DataActionsSorting";
 export * from "./DataMissingInfoBox";
+export * from "./DelegationAction";
 export * from "./DRepInfoCard";
 export * from "./EmptyStateGovernanceActionsCategory";
 export * from "./Field";
@@ -27,13 +28,12 @@ export * from "./GovernanceActionsDatesBox";
 export * from "./GovernanceVotedOnCard";
 export * from "./LinkWithIcon";
 export * from "./OrderActionsChip";
+export * from "./PageTitle";
+export * from "./Share";
 export * from "./Share";
 export * from "./SliderArrow";
 export * from "./SliderArrows";
-export * from "./SoleVoterAction";
 export * from "./Step";
-export * from "./PageTitle";
-export * from "./Share";
 export * from "./VoteActionForm";
 export * from "./VotesSubmitted";
 export * from "./WalletInfoCard";

govtool/frontend/src/components/molecules/types.ts

@@ -36,4 +36,6 @@ export type AutomatedVotingCardProps = {
   onClickInfo: () => void;
   title: string;
   votingPower: string | number;
+  isDelegateLoading?: boolean;
+  transactionId?: string;
 };