Showcase orchestrator voting activity in the UI

components/HistoryView/index.tsx

@@ -1,20 +1,33 @@
 import Spinner from "@components/Spinner";
+import { Fm } from "@lib/api/polls";
+import { parseProposalText, Proposal } from "@lib/api/treasury";
+import { POLL_VOTES, VOTING_SUPPORT_MAP } from "@lib/api/types/votes";
 import dayjs from "@lib/dayjs";
 import { formatAddress, formatTransactionHash } from "@lib/utils";
 import {
+  Badge,
   Box,
   Card as CardBase,
   Flex,
   Link as A,
   styled,
 } from "@livepeer/design-system";
 import { ExternalLinkIcon } from "@modulz/radix-icons";
-import { useTransactionsQuery } from "apollo";
+import {
+  TreasuryVoteEvent,
+  TreasuryVoteSupport,
+  useTransactionsQuery,
+  useTreasuryVoteEventsQuery,
+  useVoteEventsQuery,
+  VoteEvent,
+} from "apollo";
+import fm from "front-matter";
 import { CHAIN_INFO, DEFAULT_CHAIN_ID } from "lib/chains";
 import { useRouter } from "next/router";
 import numbro from "numbro";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
+import { catIpfsJson, IpfsPoll } from "utils/ipfs";
 
 const Card = styled(CardBase, {
   length: {},
@@ -28,6 +41,81 @@ const Index = () => {
   const query = router.query;
   const account = query.account as string;
 
+  const { data: treasuryVoteEventsData } = useTreasuryVoteEventsQuery({
+    variables: {
+      where: {
+        voter: account.toLowerCase(),
+      },
+    },
+    notifyOnNetworkStatusChange: true,
+  });
+  const [extendedTreasuryVoteEventsData, setExtendedTreasuryVoteEventsData] =
+    useState<(TreasuryVoteEvent & { attributes: Fm | null })[]>([]);
+  useEffect(() => {
+    if (treasuryVoteEventsData) {
+      const extendedTreasureVoteEventsData =
+        treasuryVoteEventsData?.treasuryVoteEvents.map((treasuryVoteEvent) => {
+          const parsed = parseProposalText(
+            treasuryVoteEvent.proposal as Proposal
+          );
+          return {
+            ...treasuryVoteEvent,
+            attributes: parsed.attributes,
+          };
+        });
+      setExtendedTreasuryVoteEventsData(
+        extendedTreasureVoteEventsData as (TreasuryVoteEvent & {
+          attributes: Fm | null;
+        })[]
+      );
+    }
+  }, [treasuryVoteEventsData]);
+
+  const { data: voteEventsData } = useVoteEventsQuery({
+    variables: {
+      where: {
+        voter: account.toLowerCase(),
+      },
+    },
+    notifyOnNetworkStatusChange: true,
+  });
+  const [extendedVoteEventsData, setExtendedVoteEventsData] = useState<
+    (VoteEvent & { attributes: Fm | null })[]
+  >([]);
+  useEffect(() => {
+    const getExtendedVoteEventsData = async () => {
+      const extendedVoteEventsData = await Promise.all(
+        voteEventsData?.voteEvents.map(async (voteEvent) => {
+          const ipfsObject = await catIpfsJson<IpfsPoll>(
+            voteEvent.poll?.proposal
+          );
+          let attributes: Fm | null = null;
+
+          // only include proposals with valid format
+          if (ipfsObject?.text && ipfsObject?.gitCommitHash) {
+            const transformedProposal = fm<Fm>(ipfsObject.text);
+
+            attributes = {
+              title: String(transformedProposal.attributes.title),
+              lip: String(transformedProposal.attributes.lip),
+              commitHash: String(ipfsObject.gitCommitHash),
+              created: String(transformedProposal.attributes.created),
+              text: String(transformedProposal.body),
+            };
+          }
+          return {
+            ...voteEvent,
+            attributes,
+          };
+        }) || []
+      );
+      setExtendedVoteEventsData(
+        extendedVoteEventsData as (VoteEvent & { attributes: Fm | null })[]
+      );
+    };
+    getExtendedVoteEventsData();
+  }, [voteEventsData]);
+
   const { data, loading, error, fetchMore, stopPolling } = useTransactionsQuery(
     {
       variables: {
@@ -61,15 +149,28 @@ const Index = () => {
   const mergedEvents = useMemo(
     () =>
       [
-        ...events.filter((e) => e?.__typename !== "WinningTicketRedeemedEvent"),
+        ...events.filter(
+          (e) =>
+            e?.__typename !== "WinningTicketRedeemedEvent" &&
+            e?.__typename !== "TreasuryVoteEvent" &&
+            e?.__typename !== "VoteEvent"
+        ),
         ...(data?.winningTicketRedeemedEvents?.filter(
           (e) => (e?.transaction?.timestamp ?? 0) > lastEventTimestamp
         ) ?? []),
+        ...extendedTreasuryVoteEventsData,
+        ...extendedVoteEventsData,
       ].sort(
         (a, b) =>
           (b?.transaction?.timestamp ?? 0) - (a?.transaction?.timestamp ?? 0)
       ),
-    [events, data, lastEventTimestamp]
+    [
+      events,
+      data,
+      lastEventTimestamp,
+      extendedTreasuryVoteEventsData,
+      extendedVoteEventsData,
+    ]
   );
 
   if (error) {
@@ -832,6 +933,170 @@ function renderSwitch(event, i: number) {
           </Flex>
         </Card>
       );
+    case "TreasuryVoteEvent":
+      const supportTreasuryVoteEvent =
+        VOTING_SUPPORT_MAP[event.support] ||
+        VOTING_SUPPORT_MAP[TreasuryVoteSupport.Abstain];
+      return (
+        <Card
+          as={A}
+          key={i}
+          href={`https://explorer.livepeer.org/treasury/${event.proposal?.id}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          css={{
+            textDecoration: "none",
+            "&:hover": {
+              textDecoration: "none",
+            },
+          }}
+        >
+          <Flex
+            css={{
+              width: "100%",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            <Box>
+              <Box css={{ fontWeight: 500 }}>
+                Voted on treasury proposal &quot;
+                {event.attributes?.title?.trim()}&quot;
+              </Box>
+              <Box
+                css={{ marginTop: "$2", fontSize: "$1", color: "$neutral11" }}
+              >
+                {dayjs
+                  .unix(event.transaction.timestamp)
+                  .format("MM/DD/YYYY h:mm:ss a")}{" "}
+                - Round #{event.round.id}
+              </Box>
+              <Flex
+                css={{
+                  alignItems: "center",
+                  marginTop: "$2",
+                  fontSize: "$1",
+                  color: "$neutral11",
+                }}
+                as={A}
+                href={`https://explorer.livepeer.org/treasury/${event.transaction?.id}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Box css={{ marginRight: "$1" }}>
+                  {formatTransactionHash(event.transaction.id)}
+                </Box>
+                <ExternalLinkIcon />
+              </Flex>
+            </Box>
+            <Box css={{ fontSize: "$3", marginLeft: "$4" }}>
+              <Badge
+                size="1"
+                css={{
+                  backgroundColor:
+                    supportTreasuryVoteEvent.style.backgroundColor,
+                  color: supportTreasuryVoteEvent.style.color,
+                  fontWeight: supportTreasuryVoteEvent.style.fontWeight,
+                  border: "none",
+                  width: "86px",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "$1",
+                }}
+              >
+                <Box
+                  as={supportTreasuryVoteEvent.icon}
+                  css={{ width: 12, height: 12 }}
+                />
+                {supportTreasuryVoteEvent.text}
+              </Badge>
+            </Box>
+          </Flex>
+        </Card>
+      );
+    case "VoteEvent":
+      const supportVoteEvent = POLL_VOTES[event.choiceID];
+      if (!supportVoteEvent) {
+        return null;
+      }
+      return (
+        <Card
+          as={A}
+          key={i}
+          href={`https://explorer.livepeer.org/voting/${event.poll?.id}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          css={{
+            textDecoration: "none",
+            "&:hover": {
+              textDecoration: "none",
+            },
+          }}
+        >
+          <Flex
+            css={{
+              width: "100%",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            <Box>
+              <Box css={{ fontWeight: 500 }}>
+                Voted on poll &quot;{event.attributes?.title?.trim()}&quot;
+              </Box>
+              <Box
+                css={{ marginTop: "$2", fontSize: "$1", color: "$neutral11" }}
+              >
+                {dayjs
+                  .unix(event.transaction.timestamp)
+                  .format("MM/DD/YYYY h:mm:ss a")}{" "}
+                - Round #{event.round.id}
+              </Box>
+              <Flex
+                css={{
+                  alignItems: "center",
+                  marginTop: "$2",
+                  fontSize: "$1",
+                  color: "$neutral11",
+                }}
+                as={A}
+                href={`${CHAIN_INFO[DEFAULT_CHAIN_ID].explorer}tx/${event.transaction.id}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Box css={{ marginRight: "$1" }}>
+                  {formatTransactionHash(event.transaction.id)}
+                </Box>
+                <ExternalLinkIcon />
+              </Flex>
+            </Box>
+            <Box css={{ fontSize: "$3", marginLeft: "$4" }}>
+              <Badge
+                size="1"
+                css={{
+                  backgroundColor: supportVoteEvent.style.backgroundColor,
+                  color: supportVoteEvent.style.color,
+                  fontWeight: supportVoteEvent.style.fontWeight,
+                  fontSize: "$4",
+                  border: "none",
+                  width: "86px",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "$1",
+                }}
+              >
+                <Box
+                  as={supportVoteEvent.icon}
+                  css={{ width: 16, height: 16 }}
+                />
+                {supportVoteEvent.text}
+              </Badge>
+            </Box>
+          </Flex>
+        </Card>
+      );
     default:
       return null;
   }

components/HorizontalScrollContainer/index.tsx

@@ -97,8 +97,14 @@ const HorizontalScrollContainer = forwardRef<
     <Box
       css={{
         position: "relative",
-        borderBottom: "1px solid",
-        borderColor: "$neutral6",
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: 0,
+          borderBottom: "1px solid $neutral6",
+        },
       }}
     >
       <Box
@@ -107,8 +113,11 @@ const HorizontalScrollContainer = forwardRef<
           alignItems: "center",
           width: "100%",
           overflowX: "auto",
+          overflowY: "hidden",
           WebkitOverflowScrolling: "touch",
           flexWrap: "nowrap",
+          position: "relative",
+          zIndex: 1,
         }}
         role={role}
         aria-label={ariaLabel}