v2 changes

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",

solend-lite/src/components/AccountMetrics/AccountMetrics.module.scss

@@ -0,0 +1,3 @@
+.collapseButton {
+ cursor: pointer;
+}

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>
  );

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;
+}