feat: add total supply and annual supply change to overview

components/RoundStatus/index.tsx

@@ -2,14 +2,14 @@ import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import Spinner from "@components/Spinner";
 import { AVERAGE_L1_BLOCK_TIME } from "@lib/chains";
 import dayjs from "@lib/dayjs";
-import { Box, Flex, getThemes, Text } from "@livepeer/design-system";
+import { Box, Flex, getThemes, Skeleton, Text } from "@livepeer/design-system";
 import {
   CheckIcon,
   Cross1Icon,
   QuestionMarkCircledIcon,
 } from "@modulz/radix-icons";
 import { ProtocolQueryResult } from "apollo";
-import { useCurrentRoundData } from "hooks";
+import { useCurrentRoundData, useSupplyChangeData } from "hooks";
 import { useTheme } from "next-themes";
 import numbro from "numbro";
 import { useMemo } from "react";
@@ -77,7 +77,12 @@ const Index = ({
       ) || 0,
     [protocol]
   );
-
+  const totalSupply = useMemo(
+    () => (protocol?.totalSupply ? Number(protocol.totalSupply) : null),
+    [protocol]
+  );
+  const { data: supplyChangeData, isLoading: isSupplyChangeLoading } =
+    useSupplyChangeData();
   return (
     <Box
       css={{
@@ -172,7 +177,6 @@ const Index = ({
         ) : currentRoundInfo?.initialized ? (
           <Flex
             css={{
-              paddingBottom: "$2",
               alignItems: "center",
               flexDirection: "column",
             }}
@@ -352,6 +356,112 @@ const Index = ({
                 </Text>
               </Flex>
             </ExplorerTooltip>
+            <Box
+              css={{
+                width: "100%",
+                borderTop: "1px solid $neutral6",
+                paddingTop: "8px",
+                marginTop: "8px",
+              }}
+            >
+              <ExplorerTooltip
+                multiline
+                content={<Box>The current total supply of LPT.</Box>}
+              >
+                <Flex
+                  css={{
+                    width: "100%",
+                    justifyContent: "space-between",
+                  }}
+                >
+                  <Flex
+                    css={{
+                      alignItems: "center",
+                    }}
+                  >
+                    <Text
+                      css={{
+                        fontSize: "$2",
+                      }}
+                      variant="neutral"
+                    >
+                      Total Supply
+                    </Text>
+                    <Box css={{ marginLeft: "$1" }}>
+                      <Box
+                        as={QuestionMarkCircledIcon}
+                        css={{ color: "$neutral11" }}
+                      />
+                    </Box>
+                  </Flex>
+
+                  <Text
+                    css={{
+                      fontSize: "$2",
+                      color: "white",
+                    }}
+                  >
+                    {totalSupply !== null
+                      ? `${numbro(totalSupply).format({
+                          mantissa: 0,
+                          average: true,
+                        })} LPT`
+                      : "--"}
+                  </Text>
+                </Flex>
+              </ExplorerTooltip>
+              <ExplorerTooltip
+                multiline
+                content={<Box>Total supply change over the past 365 days.</Box>}
+              >
+                <Flex
+                  css={{
+                    marginTop: "$1",
+                    width: "100%",
+                    justifyContent: "space-between",
+                  }}
+                >
+                  <Flex
+                    css={{
+                      alignItems: "center",
+                    }}
+                  >
+                    <Text
+                      css={{
+                        fontSize: "$2",
+                      }}
+                      variant="neutral"
+                    >
+                      Supply Change (1Y)
+                    </Text>
+                    <Box css={{ marginLeft: "$1" }}>
+                      <Box
+                        as={QuestionMarkCircledIcon}
+                        css={{ color: "$neutral11" }}
+                      />
+                    </Box>
+                  </Flex>
+
+                  <Text
+                    css={{
+                      fontSize: "$2",
+                      color: "white",
+                    }}
+                  >
+                    {isSupplyChangeLoading ? (
+                      <Skeleton css={{ height: 16, width: 80 }} />
+                    ) : supplyChangeData?.supplyChange != null ? (
+                      numbro(supplyChangeData?.supplyChange ?? 0).format({
+                        output: "percent",
+                        mantissa: 2,
+                      })
+                    ) : (
+                      "--"
+                    )}
+                  </Text>
+                </Flex>
+              </ExplorerTooltip>
+            </Box>
           </Flex>
         ) : (
           <Text

hooks/useSwr.tsx

@@ -15,6 +15,7 @@ import {
   PerformanceMetrics,
 } from "@lib/api/types/get-performance";
 import { Regions } from "@lib/api/types/get-regions";
+import { SupplyChangeData } from "@lib/api/types/get-supply-change";
 import {
   ProposalState,
   ProposalVotingPower,
@@ -67,6 +68,17 @@ export const useChangefeedData = () => {
   return data ?? null;
 };
 
+export const useSupplyChangeData = () => {
+  const { data, error, isValidating } =
+    useSWR<SupplyChangeData>(`/supply-change`);
+
+  return {
+    data: data ?? null,
+    isLoading: Boolean(!data && isValidating && !error),
+    error,
+  };
+};
+
 export const useAvailableInferencePipelinesData = () => {
   const { data, isValidating } = useSWR<AvailablePipelines>(`/pipelines`);
   return { data: data ?? { pipelines: [] }, isValidating };

lib/api/types/get-supply-change.ts

@@ -0,0 +1,7 @@
+export type SupplyChangeData = {
+  startDate: number;
+  endDate: number;
+  startSupply: number;
+  endSupply: number;
+  supplyChange: number | null;
+};

pages/api/supply-change.tsx

@@ -0,0 +1,94 @@
+import { getCacheControlHeader } from "@lib/api";
+import type { SupplyChangeData } from "@lib/api/types/get-supply-change";
+import { CHAIN_INFO, DEFAULT_CHAIN_ID } from "@lib/chains";
+import { fetchWithRetry } from "@lib/fetchWithRetry";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+const SECONDS_PER_DAY = 24 * 60 * 60;
+
+const supplyChangeHandler = async (
+  req: NextApiRequest,
+  res: NextApiResponse<SupplyChangeData | null>
+) => {
+  try {
+    const { method } = req;
+    if (method !== "GET") {
+      res.setHeader("Allow", ["GET"]);
+      return res.status(405).end(`Method ${method} Not Allowed`);
+    }
+    res.setHeader("Cache-Control", getCacheControlHeader("day"));
+
+    const rangeStartDate =
+      Math.floor(Date.now() / 1000) - 365 * SECONDS_PER_DAY;
+
+    const response = await fetchWithRetry(
+      CHAIN_INFO[DEFAULT_CHAIN_ID].subgraph,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          query: `
+            query SupplyChange($rangeStartDate: Int!) {
+              start: days(
+                first: 1
+                orderBy: date
+                orderDirection: asc
+                where: { date_gte: $rangeStartDate }
+              ) {
+                date
+                totalSupply
+              }
+              end: days(
+                first: 1
+                orderBy: date
+                orderDirection: desc
+                where: { date_gte: $rangeStartDate }
+              ) {
+                date
+                totalSupply
+              }
+            }
+          `,
+          variables: {
+            rangeStartDate,
+          },
+        }),
+      },
+      {
+        retryOnMethods: ["POST"],
+      }
+    );
+
+    if (!response.ok) {
+      return res.status(500).json(null);
+    }
+
+    const { data } = await response.json();
+    const start = Array.isArray(data?.start) ? data.start : [];
+    const end = Array.isArray(data?.end) ? data.end : [];
+
+    const startItem = start[0];
+    const endItem = end[0];
+    const startSupply = Number(startItem?.totalSupply ?? 0);
+    const endSupply = Number(endItem?.totalSupply ?? 0);
+    const supplyChange =
+      startSupply > 0 && endSupply > 0
+        ? (endSupply - startSupply) / startSupply
+        : null;
+
+    return res.status(200).json({
+      startDate: Number(startItem?.date ?? 0),
+      endDate: Number(endItem?.date ?? 0),
+      startSupply,
+      endSupply,
+      supplyChange,
+    });
+  } catch (err) {
+    console.error(err);
+    return res.status(500).json(null);
+  }
+};
+
+export default supplyChangeHandler;