ksv741
5b30bb802a
Part of the quiet-user-feedback change; docs and specs land in their own repositories.
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Anchor, Skeleton, Stack, Text, Title } from "@mantine/core";
|
|
import { LoadingSkeleton } from "@wealthledger/ui";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router";
|
|
|
|
import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
|
|
|
|
type InstrumentPageStateProps = {
|
|
code?: string;
|
|
kind: "bond" | "stock";
|
|
loading: boolean;
|
|
};
|
|
|
|
const InstrumentPageState: FC<InstrumentPageStateProps> = (props) => {
|
|
const { code, kind, loading } = props;
|
|
const { t } = useTranslation();
|
|
if (loading) return (
|
|
<LoadingSkeleton label={t(`${kind}.loading`)}>
|
|
<Stack>
|
|
<Skeleton h={110} />
|
|
|
|
<Skeleton h={350} />
|
|
|
|
<Skeleton h={170} />
|
|
</Stack>
|
|
</LoadingSkeleton>
|
|
);
|
|
|
|
const ambiguousCode = kind === "stock"
|
|
? ApiErrorCode.StockTickerAmbiguous
|
|
: ApiErrorCode.BondTickerAmbiguous;
|
|
|
|
let message = t(`${kind}.unavailableText`);
|
|
if (isApiErrorCode(code, ambiguousCode))
|
|
message = t(`${kind}.ambiguousTicker`);
|
|
if (
|
|
isApiErrorCode(code, ApiErrorCode.TbankNotConnected)
|
|
|| isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
|
|
)
|
|
message = t(`${kind}.connect`);
|
|
|
|
return (
|
|
<Stack role="alert">
|
|
<Title order={1}>{t(`${kind}.unavailable`)}</Title>
|
|
|
|
<Text>{message}</Text>
|
|
|
|
<Anchor component={Link} to={`/${kind}s`}>
|
|
{t(`${kind}.backToSearch`)}
|
|
</Anchor>
|
|
|
|
<Anchor component={Link} to="/settings">
|
|
{t("accounts.openSettings")}
|
|
</Anchor>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { InstrumentPageState };
|