prevent window exit if txStatus is pending (#173)

* prevent window exit if txStatus is pending * extract useEffect to hook * use `useBeforeUnload` * use `TxStatus` type
cennznet · Apr 27, 2022 · 2e20d73 · 2e20d73
1 parent 850cad7
commit 2e20d73
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 15 deletions.
diff --git a/components/BridgeProgress.tsx b/components/BridgeProgress.tsx
@@ -9,6 +9,7 @@ import StandardButton from "@/components/shared/StandardButton";
 import ProgressOverlay from "@/components/shared/ProgressOverlay";
 import Link from "@/components/Link";
 import { Balance, selectMap } from "@/utils";
+import { useBeforeUnload } from "@/hooks";
 
 interface BridgeProgressProps {}
 
@@ -20,6 +21,8 @@ const BridgeProgress: VFC<IntrinsicElements["div"] & BridgeProgressProps> = (
 	const dismissible =
 		txStatus?.status === "Success" || txStatus?.status === "Failure";
 
+	useBeforeUnload(txStatus);
+
 	return (
 		<ProgressOverlay
 			onRequestClose={setTxIdle}

diff --git a/components/PoolProgress.tsx b/components/PoolProgress.tsx
@@ -9,6 +9,7 @@ import StandardButton from "@/components/shared/StandardButton";
 import Link from "@/components/Link";
 import ProgressOverlay from "@/components/shared/ProgressOverlay";
 import { Balance, selectMap } from "@/utils";
+import { useBeforeUnload } from "@/hooks";
 
 interface PoolProgressProps {}
 
@@ -20,6 +21,8 @@ const PoolProgress: VFC<IntrinsicElements["div"] & PoolProgressProps> = (
 	const dismissible =
 		txStatus?.status === "Success" || txStatus?.status === "Failure";
 
+	useBeforeUnload(txStatus);
+
 	return (
 		<ProgressOverlay
 			onRequestClose={setTxIdle}

diff --git a/components/SwapProgress.tsx b/components/SwapProgress.tsx
@@ -9,6 +9,7 @@ import StandardButton from "@/components/shared/StandardButton";
 import { Balance, selectMap } from "@/utils";
 import Link from "@/components/Link";
 import ProgressOverlay from "@/components/shared/ProgressOverlay";
+import { useBeforeUnload } from "@/hooks";
 
 interface SwapProgressProps {}
 
@@ -20,6 +21,8 @@ const SwapProgress: VFC<IntrinsicElements["div"] & SwapProgressProps> = (
 	const dismissible =
 		txStatus?.status === "Success" || txStatus?.status === "Failure";
 
+	useBeforeUnload(txStatus);
+
 	return (
 		<ProgressOverlay
 			onRequestClose={setTxIdle}

diff --git a/hooks/index.ts b/hooks/index.ts
@@ -16,6 +16,7 @@ export { default as useTxStatus } from "@/hooks/useTxStatus";
 export { default as useDepositRequest } from "@/hooks/useDepositRequest";
 export { default as useWithdrawRequest } from "@/hooks/useWithdrawRequest";
 export { default as useHistoricalWithdrawRequest } from "@/hooks/useHistoricalWithdrawRequest";
+export { default as useBeforeUnload } from "@/hooks/useBeforeUnload";
 
 export type { TokenInputHook } from "@/hooks/useTokenInput";
 export type { PoolExchangeInfoHook } from "@/hooks/usePoolExchangeInfo";

diff --git a/hooks/useBeforeUnload.ts b/hooks/useBeforeUnload.ts
@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { TxStatus } from "@/types";
+
+export default function useBeforeUnload(txStatus: TxStatus) {
+	useEffect(() => {
+		const beforeUnload = (event: BeforeUnloadEvent) => {
+			event.preventDefault();
+			if (txStatus?.status === "Pending") return (event.returnValue = "");
+		};
+
+		window.addEventListener("beforeunload", beforeUnload);
+
+		return () => window.removeEventListener("beforeunload", beforeUnload);
+	}, [txStatus]);
+}
diff --git a/hooks/useTxStatus.ts b/hooks/useTxStatus.ts
@@ -1,11 +1,5 @@
 import { useCallback, useState } from "react";
-
-type TxType = "Idle" | "Pending" | "Success" | "Failure";
-
-interface TxStatus {
-	status: TxType;
-	props?: any;
-}
+import { TxStatus, TxType } from "@/types";
 
 export interface TxStatusHook {
 	txStatus: TxStatus;

diff --git a/providers/PoolProvider.tsx b/providers/PoolProvider.tsx
@@ -1,4 +1,4 @@
-import { CENNZAsset, PoolAction, TxStatus } from "@/types";
+import { CENNZAsset, PoolAction } from "@/types";
 import {
 	createContext,
 	Dispatch,

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -6,7 +6,6 @@ import {
 	HTMLAttributes,
 	HTMLFormElement,
 	InputHTMLAttributes,
-	ReactElement,
 } from "react";
 
 export type BridgeChain = "Ethereum" | "CENNZnet";
@@ -65,12 +64,6 @@ export interface MetaMaskAccount {
 	address: string;
 }
 
-export interface TxStatus {
-	status: "in-progress" | "success" | "fail";
-	title: string | ReactElement;
-	message: string | ReactElement;
-}
-
 export type RelayerStatus =
 	| "Successful"
 	| "Failed"
@@ -108,3 +101,10 @@ export interface HistoricalEventProof {
 	s: string[];
 	v: number[];
 }
+
+export type TxType = "Idle" | "Pending" | "Success" | "Failure";
+
+export interface TxStatus {
+	status: TxType;
+	props?: any;
+}