refactor: enforce frontend view model boundaries

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

@@ -24,17 +24,19 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
 	const { t } = useTranslation();
 	const identity = group.positions[0];
 	const instrumentTo = identity.instrumentTo;
+
 	return (
 		<Card className={classes.tile} withBorder>
 			<Group gap="sm" wrap="nowrap">
-				{kind !== "other" && ((
+				{kind !== "other" && (
 					<PositionLogo
 						key={identity.logoSrc ?? "no-logo"}
 						label={identity.displayName}
 						src={identity.logoSrc}
 						to={instrumentTo}
 					/>
-				))}
+				)}
+
 				<Stack gap={2} miw={0}>
 					{instrumentTo
 						? (
@@ -45,72 +47,80 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
 						: (
 								<Text fw={600}>{identity.displayName}</Text>
 							)}
+
 					<Text c="dimmed" size="xs">
 						{identity.ticker ?? identity.isin ?? identity.figi}
 					</Text>
 				</Stack>
 			</Group>
+
 			<Stack
 				aria-label={t("portfolio.byAccount")}
 				className={classes.accountPositions}
 				component="ul"
 				gap={0}
 			>
-				{group.positions.map(position => (
-					<Stack
-						className={classes.accountPosition}
-						component="li"
-						gap={4}
-						key={position.account?.id}
-					>
-						<Group align="flex-start" gap="xs" justify="space-between">
-							{!!(position.account) && ((
-								<Anchor
-									className={classes.accountPositionName}
-									component={Link}
-									size="sm"
-									to={`/accounts/${encodeURIComponent(position.account.id)}`}
-								>
-									{position.account.name}
-								</Anchor>
-							))}
-							<Text fw={600} size="sm">
-								{t("portfolio.quantity", { value: position.quantity })}
-							</Text>
-						</Group>
-						<Group gap="xs" justify="space-between">
-							{!!(position.currentValue) && ((
-								<Text size="sm">{formatMoney(position.currentValue)}</Text>
-							))}
-							{!!(position.returnText) && ((
-								<Text
-									className={
-										(position.returnTone) ? (classes[position.returnTone]) : undefined
-									}
-									size="sm"
-								>
-									{kind === "other"
-										? t("portfolio.return", { value: position.returnText })
-										: position.returnText}
+				{group.positions.map((position) => {
+					const appearanceClass = position.returnTone
+						? classes[position.returnTone]
+						: undefined;
+
+					return (
+						<Stack
+							className={classes.accountPosition}
+							component="li"
+							gap={4}
+							key={position.account?.id}
+						>
+							<Group align="flex-start" gap="xs" justify="space-between">
+								{!!position.account && (
+									<Anchor
+										className={classes.accountPositionName}
+										component={Link}
+										size="sm"
+										to={`/accounts/${encodeURIComponent(position.account.id)}`}
+									>
+										{position.account.name}
+									</Anchor>
+								)}
+
+								<Text fw={600} size="sm">
+									{t("portfolio.quantity", { value: position.quantity })}
 								</Text>
-							))}
-						</Group>
-						<Group gap="xs">
-							{!!(position.averagePurchasePrice) && ((
-								<Text c="dimmed" size="xs">
-									{t("portfolio.avgPrice", {
-										value: formatMoney(position.averagePurchasePrice),
-									})}
-								</Text>
-							))}
-							{!!(position.shareText) && ((
-								<Text c="dimmed" size="xs">
-									{t("portfolio.share", { value: position.shareText })}
-								</Text>
-							))}
-						</Group>
-					</Stack>
-				))}
+							</Group>
+
+							<Group gap="xs" justify="space-between">
+								{!!position.currentValue && (
+									<Text size="sm">{formatMoney(position.currentValue)}</Text>
+								)}
+
+								{!!position.returnText && (
+									<Text className={appearanceClass} size="sm">
+										{kind === "other"
+											? t("portfolio.return", { value: position.returnText })
+											: position.returnText}
+									</Text>
+								)}
+							</Group>
+
+							<Group gap="xs">
+								{!!position.averagePurchasePrice && (
+									<Text c="dimmed" size="xs">
+										{t("portfolio.avgPrice", {
+											value: formatMoney(position.averagePurchasePrice),
+										})}
+									</Text>
+								)}
+
+								{!!position.shareText && (
+									<Text c="dimmed" size="xs">
+										{t("portfolio.share", { value: position.shareText })}
+									</Text>
+								)}
+							</Group>
+						</Stack>
+					);
+				})}
 			</Stack>
 		</Card>
 	);