diff --git a/src/components/CreateButton.tsx b/src/components/CreateButton.tsx index 72f318e6..2d569e18 100644 --- a/src/components/CreateButton.tsx +++ b/src/components/CreateButton.tsx @@ -21,13 +21,12 @@ import { validateResponse } from "../utils/validation"; export const CreateButton = () => { const navigate = useNavigate(); const { + addSwap, denomination, pairs, + separator, setPairs, online, - swaps, - setSwaps, - separator, notify, ref, t, @@ -243,7 +242,7 @@ export const CreateButton = () => { navigate("/error/"); return; } - setSwaps(swaps().concat(data)); + addSwap(data); setInvoice(""); setInvoiceValid(false); setOnchainAddress(""); diff --git a/src/components/RefundButton.tsx b/src/components/RefundButton.tsx index fade43e7..3b6ff572 100644 --- a/src/components/RefundButton.tsx +++ b/src/components/RefundButton.tsx @@ -26,8 +26,8 @@ const RefundButton = ({ const { setNotificationType, setNotification, - swaps, - setSwaps, + getSwap, + updateSwap, setRefundAddress, refundAddress, t, @@ -36,13 +36,6 @@ const RefundButton = ({ if (swap() && swap().asset === RBTC) { const { getEtherSwap, getSigner } = useWeb3Signer(); - const updateSwaps = (cb: any) => { - const swapsTmp = swaps(); - const currentSwap = swapsTmp.find((s: any) => swap().id === s.id); - cb(currentSwap); - setSwaps(swapsTmp); - }; - return ( { @@ -86,7 +79,8 @@ const RefundButton = ({ ); } - updateSwaps((current: any) => (current.refundTx = tx.hash)); + currentSwap.refundTx = tx.hash; + updateSwap(currentSwap); await tx.wait(1); }} buttonText={t("refund")} @@ -143,10 +137,9 @@ const RefundButton = ({ // only if the swaps was not initiated with the refund json // refundjson has no date if (res.date !== undefined) { - const swapsTmp = swaps(); - const currentSwap = swapsTmp.find((s: any) => res.id === s.id); + const currentSwap = getSwap(res.id); currentSwap.refundTx = res.refundTx; - setSwaps(swapsTmp); + updateSwap(currentSwap); } else { if (setRefundTxId) { setRefundTxId(res.refundTx); diff --git a/src/components/SwapChecker.tsx b/src/components/SwapChecker.tsx index ca6b94d0..846ef4ce 100644 --- a/src/components/SwapChecker.tsx +++ b/src/components/SwapChecker.tsx @@ -124,7 +124,8 @@ export const SwapChecker = () => { setTimeoutEta, setTimeoutBlockheight, } = usePayContext(); - const { notify, updateSwapStatus, swaps, setSwaps } = useGlobalContext(); + const { notify, updateSwapStatus, getSwap, getSwaps, updateSwap } = + useGlobalContext(); const assetWebsocket = new Map(); @@ -152,7 +153,7 @@ export const SwapChecker = () => { }; const prepareSwap = (swapId: string, data: any) => { - const currentSwap = swaps().find((s: any) => swapId === s.id); + const currentSwap = getSwap(swapId); if (currentSwap === undefined) { log.warn(`prepareSwap: swap ${swapId} not found`); return; @@ -167,7 +168,7 @@ export const SwapChecker = () => { }; const claimSwap = async (swapId: string, data: any) => { - const currentSwap = swaps().find((s) => swapId === s.id); + const currentSwap = getSwap(swapId); if (currentSwap === undefined) { log.warn(`claimSwap: swap ${swapId} not found`); return; @@ -198,10 +199,9 @@ export const SwapChecker = () => { ) { try { const res = await claim(currentSwap, data.transaction); - const swapsTmp = swaps(); - const claimedSwap = swapsTmp.find((s) => res.id === s.id); + const claimedSwap = getSwap(res.id); claimedSwap.claimTx = res.claimTx; - setSwaps(swapsTmp); + updateSwap(claimedSwap); notify("success", `swap ${res.id} claimed`); } catch (e) { log.warn("swapchecker failed to claim swap", e); @@ -227,7 +227,7 @@ export const SwapChecker = () => { urlsToAsset.set(url, (urlsToAsset.get(url) || []).concat(asset)); } - const swapsToCheck = swaps() + const swapsToCheck = getSwaps() .filter( (s) => !swapStatusFinal.includes(s.status) || diff --git a/src/components/SwapList.tsx b/src/components/SwapList.tsx index 20a2d95c..58f73da2 100644 --- a/src/components/SwapList.tsx +++ b/src/components/SwapList.tsx @@ -21,7 +21,7 @@ const SwapList = ({ deleteButton?: boolean; }) => { const navigate = useNavigate(); - const { t } = useGlobalContext(); + const { deleteSwap, t } = useGlobalContext(); const [sortedSwaps, setSortedSwaps] = createSignal([]); const [lastSwap, setLastSwap] = createSignal(); @@ -39,12 +39,9 @@ const SwapList = ({ return date.toLocaleDateString(); }; - const deleteSwap = (swapId: string) => { - if ( - setSwapSignal !== undefined && - confirm(t("delete_localstorage_single_swap", { id: swapId })) - ) { - setSwapSignal(swapsSignal().filter((s: any) => s.id !== swapId)); + const deleteSwapAction = (swapId: string) => { + if (confirm(t("delete_localstorage_single_swap", { id: swapId }))) { + deleteSwap(swapId); } }; @@ -74,7 +71,7 @@ const SwapList = ({ deleteSwap(swap.id)}> + onClick={() => deleteSwapAction(swap.id)}> {t("delete")} diff --git a/src/context/Global.tsx b/src/context/Global.tsx index eeba98fb..aaa24350 100644 --- a/src/context/Global.tsx +++ b/src/context/Global.tsx @@ -48,8 +48,6 @@ export type GlobalContextType = { setI18nConfigured: Setter; denomination: Accessor; setDenomination: Setter; - swaps: Accessor; - setSwaps: Setter; hideHero: Accessor; setHideHero: Setter; embedded: Accessor; @@ -61,6 +59,11 @@ export type GlobalContextType = { notify: (type: string, message: string) => void; fetchPairs: (asset?: string) => void; updateSwapStatus: (id: string, newStatus: string) => boolean; + addSwap: (swap: any) => void; + updateSwap: (swap: any) => void; + getSwap: (id: string) => any; + getSwaps: () => any[]; + deleteSwap: (id: string) => void; }; // Local storage serializer to support the values created by the deprecated "createStorageSignal" @@ -150,14 +153,45 @@ const GlobalProvider = (props: { children: any }) => { }); }; + const addSwap = (swap: any) => { + setSwaps(getSwaps().concat(swap)); + }; + + const deleteSwap = (id: string) => { + setSwaps(getSwaps().filter((s: any) => s.id !== id)); + }; + + const updateSwap = (swap: any) => { + const swapsTmp = getSwaps(); + const index = swapsTmp.findIndex((s: any) => s.id === swap.id); + swapsTmp[index] = swap; + setSwaps(swapsTmp); + }; + + const getSwap = (id: string) => { + return getSwaps().find((s: any) => s.id === id); + }; + + const getSwaps = () => { + const tmpSwaps = swaps(); + try { + // check if the local storage is different + const localSwapsJson = localStorage.getItem("swaps"); + if (localSwapsJson && localSwapsJson !== JSON.stringify(tmpSwaps)) { + const localSwaps = JSON.parse(localSwapsJson); + setSwaps(localSwaps); + return localSwaps; + } + } catch {} + return tmpSwaps; + }; + const updateSwapStatus = (id: string, newStatus: string) => { if (swapStatusFinal.includes(newStatus)) { - const swapsTmp = swaps(); - const swap = swapsTmp.find((swap) => swap.id === id); - + const swap = getSwap(id); if (swap.status !== newStatus) { swap.status = newStatus; - setSwaps(swapsTmp); + updateSwap(swap); return true; } } @@ -224,8 +258,6 @@ const GlobalProvider = (props: { children: any }) => { setI18nConfigured, denomination, setDenomination, - swaps, - setSwaps, hideHero, setHideHero, embedded, @@ -237,6 +269,11 @@ const GlobalProvider = (props: { children: any }) => { notify, fetchPairs, updateSwapStatus, + addSwap, + updateSwap, + getSwap, + deleteSwap, + getSwaps, }}> {props.children} diff --git a/src/pages/History.tsx b/src/pages/History.tsx index 9081e928..f78959e3 100644 --- a/src/pages/History.tsx +++ b/src/pages/History.tsx @@ -24,8 +24,14 @@ const History = () => { let importRef: HTMLInputElement; - const { swaps, setSwaps, setNotification, setNotificationType, t } = - useGlobalContext(); + const { + swaps, + setSwaps, + getSwaps, + setNotification, + setNotificationType, + t, + } = useGlobalContext(); const deleteLocalStorage = () => { if (confirm(t("delete_localstorage"))) { @@ -34,7 +40,10 @@ const History = () => { }; const backupLocalStorage = () => { - downloadJson(`boltz-backup-${Math.floor(Date.now() / 1000)}`, swaps()); + downloadJson( + `boltz-backup-${Math.floor(Date.now() / 1000)}`, + getSwaps(), + ); }; const importLocalStorage = (e: Event) => { @@ -85,11 +94,7 @@ const History = () => { }> - +
0}> diff --git a/src/pages/Pay.tsx b/src/pages/Pay.tsx index 6fd8a21a..3f3e6142 100644 --- a/src/pages/Pay.tsx +++ b/src/pages/Pay.tsx @@ -29,7 +29,7 @@ const Pay = () => { const [contractTransactionType, setContractTransactionType] = createSignal("lockup_tx"); - const { swaps, t } = useGlobalContext(); + const { getSwap, t } = useGlobalContext(); const { swap, setSwap, @@ -41,22 +41,14 @@ const Pay = () => { } = usePayContext(); createEffect(async () => { - let tmpSwaps = swaps(); - if (tmpSwaps) { - const currentSwap = tmpSwaps - .filter((s) => s.id === params.id) - .pop(); - if (currentSwap) { - log.debug("selecting swap", currentSwap); - setSwap(currentSwap); - const res = await getSwapStatus( - currentSwap.asset, - currentSwap.id, - ); - setSwapStatus(res.status); - setSwapStatusTransaction(res.transaction); - setFailureReason(res.failureReason); - } + const currentSwap = getSwap(params.id); + if (currentSwap) { + log.debug("selecting swap", currentSwap); + setSwap(currentSwap); + const res = await getSwapStatus(currentSwap.asset, currentSwap.id); + setSwapStatus(res.status); + setSwapStatusTransaction(res.transaction); + setFailureReason(res.failureReason); } }); diff --git a/src/pages/Refund.tsx b/src/pages/Refund.tsx index 4d3e3fff..58beffc6 100644 --- a/src/pages/Refund.tsx +++ b/src/pages/Refund.tsx @@ -16,7 +16,8 @@ import ErrorWasm from "./ErrorWasm"; const Refund = () => { const navigate = useNavigate(); - const { updateSwapStatus, wasmSupported, swaps, t } = useGlobalContext(); + const { getSwap, getSwaps, updateSwapStatus, wasmSupported, t } = + useGlobalContext(); const { setTimeoutEta, setTimeoutBlockheight } = usePayContext(); const [swapFound, setSwapFound] = createSignal(null); @@ -32,7 +33,7 @@ const Refund = () => { // When the swap id is found in the local storage, there is no need for the validation, // all relevant data is there already and we just need to show the button to redirect - const localStorageSwap = swaps().find((s: any) => s.id === json.id); + const localStorageSwap = getSwap(json.id); if (localStorageSwap !== undefined) { setSwapFound(json.id); return; @@ -97,7 +98,7 @@ const Refund = () => { }; onMount(() => { - const swapsToRefund = swaps() + const swapsToRefund = getSwaps() .filter(refundSwapsSanityFilter) .filter((swap) => [ @@ -107,7 +108,7 @@ const Refund = () => { ); setRefundableSwaps(swapsToRefund); - swaps() + getSwaps() .filter(refundSwapsSanityFilter) .filter( (swap) => diff --git a/src/pages/RefundStep.tsx b/src/pages/RefundStep.tsx index d96024f7..177509cf 100644 --- a/src/pages/RefundStep.tsx +++ b/src/pages/RefundStep.tsx @@ -10,16 +10,13 @@ const RefundStep = () => { const params = useParams(); const navigate = useNavigate(); const { setSwap } = usePayContext(); - const { swaps, t } = useGlobalContext(); + const { getSwap, t } = useGlobalContext(); createEffect(() => { - let tmpSwaps = swaps(); - if (tmpSwaps) { - let currentSwap = tmpSwaps.filter((s) => s.id === params.id).pop(); - if (currentSwap) { - log.debug("selecting swap", currentSwap); - setSwap(currentSwap); - } + const currentSwap = getSwap(params.id); + if (currentSwap) { + log.debug("selecting swap", currentSwap); + setSwap(currentSwap); } }); diff --git a/src/status/InvoiceSet.tsx b/src/status/InvoiceSet.tsx index dfdf3874..40097614 100644 --- a/src/status/InvoiceSet.tsx +++ b/src/status/InvoiceSet.tsx @@ -17,7 +17,7 @@ import { prefix0x, satoshiToWei } from "../utils/rootstock"; const InvoiceSet = () => { const { swap } = usePayContext(); const { asset } = useCreateContext(); - const { t, separator, swaps, setSwaps, denomination } = useGlobalContext(); + const { t, getSwap, updateSwap, denomination, separator } = useGlobalContext(); if (asset() === RBTC) { const { getEtherSwap } = useWeb3Signer(); @@ -36,12 +36,9 @@ const InvoiceSet = () => { }, ); - const swapsTmp = swaps(); - const currentSwap = swapsTmp.find( - (s) => swap().id === s.id, - ); + const currentSwap = getSwap(swap().id); currentSwap.lockupTx = tx.hash; - setSwaps(swapsTmp); + updateSwap(currentSwap); }} buttonText={t("send")} promptText={t("transaction_prompt", { button: t("send") })} diff --git a/src/status/TransactionConfirmed.tsx b/src/status/TransactionConfirmed.tsx index d1bb4882..142cff96 100644 --- a/src/status/TransactionConfirmed.tsx +++ b/src/status/TransactionConfirmed.tsx @@ -10,7 +10,7 @@ import { prefix0x, satoshiToWei } from "../utils/rootstock"; const TransactionConfirmed = () => { const { swap } = usePayContext(); const { asset } = useCreateContext(); - const { t, swaps, setSwaps } = useGlobalContext(); + const { t, getSwap, updateSwap } = useGlobalContext(); if (asset() === RBTC) { const { getEtherSwap } = useWeb3Signer(); @@ -27,13 +27,9 @@ const TransactionConfirmed = () => { swap().refundAddress, swap().timeoutBlockHeight, ); - - const swapsTmp = swaps(); - const currentSwap = swapsTmp.find( - (s: any) => swap().id === s.id, - ); + const currentSwap = getSwap(swap().id); currentSwap.claimTx = tx.hash; - setSwaps(swapsTmp); + updateSwap(currentSwap); }} buttonText={t("claim")} promptText={t("transaction_prompt", { button: t("claim") })} diff --git a/tests/pages/Refund.spec.tsx b/tests/pages/Refund.spec.tsx index 5697e696..5e49aed1 100644 --- a/tests/pages/Refund.spec.tsx +++ b/tests/pages/Refund.spec.tsx @@ -108,7 +108,7 @@ describe("Refund", () => { id: "123", privateKey: "", }; - globalSignals.setSwaps([swap]); + globalSignals.addSwap(swap); const refundFrame = (await screen.findByTestId( "refundFrame", )) as HTMLDivElement;