From 368a58a07e92911a9912c240a60b7d3144f03e9d Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Mon, 30 May 2022 17:43:56 +0200 Subject: [PATCH 1/3] fix: initial loading flag in Send page correctly --- src/components/Send.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Send.jsx b/src/components/Send.jsx index e8a3e66b9..2ee1d8332 100644 --- a/src/components/Send.jsx +++ b/src/components/Send.jsx @@ -188,7 +188,7 @@ export default function Send() { ) const [alert, setAlert] = useState(null) - const [isLoading, setIsLoading] = useState(true) + const [isLoading, setIsLoading] = useState(!isOperationDisabled) const [isSending, setIsSending] = useState(false) const [isCoinjoin, setIsCoinjoin] = useState(IS_COINJOIN_DEFAULT_VAL) const [minNumCollaborators, setMinNumCollaborators] = useState(MINIMUM_MAKERS_DEFAULT_VAL) From 753ddab7301fefb5f210c79a1296f3f522729229 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Mon, 30 May 2022 18:10:19 +0200 Subject: [PATCH 2/3] refactor: infer loading state on Send page from initializing and waiting flags --- src/components/Send.jsx | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/src/components/Send.jsx b/src/components/Send.jsx index 2ee1d8332..6f885c8d0 100644 --- a/src/components/Send.jsx +++ b/src/components/Send.jsx @@ -181,14 +181,8 @@ export default function Send() { const isCoinjoinInProgress = useMemo(() => serviceInfo && serviceInfo.coinjoinInProgress, [serviceInfo]) const isMakerRunning = useMemo(() => serviceInfo && serviceInfo.makerRunning, [serviceInfo]) - const waitForTakerToFinish = useMemo(() => isCoinjoinInProgress, [isCoinjoinInProgress]) - const isOperationDisabled = useMemo( - () => isCoinjoinInProgress || isMakerRunning, - [isCoinjoinInProgress, isMakerRunning] - ) const [alert, setAlert] = useState(null) - const [isLoading, setIsLoading] = useState(!isOperationDisabled) const [isSending, setIsSending] = useState(false) const [isCoinjoin, setIsCoinjoin] = useState(IS_COINJOIN_DEFAULT_VAL) const [minNumCollaborators, setMinNumCollaborators] = useState(MINIMUM_MAKERS_DEFAULT_VAL) @@ -198,6 +192,16 @@ export default function Send() { const [paymentSuccessfulInfoAlert, setPaymentSuccessfulInfoAlert] = useState(null) const [takerStartedInfoAlert, setTakerStartedInfoAlert] = useState(null) + const isOperationDisabled = useMemo( + () => isCoinjoinInProgress || isMakerRunning || waitForUtxosToBeSpent.length > 0, + [isCoinjoinInProgress, isMakerRunning, waitForUtxosToBeSpent] + ) + const [isInitializing, setIsInitializing] = useState(!isOperationDisabled) + const isLoading = useMemo( + () => isInitializing || waitForUtxosToBeSpent.length > 0, + [isInitializing, waitForUtxosToBeSpent] + ) + useEffect(() => { setTakerStartedInfoAlert((current) => (isCoinjoinInProgress ? current : null)) }, [isCoinjoinInProgress]) @@ -263,7 +267,6 @@ export default function Send() { useEffect(() => { if (waitForUtxosToBeSpent.length === 0) return - setIsLoading(true) const abortCtrl = new AbortController() // Delaying the poll requests gives the wallet some time to synchronize @@ -279,7 +282,6 @@ export default function Send() { const outputs = data.data.utxos.utxos.map((it) => it.utxo) const utxosStillPresent = waitForUtxosToBeSpent.filter((it) => outputs.includes(it)) setWaitForUtxosToBeSpent([...utxosStillPresent]) - setIsLoading(utxosStillPresent.length > 0) }) .catch((err) => { if (abortCtrl.signal.aborted) return @@ -287,7 +289,6 @@ export default function Send() { // Stop waiting for wallet synchronization on errors, but inform // the user that loading the wallet info failed setWaitForUtxosToBeSpent([]) - setIsLoading(false) const message = err.message || t('send.error_loading_wallet_failed') setAlert({ variant: 'danger', message }) @@ -301,13 +302,15 @@ export default function Send() { }, [waitForUtxosToBeSpent, reloadCurrentWalletInfo, t]) useEffect(() => { - if (waitForTakerToFinish) return - if (waitForUtxosToBeSpent.length > 0) return + if (isOperationDisabled) { + setIsInitializing(false) + return + } const abortCtrl = new AbortController() setAlert(null) - setIsLoading(true) + setIsInitializing(true) // reloading service info is important, is it must be known as soon as possible // if the operation is even allowed, i.e. if no other service is running @@ -335,11 +338,11 @@ export default function Send() { }) Promise.all([loadingServiceInfo, loadingWalletInfoAndUtxos, loadingMinimumMakerConfig]).finally( - () => !abortCtrl.signal.aborted && setIsLoading(false) + () => !abortCtrl.signal.aborted && setIsInitializing(false) ) return () => abortCtrl.abort() - }, [waitForTakerToFinish, waitForUtxosToBeSpent, wallet, reloadCurrentWalletInfo, reloadServiceInfo, t]) + }, [isOperationDisabled, wallet, reloadCurrentWalletInfo, reloadServiceInfo, t]) const sendPayment = async (account, destination, amount_sats) => { setAlert(null) From fbde1bb73fdec6e1dadb928e84488a43010e2dca Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Tue, 31 May 2022 14:31:28 +0200 Subject: [PATCH 3/3] ui: always blur send page if service is running --- src/components/Send.jsx | 6 ++---- src/components/Send.module.css | 6 +++--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/Send.jsx b/src/components/Send.jsx index 6f885c8d0..3a7a61f1e 100644 --- a/src/components/Send.jsx +++ b/src/components/Send.jsx @@ -555,9 +555,7 @@ export default function Send() { return ( <> -
+
<> @@ -594,7 +592,7 @@ export default function Send() { {takerStartedInfoAlert.message} )} - + {settings.useAdvancedWalletMode ? t('send.label_account_dev_mode') : t('send.label_account')} diff --git a/src/components/Send.module.css b/src/components/Send.module.css index 5775b9fcc..cb7a7e320 100644 --- a/src/components/Send.module.css +++ b/src/components/Send.module.css @@ -118,15 +118,15 @@ input[type='number'] { border-radius: 0.25rem; } -.maker-running .maker-running-form { +.service-running .send-form { filter: blur(2px); } -.maker-running .collaborators-selector { +.service-running .collaborators-selector { filter: blur(2px); } -.maker-running .send-button { +.service-running .send-button { filter: blur(2px); }