refactor: share source sync status presentation

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

@@ -7,7 +7,8 @@ import { Link } from "react-router";
 
 import type { IncomeSummary as IncomeSummaryData } from "@/entities/income";
 
-import { formatMoney, formatSnapshotTime } from "@/shared/lib";
+import { formatMoney } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 type IncomeSummaryProps
 	= | {
@@ -25,6 +26,12 @@ type IncomeSummaryProps
 
 const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
 	const { t } = useTranslation();
+
+	const errorText
+		= props.state === "loaded" && props.refreshError
+			? t("income.refreshError")
+			: null;
+
 	if (props.state === "loading" || props.state === "partial")
 		return (
 			<Text c="dimmed" role="status">
@@ -59,17 +66,11 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
 
 	return (
 		<Stack gap="xs">
-			{!!props.lastSuccessfulAt && (
-				<Text c="dimmed" size="xs">
-					{t("investment.sourceTime", {
-						date: formatSnapshotTime(props.lastSuccessfulAt),
-					})}
-				</Text>
-			)}
-
-			{!!props.stale && <Text size="xs">{t("investment.stale")}</Text>}
-
-			{!!props.refreshError && <Text role="status">{t("income.refreshError")}</Text>}
+			<SourceSyncStatus
+				errorText={errorText}
+				lastSuccessfulAt={props.lastSuccessfulAt}
+				stale={props.stale}
+			/>
 
 			{props.summary.totalsByCurrency.map(total => (
 				<Paper key={total.currency} p="sm" withBorder>