Full Transparency to Voting History feature to be implemented within the Livepeer Explorer

@types/custom.d.ts

@@ -5,4 +5,4 @@ declare module "*.svg" {
 declare module "*.png";
 declare module "*.jpg";
 declare module "*.jpeg";
-declare module "*.gif";
+declare module "*.gif";

apollo/treasuryProposals.ts

@@ -0,0 +1,27 @@
+import { gql } from "@apollo/client";
+
+export const ENS_QUERY = gql`
+  query getENS($address: String!) {
+  domains(where: { resolvedAddress: $address }
+    orderBy: registration__registrationDate
+    orderDirection: desc
+  ) {
+    name
+    resolvedAddress {
+      id
+    }
+    createdAt
+  }
+}
+`;
+
+export const GET_PROPOSALS_BY_IDS = gql`
+  query getProposalsByIds($ids: [String!]!) {
+  treasuryProposals(where: { id_in: $ids }) {
+    id
+    description
+    voteStart
+    voteEnd
+  }
+}
+`;

components/TreasuryVotingWidget/index.tsx

@@ -5,7 +5,7 @@ import { useAccountAddress } from "hooks";
 import numeral from "numeral";
 import { useMemo } from "react";
 import { abbreviateNumber, fromWei, shortenAddress} from "@lib/utils";
-import VoteButton from "../VoteButton";
+import VoteButton from "../Votes/VoteButton";
 import { ProposalVotingPower } from "@lib/api/types/get-treasury-proposal";
 import { ProposalExtended } from "@lib/api/treasury";
 import QueueExecuteButton from "@components/QueueExecuteButton";

components/Votes/VoteDetail/index.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import React from "react";
+import { Box, Heading, Text, Link, Badge } from "@livepeer/design-system";
+import { ArrowTopRightIcon } from "@modulz/radix-icons";
+import { VOTING_SUPPORT, Vote } from "@lib/api/types/votes";
+import { formatAddress } from "utils/formatAddress";
+import { formatLpt } from "@lib/utils";
+
+interface VoteDetailItemProps {
+  vote: Vote;
+}
+
+const Index: React.FC<VoteDetailItemProps> = ({ vote }) => {
+  const support = VOTING_SUPPORT[vote.choiceID] || VOTING_SUPPORT["2"];
+  return (
+    <Box
+      css={{
+        backgroundColor: "$neutral4",
+        padding: "$4",
+        borderRadius: "$2",
+        marginTop: "$2",
+      }}
+    >
+      <Heading as="h2" css={{ fontSize: "$3", mb: "$2", color: "$white" }}>
+        <Link
+          href={`https://explorer.livepeer.org/treasury/${vote.proposalId}`}
+          target="_blank"
+          css={{
+            color: "$green11",
+            textDecoration: "none",
+            "&:hover": { textDecoration: "underline" },
+          }}
+        >
+          {vote.proposalTitle}
+        </Link>
+      </Heading>
+
+      <Text css={{ mb: "$1" }}>
+        <Text as="span" css={{ color: "$white", fontWeight: 600 }}>
+          Proposal ID:
+        </Text>{" "}
+        <Text as="span" css={{ color: "$neutral11" }}>
+          {formatAddress(vote.proposalId)}
+        </Text>
+      </Text>
+
+      <Text css={{ mb: "$1", display: "inline-flex", alignItems: "center" }}>
+        <Text
+          as="span"
+          css={{ color: "$white", fontWeight: 600, marginRight: "$1" }}
+        >
+          Support:
+        </Text>
+        <Text as="span" css={{ color: "$neutral11", ...support.style }}>
+          {support.text}
+        </Text>
+      </Text>
+
+      <Text css={{ mb: "$1" }}>
+        <Text as="span" css={{ color: "$white", fontWeight: 600 }}>
+          Weight:
+        </Text>{" "}
+        <Text as="span" css={{ color: "$neutral11" }}>
+          {formatLpt(vote.weight)}
+        </Text>
+      </Text>
+
+      <Text css={{ mb: "$1" }}>
+        <Text as="span" css={{ color: "$white", fontWeight: 600 }}>
+          Reason:
+        </Text>{" "}
+        <Text as="span" css={{ color: "$neutral11" }}>
+          {vote.reason || "No reason provided"}
+        </Text>
+      </Text>
+
+      <Box css={{ textAlign: "start", mt: "$2" }}>
+        {vote.transactionHash ? (
+          <Link
+            href={`https://arbiscan.io/tx/${vote.transactionHash}#eventlog`}
+            target="_blank"
+            onClickCapture={(e) => e.stopPropagation()}
+            css={{
+              display: "inline-block",
+              transition: "transform 0.2s ease",
+              "&:hover": { transform: "scale(1.1)" },
+            }}
+          >
+            <Badge css={{ cursor: "pointer" }} variant="primary" size="1">
+              {formatAddress(vote.transactionHash)}
+              <Box
+                css={{ ml: "$1", width: 15, height: 15 }}
+                as={ArrowTopRightIcon}
+              />
+            </Badge>
+          </Link>
+        ) : (
+          <Text css={{ color: "$neutral9" }}>N/A</Text>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default Index;

components/Votes/VoteModal/index.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { Box, Button } from "@livepeer/design-system";
+
+interface VoteModalProps {
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const Index: React.FC<VoteModalProps> = ({ onClose, children }) =>
+  createPortal(
+    <Box
+      css={{
+        position: "fixed",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        backdropFilter: "blur(4px)",
+        zIndex: 9999,
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <Box
+        css={{
+          position: "relative",
+          backgroundColor: "$neutral3",
+          borderRadius: "$2",
+          width: "90%",
+          maxHeight: "90vh",
+          display: "flex",
+          flexDirection: "column",
+          "@bp2": { width: "50%" },
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Box
+          css={{
+            position: "sticky",
+            top: 0,
+            right: 0,
+            zIndex: 10,
+            backgroundColor: "$neutral3",
+            px: "$4",
+            py: "$2",
+            display: "flex",
+            justifyContent: "flex-end",
+          }}
+        >
+          <Button
+            variant="gray"
+            css={{
+              "&:hover": { backgroundColor: "$red6" },
+            }}
+            onClick={onClose}
+          >
+            Close
+          </Button>
+        </Box>
+
+        <Box
+          css={{
+            overflowY: "auto",
+            px: "$4",
+            py: "$2",
+            maxHeight: "calc(90vh - 56px)",
+          }}
+        >
+          {children}
+        </Box>
+      </Box>
+    </Box>,
+    document.body
+  );
+
+export default Index;

components/Votes/VotePopover/index.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import Spinner from '@components/Spinner';
+import { Flex, Text } from '@livepeer/design-system';
+import VoteModal from '../VoteModal';
+import VoteDetail from '../VoteDetail';
+import { useInfuraVoterVotes } from '../../../hooks/TreasuryVotes/useInfuraVoterVotes';
+
+interface VoterPopoverProps {
+  voter: string;
+  onClose: () => void;
+}
+
+const Index: React.FC<VoterPopoverProps> = ({ voter, onClose }) => {
+  const { votes, isLoading } = useInfuraVoterVotes(voter);
+
+  return (
+    <VoteModal onClose={onClose}>
+      {isLoading ? (
+        <Flex css={{ justifyContent: 'center', alignItems: 'center', height: '150px' }}>
+          <Spinner />
+        </Flex>
+      ) : votes.length > 0 ? (
+        votes.map((vote, idx) => (
+          <VoteDetail key={vote.transactionHash ?? idx} vote={vote} />
+        ))
+      ) : (
+        <Text css={{ color: '$neutral11', textAlign: 'center', mt: '$4' }}>
+          No votes found for this voter.
+        </Text>
+      )}
+    </VoteModal>
+  );
+};
+
+export default Index;

components/Votes/VoteTable/Views/DesktopVoteTable.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Box, Flex, Text } from "@livepeer/design-system";
+import { Vote } from "../../../../lib/api/types/votes";
+import { VoteView } from "./VoteItem";
+
+export interface VoteTableProps {
+  votes: Vote[];
+  counts: { yes: number; no: number; abstain: number };
+  formatWeight: (weight: string) => string;
+  onSelect: (voter: string) => void;
+}
+
+export const DesktopVoteTable: React.FC<VoteTableProps> = ({
+  votes,
+  counts,
+  formatWeight,
+  onSelect,
+}) => (
+  <Box
+    css={{ display: "none", "@bp2": { display: "block" }, overflowX: "auto" }}
+  >
+    <Text
+      css={{
+        textAlign: "center",
+        fontSize: "$3",
+        fontWeight: 500,
+        color: "$white",
+        mb: "$2",
+      }}
+    >
+      Vote Results
+    </Text>
+    <Flex
+      css={{
+        justifyContent: "center",
+        mb: "$4",
+        fontWeight: 700,
+        fontSize: "$3",
+        color: "$white",
+      }}
+    >
+      <Text css={{ mr: "$1", color: "$green9" }}>Yes ({counts.yes})</Text>
+      <Text>|</Text>
+      <Text css={{ mx: "$1", color: "$red9" }}>No ({counts.no})</Text>
+      <Text>|</Text>
+      <Text css={{ ml: "$1", color: "$yellow9" }}>
+        Abstain ({counts.abstain})
+      </Text>
+    </Flex>
+
+    <Text
+      css={{
+        textAlign: "center",
+        fontSize: "$2",
+        color: "$neutral11",
+        mb: "$2",
+      }}
+    >
+      Click on a vote to view a voters proposal voting history.
+    </Text>
+    <Box as="table" css={{ width: "100%", borderCollapse: "collapse" }}>
+      <Box as="thead">
+        <Box as="tr" css={{ backgroundColor: "$neutral4" }}>
+          {["Voter", "Support", "Weight", "Reason", "Vote Txn"].map((label) => (
+            <Box
+              key={label}
+              as="th"
+              css={{
+                textAlign: "left",
+                textTransform: "uppercase",
+                fontSize: "$1",
+                color: "$neutral11",
+                borderBottom: "1px solid $neutral5",
+                padding: "$2 $3",
+              }}
+            >
+              {label}
+            </Box>
+          ))}
+        </Box>
+      </Box>
+      <Box as="tbody">
+        {votes.map((vote) => {
+          return (
+            <VoteView
+              key={vote.choiceID}
+              vote={vote}
+              onSelect={onSelect}
+              formatWeight={formatWeight}
+              isMobile={false}
+            />
+          );
+        })}
+      </Box>
+    </Box>
+  </Box>
+);