lite changes

solendprotocol · Jul 24, 2023 · 0d6da53 · 0d6da53
1 parent fa9f445
commit 0d6da53
Show file tree

Hide file tree

Showing 13 changed files with 419 additions and 129 deletions.
diff --git a/solend-lite/package.json b/solend-lite/package.json
@@ -48,6 +48,7 @@
     "react-no-ssr": "^1.1.0",
     "react-svg": "^16.0.0",
     "react-timer-hook": "^3.0.5",
+    "recharts": "^2.7.2",
     "sass": "^1.57.1",
     "string-comparison": "^1.1.0",
     "typescript": "4.9.4"

diff --git a/solend-lite/src/components/InterestGraph/InterestGraph.tsx b/solend-lite/src/components/InterestGraph/InterestGraph.tsx
@@ -0,0 +1,165 @@
+import React, { ReactElement } from 'react';
+import { ReserveType } from '@solendprotocol/solend-sdk';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  ReferenceDot,
+  Label,
+} from 'recharts';
+import { themeConfig } from 'theme/theme';
+import { Box, Text } from '@chakra-ui/react';
+import { formatPercent } from 'utils/numberFormatter';
+
+const CustomTooltip = ({
+  active,
+  payload,
+  label,
+}: {
+  active?: boolean;
+  payload?: Array<{
+    payload?: { name: string };
+    value?: number;
+  }>;
+  label?: number;
+}) => {
+  if (active && payload && payload.length) {
+    return (
+      <Box bg='var(--chakra-colors-neutral)' p={2} opacity={0.9}>
+        <Text>{payload[0]?.payload?.name}</Text>
+        <Text
+          variant='caption'
+          color='secondary'
+        >{`Utilization: ${formatPercent(
+          (payload[0]?.value ?? 0) / 100,
+        )}`}</Text>
+        <Text variant='caption' color='secondary'>{`Interest: ${formatPercent(
+          (label ?? 0) / 100,
+        )}`}</Text>
+        <br />
+        <Text variant='caption' color='secondary'>
+          Click to return to parameter view
+        </Text>
+      </Box>
+    );
+  }
+
+  return null;
+};
+
+function InterestGraph({ reserve }: { reserve: ReserveType }): ReactElement {
+  const data = [
+    {
+      name: 'Min borrow rate',
+      utilization: 0,
+      interest: reserve.minBorrowApr * 100,
+      current: false,
+    },
+    {
+      name: 'Target rate',
+      utilization: reserve.targetUtilization * 100,
+      interest: reserve.targetBorrowApr * 100,
+      current: false,
+    },
+    {
+      name: 'Max rate',
+      utilization: reserve.maxUtilizationRate * 100,
+      interest: reserve.maxBorrowApr * 100,
+      current: false,
+    },
+    {
+      name: 'Supermax rate',
+      utilization: 100,
+      interest: reserve.superMaxBorrowRate * 100,
+      current: false,
+    },
+    {
+      name: 'Current',
+      utilization: reserve.reserveUtilization.toNumber() * 100,
+      interest: reserve.borrowInterest.toNumber() * 100,
+      current: true,
+    },
+  ].sort((a, b) => a.utilization - b.utilization);
+
+  return (
+    <ResponsiveContainer width='100%' height='100%'>
+      <LineChart
+        data={data}
+        margin={{ top: 12, bottom: 24 }}
+        style={{
+          cursor: 'pointer',
+        }}
+      >
+        <CartesianGrid strokeDasharray='1 1' />
+        <XAxis
+          offset={14}
+          dataKey='utilization'
+          domain={[0, 100]}
+          type='number'
+          style={{
+            fontSize: 12,
+          }}
+          unit='%'
+        >
+          <Label
+            value='Utilization'
+            offset={-4}
+            style={themeConfig.components.Text.variants.disclosure}
+            color='var(--chakra-colors-secondary)'
+            position='insideBottom'
+          />
+        </XAxis>
+        <YAxis
+          type='number'
+          domain={[0, 100]}
+          style={{
+            fontSize: 12,
+          }}
+          unit='%'
+        >
+          <Label
+            style={{
+              ...themeConfig.components.Text.variants.disclosure,
+              textAnchor: 'middle',
+            }}
+            color='var(--chakra-colors-secondary)'
+            value='Interest'
+            position='insideLeft'
+            angle={-90}
+          />
+        </YAxis>
+        <Tooltip
+          content={({
+            active,
+            payload,
+            label,
+          }: {
+            active?: boolean;
+            payload?: Array<{
+              payload?: { name: string };
+              value?: number;
+            }>;
+            label?: number;
+          }) => (
+            <CustomTooltip active={active} payload={payload} label={label} />
+          )}
+        />
+        <Line dataKey='interest' stroke='#82ca9d' />
+        <ReferenceDot
+          x={reserve.reserveUtilization.toNumber() * 100}
+          y={reserve.borrowInterest.toNumber() * 100}
+          isFront
+          fill='var(--chakra-colors-brand)'
+          stroke='var(--chakra-colors-brand)'
+          r={4}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
+
+export default InterestGraph;
diff --git a/solend-lite/src/components/Metric/Metric.module.scss b/solend-lite/src/components/Metric/Metric.module.scss
@@ -25,3 +25,10 @@
     }
   }
 }
