From 2b820b6f6479822d1d48770d42a634676510e866 Mon Sep 17 00:00:00 2001 From: jackstar12 Date: Fri, 10 Jan 2025 17:17:03 +0100 Subject: [PATCH 1/4] refactor: split `RefundBtc` component from `RefundButton` --- src/components/RefundButton.tsx | 123 +++++++++++++++++--------------- 1 file changed, 67 insertions(+), 56 deletions(-) diff --git a/src/components/RefundButton.tsx b/src/components/RefundButton.tsx index 996455f0..173933d1 100644 --- a/src/components/RefundButton.tsx +++ b/src/components/RefundButton.tsx @@ -109,7 +109,7 @@ export const RefundEvm = (props: { ); }; -const RefundButton = (props: { +export const RefundBtc = (props: { swap: Accessor; setRefundTxId?: Setter; buttonOverride?: string; @@ -123,6 +123,7 @@ const RefundButton = (props: { t, } = useGlobalContext(); const { setSwap } = usePayContext(); + const [timeoutEta, setTimeoutEta] = createSignal(null); const [timeoutBlockheight, setTimeoutBlockheight] = createSignal< number | null @@ -234,6 +235,70 @@ const RefundButton = (props: { return transactionToRefund; }); + return ( + + + 0 || timeoutBlockheight() > 0}> + + +

+ {props.swap() + ? t("refund_address_header", { + asset: props.swap()?.assetSend, + }) + : t("refund_address_header_no_asset")} +

+ + setValid( + refundAddressChange(e, props.swap()?.assetSend), + ) + } + type="text" + name="refundAddress" + placeholder={ + props.swap() + ? t("onchain_address", { + asset: props.swap()?.assetSend, + }) + : t("onchain_address_no_asset") + } + /> + + + + + + + + + + ); +}; + +const RefundButton = (props: { + swap: Accessor; + setRefundTxId?: Setter; + buttonOverride?: string; +}) => { const [preimageHash] = createResource(async () => { return (await decodeInvoice((props.swap() as SubmarineSwap).invoice)) .preimageHash; @@ -295,61 +360,7 @@ const RefundButton = (props: { }> - - - 0 || timeoutBlockheight() > 0}> - - -

- {props.swap() - ? t("refund_address_header", { - asset: props.swap()?.assetSend, - }) - : t("refund_address_header_no_asset")} -

- - setValid( - refundAddressChange(e, props.swap()?.assetSend), - ) - } - type="text" - name="refundAddress" - placeholder={ - props.swap() - ? t("onchain_address", { - asset: props.swap()?.assetSend, - }) - : t("onchain_address_no_asset") - } - /> - - - - - - - - - + ); }; From 24b5fc111c2807eaf51f42dd253fac3ab40d2878 Mon Sep 17 00:00:00 2001 From: jackstar12 Date: Sat, 11 Jan 2025 08:26:18 +0100 Subject: [PATCH 2/4] refactor: refund address input --- src/components/RefundButton.tsx | 124 +++++++++++++++----------------- 1 file changed, 58 insertions(+), 66 deletions(-) diff --git a/src/components/RefundButton.tsx b/src/components/RefundButton.tsx index 173933d1..b65c35ce 100644 --- a/src/components/RefundButton.tsx +++ b/src/components/RefundButton.tsx @@ -3,15 +3,7 @@ import { OutputType } from "boltz-core"; import { Signature, TransactionResponse } from "ethers"; import { Network as LiquidNetwork } from "liquidjs-lib/src/networks"; import log from "loglevel"; -import { - Accessor, - Match, - Setter, - Show, - Switch, - createResource, - createSignal, -} from "solid-js"; +import { Accessor, Setter, Show, createResource, createSignal } from "solid-js"; import { ChainSwap, SubmarineSwap } from "src/utils/swapCreator"; import RefundEta from "../components/RefundEta"; @@ -136,6 +128,8 @@ export const RefundBtc = (props: { const input = evt.currentTarget as HTMLInputElement; const inputValue = input.value.trim(); + setRefundAddress(inputValue); + const lockupAddress = props.swap().type === SwapType.Submarine ? (props.swap() as SubmarineSwap).address @@ -143,7 +137,6 @@ export const RefundBtc = (props: { if (inputValue === lockupAddress) { log.debug("refunds to lockup address are blocked"); - input.setCustomValidity("lockup address"); return false; } try { @@ -152,14 +145,12 @@ export const RefundBtc = (props: { getNetwork(asset) as LiquidNetwork, ); input.setCustomValidity(""); - setRefundAddress(inputValue); return true; } catch (e) { log.debug("parsing refund address failed", e); input.setCustomValidity("invalid address"); + return false; } - - return false; }; const refundAction = async () => { @@ -235,62 +226,63 @@ export const RefundBtc = (props: { return transactionToRefund; }); + const buttonMessage = () => { + if (lockupTransaction.state == "errored") { + return t("no_lockup_transaction"); + } + if (valid() || !refundAddress() || !props.swap()) { + return t("refund"); + } + return t("invalid_address", { asset: props.swap()?.assetSend }); + }; + return ( - - - 0 || timeoutBlockheight() > 0}> - - -

- {props.swap() - ? t("refund_address_header", { + }> + 0 || timeoutBlockheight() > 0}> + + +

+ {props.swap() + ? t("refund_address_header", { + asset: props.swap()?.assetSend, + }) + : t("refund_address_header_no_asset")} +

+ + setValid(refundAddressChange(e, props.swap()?.assetSend)) + } + type="text" + name="refundAddress" + placeholder={ + props.swap() + ? t("onchain_address", { asset: props.swap()?.assetSend, }) - : t("refund_address_header_no_asset")} -

- - setValid( - refundAddressChange(e, props.swap()?.assetSend), - ) - } - type="text" - name="refundAddress" - placeholder={ - props.swap() - ? t("onchain_address", { - asset: props.swap()?.assetSend, - }) - : t("onchain_address_no_asset") - } - /> - - - - - - - - - + : t("onchain_address_no_asset") + } + /> + + ); }; From 57e05d0749c5aa9bd9e00ea4c070937a66b8762d Mon Sep 17 00:00:00 2001 From: jackstar12 Date: Sun, 12 Jan 2025 14:24:29 +0100 Subject: [PATCH 3/4] fix: check refund address in effect instead of input event handler to react to swap changes --- src/components/RefundButton.tsx | 50 +++++++++++++++++---------------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/src/components/RefundButton.tsx b/src/components/RefundButton.tsx index b65c35ce..d7f8fc39 100644 --- a/src/components/RefundButton.tsx +++ b/src/components/RefundButton.tsx @@ -3,7 +3,14 @@ import { OutputType } from "boltz-core"; import { Signature, TransactionResponse } from "ethers"; import { Network as LiquidNetwork } from "liquidjs-lib/src/networks"; import log from "loglevel"; -import { Accessor, Setter, Show, createResource, createSignal } from "solid-js"; +import { + Accessor, + Setter, + Show, + createEffect, + createResource, + createSignal, +} from "solid-js"; import { ChainSwap, SubmarineSwap } from "src/utils/swapCreator"; import RefundEta from "../components/RefundEta"; @@ -124,34 +131,31 @@ export const RefundBtc = (props: { const [valid, setValid] = createSignal(false); const [refundRunning, setRefundRunning] = createSignal(false); - const refundAddressChange = (evt: InputEvent, asset: string) => { - const input = evt.currentTarget as HTMLInputElement; - const inputValue = input.value.trim(); - - setRefundAddress(inputValue); + createEffect(() => { + const asset = props.swap()?.assetSend; + if (!asset) return; const lockupAddress = props.swap().type === SwapType.Submarine ? (props.swap() as SubmarineSwap).address : (props.swap() as ChainSwap).lockupDetails.lockupAddress; - if (inputValue === lockupAddress) { + if (refundAddress() === lockupAddress) { log.debug("refunds to lockup address are blocked"); - return false; - } - try { - getAddress(asset).toOutputScript( - inputValue, - getNetwork(asset) as LiquidNetwork, - ); - input.setCustomValidity(""); - return true; - } catch (e) { - log.debug("parsing refund address failed", e); - input.setCustomValidity("invalid address"); - return false; + setValid(false); + } else { + try { + getAddress(asset).toOutputScript( + refundAddress(), + getNetwork(asset) as LiquidNetwork, + ); + setValid(true); + } catch (e) { + log.debug("parsing refund address failed", e); + setValid(false); + } } - }; + }); const refundAction = async () => { setRefundRunning(true); @@ -262,9 +266,7 @@ export const RefundBtc = (props: { id="refundAddress" disabled={lockupTransaction.state == "errored"} value={refundAddress()} - onInput={(e) => - setValid(refundAddressChange(e, props.swap()?.assetSend)) - } + onInput={(e) => setRefundAddress(e.target.value.trim())} type="text" name="refundAddress" placeholder={ From 7969ca90a1aea5d7fa0bb8dec221492efe9b3ccb Mon Sep 17 00:00:00 2001 From: jackstar12 Date: Sun, 12 Jan 2025 14:26:05 +0100 Subject: [PATCH 4/4] chore: rm custom validity calls these messages are never displayed --- src/pages/RefundExternal.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/RefundExternal.tsx b/src/pages/RefundExternal.tsx index 9075403e..c069b020 100644 --- a/src/pages/RefundExternal.tsx +++ b/src/pages/RefundExternal.tsx @@ -54,14 +54,12 @@ export const RefundBtcLike = () => { } catch (e) { log.warn("Refund json validation failed", e); setRefundInvalid(RefundError.InvalidData); - input.setCustomValidity(t("invalid_refund_file")); } }; const uploadChange = async (e: Event) => { const input = e.currentTarget as HTMLInputElement; const inputFile = input.files[0]; - input.setCustomValidity(""); setRefundJson(null); setRefundInvalid(undefined); @@ -74,7 +72,6 @@ export const RefundBtcLike = () => { } catch (e) { log.error("invalid QR code upload", e); setRefundInvalid(RefundError.InvalidData); - input.setCustomValidity(t("invalid_refund_file")); } } else { try { @@ -83,7 +80,6 @@ export const RefundBtcLike = () => { } catch (e) { log.error("invalid file upload", e); setRefundInvalid(RefundError.InvalidData); - input.setCustomValidity(t("invalid_refund_file")); } } };