refactor: enforce frontend view model boundaries

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

@@ -1,5 +1,6 @@
 import type { FC } from "react";
 
+import { ContactlessIcon } from "@wealthledger/icons";
 import { useTranslation } from "react-i18next";
 
 import { formatMoney } from "@/shared/lib";
@@ -9,51 +10,46 @@ import type { BankCard } from "../../api/queries";
 import classes from "./BankCardFace.module.css";
 
 type BankCardFaceProps = { card: BankCard };
+
 const BankCardFace: FC<BankCardFaceProps> = (props) => {
 	const { card } = props;
 	const { t } = useTranslation();
 	const bank = card.bankName?.toLocaleLowerCase("ru") ?? "";
 	const tone = bankTone(bank);
+
 	return (
 		<div className={classes.face} data-tone={tone}>
 			<div className={classes.top}>
 				<span className={classes.bank}>{card.bankName || t("bank.card")}</span>
+
 				{card.archivedAt && (
 					<span className={classes.archive}>{t("bank.archived")}</span>
 				)}
 			</div>
+
 			<div aria-hidden="true" className={classes.hardware}>
 				<span className={classes.chip} />
-				<svg
-					aria-hidden="true"
-					fill="none"
-					height="30"
-					viewBox="0 0 24 30"
-					width="24"
-				>
-					<path
-						d="M7 11a8 8 0 0 1 0 8m5-12a15 15 0 0 1 0 16m5-20a23 23 0 0 1 0 24"
-						stroke="currentColor"
-						strokeLinecap="round"
-						strokeWidth="2"
-					/>
-				</svg>
+
+				<ContactlessIcon height="30" viewBox="0 0 24 30" />
 			</div>
-			<div
-				className={classes.number}
-			>
+
+			<div className={classes.number}>
 				{`•••• •••• •••• ${card.lastFour || "••••"}`}
 			</div>
+
 			<div className={classes.bottom}>
 				<div className={classes.details}>
 					<div className={classes.name}>{card.name}</div>
+
 					<div className={classes.balance}>{formatMoney(card.balance)}</div>
 				</div>
+
 				{card.paymentSystem && (
 					<span className={classes.network} data-network={card.paymentSystem}>
 						{card.paymentSystem === "mastercard" && (
 							<span aria-hidden="true" className={classes.circles} />
 						)}
+
 						{t(`bank.paymentSystems.${card.paymentSystem}`)}
 					</span>
 				)}
@@ -66,6 +62,7 @@ function bankTone(bank: string) {
 	if (/сбер|sber/.test(bank)) return "green";
 	if (/тинькофф|т[ -]?банк|t[ -]?bank|tinkoff/.test(bank)) return "yellow";
 	if (/альфа|alfa/.test(bank)) return "red";
+
 	return /втб|vtb|газпром|gazprom/.test(bank) ? "blue" : "graphite";
 }