From f12e93bb2adf59a534b980f89765cd0de4025b15 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Thu, 8 Jan 2026 14:00:10 +0100 Subject: [PATCH] chore(orderbook): human readable duration --- src/components/Orderbook.tsx | 48 ++++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/src/components/Orderbook.tsx b/src/components/Orderbook.tsx index 6f860a33..f4df0e52 100644 --- a/src/components/Orderbook.tsx +++ b/src/components/Orderbook.tsx @@ -11,6 +11,7 @@ import { type ColumnDef, useReactTable, } from '@tanstack/react-table' +import type { i18n } from 'i18next' import { ChevronDownIcon, ChevronUpIcon, @@ -32,6 +33,7 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' import { JM_DUST_THRESHOLD } from '@/constants/jm' import { fetchOrderbook, refreshOrderbook, type OrderbookOffer, type OrderbookFidelityBond } from '@/lib/api/orderbook' +//import { withQueryDelay } from '@/lib/queryClient' import { cn, factorToPercentage, @@ -52,26 +54,26 @@ import { Label } from './ui/label' const ITEMS_PER_PAGE = 25 interface OrderTableEntry { - counterparty: string - orderId: string + counterparty: string // example: "J5Bv3JSxPFWm2Yjb" + orderId: string // example: "0" (not unique!) type: { - value: string - displayValue: string - badgeColor: 'default' | 'secondary' - tooltip?: string - isAbsolute?: boolean - isRelative?: boolean + value: string // original value, example: 'sw0reloffer', 'swreloffer', 'reloffer', 'sw0absoffer', 'swabsoffer', 'absoffer' + displayValue: string // example: "absolute" or "relative" (respecting i18n) + badgeColor: Parameters[0]['variant'] + tooltip?: 'Native SW Absolute Fee' | 'Native SW Relative Fee' | string + isAbsolute: boolean + isRelative: boolean } fee: { value: number - displayValue: string + displayValue: string // example: "250" (abs offers) or "0.000100%" (rel offers) } - minerFeeContribution: string - minimumSize: string - maximumSize: string + minerFeeContribution: string // example: "0" + minimumSize: string // example: "27300" + maximumSize: string // example: "237499972700" bondValue: { value: number - displayValue: string + displayValue: string // example: "0" (no fb) or "114557102085.28133" locktime?: number displayLocktime?: string displayExpiresIn?: string @@ -92,7 +94,7 @@ type SortKey = const offerToTableEntry = ( offer: OrderbookOffer, fidelityBond: OrderbookFidelityBond | undefined, - t: (key: string, options?: Record) => string, + i18n: i18n, ): OrderTableEntry => { const isAbs = isAbsoluteOffer(offer.ordertype) const isRel = isRelativeOffer(offer.ordertype) @@ -102,14 +104,18 @@ const offerToTableEntry = ( orderId: String(offer.oid), type: { value: offer.ordertype, - displayValue: isAbs ? t('orderbook.text_offer_type_absolute') : t('orderbook.text_offer_type_relative'), - badgeColor: isAbs ? 'default' : 'secondary', + displayValue: isAbs + ? i18n.t('orderbook.text_offer_type_absolute') + : isRel + ? i18n.t('orderbook.text_offer_type_relative') + : offer.ordertype, + badgeColor: isAbs ? 'default' : isRel ? 'secondary' : 'outline', tooltip: offer.ordertype === 'sw0absoffer' ? 'Native SW Absolute Fee' : offer.ordertype === 'sw0reloffer' ? 'Native SW Relative Fee' - : offer.ordertype, + : undefined, isAbsolute: isAbs, isRelative: isRel, }, @@ -135,7 +141,7 @@ const offerToTableEntry = ( locktime: fidelityBond?.locktime, displayLocktime: fidelityBond?.locktime ? new Date(fidelityBond.locktime * 1_000).toDateString() : undefined, displayExpiresIn: fidelityBond?.locktime - ? humanReadableDuration({ to: fidelityBond.locktime * 1000 }) + ? humanReadableDuration({ to: fidelityBond.locktime * 1_000, locale: i18n.resolvedLanguage || i18n.language }) : undefined, amount: fidelityBond?.amount, }, @@ -147,7 +153,7 @@ interface OrderbookProps { } export const Orderbook = ({ isModal = false }: OrderbookProps) => { - const { t } = useTranslation() + const { t, i18n } = useTranslation() const jmSessionState = useStore(jmSessionStore, (state) => state.state) const nickname = useMemo(() => jmSessionState?.nickname, [jmSessionState]) @@ -225,8 +231,8 @@ export const Orderbook = ({ isModal = false }: OrderbookProps) => { fidelityBondsMap.set(bond.counterparty, bond) }) - return allOffers.map((offer) => offerToTableEntry(offer, fidelityBondsMap.get(offer.counterparty), t)) - }, [orderbookData, demoOffers, t]) + return allOffers.map((offer) => offerToTableEntry(offer, fidelityBondsMap.get(offer.counterparty), i18n)) + }, [orderbookData, demoOffers, i18n]) const ownOffers = useMemo(() => { return nickname ? tableEntries.filter((it) => it.counterparty === nickname) : []