feat(investments): warn and offer retry after exhausted read retries (WealthLedger/frontend#55) (#136)

src/pages/account/ui/AccountPage/components/AccountPageEmpty.view.tsx

@@ -8,7 +8,7 @@ import type { BrokerageAccount } from "@/entities/brokerage-account";
 import type { InvestmentResourceMeta } from "@/shared/api";
 
 import { BrokerageEventsPreview } from "@/entities/brokerage-event";
-import { SourceSyncStatus } from "@/shared/ui";
+import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
 import { PortfolioStructure } from "@/widgets/portfolio-structure";
 
 import type {
@@ -25,6 +25,7 @@ type AccountPageEmptyProps = {
 	account?: BrokerageAccount;
 	accountId?: string;
 	incomeSummary?: AccountPageIncomeSummary;
+	readRetry?: ReadRetryProps;
 	recentEvents: AccountPageRecentEvents;
 	recentOperations: AccountPageRecentOperations;
 	source?: InvestmentResourceMeta;
@@ -49,6 +50,8 @@ const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
 				stale={props.source?.freshness === "stale"}
 			/>
 
+			{!!props.readRetry && <ReadRetry {...props.readRetry} />}
+
 			<StateView text={text} title={t("portfolio.emptyTitle")} />
 
 			<PortfolioStructure

src/pages/account/ui/AccountPage/components/AccountPageError.view.tsx

@@ -6,8 +6,12 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
 import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
+import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";
 
-type AccountPageErrorProps = { code?: string };
+type AccountPageErrorProps = {
+	code?: string;
+	readRetry?: ReadRetryProps;
+};
 
 const AccountPageError: FC<AccountPageErrorProps> = (props) => {
 	const { code } = props;
@@ -43,8 +47,18 @@ const AccountPageError: FC<AccountPageErrorProps> = (props) => {
 			/>
 		);
 
+	const retry = props.readRetry?.exhausted
+		? (
+				<ReadRetryButton
+					onRetry={props.readRetry.onRetry}
+					retrying={props.readRetry.retrying}
+				/>
+			)
+		: undefined;
+
 	return (
 		<StateView
+			action={retry}
 			text={t("states.unavailableText")}
 			title={t("states.unavailableTitle")}
 		/>

src/pages/account/ui/AccountPage/components/AccountPageLoaded.view.tsx

@@ -15,7 +15,7 @@ import type { InvestmentResourceMeta } from "@/shared/api";
 
 import { BrokerageEventsPreview } from "@/entities/brokerage-event";
 import { formatMoney } from "@/shared/lib";
-import { SourceSyncStatus } from "@/shared/ui";
+import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
 import { PortfolioStructure } from "@/widgets/portfolio-structure";
 
 import type { Concentration as ConcentrationModel, Slice } from "../../../model/concentration";
@@ -46,6 +46,7 @@ type AccountPageLoadedProps = {
 	partial?: boolean;
 	portfolio: Portfolio;
 	positionSections: AccountPagePositionSection[];
+	readRetry?: ReadRetryProps;
 	recentEvents: AccountPageRecentEvents;
 	recentOperations: AccountPageRecentOperations;
 	slice: Slice;
@@ -86,6 +87,8 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 				stale={props.source?.freshness === "stale"}
 			/>
 
+			{!!props.readRetry && <ReadRetry {...props.readRetry} />}
+
 			{props.partial
 				? tab !== "concentration" && (
 					<Alert role="status">{t("investment.partial")}</Alert>