Merge pull request #49 from lidofinance/feat/add-color-utils

refactor: update health and utilization thresholds; implement color c…

Author: DiRaiks

consts/threshold.ts

@@ -1,3 +1,6 @@
-export const VAULT_GREEN_HEATH_PERCENT = 100;
-export const VAULT_YELLOW_HEATH_PERCENT = 91;
-export const VAULT_RED_HEATH_PERCENT = 90;
+export const VAULT_HEALTH_PERCENT_GREEN = 125;
+export const VAULT_HEALTH_PERCENT_YELLOW = 105;
+export const VAULT_HEALTH_PERCENT_RED = 100;
+
+export const VAULT_UTILIZATION_RATIO_GREEN = 90;
+export const VAULT_UTILIZATION_RATIO_RED = 100;

features/home/components/vault-table/cells/percent-cell.tsx

@@ -5,8 +5,12 @@ import { Percent } from './styles';
 import { formatPercent } from 'utils/format-number';
 import { BaseCellProps } from '../types';
 
-export const PercentCell: FC<BaseCellProps<number>> = ({ value }) => {
+interface PercentCellProps extends BaseCellProps<number> {
+  color: string;
+}
+
+export const PercentCell: FC<PercentCellProps> = ({ value, color }) => {
   const percent = formatPercent.format(value / 100);
 
-  return <Percent value={value}>{percent}</Percent>;
+  return <Percent color={color}>{percent}</Percent>;
 };

features/home/components/vault-table/cells/styles.ts

@@ -1,24 +1,11 @@
-import styled, { DefaultTheme } from 'styled-components';
-import {
-  VAULT_GREEN_HEATH_PERCENT,
-  VAULT_YELLOW_HEATH_PERCENT,
-  VAULT_RED_HEATH_PERCENT,
-} from 'consts/threshold';
-
-const getColorByValue = (theme: DefaultTheme, value: number) => {
-  const percent = value * 100;
-  if (percent >= VAULT_GREEN_HEATH_PERCENT) return theme.colors.success;
-  if (percent >= VAULT_YELLOW_HEATH_PERCENT) return theme.colors.warning;
-  if (percent <= VAULT_RED_HEATH_PERCENT) return theme.colors.error;
-  return theme.colors.text;
-};
+import styled from 'styled-components';
 
 export const Mintable = styled.span`
   color: ${({ theme }) => theme.colors.textSecondary};
 `;
 
-export const Percent = styled.span<{ value: number }>`
-  color: ${({ theme, value }) => getColorByValue(theme, value)};
+export const Percent = styled.span<{ color: string }>`
+  color: ${({ color }) => color};
   font-weight: 700;
 `;
 

features/home/components/vault-table/vault-table.tsx

@@ -10,6 +10,7 @@ import {
   HeaderCell,
 } from 'features/home/components/vault-table/cells';
 import { VaultTableInfo } from 'modules/vaults';
+import { getHealthFactorColor } from 'utils';
 
 import {
   TableTitle,
@@ -77,6 +78,8 @@ export const VaultTable: FC<VaultTableProps> = (props) => {
           </TableHead>
           <Tbody>
             {vaults?.map((vault) => {
+              const healthColor = getHealthFactorColor(vault.healthScore);
+
               return (
                 <TableRow key={vault.address}>
                   <TableCell>
@@ -89,7 +92,10 @@ export const VaultTable: FC<VaultTableProps> = (props) => {
                     <MintCell value={vault.liabilityStETH} />
                   </TableCell>
                   <TableCell>
-                    <PercentCell value={vault.healthScore} />
+                    <PercentCell
+                      value={vault.healthScore}
+                      color={healthColor}
+                    />
                   </TableCell>
                 </TableRow>
               );

features/overview/components/capacity/capacity.tsx

@@ -1,5 +1,6 @@
 import { OverviewItem, OverviewSection } from 'features/overview/shared';
 import { SectionPayload, useVaultOverview } from 'features/overview/contexts';
+import { getUtilizationRatioColor } from 'utils';
 
 const sectionPayloadList: SectionPayload[] = [
   {
@@ -16,16 +17,6 @@ const sectionPayloadList: SectionPayload[] = [
   },
 ];
 
-const getUtilizationRatioColor = (utilizationRatio: string) => {
-  if (!utilizationRatio) return '';
-  const utilizationRatioNumber = Number(utilizationRatio.split('%')[0]);
-
-  if (utilizationRatioNumber < 90) return '#53BA95';
-  if (utilizationRatioNumber < 100) return '#ffbf00';
-  if (utilizationRatioNumber === 100) return '#E14D4D';
-  if (utilizationRatioNumber > 100) return 'darkRed';
-};
-
 export const Capacity = () => {
   const { getVaultDataToRender } = useVaultOverview();
   const renderData = getVaultDataToRender(sectionPayloadList);

features/overview/components/health/heath.tsx

@@ -1,5 +1,6 @@
 import { OverviewItem, OverviewSection } from 'features/overview/shared';
 import { SectionPayload, useVaultOverview } from 'features/overview/contexts';
+import { getHealthFactorColor } from 'utils';
 
 const sectionPayloadList: SectionPayload[] = [
   {
@@ -20,15 +21,6 @@ const sectionPayloadList: SectionPayload[] = [
   },
 ];
 
-const getHealthFactorColor = (healthFactor: string) => {
-  if (!healthFactor) return '';
-  const healthFactorNumber = Number(healthFactor.split('%')[0]);
-  if (healthFactorNumber >= 125) return '#53BA95 ';
-  if (healthFactorNumber >= 105) return '#ffbf00';
-  if (healthFactorNumber >= 100) return '#E14D4D';
-  return 'darkRed';
-};
-
 export const Health = () => {
   const { getVaultDataToRender } = useVaultOverview();
   const renderData = getVaultDataToRender(sectionPayloadList);

utils/index.ts

@@ -7,3 +7,4 @@ export * from './extractErrorMessage';
 export * from './shortenTokenValue';
 export * from './format-number';
 export * from './sleep';
+export * from './overview-colors';

utils/overview-colors.ts

@@ -0,0 +1,35 @@
+import {
+  VAULT_HEALTH_PERCENT_GREEN,
+  VAULT_HEALTH_PERCENT_YELLOW,
+  VAULT_HEALTH_PERCENT_RED,
+  VAULT_UTILIZATION_RATIO_GREEN,
+  VAULT_UTILIZATION_RATIO_RED,
+} from 'consts/threshold';
+
+export const getHealthFactorColor = (healthFactor: string | number) => {
+  if (!healthFactor) return '';
+  let healthFactorNumber = 0;
+
+  if (typeof healthFactor === 'string')
+    healthFactorNumber = Number(healthFactor.split('%')[0]);
+  else healthFactorNumber = healthFactor;
+
+  if (healthFactorNumber >= VAULT_HEALTH_PERCENT_GREEN) return '#53BA95';
+  if (healthFactorNumber >= VAULT_HEALTH_PERCENT_YELLOW) return '#ffbf00';
+  if (healthFactorNumber >= VAULT_HEALTH_PERCENT_RED) return '#E14D4D';
+  return 'darkRed';
+};
+
+export const getUtilizationRatioColor = (utilizationRatio: string) => {
+  if (!utilizationRatio) return '';
+  let utilizationRatioNumber = 0;
+
+  if (typeof utilizationRatio === 'string')
+    utilizationRatioNumber = Number(utilizationRatio.split('%')[0]);
+  else utilizationRatioNumber = utilizationRatio;
+
+  if (utilizationRatioNumber < VAULT_UTILIZATION_RATIO_GREEN) return '#53BA95';
+  if (utilizationRatioNumber < VAULT_UTILIZATION_RATIO_RED) return '#ffbf00';
+  if (utilizationRatioNumber === VAULT_UTILIZATION_RATIO_RED) return '#E14D4D';
+  if (utilizationRatioNumber > VAULT_UTILIZATION_RATIO_RED) return 'darkRed';
+};