Polls: added tokens interpretation and switcher

ecency · May 3, 2024 · 11c98c7 · 11c98c7
1 parent 4dfca6d
commit 11c98c7
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 8 deletions.
diff --git a/src/common/features/entry-management/entry-metadata-manager/entry-metadata-builder.ts b/src/common/features/entry-management/entry-metadata-manager/entry-metadata-builder.ts
@@ -146,7 +146,7 @@ export class EntryMetadataBuilder {
             question: poll.title,
             choices: poll.choices,
             preferred_interpretation: poll.interpretation,
-            token: null,
+            token: poll.interpretation === "tokens" ? "HIVE:HP" : null,
             hide_votes: poll.hideVotes,
             vote_change: poll.voteChange,
             filters: {

diff --git a/src/common/features/polls/api/get-poll-details-query.ts b/src/common/features/polls/api/get-poll-details-query.ts
@@ -12,8 +12,12 @@ interface GetPollDetailsQueryResponse {
   parent_permlink: string;
   permlink: string;
   platform: null;
-  poll_choices: { choice_num: number; choice_text: string; votes?: { total_votes: number } }[];
-  poll_stats: { total_voting_accounts_num: number };
+  poll_choices: {
+    choice_num: number;
+    choice_text: string;
+    votes?: { total_votes: number; hive_hp_incl_proxied: number | null };
+  }[];
+  poll_stats: { total_voting_accounts_num: number; total_hive_hp_incl_proxied: number | null };
   poll_trx_id: string;
   poll_voters?: { name: string; choice_num: number }[];
   post_body: string;

diff --git a/src/common/features/polls/components/poll-option-with-results.tsx b/src/common/features/polls/components/poll-option-with-results.tsx
@@ -3,15 +3,17 @@ import React, { useMemo } from "react";
 import { PollCheck } from "./poll-option";
 import { useGetPollDetailsQuery } from "../api";
 import { Entry } from "../../../store/entries/types";
+import { PollSnapshot } from "./polls-creation";
 import { _t } from "../../../i18n";
 
 export interface Props {
   activeChoice?: string;
   choice: string;
   entry?: Entry;
+  interpretation: PollSnapshot["interpretation"];
 }
 
-export function PollOptionWithResults({ choice, activeChoice, entry }: Props) {
+export function PollOptionWithResults({ choice, activeChoice, entry, interpretation }: Props) {
   const pollDetails = useGetPollDetailsQuery(entry);
 
   const votesCount = useMemo(
@@ -24,6 +26,24 @@ export function PollOptionWithResults({ choice, activeChoice, entry }: Props) {
     () => Math.max(pollDetails.data?.poll_stats.total_voting_accounts_num ?? 0, 1),
     [pollDetails.data?.poll_stats.total_voting_accounts_num]
   );
+  const totalHp = useMemo(
+    () => pollDetails.data?.poll_stats.total_hive_hp_incl_proxied ?? 0,
+    [pollDetails.data?.poll_stats.total_hive_hp_incl_proxied]
+  );
+  const choiceHp = useMemo(
+    () =>
+      pollDetails.data?.poll_choices.find((pc) => pc.choice_text === choice)?.votes
+        ?.hive_hp_incl_proxied ?? 0,
+    [pollDetails.data?.poll_choices, choice]
+  );
+
+  const progress = useMemo(() => {
+    if (interpretation === "tokens") {
+      return ((choiceHp * 100) / totalHp).toFixed(2);
+    }
+
+    return ((votesCount * 100) / totalVotes).toFixed(2);
+  }, [totalHp, choiceHp, votesCount, totalVotes, interpretation]);
 
   return (
     <div
@@ -38,14 +58,18 @@ export function PollOptionWithResults({ choice, activeChoice, entry }: Props) {
           "bg-blue-dark-sky bg-opacity-50 min-h-[52px] absolute top-0 left-0 bottom-0": true
         })}
         style={{
-          width: `${((votesCount * 100) / totalVotes).toFixed(2)}%`
+          width: `${progress}%`
         }}
       />
       {activeChoice === choice && <PollCheck checked={activeChoice === choice} />}
       <div className="flex w-full gap-2 justify-between">
         <span>{choice}</span>
         <span className="text-xs whitespace-nowrap">
-          {((votesCount * 100) / totalVotes).toFixed(2)}% ({votesCount} {_t("polls.votes")})
+          {progress}% (
+          {interpretation === "number_of_votes"
+            ? `${votesCount} ${_t("polls.votes")}`
+            : choiceHp.toFixed(2)}
+          )
         </span>
       </div>
     </div>

diff --git a/src/common/features/polls/components/poll-widget.tsx b/src/common/features/polls/components/poll-widget.tsx
@@ -12,6 +12,7 @@ import { useMappedStore } from "../../../store/use-mapped-store";
 import { format, isBefore } from "date-fns";
 import useLocalStorage from "react-use/lib/useLocalStorage";
 import { PREFIX } from "../../../util/local-storage";
+import { FormControl } from "@ui/input";
 
 interface Props {
   poll: PollSnapshot;
@@ -34,6 +35,8 @@ export function PollWidget({ poll, isReadOnly, entry }: Props) {
   const [resultsMode, setResultsMode] = useState(false);
   const [isVotedAlready, setIsVotedAlready] = useState(false);
   const [showEndDate, setShowEndDate] = useLocalStorage(PREFIX + "_plls_set", false);
+  const [interpretation, setInterpretation] =
+    useState<PollSnapshot["interpretation"]>("number_of_votes");
 
   const endTimeFullDate = useMemo(() => format(poll.endTime, "dd.MM.yyyy HH:mm"), [poll.endTime]);
   const isFinished = useMemo(() => isBefore(poll.endTime, new Date()), [poll.endTime]);
@@ -49,6 +52,10 @@ export function PollWidget({ poll, isReadOnly, entry }: Props) {
     () => pollDetails.data?.status === "Active" && !resultsMode,
     [pollDetails.data?.status, resultsMode]
   );
+  const isInterpretationSelectionDisabled = useMemo(
+    () => pollDetails.data?.poll_stats.total_hive_hp_incl_proxied === null,
+    [pollDetails.data?.poll_stats.total_hive_hp_incl_proxied]
+  );
 
   useEffect(() => {
     if (activeUserVote) {
@@ -67,6 +74,17 @@ export function PollWidget({ poll, isReadOnly, entry }: Props) {
     setIsVotedAlready(!!activeUserVote);
   }, [activeUserVote]);
 
+  useEffect(() => {
+    if (isInterpretationSelectionDisabled) {
+      setInterpretation("number_of_votes");
+    } else {
+      setInterpretation(
+        (pollDetails.data?.preferred_interpretation ??
+          "number_of_votes") as PollSnapshot["interpretation"]
+      );
+    }
+  }, [pollDetails.data, isInterpretationSelectionDisabled]);
+
   return (
     <div className="grid grid-cols-4">
       <div className="col-span-4 sm:col-span-3 flex flex-col gap-4 border border-[--border-color] rounded-3xl p-4 dark:border-gray-900">
@@ -104,6 +122,7 @@ export function PollWidget({ poll, isReadOnly, entry }: Props) {
           {poll.choices.map((choice) =>
             resultsMode ? (
               <PollOptionWithResults
+                interpretation={interpretation}
                 key={choice}
                 entry={entry}
                 choice={choice}
@@ -118,6 +137,24 @@ export function PollWidget({ poll, isReadOnly, entry }: Props) {
               />
             )
           )}
+          {resultsMode && (
+            <div className="flex items-center gap-2 flex-wrap">
+              <div>{_t("polls.interpretation")}</div>
+              <FormControl
+                full={false}
+                disabled={isInterpretationSelectionDisabled}
+                type="select"
+                size="xs"
+                value={interpretation}
+                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                  setInterpretation(e.target.value as PollSnapshot["interpretation"])
+                }
+              >
+                <option value="number_of_votes">{_t("polls.number_of_votes")}</option>
+                <option value="tokens">{_t("polls.tokens")}</option>
+              </FormControl>
+            </div>
+          )}
         </div>
         {showVote && (
           <Button

diff --git a/src/common/features/ui/input/form-controls/select.tsx b/src/common/features/ui/input/form-controls/select.tsx
@@ -5,10 +5,11 @@ import { useFilteredProps } from "../../../../util/props-filter";
 
 // TODO: Add styles for select in input-group
 
-export interface SelectProps extends HTMLProps<HTMLSelectElement> {
+export interface SelectProps extends Omit<HTMLProps<HTMLSelectElement>, "size"> {
   type: "select";
   children: ReactNode;
   full?: boolean;
+  size?: "md" | "xs";
 }
 
 export function Select(props: SelectProps) {
@@ -20,6 +21,7 @@ export function Select(props: SelectProps) {
       className={classNameObject({
         [INPUT_STYLES]: true,
         [INPUT_DARK_STYLES]: true,
+        "px-2 py-1 text-sm": props.size === "xs",
         [props.className ?? ""]: true,
         "!w-auto": props.full === false
       })}

diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
@@ -2451,6 +2451,7 @@
     "vote-change": "Changing a vote",
     "current-standing": "Hide votes",
     "finished": "Finished",
-    "expired-date": "End date should be in present or future"
+    "expired-date": "End date should be in present or future",
+    "interpretation": "Interpretation"
   }
 }