Merge pull request #2980 from OlympusDAO/develop

Release: Clearinghouse & Treasury Dash updates

README.md

@@ -191,7 +191,17 @@ Commits to the follow branches are automatically deployed to their respective UR
 **Pull Requests**:
 Each PR into master will get its own custom URL that is visible on the PR page. QA & validate changes on that URL before merging into the develop branch.
 
-## Dashboard
+## Cooler Loans Dashboard
+
+The data in the Cooler Loans Dashboard is served by an API that generates time-series data not possible in a subgraph. See the [cooler-loans-api](https://github.com/OlympusDAO/cooler-loans-api) repository for details.
+
+Different endpoints are used in different circumstances:
+
+- Build (deployed by Fleek): production
+- Local development: dev
+- If `VITE_COOLER_LOANS_API_ENDPOINT` is specified in an environment variable, it will be used regardless
+
+## Treasury Dashboard
 
 The data in the Treasury Dashboard is powered by subgraphs hosted by the Graph Protocol and served using GraphQL. There are a few limitations, however:
 

package.json

@@ -135,6 +135,7 @@
     "url": "^0.11.1",
     "vite": "^4.4.9",
     "vite-plugin-svgr": "^3.2.0",
+    "vite-plugin-transform": "^2.0.1",
     "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^0.34.4"
   },
@@ -176,4 +177,4 @@
       "prettier --write"
     ]
   }
-}
+}

src/hooks/useFederatedSubgraphQuery.ts

