diff --git a/src/components/sweep/SweepPreconditionAlert.tsx b/src/components/sweep/SweepPreconditionAlert.tsx
index fc5c6eb5..afb1440e 100644
--- a/src/components/sweep/SweepPreconditionAlert.tsx
+++ b/src/components/sweep/SweepPreconditionAlert.tsx
@@ -1,10 +1,97 @@
+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 { PreconditionAlert } from '@/components/ui/jam/PreconditionAlert'
+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'
interface SweepPreconditionAlertProps {
summary: SweepPreconditionSummary
}
-export const SweepPreconditionAlert = ({ summary }: SweepPreconditionAlertProps) => {
- return
+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 : - {}
}
+
+
+
+ )
}
diff --git a/src/components/ui/button-variants.ts b/src/components/ui/button-variants.ts
index ec705830..ee782c92 100644
--- a/src/components/ui/button-variants.ts
+++ b/src/components/ui/button-variants.ts
@@ -40,7 +40,6 @@ 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 49d0355a..b5c8ce40 100644
--- a/src/components/ui/jam/Balance.test.tsx
+++ b/src/components/ui/jam/Balance.test.tsx
@@ -5,8 +5,6 @@ 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 }) => {
@@ -37,13 +35,11 @@ describe('', () => {
})
it('should render balance in SATS', () => {
- 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()
- })
+ 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', () => {
@@ -53,11 +49,9 @@ describe('', () => {
})
it('should render a string BTC value correctly as SATS', () => {
- withRuntimeLocale('en-US', () => {
- render()
- expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`12,303,224,961`)
- expect(screen.getByTestId('sats-symbol')).toBeVisible()
- })
+ 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', () => {
@@ -71,31 +65,23 @@ describe('', () => {
})
it('should render a large string BTC value correctly as BTC', () => {
- withRuntimeLocale('en-US', () => {
- render()
- expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`20,999,999.97690000`)
- })
+ render()
+ expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`20,999,999.97690000`)
})
it('should render a large string BTC value correctly as SATS', () => {
- withRuntimeLocale('en-US', () => {
- render()
- expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,099,999,997,690,000`)
- })
+ render()
+ expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,099,999,997,690,000`)
})
it('should render a max string BTC value correctly as BTC', () => {
- withRuntimeLocale('en-US', () => {
- render()
- expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`21,000,000.00000000`)
- })
+ render()
+ expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`21,000,000.00000000`)
})
it('should render a max string BTC value correctly as SATS', () => {
- withRuntimeLocale('en-US', () => {
- render()
- expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,100,000,000,000,000`)
- })
+ render()
+ expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,100,000,000,000,000`)
})
it('should render a string SATS value correctly as SATS', () => {
@@ -119,31 +105,23 @@ describe('', () => {
})
it('should render a large string SATS value correctly as BTC', () => {
- withRuntimeLocale('en-US', () => {
- render()
- expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`20,999,999.97690000`)
- })
+ render()
+ expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`20,999,999.97690000`)
})
it('should render a large string SATS value correctly as SATS', () => {
- withRuntimeLocale('en-US', () => {
- render()
- expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,099,999,997,690,000`)
- })
+ render()
+ expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,099,999,997,690,000`)
})
it('should render a max string SATS value correctly as BTC', () => {
- withRuntimeLocale('en-US', () => {
- render()
- expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`21,000,000.00000000`)
- })
+ render()
+ expect(screen.getByTestId('bitcoin-amount').dataset.formattedValue).toBe(`21,000,000.00000000`)
})
it('should render a max string SATS value correctly as SATS', () => {
- withRuntimeLocale('en-US', () => {
- render()
- expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,100,000,000,000,000`)
- })
+ render()
+ expect(screen.getByTestId(`sats-amount`)).toHaveTextContent(`2,100,000,000,000,000`)
})
it('should render frozen balance in BTC', () => {
@@ -154,12 +132,10 @@ describe('', () => {
})
it('should render frozen balance in SATS', () => {
- 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()
- })
+ 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', () => {
@@ -222,51 +198,4 @@ 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 c61215cd..11740b9a 100644
--- a/src/components/ui/jam/Balance.tsx
+++ b/src/components/ui/jam/Balance.tsx
@@ -1,6 +1,5 @@
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'
@@ -24,8 +23,6 @@ type ElementWithSymbolsProps = PropsWithChildren<{
frozenSymbol?: boolean
className?: string
onClick?: MouseEventHandler
- 'aria-label'?: string
- 'aria-pressed'?: boolean
}>
const ElementWithSymbols = ({
@@ -36,40 +33,23 @@ const ElementWithSymbols = ({
className,
children,
onClick,
- 'aria-label': ariaLabel,
- 'aria-pressed': ariaPressed,
}: ElementWithSymbolsProps) => {
- const sharedClassName = cn(
- 'balance-hook inline-flex items-center',
- {
- 'text-brand-info': frozen,
- },
- className,
- )
-
- const content = (
- <>
+ return (
+
{children}
{showSymbol && symbol}
{frozen && frozenSymbol && FROZEN_SYMBOL}
-
+
)
-
- if (onClick) {
- return (
-
- )
- }
-
- return {content}
}
const DECIMAL_POINT_CHAR = '.'
@@ -176,7 +156,6 @@ export const BalanceComponent = ({
enableVisibilityToggle,
...props
}: BalanceComponentProps) => {
- const { t } = useTranslation()
const [isBalanceVisible, setIsBalanceVisible] = useState(showBalance)
const displayMode = useMemo(() => {
return isBalanceVisible ? (convertToUnit ?? 'default') : 'hidden'
@@ -194,25 +173,18 @@ 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': isInteractive,
+ 'cursor-pointer': onClickHandler || props.onClick,
}),
- 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,
+ onClick: (event: MouseEvent) => {
+ onClickHandler?.(event)
+ props.onClick?.(event)
+ },
}
- }, [props, enableVisibilityToggle, isBalanceVisible, t])
+ }, [props, enableVisibilityToggle])
const element = useMemo(() => {
if (displayMode === 'hidden') {
diff --git a/src/components/ui/jam/CookingPotIcon.tsx b/src/components/ui/jam/CookingPotIcon.tsx
deleted file mode 100644
index 1dd2d288..00000000
--- a/src/components/ui/jam/CookingPotIcon.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-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 (
-
-
-
-
-
-
-
- ,
- }}
- />
-
-
- {onCheckClick && (
-
- )}
-
-
-
- )
-}
diff --git a/src/components/ui/jam/PreconditionAlert.tsx b/src/components/ui/jam/PreconditionAlert.tsx
deleted file mode 100644
index ce42d921..00000000
--- a/src/components/ui/jam/PreconditionAlert.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-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
deleted file mode 100644
index b22a61a9..00000000
--- a/src/components/wallet/TxHistoryContent.test.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-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
deleted file mode 100644
index f73118e4..00000000
--- a/src/components/wallet/TxHistoryContent.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-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
deleted file mode 100644
index f2f44194..00000000
--- a/src/components/wallet/TxHistoryOverlay.test.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-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
deleted file mode 100644
index 6b77b12d..00000000
--- a/src/components/wallet/TxHistoryOverlay.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-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
deleted file mode 100644
index c96405d0..00000000
--- a/src/components/wallet/TxHistoryPage.test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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
deleted file mode 100644
index b7c2576f..00000000
--- a/src/components/wallet/TxHistoryPage.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index f9dc23ac..00000000
--- a/src/components/wallet/TxHistoryTable.test.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-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
deleted file mode 100644
index 8abb3ba5..00000000
--- a/src/components/wallet/TxHistoryTable.tsx
+++ /dev/null
@@ -1,317 +0,0 @@
-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)
- }}
- />
- )}
-