chore(send): jars with frozen funds are selectable

src/components/MainWalletPage.test.tsx

@@ -53,7 +53,7 @@ vi.mock('./wallet/WalletJarsDetailsOverlay', () => ({
   ),
 }))
 
-vi.mock('./ui/jam/Balance', () => ({
+vi.mock('@/components/ui/jam/Balance', () => ({
   Balance: ({ valueString, onClick }: { valueString: string; onClick?: () => void }) => (
     <span onClick={onClick}>{valueString}</span>
   ),
@@ -74,6 +74,7 @@ const makeJar = (jarIndex: number, name: string): Jar =>
       calculatedTotalBalanceInSats: 100,
       calculatedAvailableBalanceInSats: 100,
       calculatedFrozenOrLockedBalanceInSats: 0,
+      calculatedAvailableFrozenBalanceInSats: 0,
     },
   }) as unknown as Jar
 

src/components/earn/CreateFidelityBondDialog/CreateFidelityBondDialogSteps.test.tsx

@@ -53,16 +53,16 @@ vi.mock('@/context/JamWalletInfoContext', () => ({
 vi.mock('@/components/ui/jam/SelectableJar', () => ({
   SelectableJar: ({
     name,
-    onClick,
+    onSelect,
     disabled,
     isSelected,
   }: {
     name?: string
-    onClick?: () => void
+    onSelect?: () => void
     disabled?: boolean
     isSelected?: boolean
   }) => (
-    <button onClick={onClick} disabled={disabled} data-selected={isSelected}>
+    <button onSelect={onSelect} disabled={disabled} data-selected={isSelected}>
       {name}
     </button>
   ),

src/components/earn/FidelityBondCard.test.tsx

@@ -34,7 +34,7 @@ vi.mock('../ui/jam/Address', () => ({
   Address: ({ value }: { value?: string }) => <span data-testid="address">{value}</span>,
 }))
 
-vi.mock('../ui/jam/Balance', () => ({
+vi.mock('@/components/ui/jam/Balance', () => ({
   Balance: ({ valueString }: { valueString?: string }) => <span data-testid="balance">{valueString}</span>,
 }))
 

src/components/earn/FidelityBondCard.tsx

@@ -2,12 +2,12 @@ import { useMemo, type PropsWithChildren } from 'react'
 import { ClockIcon, CoinsIcon, CopyIcon } from 'lucide-react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Card, CardContent, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Balance } from '@/components/ui/jam/Balance'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import type { FidelityBondUtxo } from '@/hooks/useQueryUtxos'
 import * as fb from '@/lib/fidelityBondUtils'
 import { time } from '@/lib/utils'
 import { Address } from '../ui/jam/Address'
-import { Balance } from '../ui/jam/Balance'
 
 interface FidelityBondCardProps {
   value: FidelityBondUtxo

src/components/earn/MoveToJarDialog.test.tsx

@@ -72,16 +72,16 @@ vi.mock('@/context/JamWalletInfoContext', () => ({
 vi.mock('@/components/ui/jam/SelectableJar', () => ({
   SelectableJar: ({
     name,
-    onClick,
+    onSelect,
     disabled,
     isSelected,
   }: {
     name?: string
-    onClick?: () => void
+    onSelect?: () => void
     disabled?: boolean
     isSelected?: boolean
   }) => (
-    <button onClick={onClick} disabled={disabled} data-selected={isSelected}>
+    <button onClick={onSelect} disabled={disabled} data-selected={isSelected}>
       {name}
     </button>
   ),

src/components/earn/OfferCard.test.tsx

@@ -18,7 +18,7 @@ vi.mock('@/lib/utils', () => ({
   isRelativeOffer: (type: string) => type === 'sw0relo',
 }))
 
-vi.mock('../ui/jam/Balance', () => ({
+vi.mock('@/components/ui/jam/Balance', () => ({
   Balance: ({ valueString }: { valueString?: string }) => <span data-testid="balance">{valueString}</span>,
 }))
 

src/components/earn/fidelity-bond/FidelityBondJarSelector.tsx

@@ -24,7 +24,7 @@ export function FidelityBondJarSelector({ selectedJarIndex, onSelect, isJarDisab
           frozenOrLockedBalance={jar.balanceSummary.calculatedFrozenOrLockedBalanceInSats}
           totalWalletBalance={walletBalanceSummary.calculatedTotalBalanceInSats}
           isSelected={selectedJarIndex === jar.jarIndex}
-          onClick={() => onSelect(jar.jarIndex)}
+          onSelect={() => onSelect(jar.jarIndex)}
           disabled={isJarDisabled(jar)}
         />
       ))}

src/components/layout/AppNavbar.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { Link, useNavigate, type NavigateFunction } from 'react-router-dom'
 import { DevBadge } from '@/components/dev/DevBadge'
 import { Button } from '@/components/ui/button'
+import { Balance } from '@/components/ui/jam/Balance'
 import { ThemeToggleButton } from '@/components/ui/jam/ThemeToggleButton'
 import { Skeleton } from '@/components/ui/skeleton'
 import type { SidebarContextProps } from '@/components/ui/use-sidebar'
@@ -15,7 +16,6 @@ import type { RescanInfo } from '@/context/JamSessionInfoContext'
 import { cn, shortenStringMiddle } from '@/lib/utils'
 import type { AmountSats } from '@/types/global'
 import { WithActivityIndicator } from '../ui/jam/ActivityIndicator'
-import { Balance } from '../ui/jam/Balance'
 import { Spinner } from '../ui/spinner'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 

src/components/orderbook/OrderbookContent.tsx

@@ -18,6 +18,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { Input } from '@/components/ui/input'
+import { Balance } from '@/components/ui/jam/Balance'
 import { Label } from '@/components/ui/label'
 import { Switch } from '@/components/ui/switch'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
@@ -36,7 +37,6 @@ import {
 } from '@/lib/utils'
 import { useDeveloperMode } from '@/store/jamSettingsStore'
 import { jmSessionStore } from '@/store/jmSessionStore'
-import { Balance } from '../ui/jam/Balance'
 import { Spinner } from '../ui/spinner'
 import { OrderbookChart } from './OrderbookChart'
 import { OrderbookTable, type OrderTableEntry } from './OrderbookTable'

src/components/receive/ReceiveForm.test.tsx

@@ -19,8 +19,8 @@ vi.mock('@/context/JamWalletInfoContext', () => ({
 }))
 
 vi.mock('@/components/ui/jam/SelectableJar', () => ({
-  SelectableJar: ({ name, isSelected, onClick }: { name: string; isSelected: boolean; onClick: () => void }) => (
-    <button type="button" aria-pressed={isSelected} onClick={onClick}>
+  SelectableJar: ({ name, isSelected, onSelect }: { name: string; isSelected: boolean; onSelect: () => void }) => (
+    <button type="button" aria-pressed={isSelected} onClick={onSelect}>
       {name}
     </button>
   ),

src/components/receive/ReceiveForm.tsx

@@ -91,7 +91,7 @@ export const ReceiveForm = ({ className, defaultValues, onSubmit, jars, disabled
     >
       <Field className="space-y-4" data-invalid={errors.source !== undefined}>
         <FieldLabel>{t('receive.label_source_jar')}</FieldLabel>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
+        <div className="flex flex-1 flex-row flex-wrap items-start justify-around gap-8">
           {jars.map((jar, index) => (
             <SelectableJar
               key={index}
@@ -102,7 +102,7 @@ export const ReceiveForm = ({ className, defaultValues, onSubmit, jars, disabled
               frozenOrLockedBalance={jar.balanceSummary.calculatedFrozenOrLockedBalanceInSats}
               totalWalletBalance={walletBalanceSummary.calculatedTotalBalanceInSats}
               isSelected={values.source?.fromJar === jar.jarIndex}
-              onClick={() => {
+              onSelect={() => {
                 setValue('source.fromJar', jar.jarIndex, { shouldValidate: true })
               }}
               disabled={disabled || isSubmitting}

src/components/send/JarSelectorDialog.test.tsx

@@ -11,16 +11,16 @@ vi.mock('react-i18next', () => ({
 vi.mock('../ui/jam/SelectableJar', () => ({
   SelectableJar: ({
     name,
-    onClick,
+    onSelect,
     disabled,
     isSelected,
   }: {
     name?: string
-    onClick?: () => void
+    onSelect?: () => void
     disabled?: boolean
     isSelected?: boolean
   }) => (
-    <button type="button" onClick={onClick} disabled={disabled} data-selected={isSelected}>
+    <button type="button" onClick={onSelect} disabled={disabled} data-selected={isSelected}>
       {name}
     </button>
   ),

src/components/send/JarSelectorDialog.tsx

@@ -90,7 +90,7 @@ export default function JarSelectorDialog({
                   frozenOrLockedBalance={jar.balanceSummary.calculatedFrozenOrLockedBalanceInSats}
                   totalWalletBalance={walletBalanceSummary.calculatedTotalBalanceInSats}
                   isSelected={selectedJarIndex === jar.jarIndex}
-                  onClick={() =>
+                  onSelect={() =>
                     setValue('jarIndex', jar.jarIndex, {
                       shouldDirty: true,
                       shouldTouch: true,

src/components/send/PaymentConfirmDialog.test.tsx

@@ -27,7 +27,7 @@ vi.mock('../ui/jam/Address', () => ({
   Address: ({ value }: { value: string }) => <span>address:{value}</span>,
 }))
 
-vi.mock('../ui/jam/Balance', () => ({
+vi.mock('@/components/ui/jam/Balance', () => ({
   Balance: ({ valueString }: { valueString: string }) => <span>balance:{valueString}</span>,
 }))
 
@@ -50,6 +50,7 @@ const sourceJar: Jar = {
     calculatedAvailableBalanceInSats: 50_000,
     calculatedTotalBalanceInSats: 50_000,
     calculatedConfirmedAvailableBalanceInSats: 50_000,
+    calculatedAvailableFrozenBalanceInSats: 0,
     calculatedFrozenOrLockedBalanceInSats: 0,
   },
   color: '#e2b86a',

src/components/send/PaymentConfirmDialog.tsx

@@ -3,6 +3,7 @@ import { InfoIcon } from 'lucide-react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Badge } from '@/components/ui/badge'
 import { jarBadgeVariant } from '@/components/ui/badge-variants'
+import { Balance } from '@/components/ui/jam/Balance'
 import type { Jar } from '@/context/JamWalletInfoContext'
 import type { Utxo } from '@/hooks/useQueryUtxos'
 import type { JamFeeConfigValues } from '@/lib/feeConfig'
@@ -13,7 +14,6 @@ import { Button } from '../ui/button'
 import { Card, CardContent, CardHeader } from '../ui/card'
 import { Dialog, DialogTitle, DialogContent, DialogDescription, DialogFooter, DialogHeader } from '../ui/dialog'
 import { Address } from '../ui/jam/Address'
-import { Balance } from '../ui/jam/Balance'
 import { Spinner } from '../ui/spinner'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 import { estimateMaxCollaboratorFee, useMiningFeeText, type EstimateMaxCollaboratorFeeResult } from './feeEstimate'

src/components/send/SendForm.schema.ts

@@ -64,11 +64,28 @@ export const createSendFormSchema = (
       .object({
         source: yup
           .object({
-            fromJar: sourceJarField(
-              t('send.feedback_invalid_source_jar'),
-              (jarIndex) =>
-                (jars.find((it) => it.jarIndex === jarIndex)?.balanceSummary.calculatedAvailableBalanceInSats || 0) > 0,
-            ),
+            fromJar: sourceJarField(t('send.feedback_invalid_source_jar'), (jarIndex) =>
+              jars.some((it) => it.jarIndex === jarIndex),
+            )
+              .test(
+                'valid-source-jar-must-unfreeze-utxos-test',
+                t('send.feedback_invalid_source_jar_must_unfreeze_utxos'),
+                (jarIndex) => {
+                  const jar = jars.find((it) => it.jarIndex === jarIndex)
+                  if (!jar) return true
+                  if (jar.balanceSummary.calculatedAvailableBalanceInSats > 0) return true
+                  return jar.balanceSummary.calculatedAvailableFrozenBalanceInSats <= 0
+                },
+              )
+              .test(
+                'valid-source-jar-has-funds-test',
+                t('send.feedback_invalid_source_jar_no_available_utxos'),
+                (jarIndex) => {
+                  const jar = jars.find((it) => it.jarIndex === jarIndex)
+                  if (!jar) return true
+                  return jar.balanceSummary.calculatedAvailableBalanceInSats > 0
+                },
+              ),
           })
           .required(),
         destination: yup

src/components/send/SendForm.test.tsx

@@ -55,13 +55,13 @@ vi.mock('../ui/jam/Address', () => ({
   Address: () => <div data-testid="address" />,
 }))
 
-vi.mock('../ui/jam/Balance', () => ({
+vi.mock('@/components/ui/jam/Balance', () => ({
   Balance: ({ valueString }: { valueString?: string }) => <div data-testid="balance">{valueString}</div>,
 }))
 
 vi.mock('../ui/jam/SelectableJar', () => ({
-  SelectableJar: ({ name, onClick, disabled }: { name?: string; onClick?: () => void; disabled?: boolean }) => (
-    <button onClick={onClick} disabled={disabled}>
+  SelectableJar: ({ name, onSelect, disabled }: { name?: string; onSelect?: () => void; disabled?: boolean }) => (
+    <button onClick={onSelect} disabled={disabled}>
       {name}
     </button>
   ),