Merge pull request #52 from solendprotocol/v2-changes

v2 changes
solendprotocol · Jul 12, 2023 · b66c863 · b66c863
2 parents b84adc6 + b3dc84e
commit b66c863
Show file tree

Hide file tree

Showing 27 changed files with 1,355 additions and 211 deletions.
diff --git a/solend-lite/package.json b/solend-lite/package.json
@@ -38,6 +38,7 @@
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.7",
     "framer-motion": "^8.4.3",
+    "humanize-duration": "^3.29.0",
     "jotai": "^1.12.1",
     "jotai-optics": "^0.2.0",
     "next": "13.0.7",
@@ -53,6 +54,7 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^13.2.1",
+    "@types/humanize-duration": "^3.27.1",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.6.0",

diff --git a/solend-lite/src/components/AccountMetrics/AccountMetrics.module.scss b/solend-lite/src/components/AccountMetrics/AccountMetrics.module.scss
@@ -0,0 +1,3 @@
+.collapseButton {
+  cursor: pointer;
+}
diff --git a/solend-lite/src/components/AccountMetrics/AccountMetrics.tsx b/solend-lite/src/components/AccountMetrics/AccountMetrics.tsx
@@ -1,17 +1,26 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useState } from 'react';
 import { formatPercent, formatUsd } from 'utils/numberFormatter';
 import Metric from 'components/Metric/Metric';
 import { useAtom } from 'jotai';
-import { Box, Flex, Spacer } from '@chakra-ui/react';
+import { Box, Divider, Flex, Text } from '@chakra-ui/react';
 import UtilizationBar from 'components/UtilizationBar/UtilizationBar';
 import { selectedObligationAtom } from 'stores/obligations';
 
