From 2e20d73c69b2477ed169824324ece7f35e3db0f9 Mon Sep 17 00:00:00 2001
From: Aidan Starke <52016903+aidan-starke@users.noreply.github.com>
Date: Wed, 27 Apr 2022 14:00:00 +1200
Subject: [PATCH] prevent window exit if txStatus is pending (#173)

* prevent window exit if txStatus is pending

* extract useEffect to hook

* use `useBeforeUnload`

* use `TxStatus` type
---
 components/BridgeProgress.tsx |  3 +++
 components/PoolProgress.tsx   |  3 +++
 components/SwapProgress.tsx   |  3 +++
 hooks/index.ts                |  1 +
 hooks/useBeforeUnload.ts      | 15 +++++++++++++++
 hooks/useTxStatus.ts          |  8 +-------
 providers/PoolProvider.tsx    |  2 +-
 types/index.d.ts              | 14 +++++++-------
 8 files changed, 34 insertions(+), 15 deletions(-)
 create mode 100644 hooks/useBeforeUnload.ts

diff --git a/components/BridgeProgress.tsx b/components/BridgeProgress.tsx
index 381c85bd..a9d26976 100644
--- 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
index 5c5a7656..7b51b997 100644
--- 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
index 03151d1b..1d3cfd7c 100644
--- 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
index ba384314..5957522b 100644
--- 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
new file mode 100644
index 00000000..4de8d8da
--- /dev/null
+++ 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
index b7cf6f33..4d564e54 100644
--- 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
index 22c72281..78da934f 100644
--- 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
index 276ef483..2ed6b0d1 100644
--- 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;
+}