feat: render hourly investment states

src/shared/ui/SourceSyncStatus/SourceSyncStatus.tsx

@@ -3,6 +3,8 @@ import type { FC } from "react";
 import { Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
+import type { InvestmentResourceMeta } from "@/shared/api";
+
 import { formatSnapshotTime } from "@/shared/lib";
 
 // Owns the "when did the source last answer" line and the two notices that
@@ -10,6 +12,7 @@ import { formatSnapshotTime } from "@/shared/lib";
 // shows a muted line, a page header a progress bar — that is a product call.
 type SourceSyncStatusProps = {
 	errorText?: null | string;
+	lastAttempt?: InvestmentResourceMeta["lastAttempt"];
 	lastSuccessfulAt?: null | string;
 	stale?: boolean;
 };
@@ -17,6 +20,12 @@ type SourceSyncStatusProps = {
 const SourceSyncStatus: FC<SourceSyncStatusProps> = (props) => {
 	const { t } = useTranslation();
 
+	const attempt = props.lastAttempt;
+
+	const attemptText = attempt && attempt.state !== "none"
+		? t(`investment.attempt.${attempt.state}`)
+		: null;
+
 	return (
 		<>
 			{!!props.lastSuccessfulAt && (
@@ -29,6 +38,12 @@ const SourceSyncStatus: FC<SourceSyncStatusProps> = (props) => {
 
 			{!!props.stale && <Text size="xs">{t("investment.stale")}</Text>}
 
+			{!!attemptText && (
+				<Text role="status" size="xs">
+					{attemptText}
+				</Text>
+			)}
+
 			{!!props.errorText && <Text role="status">{props.errorText}</Text>}
 		</>
 	);