feat: report ux

Author: Jeday

features/adjustment/mint/form/submit-button/submit-button.tsx

@@ -1,5 +1,8 @@
 import { useVaultInfo, type VAULT_OWNER_ROLES } from 'modules/vaults';
-import { MultiplePermissionedSubmitButton } from 'modules/vaults/components';
+import {
+  MultiplePermissionedSubmitButton,
+  OracleReportButton,
+} from 'modules/vaults/components';
 import { useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
@@ -20,6 +23,7 @@ export const SubmitButton = () => {
     name: ['amount', 'token'],
   });
 
+  // TODO: move this check to upper context
   const roles: VAULT_OWNER_ROLES[] = useMemo(() => {
     if (!activeVault || !amount) return NON_INCREASE_LOCK_ROLES;
     const isSteth = token === 'stETH';
@@ -37,12 +41,14 @@ export const SubmitButton = () => {
   const disabled = isSubmitting && !isValid;
 
   return (
-    <MultiplePermissionedSubmitButton
-      dashboardRoles={roles}
-      type="submit"
-      disabled={disabled}
-    >
-      Mint
-    </MultiplePermissionedSubmitButton>
+    <OracleReportButton>
+      <MultiplePermissionedSubmitButton
+        dashboardRoles={roles}
+        type="submit"
+        disabled={disabled}
+      >
+        Mint
+      </MultiplePermissionedSubmitButton>
+    </OracleReportButton>
   );
 };

modules/vaults/components/index.ts

@@ -2,3 +2,4 @@ export {
   PermissionedSubmitButton,
   MultiplePermissionedSubmitButton,
 } from './permissioned-submit-button';
+export { OracleReportButton } from './oracle-report-button';

modules/vaults/components/oracle-report-button.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@lidofinance/lido-ui';
+import { useReportStatus } from '../hooks';
+
+export type OracleReportButtonProps = React.PropsWithChildren<{
+  ensureFreshReport?: boolean;
+}>;
+
+export const OracleReportButton = ({
+  ensureFreshReport = true,
+  children,
+}: OracleReportButtonProps) => {
+  const { shouldApplyReport } = useReportStatus();
+
+  if (shouldApplyReport && ensureFreshReport) {
+    return <Button>Apply Oracle Report</Button>;
+  }
+
+  return <>{children}</>;
+};

modules/vaults/hooks/use-report.ts

@@ -76,12 +76,12 @@ export const useReportStatus = () => {
     query: { ...STRATEGY_EAGER },
   });
 
-  const shouldSkipCheck = !!(time == null || report.data);
+  const shouldSkipCheck = !!(time == null || !report.data);
 
   // optimistically say the report is fresh if we don't have data just yet
   const isReportFresh =
-    shouldSkipCheck &&
-    Number(report.data?.timestamp) + reportFreshnessDelta < time!;
+    shouldSkipCheck ||
+    time - Number(report.data.timestamp) < reportFreshnessDelta;
 
   const isReportAvailable =
     report.data && vaultHubReport.data
@@ -90,12 +90,13 @@ export const useReportStatus = () => {
 
   // when new report is available but old is still fresh
   // we can show suggestive reporting UI
-  const shouldApplyReport =
+  const shouldApplyReport = !!(
     isReportAvailable &&
     time &&
     report.data &&
-    (time - Number(report.data.timestamp)) / reportFreshnessDelta >
-      VAULT_SHOULD_REPORT_THRESHOLD;
+    (time - Number(report.data.timestamp)) / reportFreshnessDelta >=
+      VAULT_SHOULD_REPORT_THRESHOLD
+  );
 
   return {
     ...report,

modules/vaults/index.ts

@@ -2,3 +2,4 @@ export * from './consts';
 export * from './hooks';
 export * from './contracts/weth';
 export * from './vault-context';
+export * from './components';