refactor: tighten types and reuse instrument UI

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>