Cooler Loans: Maturity Chart (#2973)

* Display projected maturity

* Fix rendering/errors with Paper

* Fix lend and borrow icon

* Allow for overrides of Cooler Loans API endpoint

* Rename maturity chart

* Adjust categories in maturity chart

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/views/Lending/Cooler/dashboard/Dashboard.tsx

@@ -1,10 +1,11 @@
-import { Grid, Paper, useMediaQuery, useTheme } from "@mui/material";
-import { TabBar } from "@olympusdao/component-library";
+import { Grid, useMediaQuery, useTheme } from "@mui/material";
+import { Paper, TabBar } from "@olympusdao/component-library";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { adjustDateByDays } from "src/helpers/DateHelper";
 import { updateSearchParams } from "src/helpers/SearchParamsHelper";
 import { IncomeGraph } from "src/views/Lending/Cooler/dashboard/IncomeGraph";
+import { MaturityGraph } from "src/views/Lending/Cooler/dashboard/MaturityGraph";
 import { UtilisationGraph } from "src/views/Lending/Cooler/dashboard/UtilisationGraph";
 
 const PARAM_DAYS = "days";
@@ -104,11 +105,11 @@ export const CoolerDashboard = () => {
             <IncomeGraph startDate={startDate} />
           </Paper>
         </Grid>
-        {/* <Grid item xs={12} paddingBottom={5}>
+        <Grid item xs={12} paddingBottom={5}>
           <Paper {...paperProps} style={paperStyles}>
-            <MaturityGraph startDate={startDate} />
+            <MaturityGraph />
           </Paper>
-        </Grid> */}
+        </Grid>
       </Grid>
     </div>
   );

src/views/Lending/Cooler/dashboard/MaturityGraph.tsx

@@ -28,10 +28,15 @@ type SnapshotWithExpiryBuckets = Snapshot & {
   };
 };
 
-export const MaturityGraph = ({ startDate }: { startDate?: Date }) => {
+export const MaturityGraph = () => {
   const theme = useTheme();
 
-  const { data } = useCoolerSnapshot(startDate);
+  // For the maturity chart, we want to show the data for 121 days from now
+  const startDate = new Date();
+  const beforeDate = new Date();
+  beforeDate.setDate(beforeDate.getDate() + 121);
+
+  const { data } = useCoolerSnapshot(startDate, beforeDate);
 
   const [coolerSnapshots, setCoolerSnapshots] = useState<SnapshotWithExpiryBuckets[] | undefined>();
   useMemo(() => {
@@ -88,11 +93,11 @@ export const MaturityGraph = ({ startDate }: { startDate?: Date }) => {
    */
   const dataKeys: string[] = [
     "expiryBuckets.expired",
-    "expiryBuckets.active",
     "expiryBuckets.30Days",
     "expiryBuckets.121Days",
+    "expiryBuckets.active",
   ];
-  const itemNames: string[] = ["Expired", "Active", "< 30 Days", "< 121 Days"];
+  const itemNames: string[] = ["Expired", "< 30 Days", "< 121 Days", ">= 121 Days"];
 
   const bulletpointStyles = getBulletpointStylesMap(DEFAULT_BULLETPOINT_COLOURS, dataKeys);
   const colorsMap = getDataKeyColorsMap(DEFAULT_COLORS, dataKeys);
@@ -102,7 +107,7 @@ export const MaturityGraph = ({ startDate }: { startDate?: Date }) => {
     <Grid container>
       <Grid item xs={12}>
         <Typography variant="h6" color="textSecondary" display="inline">
-          Maturity
+          Projected Maturity
         </Typography>
       </Grid>
       <Grid item xs={12} container spacing={2}>

src/views/Lending/Cooler/hooks/customHttpClient.ts

@@ -1,4 +1,4 @@
-const baseURL = "https://olympus-cooler-loans-api-prod.web.app";
+const baseURL = "%{COOLER_LOANS_API_ENDPOINT}%";
 
 /**
  * We define a custom HTTP client for react-query to use. This is configured

src/views/Lending/Cooler/hooks/useSnapshot.tsx

@@ -1,14 +1,18 @@
 import { Snapshot, useGetSnapshots } from "src/generated/coolerLoans";
 import { getISO8601String } from "src/helpers/DateHelper";
 
-export const useCoolerSnapshot = (startDate?: Date) => {
-  const tomorrowDate = new Date();
-  tomorrowDate.setDate(tomorrowDate.getDate() + 1);
+export const useCoolerSnapshot = (startDate?: Date, beforeDate?: Date) => {
+  let _beforeDate = beforeDate;
+  // If there is no beforeDate, set it to tomorrow
+  if (!_beforeDate) {
+    _beforeDate = new Date();
+    _beforeDate.setDate(_beforeDate.getDate() + 1);
+  }
 
   const { data, isLoading } = useGetSnapshots(
     {
       startDate: startDate ? getISO8601String(startDate) : "", // Will not be set if startDate is undefined
-      beforeDate: getISO8601String(tomorrowDate),
+      beforeDate: getISO8601String(_beforeDate),
     },
     {
       query: {

vite.config.js

@@ -5,6 +5,7 @@ import polyfillNode from "rollup-plugin-polyfill-node";
 import { defineConfig } from "vite";
 import svgrPlugin from "vite-plugin-svgr";
 import viteTsconfigPaths from "vite-tsconfig-paths";
+import transformPlugin from "vite-plugin-transform";
 
 export default ({ mode }) => {
   return defineConfig({
@@ -15,6 +16,18 @@ export default ({ mode }) => {
       viteTsconfigPaths(),
       svgrPlugin(),
       { ...polyfillNode({ fs: true }), enforce: "post" },
+      transformPlugin({
+        tStart: "%{",
+        tEnd: "}%",
+        replace: {
+          "COOLER_LOANS_API_ENDPOINT":
+            process.env.VITE_COOLER_LOANS_API_ENDPOINT ?
+              process.env.VITE_COOLER_LOANS_API_ENDPOINT :
+              mode === "development" ?
+                "https://olympus-cooler-loans-api-dev.web.app" : // Avoids CORS errors during local development
+                "https://olympus-cooler-loans-api-prod.web.app", // Used in production builds
+        },
+      }),
     ],
     resolve: {
       alias: {

yarn.lock

@@ -13585,6 +13585,11 @@ vite-plugin-svgr@^3.2.0:
     "@svgr/core" "^7.0.0"
     "@svgr/plugin-jsx" "^7.0.0"
 
+vite-plugin-transform@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-transform/-/vite-plugin-transform-2.0.1.tgz#330e894c9c6c3a8b1c659ed0562b098cf41a4ab0"
+  integrity sha512-sI9SzcuFbCj04YHEmhw9C14kNnVq3QFLWq7eofjNnDWnw/p+i+6pnSvVZSx1GDVpW1ciZglrv794XEU/lGGvyA==
+
 vite-tsconfig-paths@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.1.tgz#e53b89096b91d31a6d1e26f75999ea8c336a89ed"