refactor: tighten types and reuse instrument UI

src/app/routes/AppRoutes/AppRoutes.test.tsx

@@ -65,6 +65,8 @@ describe("AppRoutes", () => {
 			path: { pathname: "/login", state: { returnTo: "//example.com" } },
 			title: "Вход",
 		},
+		{ endpoint: "login", path: { pathname: "/login", state: { returnTo: 42 } }, title: "Вход" },
+		{ endpoint: "login", path: { pathname: "/login", state: 42 }, title: "Вход" },
 	])("authenticates via $endpoint and reaches the protected landing from $path", async ({ endpoint, path, title }) => {
 		let credentials: unknown;
 		server.use(

src/app/routes/RouteErrorBoundary/RouteErrorBoundary.tsx

@@ -24,15 +24,15 @@ class Boundary extends Component<BoundaryProps, State> {
 		return { hasError: true };
 	}
 
-	state: State = { hasError: false };
+	override state: State = { hasError: false };
 
-	componentDidUpdate(previousProps: BoundaryProps) {
+	override componentDidUpdate(previousProps: BoundaryProps) {
 		if (previousProps.routeKey !== this.props.routeKey && this.state.hasError) {
 			this.setState({ hasError: false });
 		}
 	}
 
-	render() {
+	override render() {
 		return this.state.hasError
 			? <RouteErrorFallback authenticated={this.props.authenticated} />
 			: (

src/app/routes/RouteGuards.tsx

@@ -30,8 +30,11 @@ const Public: FC<PropsWithChildren> = (props) => {
 
 	if (!ready) return <RouteSkeleton variant="shell" />;
 
-	const requested = (location.state as null
-		| { returnTo?: string })?.returnTo;
+	const state: unknown = location.state;
+
+	const requested = state && typeof state === "object" && "returnTo" in state
+		? state.returnTo
+		: undefined;
 
 	const returnTo
 		= typeof requested === "string"

src/entities/bank-card/api/banking.test.tsx

@@ -403,7 +403,7 @@ describe("banking API", () => {
 		);
 
 		await waitFor(() =>
-			expect(result.current.categories.data?.[0].name).toBe("Food"),
+			expect(result.current.categories.data?.[0]?.name).toBe("Food"),
 		);
 		await act(() =>
 			result.current.updateCategory.mutateAsync({
@@ -412,7 +412,7 @@ describe("banking API", () => {
 			}),
 		);
 		await waitFor(() =>
-			expect(result.current.categories.data?.[0].name).toBe("Groceries"),
+			expect(result.current.categories.data?.[0]?.name).toBe("Groceries"),
 		);
 		await act(() =>
 			result.current.updateOperation.mutateAsync({

src/entities/bank-card/api/mutations.ts

@@ -46,16 +46,16 @@ function useBankMutationOptions() {
 	return {
 		onError: (error: unknown) => {
 			const errorCode = apiErrorCode(error);
-			if (
-				[
-					ApiErrorCode.BankDependentRefunds,
-					ApiErrorCode.BankIntentConflict,
-					ApiErrorCode.BankRefundLimit,
-					ApiErrorCode.BankVersionConflict,
-					ApiErrorCode.BankWriteConflict,
-				].some(code => isApiErrorCode(errorCode, code))
-			)
-				return invalidate();
+
+			return [
+				ApiErrorCode.BankDependentRefunds,
+				ApiErrorCode.BankIntentConflict,
+				ApiErrorCode.BankRefundLimit,
+				ApiErrorCode.BankVersionConflict,
+				ApiErrorCode.BankWriteConflict,
+			].some(code => isApiErrorCode(errorCode, code))
+				? invalidate()
+				: undefined;
 		},
 		onSuccess: invalidate,
 		retry: false,

src/entities/bank-card/api/queries.ts

@@ -143,7 +143,7 @@ function useBankOperations(
 
 			return !isAll
 				&& previousQuery?.queryKey.length === options.queryKey.length
-				&& previous?.path?.id === id
+				&& previous?.path.id === id
 				&& previous?.query?.month === query.month
 				&& previous?.query?.from === query.from
 				&& previous?.query?.to === query.to
@@ -165,6 +165,7 @@ function useBankOperations(
 
 				// eslint-disable-next-line @typescript-eslint/only-throw-error -- Preserve generated ProblemDetails for apiErrorCode and field-error consumers.
 				if (error) throw error;
+				// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- An empty HTTP body can violate the generated response contract.
 				if (!data) throw new Error("Missing bank operations response");
 				if (!isAll) return data;
 				items.push(...data.items);

src/entities/bank-card/ui/BankCardForm/BankCardForm.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Modal, Stack, Text } from "@mantine/core";
+import { Button, Fieldset, Group, Modal, Stack, Text } from "@mantine/core";
 import { type FC } from "react";
 import { FormProvider } from "react-hook-form";
 
@@ -6,7 +6,6 @@ import { formatDate } from "@/shared/lib";
 
 import { type BankCard } from "../../api/queries";
 import { BankFeedback } from "../BankFeedback";
-import classes from "../BankForms.module.css";
 import { BankCardFields } from "./BankCardForm.view";
 import { useBankCardFormVm } from "./BankCardForm.vm";
 
@@ -40,7 +39,7 @@ const BankCardForm: FC<BankCardFormProps> = (props) => {
 		>
 			<FormProvider {...methods}>
 				<form onSubmit={onSubmit}>
-					<fieldset className={classes.fieldset} disabled={isPending}>
+					<Fieldset disabled={isPending} variant="unstyled">
 						<Stack>
 							<BankCardFields archived={Boolean(props.card?.archivedAt)} />
 
@@ -80,7 +79,7 @@ const BankCardForm: FC<BankCardFormProps> = (props) => {
 								</Button>
 							</Group>
 						</Stack>
-					</fieldset>
+					</Fieldset>
 				</form>
 			</FormProvider>
 		</Modal>

src/entities/bank-card/ui/BankCardForm/useOpeningDateField.ts

@@ -1,7 +1,7 @@
+import type { DateInput } from "@mantine/dates";
 import type { ComponentProps } from "react";
 import type { Control } from "react-hook-form";
 
-import { DateInput } from "@mantine/dates";
 import { useController } from "react-hook-form";
 
 import { bankDateInputValue } from "../../model/form-validation";

src/entities/bank-card/ui/BankForms.module.css

@@ -1,6 +0,0 @@
-.fieldset {
-	border: 0;
-	padding: 0;
-	margin: 0;
-	min-width: 0;
-}

src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx

@@ -78,6 +78,8 @@ const BankSummaryViewCategories: FC<BankSummaryViewProps> = (props) => {
 			</LoadingSkeleton>
 		);
 	}
+
+	return null;
 };
 
 const BankSummaryView: FC<BankSummaryViewProps> = (props) => {

src/entities/bank-card/ui/CategoryManager/CategoryManager.test.tsx

@@ -8,7 +8,7 @@ import {
 	waitFor,
 } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
-import { describe, expect, it } from "vitest";
+import { assert, describe, expect, it } from "vitest";
 
 import { configureAuthClient } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
@@ -78,15 +78,16 @@ describe("CategoryManager", () => {
 			name: "Переименовать",
 		});
 
+		assert.isDefined(renameButtons[0]);
 		fireEvent.click(renameButtons[0]);
 		fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
 		fireEvent.click(
 			await screen.findByRole("button", { name: "Перечитать запись" }),
 		);
 		await waitFor(() => expect(reads).toBe(3));
-		fireEvent.click(
-			screen.getAllByRole("button", { name: "Переименовать" })[1],
-		);
+		const secondRename = screen.getAllByRole("button", { name: "Переименовать" })[1];
+		assert.isDefined(secondRename);
+		fireEvent.click(secondRename);
 		fireEvent.change(screen.getByLabelText(/Название категории/), {
 			target: { value: "Новая вторая" },
 		});

src/entities/bank-card/ui/CategoryManager/CategoryManager.tsx

@@ -1,6 +1,6 @@
-import {
-	Badge,
+import { Badge,
 	Button,
+	Fieldset,
 	Group,
 	Modal,
 	Stack,
@@ -14,7 +14,6 @@ import { useTranslation } from "react-i18next";
 
 import { bankOperationAppearance } from "../../model/operation-appearance";
 import { BankFeedback } from "../BankFeedback";
-import classes from "../BankForms.module.css";
 import { useCategoryManagerVm } from "./CategoryManager.vm";
 
 type CategoryManagerProps = {
@@ -76,7 +75,7 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 		>
 			<FormProvider {...methods}>
 				<form onSubmit={onSubmit}>
-					<fieldset className={classes.fieldset} disabled={isPending}>
+					<Fieldset disabled={isPending} variant="unstyled">
 						<Stack>
 							{categoryRows?.map((category) => {
 								return (
@@ -149,7 +148,7 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => {
 								</Button>
 							</Group>
 						</Stack>
-					</fieldset>
+					</Fieldset>
 				</form>
 			</FormProvider>
 		</Modal>

src/entities/brokerage-event/ui/BrokerageEventCard.tsx

@@ -34,7 +34,7 @@ const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => {
 		<EntryCard
 			imageSrc={instrumentLogoUrl(event.logoName)}
 			initial={(
-				(event.ticker ?? event.displayName).trim()[0] ?? "?"
+				event.ticker.trim()[0] ?? "?"
 			).toUpperCase()}
 			metadata={metadata}
 			title={[t(`events.type.${event.type}`), event.displayName].join(" · ")}

src/features/auth/model/auth.test.tsx

@@ -345,12 +345,12 @@ describe("AuthProvider", () => {
 		);
 
 		await waitFor(() =>
-			expect(result.current.cards.data?.[0].id).toBe("a-card"),
+			expect(result.current.cards.data?.[0]?.id).toBe("a-card"),
 		);
 		identity = "b";
 		await act(() => expireSession());
 		await waitFor(() =>
-			expect(result.current.cards.data?.[0].id).toBe("b-card"),
+			expect(result.current.cards.data?.[0]?.id).toBe("b-card"),
 		);
 	});
 });

src/features/auth/ui/AuthForm/AuthForm.module.css

@@ -1,4 +0,0 @@
-.fieldset {
-	border: 0;
-	padding: 0;
-}

src/features/auth/ui/AuthForm/AuthForm.tsx

@@ -1,9 +1,9 @@
 import type { FC } from "react";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Alert, Button, PasswordInput, Stack, TextInput } from "@mantine/core";
+import { Alert, Button, Fieldset, PasswordInput, Stack, TextInput } from "@mantine/core";
 import { useState } from "react";
-import { FormProvider, type Resolver, useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
@@ -12,7 +12,6 @@ import {
 	loginSchema,
 	registerSchema,
 } from "../../model/auth.schema";
-import classes from "./AuthForm.module.css";
 
 type AuthFormProps = {
 	onSubmit: (email: string, password: string) => Promise<void>;
@@ -25,7 +24,7 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 	const schema = register ? registerSchema : loginSchema;
 
 	const methods = useForm<AuthFormValues>({
-		resolver: zodResolver(schema) as Resolver<AuthFormValues>,
+		resolver: zodResolver(schema),
 	});
 
 	const {
@@ -34,7 +33,7 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 
 	const [submitError, setSubmitError] = useState<null | string>(null);
 
-	const onSubmit2 = methods.handleSubmit(async (values) => {
+	const submit = methods.handleSubmit(async (values) => {
 		setSubmitError(null);
 
 		try {
@@ -49,26 +48,26 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 
 	return (
 		<FormProvider {...methods}>
-			<form onSubmit={onSubmit2}>
-				<fieldset className={classes.fieldset} disabled={isSubmitting}>
+			<form onSubmit={submit}>
+				<Fieldset disabled={isSubmitting} variant="unstyled">
 					<Stack>
 						<TextInput
 							label={t("auth.email")}
 							{...methods.register("email")}
-							error={errors.email?.message as string}
+							error={errors.email?.message}
 						/>
 
 						<PasswordInput
 							label={t("auth.password")}
 							{...methods.register("password")}
-							error={errors.password?.message as string}
+							error={errors.password?.message}
 						/>
 
 						{register && (
 							<PasswordInput
 								label={t("auth.passwordConfirmation")}
 								{...methods.register("passwordConfirmation")}
-								error={errors.passwordConfirmation?.message as string}
+								error={errors.passwordConfirmation?.message}
 							/>
 						)}
 
@@ -82,7 +81,7 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 							{t(register ? "auth.haveAccount" : "auth.noAccount")}
 						</Button>
 					</Stack>
-				</fieldset>
+				</Fieldset>
 			</form>
 		</FormProvider>
 	);

src/features/instrument-details/index.ts

@@ -1,8 +1,11 @@
 export { section, type SectionState } from "./model/section";
 export { useInstrumentParameters } from "./model/useInstrumentParameters";
 export { InstrumentChart } from "./ui/InstrumentChart/InstrumentChart.view";
+export { default as instrumentDetailsStyles } from "./ui/InstrumentDetails.module.css";
 export { InstrumentEvents } from "./ui/InstrumentEvents.view";
 export { InstrumentHeader } from "./ui/InstrumentHeader/InstrumentHeader.view";
+export { InstrumentMetric } from "./ui/InstrumentMetric.view";
 export { InstrumentPageState } from "./ui/InstrumentPageState.view";
 export { InstrumentPosition } from "./ui/InstrumentPosition.view";
+export { InstrumentQuoteStatus } from "./ui/InstrumentQuoteStatus.view";
 export { InstrumentSection } from "./ui/InstrumentSection.view";

src/features/instrument-details/model/useInstrumentParameters.ts

@@ -11,16 +11,18 @@ function useInstrumentParameters(incomeFilter: "coupons" | "dividends") {
 		value => value === parameters.get("period"),
 	) ?? "month";
 
-	const filters: { categories: OperationCategory[]; value: string }[] = [
-		{ categories: [], value: "all" },
+	const defaultFilter: { categories: OperationCategory[]; value: string } = { categories: [], value: "all" };
+
+	const filters = [
+		defaultFilter,
 		{ categories: ["trade"], value: "trades" },
 		{ categories: ["income"], value: incomeFilter },
 		{ categories: ["tax", "fee", "transfer", "other"], value: "other" },
-	];
+	] satisfies { categories: OperationCategory[]; value: string }[];
 
 	const { categories, value: filter } = filters.find(
 		item => item.value === parameters.get("events"),
-	) ?? filters[0];
+	) ?? defaultFilter;
 
 	const setParameter = (key: string, value: string) => {
 		const next = new URLSearchParams(parameters);

src/features/instrument-details/ui/InstrumentDetails.module.css

@@ -60,3 +60,32 @@
 		grid-column: 1 / -1;
 	}
 }
+
+.page {
+	max-width: 1120px;
+	margin: 0 auto;
+	min-width: 0;
+}
+.price {
+	font-size: clamp(2rem, 4vw, 3.2rem);
+	font-weight: 700;
+	letter-spacing: -0.04em;
+	font-variant-numeric: tabular-nums;
+	line-height: 1.2;
+	overflow-wrap: anywhere;
+}
+.metricsGrid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
+	gap: var(--mantine-spacing-lg);
+}
+.metricsGrid > div {
+	padding: var(--mantine-spacing-sm);
+	background: var(--wl-color-subtle);
+	border-radius: var(--mantine-radius-md);
+}
+@media (max-width: 48em) {
+	.metricsGrid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}

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

@@ -2,9 +2,9 @@ import type { FC } from "react";
 
 import { Text } from "@mantine/core";
 
-type MetricProps = { label: string; value: string };
+type InstrumentMetricProps = { label: string; value: string };
 
-const Metric: FC<MetricProps> = props => (
+const InstrumentMetric: FC<InstrumentMetricProps> = props => (
 	<div>
 		<Text c="dimmed" size="xs">
 			{props.label}
@@ -16,4 +16,4 @@ const Metric: FC<MetricProps> = props => (
 	</div>
 );
 
-export { Metric };
+export { InstrumentMetric };

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

@@ -0,0 +1,33 @@
+import type { FC } from "react";
+
+import { Badge, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import { formatSnapshotTime } from "@/shared/lib";
+
+type InstrumentQuoteStatusProps = {
+	quote?: { priceAt: null | string; tradingStatus: null | string };
+};
+
+const InstrumentQuoteStatus: FC<InstrumentQuoteStatusProps> = (props) => {
+	const { quote } = props;
+	const { t } = useTranslation();
+
+	return (
+		<>
+			<Badge color="gray" variant="light">
+				{t(`stock.trading.${quote?.tradingStatus}`, {
+					defaultValue: t("stock.trading.unknown"),
+				})}
+			</Badge>
+
+			{!!quote?.priceAt && (
+				<Text c="dimmed" size="xs">
+					{t("stock.priceAt", { date: formatSnapshotTime(quote.priceAt) })}
+				</Text>
+			)}
+		</>
+	);
+};
+
+export { InstrumentQuoteStatus };

src/features/tbank-connection/model/screen-sync.ts

@@ -103,7 +103,7 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
 					meta ? [meta, ...(meta.dependencies ?? [])] : [],
 				)
 				.flatMap(meta =>
-					meta?.sync.id
+					meta.sync.id
 					&& (meta.sync.state === "running" || meta.sync.state === "queued")
 						? [meta.sync.id]
 						: [],

src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.test.tsx

@@ -3,6 +3,8 @@ import { fireEvent, render, screen, within } from "@testing-library/react";
 import { MemoryRouter, Route, Routes } from "react-router";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
+import type * as BrokerageEvents from "@/entities/brokerage-event";
+
 import { useBrokerageEvents } from "@/entities/brokerage-event";
 
 import { AccountEventsPage } from "./AccountEventsPage";
@@ -18,7 +20,7 @@ vi.mock("@/features/tbank-connection", () => ({
 	}),
 }));
 vi.mock("@/entities/brokerage-event", async importOriginal => ({
-	...(await importOriginal<typeof import("@/entities/brokerage-event")>()),
+	...(await importOriginal<typeof BrokerageEvents>()),
 	useBrokerageEvents: vi.fn(),
 }));
 

src/pages/account-income/model/display.ts

@@ -156,8 +156,9 @@ function toIncomeDisplayModel(
 			return null;
 	}
 
-	const previous = meta?.dependencies?.find(({ role }) => role === "previous");
-	const year = meta?.dependencies?.find(({ role }) => role === "year");
+	const dependencies = meta?.dependencies ?? [];
+	const previous = dependencies.find(({ role }) => role === "previous");
+	const year = dependencies.find(({ role }) => role === "year");
 
 	return {
 		comparison: comparisonDisplay(analytics.period, analytics.yearComparison),

src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx

@@ -78,7 +78,7 @@ const analytics
 		},
 		totalsByCurrency: [summary("RUB", "10", "2")],
 		yearComparison: null,
-	} satisfies IncomeAnalytics;
+	} satisfies IncomeAnalytics & { instruments: [unknown] };
 
 function comparison(currency: string) {
 	return {

src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.test.tsx

@@ -11,7 +11,7 @@ import {
 	useLocation,
 	useNavigate,
 } from "react-router";
-import { describe, expect, it, vi } from "vitest";
+import { assert, describe, expect, it, vi } from "vitest";
 
 import {
 	type BrokerageOperation,
@@ -264,8 +264,8 @@ describe("AccountOperationsPage", () => {
 				</QueryClientProvider>,
 			);
 			await screen.findByLabelText("Период");
-			expect(searches[0].get("from")).toBeNull();
-			expect(searches[0].get("to")).toBeNull();
+			expect(searches[0]?.get("from")).toBeNull();
+			expect(searches[0]?.get("to")).toBeNull();
 
 			for (const expected of [
 				"?categories=trade",
@@ -597,6 +597,8 @@ it("recovers an invalid cursor at the first page without clearing applied filter
 	fireEvent.click(await screen.findByRole("button", { name: "Далее" }));
 	fireEvent.click(await screen.findByRole("button", { name: "Повторить" }));
 	await waitFor(() => expect(searches).toHaveLength(3));
+	assert.isDefined(searches[0]);
+	assert.isDefined(searches[2]);
 	expect(searches[2].get("cursor")).toBeNull();
 	for (const key of ["from", "to", "categories"])
 		expect(searches[2].get(key)).toBe(searches[0].get(key));

src/pages/account/model/positions.fixtures.ts

@@ -1,6 +1,6 @@
 import type { Portfolio } from "@/entities/portfolio";
 
-const portfolio: Portfolio
+const portfolio
 	= {
 		cashBalances: [{ currency: "USD", value: "1" }],
 		isStale: true,
@@ -42,10 +42,10 @@ const portfolio: Portfolio
 				ticker: null,
 				type: "FUND",
 			},
-		],
+		] satisfies [Portfolio["positions"][number], ...Portfolio["positions"]],
 		structure: { currencies: [], unvaluedCategories: [] },
 		totalsByCurrency: [{ currency: "RUB", value: "150" }],
-	};
+	} satisfies Portfolio;
 
 const position: Portfolio["positions"][number] = {
 	...portfolio.positions[0],

src/pages/account/model/positions.test.ts

@@ -59,13 +59,13 @@ describe("account position sections", () => {
 			"bonds",
 			"other",
 		]);
-		expect(sections[2].groups.map(group => group.positions[0].figi)).toEqual([
+		expect(sections[2]?.groups.map(group => group.positions[0].figi)).toEqual([
 			"FIGI-FUND",
 			...otherTypes.map(type => `FIGI-${type}-NEXT`),
 		]);
-		expect(sections[0].groups[0].positions[0].shareText).toBe("40 %");
-		expect(sections[1].groups[0].positions[0].shareText).toBe("20 %");
-		expect(sections[2].groups[1].positions[0].shareText).toBe("20 %");
+		expect(sections[0]?.groups[0]?.positions[0].shareText).toBe("40 %");
+		expect(sections[1]?.groups[0]?.positions[0].shareText).toBe("20 %");
+		expect(sections[2]?.groups[1]?.positions[0].shareText).toBe("20 %");
 		expect(snapshot).toEqual(original);
 	});
 
@@ -125,10 +125,10 @@ describe("account position sections", () => {
 					figi: null,
 				},
 				{ ...second, figi: null },
-			])[0].groups,
+			])[0]?.groups,
 		).toHaveLength(1);
 		expect(
-			sections([position, { ...second, figi: "OTHER-FIGI" }])[0].groups,
+			sections([position, { ...second, figi: "OTHER-FIGI" }])[0]?.groups,
 		).toHaveLength(2);
 		expect(
 
@@ -143,19 +143,19 @@ describe("account position sections", () => {
 					figi: null,
 					isin: null,
 				},
-			])[0].groups,
+			])[0]?.groups,
 		).toHaveLength(2);
 	});
 
 	it("preserves one-account cards and does not merge repeated rows on the same account", () => {
 		expect(
-			sections([position, { ...second, account: position.account }])[0].groups,
+			sections([position, { ...second, account: position.account }])[0]?.groups,
 		).toHaveLength(2);
 		expect(
 			sections([
 				{ ...position, account: undefined },
 				{ ...second, account: undefined },
-			])[0].groups,
+			])[0]?.groups,
 		).toHaveLength(2);
 	});
 
@@ -170,9 +170,9 @@ describe("account position sections", () => {
 		];
 
 		const before = structuredClone(source);
-		const [group] = sections(source)[0].groups;
+		const group = sections(source)[0]?.groups[0];
 		expect(
-			group.positions.map(item => [
+			group?.positions.map(item => [
 				item.quantity,
 				item.currentValue,
 				item.averagePurchasePrice,

src/pages/account/model/positions.ts

@@ -11,7 +11,7 @@ type AccountPagePosition = Portfolio["positions"][number] & {
 
 type AccountPagePositionGroup = {
 	key: string;
-	positions: AccountPagePosition[];
+	positions: [AccountPagePosition, ...AccountPagePosition[]];
 };
 
 type AccountPagePositionSection = {

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

@@ -67,7 +67,7 @@ function renderPage(ui: React.ReactNode) {
 	);
 }
 
-const portfolio: Portfolio
+const portfolio
 	= {
 		cashBalances: [{ currency: "USD", value: "0.5" }],
 		isStale: true,
@@ -97,10 +97,10 @@ const portfolio: Portfolio
 				ticker: null,
 				type: "BOND",
 			},
-		],
+		] satisfies [Portfolio["positions"][number], ...Portfolio["positions"]],
 		structure: { currencies: [], unvaluedCategories: [] },
 		totalsByCurrency: [{ currency: "RUB", value: "1234.5" }],
-	};
+	} satisfies Portfolio;
 
 function position(
 	overrides: Partial<Portfolio["positions"][number]>,

src/pages/account/ui/AccountPage/position-groups.test.tsx

@@ -1,7 +1,7 @@
 import { MantineProvider } from "@mantine/core";
 import { render, screen, within } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
-import { describe, expect, it } from "vitest";
+import { assert, describe, expect, it } from "vitest";
 
 import { toAccountPagePositionSections } from "../../model/positions";
 import { portfolio, position, second } from "../../model/positions.fixtures";
@@ -13,6 +13,8 @@ describe("Positions grouped by security", () => {
 			...portfolio, positions: [position, second],
 		})[0];
 
+		assert.isDefined(section);
+
 		render(
 			<MantineProvider>
 				<MemoryRouter>
@@ -27,6 +29,8 @@ describe("Positions grouped by security", () => {
 		).getAllByRole("listitem");
 
 		expect(rows).toHaveLength(2);
+		assert.isDefined(rows[0]);
+		assert.isDefined(rows[1]);
 		expect(
 			within(rows[0]).getByRole("link", { name: "Основной" }),
 		).toHaveAttribute("href", "/accounts/a");

src/pages/account/ui/AccountPage/position-layout.browser.test.tsx

@@ -6,7 +6,7 @@ import { MantineProvider } from "@mantine/core";
 // eslint-disable-next-line testing-library/no-manual-cleanup -- Vitest globals are disabled, so RTL cannot register its automatic afterEach cleanup.
 import { cleanup, render, screen } from "@testing-library/react";
 import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";
-import { afterEach, expect, it } from "vitest";
+import { afterEach, assert, expect, it } from "vitest";
 
 import type { AccountPagePosition, AccountPagePositionSection } from "../../model/positions";
 
@@ -76,6 +76,7 @@ it("keeps expanded positions vertical while other positions adapt to the viewpor
 			expect(current.height, context).toBeGreaterThan(0);
 			if (index === 0) continue;
 			const previous = bounds[index - 1];
+			assert.isDefined(previous);
 
 			if (kind === "other" && width === 1280) {
 				// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.

src/pages/bond/ui/BondPage/BondPage.module.css

@@ -1,33 +0,0 @@
-.page {
-	max-width: 1120px;
-	margin: 0 auto;
-	min-width: 0;
-}
-.price {
-	font-size: clamp(2rem, 4vw, 3.2rem);
-	font-weight: 700;
-	letter-spacing: -0.04em;
-	font-variant-numeric: tabular-nums;
-	line-height: 1.2;
-	overflow-wrap: anywhere;
-}
-.companyMetrics {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
-	gap: var(--mantine-spacing-lg);
-}
-.embeddedSection {
-	margin-top: var(--mantine-spacing-lg);
-	padding-top: var(--mantine-spacing-lg);
-	border-top: 1px solid var(--wl-color-border);
-}
-.companyMetrics > div {
-	padding: var(--mantine-spacing-sm);
-	background: var(--wl-color-subtle);
-	border-radius: var(--mantine-radius-md);
-}
-@media (max-width: 48em) {
-	.companyMetrics {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-}

src/pages/bond/ui/BondPage/BondPage.view.tsx

@@ -14,23 +14,23 @@ import { useTranslation } from "react-i18next";
 
 import {
 	InstrumentChart,
+	instrumentDetailsStyles,
 	InstrumentEvents,
 	InstrumentHeader,
+	InstrumentMetric,
 	InstrumentPosition,
+	InstrumentQuoteStatus,
 } from "@/features/instrument-details";
 import {
 	formatDate,
 	formatDecimal,
 	formatMoney,
-	formatSnapshotTime,
 } from "@/shared/lib";
 
 import type { BondPageVm } from "./BondPage.vm";
 
-import classes from "./BondPage.module.css";
 import { BondCoupons } from "./components/BondCoupons.view";
 import { BondMetrics } from "./components/BondMetrics.view";
-import { Metric } from "./components/Metric.view";
 
 type BondPageViewProps = { vm: BondPageVm };
 
@@ -75,7 +75,7 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 					{t("bond.percentOfNominal")}
 				</Text>
 
-				<Text className={classes.price}>
+				<Text className={instrumentDetailsStyles.price}>
 					{vm.quote?.pricePercent == undefined
 						? t("bond.unknown")
 						: `${formatDecimal(vm.quote.pricePercent)} %`}
@@ -97,17 +97,17 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 				</Text>
 
 				<Group gap="xl" my="sm">
-					<Metric
+					<InstrumentMetric
 						label={t("bond.cleanPrice")}
 						value={formatMoney(vm.quote?.cleanPrice)}
 					/>
 
-					<Metric
+					<InstrumentMetric
 						label={t("bond.aci")}
 						value={formatMoney(vm.quote?.aci)}
 					/>
 
-					<Metric
+					<InstrumentMetric
 						label={t("bond.dirtyPrice")}
 						value={formatMoney(vm.quote?.dirtyPrice)}
 					/>
@@ -118,19 +118,7 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 				</Text>
 
 				<Group>
-					<Badge color="gray" variant="light">
-						{t(`stock.trading.${vm.quote?.tradingStatus}`, {
-							defaultValue: t("stock.trading.unknown"),
-						})}
-					</Badge>
-
-					{!!vm.quote?.priceAt && (
-						<Text c="dimmed" size="xs">
-							{t("stock.priceAt", {
-								date: formatSnapshotTime(vm.quote.priceAt),
-							})}
-						</Text>
-					)}
+					<InstrumentQuoteStatus quote={vm.quote} />
 				</Group>
 
 				{!!vm.quote?.unavailable.length && (
@@ -143,7 +131,7 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 	}
 
 	return (
-		<Stack className={classes.page} gap="lg">
+		<Stack className={instrumentDetailsStyles.page} gap="lg">
 			<InstrumentHeader
 				logoSrc={vm.logoSrc}
 				name={bond.name}
@@ -180,29 +168,29 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 					</Text>
 				)}
 
-				<div className={classes.embeddedSection}>
+				<div className={instrumentDetailsStyles.embeddedSection}>
 					<Title mb="md" order={2} size="h3">
 						{t("bond.terms")}
 					</Title>
 
-					<div className={classes.companyMetrics}>
-						<Metric
+					<div className={instrumentDetailsStyles.metricsGrid}>
+						<InstrumentMetric
 							label={t("bond.nominal")}
 							value={formatMoney(bond.nominal)}
 						/>
 
-						<Metric
+						<InstrumentMetric
 							label={t("bond.initialNominal")}
 							value={formatMoney(bond.initialNominal)}
 						/>
 
-						<Metric label={t("bond.maturity")} value={maturityDate} />
+						<InstrumentMetric label={t("bond.maturity")} value={maturityDate} />
 
-						<Metric label={t("bond.callDate")} value={callDate} />
+						<InstrumentMetric label={t("bond.callDate")} value={callDate} />
 
-						<Metric label={t("bond.couponFrequency")} value={couponFrequency} />
+						<InstrumentMetric label={t("bond.couponFrequency")} value={couponFrequency} />
 
-						<Metric label={t("bond.lot")} value={lotSize} />
+						<InstrumentMetric label={t("bond.lot")} value={lotSize} />
 					</div>
 				</div>
 			</InstrumentHeader>

src/pages/bond/ui/BondPage/components/BondCoupons.view.tsx

@@ -5,11 +5,9 @@ import { useTranslation } from "react-i18next";
 
 import type { BondCoupons as Coupons } from "@/entities/bond";
 
-import { InstrumentSection, type SectionState } from "@/features/instrument-details";
+import { InstrumentMetric, InstrumentSection, type SectionState } from "@/features/instrument-details";
 import { formatDate, formatMoney, formatSnapshotTime } from "@/shared/lib";
 
-import { Metric } from "./Metric.view";
-
 type BondCouponsProps = {
 	coupons?: Coupons;
 	pastCoupons: Coupons["coupons"];
@@ -116,10 +114,10 @@ const Coupon: FC<CouponProps> = (props) => {
 					</Text>
 				</div>
 
-				<Metric label={t("bond.perBond")} value={formatMoney(coupon.perBond)} />
+				<InstrumentMetric label={t("bond.perBond")} value={formatMoney(coupon.perBond)} />
 
 				{!!coupon.estimatedAmount && (
-					<Metric
+					<InstrumentMetric
 						label={t("stock.yourEstimate")}
 						value={formatMoney(coupon.estimatedAmount)}
 					/>

src/pages/bond/ui/BondPage/components/BondMetrics.view.tsx

@@ -5,12 +5,9 @@ import { useTranslation } from "react-i18next";
 
 import type { BondMetrics as Metrics } from "@/entities/bond";
 
-import { InstrumentSection, type SectionState } from "@/features/instrument-details";
+import { instrumentDetailsStyles, InstrumentMetric, InstrumentSection, type SectionState } from "@/features/instrument-details";
 import { formatDate, formatDecimal, formatMoney, formatSnapshotTime } from "@/shared/lib";
 
-import classes from "../BondPage.module.css";
-import { Metric } from "./Metric.view";
-
 type BondMetricsProps = { metrics?: Metrics; state: SectionState };
 
 const BondMetrics: FC<BondMetricsProps> = (props) => {
@@ -32,17 +29,17 @@ const BondMetrics: FC<BondMetricsProps> = (props) => {
 	}
 
 	const couponDate = metrics?.couponDate
-		? formatDate(metrics?.couponDate)
+		? formatDate(metrics.couponDate)
 		: t("bond.unknown");
 
 	const effectiveYield = metrics?.effectiveYield
-		? `${formatDecimal(metrics?.effectiveYield.value)} %`
+		? `${formatDecimal(metrics.effectiveYield.value)} %`
 		: t("bond.unknown");
 
 	const couponYield
 		= metrics?.couponYieldPercent == undefined
 			? t("bond.unknown")
-			: `${formatDecimal(metrics?.couponYieldPercent)} %`;
+			: `${formatDecimal(metrics.couponYieldPercent)} %`;
 
 	let yieldContent;
 
@@ -50,13 +47,13 @@ const BondMetrics: FC<BondMetricsProps> = (props) => {
 		yieldContent = (
 			<Text c="dimmed" size="xs">
 				{t("bond.yieldSource", {
-					at: formatSnapshotTime(metrics?.effectiveYield.tradeAt),
-					date: formatDate(metrics?.effectiveYield.date),
+					at: formatSnapshotTime(metrics.effectiveYield.tradeAt),
+					date: formatDate(metrics.effectiveYield.date),
 					price: formatDecimal(
-						metrics?.effectiveYield.pricePercent,
+						metrics.effectiveYield.pricePercent,
 					),
 					target: t(
-						`bond.yieldTargets.${metrics?.effectiveYield.dateType}`,
+						`bond.yieldTargets.${metrics.effectiveYield.dateType}`,
 						{ defaultValue: t("bond.yieldTargets.unknown") },
 					),
 				})}
@@ -75,26 +72,26 @@ const BondMetrics: FC<BondMetricsProps> = (props) => {
 		<InstrumentSection state={state} title={t("bond.metrics")}>
 			{!!metrics && (
 				<Stack gap="md">
-					<div className={classes.companyMetrics}>
-						<Metric label={t("bond.creditRating")} value={rating} />
+					<div className={instrumentDetailsStyles.metricsGrid}>
+						<InstrumentMetric label={t("bond.creditRating")} value={rating} />
 
-						<Metric
+						<InstrumentMetric
 							label={t("bond.couponAmount")}
 							value={formatMoney(metrics.coupon)}
 						/>
 
-						<Metric
+						<InstrumentMetric
 							label={t("bond.couponType")}
 							value={t(`bond.couponTypes.${metrics.couponType}`, {
 								defaultValue: t("bond.unknown"),
 							})}
 						/>
 
-						<Metric label={t("bond.couponDate")} value={couponDate} />
+						<InstrumentMetric label={t("bond.couponDate")} value={couponDate} />
 
-						<Metric label={t("bond.effectiveYield")} value={effectiveYield} />
+						<InstrumentMetric label={t("bond.effectiveYield")} value={effectiveYield} />
 
-						<Metric label={t("bond.couponYield")} value={couponYield} />
+						<InstrumentMetric label={t("bond.couponYield")} value={couponYield} />
 					</div>
 
 					{!!metrics.creditRating && (
@@ -128,10 +125,10 @@ const BondMetrics: FC<BondMetricsProps> = (props) => {
 						{t("bond.couponYieldNote")}
 					</Text>
 
-					{!!metrics?.couponYieldPriceAt && (
+					{!!metrics.couponYieldPriceAt && (
 						<Text c="dimmed" size="xs">
 							{t("bond.couponYieldPriceAt", {
-								date: formatSnapshotTime(metrics?.couponYieldPriceAt),
+								date: formatSnapshotTime(metrics.couponYieldPriceAt),
 							})}
 						</Text>
 					)}

src/pages/bonds/ui/BondsPage/BondsPage.vm.ts

@@ -20,7 +20,7 @@ function useBondsPageVm() {
 			result.data?.map(bond => ({
 				...bond,
 				logoSrc: instrumentLogoUrl(bond.logoName),
-				to: `/bonds/${encodeURIComponent(bond.slug ?? bond.instrumentUid)}`,
+				to: `/bonds/${encodeURIComponent(bond.slug)}`,
 			})) ?? [],
 		loading:
 			canSearch

src/pages/card/ui/CardPage/CardPage.module.css

@@ -32,19 +32,6 @@
 .operation {
 	min-width: 0;
 }
-.operation p {
-	white-space: normal;
-	overflow-wrap: anywhere;
-}
-.operation > div > div {
-	min-width: 0;
-}
-@media (min-width: 36em) {
-	.operation > div:first-child {
-		grid-template-columns: auto minmax(0, 1fr) minmax(0, 40%);
-	}
-}
-
 .operations[data-pending] {
 	opacity: 0.55;
 }

src/pages/card/ui/CardPage/CardPage.view.tsx

@@ -102,12 +102,13 @@ const CardPageViewHistory: FC<CardPageViewProps> = (props) => {
 									)}
 								/>
 							)}
-							initial={row.title[0]}
+							initial={row.title.charAt(0)}
 							metadata={row.metadata}
 							title={row.title}
 							tone={row.tone}
 							value={row.value}
 							valueLabel={t(`bank.kinds.${row.item.kind}`)}
+							wrap
 						/>
 					</section>
 				);
@@ -128,6 +129,8 @@ const CardPageViewHistory: FC<CardPageViewProps> = (props) => {
 			</LoadingSkeleton>
 		);
 	}
+
+	return null;
 };
 
 const CardPageView: FC<CardPageViewProps> = (props) => {

src/pages/card/ui/CardPage/CardPagePresentation.vm.ts

@@ -1,6 +1,6 @@
+import type { Pagination } from "@mantine/core";
 import type { ComponentProps } from "react";
 
-import { Pagination } from "@mantine/core";
 import { useLayoutEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 

src/pages/card/ui/OperationForm/OperationFields.vm.ts

@@ -1,6 +1,6 @@
+import type { DateInput } from "@mantine/dates";
 import type { ComponentProps } from "react";
 
-import { DateInput } from "@mantine/dates";
 import { useController, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 

src/pages/card/ui/OperationForm/OperationForm.module.css

@@ -1,6 +0,0 @@
-.fieldset {
-	border: 0;
-	margin: 0;
-	padding: 0;
-	min-width: 0;
-}

src/pages/card/ui/OperationForm/OperationForm.schema.ts

@@ -90,7 +90,7 @@ function createOperationSchema({
 			&& !categories?.some(
 				c =>
 					c.id
-					=== (values.categoryId || categories?.find(c => c.isDefault)?.id),
+					=== (values.categoryId || categories.find(c => c.isDefault)?.id),
 			)
 		)
 			context.addIssue({

src/pages/card/ui/OperationForm/OperationForm.test.tsx

@@ -467,7 +467,7 @@ describe("OperationForm", () => {
 		expect(screen.getByLabelText(/Сумма/)).toHaveValue("150");
 		fireEvent.click(screen.getByRole("button", { name: "Сохранить" }));
 		await waitFor(() => expect(bodies).toHaveLength(2));
-		expect(bodies[1].version).toBe(1);
+		expect(bodies[1]?.version).toBe(1);
 		fireEvent.click(
 			screen.getByRole("button", { name: "Использовать актуальную версию 2" }),
 		);

src/pages/card/ui/OperationForm/OperationForm.view.tsx

@@ -1,7 +1,7 @@
 import type { FC, ReactNode, SubmitEventHandler } from "react";
 
-import {
-	Button,
+import { Button,
+	Fieldset,
 	Group,
 	Modal,
 	Select,
@@ -20,7 +20,6 @@ import { formatMoney } from "@/shared/lib";
 import type { Choice, OperationFieldsProps } from "./OperationForm.types";
 
 import { useOperationFieldsVm } from "./OperationFields.vm";
-import classes from "./OperationForm.module.css";
 import { useRefundFieldsVm } from "./RefundFields.vm";
 
 const OperationFields: FC<OperationFieldsProps> = (props) => {
@@ -203,7 +202,7 @@ const OperationFormView: FC<OperationFormViewProps> = (props) => {
 			title={displayTitle}
 		>
 			<form onSubmit={props.onSubmit}>
-				<fieldset className={classes.fieldset} disabled={props.pending}>
+				<Fieldset disabled={props.pending} variant="unstyled">
 					<Stack>
 						<OperationFields {...props.fields} />
 
@@ -283,7 +282,7 @@ const OperationFormView: FC<OperationFormViewProps> = (props) => {
 							</Button>
 						</Group>
 					</Stack>
-				</fieldset>
+				</Fieldset>
 			</form>
 		</Modal>
 	);

src/pages/cards/ui/CardsPage/CardsPage.test.tsx

@@ -9,7 +9,7 @@ import {
 } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
 import { MemoryRouter } from "react-router";
-import { describe, expect, it } from "vitest";
+import { assert, describe, expect, it } from "vitest";
 
 import { configureAuthClient } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
@@ -62,9 +62,9 @@ describe("CardsPage", () => {
 	it("preserves exact negative opening amount and the creation intent through unknown failure", async () => {
 		renderCards();
 		await screen.findByRole("heading", { name: "Добавьте первую карту" });
-		fireEvent.click(
-			screen.getAllByRole("button", { name: "Добавить карту" })[0],
-		);
+		const creationButton = screen.getAllByRole("button", { name: "Добавить карту" })[0];
+		assert.isDefined(creationButton);
+		fireEvent.click(creationButton);
 		const dialog = screen.getByRole("dialog");
 		const submitted: Record<string, unknown>[] = [];
 		let resolve: (() => void) | undefined;
@@ -80,7 +80,7 @@ describe("CardsPage", () => {
 					return HttpResponse.error();
 				}
 
-				return HttpResponse.json({ id: submitted[0].id }, { status: 201 });
+				return HttpResponse.json({ id: submitted[0]?.id }, { status: 201 });
 			}),
 		);
 		fireEvent.change(within(dialog).getByLabelText(/Название карты/), {

src/pages/cards/ui/CardsPage/CardsPage.view.tsx

@@ -75,6 +75,8 @@ const CardsPageViewCards: FC<CardsPageViewProps> = (props) => {
 			</LoadingSkeleton>
 		);
 	}
+
+	return null;
 };
 
 const CardsPageView: FC<CardsPageViewProps> = (props) => {

src/pages/stock/ui/StockPage/StockPage.module.css

@@ -1,39 +1,11 @@
-.page {
-	max-width: 1120px;
-	margin: 0 auto;
-	min-width: 0;
-}
-.price {
-	font-size: clamp(2rem, 4vw, 3.2rem);
-	font-weight: 700;
-	letter-spacing: -0.04em;
-	font-variant-numeric: tabular-nums;
-	line-height: 1.2;
-	overflow-wrap: anywhere;
-}
 .positive {
-	color: var(--mantine-color-green-8);
+	color: var(--wl-color-positive);
 }
 .negative {
-	color: var(--mantine-color-red-8);
+	color: var(--wl-color-negative);
 }
 .dividend {
 	padding: var(--mantine-spacing-md);
 	background: var(--mantine-color-green-0);
 	border-radius: var(--mantine-radius-md);
 }
-.companyMetrics {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
-	gap: var(--mantine-spacing-lg);
-}
-.companyMetrics > div {
-	padding: var(--mantine-spacing-sm);
-	background: var(--wl-color-subtle);
-	border-radius: var(--mantine-radius-md);
-}
-@media (max-width: 48em) {
-	.companyMetrics {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-}

src/pages/stock/ui/StockPage/StockPage.view.tsx

@@ -2,7 +2,6 @@ import type { FC } from "react";
 
 import {
 	Alert,
-	Badge,
 	Button,
 	Group,
 	Skeleton,
@@ -13,7 +12,10 @@ import { LoadingSkeleton } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
 import {
+	instrumentDetailsStyles,
 	InstrumentHeader,
+	InstrumentMetric,
+	InstrumentQuoteStatus,
 	InstrumentChart as StockChart,
 	InstrumentEvents as StockEvents,
 	InstrumentPosition as StockPosition,
@@ -23,7 +25,6 @@ import {
 	formatDate,
 	formatDecimal,
 	formatMoney,
-	formatSnapshotTime,
 } from "@/shared/lib";
 
 import type { StockPageVm } from "./StockPage.vm";
@@ -31,6 +32,16 @@ import type { StockPageVm } from "./StockPage.vm";
 import { StockDividends } from "./components/StockDividends.view";
 import classes from "./StockPage.module.css";
 
+const compactMetricFormatter = new Intl.NumberFormat("ru-RU", {
+	maximumFractionDigits: 2,
+	notation: "compact",
+});
+
+const metricFormatter = new Intl.NumberFormat("ru-RU", {
+	maximumFractionDigits: 2,
+	notation: "standard",
+});
+
 type StockPageViewProps = { vm: StockPageVm };
 
 const StockPageView: FC<StockPageViewProps> = (props) => {
@@ -64,13 +75,13 @@ const StockPageView: FC<StockPageViewProps> = (props) => {
 	else {
 		quoteContent = (
 			<div aria-live="polite">
-				<Text className={classes.price} mt="lg">
+				<Text className={instrumentDetailsStyles.price} mt="lg">
 					{formatMoney(vm.quote?.price)}
 				</Text>
 
 				{!!vm.quote?.change && (
 					<Text className={appearanceClass} fw={600}>
-						{vm.quote?.change?.value.startsWith("-") ? "" : "+"}
+						{vm.quote.change.value.startsWith("-") ? "" : "+"}
 
 						{formatMoney(vm.quote.change)}
 
@@ -95,19 +106,7 @@ const StockPageView: FC<StockPageViewProps> = (props) => {
 						)}
 
 				<Group gap="sm" mt="sm">
-					<Badge color="gray" variant="light">
-						{t(`stock.trading.${vm.quote?.tradingStatus}`, {
-							defaultValue: t("stock.trading.unknown"),
-						})}
-					</Badge>
-
-					{!!vm.quote?.priceAt && (
-						<Text c="dimmed" size="xs">
-							{t("stock.priceAt", {
-								date: formatSnapshotTime(vm.quote.priceAt),
-							})}
-						</Text>
-					)}
+					<InstrumentQuoteStatus quote={vm.quote} />
 				</Group>
 
 				{!!vm.quote?.unavailable.length && (
@@ -130,25 +129,16 @@ const StockPageView: FC<StockPageViewProps> = (props) => {
 	if (vm.company) {
 		if (vm.company.metrics.length > 0) {
 			companyMetricsContent = (
-				<div className={classes.companyMetrics}>
-					{vm.company.metrics.map(metric => (
-						<div key={metric.key}>
-							<Text c="dimmed" size="xs">
-								{t(`stock.metrics.${metric.key}`)}
+				<div className={instrumentDetailsStyles.metricsGrid}>
+					{vm.company.metrics.map((metric) => {
+						const label = [t(`stock.metrics.${metric.key}`), metric.period].filter(Boolean).join(" · ");
+						const formatter = metric.unit === "money" ? compactMetricFormatter : metricFormatter;
+						const value = `${formatter.format(metric.value)} ${metricUnit(metric, t("stock.currencyUnknown"))}`;
 
-								{metric.period ? ` · ${metric.period}` : ""}
-							</Text>
-
-							<Text fw={600} size="lg">
-								{new Intl.NumberFormat("ru-RU", {
-									maximumFractionDigits: 2,
-									notation:
-														metric.unit === "money" ? "compact" : "standard",
-								}).format(metric.value)}{" "}
-								{metricUnit(metric, t("stock.currencyUnknown"))}
-							</Text>
-						</div>
-					))}
+						return (
+							<InstrumentMetric key={metric.key} label={label} value={value} />
+						);
+					})}
 				</div>
 			);
 		}
@@ -158,7 +148,7 @@ const StockPageView: FC<StockPageViewProps> = (props) => {
 	}
 
 	return (
-		<Stack className={classes.page} gap="lg">
+		<Stack className={instrumentDetailsStyles.page} gap="lg">
 			<InstrumentHeader
 				logoSrc={vm.logoSrc}
 				name={stock.name}

src/pages/stocks/ui/StocksPage/StocksPage.vm.ts

@@ -20,7 +20,7 @@ function useStocksPageVm() {
 			result.data?.map(stock => ({
 				...stock,
 				logoSrc: instrumentLogoUrl(stock.logoName),
-				to: `/stocks/${encodeURIComponent(stock.slug ?? stock.instrumentUid)}`,
+				to: `/stocks/${encodeURIComponent(stock.slug)}`,
 			})) ?? [],
 		loading:
 			canSearch

src/shared/api/authenticated-query.test.tsx

@@ -51,7 +51,7 @@ describe("useAuthenticatedQuery", () => {
 
 			await new Promise(resolve => setTimeout(resolve, 0));
 			expect(requests).not.toHaveBeenCalled();
-			expect(result.current.fetchStatus).toBe("idle");
+			expect(result.current?.fetchStatus).toBe("idle");
 
 			configureAuthClient({
 				accessToken: () => "token",
@@ -59,9 +59,9 @@ describe("useAuthenticatedQuery", () => {
 				refresh: () => Promise.resolve(true),
 			});
 
-			await waitFor(() => expect(result.current.isSuccess).toBe(true));
+			await waitFor(() => expect(result.current?.isSuccess).toBe(true));
 			expect(requests).toHaveBeenCalledOnce();
-			expect(result.current.data?.data).toEqual([
+			expect(result.current?.data?.data).toEqual([
 				{
 					id: "account-1",
 					name: "Основной",

src/shared/lib/calendar.ts

@@ -9,13 +9,15 @@ function isValidPeriod(from: null | string, to: null | string) {
 	);
 }
 
+const moscowFormatter = new Intl.DateTimeFormat("en-CA", {
+	day: "2-digit",
+	month: "2-digit",
+	timeZone: "Europe/Moscow",
+	year: "numeric",
+});
+
 function moscowDate(value: Date): string {
-	const parts = new Intl.DateTimeFormat("en-CA", {
-		day: "2-digit",
-		month: "2-digit",
-		timeZone: "Europe/Moscow",
-		year: "numeric",
-	}).formatToParts(value);
+	const parts = moscowFormatter.formatToParts(value);
 
 	const part = (type: string) =>
 		parts.find(item => item.type === type)?.value;

src/shared/lib/display.ts

@@ -7,17 +7,19 @@ type FormatMoneyOptions = {
 
 type Money = { currency: string; value: string };
 
+const dateFormatter = new Intl.DateTimeFormat("ru-RU", {
+	day: "2-digit",
+	month: "2-digit",
+	timeZone: "UTC",
+	year: "numeric",
+});
+
 function formatDate(value: string): string {
-	return new Intl.DateTimeFormat("ru-RU", {
-		day: "2-digit",
-		month: "2-digit",
-		timeZone: "UTC",
-		year: "numeric",
-	}).format(new Date(value));
+	return dateFormatter.format(new Date(value));
 }
 
 function formatDecimal(value: string): string {
-	const [integer, fraction] = value.split(".", DECIMAL_PART_COUNT);
+	const [integer = "", fraction] = value.split(".", DECIMAL_PART_COUNT);
 	const sign = integer.startsWith("-") ? "-" : "";
 	const digits = sign ? integer.slice(1) : integer;
 	const groupSize = 3;
@@ -41,7 +43,7 @@ function formatMoney(
 ): string {
 	if (!money) return "—";
 
-	const [integerPart, fractionPart = ""] = money.value.split(
+	const [integerPart = "", fractionPart = ""] = money.value.split(
 		".",
 		DECIMAL_PART_COUNT,
 	);
@@ -59,20 +61,22 @@ function formatMoney(
 	return `${formatDecimal(decimal)} ${currency}`;
 }
 
+const snapshotFormatter = new Intl.DateTimeFormat("ru-RU", {
+	dateStyle: "short",
+	timeStyle: "short",
+	timeZone: "UTC",
+});
+
 function formatSnapshotTime(value: string): string {
-	return new Intl.DateTimeFormat("ru-RU", {
-		dateStyle: "short",
-		timeStyle: "short",
-		timeZone: "UTC",
-	}).format(new Date(value));
+	return snapshotFormatter.format(new Date(value));
 }
 
 const logoSize = 160;
 
+const chartFormatter = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 4 });
+
 function formatChartValue(value: number) {
-	return new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 4 }).format(
-		value,
-	);
+	return chartFormatter.format(value);
 }
 
 function instrumentLogoUrl(logoName?: null | string): null | string {

src/shared/theme/Foundations.stories.tsx

@@ -61,14 +61,13 @@ const ColorsView: FC = () => {
 				))}
 			</SimpleGrid>
 
-			{Object.keys(designTokens.color.palettes).map(palette => (
+			{Object.entries(designTokens.color.palettes).map(([palette, colors]) => (
 				<Stack gap="xs" key={palette}>
 					<Title order={2}>{palette}</Title>
 
 					<SimpleGrid cols={{ base: 2, lg: 10, sm: 5 }}>
 						{
-							// eslint-disable-next-line security/detect-object-injection -- This is a positional index into the local array, not a user-supplied object key.
-							theme.colors[palette].map((value, shade) => (
+							colors.map((value, shade) => (
 								<Paper key={value} p="xs" withBorder>
 									<Box aria-hidden="true" bg={value} h={40} />
 

src/shared/theme/contrast.test.ts

@@ -1,14 +1,22 @@
 import tokens from "@wealthledger/tokens/tokens.json";
-import { describe, expect, it } from "vitest";
+import { assert, describe, expect, it } from "vitest";
 
 function luminance(color: string) {
-	const channels = [1, 3, 5]
-		.map(index => Number.parseInt(color.slice(index, index + 2), 16) / 255)
-		.map(value =>
-			value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4,
-		);
+	let result = 0;
 
-	return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+	for (const [index, weight] of [0.2126, 0.7152, 0.0722].entries()) {
+		const channel = Number.parseInt(
+			color.slice(1 + index * 2, 3 + index * 2), 16,
+		) / 255;
+
+		const linear = channel <= 0.04045
+			? channel / 12.92
+			: ((channel + 0.055) / 1.055) ** 2.4;
+
+		result += linear * weight;
+	}
+
+	return result;
 }
 
 describe("semantic text contrast", () => {
@@ -24,6 +32,8 @@ describe("semantic text contrast", () => {
 			const foreground
 				= palettes[role.color as keyof typeof palettes][role.shade];
 
+			assert.isDefined(foreground);
+
 			const surfaces = [
 				"#ffffff",
 				palettes.gray[0],
@@ -34,25 +44,31 @@ describe("semantic text contrast", () => {
 				...Object.entries(palettes)
 					.filter(([name]) => name !== "dark")
 					.map(
-						([, palette]) =>
-							`#${[1, 3, 5]
+						([, palette]) => {
+							const base = palette[0];
+							assert.isDefined(base);
+
+							return `#${[1, 3, 5]
 								.map(index =>
 									Math.round(
-										Number.parseInt(palette[0].slice(index, index + 2), 16)
+										Number.parseInt(base.slice(index, index + 2), 16)
 										* 0.45
 										+ 255 * 0.55,
 									)
 										.toString(16)
 										.padStart(2, "0"),
 								)
-								.join("")}`,
+								.join("")}`;
+						},
 					),
 			];
 
-			for (const background of surfaces)
+			for (const background of surfaces) {
+				assert.isDefined(background);
 				expect(
 					(luminance(background) + 0.05) / (luminance(foreground) + 0.05),
 				).toBeGreaterThanOrEqual(4.5);
+			}
 		},
 	);
 });