feat: add total supply and annual supply change to overview

components/RoundStatus/index.tsx

@@ -9,7 +9,7 @@ import {
   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,6 +77,11 @@ const Index = ({
       ) || 0,
     [protocol]
   );
+  const totalSupply = useMemo(
+    () => (protocol?.totalSupply ? Number(protocol.totalSupply) : null),
+    [protocol]
+  );
+  const supplyChangeData = useSupplyChangeData();
 
   return (
     <Box
@@ -172,7 +177,6 @@ const Index = ({
         ) : currentRoundInfo?.initialized ? (
           <Flex
             css={{
-              paddingBottom: "$2",
               alignItems: "center",
               flexDirection: "column",
             }}
@@ -352,6 +356,101 @@ const Index = ({
                 </Text>
               </Flex>
             </ExplorerTooltip>
+            <Box css={{ marginTop: "$3" }} />
+            <ExplorerTooltip
+              multiline
+              content={<Box>The current total supply of LPT.</Box>}
+            >
+              <Flex
+                css={{
+                  marginTop: "$1",
+                  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",
+                  }}
+                >
+                  {supplyChangeData?.supplyChange != null
+                    ? numbro(supplyChangeData?.supplyChange ?? 0).format({
+                        output: "percent",
+                        mantissa: 2,
+                      })
+                    : "--"}
+                </Text>
+              </Flex>
+            </ExplorerTooltip>
           </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,12 @@ export const useChangefeedData = () => {
   return data ?? null;
 };
 
+export const useSupplyChangeData = () => {
+  const { data } = useSWR<SupplyChangeData>(`/supply-change`);
+
+  return data ?? null;
+};
+
 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;

pages/treasury/create-proposal.tsx

@@ -301,9 +301,9 @@ const CreateProposal = () => {
                 },
               }}
             >
-                <Text variant="neutral" size="3" css={{ flexShrink: 0 }}>
+              <Text variant="neutral" size="3" css={{ flexShrink: 0 }}>
                 LPT receiver:
-                </Text>
+              </Text>
               <TextField
                 css={{
                   width: "100%",