{
- setValue('source.fromJar', jar.jarIndex, { shouldValidate: true })
+
+ {jars.map((jar, index) => {
+ const noFunds =
+ jar.balanceSummary.calculatedAvailableBalanceInSats <= 0 &&
+ jar.balanceSummary.calculatedAvailableFrozenBalanceInSats <= 0
- if (isSweep === true) {
- setValue('amount.isSweep', false, { shouldValidate: true })
- setValue('amount.sweepAmount', undefined, { shouldValidate: true })
- setValue('amount.amount', undefined, { shouldValidate: true })
- }
- if (destinationJarIndex === jar.jarIndex) {
- setValue('destination.address', '', { shouldValidate: true })
- setValue('destination.fromJar', undefined, { shouldValidate: true })
- } else if (destinationAddress !== undefined) {
- void trigger('destination.address')
- }
- }}
- disabled={disabled || jar.balanceSummary.calculatedAvailableBalanceInSats <= 0}
- />
- ))}
+ const isSelected = sourceJarIndex === jar.jarIndex
+
+ return (
+ {
+ if (isSelected) {
+ onSourceJarClicked?.(sourceJarIndex)
+ }
+ }}
+ onSelect={() => {
+ setValue('source.fromJar', jar.jarIndex, {
+ shouldValidate: true,
+ shouldDirty: true,
+ shouldTouch: true,
+ })
+
+ if (isSweep === true) {
+ setValue('amount.isSweep', false, { shouldValidate: true })
+ setValue('amount.sweepAmount', undefined, { shouldValidate: true })
+ setValue('amount.amount', undefined, { shouldValidate: true })
+ }
+ if (destinationJarIndex === jar.jarIndex) {
+ setValue('destination.address', '', { shouldValidate: true })
+ setValue('destination.fromJar', undefined, { shouldValidate: true })
+ } else if (destinationAddress !== undefined) {
+ void trigger('destination.address')
+ }
+ }}
+ disabled={disabled || noFunds}
+ />
+ )
+ })}
{errors.source?.fromJar?.message ? {errors.source?.fromJar.message} : null}
diff --git a/src/components/send/SendPage.test.tsx b/src/components/send/SendPage.test.tsx
index 5aa3bd87..d7ec0b85 100644
--- a/src/components/send/SendPage.test.tsx
+++ b/src/components/send/SendPage.test.tsx
@@ -209,11 +209,11 @@ vi.mock('./SendForm', () => ({
disabled?: boolean
onSourceJarChange?: (jarIndex: number | undefined) => void
onSubmit: (values: SendFormValues) => void
- sourceJarLabelButton?: React.ReactElement
+ sourceJarLabelButton?: () => React.ReactElement
}) => (
send-form:{String(disabled)}
-
{sourceJarLabelButton}
+
{sourceJarLabelButton?.()}
diff --git a/src/components/ui/jam/SelectableJar.test.tsx b/src/components/ui/jam/SelectableJar.test.tsx
new file mode 100644
index 00000000..cb7c7a6e
--- /dev/null
+++ b/src/components/ui/jam/SelectableJar.test.tsx
@@ -0,0 +1,131 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { beforeEach } from 'vitest'
+import type { Jar } from '@/context/JamWalletInfoContext'
+import { SelectableJar } from './SelectableJar'
+
+const mocks = vi.hoisted(() => ({
+ onClick: vi.fn(),
+ onSelect: vi.fn(),
+}))
+
+vi.mock('@/components/ui/jam/Balance', () => ({
+ Balance: ({ valueString, onClick }: { valueString: string; onClick?: () => void }) => (
+ balance:{valueString}
+ ),
+}))
+
+const DUMMY_JAR: Jar = {
+ balanceSummary: {
+ calculatedTotalBalanceInSats: 5,
+ calculatedAvailableBalanceInSats: 4,
+ calculatedConfirmedAvailableBalanceInSats: 3,
+ calculatedAvailableFrozenBalanceInSats: 2,
+ calculatedFrozenOrLockedBalanceInSats: 1,
+ },
+ color: '#666',
+ jarIndex: 0,
+ name: 'Test jar',
+ utxos: [],
+}
+
+describe('SelectableJar', () => {
+ beforeEach(() => {
+ mocks.onClick.mockReset()
+ mocks.onSelect.mockReset()
+ })
+
+ it('renders correctly', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText(DUMMY_JAR.name)).toBeInTheDocument()
+ expect(screen.getByText('balance:' + DUMMY_JAR.balanceSummary.calculatedAvailableBalanceInSats)).toBeInTheDocument()
+ expect(
+ screen.getByText('balance:' + DUMMY_JAR.balanceSummary.calculatedFrozenOrLockedBalanceInSats),
+ ).toBeInTheDocument()
+ })
+
+ it('can be selected', async () => {
+ const user = userEvent.setup()
+
+ render(
+ ,
+ )
+
+ await user.click(screen.getByRole('button'))
+
+ expect(mocks.onClick).toHaveBeenCalled()
+ expect(mocks.onSelect).toHaveBeenCalled()
+ })
+
+ it('can not be selected if disabled', async () => {
+ const user = userEvent.setup()
+
+ render(
+ ,
+ )
+
+ await user.click(screen.getByRole('button'))
+
+ expect(mocks.onClick).not.toHaveBeenCalled()
+ expect(mocks.onSelect).not.toHaveBeenCalled()
+ })
+
+ it('does not call onSelect if already selected', async () => {
+ const user = userEvent.setup()
+
+ render(
+ ,
+ )
+
+ await user.click(screen.getByRole('button'))
+
+ expect(mocks.onClick).toHaveBeenCalled()
+ expect(mocks.onSelect).not.toHaveBeenCalled()
+ })
+})
diff --git a/src/components/ui/jam/SelectableJar.tsx b/src/components/ui/jam/SelectableJar.tsx
index 60e76f9b..a526b7cf 100644
--- a/src/components/ui/jam/SelectableJar.tsx
+++ b/src/components/ui/jam/SelectableJar.tsx
@@ -4,7 +4,8 @@ import { Jar } from './Jar'
interface SelectableJarProps extends ComponentProps {
isSelected: NonNullable['checked']>
- onClick: NonNullable['onChange']>
+ onClick?: NonNullable['onClick']>
+ onSelect: NonNullable['onChange']>
}
export const SelectableJar = ({
@@ -16,20 +17,19 @@ export const SelectableJar = ({
totalWalletBalance,
isSelected,
disabled = false,
+ onSelect,
onClick,
}: SelectableJarProps) => {
const radioRef = useRef(null)
return (
@@ -235,6 +241,7 @@ export const Interactive: Story = {
frozenOrLockedBalance: 100_000,
totalWalletBalance: 500_000,
isSelected: false,
+ onSelect: () => alert('Selected'),
onClick: () => alert('Interactive jar clicked'),
},
parameters: {