refactor: enforce frontend view model boundaries

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

@@ -23,20 +23,26 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 	const { kind, position } = props;
 	const { t } = useTranslation();
 	const isExpanded = kind !== "other";
+
 	const returnClass = position.returnTone
 		? classes[position.returnTone]
 		: undefined;
+
 	let returnText = position.returnText;
-	if (returnText && !isExpanded) returnText = t("portfolio.return", { value: returnText });
+	if (returnText && !isExpanded)
+		returnText = t("portfolio.return", { value: returnText });
 	const instrumentTo = position.instrumentTo;
+
 	const identifier
 		= kind === "stocks" ? (position.ticker ?? position.isin) : position.isin;
+
 	const identifierText = [
 		t("portfolio.quantity", { value: position.quantity }),
 		identifier,
 	]
 		.filter(Boolean)
 		.join(" · ");
+
 	const accountLink = position.account
 		? (
 				<Anchor
@@ -48,15 +54,16 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 				</Anchor>
 			)
 		: undefined;
+
 	const secondaryText = [
 		position.averagePurchasePrice
 			? t("portfolio.avgPrice", {
 					value: formatMoney(position.averagePurchasePrice),
 				})
-			: /* eslint-disable-line unicorn/no-null -- Mantine represents an empty controlled field as null. */ null,
+			: null, // eslint-disable-line unicorn/no-null -- Mantine represents an empty controlled field as null.
 		position.shareText
 			? t("portfolio.share", { value: position.shareText })
-			: /* eslint-disable-line unicorn/no-null -- Mantine represents an empty controlled field as null. */ null,
+			: null, // eslint-disable-line unicorn/no-null -- Mantine represents an empty controlled field as null.
 	]
 		.filter(Boolean)
 		.join(" · ");
@@ -71,6 +78,7 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 						src={position.logoSrc}
 						to={instrumentTo}
 					/>
+
 					<Stack className={classes.expandedIdentity} gap={2} miw={0}>
 						{instrumentTo
 							? (
@@ -83,31 +91,37 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 										{position.displayName}
 									</Text>
 								)}
+
 						{accountLink}
+
 						<Text c="dimmed" className={classes.expandedIdentifiers} size="xs">
 							{identifierText}
 						</Text>
 					</Stack>
+
 					<Stack align="flex-end" className={classes.expandedValue} gap={2}>
-						{!!(position.currentValue) && ((
+						{!!position.currentValue && (
 							<Text fw={700} size="lg">
 								{formatMoney(position.currentValue)}
 							</Text>
-						))}
-						{!!(returnText) && ((
+						)}
+
+						{!!returnText && (
 							<Text className={returnClass} fw={600} size="sm">
 								{returnText}
 							</Text>
-						))}
+						)}
 					</Stack>
 				</div>
-				{!!(secondaryText) && ((
+
+				{!!secondaryText && (
 					<Text c="dimmed" className={classes.expandedMeta} size="xs">
 						{secondaryText}
 					</Text>
-				))}
+				)}
 			</Card>
 		);
+
 	return (
 		<Card className={classes.tile} withBorder>
 			<Group align="flex-start" justify="space-between" wrap="nowrap">
@@ -115,45 +129,52 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 					<Text fw={700} lineClamp={1}>
 						{position.displayName}
 					</Text>
+
 					{accountLink}
-					{!!(position.isin) && ((
+
+					{!!position.isin && (
 						<Text c="dimmed" className={classes.mono} size="xs">
 							{position.isin}
 						</Text>
-					))}
+					)}
+
 					<Text c="dimmed" size="xs">
 						{t("portfolio.quantity", { value: position.quantity })}
 					</Text>
 				</Stack>
+
 				<Stack align="flex-end" gap={2}>
-					{!!(position.currentValue) && ((
+					{!!position.currentValue && (
 						<Text fw={800} size="lg">
 							{formatMoney(position.currentValue)}
 						</Text>
-					))}
-					{!!(returnText) && ((
+					)}
+
+					{!!returnText && (
 						<Text className={returnClass} fw={600} size="sm">
 							{returnText}
 						</Text>
-					))}
+					)}
 				</Stack>
 			</Group>
-			{!!(position.averagePurchasePrice || position.shareText) && ((
+
+			{!!(position.averagePurchasePrice || position.shareText) && (
 				<Group justify="space-between" mt="xs">
-					{!!(position.averagePurchasePrice) && ((
+					{!!position.averagePurchasePrice && (
 						<Text c="dimmed" size="xs">
 							{t("portfolio.avgPrice", {
 								value: formatMoney(position.averagePurchasePrice),
 							})}
 						</Text>
-					))}
-					{!!(position.shareText) && ((
+					)}
+
+					{!!position.shareText && (
 						<Text c="dimmed" size="xs">
 							{t("portfolio.share", { value: position.shareText })}
 						</Text>
-					))}
+					)}
 				</Group>
-			))}
+			)}
 		</Card>
 	);
 };