+import styles from './AccountMetrics.module.scss';
+import Breakdown from 'components/Breakdown/Breakdown';
+
 function AccountMetrics(): ReactElement {
   const [obligation] = useAtom(selectedObligationAtom);
+  const [showBreakdown, setShowBreakdown] = useState(false);
+  const [showBorrowLimitTooltip, setShowBorrowLimitTooltip] = useState(false);
+  const [showWeightedBorrowTooltip, setShowWeightedBorrowTooltip] =
+    useState(false);
+  const [showLiquidationThresholdTooltip, setShowLiquidationThresholdTooltip] =
+    useState(false);
 
   return (
     <Box p={4} border='1px' mt={2}>
-      <Flex>
+      <Flex justify='space-between' w='100%'>
         <Metric
           label='Net value'
           value={
@@ -21,31 +30,15 @@ function AccountMetrics(): ReactElement {
           }
           tooltip='The value of your account calculated as (supply balance - borrow balance).'
         />
-        <Spacer />
         <Metric
-          label='Borrow utilization'
+          label='Supply balance'
           value={
             obligation
-              ? formatPercent(obligation.borrowUtilization.toString())
+              ? `${formatUsd(obligation.totalSupplyValue.toString())}`
               : '-'
           }
-          tooltip='Borrow utilization is equal to your total borrowed amount, Boxided by the borrow limit. At 100%, you will not be able to borrow any more and will be close to liquidation.'
-          dangerTooltip={
-            obligation?.isBorrowLimitReached ? (
-              <>
-                You have reached your borrow limit and approaching the
-                liquidation threshold of{' '}
-                {formatPercent(
-                  obligation.liquidationThresholdFactor.toString(),
-                )}
-                . To avoid liquidation, you can repay your positions or supply
-                more assets
-              </>
-            ) : undefined
-          }
+          tooltip='Supply balance is the sum of all assets supplied. Increasing this value increases your borrow limit and liquidation threshold.'
         />
-      </Flex>
-      <Flex>
         <Metric
           label='Borrow balance'
           value={
@@ -55,68 +48,108 @@ function AccountMetrics(): ReactElement {
           }
           tooltip='Borrow balance is the sum of all assets borrowed.'
         />
-        <Spacer />
+      </Flex>
+      <Flex w='100%' justify='space-between' mt={2}>
         <Metric
-          label='Supply balance'
+          label='Weighted borrow'
           value={
             obligation
-              ? `${formatUsd(obligation.totalSupplyValue.toString())}`
+              ? `${formatUsd(obligation.weightedTotalBorrowValue.toString())}`
               : '-'
           }
-          tooltip='Supply balance is the sum of all assets supplied. Increasing this value increases your borrow limit and liquidation threshold.'
+          tooltip='Borrow balance is the sum of all assets borrowed.'
+        />
+        <Metric
+          label='Borrow limit'
+          value={
+            obligation ? `${formatUsd(obligation.borrowLimit.toString())}` : '-'
+          }
+          tooltip={
+            <>
+              Borrow limit is the maximum value you can borrow marked by the
+              white bar. To increase this limit, you can supply more assets.
+              <br />
+              <br />
+              Each asset supplied increases your borrow limit by a percentage of
+              its value.
+              <br />
+              <br />
+              (Currently{' '}
+              {obligation
+                ? formatPercent(obligation.borrowLimitFactor.toString())
+                : '-'}{' '}
+              of supply balance).
+            </>
+          }
         />
       </Flex>
-      <UtilizationBar />
-      <Metric
-        row
-        label='Borrow limit'
-        value={
-          obligation ? `${formatUsd(obligation.borrowLimit.toString())}` : '-'
-        }
-        tooltip={
-          <>
-            Borrow limit is the maximum value you can borrow marked by the white
-            bar. To increase this limit, you can supply more assets.
-            <br />
-            <br />
-            Each asset supplied increases your borrow limit by a percentage of
-            its value.
-            <br />
-            <br />
-            (Currently{' '}
-            {obligation
-              ? formatPercent(obligation.borrowLimitFactor.toString())
-              : '-'}{' '}
-            of supply balance).
-          </>
-        }
+      <UtilizationBar
+        stateOpen
+        onClick={() => setShowBreakdown(!showBreakdown)}
+        showBorrowLimitTooltip={showBorrowLimitTooltip}
+        showWeightedBorrowTooltip={showWeightedBorrowTooltip}
+        showLiquidationThresholdTooltip={showLiquidationThresholdTooltip}
+        showBreakdown={showBreakdown}
       />
-      <Metric
-        row
-        label='Liquidation threshold'
-        value={
-          obligation
-            ? `${formatUsd(obligation.liquidationThreshold.toString())}`
-            : '-'
-        }
-        tooltip={
-          <>
-            Liquidation threshold is the limit where your collateral will be
-            eligible for liquidation. This is marked by the red bar. Lower your
-            borrow utilization to minimize this risk.
-            <br />
-            <br />
-            Each asset supplied increases your borrow limit by a percentage of
-            its value.
-            <br />
-            <br />
-            (Currently{' '}
-            {obligation
-              ? formatPercent(obligation.liquidationThresholdFactor.toString())
-              : '-'}{' '}
-            of supply balance)
-          </>
-        }
+      <Flex w='100%'>
+        <Metric
+          row
+          flex={1}
+          label='Liquidation threshold'
+          value={
+            obligation
+              ? `${formatUsd(obligation.liquidationThreshold.toString())}`
+              : '-'
+          }
+          tooltip={
+            <>
+              Liquidation threshold is the limit where your collateral will be
+              eligible for liquidation. This is marked by the red bar. Lower
+              your borrow utilization to minimize this risk.
+              <br />
+              <br />
+              Each asset supplied increases your borrow limit by a percentage of
+              its value.
+              <br />
+              <br />
+              (Currently{' '}
+              {obligation
+                ? formatPercent(
+                    obligation.liquidationThresholdFactor.toString(),
+                  )
+                : '-'}{' '}
+              of supply balance)
+            </>
+          }
+        />
+      </Flex>
+
+      {obligation?.positions === 0 ? null : (
+        <Box
+          role='presentation'
+          className={styles.collapseButton}
+          onKeyDown={() => setShowBreakdown(!showBreakdown)}
+          onClick={() => setShowBreakdown(!showBreakdown)}
+        >
+          <Divider mb='-18px' pt='12px' />
+          <Flex justify='center' my='8px'>
+            <Text
+              color='secondary'
+              bg='neutral'
+              variant='caption'
+              zIndex={1}
+              px={2}
+            >
+              {showBreakdown ? 'Hide' : 'Show'} breakdown
+            </Text>
+          </Flex>
+        </Box>
+      )}
+      <Breakdown
+        visible={showBreakdown}
+        setShowBorrowLimitTooltip={setShowBorrowLimitTooltip}
+        setShowWeightedBorrowTooltip={setShowWeightedBorrowTooltip}
+        setShowLiquidationThresholdTooltip={setShowLiquidationThresholdTooltip}
       />
     </Box>
   );

diff --git a/solend-lite/src/components/Breakdown/Breakdown.module.scss b/solend-lite/src/components/Breakdown/Breakdown.module.scss
@@ -0,0 +1,27 @@
+.tooltipTitle {
+  cursor: pointer !important;
+  text-align: center !important;
+}
+
+.params {
+  background-color: var(--chakra-colors-neutralAlt);
+  padding: 12px;
+  margin-left: -16px;
+  margin-right: -16px;
+  margin-top: 8px;
+}
+
+.visible {
+  transition: max-height 0.75s !important;
+  max-height: 500px;
+  visibility: visible;
+}
+
+.hidden {
+  transition: max-height 0.25s !important;
+  visibility: hidden;
+  max-height: 0;
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}