refactor: enforce frontend view model boundaries

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

@@ -15,54 +15,61 @@ type RecentOperationsProps = {
 };
 
 const RecentOperations: FC<RecentOperationsProps> = (props) => {
-	const { operations } = props;
 	const { t } = useTranslation();
+	const { operations } = props;
 
 	return (
 		<Stack gap="sm">
-			{(operations.state === "loaded") && ((
+			{operations.state === "loaded" && (
 				<>
-					{!!(operations.lastSuccessfulAt) && ((
+					{!!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) && ((
+					)}
+
+					{!!operations.stale && <Text size="xs">{t("investment.stale")}</Text>}
+
+					{!!operations.refreshError && (
 						<Text role="status">{t("accounts.refreshError")}</Text>
-					))}
+					)}
 				</>
-			))}
-			{(operations.state === "loading") && ((
+			)}
+
+			{operations.state === "loading" && (
 				<LoadingSkeleton label={t("ledger.recentLoading")}>
 					{["first", "second", "third"].map(placeholder => (
 						<Skeleton height={48} key={placeholder} radius="sm" />
 					))}
 				</LoadingSkeleton>
-			))}
-			{(operations.state === "error") && ((
+			)}
+
+			{operations.state === "error" && (
 				<Alert color="red">{t("ledger.recentError")}</Alert>
-			))}
-			{(operations.state === "empty") && ((
+			)}
+
+			{operations.state === "empty" && (
 				<Text c="dimmed">{t("ledger.recentEmpty")}</Text>
-			))}
-			{(operations.state === "partial") && ((
+			)}
+
+			{operations.state === "partial" && (
 				<Text role="status">{t("investment.partial")}</Text>
-			))}
-			{(operations.state === "loaded" || operations.state === "partial") && (operations.items.map(operation => (
-				<LedgerEntryRow
-					key={JSON.stringify([
-						operation.account?.id,
-						operation.id,
-						operation.logoName,
-					])}
-					operation={operation}
-				/>
-			)))}
+			)}
+
+			{(operations.state === "loaded" || operations.state === "partial")
+				&& operations.items.map(operation => (
+					<LedgerEntryRow
+						key={JSON.stringify([
+							operation.account?.id,
+							operation.id,
+							operation.logoName,
+						])}
+						operation={operation}
+					/>
+				))}
+
 			<Button component={Link} to={operations.to} variant="subtle">
 				{t("ledger.open")}
 			</Button>