refactor: enforce frontend view model boundaries

src/entities/broker-operation/ui/LedgerEntryRow.tsx

@@ -24,50 +24,59 @@ type LedgerEntryRowProps = {
 const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
 	const { operation } = props;
 	const { t } = useTranslation();
+
 	const instrument
 		= operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument");
+
 	const payment = paymentPresentation(operation);
+
 	const metadata = [
 		t("ledger.occurredAt", { date: formatSnapshotTime(operation.occurredAt) }),
 		instrument,
-		props.withDetails ? /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null : operation.account?.name,
+		props.withDetails
+			? null // eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model.
+			: operation.account?.name,
 	]
 		.filter(Boolean)
 		.join(" · ");
 
+	let details;
+	if (props.withDetails) {
+		details = (
+			<>
+				<Group gap="sm">
+					{operation.quantity != undefined && (
+						<Text c="dimmed" size="xs">
+							{t("ledger.quantity", {
+								value: formatDecimal(operation.quantity),
+							})}
+						</Text>
+					)}
+
+					{!!operation.price && (
+						<Text c="dimmed" size="xs">
+							{t("ledger.price", { value: formatMoney(operation.price) })}
+						</Text>
+					)}
+				</Group>
+
+				{!!operation.account && (
+					<Anchor
+						component={Link}
+						size="sm"
+						to={`/accounts/${encodeURIComponent(operation.account.id)}`}
+					>
+						{operation.account.name}
+					</Anchor>
+				)}
+			</>
+		);
+	}
+	else details = undefined;
+
 	return (
 		<EntryCard
-			details={
-				(props.withDetails)
-					? ((
-							<>
-								<Group gap="sm">
-									{operation.quantity != undefined && ((
-										<Text c="dimmed" size="xs">
-											{t("ledger.quantity", {
-												value: formatDecimal(operation.quantity),
-											})}
-										</Text>
-									))}
-									{!!(operation.price) && ((
-										<Text c="dimmed" size="xs">
-											{t("ledger.price", { value: formatMoney(operation.price) })}
-										</Text>
-									))}
-								</Group>
-								{!!(operation.account) && ((
-									<Anchor
-										component={Link}
-										size="sm"
-										to={`/accounts/${encodeURIComponent(operation.account.id)}`}
-									>
-										{operation.account.name}
-									</Anchor>
-								))}
-							</>
-						))
-					: undefined
-			}
+			details={details}
 			imageSrc={instrumentLogoUrl(operation.logoName)}
 			initial={(instrument.trim()[0] ?? "?").toUpperCase()}
 			metadata={metadata}