59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { Avatar, Paper, Stack, Text } from "@mantine/core";
|
|
import type { FC } from "react";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { formatSnapshotTime, instrumentLogoUrl } from "@/shared/lib";
|
|
import type { BrokerageOperation } from "../api/useBrokerageOperations";
|
|
import { paymentPresentation } from "../model/display";
|
|
import classes from "./LedgerEntryRow.module.css";
|
|
|
|
type LedgerEntryRowProps = {
|
|
operation: BrokerageOperation;
|
|
};
|
|
|
|
const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
|
|
const { operation } = props;
|
|
const { t } = useTranslation();
|
|
const [imageFailed, setImageFailed] = useState(false);
|
|
const instrument =
|
|
operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument");
|
|
const logoSrc = imageFailed ? null : instrumentLogoUrl(operation.logoName);
|
|
const payment = paymentPresentation(operation);
|
|
const metadata = [formatSnapshotTime(operation.occurredAt), instrument].join(
|
|
" · ",
|
|
);
|
|
|
|
return (
|
|
<Paper className={classes.row} withBorder>
|
|
<Avatar
|
|
alt=""
|
|
aria-hidden="true"
|
|
radius="md"
|
|
size={40}
|
|
src={logoSrc}
|
|
onError={() => setImageFailed(true)}
|
|
>
|
|
{(instrument.trim()[0] ?? "?").toUpperCase()}
|
|
</Avatar>
|
|
<Stack className={classes.identity} gap={2}>
|
|
<Text fw={700} lineClamp={1}>
|
|
{operation.description || operation.type}
|
|
</Text>
|
|
<Text c="dimmed" size="sm">
|
|
{metadata}
|
|
</Text>
|
|
</Stack>
|
|
<Stack className={classes.amount} gap={2}>
|
|
<Text className={classes[payment.tone]} fw={700}>
|
|
{payment.amount}
|
|
</Text>
|
|
<Text className={classes[payment.tone]} size="sm">
|
|
{t(payment.label)}
|
|
</Text>
|
|
</Stack>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
export { LedgerEntryRow };
|