310 showcase orchestrator voting activity in the UI

apollo/subgraph.ts

@@ -8963,6 +8963,13 @@ export type TreasuryProposalsQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type TreasuryProposalsQuery = { __typename: 'Query', treasuryProposals: Array<{ __typename: 'TreasuryProposal', id: string, description: string, calldatas: Array<any>, targets: Array<string>, values: Array<string>, voteEnd: string, voteStart: string, proposer: { __typename: 'LivepeerAccount', id: string } }> };
 
+export type GetProposalsByIdsQueryVariables = Exact<{
+  ids: Array<Scalars['ID']> | Scalars['ID'];
+}>;
+
+
+export type GetProposalsByIdsQuery = { __typename: 'Query', treasuryProposals: Array<{ __typename: 'TreasuryProposal', id: string, description: string, voteStart: string, voteEnd: string }> };
+
 export type VoteQueryVariables = Exact<{
   id: Scalars['ID'];
 }>;
@@ -9906,6 +9913,44 @@ export function useTreasuryProposalsLazyQuery(baseOptions?: Apollo.LazyQueryHook
 export type TreasuryProposalsQueryHookResult = ReturnType<typeof useTreasuryProposalsQuery>;
 export type TreasuryProposalsLazyQueryHookResult = ReturnType<typeof useTreasuryProposalsLazyQuery>;
 export type TreasuryProposalsQueryResult = Apollo.QueryResult<TreasuryProposalsQuery, TreasuryProposalsQueryVariables>;
+export const GetProposalsByIdsDocument = gql`
+    query getProposalsByIds($ids: [ID!]!) {
+  treasuryProposals(where: {id_in: $ids}) {
+    id
+    description
+    voteStart
+    voteEnd
+  }
+}
+    `;
+
+/**
+ * __useGetProposalsByIdsQuery__
+ *
+ * To run a query within a React component, call `useGetProposalsByIdsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetProposalsByIdsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetProposalsByIdsQuery({
+ *   variables: {
+ *      ids: // value for 'ids'
+ *   },
+ * });
+ */
+export function useGetProposalsByIdsQuery(baseOptions: Apollo.QueryHookOptions<GetProposalsByIdsQuery, GetProposalsByIdsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetProposalsByIdsQuery, GetProposalsByIdsQueryVariables>(GetProposalsByIdsDocument, options);
+      }
+export function useGetProposalsByIdsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetProposalsByIdsQuery, GetProposalsByIdsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetProposalsByIdsQuery, GetProposalsByIdsQueryVariables>(GetProposalsByIdsDocument, options);
+        }
+export type GetProposalsByIdsQueryHookResult = ReturnType<typeof useGetProposalsByIdsQuery>;
+export type GetProposalsByIdsLazyQueryHookResult = ReturnType<typeof useGetProposalsByIdsLazyQuery>;
+export type GetProposalsByIdsQueryResult = Apollo.QueryResult<GetProposalsByIdsQuery, GetProposalsByIdsQueryVariables>;
 export const VoteDocument = gql`
     query vote($id: ID!) {
   vote(id: $id) {

components/Account/index.tsx

@@ -1,3 +1,4 @@
+import { formatAddress } from "@lib/utils";
 import { Box, Flex, Link as A } from "@livepeer/design-system";
 import { useAccountAddress, useEnsData } from "hooks";
 import Link from "next/link";
@@ -52,11 +53,7 @@ const Account = () => {
           >
             <AccountIcon />
           </Flex>
-          <Box>
-            {ens?.name
-              ? ens.name
-              : accountAddress.replace(accountAddress.slice(6, 38), "…")}
-          </Box>
+          <Box>{ens?.name ? ens.name : formatAddress(accountAddress)}</Box>
         </A>
       </Flex>
     </Box>

components/AccountCell/index.tsx

@@ -1,4 +1,4 @@
-import { textTruncate } from "@lib/utils";
+import { formatAddress, textTruncate } from "@lib/utils";
 import { Box, Flex } from "@livepeer/design-system";
 import { useEnsData } from "hooks";
 import { QRCodeCanvas } from "qrcode.react";
@@ -88,7 +88,7 @@ const Index = ({ active, address }) => {
           <Box css={{ fontWeight: 600 }}>
             {identity?.name
               ? textTruncate(identity.name, 12, "…")
-              : address.replace(address.slice(5, 36), "…")}
+              : formatAddress(address)}
           </Box>
         </Flex>
       </Flex>

components/Claim/index.tsx

@@ -1,6 +1,7 @@
 import { LAYOUT_MAX_WIDTH } from "@layouts/constants";
 import { l2Migrator } from "@lib/api/abis/bridge/L2Migrator";
 import { getL2MigratorAddress } from "@lib/api/contracts";
+import { formatAddress } from "@lib/utils";
 import { Box, Button, Container, Flex, Text } from "@livepeer/design-system";
 import { ArrowTopRightIcon } from "@modulz/radix-icons";
 import { constants, ethers } from "ethers";
@@ -202,10 +203,7 @@ const Claim = () => {
               borderBottom: "1px solid rgba(255,255,255, .2)",
             }}
           >
-            {migrationParams.delegate.replace(
-              migrationParams.delegate.slice(6, 38),
-              "…"
-            )}
+            {formatAddress(migrationParams.delegate)}
           </Box>
         </Box>
         <Flex css={{ marginTop: "$3", alignItems: "center" }}>

components/DelegatingView/index.tsx

@@ -1,7 +1,7 @@
 import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import Stat from "@components/Stat";
 import { bondingManager } from "@lib/api/abis/main/BondingManager";
-import { checkAddressEquality } from "@lib/utils";
+import { checkAddressEquality, formatAddress } from "@lib/utils";
 import { Box, Button, Flex, Link as A, Text } from "@livepeer/design-system";
 import { QuestionMarkCircledIcon } from "@modulz/radix-icons";
 import { AccountQueryResult, OrchestratorsSortedQueryResult } from "apollo";
@@ -167,10 +167,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                 <Box>
                   {delegateIdentity?.name
                     ? delegateIdentity?.name
-                    : delegator?.delegate?.id.replace(
-                        delegator?.delegate?.id.slice(7, 37),
-                        "…"
-                      )}
+                    : formatAddress(delegator?.delegate?.id)}
                 </Box>
               }
             />{" "}

components/DelegatingWidget/Header.tsx

@@ -1,4 +1,5 @@
 import { EnsIdentity } from "@lib/api/types/get-ens";
+import { formatAddress } from "@lib/utils";
 import { Box, Flex, Heading } from "@livepeer/design-system";
 import { QRCodeCanvas } from "qrcode.react";
 
@@ -58,7 +59,7 @@ const Header = ({
         <Heading size="1" css={{ fontWeight: 700 }}>
           {delegateProfile?.name
             ? delegateProfile.name
-            : transcoder?.id.replace(transcoder.id.slice(7, 37), "…")}
+            : formatAddress(transcoder?.id)}
         </Heading>
         <Box
           css={{

components/HistoryView/index.tsx

@@ -1,5 +1,6 @@
 import Spinner from "@components/Spinner";
 import dayjs from "@lib/dayjs";
+import { formatAddress, formatTransactionHash } from "@lib/utils";
 import {
   Box,
   Card as CardBase,
@@ -185,11 +186,7 @@ function renderSwitch(event, i: number) {
           >
             <Box>
               <Box css={{ fontWeight: 500 }}>
-                Delegated with{" "}
-                {event.newDelegate.id.replace(
-                  event.newDelegate.id.slice(7, 37),
-                  "…"
-                )}
+                Delegated with {formatAddress(event.newDelegate.id)}
               </Box>
               <Box
                 css={{ marginTop: "$2", fontSize: "$1", color: "$neutral11" }}
@@ -208,10 +205,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -271,10 +265,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -312,8 +303,7 @@ function renderSwitch(event, i: number) {
           >
             <Box>
               <Box css={{ fontWeight: 500 }}>
-                Redelegated with{" "}
-                {event.delegate.id.replace(event.delegate.id.slice(7, 37), "…")}
+                Redelegated with {formatAddress(event.delegate.id)}
               </Box>
               <Box
                 css={{ marginTop: "$2", fontSize: "$1", color: "$neutral11" }}
@@ -332,10 +322,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -378,8 +365,7 @@ function renderSwitch(event, i: number) {
           >
             <Box>
               <Box css={{ fontWeight: 500 }}>
-                Undelegated from{" "}
-                {event.delegate.id.replace(event.delegate.id.slice(7, 37), "…")}
+                Undelegated from {formatAddress(event.delegate.id)}
               </Box>
               <Box
                 css={{ marginTop: "$2", fontSize: "$1", color: "$neutral11" }}
@@ -398,10 +384,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -463,10 +446,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -526,10 +506,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -593,10 +570,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -655,10 +629,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -717,10 +688,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -780,10 +748,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>
@@ -848,10 +813,7 @@ function renderSwitch(event, i: number) {
                 }}
               >
                 <Box css={{ marginRight: "$1" }}>
-                  {event.transaction.id.replace(
-                    event.transaction.id.slice(6, 62),
-                    "…"
-                  )}
+                  {formatTransactionHash(event.transaction.id)}
                 </Box>
                 <ExternalLinkIcon />
               </Flex>