36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import type { FC } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { formatSnapshotTime, instrumentLogoUrl } from "@/shared/lib";
|
|
import { EntryCard } from "@/shared/ui";
|
|
import type { BrokerageOperation } from "../api/useBrokerageOperations";
|
|
import { paymentPresentation } from "../model/display";
|
|
|
|
type LedgerEntryRowProps = {
|
|
operation: BrokerageOperation;
|
|
};
|
|
|
|
const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
|
|
const { operation } = props;
|
|
const { t } = useTranslation();
|
|
const instrument =
|
|
operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument");
|
|
const payment = paymentPresentation(operation);
|
|
const metadata = [formatSnapshotTime(operation.occurredAt), instrument].join(
|
|
" · ",
|
|
);
|
|
|
|
return (
|
|
<EntryCard
|
|
title={operation.description || operation.type}
|
|
metadata={metadata}
|
|
initial={(instrument.trim()[0] ?? "?").toUpperCase()}
|
|
imageSrc={instrumentLogoUrl(operation.logoName)}
|
|
value={payment.amount}
|
|
valueLabel={t(payment.label)}
|
|
tone={payment.tone}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export { LedgerEntryRow };
|