refactor: tighten types and reuse instrument UI

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)}
 					/>