refactor: share source sync status presentation

src/features/instrument-details/ui/InstrumentSection.view.tsx

@@ -13,7 +13,7 @@ import {
 import { LoadingSkeleton } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
-import { formatSnapshotTime } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 import type { SectionState } from "../model/section";
 
@@ -80,18 +80,13 @@ const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
 				{props.controls}
 			</Group>
 
-			{!!props.state.stale && <Text size="xs">{t("investment.stale")}</Text>}
+			<SourceSyncStatus
+				lastSuccessfulAt={props.state.lastSuccessfulAt}
+				stale={props.state.stale}
+			/>
 
 			{!!props.state.partial && <Text role="status">{t("investment.partial")}</Text>}
 
-			{!!props.state.lastSuccessfulAt && (
-				<Text c="dimmed" size="xs">
-					{t("investment.sourceTime", {
-						date: formatSnapshotTime(props.state.lastSuccessfulAt),
-					})}
-				</Text>
-			)}
-
 			{!!props.state.refreshing && (
 				<Text c="dimmed" role="status" size="xs">
 					{t("accounts.refreshing")}