Fix SignArea and ToastProvider timeout (#1444)

* fix: correctly set and clean up signingArea alarms

* fix: revert ToastProvider to use setTimeout

* revert SignArea to use setTimeout

packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/* global chrome */
-
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
 import { PASSWORD_EXPIRY_MIN } from '@polkadot/extension-base/defaults';
@@ -32,46 +30,23 @@ function SignArea ({ buttonText, className, error, isExternal, isFirst, setError
   const { t } = useTranslation();
 
   useEffect(() => {
-    const lockSigner = async () => {
-      setIsLocked(null);
-
-      try {
-        const { isLocked, remainingTime } = await isSignLocked(signId);
+    setIsLocked(null);
+    let timeout: ReturnType<typeof setTimeout>;
 
+    !isExternal && isSignLocked(signId)
+      .then(({ isLocked, remainingTime }) => {
         setIsLocked(isLocked);
+        timeout = setTimeout(() => {
+          setIsLocked(true);
+        }, remainingTime);
 
-        await chrome.alarms.create('SIGNER_TIMEOUT', { delayInMinutes: remainingTime / 60000 });
+        !isLocked && setSavePass(true);
+      })
+      .catch((error: Error) => console.error(error));
 
-        if (!isLocked) {
-          setSavePass(true);
-        }
-      } catch (error) {
-        console.error('Error locking signer:', error);
-      }
+    return () => {
+      !!timeout && clearTimeout(timeout);
     };
-
-    const resetAlarm = async () => {
-      return new Promise((resolve, reject) => {
-        chrome.alarms.clear('SIGNER_TIMEOUT', (cleared) => {
-          if (chrome.runtime.lastError) {
-            reject(chrome.runtime.lastError);
-          } else {
-            resolve(cleared);
-          }
-        });
-      });
-    };
-
-    const executeLockSigner = async () => {
-      if (!isExternal) {
-        await lockSigner();
-        await resetAlarm();
-      }
-    };
-
-    executeLockSigner().then(async () => {
-      return await executeLockSigner();
-    }).catch((error) => console.error('Error clearing the alarm: ', error));
   }, [isExternal, signId]);
 
   const _onSign = useCallback(

packages/extension-ui/src/components/Toast/ToastProvider.tsx

@@ -1,9 +1,7 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/* global chrome */
-
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { ToastContext } from '../index.js';
 import Toast from './Toast.js';
@@ -13,37 +11,18 @@ interface ToastProviderProps {
 }
 
 const TOAST_TIMEOUT = 1500;
-const ALARM_NAME = 'toastAlarm';
 
 const ToastProvider = ({ children }: ToastProviderProps): React.ReactElement<ToastProviderProps> => {
   const [content, setContent] = useState('');
   const [visible, setVisible] = useState(false);
 
-  useEffect(() => {
-    const createAlarm = async () => {
-      try {
-        await chrome.alarms.create(ALARM_NAME, { delayInMinutes: TOAST_TIMEOUT / 60000 });
-        chrome.alarms.onAlarm.addListener((alarm) => {
-          if (alarm.name === ALARM_NAME) {
-            setVisible(false);
-          }
-        });
-      } catch (error) {
-        console.error('Error creating the alarm:', error);
-        throw error;
-      }
-    };
+  const show = useCallback((message: string): () => void => {
+    const timerId = setTimeout(() => setVisible(false), TOAST_TIMEOUT);
 
-    createAlarm().then(async () => {
-      return await chrome.alarms.clear(ALARM_NAME);
-    }).catch((error) => console.error('Error clearing the alarm: ', error));
-  }, []);
-
-  const show = useCallback((message: string): (() => void) => {
     setContent(message);
     setVisible(true);
 
-    return (): void => setVisible(false);
+    return (): void => clearTimeout(timerId);
   }, []);
 
   return (