diff --git a/src/components/sweep/SweepPreconditionAlert.tsx b/src/components/sweep/SweepPreconditionAlert.tsx
index afb1440e..fc5c6eb5 100644
--- a/src/components/sweep/SweepPreconditionAlert.tsx
+++ b/src/components/sweep/SweepPreconditionAlert.tsx
@@ -1,97 +1,10 @@
-import { AlertTriangleIcon } from 'lucide-react'
-import { Trans, useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
import type { SweepPreconditionSummary } from '@/components/sweep/preconditions'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { Balance } from '@/components/ui/jam/Balance'
-import { JAM_JM_RETRIES_DOCS_URL } from '@/constants/jam'
-import { routes } from '@/constants/routes'
-import { shortenStringMiddle } from '@/lib/utils'
-import { JarBadge } from '../earn/fidelity-bond/FidelityBondDialogParts'
+import { PreconditionAlert } from '@/components/ui/jam/PreconditionAlert'
interface SweepPreconditionAlertProps {
summary: SweepPreconditionSummary
}
-const RetryLockedUtxoList = ({ summary }: SweepPreconditionAlertProps) => {
- const { t } = useTranslation()
-
- return (
- <>
-
- ),
- }}
- />
-
-
{t('global.utxos')}
-
- {summary.retryLockedUtxos.map((utxo) => (
- -
-
-
-
- {shortenStringMiddle(utxo.utxo, 26)}
-
-
- ))}
-
-
-
- )
-}
-
export const SweepPreconditionAlert = ({ summary }: SweepPreconditionAlertProps) => {
- const { t } = useTranslation()
-
- if (summary.isFulfilled) {
- return null
- }
-
- return (
-
-
- {t('scheduler.precondition.title')}
-
-
- {summary.numberOfNonFrozenFidelityBondOutputs === 0 ? null : (
- -
- ,
- }}
- />
-
- )}
- {summary.numberOfMissingUtxos === 0 ? null : (
- -
- {t('scheduler.precondition.hint_missing_utxos', {
- minConfirmations: summary.options.minConfirmations,
- })}
-
- )}
- {summary.numberOfMissingConfirmations === 0 ? null : (
- -
- {t('scheduler.precondition.hint_missing_confirmations', {
- minConfirmations: summary.options.minConfirmations,
- amountOfMissingConfirmations: summary.numberOfMissingConfirmations,
- })}
-
- )}
- {summary.retryLockedUtxos.length === 0 ? null : - {}
}
-
-
-
- )
+ return
}
diff --git a/src/components/ui/button-variants.ts b/src/components/ui/button-variants.ts
index ee782c92..ec705830 100644
--- a/src/components/ui/button-variants.ts
+++ b/src/components/ui/button-variants.ts
@@ -40,6 +40,7 @@ const buttonVariants = cva(
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
'icon-lg': 'size-9',
+ 'icon-xxl': 'size-12',
},
},
defaultVariants: {
diff --git a/src/components/ui/jam/Balance.test.tsx b/src/components/ui/jam/Balance.test.tsx
index b5c8ce40..49d0355a 100644
--- a/src/components/ui/jam/Balance.test.tsx
+++ b/src/components/ui/jam/Balance.test.tsx
@@ -5,6 +5,8 @@ import user from '@testing-library/user-event'
import { describe, it, expect, vi } from 'vitest'
import { Balance } from '@/components/ui/jam/Balance'
import { JamDisplayContextProvider } from '@/context/JamDisplayContextProvider'
+import '@/i18n/config'
+import { withRuntimeLocale } from '@/test/withRuntimeLocale'
const render = (ui: React.ReactNode, options?: Omit
) => {
const providers = ({ children }: { children: React.ReactNode }) => {
@@ -35,11 +37,13 @@ describe('', () => {
})
it('should render balance in SATS', () => {
- render()
- expect(screen.getByTestId('sats-amount')).toHaveTextContent(`12,345,600,000`)
- expect(screen.getByTestId('sats-symbol')).toBeVisible()
- expect(screen.queryByTestId('bitcoin-symbol')).not.toBeInTheDocument()
- expect(screen.queryByTestId('frozen-symbol')).not.toBeInTheDocument()
+ withRuntimeLocale('en-US', () => {
+ render()
+ expect(screen.getByTestId('sats-amount')).toHaveTextContent(`12,345,600,000`)
+ expect(screen.getByTestId('sats-symbol')).toBeVisible()
+ expect(screen.queryByTestId('bitcoin-symbol')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('frozen-symbol')).not.toBeInTheDocument()
+ })
})
it('should render a string BTC value correctly as BTC', () => {
@@ -49,9 +53,11 @@ describe('', () => {
})
it('should render a string BTC value correctly as SATS', () => {
- render()
- expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`12,303,224,961`)
- expect(screen.getByTestId('sats-symbol')).toBeVisible()
+ withRuntimeLocale('en-US', () => {
+ render()
+ expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`12,303,224,961`)
+ expect(screen.getByTestId('sats-symbol')).toBeVisible()
+ })
})
it('should render a zero string BTC value correctly as BTC', () => {
@@ -65,23 +71,31 @@ describe('', () => {
})
it('should render a large string BTC value correctly as BTC', () => {
- render()
- expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`20,999,999.97690000`)
+ withRuntimeLocale('en-US', () => {
+ render()
+ expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`20,999,999.97690000`)
+ })
})
it('should render a large string BTC value correctly as SATS', () => {
- render()
- expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,099,999,997,690,000`)
+ withRuntimeLocale('en-US', () => {
+ render()
+ expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,099,999,997,690,000`)
+ })
})
it('should render a max string BTC value correctly as BTC', () => {
- render()
- expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`21,000,000.00000000`)
+ withRuntimeLocale('en-US', () => {
+ render()
+ expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`21,000,000.00000000`)
+ })
})
it('should render a max string BTC value correctly as SATS', () => {
- render()
- expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,100,000,000,000,000`)
+ withRuntimeLocale('en-US', () => {
+ render()
+ expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,100,000,000,000,000`)
+ })
})
it('should render a string SATS value correctly as SATS', () => {
@@ -105,23 +119,31 @@ describe('', () => {
})
it('should render a large string SATS value correctly as BTC', () => {
- render()
- expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`20,999,999.97690000`)
+ withRuntimeLocale('en-US', () => {
+ render()
+ expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`20,999,999.97690000`)
+ })
})
it('should render a large string SATS value correctly as SATS', () => {
- render()
- expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,099,999,997,690,000`)
+ withRuntimeLocale('en-US', () => {
+ render()
+ expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,099,999,997,690,000`)
+ })
})
it('should render a max string SATS value correctly as BTC', () => {
- render()
- expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`21,000,000.00000000`)
+ withRuntimeLocale('en-US', () => {
+ render()
+ expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`21,000,000.00000000`)
+ })
})
it('should render a max string SATS value correctly as SATS', () => {
- render()
- expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,100,000,000,000,000`)
+ withRuntimeLocale('en-US', () => {
+ render()
+ expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,100,000,000,000,000`)
+ })
})
it('should render frozen balance in BTC', () => {
@@ -132,10 +154,12 @@ describe('', () => {
})
it('should render frozen balance in SATS', () => {
- render()
- expect(screen.getByTestId('sats-amount')).toHaveTextContent(`12,345,600,000`)
- expect(screen.getByTestId('sats-symbol')).toBeVisible()
- expect(screen.getByTestId('frozen-symbol')).toBeVisible()
+ withRuntimeLocale('en-US', () => {
+ render()
+ expect(screen.getByTestId('sats-amount')).toHaveTextContent(`12,345,600,000`)
+ expect(screen.getByTestId('sats-symbol')).toBeVisible()
+ expect(screen.getByTestId('frozen-symbol')).toBeVisible()
+ })
})
it('should render balance without symbol', () => {
@@ -198,4 +222,51 @@ describe('', () => {
expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
expect(screen.queryByText(`*****`)).not.toBeInTheDocument()
})
+
+ it('should render the visibility toggle as a keyboard-focusable button with an accessible name', () => {
+ render()
+
+ const toggleButton = screen.getByRole('button', { name: 'Show balance' })
+ expect(toggleButton).toBeInTheDocument()
+ expect(toggleButton).toHaveAttribute('aria-pressed', 'true')
+ })
+
+ it('should update the accessible name and aria-pressed after toggling', async () => {
+ render()
+
+ await user.click(screen.getByRole('button', { name: 'Show balance' }))
+
+ const toggleButton = screen.getByRole('button', { name: 'Hide balance' })
+ expect(toggleButton).toBeInTheDocument()
+ expect(toggleButton).toHaveAttribute('aria-pressed', 'false')
+ })
+
+ it('should toggle visibility via keyboard (Enter)', async () => {
+ render()
+
+ await user.tab()
+ expect(screen.getByRole('button', { name: 'Show balance' })).toHaveFocus()
+
+ await user.keyboard('{Enter}')
+
+ expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
+ expect(screen.queryByText(`*****`)).not.toBeInTheDocument()
+ })
+
+ it('should toggle visibility via keyboard (Space)', async () => {
+ render()
+
+ await user.tab()
+ expect(screen.getByRole('button', { name: 'Show balance' })).toHaveFocus()
+
+ await user.keyboard(' ')
+
+ expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
+ expect(screen.queryByText(`*****`)).not.toBeInTheDocument()
+ })
+
+ it('should not render a focusable button when the visibility toggle is disabled', () => {
+ render()
+ expect(screen.queryByRole('button')).not.toBeInTheDocument()
+ })
})
diff --git a/src/components/ui/jam/Balance.tsx b/src/components/ui/jam/Balance.tsx
index 11740b9a..c61215cd 100644
--- a/src/components/ui/jam/Balance.tsx
+++ b/src/components/ui/jam/Balance.tsx
@@ -1,5 +1,6 @@
import { useEffect, useMemo, useState, type MouseEvent, type MouseEventHandler, type PropsWithChildren } from 'react'
import { SnowflakeIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
import { CurrencySymbol } from '@/components/ui/jam/CurrencySymbol'
import { useJamDisplayContext } from '@/context/JamDisplayContext'
import { cn, satsToBtc, tryBtcToSat, isValidNumber, getBtcParts, formatSats } from '@/lib/utils'
@@ -23,6 +24,8 @@ type ElementWithSymbolsProps = PropsWithChildren<{
frozenSymbol?: boolean
className?: string
onClick?: MouseEventHandler
+ 'aria-label'?: string
+ 'aria-pressed'?: boolean
}>
const ElementWithSymbols = ({
@@ -33,23 +36,40 @@ const ElementWithSymbols = ({
className,
children,
onClick,
+ 'aria-label': ariaLabel,
+ 'aria-pressed': ariaPressed,
}: ElementWithSymbolsProps) => {
- return (
-
+ const sharedClassName = cn(
+ 'balance-hook inline-flex items-center',
+ {
+ 'text-brand-info': frozen,
+ },
+ className,
+ )
+
+ const content = (
+ <>
{children}
{showSymbol && symbol}
{frozen && frozenSymbol && FROZEN_SYMBOL}
-
+
)
+
+ if (onClick) {
+ return (
+
+ )
+ }
+
+ return {content}
}
const DECIMAL_POINT_CHAR = '.'
@@ -156,6 +176,7 @@ export const BalanceComponent = ({
enableVisibilityToggle,
...props
}: BalanceComponentProps) => {
+ const { t } = useTranslation()
const [isBalanceVisible, setIsBalanceVisible] = useState(showBalance)
const displayMode = useMemo(() => {
return isBalanceVisible ? (convertToUnit ?? 'default') : 'hidden'
@@ -173,18 +194,25 @@ export const BalanceComponent = ({
setIsBalanceVisible((current) => !current)
}
const onClickHandler = enableVisibilityToggle === false ? undefined : toggleVisibility
+ const isInteractive = Boolean(onClickHandler || props.onClick)
return {
...props,
className: cn(props.className, {
- 'cursor-pointer': onClickHandler || props.onClick,
+ 'cursor-pointer': isInteractive,
}),
- onClick: (event: MouseEvent) => {
- onClickHandler?.(event)
- props.onClick?.(event)
- },
+ onClick: isInteractive
+ ? (event: MouseEvent) => {
+ onClickHandler?.(event)
+ props.onClick?.(event)
+ }
+ : undefined,
+ 'aria-label': onClickHandler
+ ? t(isBalanceVisible ? 'settings.hide_balance' : 'settings.show_balance')
+ : undefined,
+ 'aria-pressed': onClickHandler ? !isBalanceVisible : undefined,
}
- }, [props, enableVisibilityToggle])
+ }, [props, enableVisibilityToggle, isBalanceVisible, t])
const element = useMemo(() => {
if (displayMode === 'hidden') {
diff --git a/src/components/ui/jam/CookingPotIcon.tsx b/src/components/ui/jam/CookingPotIcon.tsx
new file mode 100644
index 00000000..1dd2d288
--- /dev/null
+++ b/src/components/ui/jam/CookingPotIcon.tsx
@@ -0,0 +1,163 @@
+import { jarBadgeVariant } from '@/components/ui/badge-variants'
+import { cn } from '@/lib/utils'
+
+export interface CookingPotIconProps {
+ sourceJarIndex?: number
+ destinationJarIndex?: number
+ className?: string
+}
+
+const STROKE_CLASSES: Record = {
+ jar0: 'stroke-jar0',
+ jar1: 'stroke-jar1',
+ jar2: 'stroke-jar2',
+ jar3: 'stroke-jar3',
+ jar4: 'stroke-jar4',
+ jarUnknown: 'stroke-jar-unknown',
+}
+
+export const CookingPotIcon = ({ sourceJarIndex, destinationJarIndex, className }: CookingPotIconProps) => {
+ const sourceVariant = jarBadgeVariant(sourceJarIndex)
+ const destinationVariant = jarBadgeVariant(destinationJarIndex) ?? sourceVariant
+
+ const sourceStrokeClass = (sourceVariant && STROKE_CLASSES[sourceVariant]) || 'stroke-jar-unknown'
+ const destinationStrokeClass = (destinationVariant && STROKE_CLASSES[destinationVariant]) || sourceStrokeClass
+
+ return (
+
+
+
+
+
+
+
{children}
,
SelectValue: ({ placeholder }: { placeholder?: string }) => {placeholder}
,
SelectContent: ({ children }: ChildrenProps) => {children}
,
+ SelectGroup: ({ children }: ChildrenProps) => {children}
,
+ SelectLabel: ({ children }: ChildrenProps) => {children}
,
SelectItem: ({ children, value }: ChildrenProps & { value: string }) => (
{children}
),
diff --git a/src/components/ui/jam/LanguageSelector.tsx b/src/components/ui/jam/LanguageSelector.tsx
new file mode 100644
index 00000000..d0553a45
--- /dev/null
+++ b/src/components/ui/jam/LanguageSelector.tsx
@@ -0,0 +1,116 @@
+import type { ComponentProps, PropsWithChildren } from 'react'
+import { LanguagesIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+ SelectGroup,
+ SelectLabel,
+} from '@/components/ui/select'
+import languages from '@/i18n/languages'
+import { cn } from '@/lib/utils'
+import { Button } from '../button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuTrigger,
+} from '../dropdown-menu'
+
+export const LanguageSelector = ({
+ className,
+ ...props
+}: ComponentProps & { className?: string } = {}) => {
+ const { i18n, t } = useTranslation()
+ const currentLanguage = languages.find((lang) => lang.key === i18n.resolvedLanguage)
+ const currentLanguageDescription = currentLanguage?.description || 'English'
+
+ return (
+
+ )
+}
+
+export const LanguageSelectorDropdownMenu = ({
+ className,
+ align,
+ loop = true,
+ ...props
+}: PropsWithChildren<
+ ComponentProps & {
+ className?: string
+ align?: ComponentProps['align']
+ loop?: ComponentProps['loop']
+ }
+> = {}) => {
+ const { i18n, t } = useTranslation()
+
+ return (
+
+
+ {props.children ?? (
+
+ )}
+
+
+
+
+
+ {t('settings.label_select_language')}
+
+ {
+ void i18n.changeLanguage(value)
+ }}
+ >
+ {languages.map((language) => (
+
+ {language.description}
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/src/components/ui/jam/OrderbookEmptyAlert.test.tsx b/src/components/ui/jam/OrderbookEmptyAlert.test.tsx
new file mode 100644
index 00000000..aae12d42
--- /dev/null
+++ b/src/components/ui/jam/OrderbookEmptyAlert.test.tsx
@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { OrderbookEmptyAlert } from './OrderbookEmptyAlert'
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+ Trans: ({ i18nKey, components }: { i18nKey: string; components?: Record }) => (
+
+ {i18nKey}
+ {components?.['1']}
+
+ ),
+}))
+
+vi.mock('react-router-dom', () => ({
+ Link: ({ children, to }: { children?: ReactNode; to: string }) => {children},
+}))
+
+describe('OrderbookEmptyAlert', () => {
+ it('renders title, description, button and link to orderbook page', () => {
+ render( {}} />)
+
+ expect(screen.getByText('orderbook.alert_precheck_empty_title')).toBeInTheDocument()
+ expect(screen.getByText(/orderbook.alert_precheck_empty_description/u)).toBeInTheDocument()
+ expect(screen.getByRole('link')).toHaveAttribute('href', '/orderbook')
+
+ const actionCheck = screen.getByRole('button', { name: 'orderbook.alert_precheck_empty_text_button_check' })
+ expect(actionCheck).toBeEnabled()
+
+ const actionChecking = screen.queryByRole('button', { name: 'orderbook.alert_precheck_empty_text_button_checking' })
+ expect(actionChecking).not.toBeInTheDocument()
+ })
+
+ it('disables button while checking', () => {
+ render( {}} />)
+
+ const actionChecking = screen.getByRole('button', { name: 'orderbook.alert_precheck_empty_text_button_checking' })
+ expect(actionChecking).toBeDisabled()
+
+ const actionCheck = screen.queryByRole('button', { name: 'orderbook.alert_precheck_empty_text_button_check' })
+ expect(actionCheck).not.toBeInTheDocument()
+ })
+})
diff --git a/src/components/ui/jam/OrderbookEmptyAlert.tsx b/src/components/ui/jam/OrderbookEmptyAlert.tsx
new file mode 100644
index 00000000..95de8d79
--- /dev/null
+++ b/src/components/ui/jam/OrderbookEmptyAlert.tsx
@@ -0,0 +1,43 @@
+import { AlertTriangleIcon, RefreshCwIcon } from 'lucide-react'
+import { Trans, useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { routes } from '@/constants/routes'
+import { Button } from '../button'
+
+interface OrderbookEmptyAlertProps {
+ className?: string
+ isChecking?: boolean
+ onCheckClick?: () => Promise
+}
+
+export const OrderbookEmptyAlert = ({ className, isChecking, onCheckClick }: OrderbookEmptyAlertProps) => {
+ const { t } = useTranslation()
+
+ return (
+
+
+ {t('orderbook.alert_precheck_empty_title')}
+
+
+ ,
+ }}
+ />
+
+
+ {onCheckClick && (
+
+ )}
+
+
+
+ )
+}
diff --git a/src/components/ui/jam/PreconditionAlert.tsx b/src/components/ui/jam/PreconditionAlert.tsx
new file mode 100644
index 00000000..ce42d921
--- /dev/null
+++ b/src/components/ui/jam/PreconditionAlert.tsx
@@ -0,0 +1,102 @@
+import { AlertTriangleIcon } from 'lucide-react'
+import { Trans, useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { JarBadge } from '@/components/earn/fidelity-bond/FidelityBondDialogParts'
+import type { SweepPreconditionSummary } from '@/components/sweep/preconditions'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Balance } from '@/components/ui/jam/Balance'
+import { JAM_JM_RETRIES_DOCS_URL } from '@/constants/jam'
+import { routes } from '@/constants/routes'
+import { shortenStringMiddle } from '@/lib/utils'
+
+export interface PreconditionAlertProps {
+ summary: SweepPreconditionSummary
+ i18nPrefix: 'send.coinjoin_precondition' | 'scheduler.precondition'
+}
+
+const RetryLockedUtxoList = ({ summary, i18nPrefix }: PreconditionAlertProps) => {
+ const { t } = useTranslation()
+
+ return (
+ <>
+
+ ),
+ }}
+ />
+
+
{t('global.utxos')}
+
+ {summary.retryLockedUtxos.map((utxo) => (
+ -
+
+
+
+ {shortenStringMiddle(utxo.utxo, 26)}
+
+
+ ))}
+
+
+ {summary.numberOfNonFrozenFidelityBondOutputs === 0 ? null : (
+ -
+ ,
+ }}
+ />
+
+ )}
+ {summary.numberOfMissingUtxos === 0 ? null : (
+ -
+ {t(`${i18nPrefix}.hint_missing_utxos`, {
+ minConfirmations: summary.options.minConfirmations,
+ })}
+
+ )}
+ {summary.numberOfMissingConfirmations === 0 ? null : (
+ -
+ {t(`${i18nPrefix}.hint_missing_confirmations`, {
+ minConfirmations: summary.options.minConfirmations,
+ amountOfMissingConfirmations: summary.numberOfMissingConfirmations,
+ })}
+
+ )}
+ {summary.retryLockedUtxos.length === 0 ? null : (
+ -
+
+
+ )}
+
+
+
+ )
+}
diff --git a/src/components/wallet/TxHistoryContent.test.tsx b/src/components/wallet/TxHistoryContent.test.tsx
new file mode 100644
index 00000000..b22a61a9
--- /dev/null
+++ b/src/components/wallet/TxHistoryContent.test.tsx
@@ -0,0 +1,113 @@
+import type { WalletHistoryResponse } from '@joinmarket-webui/joinmarket-ng-api-ts/jm'
+import type { UseQueryResult } from '@tanstack/react-query'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { useQueryWalletHistory } from '@/hooks/useQueryWalletHistory'
+import { TxHistoryContent } from './TxHistoryContent'
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+}))
+
+vi.mock('@/hooks/useQueryWalletHistory', () => ({
+ useQueryWalletHistory: vi.fn(),
+}))
+
+vi.mock('./TxHistoryTable', () => ({
+ TxHistoryTable: ({ history, compact }: { history: unknown[]; compact: boolean }) => (
+
+ Mock Table (Rows: {history.length})
+
+ ),
+}))
+
+vi.mock('@/components/ui/alert', () => ({
+ Alert: ({ children, variant }: { children: React.ReactNode; variant?: string }) => (
+
+ {children}
+
+ ),
+ AlertDescription: ({ children }: { children: React.ReactNode }) => {children}
,
+}))
+
+vi.mock('@/components/ui/spinner', () => ({
+ Spinner: () => ,
+}))
+
+const mockUseQuery = useQueryWalletHistory as unknown as ReturnType
+
+const mockQueryResult = (overrides: Partial>) =>
+ ({
+ isLoading: false,
+ error: null,
+ isFetching: false,
+ refetch: vi.fn(),
+ ...overrides,
+ }) as UseQueryResult
+
+describe('TxHistoryContent', () => {
+ it('renders loading state', () => {
+ mockUseQuery.mockReturnValue({
+ history: [],
+ queryResult: mockQueryResult({ isLoading: true }),
+ })
+
+ render()
+ expect(screen.getByTestId('mock-loading')).toBeInTheDocument()
+ })
+
+ it('renders error state', () => {
+ mockUseQuery.mockReturnValue({
+ history: [],
+ queryResult: mockQueryResult({ error: new Error('failed') }),
+ })
+
+ render()
+ expect(screen.getByTestId('mock-alert')).toBeInTheDocument()
+ expect(screen.getByText('tx_history.error_loading')).toBeInTheDocument()
+ })
+
+ it('renders the table with data', () => {
+ const mockHistory = [{ txid: '1' }, { txid: '2' }]
+ mockUseQuery.mockReturnValue({
+ history: mockHistory,
+ queryResult: mockQueryResult({}),
+ })
+
+ render()
+ expect(screen.getByTestId('mock-table')).toHaveAttribute('data-compact', 'true')
+ expect(screen.getByText('Mock Table (Rows: 2)')).toBeInTheDocument()
+ })
+
+ it('renders Load More button when not compact and handles clicks', () => {
+ const mockHistory = Array.from({ length: 10 }, () => ({ txid: 'mock' }))
+ const refetch = vi.fn()
+
+ mockUseQuery.mockReturnValue({
+ history: mockHistory,
+ queryResult: mockQueryResult({ refetch, isFetching: false }),
+ })
+
+ render()
+
+ const loadMoreButton = screen.getByRole('button', { name: 'tx_history.button_load_more' })
+ expect(loadMoreButton).toBeInTheDocument()
+
+ fireEvent.click(loadMoreButton)
+ expect(mockUseQuery).toHaveBeenLastCalledWith(expect.objectContaining({ limit: 20 }))
+ })
+
+ it('hides Load More button if history length is less than limit', () => {
+ const mockHistory = Array.from({ length: 5 }, () => ({ txid: 'mock' }))
+
+ mockUseQuery.mockReturnValue({
+ history: mockHistory,
+ queryResult: mockQueryResult({}),
+ })
+
+ render()
+ expect(screen.queryByRole('button', { name: 'tx_history.button_load_more' })).not.toBeInTheDocument()
+ })
+})
diff --git a/src/components/wallet/TxHistoryContent.tsx b/src/components/wallet/TxHistoryContent.tsx
new file mode 100644
index 00000000..f73118e4
--- /dev/null
+++ b/src/components/wallet/TxHistoryContent.tsx
@@ -0,0 +1,132 @@
+import { useMemo, useState } from 'react'
+import { AlertTriangleIcon, ListIcon, PlusIcon, RefreshCwIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { DevBadge } from '@/components/dev/DevBadge'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
+import { useJamWalletInfoContext } from '@/context/JamWalletInfoContext'
+import { useQueryWalletHistory, type HistoryEntry } from '@/hooks/useQueryWalletHistory'
+import { cn, type WalletFileName } from '@/lib/utils'
+import { useDeveloperMode } from '@/store/jamSettingsStore'
+import { TxHistoryTable } from './TxHistoryTable'
+
+interface TxHistoryContentProps {
+ walletFileName: WalletFileName
+ className?: string
+ initialLimit?: number
+ compact?: boolean
+ enabled?: boolean
+ onViewAll?: () => void
+}
+
+const useSafeUtxosHashHex = () => {
+ try {
+ const context = useJamWalletInfoContext()
+ return context?.utxosHashHex
+ } catch {
+ return undefined
+ }
+}
+
+export const TxHistoryContent = ({
+ walletFileName,
+ className,
+ initialLimit = 10,
+ compact = false,
+ enabled = true,
+ onViewAll,
+}: TxHistoryContentProps) => {
+ const { t } = useTranslation()
+ const [limit, setLimit] = useState(initialLimit)
+ const { enabled: isDeveloperMode } = useDeveloperMode()
+ const [demoEntries, setDemoEntries] = useState([])
+ const utxosHashHex = useSafeUtxosHashHex()
+
+ const { history, queryResult } = useQueryWalletHistory({
+ walletFileName,
+ limit,
+ enabled,
+ utxosHashHex,
+ })
+
+ const combinedHistory = useMemo(() => [...demoEntries, ...history], [demoEntries, history])
+
+ return (
+
+
+
{t('tx_history.section_title')}
+
+ {isDeveloperMode && (
+
+ )}
+
+
+
+ {compact && onViewAll ? (
+
+ ) : null}
+
+
+
+ {t('global.loading')}
+
+ ) : queryResult.error ? (
+
+
+ {t('tx_history.error_loading')}
+
+ ) : (
+
+ )}
+
+ {!compact && combinedHistory.length >= limit ? (
+
+
+
+ ) : null}
+
+ )
+}
diff --git a/src/components/wallet/TxHistoryOverlay.test.tsx b/src/components/wallet/TxHistoryOverlay.test.tsx
new file mode 100644
index 00000000..f2f44194
--- /dev/null
+++ b/src/components/wallet/TxHistoryOverlay.test.tsx
@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { TxHistoryOverlay } from './TxHistoryOverlay'
+
+type ChildrenProps = { children: ReactNode }
+type DialogProps = ChildrenProps & { open?: boolean; onOpenChange?: (open: boolean) => void }
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+}))
+
+vi.mock('./TxHistoryContent', () => ({
+ TxHistoryContent: ({ walletFileName }: { walletFileName: string }) => (
+
+ Content
+
+ ),
+}))
+
+vi.mock('../ui/jam/PageTitle', () => ({
+ default: ({ title }: { title: string }) => {title}
,
+}))
+
+// Mock Dialog to avoid dealing with portals and radix UI internals
+vi.mock('@/components/ui/dialog', () => ({
+ Dialog: ({ children, open, onOpenChange }: DialogProps) =>
+ open ? (
+
+
+ {children}
+
+ ) : null,
+ DialogContent: ({ children }: ChildrenProps) => {children}
,
+ DialogHeader: ({ children }: ChildrenProps) => {children}
,
+ DialogTitle: ({ children }: ChildrenProps) => {children}
,
+}))
+
+describe('TxHistoryOverlay', () => {
+ it('renders dialog content when open', () => {
+ render()
+
+ expect(screen.getByTestId('page-title')).toHaveTextContent('tx_history.overlay_title')
+
+ const content = screen.getByTestId('tx-history-content')
+ expect(content).toBeInTheDocument()
+ expect(content).toHaveAttribute('data-wallet', 'test-wallet.jmdat')
+ })
+
+ it('calls onOpenChange when closed', () => {
+ const onOpenChange = vi.fn()
+ render()
+
+ const closeButton = screen.getByText('Close')
+ fireEvent.click(closeButton)
+
+ expect(onOpenChange).toHaveBeenCalledWith(false)
+ })
+
+ it('does not render when closed', () => {
+ render()
+ expect(screen.queryByTestId('dialog')).not.toBeInTheDocument()
+ })
+})
diff --git a/src/components/wallet/TxHistoryOverlay.tsx b/src/components/wallet/TxHistoryOverlay.tsx
new file mode 100644
index 00000000..6b77b12d
--- /dev/null
+++ b/src/components/wallet/TxHistoryOverlay.tsx
@@ -0,0 +1,36 @@
+import type { ComponentProps } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import type { WithRequiredProperty } from '@/types/global'
+import PageTitle from '../ui/jam/PageTitle'
+import { TxHistoryContent } from './TxHistoryContent'
+
+type TxHistoryOverlayProps = WithRequiredProperty<
+ Omit, 'children'>,
+ 'open' | 'onOpenChange'
+> &
+ Pick, 'walletFileName'>
+
+export function TxHistoryOverlay({ open, onOpenChange, walletFileName, ...dialogProps }: TxHistoryOverlayProps) {
+ const { t } = useTranslation()
+
+ return (
+
+ )
+}
diff --git a/src/components/wallet/TxHistoryPage.test.tsx b/src/components/wallet/TxHistoryPage.test.tsx
new file mode 100644
index 00000000..c96405d0
--- /dev/null
+++ b/src/components/wallet/TxHistoryPage.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { TxHistoryPage } from './TxHistoryPage'
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+}))
+
+vi.mock('./TxHistoryContent', () => ({
+ TxHistoryContent: ({ compact }: { compact: boolean }) => (
+
+ ),
+}))
+
+describe('TxHistoryPage', () => {
+ it('renders TxHistoryContent in non-compact page mode with title', () => {
+ render()
+
+ expect(screen.getByText('tx_history.title')).toBeInTheDocument()
+ const content = screen.getByTestId('tx-history-content')
+ expect(content).toBeInTheDocument()
+ expect(content).toHaveAttribute('data-compact', 'false')
+ })
+})
diff --git a/src/components/wallet/TxHistoryPage.tsx b/src/components/wallet/TxHistoryPage.tsx
new file mode 100644
index 00000000..b7c2576f
--- /dev/null
+++ b/src/components/wallet/TxHistoryPage.tsx
@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next'
+import PageTitle from '@/components/ui/jam/PageTitle'
+import type { WalletFileName } from '@/lib/utils'
+import { TxHistoryContent } from './TxHistoryContent'
+
+interface TxHistoryPageProps {
+ walletFileName: WalletFileName
+}
+
+export function TxHistoryPage({ walletFileName }: TxHistoryPageProps) {
+ const { t } = useTranslation()
+
+ return (
+
+ )
+}
diff --git a/src/components/wallet/TxHistoryTable.test.tsx b/src/components/wallet/TxHistoryTable.test.tsx
new file mode 100644
index 00000000..f9dc23ac
--- /dev/null
+++ b/src/components/wallet/TxHistoryTable.test.tsx
@@ -0,0 +1,108 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { HistoryEntry } from '@/hooks/useQueryWalletHistory'
+import { TxHistoryTable } from './TxHistoryTable'
+
+const mocks = vi.hoisted(() => ({
+ toastSuccess: vi.fn(),
+ toastError: vi.fn(),
+}))
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+}))
+
+vi.mock('sonner', () => ({
+ toast: {
+ success: mocks.toastSuccess,
+ error: mocks.toastError,
+ },
+}))
+
+vi.mock('../ui/jam/Address', () => ({
+ Address: ({ value }: { value: string }) => {value},
+}))
+
+vi.mock('../ui/jam/Balance', () => ({
+ Balance: ({ valueString }: { valueString: string }) => {valueString},
+}))
+
+const mockDeposit: HistoryEntry = {
+ timestamp: '2026-07-28T12:00:00Z',
+ role: 'deposit',
+ txid: 'tx1',
+ cj_amount: 5000,
+ net_fee: 0,
+ confirmations: 10,
+ success: true,
+ source_mixdepth: 0,
+}
+
+const mockSend: HistoryEntry = {
+ timestamp: '2026-07-28T13:00:00Z',
+ role: 'send',
+ txid: 'tx2',
+ cj_amount: 10000,
+ net_fee: -100,
+ confirmations: 0,
+ success: true,
+ source_mixdepth: 0,
+}
+
+const mockFailed: HistoryEntry = {
+ timestamp: '2026-07-28T14:00:00Z',
+ role: 'taker',
+ txid: 'tx3',
+ cj_amount: 0,
+ net_fee: 0,
+ confirmations: 0,
+ success: false,
+ failure_reason: 'aborted',
+ source_mixdepth: 1,
+}
+
+describe('TxHistoryTable', () => {
+ beforeEach(() => {
+ mocks.toastSuccess.mockReset()
+ mocks.toastError.mockReset()
+ })
+
+ it('renders history rows and sorts by date', () => {
+ render()
+
+ expect(screen.getByText('tx_history.label_role_deposit')).toBeInTheDocument()
+ expect(screen.getByText('tx_history.label_role_send')).toBeInTheDocument()
+
+ const dateHeader = screen.getByText('tx_history.column_title_date')
+ fireEvent.click(dateHeader)
+ expect(dateHeader).toBeInTheDocument()
+ })
+
+ it('renders empty history alert', () => {
+ render()
+ expect(screen.getByText('tx_history.empty_history')).toBeInTheDocument()
+ })
+
+ it('expands row details to show raw JSON', () => {
+ render()
+
+ const detailsButton = screen.getByRole('button', { name: 'jar_details.utxo_list.row_button_details' })
+ fireEvent.click(detailsButton)
+
+ // Check if the JSON is rendered
+ expect(screen.getByText(/"txid": "tx1"/u)).toBeInTheDocument()
+ })
+
+ it('sorts columns correctly', () => {
+ render()
+
+ fireEvent.click(screen.getByText('tx_history.column_title_amount'))
+ fireEvent.click(screen.getByText('tx_history.column_title_net_fee'))
+ fireEvent.click(screen.getByText('tx_history.column_title_confirmations'))
+ fireEvent.click(screen.getByText('tx_history.column_title_role'))
+
+ expect(screen.getByText('tx_history.label_role_taker')).toBeInTheDocument()
+ })
+})
diff --git a/src/components/wallet/TxHistoryTable.tsx b/src/components/wallet/TxHistoryTable.tsx
new file mode 100644
index 00000000..8abb3ba5
--- /dev/null
+++ b/src/components/wallet/TxHistoryTable.tsx
@@ -0,0 +1,317 @@
+import { useEffect, useMemo, useState } from 'react'
+import {
+ createColumnHelper,
+ flexRender,
+ getCoreRowModel,
+ getExpandedRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ type CellContext,
+ type PaginationState,
+ type Row,
+ type SortingState,
+ useReactTable,
+} from '@tanstack/react-table'
+import type { TFunction } from 'i18next'
+import { CheckIcon, ChevronDownIcon, CopyIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { TablePagination } from '@/components/ui/jam/TablePagination'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import type { HistoryEntry } from '@/hooks/useQueryWalletHistory'
+import { cn, shortenStringMiddle } from '@/lib/utils'
+import { Alert, AlertDescription } from '../ui/alert'
+import { Button } from '../ui/button'
+import { buttonVariants } from '../ui/button-variants'
+import { Card, CardContent } from '../ui/card'
+import { Balance } from '../ui/jam/Balance'
+import { CopyButton } from '../ui/jam/CopyButton'
+import { SortIcon } from '../ui/jam/SortIcon'
+import { StatusBadge } from '../ui/jam/StatusBadge'
+
+const ITEMS_PER_PAGE = 25
+
+type KnownHistoryRole = 'maker' | 'taker' | 'send' | 'deposit'
+type StatusBadgeVariant = NonNullable[0]['variant']>
+
+const ROLE_VARIANT: Record = {
+ maker: 'cj-out',
+ taker: 'cj-change',
+ send: 'used-empty',
+ deposit: 'deposit',
+}
+
+const columnHelper = createColumnHelper()
+
+const historyRole = (entry: HistoryEntry): KnownHistoryRole | undefined => {
+ return ['maker', 'taker', 'send', 'deposit'].includes(entry.role ?? '') ? (entry.role as KnownHistoryRole) : undefined
+}
+
+const roleLabel = (entry: HistoryEntry, t: TFunction) => {
+ const role = historyRole(entry)
+ return role ? t(`tx_history.label_role_${role}`) : entry.role || ''
+}
+
+const dateTimeValue = (value: string) => {
+ const date = new Date(value)
+ return Number.isNaN(date.getTime()) ? 0 : date.getTime()
+}
+
+const formatDateTime = (value: string) => {
+ const date = new Date(value)
+ return Number.isNaN(date.getTime()) ? value : date.toLocaleString()
+}
+
+const TxHistoryDetails = ({ entry }: { entry: HistoryEntry }) => {
+ return (
+
+
+ {JSON.stringify(entry, null, 2)}
+
+
+ )
+}
+
+const TxHistoryTableRow = ({ row }: { row: Row }) => {
+ return (
+ <>
+
+ {row.getVisibleCells().map((cell) => {
+ const alignCenter = cell.column.columnDef.meta?.align === 'center'
+ const alignRight = cell.column.columnDef.meta?.align === 'right'
+ return (
+
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+ )
+ })}
+
+ {row.getIsExpanded() && (
+
+
+
+
+
+ )}
+
+ )
+}
+
+const txHistoryTableColumns = (t: TFunction) => {
+ return [
+ columnHelper.accessor('timestamp', {
+ header: () => t('tx_history.column_title_date'),
+ sortingFn: (a, b) => dateTimeValue(a.original.timestamp) - dateTimeValue(b.original.timestamp),
+ cell: (info) => {formatDateTime(info.getValue())},
+ meta: {
+ alphabetic: true,
+ },
+ }),
+ columnHelper.accessor('role', {
+ header: () => t('tx_history.column_title_role'),
+ sortingFn: (a, b) => roleLabel(a.original, t).localeCompare(roleLabel(b.original, t)),
+ cell: (info) => {
+ const role = historyRole(info.row.original)
+ return (
+ {roleLabel(info.row.original, t)}
+ )
+ },
+ }),
+ columnHelper.accessor('cj_amount', {
+ header: () => t('tx_history.column_title_amount'),
+ sortingFn: (a, b) => (a.original.cj_amount ?? 0) - (b.original.cj_amount ?? 0),
+ cell: (info) => ,
+ meta: {
+ numeric: true,
+ align: 'right',
+ },
+ }),
+ columnHelper.accessor('net_fee', {
+ header: () => t('tx_history.column_title_net_fee'),
+ sortingFn: (a, b) => (a.original.net_fee ?? 0) - (b.original.net_fee ?? 0),
+ cell: (info) => ,
+ meta: {
+ numeric: true,
+ align: 'right',
+ },
+ }),
+ columnHelper.accessor('confirmations', {
+ header: () => t('tx_history.column_title_confirmations'),
+ sortingFn: (a, b) => (a.original.confirmations ?? 0) - (b.original.confirmations ?? 0),
+ cell: (info) => <>{info.getValue() ?? 0},
+ meta: {
+ numeric: true,
+ align: 'center',
+ },
+ }),
+ columnHelper.accessor('txid', {
+ header: () => t('tx_history.column_title_txid'),
+ cell: (info) => {
+ const txid = info.getValue() ?? ''
+ return txid ? (
+
+ {shortenStringMiddle(txid, 16)}
+ }
+ successText={}
+ className={cn(buttonVariants({ variant: 'outline', size: 'icon-xs' }), 'shrink-0')}
+ onSuccess={() => toast.success(t('tx_history.copy_txid_success'))}
+ onError={() => toast.error(t('tx_history.copy_txid_error'))}
+ />
+
+ ) : (
+ ''
+ )
+ },
+ enableSorting: false,
+ }),
+ {
+ id: 'expand-col',
+ cell: ({ row }: CellContext) => {
+ return row.getCanExpand() ? (
+
+ ) : (
+ ''
+ )
+ },
+ enableSorting: false,
+ },
+ ]
+}
+
+interface TxHistoryTableProps {
+ history: HistoryEntry[]
+ compact?: boolean
+}
+
+export const TxHistoryTable = ({ history, compact = false }: TxHistoryTableProps) => {
+ const { t } = useTranslation()
+ const [sorting, setSorting] = useState([{ id: 'timestamp', desc: true }])
+ const [isShowAll, setIsShowAll] = useState(false)
+ const [pagination, setPagination] = useState({
+ pageIndex: 0,
+ pageSize: compact ? 5 : ITEMS_PER_PAGE,
+ })
+
+ useEffect(() => {
+ if (isShowAll) {
+ setPagination((previous) => ({
+ ...previous,
+ pageSize: Math.max(1, history.length),
+ pageIndex: 0,
+ }))
+ }
+ }, [history.length, isShowAll])
+
+ const columns = useMemo(() => txHistoryTableColumns(t), [t])
+
+ const table = useReactTable({
+ data: history,
+ columns,
+ state: {
+ sorting,
+ pagination,
+ },
+ autoResetPageIndex: true,
+ getRowId: (row, index) => `${row.txid || 'notxid'}-${row.source_mixdepth ?? 0}-${row.timestamp}-${index}`,
+ onSortingChange: setSorting,
+ onPaginationChange: setPagination,
+ getCoreRowModel: getCoreRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getRowCanExpand: () => true,
+ getExpandedRowModel: getExpandedRowModel(),
+ paginateExpandedRows: false,
+ })
+
+ if (history.length === 0) {
+ return (
+
+ {t('tx_history.empty_history')}
+
+ )
+ }
+
+ return (
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ const canSort = header.column.getCanSort()
+ const alignCenter = header.column.columnDef.meta?.align === 'center'
+ const alignRight = header.column.columnDef.meta?.align === 'right'
+ return (
+ header.column.toggleSorting() : undefined}
+ >
+ 0 && !header.column.getIsSorted(),
+ })}
+ >
+ {flexRender(header.column.columnDef.header, header.getContext())}
+ {canSort ? : undefined}
+
+
+ )
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => (
+
+ ))}
+
+
+
+
+ {!compact && (
+
table.setPageIndex(page - 1)}
+ onItemsPerPageChange={(newItemsPerPage) => {
+ if (newItemsPerPage === -1) {
+ setIsShowAll(true)
+ table.setPageSize(history.length || 1)
+ } else {
+ setIsShowAll(false)
+ table.setPageSize(newItemsPerPage)
+ }
+ table.setPageIndex(0)
+ }}
+ />
+ )}
+