Hijack browser back event in BackButton

src/components/buttons/BackButton.tsx

@@ -1,12 +1,24 @@
 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';
 
 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']} />

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();