feat: render stock logos with signed returns on account page

src/pages/account/ui/AccountPage.test.tsx

@@ -56,6 +56,7 @@ const portfolio: Portfolio = {
 			averagePurchasePrice: null,
 			absoluteReturn: null,
 			isin: null,
+			logoName: "vtoraya.png",
 		},
 		{
 			figi: "FIGI-1",
@@ -66,6 +67,7 @@ const portfolio: Portfolio = {
 			averagePurchasePrice: { currency: "RUB", value: "11" },
 			absoluteReturn: { currency: "RUB", value: "-1" },
 			isin: "RU000A0JX0J2",
+			logoName: null,
 		},
 	],
 	cashBalances: [{ currency: "USD", value: "0.5" }],
@@ -126,6 +128,49 @@ describe("AccountPage states", () => {
 		expect(screen.getByText("Доля: 100 %")).toBeInTheDocument();
 		expect(screen.getByText("RU000A0JX0J2")).toBeInTheDocument();
 		expect(screen.queryByText("—")).not.toBeInTheDocument();
+		expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
+			"src",
+			"https://invest-brands.cdn-tinkoff.ru/vtorayax160.png",
+		);
+	});
+
+	it("renders stock cards with logo fallback and signed unlabeled return", () => {
+		renderPage(
+			<AccountPageLoaded
+				portfolio={{
+					...portfolio,
+					positions: [
+						{
+							figi: "FIGI-A",
+							displayName: "Абра",
+							type: "STOCK",
+							quantity: "1",
+							currentValue: { currency: "RUB", value: "5" },
+							averagePurchasePrice: null,
+							absoluteReturn: { currency: "RUB", value: "3" },
+							isin: null,
+							logoName: null,
+						},
+						{
+							figi: "FIGI-B",
+							displayName: "Кадабра",
+							type: "STOCK",
+							quantity: "1",
+							currentValue: { currency: "RUB", value: "7" },
+							averagePurchasePrice: null,
+							absoluteReturn: { currency: "RUB", value: "0" },
+							isin: null,
+							logoName: null,
+						},
+					],
+				}}
+			/>,
+		);
+		expect(screen.getByText("А")).toBeInTheDocument();
+		expect(screen.getByText("+3 ₽")).toBeInTheDocument();
+		expect(screen.getByText("0 ₽")).toBeInTheDocument();
+		expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
+		expect(screen.queryByRole("img", { name: "Абра" })).not.toBeInTheDocument();
 	});
 
 	it("uses the cached account title when available", () => {

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

@@ -1,5 +1,6 @@
 import {
 	Alert,
+	Avatar,
 	Button,
 	Card,
 	Group,
@@ -10,6 +11,7 @@ import {
 	Text,
 	Title,
 } from "@mantine/core";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import { useBrokerageOperations } from "@/entities/broker-operation";
@@ -24,6 +26,7 @@ import {
 	formatMoney,
 	formatShare,
 	formatSnapshotTime,
+	instrumentLogoUrl,
 } from "@/entities/portfolio";
 import { StateView } from "@/shared/ui";
 import classes from "./AccountPage.module.css";
@@ -188,6 +191,7 @@ export function AccountPageLoaded({
 					title={t("portfolio.stocks")}
 					positions={stocks}
 					denominators={denominators}
+					stock
 				/>
 			) : null}
 			{bonds.length ? (
@@ -349,19 +353,22 @@ function PositionSection({
 	title,
 	positions,
 	denominators,
+	stock = false,
 }: {
 	title: string;
 	positions: Portfolio["positions"];
 	denominators: Map<string, number>;
+	stock?: boolean;
 }) {
 	return (
 		<Section title={title}>
-			<SimpleGrid cols={{ base: 1, sm: 2, md: 3 }}>
+			<SimpleGrid cols={stock ? 1 : { base: 1, sm: 2, md: 3 }}>
 				{positions.map((position) => (
 					<PositionCard
 						key={`${position.figi}-${position.displayName}-${position.quantity}`}
 						position={position}
 						denominators={denominators}
+						stock={stock}
 					/>
 				))}
 			</SimpleGrid>
@@ -371,9 +378,11 @@ function PositionSection({
 function PositionCard({
 	position,
 	denominators,
+	stock = false,
 }: {
 	position: Portfolio["positions"][number];
 	denominators: Map<string, number>;
+	stock?: boolean;
 }) {
 	const { t } = useTranslation();
 	const share = position.currentValue?.currency
@@ -389,9 +398,24 @@ function PositionCard({
 				? classes.negative
 				: undefined
 		: undefined;
+	const returnText = position.absoluteReturn
+		? stock
+			? `${Number(position.absoluteReturn.value) > 0 ? "+" : ""}${formatMoney(position.absoluteReturn)}`
+			: t("portfolio.return", {
+					value: formatMoney(position.absoluteReturn),
+				})
+		: null;
+	const logoSrc = stock ? instrumentLogoUrl(position.logoName) : null;
 	return (
 		<Card className={classes.tile} withBorder>
 			<Group justify="space-between" align="flex-start" wrap="nowrap">
+				{stock ? (
+					<PositionLogo
+						key={logoSrc ?? "no-logo"}
+						src={logoSrc}
+						label={position.displayName}
+					/>
+				) : null}
 				<Stack gap={2} miw={0}>
 					<Text fw={700} lineClamp={1}>
 						{position.displayName}
@@ -411,11 +435,9 @@ function PositionCard({
 							{formatMoney(position.currentValue)}
 						</Text>
 					) : null}
-					{position.absoluteReturn ? (
+					{returnText ? (
 						<Text size="sm" fw={600} className={returnClass}>
-							{t("portfolio.return", {
-								value: formatMoney(position.absoluteReturn),
-							})}
+							{returnText}
 						</Text>
 					) : null}
 				</Stack>
@@ -439,6 +461,24 @@ function PositionCard({
 		</Card>
 	);
 }
+function PositionLogo({ src, label }: { src: string | null; label: string }) {
+	const [failed, setFailed] = useState(false);
+	if (src && !failed)
+		return (
+			<Avatar
+				src={src}
+				alt={label}
+				size={40}
+				radius="md"
+				onError={() => setFailed(true)}
+			/>
+		);
+	return (
+		<Avatar size={40} radius="md">
+			{(label.trim()[0] ?? "?").toUpperCase()}
+		</Avatar>
+	);
+}
 function AccountHeading({ account }: { account?: BrokerageAccount }) {
 	const { t } = useTranslation();
 	return (