refactor: simplify auth and instrument pages

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

@@ -2,20 +2,18 @@ import type { FC } from "react";
 
 import {
 	Alert,
-	Avatar,
 	Badge,
 	Button,
 	Group,
-	Paper,
 	Skeleton,
 	Stack,
 	Text,
-	Title,
 } from "@mantine/core";
 import { LoadingSkeleton } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
 import {
+	InstrumentHeader,
 	InstrumentChart as StockChart,
 	InstrumentEvents as StockEvents,
 	InstrumentPosition as StockPosition,
@@ -30,7 +28,7 @@ import {
 
 import type { StockPageVm } from "./StockPage.vm";
 
-import { StockDividends } from "./components/StockEvents.view";
+import { StockDividends } from "./components/StockDividends.view";
 import classes from "./StockPage.module.css";
 
 type StockPageViewProps = { vm: StockPageVm };
@@ -41,6 +39,15 @@ const StockPageView: FC<StockPageViewProps> = (props) => {
 	const stock = vm.stock;
 	if (!stock) return;
 
+	const subtitle = (
+		<>
+			{stock.ticker} ·{" "}
+			{t(`stock.shareTypes.${stock.shareType}`, {
+				defaultValue: t("stock.share"),
+			})}
+		</>
+	);
+
 	const appearanceClass = vm.quote?.change?.value.startsWith("-")
 		? classes.negative
 		: classes.positive;
@@ -152,41 +159,13 @@ const StockPageView: FC<StockPageViewProps> = (props) => {
 
 	return (
 		<Stack className={classes.page} gap="lg">
-			<Paper className={classes.section} component="header" withBorder>
-				<Group align="start" justify="space-between">
-					<div className={classes.identity}>
-						<Avatar
-							alt=""
-							key={vm.logoSrc}
-							radius="md"
-							size={56}
-							src={vm.logoSrc}
-						>
-							{stock.name[0]}
-						</Avatar>
-
-						<div>
-							<Title order={1} size="h2">
-								{stock.name}
-							</Title>
-
-							<Text c="dimmed" size="sm">
-								{stock.ticker} ·{" "}
-								{t(`stock.shareTypes.${stock.shareType}`, {
-									defaultValue: t("stock.share"),
-								})}
-							</Text>
-						</div>
-					</div>
-
-					<Button
-						disabled={vm.refreshing}
-						onClick={vm.refresh}
-						variant="subtle"
-					>
-						{t("investment.refresh")}
-					</Button>
-				</Group>
+			<InstrumentHeader
+				logoSrc={vm.logoSrc}
+				name={stock.name}
+				onRefresh={vm.refresh}
+				refreshing={vm.refreshing}
+				subtitle={subtitle}
+			>
 
 				{!!vm.company?.description && (
 					<Text mt="md" size="sm" style={{ whiteSpace: "pre-line" }}>
@@ -246,13 +225,18 @@ const StockPageView: FC<StockPageViewProps> = (props) => {
 						</Stack>
 					)}
 				</StockSection>
-			</Paper>
+			</InstrumentHeader>
 
 			<StockChart vm={vm} />
 
 			<StockPosition vm={vm} />
 
-			<StockDividends vm={vm} />
+			<StockDividends
+				dividends={vm.dividends}
+				pastDividends={vm.pastDividends}
+				state={vm.dividendsState}
+				upcoming={vm.upcoming}
+			/>
 
 			<StockEvents vm={vm} />
 		</Stack>