feat(governance-proposal): improve label formatting (#199)

hyperweb-io · Aug 21, 2024 · 544d25b · 544d25b
1 parent 2423d11
commit 544d25b
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 7 deletions.
diff --git a/src/ui/governance/governance-proposal-item.lite.tsx b/src/ui/governance/governance-proposal-item.lite.tsx
@@ -24,10 +24,30 @@ useMetadata({
 
 useDefaultProps<Partial<GovernanceProposalItemProps>>({
   endTimeLabel: "Voting end time",
+  voteTypeLabels: {
+    yes: "Yes",
+    no: "No",
+    abstain: "Abstain",
+    noWithVeto: "No with veto",
+  },
+  formatLegend: (
+    voteType: GovernanceVoteType,
+    votes: number,
+    totalVotes: number,
+  ) => {
+    const defaultLabels: Record<GovernanceVoteType, string> = {
+      yes: "Yes",
+      no: "No",
+      abstain: "Abstain",
+      noWithVeto: "No with veto",
+    };
+
+    return `${defaultLabels[voteType]} (${((votes / totalVotes) * 100).toFixed(2)}%)`;
+  },
 });
 
 export default function GovernanceProposalItem(
-  props: GovernanceProposalItemProps
+  props: GovernanceProposalItemProps,
 ) {
   const state = useStore({
     getStatusLabel: () => {
@@ -42,6 +62,21 @@ export default function GovernanceProposalItem(
 
       return defaultLabels[props.status];
     },
+    getVoteTypeLabel: (voteKind: GovernanceVoteType) => {
+      const vote = props.votes[voteKind];
+
+      if (typeof props.formatLegend === "function") {
+        const total =
+          props.votes.abstain +
+          props.votes.no +
+          props.votes.noWithVeto +
+          props.votes.yes;
+
+        return props.formatLegend(voteKind, vote, total);
+      }
+
+      return props.voteTypeLabels[voteKind];
+    },
     getWidthFor: (voteKind: GovernanceVoteType) => {
       const total =
         props.votes.abstain +
@@ -151,7 +186,8 @@ export default function GovernanceProposalItem(
               tablet: "center",
               desktop: "center",
             },
-            // @ts-expect-error
+          }}
+          domAttributes={{
             "data-part-id": "mid",
           }}
         >
@@ -264,16 +300,31 @@ export default function GovernanceProposalItem(
                 borderTopLeftRadius="4px"
                 borderBottomLeftRadius="4px"
               >
-                <Tooltip title="Yes" placement="bottom">
+                <Tooltip
+                  title={
+                    <Text fontSize="$xs" color="$textInverse">
+                      {state.getVoteTypeLabel("yes")}
+                    </Text>
+                  }
+                  placement="bottom"
+                >
                   <Box backgroundColor="transparent" width="100%" height="$2" />
                 </Tooltip>
               </Box>
+
               <Box
                 height="$2"
                 backgroundColor="#486A94"
                 width={state.getWidthFor("abstain")}
               >
-                <Tooltip title="Abstain" placement="bottom">
+                <Tooltip
+                  title={
+                    <Text fontSize="$xs" color="$textInverse">
+                      {state.getVoteTypeLabel("abstain")}
+                    </Text>
+                  }
+                  placement="bottom"
+                >
                   <Box backgroundColor="transparent" width="100%" height="$2" />
                 </Tooltip>
               </Box>
@@ -283,7 +334,14 @@ export default function GovernanceProposalItem(
                 backgroundColor="$red600"
                 width={state.getWidthFor("no")}
               >
-                <Tooltip title="No" placement="bottom">
+                <Tooltip
+                  title={
+                    <Text fontSize="$xs" color="$textInverse">
+                      {state.getVoteTypeLabel("no")}
+                    </Text>
+                  }
+                  placement="bottom"
+                >
                   <Box backgroundColor="transparent" width="100%" height="$2" />
                 </Tooltip>
               </Box>
@@ -295,7 +353,14 @@ export default function GovernanceProposalItem(
                 borderTopRightRadius="4px"
                 borderBottomRightRadius="4px"
               >
-                <Tooltip title="No with veto" placement="bottom">
+                <Tooltip
+                  title={
+                    <Text fontSize="$xs" color="$textInverse">
+                      {state.getVoteTypeLabel("noWithVeto")}
+                    </Text>
+                  }
+                  placement="bottom"
+                >
                   <Box backgroundColor="transparent" width="100%" height="$2" />
                 </Tooltip>
               </Box>

diff --git a/src/ui/governance/governance-proposal-list.lite.tsx b/src/ui/governance/governance-proposal-list.lite.tsx
@@ -11,7 +11,7 @@ useMetadata({
 });
 
 export default function GovernanceProposalList(
-  props: GovernanceProposalListProps
+  props: GovernanceProposalListProps,
 ) {
   return (
     <For each={props.list}>
@@ -52,6 +52,8 @@ export default function GovernanceProposalList(
                 endTimeLabel={proposal.endTimeLabel}
                 votes={proposal.votes}
                 key={`${proposal.id}-${index}`}
+                formatLegend={props.formatLegend}
+                voteTypeLabels={props.voteTypeLabels}
               />
             )}
           </For>

diff --git a/src/ui/governance/governance.types.tsx b/src/ui/governance/governance.types.tsx
@@ -7,6 +7,12 @@ export type GovernanceVoteType = "yes" | "abstain" | "no" | "noWithVeto";
 export type GovernanceVoteStructure = Record<GovernanceVoteType, number>;
 export type GovernanceVoteFormStatus = "pending" | "voted" | "expired";
 
+export type LegendFormatter = (
+  voteType: GovernanceVoteType,
+  votes: number,
+  totalVotes: number,
+) => string;
+
 export type GovernanceProposalItem = {
   status: GovernanceProposalStatus;
   statusLabel?: string;
@@ -15,6 +21,8 @@ export type GovernanceProposalItem = {
   endTimeLabel?: string;
   endTime: string;
   votes: GovernanceVoteStructure;
+  voteTypeLabels?: Record<GovernanceVoteType, string>;
+  formatLegend?: LegendFormatter;
 };
 
 export type GovernanceProposalListItem = {
@@ -33,6 +41,8 @@ export interface GovernanceProposalItemProps
 
 export interface GovernanceProposalListProps extends BaseComponentProps {
   list: GovernanceProposalList;
+  voteTypeLabels?: Record<GovernanceVoteType, string>;
+  formatLegend?: LegendFormatter;
   attributes?: Sprinkles;
 }