Merge pull request #1335 from InverseFinance/transparency-add-overview

Transparency: key metrics page
InverseFinance · Jul 24, 2024 · 93702d1 · 93702d1
2 parents 0494244 + 0a45e7c
commit 93702d1
Show file tree

Hide file tree

Showing 9 changed files with 222 additions and 55 deletions.
diff --git a/components/F2/UserDashboard.tsx b/components/F2/UserDashboard.tsx
@@ -163,12 +163,13 @@ export const MonthlyRewards = ({
     </DashBoardCard>
 }
 
-const NumberItem = ({ noDataFallback = '-', href = '', footer = undefined, isLoading = false, value = 0, price = undefined, label = '', isUsd = false, precision = 0 }) => {
+const NumberItem = ({ noDataFallback = '-', href = '', footer = undefined, isLoading = false, value = 0, price = undefined, label = '', isUsd = false, precision = 0, isPerc = false }) => {
     return <VStack spacing="0" justify="center" alignItems="flex-end" w='full'>
         <VStack alignItems="flex-end" spacing="1">
             {
                 isLoading ? <BigTextLoader /> : <Text fontWeight="extrabold" fontSize={price ? { base: '22px', '2xl': '24px' } : { base: '30px', '2xl': '36px' }} color={'mainTextColor'}>
                     {!value ? noDataFallback : value > 100000 ? smartShortNumber(value, 2, isUsd) : preciseCommify(value, precision, isUsd)}{!!price && !!value ? ` (${smartShortNumber(value * price, 2, true)})` : ''}
+                    {!!value && isPerc ? "%" : null}
                 </Text>
             }
             {
@@ -183,9 +184,9 @@ const NumberItem = ({ noDataFallback = '-', href = '', footer = undefined, isLoa
     </VStack>
 }
 
-export const NumberCard = ({ imageSrc = '', noDataFallback = undefined, href = undefined, footer = undefined, isLoading = false, value = 0, label = '', price = undefined, isUsd = false, precision = 0 }) => {
+export const NumberCard = ({ imageSrc = '', noDataFallback = undefined, href = undefined, footer = undefined, isLoading = false, value = 0, label = '', price = undefined, isUsd = false, precision = 0, isPerc = false }) => {
     return <DashBoardCard imageSrc={imageSrc}>
-        <NumberItem href={href} noDataFallback={noDataFallback} isLoading={isLoading} price={price} value={value} label={label} isUsd={isUsd} precision={precision} footer={footer} />
+        <NumberItem href={href} noDataFallback={noDataFallback} isLoading={isLoading} price={price} value={value} label={label} isUsd={isUsd} precision={precision} footer={footer} isPerc={isPerc} />
     </DashBoardCard>
 }
 

diff --git a/components/F2/liquidations/firm-positions.tsx b/components/F2/liquidations/firm-positions.tsx
@@ -12,7 +12,7 @@ import { SkeletonBlob } from "@app/components/common/Skeleton";
 import { SmallTextLoader } from "@app/components/common/Loaders/SmallTextLoader";
 import { FirmPositionsTable } from "../Infos/FirmPositionsTable";
 
-const groupPositionsBy = (positions: any[], groupBy: string, attributeToSum: string) => {
+export const groupPositionsBy = (positions: any[], groupBy: string, attributeToSum: string) => {
     return Object.entries(
         positions.reduce((prev, curr) => {
             return { ...prev, [curr[groupBy]]: (prev[curr[groupBy]] || 0) + curr[attributeToSum] };

diff --git a/components/Transparency/TransparencyTabs.tsx b/components/Transparency/TransparencyTabs.tsx
@@ -2,10 +2,10 @@ import { useAppTheme } from '@app/hooks/useAppTheme';
 import { Tabs, TabList, Tab, VStack, Text, HStack, Image } from '@chakra-ui/react'
 import Link from '../common/Link';
 
-type TabsType = 'overview' | 'treasury' | 'veNfts' | 'liquidity' | 'inv' | 'dola' | 'dbr' | 'multisigs' | 'interest-model' | 'feds' | 'stabilizer' | 'dao' | 'shortfalls' | 'bad-debts';
+type TabsType = 'overview' | 'keymetrics' | 'treasury' | 'veNfts' | 'liquidity' | 'inv' | 'dola' | 'dbr' | 'multisigs' | 'interest-model' | 'feds' | 'stabilizer' | 'dao' | 'shortfalls' | 'bad-debts';
 
 const TABS = [
-    // { page: 'overview', label: 'Overview' },
+    { page: 'keymetrics', label: 'Key Metrics' },
     { page: 'treasury', label: 'Treasury' },
     { page: 'veNfts', label: 'veNfts' },
     { page: 'liquidity', label: 'Liquidity' },

diff --git a/next.config.js b/next.config.js
@@ -119,8 +119,8 @@ const redirects = async () => {
     },
     {
       source: '/transparency',
-      destination: '/transparency/overview',
-      permanent: true,
+      destination: '/transparency/keymetrics',
+      permanent: false,
     },
     {
       source: '/banking',

diff --git a/pages/firm/[market].tsx b/pages/firm/[market].tsx
@@ -21,7 +21,7 @@ import { FirmRewardWrapper } from '@app/components/F2/rewards/FirmRewardWrapper'
 import { CvxCrvPreferences } from '@app/components/F2/rewards/CvxCrvPreferences'
 import { DailyLimitCountdown } from '@app/components/common/Countdown'
 import Container from '@app/components/common/Container'
-import { InfoMessage } from '@app/components/common/Messages'
+import { InfoMessage, WarningMessage } from '@app/components/common/Messages'
 import { shortenNumber } from '@app/util/markets'
 import { preciseCommify } from '@app/util/misc'
 import { WorthEvoChartWrapper } from '@app/components/F2/WorthEvoChartContainer'
@@ -136,7 +136,7 @@ export const F2MarketPage = ({ market }: { market: string }) => {
                                                 <InvInconsistentFirmDelegation />
                                             </ErrorBoundary>
                                             {
-                                                isMultisig && <InfoMessage
+                                                isMultisig && <WarningMessage
                                                     alertProps={{ w: 'full' }}
                                                     title="Using a Multisig:"
                                                     description="Please note that borrowing is not allowed for multisigs / contracts."

diff --git a/pages/transparency/bad-debts.tsx b/pages/transparency/bad-debts.tsx
@@ -45,6 +45,32 @@ const defaultTotalValue = (field, items) => {
   </Cell>
 }
 
+export const DolaBadDebtRepaymentProgressBar = ({
+  progress,
+}: {
+  progress: number
+}) => {
+  const [isSmallerThan] = useMediaQuery('(max-width: 1150px)');
+  return <Container label="DOLA Bad Debt Repayment Progress" noPadding>
+    <HStack justify="center" alignItems="center" w='full'>
+      {!isSmallerThan && <Text textAlign="left">0%</Text>}
+      <HStack w='full' position="relative" justify="center" alignItems="center">
+        {progress > 0 && !isSmallerThan && <Text fontSize={{ base: '18px', lg: '24px' }} fontWeight="bold" zIndex="1" position="absolute" left={`${progress - 10}%`}>{shortenNumber(progress, 2)}%</Text>}
+        {
+          !isSmallerThan ?
+            <Progress isAnimated={true} borderRadius="8px" width={'1000px'} colorScheme="green" hasStripe={true} height='40px' value={progress} />
+            : <HStack borderRadius="4px" w='full' bgColor="barUnfilledColor">
+              <HStack position="relative" borderRadius='4px' height="30px" bgColor="barFilledColor" width={`${progress}%`}>
+                <Text zIndex="3" color="white" fontSize={'16px'} fontWeight="bold" position="absolute" right={'15px'}>{shortenNumber(progress, 2)}%</Text>
+              </HStack>
+            </HStack>
+        }
+      </HStack>
+      {!isSmallerThan! && <Text textAlign="right">100%</Text>}
+    </HStack>
+  </Container>
+}
+
 const transactionsColumns = [
   {
     field: 'symbol',
@@ -353,8 +379,7 @@ export const BadDebtPage = () => {
   const { prices } = usePrices();
   const [selected, setSelected] = useState('all');
   const isAllCase = selected === 'all';
-  const isDolaCase = selected.toLowerCase().includes('dola');
-  const [isSmallerThan] = useMediaQuery('(max-width: 1150px)')
+  const isDolaCase = selected.toLowerCase().includes('dola');  
   const dolaPrice = !!prices ? prices['dola-usd']?.usd : 1;
 
   const totalDirectRepaymentsForTable = totalRepaymentKeys.map(key => {
@@ -452,24 +477,7 @@ export const BadDebtPage = () => {
       <ErrorBoundary>
         <Flex w="full" maxW='6xl' direction="column" justify="center">
           <Stack w='full' alignItems='center' justify="center" direction={{ base: 'column', lg: 'column' }}>
-            <Container label="DOLA Bad Debt Repayment Progress" noPadding>
-              <HStack justify="center" alignItems="center" w='full'>
-                {!isSmallerThan && <Text textAlign="left">0%</Text>}
-                <HStack w='full' position="relative" justify="center" alignItems="center">
-                  {dolaBadDebtRepaidProgress > 0 && !isSmallerThan && <Text fontSize={{ base: '18px', lg: '24px' }} fontWeight="bold" zIndex="1" position="absolute" left={`${dolaBadDebtRepaidProgress - 10}%`}>{shortenNumber(dolaBadDebtRepaidProgress, 2)}%</Text>}
-                  {
-                    !isSmallerThan ?
-                      <Progress isAnimated={true} borderRadius="8px" width={'1000px'} colorScheme="green" hasStripe={true} height='40px' value={dolaBadDebtRepaidProgress} />
-                      : <HStack borderRadius="4px" w='full' bgColor="barUnfilledColor">
-                        <HStack position="relative" borderRadius='4px' height="30px" bgColor="barFilledColor" width={`${dolaBadDebtRepaidProgress}%`}>
-                          <Text zIndex="3" color="white" fontSize={'16px'} fontWeight="bold" position="absolute" right={'15px'}>{shortenNumber(dolaBadDebtRepaidProgress, 2)}%</Text>
-                        </HStack>
-                      </HStack>
-                  }
-                </HStack>
-                {!isSmallerThan! && <Text textAlign="right">100%</Text>}
-              </HStack>
-            </Container>
+            <DolaBadDebtRepaymentProgressBar progress={dolaBadDebtRepaidProgress} />
             <Container
               label="DOLA Bad Debt Evolution"
               description={data?.timestamp ? `Last update: ${moment(data?.timestamp).fromNow()}` : 'Loading...'}
@@ -506,10 +514,6 @@ export const BadDebtPage = () => {
                   barProps={{ eventName: 'Repayment' }}
                   areaProps={{ id: 'bad-debt-chart', showRangeBtns: true, defaultRange: '1Y', rangesToInclude: ['All', 'YTD', '1Y', '6M', '3M', '7D'], yLabel: 'DOLA bad debt', useRecharts: true, fillInByDayInterval: 1, simplifyData: false, showEvents: true, showEventsLabels: true, domainYpadding: 1000000, showMaxY: false, showTooltips: true, autoMinY: true, mainColor: 'info', allowZoom: true }}
                 />
-                <InfoMessage
-                  alertProps={{ w: 'full' }}
-                  description="Note: calculation is now using a more accurate off-chain method rather than the on-chain Comptroller shortfall calculation"
-                />
               </VStack>
             </Container>
             <Container

diff --git a/pages/transparency/dola.tsx b/pages/transparency/dola.tsx
@@ -25,20 +25,20 @@ import { DolaVolumes } from '@app/components/Transparency/DolaVolumes'
 const LEGEND_ITEMS = [
   {
     color: lightTheme.colors.info,
-    label: 'Backed by a Liquidity Position on a AMM',
+    label: 'LP on a AMM',
   },
   {
     color: lightTheme.colors.success,
-    label: 'Backed by a collateral on FiRM',
+    label: 'Collateral on FiRM',
   },
   {
     color: lightTheme.colors.error,
     label: 'Unbacked or mostly unhealthy',
   },
 ];
 
-const Legend = () => {
-  return <HStack w='full' justify="space-around">
+export const DolaBackingLegend = (props) => {
+  return <Stack direction={{ base: 'column', xl: 'row' }} w='full' justify="space-around" {...props}>
     {
       LEGEND_ITEMS.map((item, index) => {
         return <HStack spacing="2" key={item.color}>
@@ -52,23 +52,16 @@ const Legend = () => {
         </HStack>
       })
     }
-  </HStack>
+  </Stack>
 }
 
-export const DolaDiagram = () => {
-  const { themeStyles } = useAppTheme();
-  const { dolaSupplies } = useDAO();
-  const { markets, isLoading } = useDBRMarkets();
-  const { fedOverviews, isLoading: isLoadingOverview } = useFedOverview();
-  const { data, isLoading: isLoadingRepayments } = useRepayments();
-  const { prices } = usePrices(['velodrome-finance']);
-
-  const fedsPieChartData = fedOverviews.map(f => {
+export const fedsDataToPieChart = (fedOverviews: any[], colors) => {
+  return fedOverviews.map(f => {
     const name = f.type === 'AMM' ?
       `${f.name} ` + (f.subBalances.reduce((acc, curr) => acc ? acc + '-' + curr.symbol : curr.symbol, '') + ' LP')
       : f.name;
     const balance = ['FiRM', 'Frontier'].includes(f.protocol) ? f.borrows : f.supply;
-    const color = ['Frontier', 'Fuse'].includes(f.protocol) ? themeStyles.colors.error : f.protocol === 'FiRM' ? themeStyles.colors.success : themeStyles.colors.info;
+    const color = ['Frontier', 'Fuse'].includes(f.protocol) ? colors.error : f.protocol === 'FiRM' ? colors.success : colors.info;
     return {
       ...f,
       token: { symbol: name },
@@ -81,6 +74,17 @@ export const DolaDiagram = () => {
       textColor: color,
     }
   }).filter(d => d.sliceValue > 0);
+}
+
+export const DolaDiagram = () => {
+  const { themeStyles } = useAppTheme();
+  const { dolaSupplies } = useDAO();
+  const { markets, isLoading } = useDBRMarkets();
+  const { fedOverviews, isLoading: isLoadingOverview } = useFedOverview();
+  const { data, isLoading: isLoadingRepayments } = useRepayments();
+  const { prices } = usePrices(['velodrome-finance']);
+
+  const fedsPieChartData = fedsDataToPieChart(fedOverviews, themeStyles?.colors);
 
   const firmPieChartData = markets.map(f => {
     return {
@@ -164,7 +168,7 @@ export const DolaDiagram = () => {
               </VStack>
             }
           />
-          <Legend />
+          <DolaBackingLegend />
           <Stack direction={{ base: 'column', lg: 'row' }} justify="space-between" w='full'>
             <DashBoardCard cardTitle='DOLA backing sources overview' {...dashboardCardProps}>
               <FundsDetails