refactor: share source sync status presentation

src/pages/account/ui/AccountPage/components/RecentOperations.view.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
 import { LedgerEntryRow } from "@/entities/broker-operation";
-import { formatSnapshotTime } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 import type { AccountPageRecentOperations } from "../../../model/previews";
 
@@ -18,22 +18,19 @@ const RecentOperations: FC<RecentOperationsProps> = (props) => {
 	const { t } = useTranslation();
 	const { operations } = props;
 
+	const errorText
+		= operations.state === "loaded" && operations.refreshError
+			? t("accounts.refreshError")
+			: null;
+
 	return (
 		<Stack gap="sm">
 			{operations.state === "loaded" && (
-				<>
-					{!!operations.lastSuccessfulAt && (
-						<Text c="dimmed" size="xs">
-							{t("investment.sourceTime", {
-								date: formatSnapshotTime(operations.lastSuccessfulAt),
-							})}
-						</Text>
-					)}
-
-					{!!operations.stale && <Text size="xs">{t("investment.stale")}</Text>}
-
-					{!!operations.refreshError && <Text role="status">{t("accounts.refreshError")}</Text>}
-				</>
+				<SourceSyncStatus
+					errorText={errorText}
+					lastSuccessfulAt={operations.lastSuccessfulAt}
+					stale={operations.stale}
+				/>
 			)}
 
 			{operations.state === "loading" && (