refactor: enforce frontend view model boundaries

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

@@ -16,130 +16,148 @@ type InstrumentPositionProps = {
 	returnNote?: string;
 	vm: InstrumentPositionVm;
 };
+
 const InstrumentPosition: FC<InstrumentPositionProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
 	if (vm.position && vm.position.accounts.length === 0) return;
+
+	const positionReturnColor = vm.position?.absoluteReturn?.value.startsWith("-")
+		? "red.8"
+		: "green.8";
+
 	return (
 		<InstrumentSection state={vm.positionState} title={t("stock.position")}>
-			{!!(vm.position) && ((
+			{!!vm.position && (
 				<Stack gap="md">
-					{!!(vm.position.isStale) && ((
+					{!!vm.position.isStale && (
 						<Alert color="orange">{t("portfolio.staleWarning")}</Alert>
-					))}
+					)}
+
 					<div className={`${classes.metrics} ${classes.holding}`}>
 						<div>
 							<Text c="dimmed" size="sm">
 								{props.quantityLabel ?? t("stock.quantity")}
 							</Text>
+
 							<Text className={classes.metricValue}>
 								{formatDecimal(vm.position.quantity)}
 							</Text>
 						</div>
+
 						<div>
 							<Text c="dimmed" size="sm">
 								{t("stock.value")}
 							</Text>
+
 							<Text className={classes.metricValue}>
 								{formatMoney(vm.position.currentValue)}
 							</Text>
 						</div>
+
 						<div>
 							<Text c="dimmed" size="sm">
 								{t("stock.average")}
 							</Text>
+
 							<Text className={classes.metricValue}>
 								{formatMoney(vm.position.averagePurchasePrice)}
 							</Text>
 						</div>
+
 						<div>
 							<Text c="dimmed" size="sm">
 								{t("stock.openReturn")}
 							</Text>
-							<Text
-								c={
-									vm.position.absoluteReturn?.value.startsWith("-")
-										? "red.8"
-										: "green.8"
-								}
-								className={classes.metricValue}
-							>
+
+							<Text c={positionReturnColor} className={classes.metricValue}>
 								{formatMoney(vm.position.absoluteReturn)}
 							</Text>
-							{vm.position.returnPercent !== null && ((
+
+							{vm.position.returnPercent !== null && (
 								<Text size="sm">
-									{formatDecimal(vm.position.returnPercent)}
-									{" "}
-									%
+									{formatDecimal(vm.position.returnPercent)} %
 								</Text>
-							))}
+							)}
 						</div>
 					</div>
+
 					<Text c="dimmed" size="xs">
 						{props.returnNote ?? t("stock.openReturnNote")}
 					</Text>
+
 					<div>
-						{vm.position.accounts.map(account => (
-							<div className={classes.accountRow} key={account.account?.id}>
-								{account.account
-									? (
-											<Anchor
-												component={Link}
-												to={`/accounts/${encodeURIComponent(account.account.id)}`}
-											>
-												{account.account.name}
-											</Anchor>
-										)
-									: (
-											<Text>{t("stock.portfolio")}</Text>
-										)}
-								<div>
-									<Text c="dimmed" size="xs">
-										{props.quantityLabel ?? t("stock.quantity")}
-									</Text>
-									<Text>{formatDecimal(account.quantity)}</Text>
-								</div>
-								<div>
-									<Text c="dimmed" size="xs">
-										{t("stock.average")}
-									</Text>
-									<Text>{formatMoney(account.averagePurchasePrice)}</Text>
-								</div>
-								<div>
-									<Text c="dimmed" size="xs">
-										{t("stock.value")}
-									</Text>
-									<Text>{formatMoney(account.currentValue)}</Text>
-								</div>
-								<div>
-									<Text c="dimmed" size="xs">
-										{t("stock.openReturn")}
-									</Text>
-									<Text
-										c={
-											(account.absoluteReturn?.value.startsWith("-")) ? ("red.8") : undefined
-										}
-									>
-										{formatMoney(account.absoluteReturn)}
-									</Text>
-									{account.returnPercent !== null && ((
-										<Text size="xs">
-											{formatDecimal(account.returnPercent)}
-											{" "}
-											%
+						{vm.position.accounts.map((account) => {
+							const accountReturnColor = account.absoluteReturn?.value.startsWith("-")
+								? "red.8"
+								: undefined;
+
+							return (
+								<div className={classes.accountRow} key={account.account?.id}>
+									{account.account
+										? (
+												<Anchor
+													component={Link}
+													to={`/accounts/${encodeURIComponent(account.account.id)}`}
+												>
+													{account.account.name}
+												</Anchor>
+											)
+										: (
+												<Text>{t("stock.portfolio")}</Text>
+											)}
+
+									<div>
+										<Text c="dimmed" size="xs">
+											{props.quantityLabel ?? t("stock.quantity")}
 										</Text>
-									))}
+
+										<Text>{formatDecimal(account.quantity)}</Text>
+									</div>
+
+									<div>
+										<Text c="dimmed" size="xs">
+											{t("stock.average")}
+										</Text>
+
+										<Text>{formatMoney(account.averagePurchasePrice)}</Text>
+									</div>
+
+									<div>
+										<Text c="dimmed" size="xs">
+											{t("stock.value")}
+										</Text>
+
+										<Text>{formatMoney(account.currentValue)}</Text>
+									</div>
+
+									<div>
+										<Text c="dimmed" size="xs">
+											{t("stock.openReturn")}
+										</Text>
+
+										<Text c={accountReturnColor}>
+											{formatMoney(account.absoluteReturn)}
+										</Text>
+
+										{account.returnPercent !== null && (
+											<Text size="xs">
+												{formatDecimal(account.returnPercent)} %
+											</Text>
+										)}
+									</div>
 								</div>
-							</div>
-						))}
+							);
+						})}
 					</div>
+
 					<Text c="dimmed" size="xs">
 						{t("stock.snapshotAt", {
 							date: formatSnapshotTime(vm.position.observedAt),
 						})}
 					</Text>
 				</Stack>
-			))}
+			)}
 		</InstrumentSection>
 	);
 };