+
+.rowMetric {
+  .label {
+    align-items: center;
+    gap: 4px;
+  }
+}
diff --git a/solend-lite/src/components/Metric/Metric.tsx b/solend-lite/src/components/Metric/Metric.tsx
@@ -35,7 +35,11 @@ function Metric({
       align={row ? 'center' : undefined}
       justify='space-between'
       style={style}
-      className={classNames(styles.alignCenter, !alignCenter && styles.metric)}
+      className={classNames(
+        'metric',
+        styles.alignCenter,
+        !alignCenter && (row ? styles.rowMetric : styles.metric),
+      )}
     >
       {label && (
         <Flex className={styles.label} justify='space-between'>

diff --git a/solend-lite/src/components/Pool/PoolTable/PoolTable.tsx b/solend-lite/src/components/Pool/PoolTable/PoolTable.tsx
@@ -47,17 +47,19 @@ export default function PoolTable({
       header: 'Open LTV / BW',
       meta: { isNumeric: true },
       cell: ({ row: { original: reserve } }) => (
-        <Flex gap={1} align='center'>
-          <Text>{formatPercent(reserve.loanToValueRatio, false, 0)}</Text>
-          <Text color='secondary' variant='caption'>
+        <>
+          <Text display='inline-block'>
+            {formatPercent(reserve.loanToValueRatio, false, 0)}
+          </Text>{' '}
+          <Text display='inline-block' color='secondary' variant='caption'>
             /
-          </Text>
-          <Text>
+          </Text>{' '}
+          <Text display='inline-block'>
             {reserve.addedBorrowWeightBPS.toString() !== U64_MAX
               ? formatToken(reserve.borrowWeight.toString(), 2, false, true)
               : '∞'}
           </Text>
-        </Flex>
+        </>
       ),
     }),
     columnHelper.accessor('totalSupplyUsd', {

diff --git a/solend-lite/src/components/TransactionTakeover/ReserveStats/ReserveStats.module.scss b/solend-lite/src/components/TransactionTakeover/ReserveStats/ReserveStats.module.scss
@@ -12,7 +12,7 @@
 .params {
   background-color: var(--chakra-colors-neutralAlt);
   padding-top: 8px;
-  padding-bottom: 32px;
+  padding-bottom: 8px;
   margin-left: -36px;
   margin-right: -36px;
   padding-left: 36px;
@@ -37,3 +37,19 @@
 .reserveAddress {
   cursor: pointer;
 }
+
+.rateSection {
+  &:hover {
+    opacity: 0.5;
+    :global(.metric) {
+      filter: blur(0.25px);
+    }
+    .graphHover {
+      visibility: visible;
+    }
+  }
+}
+
+.graphHover {
+  visibility: hidden;
+}