From deb1e9c0b116a71821bb165f533ce97a27868dc5 Mon Sep 17 00:00:00 2001
From: Isacco <i.sordo@papers.ch>
Date: Wed, 6 Sep 2023 17:27:39 +0200
Subject: [PATCH] fix: computations warning

---
 packages/beacon-ui/src/ui/alert/index.tsx | 59 ++++++++++++-----------
 1 file changed, 32 insertions(+), 27 deletions(-)

diff --git a/packages/beacon-ui/src/ui/alert/index.tsx b/packages/beacon-ui/src/ui/alert/index.tsx
index 94002f60d..8b19bf7a1 100644
--- a/packages/beacon-ui/src/ui/alert/index.tsx
+++ b/packages/beacon-ui/src/ui/alert/index.tsx
@@ -183,7 +183,7 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
     // Shadow root
     const shadowRootEl = document.createElement('div')
     if (document.getElementById('beacon-alert-wrapper')) {
-      (document.getElementById('beacon-alert-wrapper') as HTMLElement).remove()
+      ;(document.getElementById('beacon-alert-wrapper') as HTMLElement).remove()
     }
     shadowRootEl.setAttribute('id', 'beacon-alert-wrapper')
     shadowRootEl.style.height = '0px'
@@ -335,40 +335,44 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
     const [isMobile, setIsMobile] = createSignal(_isMobileOS)
     const [windowWidth, setWindowWidth] = createSignal(window.innerWidth)
 
-    const debounce = (fun: Function, delay: number) => {
-      let timerId: NodeJS.Timeout
+    const AlertResize = () => {
+      const debounce = (fun: Function, delay: number) => {
+        let timerId: NodeJS.Timeout
 
-      return (...args: any[]) => {
-        clearTimeout(timerId)
-        timerId = setTimeout(() => fun(...args), delay)
+        return (...args: any[]) => {
+          clearTimeout(timerId)
+          timerId = setTimeout(() => fun(...args), delay)
+        }
       }
-    }
 
-    const debouncedSetWindowWidth = debounce(setWindowWidth, 200)
+      const debouncedSetWindowWidth = debounce(setWindowWidth, 200)
 
-    const updateIsMobile = (isMobileWidth: boolean) => {
-      // to avoid unwanted side effects (because of the OR condition), I always reset the value without checking the previous state
-      setWalletList(createWalletList())
-      setIsMobile(isMobileWidth || _isMobileOS)
-    }
+      const updateIsMobile = (isMobileWidth: boolean) => {
+        // to avoid unwanted side effects (because of the OR condition), I always reset the value without checking the previous state
+        setWalletList(createWalletList())
+        setIsMobile(isMobileWidth || _isMobileOS)
+      }
 
-    createEffect(() => {
-      updateIsMobile(windowWidth() <= 800)
-    })
+      createEffect(() => {
+        updateIsMobile(windowWidth() <= 800)
+      })
 
-    // Update the windowWidth signal when the window resizes
-    createEffect(() => {
-      const handleResize = () => {
-        debouncedSetWindowWidth(window.innerWidth)
-      }
+      // Update the windowWidth signal when the window resizes
+      createEffect(() => {
+        const handleResize = () => {
+          debouncedSetWindowWidth(window.innerWidth)
+        }
 
-      window.addEventListener('resize', handleResize)
+        window.addEventListener('resize', handleResize)
 
-      // Unsubscribe from the event when the component unmounts
-      onCleanup(() => {
-        window.removeEventListener('resize', handleResize)
+        // Unsubscribe from the event when the component unmounts
+        onCleanup(() => {
+          window.removeEventListener('resize', handleResize)
+        })
       })
-    })
+
+      return <></>
+    }
 
     const handleClickShowMoreContent = () => {
       analytics()?.track('click', 'ui', 'show more wallets')
@@ -463,7 +467,7 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
           }
         }
         setIsLoading(false)
-      } else if (wallet?.types.includes('ios') && _isMobileOS) { 
+      } else if (wallet?.types.includes('ios') && _isMobileOS) {
         setCodeQR('')
 
         if (config.pairingPayload) {
@@ -570,6 +574,7 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
     dispose = render(
       () => (
         <div class={`theme__${colorMode}`}>
+          <AlertResize />
           {config.pairingPayload && (
             <Alert
               loading={isLoading()}