feat: hints for overview

Author: Jeday

features/overview/components/balance/balance.tsx

@@ -4,16 +4,12 @@ import { appPaths } from 'consts/routing';
 
 const sectionPayloadList: SectionPayload[] = [
   {
-    title: 'Available to withdraw',
     key: 'withdrawableEth',
-    actionText: 'Withdraw ETH',
     actionRole: 'withdrawer',
     actionLink: (vault) => appPaths.vaults.vault(vault).eth('withdraw'),
   },
   {
-    title: 'Idle capital',
     key: 'balanceEth',
-    actionText: 'Supply ETH',
     actionRole: 'supplier',
     actionLink: (vault) => appPaths.vaults.vault(vault).eth('supply'),
   },
@@ -23,28 +19,26 @@ const sectionPayloadList: SectionPayload[] = [
   //   key: 'depositedToValidators',
   // },
   {
-    title: 'Total locked',
     key: 'totalLocked',
   },
   {
-    title: 'Collateral',
     key: 'collateral',
   },
   {
-    title: 'Pending unlock',
     key: 'pendingUnlockEth',
   },
 ];
 
 export const Balance = () => {
   const { getVaultDataToRender } = useVaultOverview();
-  const renderData = getVaultDataToRender(sectionPayloadList);
 
   return (
     <OverviewSection title="Balance overview">
-      {renderData.map((item) => (
-        <OverviewItem {...item} key={item.key} content={item.payload} />
-      ))}
+      {sectionPayloadList.map((sectionItem) => {
+        const { key, ...rest } = getVaultDataToRender(sectionItem);
+
+        return <OverviewItem key={key} {...rest} />;
+      })}
     </OverviewSection>
   );
 };

features/overview/components/capacity/capacity.tsx

@@ -4,39 +4,29 @@ import { getUtilizationRatioColor } from 'utils';
 
 const sectionPayloadList: SectionPayload[] = [
   {
-    title: 'Utilization ratio',
     key: 'utilizationRatio',
   },
   {
-    title: 'stETH liability',
     key: 'liabilityStETH',
   },
   {
-    title: 'Total minting capacity',
     key: 'totalMintingCapacityStETH',
   },
 ];
 
 export const Capacity = () => {
   const { getVaultDataToRender } = useVaultOverview();
-  const renderData = getVaultDataToRender(sectionPayloadList);
 
   return (
     <OverviewSection title="stETH capacity utilization">
-      {renderData.map((item) => {
-        const isUtilizationRatio = item.key === 'utilizationRatio';
+      {sectionPayloadList.map((sectionItem) => {
+        const { key, ...item } = getVaultDataToRender(sectionItem);
+        const isUtilizationRatio = key === 'utilizationRatio';
         const color = isUtilizationRatio
           ? getUtilizationRatioColor(String(item.payload))
           : undefined;
 
-        return (
-          <OverviewItem
-            {...item}
-            key={item.key}
-            content={item.payload}
-            color={color}
-          />
-        );
+        return <OverviewItem {...item} key={key} color={color} />;
       })}
     </OverviewSection>
   );

features/overview/components/general/general.tsx

@@ -2,29 +2,27 @@ import { OverviewItem, OverviewSection } from 'features/overview/shared';
 import { AddressSection } from 'features/overview/components/general/address-section';
 import {
   useVaultOverview,
-  SectionPayload,
+  SectionData,
 } from 'features/overview/contexts/vault-overview';
 
-const sectionPayloadList: SectionPayload[] = [
+const sectionPayloadList: SectionData[] = [
   {
-    title: 'Total value',
     key: 'totalValue',
   },
   {
-    title: 'Reserve ratio',
     key: 'reserveRatio',
   },
 ];
 
 export const General = () => {
   const { getVaultDataToRender } = useVaultOverview();
-  const renderData = getVaultDataToRender(sectionPayloadList);
 
   return (
     <OverviewSection titleContent={<AddressSection />}>
-      {renderData.map((item) => (
-        <OverviewItem {...item} key={item.key} content={item.payload} />
-      ))}
+      {sectionPayloadList.map((item) => {
+        const { key, ...rest } = getVaultDataToRender(item);
+        return <OverviewItem key={key} {...rest} />;
+      })}
     </OverviewSection>
   );
 };

features/overview/components/health/heath.tsx

@@ -4,43 +4,39 @@ import { formatPercent, getHealthFactorColor } from 'utils';
 
 const sectionPayloadList: SectionPayload[] = [
   {
-    title: 'Health factor',
     key: 'healthFactorNumber',
   },
   {
-    title: 'Total value',
     key: 'totalValue',
   },
   {
-    title: 'stETH liability',
     key: 'liabilityStETH',
   },
   {
-    title: 'Forced rebalance threshold',
     key: 'rebalanceThreshold',
   },
 ];
 
 export const Health = () => {
   const { getVaultDataToRender } = useVaultOverview();
-  const renderData = getVaultDataToRender(sectionPayloadList);
 
   return (
     <OverviewSection title="Vault health" titleTooltip="Lorem Ipsum">
-      {renderData.map((item) => {
-        const isHealthy = item.key === 'healthFactorNumber';
-        const color = isHealthy
-          ? getHealthFactorColor(item.payload)
+      {sectionPayloadList.map((sectionEntry) => {
+        const { key, payload, ...item } = getVaultDataToRender(sectionEntry);
+        const isHealthFactor = key === 'healthFactorNumber';
+        const color = isHealthFactor
+          ? getHealthFactorColor(payload)
           : undefined;
-        const value = isHealthy
-          ? formatPercent.format(Number(item.payload) / 100)
-          : item.payload;
+        const formattedPayload = isHealthFactor
+          ? formatPercent.format(Number(payload) / 100)
+          : payload;
 
         return (
           <OverviewItem
             {...item}
-            key={item.key}
-            content={value}
+            key={key}
+            payload={formattedPayload}
             color={color}
           />
         );

features/overview/components/node-operator/node-operator.tsx

@@ -4,27 +4,24 @@ import { appPaths } from 'consts/routing';
 
 const sectionPayloadList: SectionPayload[] = [
   {
-    title: 'Reward share',
     key: 'nodeOperatorFee',
   },
   {
-    title: 'Accumulated',
     key: 'accumulatedFee',
     actionLink: (vault) => appPaths.vaults.vault(vault).claim,
-    actionText: 'Claim',
     actionRole: 'nodeOperatorFeeClaimer',
   },
 ];
 
 export const NodeOperator = () => {
   const { getVaultDataToRender } = useVaultOverview();
-  const renderData = getVaultDataToRender(sectionPayloadList);
 
   return (
     <OverviewSection title="Node operator reward share">
-      {renderData.map((item) => (
-        <OverviewItem {...item} key={item.key} content={item.payload} />
-      ))}
+      {sectionPayloadList.map((sectionItem) => {
+        const { key, ...item } = getVaultDataToRender(sectionItem);
+        return <OverviewItem key={key} {...item} />;
+      })}
     </OverviewSection>
   );
 };

features/overview/contexts/index.tsx

@@ -3,5 +3,5 @@ export {
   useVaultOverview,
   type VaultOverviewContextType,
   type VaultOverviewContextKeys,
-  type SectionPayload,
+  type SectionData as SectionPayload,
 } from './vault-overview';

features/overview/contexts/vault-overview.tsx

@@ -4,7 +4,6 @@ import {
   createContext,
   useContext,
   useMemo,
-  useCallback,
 } from 'react';
 import { Address } from 'viem';
 import invariant from 'tiny-invariant';
@@ -13,9 +12,27 @@ import { calculateOverview } from '@lidofinance/lsv-cli/dist/utils/calculate-ove
 import { formatBalance, formatPercent } from 'utils';
 
 import { useVaultInfo } from 'modules/vaults/vault-context';
-import { VAULT_TOTAL_BASIS_POINTS, VAULTS_ALL_ROLES } from 'modules/vaults';
+import {
+  VAULT_TOTAL_BASIS_POINTS,
+  VAULTS_ALL_ROLES,
+  vaultTexts,
+} from 'modules/vaults';
+
+export type SectionData = {
+  key: VaultOverviewContextKeys;
+  actionRole?: VAULTS_ALL_ROLES;
+  actionLink?: (vaultAddress: Address) => string;
+};
+
+export type SectionPayload = SectionData & {
+  title: string;
+  hint?: string;
+  action?: string;
+  isLoading?: boolean;
+  payload: string | Address | number;
+};
 
-export interface VaultOverviewContextType {
+export type VaultOverviewContextType = {
   values: {
     address: Address;
     nodeOperator: Address;
@@ -37,28 +54,33 @@ export interface VaultOverviewContextType {
     pendingUnlockEth: string;
   };
   isLoadingVault?: boolean;
-  getVaultDataToRender: (
-    payload: SectionPayload[],
-  ) => (SectionPayload & { payload: string | Address | number })[];
-}
+  getVaultDataToRender: (payload: SectionData) => SectionPayload;
+};
 
 export type VaultOverviewContextKeys = keyof VaultOverviewContextType['values'];
-export type SectionPayload = {
+
+type MetricText = {
   title: string;
-  key: VaultOverviewContextKeys;
-  actionText?: string;
-  actionRole?: VAULTS_ALL_ROLES;
-  actionLink?: (vaultAddress: Address) => string;
-  isLoading?: boolean;
+  hint?: string;
+  action?: string;
 };
 
 const VaultOverviewContext = createContext<VaultOverviewContextType | null>(
   null,
 );
+VaultOverviewContext.displayName = 'VaultOverviewContext';
 
 const toEthValue = (value: bigint) => `${formatBalance(value).trimmed} ETH`;
 const toStethValue = (value: bigint) => `${formatBalance(value).trimmed} stETH`;
 
+const getMetricTexts = (key: VaultOverviewContextKeys): MetricText => {
+  const metric = vaultTexts.metrics[
+    key as keyof typeof vaultTexts.metrics
+  ] as MetricText;
+  invariant(metric, `Metric text for ${key} not found`);
+  return metric;
+};
+
 export const VaultOverviewProvider: FC<PropsWithChildren> = ({ children }) => {
   const { activeVault, isLoadingVault } = useVaultInfo();
 
@@ -147,21 +169,20 @@ export const VaultOverviewProvider: FC<PropsWithChildren> = ({ children }) => {
     return {} as VaultOverviewContextType['values'];
   }, [activeVault, isLoadingVault]);
 
-  const getVaultDataToRender = useCallback(
-    (sectionPayloadList: SectionPayload[]) => {
-      return sectionPayloadList.map((item) => {
-        return {
-          ...item,
-          payload: values[item.key],
-          isLoading: isLoadingVault,
-        };
-      });
-    },
-    [values, isLoadingVault],
-  );
+  const value = useMemo(() => {
+    return {
+      values,
+      getVaultDataToRender: (sectionEntry: SectionData) => ({
+        ...sectionEntry,
+        ...getMetricTexts(sectionEntry.key),
+        payload: values[sectionEntry.key],
+        isLoading: isLoadingVault,
+      }),
+    };
+  }, [isLoadingVault, values]);
 
   return (
-    <VaultOverviewContext.Provider value={{ values, getVaultDataToRender }}>
+    <VaultOverviewContext.Provider value={value}>
       {children}
     </VaultOverviewContext.Provider>
   );

features/overview/shared/overview-item/overview-item.tsx

@@ -8,19 +8,21 @@ import { useVaultInfo, useVaultPermission } from 'modules/vaults';
 import { OverviewItemValue } from './overview-item-value';
 import { ItemWrapper, Title } from './styles';
 
-import type { SectionPayload } from 'features/overview/contexts';
+import type { SectionPayload } from 'features/overview/contexts/vault-overview';
+import { Hint } from 'shared/components';
 
 export type ItemProps = {
-  content: string | Address | number;
+  payload: string | Address | number;
   color?: string;
 } & Omit<SectionPayload, 'key'>;
 
 export const OverviewItem: FC<ItemProps> = ({
   title,
-  content,
+  payload,
   actionLink,
   actionRole,
-  actionText,
+  action,
+  hint,
   isLoading,
   color,
 }) => {
@@ -32,7 +34,7 @@ export const OverviewItem: FC<ItemProps> = ({
     // 1. all data is provided
     (
       actionLink &&
-      actionText &&
+      action &&
       vaultAddress &&
       // 2. user has permission for it (if actionRole is provided)
       (!actionRole || hasPermission)
@@ -46,10 +48,11 @@ export const OverviewItem: FC<ItemProps> = ({
       <Title>
         <Text color="secondary" size="xxs">
           {title}
+          <Hint text={hint} />
         </Text>
       </Title>
       <OverviewItemValue
-        content={content}
+        content={payload}
         isLoading={isLoading}
         color={color}
       />
@@ -59,7 +62,7 @@ export const OverviewItem: FC<ItemProps> = ({
           variant="translucent"
           onClick={() => router.push(actionLink(vaultAddress))}
         >
-          {actionText}
+          {action}
         </Button>
       )}
     </ItemWrapper>