@@ -28,12 +28,21 @@ export const { useQuery: useFederatedSubgraphQuery } = createHooks<Operations>(c
  * @param crossChainDataComplete If true, returns up (and including) the date with complete cross-chain data.
  * @returns
  */
-export const useTokenRecordsQuery = (startDate: string | null | undefined, crossChainDataComplete?: boolean) => {
+export const useTokenRecordsQuery = ({
+  startDate,
+  crossChainDataComplete,
+  ignoreCache,
+}: {
+  startDate: string | null | undefined;
+  crossChainDataComplete?: boolean;
+  ignoreCache?: boolean;
+}) => {
   return useFederatedSubgraphQuery({
     operationName: "paginated/tokenRecords",
     input: {
       startDate: startDate || "",
       crossChainDataComplete: crossChainDataComplete || false,
+      ignoreCache: ignoreCache || false,
     },
     enabled: startDate != null,
   });
@@ -50,8 +59,14 @@ export const useTokenRecordsQuery = (startDate: string | null | undefined, cross
  * @param startDate Date string in YYYY-MM-DD format.
  * @returns TokenRecord[] or undefined if there are no results
  */
-export const useTokenRecordsQueryComplete = (startDate: string | null | undefined): TokenRecord[] | undefined => {
-  const { data: tokenRecordResults } = useTokenRecordsQuery(startDate, true);
+export const useTokenRecordsQueryComplete = ({
+  startDate,
+  ignoreCache,
+}: {
+  startDate: string | null | undefined;
+  ignoreCache?: boolean;
+}): TokenRecord[] | undefined => {
+  const { data: tokenRecordResults } = useTokenRecordsQuery({ startDate, crossChainDataComplete: true, ignoreCache });
   const [untilLatestDateResults, setUntilLatestDateResults] = useState<TokenRecord[]>();
 
   useEffect(() => {
@@ -77,10 +92,14 @@ export const useTokenRecordsQueryComplete = (startDate: string | null | undefine
  * @param startDate
  * @returns TokenRecord[] or undefined if there are no results
  */
-export const useTokenRecordsQueryLatestCompleteData = (
-  startDate: string | null | undefined,
-): TokenRecord[] | undefined => {
-  const tokenRecordResults = useTokenRecordsQueryComplete(startDate);
+export const useTokenRecordsQueryLatestCompleteData = ({
+  startDate,
+  ignoreCache,
+}: {
+  startDate: string | null | undefined;
+  ignoreCache?: boolean;
+}): TokenRecord[] | undefined => {
+  const tokenRecordResults = useTokenRecordsQueryComplete({ startDate, ignoreCache });
   const [latestData, setLatestData] = useState<TokenRecord[]>();
 
   useEffect(() => {
@@ -102,9 +121,12 @@ export const useTokenRecordsQueryLatestCompleteData = (
  *
  * This is useful for determining the latest block that has been indexed.
  */
-export const useTokenRecordsLatestQuery = () => {
+export const useTokenRecordsLatestQuery = ({ ignoreCache }: { ignoreCache?: boolean }) => {
   return useFederatedSubgraphQuery({
     operationName: "latest/tokenRecords",
+    input: {
+      ignoreCache: ignoreCache || false,
+    },
   });
 };
 
@@ -117,12 +139,21 @@ export const useTokenRecordsLatestQuery = () => {
  * @param crossChainDataComplete If true, returns up (and including) the date with complete cross-chain data.
  * @returns
  */
-export const useTokenSuppliesQuery = (startDate: string | null | undefined, crossChainDataComplete?: boolean) => {
+export const useTokenSuppliesQuery = ({
+  startDate,
+  crossChainDataComplete,
+  ignoreCache,
+}: {
+  startDate: string | null | undefined;
+  crossChainDataComplete?: boolean;
+  ignoreCache?: boolean;
+}) => {
   return useFederatedSubgraphQuery({
     operationName: "paginated/tokenSupplies",
     input: {
       startDate: startDate || "",
       crossChainDataComplete: crossChainDataComplete || false,
+      ignoreCache: ignoreCache || false,
     },
     enabled: startDate != null,
   });
@@ -139,8 +170,14 @@ export const useTokenSuppliesQuery = (startDate: string | null | undefined, cros
  * @param startDate Date string in YYYY-MM-DD format.
  * @returns TokenSupply[] or undefined if there are no results
  */
-export const useTokenSuppliesQueryComplete = (startDate: string | null | undefined): TokenSupply[] | undefined => {
-  const { data: tokenSupplyResults } = useTokenSuppliesQuery(startDate, true);
+export const useTokenSuppliesQueryComplete = ({
+  startDate,
+  ignoreCache,
+}: {
+  startDate: string | null | undefined;
+  ignoreCache?: boolean;
+}): TokenSupply[] | undefined => {
+  const { data: tokenSupplyResults } = useTokenSuppliesQuery({ startDate, crossChainDataComplete: true, ignoreCache });
   const [untilLatestDateResults, setUntilLatestDateResults] = useState<TokenSupply[]>();
 
   useEffect(() => {
@@ -166,10 +203,14 @@ export const useTokenSuppliesQueryComplete = (startDate: string | null | undefin
  * @param startDate
  * @returns TokenSupply[] or undefined if there are no results
  */
-export const useTokenSuppliesQueryLatestCompleteData = (
-  startDate: string | null | undefined,
-): TokenSupply[] | undefined => {
-  const tokenSupplyResults = useTokenSuppliesQueryComplete(startDate);
+export const useTokenSuppliesQueryLatestCompleteData = ({
+  startDate,
+  ignoreCache,
+}: {
+  startDate?: string | null;
+  ignoreCache?: boolean;
+}): TokenSupply[] | undefined => {
+  const tokenSupplyResults = useTokenSuppliesQueryComplete({ startDate, ignoreCache });
   const [latestData, setLatestData] = useState<TokenSupply[]>();
 
   useEffect(() => {
@@ -189,22 +230,30 @@ export const useTokenSuppliesQueryLatestCompleteData = (
 export const useMetricsQuery = ({
   startDate,
   includeContentRecords,
+  ignoreCache,
 }: {
   startDate?: string | null;
   includeContentRecords?: boolean;
+  ignoreCache?: boolean;
 }) => {
   return useFederatedSubgraphQuery({
     operationName: "paginated/metrics",
     input: {
       startDate: startDate || "",
       includeRecords: includeContentRecords || false,
+      ignoreCache: ignoreCache || false,
     },
     enabled: startDate != null,
+    retry: 3, // Queries with long periods and with includeRecords = true will take a while if not cached, leading to a timeout
+    retryDelay: 5000,
   });
 };
 
-export const useMetricsLatestQuery = () => {
+export const useMetricsLatestQuery = ({ ignoreCache }: { ignoreCache?: boolean }) => {
   return useFederatedSubgraphQuery({
     operationName: "latest/metrics",
+    input: {
+      ignoreCache: ignoreCache || false,
+    },
   });
 };

src/hooks/useProtocolMetrics.ts

@@ -1,7 +1,7 @@
 import { useMetricsLatestQuery } from "src/hooks/useFederatedSubgraphQuery";
 
-export const useTotalValueDeposited = (): number | undefined => {
-  const { data } = useMetricsLatestQuery();
+export const useTotalValueDeposited = ({ ignoreCache }: { ignoreCache?: boolean }): number | undefined => {
+  const { data } = useMetricsLatestQuery({ ignoreCache });
 
   if (!data) {
     return undefined;
@@ -19,8 +19,8 @@ export const useTotalValueDeposited = (): number | undefined => {
  *
  * @returns
  */
-export const useOhmPrice = (): number | undefined => {
-  const { data } = useMetricsLatestQuery();
+export const useOhmPrice = ({ ignoreCache }: { ignoreCache?: boolean }): number | undefined => {
+  const { data } = useMetricsLatestQuery({ ignoreCache });
 
   if (!data) {
     return undefined;
@@ -38,8 +38,8 @@ export const useOhmPrice = (): number | undefined => {
  *
  * @returns
  */
-export const useGOhmPrice = (): number | undefined => {
-  const { data } = useMetricsLatestQuery();
+export const useGOhmPrice = ({ ignoreCache }: { ignoreCache?: boolean }): number | undefined => {
+  const { data } = useMetricsLatestQuery({ ignoreCache });
 
   if (!data) {
     return undefined;
@@ -53,8 +53,8 @@ export const useGOhmPrice = (): number | undefined => {
  *
  * @returns
  */
-export const useCurrentIndex = (): number | undefined => {
-  const { data } = useMetricsLatestQuery();
+export const useCurrentIndex = ({ ignoreCache }: { ignoreCache?: boolean }): number | undefined => {
+  const { data } = useMetricsLatestQuery({ ignoreCache });
 
   if (!data) {
     return undefined;

src/hooks/useTokenRecordsMetrics.ts

@@ -6,12 +6,12 @@ import { useMetricsLatestQuery } from "src/hooks/useFederatedSubgraphQuery";
  *
  * @returns
  */
-export const useTreasuryMarketValueLatest = (): number | undefined => {
+export const useTreasuryMarketValueLatest = (ignoreCache?: boolean): number | undefined => {
   // State variables
   const [assetValue, setAssetValue] = useState<number>();
 
   // Query hooks
-  const { data: metricResult } = useMetricsLatestQuery();
+  const { data: metricResult } = useMetricsLatestQuery({ ignoreCache });
 
   useEffect(() => {
     if (!metricResult) {

src/hooks/useTokenSupplyMetrics.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import { useMetricsLatestQuery } from "src/hooks/useFederatedSubgraphQuery";
 
-export const useOhmCirculatingSupply = (earliestDate?: string | null): number | undefined => {
+export const useOhmCirculatingSupply = ({ ignoreCache }: { ignoreCache?: boolean }): number | undefined => {
   // Query hooks
-  const { data: metricResult } = useMetricsLatestQuery();
+  const { data: metricResult } = useMetricsLatestQuery({ ignoreCache });
 
   // State variables
   const [circulatingSupply, setCirculatingSupply] = useState<number>();
@@ -20,9 +20,9 @@ export const useOhmCirculatingSupply = (earliestDate?: string | null): number |
   return circulatingSupply;
 };
 
-export const useOhmFloatingSupply = (earliestDate?: string | null): number | undefined => {
+export const useOhmFloatingSupply = ({ ignoreCache }: { ignoreCache?: boolean }): number | undefined => {
   // Query hooks
-  const { data: metricResult } = useMetricsLatestQuery();
+  const { data: metricResult } = useMetricsLatestQuery({ ignoreCache });
 
   // State variables
   const [floatingSupply, setFloatingSupply] = useState<number>();
@@ -39,9 +39,9 @@ export const useOhmFloatingSupply = (earliestDate?: string | null): number | und
   return floatingSupply;
 };
 
-export const useOhmBackedSupply = (earliestDate?: string | null): number | undefined => {
+export const useOhmBackedSupply = ({ ignoreCache }: { ignoreCache?: boolean }): number | undefined => {
   // Query hooks
-  const { data: metricResult } = useMetricsLatestQuery();
+  const { data: metricResult } = useMetricsLatestQuery({ ignoreCache });
 
   // State variables
   const [backedSupply, setBackedSupply] = useState<number>();
@@ -58,9 +58,9 @@ export const useOhmBackedSupply = (earliestDate?: string | null): number | undef
   return backedSupply;
 };
 
-export const useOhmTotalSupply = (earliestDate?: string | null): number | undefined => {
+export const useOhmTotalSupply = ({ ignoreCache }: { ignoreCache?: boolean }): number | undefined => {
   // Query hooks
-  const { data: metricResult } = useMetricsLatestQuery();
+  const { data: metricResult } = useMetricsLatestQuery({ ignoreCache });
 
   // State variables
   const [totalSupply, setTotalSupply] = useState<number>();

src/hooks/useTreasuryMetrics.ts

@@ -6,11 +6,13 @@ import { useMetricsLatestQuery } from "src/hooks/useFederatedSubgraphQuery";
  *
  * @returns [marketCap, ohmPrice, circulatingSupply]
  */
-export const useMarketCap = (
-  earliestDate?: string | null,
-): [number | undefined, number | undefined, number | undefined] => {
+export const useMarketCap = ({
+  ignoreCache,
+}: {
+  ignoreCache?: boolean;
+}): [number | undefined, number | undefined, number | undefined] => {
   // Query hooks
-  const { data: metricResult } = useMetricsLatestQuery();
+  const { data: metricResult } = useMetricsLatestQuery({ ignoreCache });
 
   // State variables
   const [ohmPrice, setOhmPrice] = useState<number>();
@@ -38,9 +40,9 @@ export const useMarketCap = (
  *
  * @returns [liquidBackingPerBackedOhm, liquidBacking, backedOhm]
  */
-export const useLiquidBackingPerOhmBacked = (earliestDate?: string | null): [number, number, number] => {
+export const useLiquidBackingPerOhmBacked = ({ ignoreCache }: { ignoreCache?: boolean }): [number, number, number] => {
   // Query hooks
-  const { data: metricResult } = useMetricsLatestQuery();
+  const { data: metricResult } = useMetricsLatestQuery({ ignoreCache });
 
   // State variables
   const [liquidBackingPerOhmBacked, setLiquidBackingPerOhmBacked] = useState(0);
@@ -65,9 +67,13 @@ export const useLiquidBackingPerOhmBacked = (earliestDate?: string | null): [num
  *
  * @returns [liquidBackingPerGOhm, liquidBacking, latestIndex, ohmFloatingSupply]
  */
-export const useLiquidBackingPerGOhm = (earliestDate?: string | null): [number, number, number, number] => {
+export const useLiquidBackingPerGOhm = ({
+  ignoreCache,
+}: {
+  ignoreCache?: boolean;
+}): [number, number, number, number] => {
   // Query hooks
-  const { data: metricResult } = useMetricsLatestQuery();
+  const { data: metricResult } = useMetricsLatestQuery({ ignoreCache });
 
   // State variables
   const [liquidBacking, setLiquidBacking] = useState(0);