diff --git a/src/components/orderbook/OrderbookContent.tsx b/src/components/orderbook/OrderbookContent.tsx index bd437eb0..9571ea80 100644 --- a/src/components/orderbook/OrderbookContent.tsx +++ b/src/components/orderbook/OrderbookContent.tsx @@ -20,6 +20,7 @@ import { import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Switch } from '@/components/ui/switch' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { JM_DUST_THRESHOLD } from '@/constants/jm' import * as OrderbookApi from '@/lib/api/orderbook' import type { OrderbookOffer, OrderbookFidelityBond } from '@/lib/api/orderbook' @@ -63,16 +64,16 @@ const offerToTableEntry = ( fee: typeof offer.cjfee === 'number' ? { - value: offer.cjfee, - displayValue: String(offer.cjfee), - } - : (() => { - const value = Number.parseFloat(offer.cjfee || '0') - return { - value, - displayValue: factorToPercentage(value).toFixed(4) + '%', + value: offer.cjfee, + displayValue: String(offer.cjfee), } - })(), + : (() => { + const value = Number.parseFloat(offer.cjfee || '0') + return { + value, + displayValue: factorToPercentage(value).toFixed(4) + '%', + } + })(), minerFeeContribution: String(offer.txfee || 0), minimumSize: String(offer.minsize || 0), maximumSize: String(offer.maxsize || 0), @@ -83,9 +84,9 @@ const offerToTableEntry = ( displayLocktime: fidelityBond?.locktime ? new Date(fidelityBond.locktime * 1_000).toDateString() : undefined, displayExpiresIn: fidelityBond?.locktime ? time.humanReadableDuration({ - to: fidelityBond.locktime * 1_000, - locale: i18n.resolvedLanguage || i18n.language, - }) + to: fidelityBond.locktime * 1_000, + locale: i18n.resolvedLanguage || i18n.language, + }) : undefined, amount: fidelityBond?.amount, }, @@ -201,8 +202,10 @@ export const OrderbookContent = ({ enabled, className }: OrderbookContentProps) const counterpartyBonds = new Map() for (const offer of entries) { - const previous = counterpartyBonds.get(offer.counterparty) ?? 0 - if (offer.bondValue.value > previous) counterpartyBonds.set(offer.counterparty, offer.bondValue.value) + const previous = counterpartyBonds.get(offer.counterparty) + if (previous === undefined || offer.bondValue.value > previous) { + counterpartyBonds.set(offer.counterparty, offer.bondValue.value) + } } const bondedMakers = [...counterpartyBonds.values()].filter((v) => v > 0).length @@ -370,39 +373,55 @@ export const OrderbookContent = ({ enabled, className }: OrderbookContentProps) {t('orderbook.market_summary_title')} - - {marketSummary.medianAbsFee !== null && ( -

- {t('orderbook.market_summary_median_abs_fee_label')}: - -

- )} - {marketSummary.medianRelFee !== null && ( -

- {t('orderbook.market_summary_median_rel_fee', { - value: factorToPercentage(marketSummary.medianRelFee).toFixed(4), - })} -

- )} -

- {t('orderbook.market_summary_total_liquidity_label')}: - -

-

- {t('orderbook.market_summary_offer_min_size_label')}: - - - -

-

- {t('orderbook.market_summary_bonded_makers', { - bonded: marketSummary.bondedMakers, - unbonded: marketSummary.unbondedMakers, - })} -

-
- r.original)} /> + + + + {t('orderbook.tab_summary')} + + + {t('orderbook.tab_charts')} + + + + +
+ {marketSummary.medianAbsFee !== null && ( +

+ {t('orderbook.market_summary_median_abs_fee_label')}: + +

+ )} + {marketSummary.medianRelFee !== null && ( +

+ {t('orderbook.market_summary_median_rel_fee', { + value: factorToPercentage(marketSummary.medianRelFee).toFixed(4), + })} +

+ )} +

+ {t('orderbook.market_summary_total_liquidity_label')}: + +

+

+ {t('orderbook.market_summary_offer_min_size_label')}: + + + +

+

+ {t('orderbook.market_summary_bonded_makers', { + bonded: marketSummary.bondedMakers, + unbonded: marketSummary.unbondedMakers, + })} +

+
+
+ + + r.original)} /> + +
)} diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json index c2bec4db..a8a61073 100644 --- a/src/i18n/locales/en/translation.json +++ b/src/i18n/locales/en/translation.json @@ -762,6 +762,8 @@ "market_summary_total_liquidity_label": "Total liquidity", "market_summary_offer_min_size_label": "Offer size range", "market_summary_bonded_makers": "{{ bonded }} bonded / {{ unbonded }} unbonded makers", + "tab_summary": "Summary", + "tab_charts": "Charts", "chart_title": "Fee Distribution (absolute offers)", "chart_tooltip_offers_one": "{{ count }} offer", "chart_tooltip_offers_other": "{{ count }} offers", @@ -893,4 +895,4 @@ "subtitle_other": "The selected UTXOs are eligible for inclusion in the transaction.", "text_subtitle_addon": "Unselected UTXOs will be frozen and can be unfrozen later anytime." } -} \ No newline at end of file +}