From 5984a1c867a9040359dc27da5ece818b7f9875ab Mon Sep 17 00:00:00 2001
From: J M Rossy <jm.rossy@gmail.com>
Date: Sun, 8 Dec 2024 12:07:20 -0500
Subject: [PATCH] Hijack browser back event in BackButton

---
 src/components/buttons/BackButton.tsx | 14 +++++++++++++-
 src/flows/CardFlow.tsx                |  3 +++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/buttons/BackButton.tsx b/src/components/buttons/BackButton.tsx
index 1fd948d..0caaa6a 100644
--- a/src/components/buttons/BackButton.tsx
+++ b/src/components/buttons/BackButton.tsx
@@ -1,5 +1,5 @@
 import { ArrowIcon, Button } from '@hyperlane-xyz/widgets';
-import { ComponentProps } from 'react';
+import { ComponentProps, useEffect } from 'react';
 import { CardPage } from '../../flows/CardPage';
 import { useCardNav } from '../../flows/hooks';
 import { Color } from '../../styles/Color';
@@ -7,6 +7,18 @@ import { Color } from '../../styles/Color';
 export function BackButton({ page, ...rest }: ComponentProps<typeof Button> & { page: CardPage }) {
   const { setPage } = useCardNav();
 
+  // TODO instead of hijacking the back event, a more idiomatic approach would be to
+  // migrate the app to the AppRouter structure and then use pages instead of CardNav
+  useEffect(() => {
+    history.pushState(null, '', location.href);
+    const onBackEvent = () => {
+      history.pushState(null, '', location.href);
+      setPage(page);
+    };
+    window.addEventListener('popstate', onBackEvent);
+    return () => window.removeEventListener('popstate', onBackEvent);
+  }, [page, setPage]);
+
   return (
     <Button onClick={() => setPage(page)} {...rest} className="flex items-center gap-0.5">
       <ArrowIcon direction="w" width={30} height={20} color={Color.accent['500']} />
diff --git a/src/flows/CardFlow.tsx b/src/flows/CardFlow.tsx
index 13d319b..5f0aa50 100644
--- a/src/flows/CardFlow.tsx
+++ b/src/flows/CardFlow.tsx
@@ -4,6 +4,9 @@ import { CardPage } from './CardPage';
 import { LandingPage } from './LandingCard';
 import { useCardNav } from './hooks';
 
+// TODO instead of this somewhat custom approach, a more idiomatic approach would be to
+// migrate the app to the AppRouter structure and then use pages instead of CardNav.
+// But animations may be more difficult and the AppRouter is tricky for SPAs.
 export function CardFlow() {
   const { page, direction } = useCardNav();