diff --git a/src/components/earn/CreateFidelityBondDialog/CreateFidelityBondDialogSteps.tsx b/src/components/earn/CreateFidelityBondDialog/CreateFidelityBondDialogSteps.tsx
index d6e1259d..320f5d4e 100644
--- a/src/components/earn/CreateFidelityBondDialog/CreateFidelityBondDialogSteps.tsx
+++ b/src/components/earn/CreateFidelityBondDialog/CreateFidelityBondDialogSteps.tsx
@@ -18,6 +18,13 @@ import { buttonVariants } from '@/components/ui/button-variants'
import { Card, CardContent } from '@/components/ui/card'
import { CopyButton } from '@/components/ui/jam/CopyButton'
import { Label } from '@/components/ui/label'
+import {
+ Pagination,
+ PaginationContent,
+ PaginationItem,
+ PaginationNext,
+ PaginationPrevious,
+} from '@/components/ui/pagination'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Spinner } from '@/components/ui/spinner'
import { Switch } from '@/components/ui/switch'
@@ -50,6 +57,8 @@ export function CreateFidelityBondDialogSteps({ wizard }: CreateFidelityBondDial
jarsWithUtxos,
selectedUtxos,
availableUtxos,
+ utxoPage,
+ setUtxoPage,
toggleUtxoSelection,
selectAllUtxos,
deselectAllUtxos,
@@ -233,40 +242,80 @@ export function CreateFidelityBondDialogSteps({ wizard }: CreateFidelityBondDial
-
- {availableUtxos.map((utxo) => {
- const isSelected = selectedUtxos.some((u) => u.utxo === utxo.utxo)
+
+ {(() => {
+ const perPage = 5
+ const totalPages = Math.ceil(availableUtxos.length / perPage)
+ const page = Math.max(0, Math.min(utxoPage, totalPages - 1))
+ const paged = availableUtxos.slice(page * perPage, (page + 1) * perPage)
+
return (
-
+ {paged.map((utxo) => {
+ const isSelected = selectedUtxos.some((u) => u.utxo === utxo.utxo)
+ return (
+ toggleUtxoSelection(utxo)}
+ >
+
+
+ {isSelected && }
+
+
+
{utxo.utxo}
+
+ {t('earn.fidelity_bond.select_utxos.utxo_card.confirmations', {
+ confs: utxo.confirmations,
+ })}
+
+
+
+
+ {formatSats(utxo.value)}
+
+
+
+
+ )
+ })}
+ {totalPages > 1 && (
+
+
+
+ setUtxoPage(Math.max(0, page - 1))}
+ disabled={page === 0}
+ />
+
+
+
+ {page + 1} / {totalPages}
+
+
+
+ setUtxoPage(Math.min(totalPages - 1, page + 1))}
+ disabled={page >= totalPages - 1}
+ />
+
+
+
)}
- onClick={() => toggleUtxoSelection(utxo)}
- >
-
-
- {isSelected && }
-
-
-
{utxo.utxo}
-
- {t('earn.fidelity_bond.select_utxos.utxo_card.confirmations', { confs: utxo.confirmations })}
-
-
-
-
{formatSats(utxo.value)}
-
-
-
+ >
)
- })}
+ })()}
{selectedUtxos.length > 0 && (
diff --git a/src/components/earn/CreateFidelityBondDialog/useCreateFidelityBondWizard.ts b/src/components/earn/CreateFidelityBondDialog/useCreateFidelityBondWizard.ts
index ef6351f0..028a2375 100644
--- a/src/components/earn/CreateFidelityBondDialog/useCreateFidelityBondWizard.ts
+++ b/src/components/earn/CreateFidelityBondDialog/useCreateFidelityBondWizard.ts
@@ -34,6 +34,7 @@ export function useCreateFidelityBondWizard(
const [selectedJarIndex, setSelectedJarIndex] = useState
()
const [selectedUtxos, setSelectedUtxos] = useState([])
const [frozenUtxos, setFrozenUtxos] = useState([])
+ const [utxoPage, setUtxoPage] = useState(0)
const [confirmationChecked, setConfirmationChecked] = useState(false)
const [txResult, setTxResult] = useState()
const [error, setError] = useState()
@@ -77,7 +78,9 @@ export function useCreateFidelityBondWizard(
if (selectedJarIndex === undefined) return []
const jar = walletInfo.jars.find((it) => it.jarIndex === selectedJarIndex)
if (!jar) return []
- return jar.utxos.filter((utxo) => !utxo.frozen && !fb.utxo.isFidelityBond(utxo))
+ return jar.utxos
+ .filter((utxo) => !utxo.frozen && !fb.utxo.isFidelityBond(utxo))
+ .toSorted((a, b) => b.value - a.value)
}, [walletInfo.jars, selectedJarIndex])
const utxosToFreeze = useMemo(() => {
@@ -143,6 +146,7 @@ export function useCreateFidelityBondWizard(
setSelectedJarIndex(undefined)
setSelectedUtxos([])
setFrozenUtxos([])
+ setUtxoPage(0)
setConfirmationChecked(false)
setTxResult(undefined)
setError(undefined)
@@ -162,16 +166,24 @@ export function useCreateFidelityBondWizard(
setStep('select_date')
break
case 'select_utxos':
- setStep('select_jar')
- setSelectedUtxos([])
+ if (jarsWithUtxos.length === 1) {
+ setSelectedJarIndex(undefined)
+ setSelectedUtxos([])
+ setStep('select_date')
+ } else {
+ setSelectedUtxos([])
+ setStep('select_jar')
+ }
break
case 'freeze_utxos':
+ setUtxoPage(0)
setStep('select_utxos')
break
case 'review':
if (utxosToFreeze.length > 0) {
setStep('freeze_utxos')
} else {
+ setUtxoPage(0)
setStep('select_utxos')
}
break
@@ -184,12 +196,14 @@ export function useCreateFidelityBondWizard(
case 'select_date':
if (jarsWithUtxos.length === 1) {
setSelectedJarIndex(jarsWithUtxos[0].jarIndex)
+ setUtxoPage(0)
setStep('select_utxos')
} else {
setStep('select_jar')
}
break
case 'select_jar':
+ setUtxoPage(0)
setStep('select_utxos')
break
case 'select_utxos':
@@ -324,6 +338,8 @@ export function useCreateFidelityBondWizard(
jarsWithUtxos,
selectedUtxos,
availableUtxos,
+ utxoPage,
+ setUtxoPage,
toggleUtxoSelection,
selectAllUtxos,
deselectAllUtxos,