fix(extension): #40: pause ApproveDeny component when out of focus

apps/extension/src/routes/popup/approval/approve-deny.tsx

@@ -1,6 +1,5 @@
 import { Button } from '@penumbra-zone/ui/components/ui/button';
-import { useEffect } from 'react';
-import { useCountdown } from 'usehooks-ts';
+import { useWindowCountdown } from './use-window-countdown';
 
 export const ApproveDeny = ({
   approve,
@@ -13,8 +12,7 @@ export const ApproveDeny = ({
   ignore?: () => void;
   wait?: number;
 }) => {
-  const [count, { startCountdown }] = useCountdown({ countStart: wait });
-  useEffect(startCountdown, [startCountdown]);
+  const count = useWindowCountdown(wait);
 
   return (
     <div className='flex flex-row flex-wrap justify-center gap-4 bg-black p-4 shadow-lg'>

apps/extension/src/routes/popup/approval/use-window-countdown.ts

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { useCountdown } from 'usehooks-ts';
+
+/**
+ * A hook that counts down each second from a given number only when the window is focused.
+ * If the window is out of focus, the countdown will reset and start from the beginning.
+ */
+export const useWindowCountdown = (wait = 0) => {
+  const [count, { startCountdown, stopCountdown, resetCountdown }] = useCountdown({
+    countStart: wait,
+  });
+
+  const onFocus = () => {
+    resetCountdown();
+    startCountdown();
+  };
+
+  const onBlur = () => {
+    stopCountdown();
+  };
+
+  useEffect(() => {
+    if (document.hasFocus()) {
+      startCountdown();
+    }
+
+    window.addEventListener('focus', onFocus);
+    window.addEventListener('blur', onBlur);
+
+    return () => {
+      window.removeEventListener('focus', onFocus);
+      window.removeEventListener('blur', onBlur);
+    };
+  }, [startCountdown]);
+
+  return count;
+};