- {unFrozenUtxos.length !== 0
- ? t('show_utxos.show_utxo_subtitle')
- : t('show_utxos.show_utxo_subtitle_when_allutxos_are_frozen')}
+
+ {isLoading ? (
+
+
+
{t('earn.fidelity_bond.text_loading')}
-
-
{t('earn.fidelity_bond.text_loading')}
-
+
+ onCancel()}
+ className="d-flex flex-1 justify-content-center align-items-center"
+ >
+
+ {t('modal.confirm_button_reject')}
+
+ onConfirm(selectedUtxos)}
+ disabled={isLoading}
+ className="d-flex flex-1 justify-content-center align-items-center"
+ >
+ {t('modal.confirm_button_accept')}
+
+
+
)
}
-export { ShowUtxos, Divider, UtxoListDisplay, UtxoRow }
+export { ShowUtxos, UtxoListDisplay }
diff --git a/src/components/Send/SourceJarSelector.tsx b/src/components/Send/SourceJarSelector.tsx
index af6e9ccb5..a6e8e516b 100644
--- a/src/components/Send/SourceJarSelector.tsx
+++ b/src/components/Send/SourceJarSelector.tsx
@@ -1,9 +1,9 @@
-import { useState, useMemo, useCallback, useEffect } from 'react'
+import { useState, useMemo, useCallback } from 'react'
import { useField, useFormikContext } from 'formik'
import * as rb from 'react-bootstrap'
import { jarFillLevel, SelectableJar } from '../jars/Jar'
import { noop } from '../../utils'
-import { WalletInfo, CurrentWallet, useReloadCurrentWalletInfo, Utxo } from '../../context/WalletContext'
+import { WalletInfo, CurrentWallet, useReloadCurrentWalletInfo, Utxos } from '../../context/WalletContext'
import styles from './SourceJarSelector.module.css'
import { ShowUtxos } from './ShowUtxos'
import { useTranslation } from 'react-i18next'
@@ -21,12 +21,11 @@ export type SourceJarSelectorProps = {
}
interface ShowUtxosProps {
- jarIndex?: string
- isOpen?: boolean
+ utxos: Utxos
+ isLoading: boolean
+ alert?: SimpleAlert
}
-export type UtxoList = Utxo[]
-
export const SourceJarSelector = ({
name,
label,
@@ -41,11 +40,9 @@ export const SourceJarSelector = ({
const form = useFormikContext
()
const reloadCurrentWalletInfo = useReloadCurrentWalletInfo()
- const [showUtxos, setShowUtxos] = useState(undefined)
- const [alert, setAlert] = useState(undefined)
- const [isUtxosLoading, setIsUtxosLoading] = useState(false)
- const [unFrozenUtxos, setUnFrozenUtxos] = useState([])
- const [frozenUtxos, setFrozenUtxos] = useState([])
+ const [showUtxos, setShowUtxos] = useState()
+ //const [unFrozenUtxos, setUnFrozenUtxos] = useState([])
+ //const [frozenUtxos, setFrozenUtxos] = useState([])
const jarBalances = useMemo(() => {
if (!walletInfo) return []
@@ -54,24 +51,7 @@ export const SourceJarSelector = ({
)
}, [walletInfo])
- useEffect(() => {
- if (showUtxos?.jarIndex && walletInfo?.utxosByJar) {
- const data = Object.entries(walletInfo.utxosByJar).find(([key]) => key === showUtxos.jarIndex)
- const utxos: any = data ? data[1] : []
-
- const frozenUtxoList = utxos
- .filter((utxo: any) => utxo.frozen)
- .map((utxo: any) => ({ ...utxo, id: utxo.utxo, checked: false }))
- const unFrozenUtxosList = utxos
- .filter((utxo: any) => !utxo.frozen)
- .map((utxo: any) => ({ ...utxo, id: utxo.utxo, checked: true }))
-
- setFrozenUtxos(frozenUtxoList)
- setUnFrozenUtxos(unFrozenUtxosList)
- }
- }, [walletInfo, showUtxos?.jarIndex, t])
-
- useEffect(() => {
+ /*useEffect(() => {
if (frozenUtxos.length === 0 && unFrozenUtxos.length === 0) {
return
}
@@ -90,37 +70,44 @@ export const SourceJarSelector = ({
} else {
setAlert(undefined)
}
- }, [frozenUtxos, unFrozenUtxos, t, setAlert])
-
- const handleUtxosFrozenState = useCallback(async () => {
- const abortCtrl = new AbortController()
- const frozenUtxosToUpdate = frozenUtxos
- .filter((utxo) => utxo.checked && !utxo.locktime)
- .map((utxo) => ({ utxo: utxo.utxo, freeze: false }))
- const unFrozenUtxosToUpdate = unFrozenUtxos
- .filter((utxo) => !utxo.checked)
- .map((utxo) => ({ utxo: utxo.utxo, freeze: true }))
-
- try {
- const res = await Promise.all([
- ...frozenUtxosToUpdate.map((utxo) => Api.postFreeze({ ...wallet, signal: abortCtrl.signal }, utxo)),
- ...unFrozenUtxosToUpdate.map((utxo) => Api.postFreeze({ ...wallet, signal: abortCtrl.signal }, utxo)),
- ])
-
- if (res.length !== 0) {
- setIsUtxosLoading(true)
- await reloadCurrentWalletInfo.reloadUtxos({ signal: abortCtrl.signal })
- }
-
- setShowUtxos(undefined)
- } catch (err: any) {
- if (!abortCtrl.signal.aborted) {
- setAlert({ variant: 'danger', message: err.message, dismissible: true })
+ }, [frozenUtxos, unFrozenUtxos, t, setAlert])*/
+
+ const handleUtxosFrozenState = useCallback(
+ async (selectedUtxos: Utxos) => {
+ if (!showUtxos) return
+
+ const abortCtrl = new AbortController()
+
+ const selectedUtxosIds = selectedUtxos.map((it) => it.utxo)
+ const frozenUtxosToUnfreeze = selectedUtxos.filter((utxo) => utxo.frozen)
+ const unfrozenUtxosToFreeze = showUtxos.utxos
+ .filter((utxo) => !utxo.frozen)
+ .filter((it) => !selectedUtxosIds.includes(it.utxo))
+
+ try {
+ setShowUtxos({ ...showUtxos, isLoading: true, alert: undefined })
+
+ const res = await Promise.all([
+ ...frozenUtxosToUnfreeze.map((utxo) =>
+ Api.postFreeze({ ...wallet, signal: abortCtrl.signal }, { utxo: utxo.utxo, freeze: false }),
+ ),
+ ...unfrozenUtxosToFreeze.map((utxo) =>
+ Api.postFreeze({ ...wallet, signal: abortCtrl.signal }, { utxo: utxo.utxo, freeze: true }),
+ ),
+ ])
+
+ if (res.length !== 0) {
+ await reloadCurrentWalletInfo.reloadUtxos({ signal: abortCtrl.signal })
+ }
+
+ setShowUtxos(undefined)
+ } catch (err: any) {
+ if (abortCtrl.signal.aborted) return
+ setShowUtxos({ ...showUtxos, isLoading: false, alert: { variant: 'danger', message: err.message } })
}
- } finally {
- setIsUtxosLoading(false)
- }
- }, [frozenUtxos, unFrozenUtxos, wallet, reloadCurrentWalletInfo])
+ },
+ [showUtxos, wallet, reloadCurrentWalletInfo],
+ )
return (
<>
@@ -132,19 +119,14 @@ export const SourceJarSelector = ({
) : (
- {showUtxos?.isOpen && (
+ {showUtxos && (
{
- setShowUtxos(undefined)
- }}
- alert={alert}
- isLoading={isUtxosLoading}
- frozenUtxos={frozenUtxos}
- unFrozenUtxos={unFrozenUtxos}
- setFrozenUtxos={setFrozenUtxos}
- setUnFrozenUtxos={setUnFrozenUtxos}
+ onCancel={() => setShowUtxos(undefined)}
/>
)}
{jarBalances.map((it) => {
@@ -163,7 +145,7 @@ export const SourceJarSelector = ({
walletInfo.balanceSummary.calculatedTotalBalanceInSats,
)}
variant={it.accountIndex === field.value ? variant : undefined}
- onClick={(jarIndex: number) => {
+ onClick={(jarIndex) => {
form.setFieldValue(field.name, jarIndex, true)
if (
it.accountIndex === field.value &&
@@ -172,8 +154,8 @@ export const SourceJarSelector = ({
it.calculatedTotalBalanceInSats > 0
) {
setShowUtxos({
- jarIndex: it.accountIndex.toString(),
- isOpen: true,
+ utxos: walletInfo.utxosByJar[it.accountIndex],
+ isLoading: false,
})
}
}}
diff --git a/src/components/fb2/FidelityBondSteps.tsx b/src/components/fb2/FidelityBondSteps.tsx
index 384e835f6..8ed0bb445 100644
--- a/src/components/fb2/FidelityBondSteps.tsx
+++ b/src/components/fb2/FidelityBondSteps.tsx
@@ -13,9 +13,8 @@ import { CopyButton } from '../CopyButton'
import LockdateForm, { LockdateFormProps } from './LockdateForm'
import * as fb from './utils'
import styles from './FidelityBondSteps.module.css'
-import { UtxoListDisplay, Divider } from '../Send/ShowUtxos'
-
-type UtxoList = Array
+import { UtxoListDisplay } from '../Send/ShowUtxos'
+import Divider from '../Divider'
type SelectDateProps = {
description: string
@@ -92,13 +91,15 @@ const SelectJar = ({
)
}
+type SelectableUtxo = Utxo & { checked: boolean; selectable: boolean }
+
const SelectUtxos = ({ selectedUtxos, utxos, onUtxoSelected, onUtxoDeselected }: SelectUtxosProps) => {
// const { t } = useTranslation()
const settings = useSettings()
// const [alert, setAlert] = useState(undefined)
const [showFrozenUtxos, setShowFrozenUtxos] = useState(false)
- const [unFrozenUtxos, setUnFrozenUtxos] = useState([])
- const [frozenUtxos, setFrozenUtxos] = useState([])
+ const [unFrozenUtxos, setUnFrozenUtxos] = useState([])
+ const [frozenUtxos, setFrozenUtxos] = useState([])
// const [isLoading, setisLoading] = useState(true)
const loadData = useCallback(() => {
@@ -146,7 +147,7 @@ const SelectUtxos = ({ selectedUtxos, utxos, onUtxoSelected, onUtxoDeselected }:
loadData()
}, [loadData])
- const handleToggle = (utxoIndex: number, utxo: Utxo) => {
+ const handleToggle = (utxo: SelectableUtxo) => {
utxo.checked = !utxo.checked
if (utxo.checked) {
onUtxoSelected(utxo)
@@ -158,28 +159,16 @@ const SelectUtxos = ({ selectedUtxos, utxos, onUtxoSelected, onUtxoDeselected }:
return (
<>
-
+
{frozenUtxos.length > 0 && (
setShowFrozenUtxos((current) => !current)}
className={`mt-4 ${showFrozenUtxos && 'mb-4'}`}
/>
)}
{showFrozenUtxos && (
-
+
)}