From aa520441b19d2d7a0ed0ac48271a5c01445ac886 Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Mon, 20 Jan 2025 13:23:07 +0000
Subject: [PATCH 1/8] Add fade in animation

---
 .../useCases/NotificationUIHandler.tsx        | 19 +++++++++++++++++--
 .../useCases/NotificationsDevScreen.tsx       |  5 +++--
 .../useCases/common/SwipeOutWrapper.tsx       | 18 ++++++++++++++++--
 .../src/legacy/Dashboard/UserSummary.json     | 16 ++++++++--------
 4 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx
index 6fb4491e31..0fce0c3d69 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx
@@ -38,8 +38,22 @@ export const NotificationUIHandler = () => {
 const useCollectNewNotifications = ({enabled}: {enabled: boolean}) => {
   const manager = useNotificationManager()
   const walletManager = useWalletManager()
-  const selectedWalletId = walletManager.selected.wallet?.id
-  const [events, setEvents] = React.useState<Notifications.Event[]>([])
+  const selectedWalletId = walletManager.selected.wallet?.id ?? ''
+  const [events, setEvents] = React.useState<Notifications.Event[]>([
+    {
+      date: '2025-01-16T15:26:33.213Z',
+      id: 8930536706311822,
+      isRead: false,
+      metadata: {
+        isSentByUser: false,
+        nextTxsCounter: 9,
+        previousTxsCounter: 8,
+        txId: '977441499aef81a5e4f93bc8a9d0de68526c09b58f8cfb62dbaf53549942e7bb',
+        walletId: '85dd7b5e-682b-4240-9b19-5020dafd772e',
+      },
+      trigger: 'TransactionReceived' as any,
+    },
+  ])
 
   React.useEffect(() => {
     if (!enabled) return
@@ -49,6 +63,7 @@ const useCollectNewNotifications = ({enabled}: {enabled: boolean}) => {
     }
 
     const subscription = manager.newEvents$.subscribe((event) => {
+      console.log('new event', event)
       if (event.trigger === Notifications.Trigger.RewardsUpdated && event.metadata.walletId === selectedWalletId) {
         pushEvent(event)
       }
diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx
index 43efc4f63a..3c0d51e360 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx
@@ -30,7 +30,8 @@ export const NotificationsDevScreen = () => {
 const Screen = () => {
   const manager = useNotificationManager()
   const walletManager = useWalletManager()
-  const selectedWalletId = walletManager.selected.wallet?.id ?? 'walletId'
+  const selectedWalletId = walletManager.selected.wallet?.id ?? ''
+  console.log('selectedWalletId', selectedWalletId)
 
   const handleOnTriggerTransactionReceived = () => {
     manager.events.push(
@@ -50,7 +51,7 @@ const Screen = () => {
         <View style={{padding: 16, gap: 8}}>
           <Text style={{fontSize: 24}}>Notifications Playground</Text>
 
-          <Button title="Trigger Transacrion Received Notification" onPress={handleOnTriggerTransactionReceived} />
+          <Button title="Trigger Transaction Received Notification" onPress={handleOnTriggerTransactionReceived} />
 
           <Text style={{fontSize: 24}}>Settings</Text>
 
diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
index 9018752b71..4eab38f45e 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
@@ -7,12 +7,17 @@ type Props = {
 }
 
 export const SwipeOutWrapper = ({children, onSwipeOut}: Props) => {
-  const {pan, panResponder} = usePanAnimation({onRelease: onSwipeOut})
+  const {pan, panResponder, fadeIn, opacity} = usePanAnimation({onRelease: onSwipeOut})
+
+  React.useEffect(() => {
+    setTimeout(() => fadeIn(), 100)
+  }, [fadeIn])
 
   return (
     <Animated.View
       style={{
         transform: [{translateX: pan.x}],
+        opacity,
       }}
       {...panResponder.panHandlers}
     >
@@ -23,9 +28,18 @@ export const SwipeOutWrapper = ({children, onSwipeOut}: Props) => {
 
 const usePanAnimation = ({onRelease}: {onRelease: () => void}) => {
   const pan = React.useRef(new Animated.ValueXY()).current
+  const opacity = React.useRef(new Animated.Value(0)).current
   const screenWidth = Dimensions.get('window').width
   const screenLimitInPercentAfterWhichShouldRelease = 0.3
 
+  const fadeIn = React.useCallback(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: false,
+    }).start()
+  }, [opacity])
+
   const panResponder = React.useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: () => true,
@@ -50,5 +64,5 @@ const usePanAnimation = ({onRelease}: {onRelease: () => void}) => {
     }),
   ).current
 
-  return {pan, panResponder}
+  return {pan, panResponder, fadeIn, opacity}
 }
diff --git a/apps/wallet-mobile/translations/messages/src/legacy/Dashboard/UserSummary.json b/apps/wallet-mobile/translations/messages/src/legacy/Dashboard/UserSummary.json
index 5b234789f8..05af0bc668 100644
--- a/apps/wallet-mobile/translations/messages/src/legacy/Dashboard/UserSummary.json
+++ b/apps/wallet-mobile/translations/messages/src/legacy/Dashboard/UserSummary.json
@@ -6,12 +6,12 @@
     "start": {
       "line": 163,
       "column": 9,
-      "index": 4901
+      "index": 4904
     },
     "end": {
       "line": 166,
       "column": 3,
-      "index": 5003
+      "index": 5006
     }
   },
   {
@@ -21,12 +21,12 @@
     "start": {
       "line": 167,
       "column": 16,
-      "index": 5021
+      "index": 5024
     },
     "end": {
       "line": 170,
       "column": 3,
-      "index": 5131
+      "index": 5134
     }
   },
   {
@@ -36,12 +36,12 @@
     "start": {
       "line": 171,
       "column": 18,
-      "index": 5151
+      "index": 5154
     },
     "end": {
       "line": 174,
       "column": 3,
-      "index": 5265
+      "index": 5268
     }
   },
   {
@@ -51,12 +51,12 @@
     "start": {
       "line": 175,
       "column": 23,
-      "index": 5290
+      "index": 5293
     },
     "end": {
       "line": 178,
       "column": 3,
-      "index": 5402
+      "index": 5405
     }
   }
 ]
\ No newline at end of file

From dd932756fe4cfc425cf0fa2c8cd7a0e3822363a6 Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Mon, 20 Jan 2025 13:30:44 +0000
Subject: [PATCH 2/8] Add fade out animation

---
 .../useCases/NotificationUIHandler.tsx        |  4 +--
 .../useCases/common/NotificationPopup.tsx     |  7 ++--
 .../useCases/common/SwipeOutWrapper.tsx       | 33 +++++++++++++++----
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx
index 0fce0c3d69..8e7564a5d3 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx
@@ -9,7 +9,6 @@ import {NotificationPopup} from './common/NotificationPopup'
 import {NotificationStack} from './common/NotificationStack'
 
 const displayLimit = 3
-const displayTime = 20 * 1000
 
 export const NotificationUIHandler = () => {
   const enabled = useNotificationDisplaySettings()
@@ -29,6 +28,7 @@ export const NotificationUIHandler = () => {
           event={event}
           onCancel={() => removeEvent(event.id)}
           onPress={() => removeEvent(event.id)}
+          onExpired={() => removeEvent(event.id)}
         />
       ))}
     </NotificationStack>
@@ -59,11 +59,9 @@ const useCollectNewNotifications = ({enabled}: {enabled: boolean}) => {
     if (!enabled) return
     const pushEvent = (event: Notifications.Event) => {
       setEvents((e) => [...e, event])
-      setTimeout(() => setEvents((e) => e.filter((ev) => ev.id !== event.id)), displayTime)
     }
 
     const subscription = manager.newEvents$.subscribe((event) => {
-      console.log('new event', event)
       if (event.trigger === Notifications.Trigger.RewardsUpdated && event.metadata.walletId === selectedWalletId) {
         pushEvent(event)
       }
diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationPopup.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationPopup.tsx
index f5d67362ac..39fb7dbbb0 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationPopup.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationPopup.tsx
@@ -13,15 +13,16 @@ type Props = {
   event: Notifications.Event
   onPress: () => void
   onCancel: () => void
+  onExpired: () => void
 }
 
-export const NotificationPopup = ({event, onPress, onCancel}: Props) => {
+export const NotificationPopup = ({event, onPress, onCancel, onExpired}: Props) => {
   const navigation = useWalletNavigation()
   const strings = useStrings()
 
   if (event.trigger === Notifications.Trigger.TransactionReceived) {
     return (
-      <SwipeOutWrapper onSwipeOut={onCancel}>
+      <SwipeOutWrapper onSwipeOut={onCancel} onExpired={onExpired}>
         <NotificationItem
           onPress={() => {
             onPress()
@@ -37,7 +38,7 @@ export const NotificationPopup = ({event, onPress, onCancel}: Props) => {
 
   if (event.trigger === Notifications.Trigger.RewardsUpdated) {
     return (
-      <SwipeOutWrapper onSwipeOut={onCancel}>
+      <SwipeOutWrapper onSwipeOut={onCancel} onExpired={onExpired}>
         <NotificationItem
           onPress={() => {
             onPress()
diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
index 4eab38f45e..58cfc22099 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
@@ -1,16 +1,27 @@
 import * as React from 'react'
-import {Animated, Dimensions, PanResponder} from 'react-native'
+import {Animated, Dimensions, Easing, PanResponder} from 'react-native'
+import {useEffect} from 'react'
 
 type Props = {
   children: React.ReactNode
   onSwipeOut: () => void
+  onExpired: () => void
 }
 
-export const SwipeOutWrapper = ({children, onSwipeOut}: Props) => {
-  const {pan, panResponder, fadeIn, opacity} = usePanAnimation({onRelease: onSwipeOut})
+const notificationDisplayTime = 20 * 1000 // 20 seconds
+const fadeInTime = 200
+const fadeOutPaddingTime = 100
+
+export const SwipeOutWrapper = ({children, onSwipeOut, onExpired}: Props) => {
+  const {pan, panResponder, fadeIn, opacity, fadeOut} = usePanAnimation({onRelease: onSwipeOut})
+
+  useEffect(() => {
+    setTimeout(() => onExpired(), notificationDisplayTime)
+    setTimeout(() => fadeOut(), notificationDisplayTime - fadeInTime - fadeOutPaddingTime)
+  }, [])
 
   React.useEffect(() => {
-    setTimeout(() => fadeIn(), 100)
+    setTimeout(() => fadeIn(), 1)
   }, [fadeIn])
 
   return (
@@ -35,8 +46,18 @@ const usePanAnimation = ({onRelease}: {onRelease: () => void}) => {
   const fadeIn = React.useCallback(() => {
     Animated.timing(opacity, {
       toValue: 1,
-      duration: 200,
+      duration: fadeInTime,
+      useNativeDriver: false,
+      easing: Easing.inOut(Easing.ease),
+    }).start()
+  }, [opacity])
+
+  const fadeOut = React.useCallback(() => {
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: fadeInTime,
       useNativeDriver: false,
+      easing: Easing.inOut(Easing.ease),
     }).start()
   }, [opacity])
 
@@ -64,5 +85,5 @@ const usePanAnimation = ({onRelease}: {onRelease: () => void}) => {
     }),
   ).current
 
-  return {pan, panResponder, fadeIn, opacity}
+  return {pan, panResponder, fadeIn, fadeOut, opacity}
 }

From e08cb8d95770428d46e195c4d003996b5145e271 Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Mon, 20 Jan 2025 13:54:25 +0000
Subject: [PATCH 3/8] Fix layouts

---
 apps/wallet-mobile/src/AppNavigator.tsx       |  3 +-
 .../useCases/NotificationUIHandler.tsx        | 16 +----
 .../useCases/common/NotificationPopup.tsx     |  2 +-
 .../useCases/common/NotificationStack.tsx     |  2 +-
 .../useCases/common/SwipeOutWrapper.tsx       | 64 +++++++++++++------
 .../messages/src/AppNavigator.json            | 32 +++++-----
 6 files changed, 64 insertions(+), 55 deletions(-)

diff --git a/apps/wallet-mobile/src/AppNavigator.tsx b/apps/wallet-mobile/src/AppNavigator.tsx
index 3c0e6bbd9a..907e828e3b 100644
--- a/apps/wallet-mobile/src/AppNavigator.tsx
+++ b/apps/wallet-mobile/src/AppNavigator.tsx
@@ -119,8 +119,6 @@ export const AppNavigator = () => {
       onReady={onReady}
       ref={navRef}
     >
-      <NotificationUIHandler />
-
       <ModalProvider>
         <Stack.Navigator
           screenOptions={{
@@ -229,6 +227,7 @@ export const AppNavigator = () => {
           )}
         </Stack.Navigator>
       </ModalProvider>
+      <NotificationUIHandler />
     </NavigationContainer>
   )
 }
diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx
index 8e7564a5d3..ee29f46836 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationUIHandler.tsx
@@ -39,21 +39,7 @@ const useCollectNewNotifications = ({enabled}: {enabled: boolean}) => {
   const manager = useNotificationManager()
   const walletManager = useWalletManager()
   const selectedWalletId = walletManager.selected.wallet?.id ?? ''
-  const [events, setEvents] = React.useState<Notifications.Event[]>([
-    {
-      date: '2025-01-16T15:26:33.213Z',
-      id: 8930536706311822,
-      isRead: false,
-      metadata: {
-        isSentByUser: false,
-        nextTxsCounter: 9,
-        previousTxsCounter: 8,
-        txId: '977441499aef81a5e4f93bc8a9d0de68526c09b58f8cfb62dbaf53549942e7bb',
-        walletId: '85dd7b5e-682b-4240-9b19-5020dafd772e',
-      },
-      trigger: 'TransactionReceived' as any,
-    },
-  ])
+  const [events, setEvents] = React.useState<Notifications.Event[]>([])
 
   React.useEffect(() => {
     if (!enabled) return
diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationPopup.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationPopup.tsx
index 39fb7dbbb0..d88195a767 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationPopup.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationPopup.tsx
@@ -122,7 +122,7 @@ const useStyles = () => {
       ...atoms.gap_xs,
     },
     title: {
-      ...atoms.body_2_md_regular,
+      ...atoms.body_2_md_medium,
       ...atoms.font_semibold,
     },
     description: {
diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationStack.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationStack.tsx
index 1c0d5e1946..7776d2b738 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationStack.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationStack.tsx
@@ -27,7 +27,7 @@ const useStyles = () => {
       left: 0,
       right: 0,
       ...atoms.z_50,
-      ...atoms.p_lg,
+      ...atoms.px_lg,
     },
     flex: {
       ...atoms.gap_sm,
diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
index 58cfc22099..490cc3e49b 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
@@ -13,21 +13,28 @@ const fadeInTime = 200
 const fadeOutPaddingTime = 100
 
 export const SwipeOutWrapper = ({children, onSwipeOut, onExpired}: Props) => {
-  const {pan, panResponder, fadeIn, opacity, fadeOut} = usePanAnimation({onRelease: onSwipeOut})
+  const {pan, panResponder, fadeIn, opacity, fadeOut, translateY} = usePanAnimation({onRelease: onSwipeOut})
 
   useEffect(() => {
-    setTimeout(() => onExpired(), notificationDisplayTime)
-    setTimeout(() => fadeOut(), notificationDisplayTime - fadeInTime - fadeOutPaddingTime)
+    const expiredTimeout = setTimeout(() => onExpired(), notificationDisplayTime)
+    const fadeOutTimeout = setTimeout(() => fadeOut(), notificationDisplayTime - fadeInTime - fadeOutPaddingTime)
+
+    return () => {
+      clearTimeout(expiredTimeout)
+      clearTimeout(fadeOutTimeout)
+    }
   }, [])
 
   React.useEffect(() => {
-    setTimeout(() => fadeIn(), 1)
+    // When executed without setTimeout, the animation does not start
+    const fadeInTimeout = setTimeout(() => fadeIn(), 1)
+    return () => clearTimeout(fadeInTimeout)
   }, [fadeIn])
 
   return (
     <Animated.View
       style={{
-        transform: [{translateX: pan.x}],
+        transform: [{translateX: pan.x}, {translateY}],
         opacity,
       }}
       {...panResponder.panHandlers}
@@ -40,26 +47,43 @@ export const SwipeOutWrapper = ({children, onSwipeOut, onExpired}: Props) => {
 const usePanAnimation = ({onRelease}: {onRelease: () => void}) => {
   const pan = React.useRef(new Animated.ValueXY()).current
   const opacity = React.useRef(new Animated.Value(0)).current
+  const translateY = React.useRef(new Animated.Value(-50)).current
   const screenWidth = Dimensions.get('window').width
   const screenLimitInPercentAfterWhichShouldRelease = 0.3
 
   const fadeIn = React.useCallback(() => {
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: fadeInTime,
-      useNativeDriver: false,
-      easing: Easing.inOut(Easing.ease),
-    }).start()
-  }, [opacity])
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: fadeInTime,
+        useNativeDriver: false,
+        easing: Easing.inOut(Easing.ease),
+      }),
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: fadeInTime,
+        useNativeDriver: false,
+        easing: Easing.inOut(Easing.ease),
+      }),
+    ]).start()
+  }, [opacity, translateY])
 
   const fadeOut = React.useCallback(() => {
-    Animated.timing(opacity, {
-      toValue: 0,
-      duration: fadeInTime,
-      useNativeDriver: false,
-      easing: Easing.inOut(Easing.ease),
-    }).start()
-  }, [opacity])
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: fadeInTime,
+        useNativeDriver: false,
+        easing: Easing.inOut(Easing.ease),
+      }),
+      Animated.timing(translateY, {
+        toValue: -50,
+        duration: fadeInTime,
+        useNativeDriver: false,
+        easing: Easing.inOut(Easing.ease),
+      }),
+    ]).start()
+  }, [opacity, translateY])
 
   const panResponder = React.useRef(
     PanResponder.create({
@@ -85,5 +109,5 @@ const usePanAnimation = ({onRelease}: {onRelease: () => void}) => {
     }),
   ).current
 
-  return {pan, panResponder, fadeIn, fadeOut, opacity}
+  return {pan, panResponder, fadeIn, fadeOut, opacity, translateY}
 }
diff --git a/apps/wallet-mobile/translations/messages/src/AppNavigator.json b/apps/wallet-mobile/translations/messages/src/AppNavigator.json
index 41c40edef2..c6463b592b 100644
--- a/apps/wallet-mobile/translations/messages/src/AppNavigator.json
+++ b/apps/wallet-mobile/translations/messages/src/AppNavigator.json
@@ -4,14 +4,14 @@
     "defaultMessage": "!!!Enter PIN",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 254,
+      "line": 253,
       "column": 17,
-      "index": 9599
+      "index": 9598
     },
     "end": {
-      "line": 257,
+      "line": 256,
       "column": 3,
-      "index": 9689
+      "index": 9688
     }
   },
   {
@@ -19,14 +19,14 @@
     "defaultMessage": "!!!Set PIN",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 258,
+      "line": 257,
       "column": 18,
-      "index": 9709
+      "index": 9708
     },
     "end": {
-      "line": 261,
+      "line": 260,
       "column": 3,
-      "index": 9807
+      "index": 9806
     }
   },
   {
@@ -34,14 +34,14 @@
     "defaultMessage": "!!!Auth with OS changes",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 262,
+      "line": 261,
       "column": 25,
-      "index": 9834
+      "index": 9833
     },
     "end": {
-      "line": 265,
+      "line": 264,
       "column": 3,
-      "index": 9948
+      "index": 9947
     }
   },
   {
@@ -49,14 +49,14 @@
     "defaultMessage": "!!!Auth with OS changed detected",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 266,
+      "line": 265,
       "column": 27,
-      "index": 9977
+      "index": 9976
     },
     "end": {
-      "line": 269,
+      "line": 268,
       "column": 3,
-      "index": 10098
+      "index": 10097
     }
   }
 ]
\ No newline at end of file

From 3c9d4a7fa85e94f3952a11a0e11a911e582cde3f Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Mon, 20 Jan 2025 13:56:29 +0000
Subject: [PATCH 4/8] Refactor

---
 .../Notifications/useCases/NotificationsDevScreen.tsx         | 1 -
 .../Notifications/useCases/common/SwipeOutWrapper.tsx         | 3 +--
 .../src/translators/reactjs/useReceivedNotificationEvents.ts  | 4 ++--
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx
index 3c0d51e360..4676fa8049 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx
@@ -31,7 +31,6 @@ const Screen = () => {
   const manager = useNotificationManager()
   const walletManager = useWalletManager()
   const selectedWalletId = walletManager.selected.wallet?.id ?? ''
-  console.log('selectedWalletId', selectedWalletId)
 
   const handleOnTriggerTransactionReceived = () => {
     manager.events.push(
diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
index 490cc3e49b..b6aea5f4e0 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 import {Animated, Dimensions, Easing, PanResponder} from 'react-native'
-import {useEffect} from 'react'
 
 type Props = {
   children: React.ReactNode
@@ -15,7 +14,7 @@ const fadeOutPaddingTime = 100
 export const SwipeOutWrapper = ({children, onSwipeOut, onExpired}: Props) => {
   const {pan, panResponder, fadeIn, opacity, fadeOut, translateY} = usePanAnimation({onRelease: onSwipeOut})
 
-  useEffect(() => {
+  React.useEffect(() => {
     const expiredTimeout = setTimeout(() => onExpired(), notificationDisplayTime)
     const fadeOutTimeout = setTimeout(() => fadeOut(), notificationDisplayTime - fadeInTime - fadeOutPaddingTime)
 
diff --git a/packages/notifications/src/translators/reactjs/useReceivedNotificationEvents.ts b/packages/notifications/src/translators/reactjs/useReceivedNotificationEvents.ts
index 3a0fa983a2..162412f24b 100644
--- a/packages/notifications/src/translators/reactjs/useReceivedNotificationEvents.ts
+++ b/packages/notifications/src/translators/reactjs/useReceivedNotificationEvents.ts
@@ -1,14 +1,14 @@
 import {useQuery, useQueryClient, UseQueryOptions} from 'react-query'
 import {Notifications as NotificationTypes} from '@yoroi/types'
 import {useNotificationManager} from './NotificationProvider'
-import {useEffect} from 'react'
+import * as React from 'react'
 
 export const useReceivedNotificationEvents = (
   options: UseQueryOptions<ReadonlyArray<NotificationTypes.Event>, Error> = {},
 ) => {
   const queryClient = useQueryClient()
   const manager = useNotificationManager()
-  useEffect(() => {
+  React.useEffect(() => {
     const subscription = manager.unreadCounterByGroup$.subscribe(() =>
       queryClient.invalidateQueries(['receivedNotificationEvents']),
     )

From 0eac9e9231402c2ae2ef93951d364791b32e612d Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Mon, 20 Jan 2025 14:06:12 +0000
Subject: [PATCH 5/8] Fix lint issues

---
 apps/wallet-mobile/src/AppNavigator.tsx       |  1 +
 .../useCases/common/SwipeOutWrapper.tsx       |  6 ++--
 .../messages/src/AppNavigator.json            | 32 +++++++++----------
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/apps/wallet-mobile/src/AppNavigator.tsx b/apps/wallet-mobile/src/AppNavigator.tsx
index 907e828e3b..f033d3f91a 100644
--- a/apps/wallet-mobile/src/AppNavigator.tsx
+++ b/apps/wallet-mobile/src/AppNavigator.tsx
@@ -227,6 +227,7 @@ export const AppNavigator = () => {
           )}
         </Stack.Navigator>
       </ModalProvider>
+
       <NotificationUIHandler />
     </NavigationContainer>
   )
diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
index b6aea5f4e0..23c06b5539 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
@@ -13,16 +13,18 @@ const fadeOutPaddingTime = 100
 
 export const SwipeOutWrapper = ({children, onSwipeOut, onExpired}: Props) => {
   const {pan, panResponder, fadeIn, opacity, fadeOut, translateY} = usePanAnimation({onRelease: onSwipeOut})
+  const onExpiredRef = React.useRef(onExpired)
+  onExpiredRef.current = onExpired
 
   React.useEffect(() => {
-    const expiredTimeout = setTimeout(() => onExpired(), notificationDisplayTime)
+    const expiredTimeout = setTimeout(() => onExpiredRef.current(), notificationDisplayTime)
     const fadeOutTimeout = setTimeout(() => fadeOut(), notificationDisplayTime - fadeInTime - fadeOutPaddingTime)
 
     return () => {
       clearTimeout(expiredTimeout)
       clearTimeout(fadeOutTimeout)
     }
-  }, [])
+  }, [fadeIn, fadeOut])
 
   React.useEffect(() => {
     // When executed without setTimeout, the animation does not start
diff --git a/apps/wallet-mobile/translations/messages/src/AppNavigator.json b/apps/wallet-mobile/translations/messages/src/AppNavigator.json
index c6463b592b..41c40edef2 100644
--- a/apps/wallet-mobile/translations/messages/src/AppNavigator.json
+++ b/apps/wallet-mobile/translations/messages/src/AppNavigator.json
@@ -4,14 +4,14 @@
     "defaultMessage": "!!!Enter PIN",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 253,
+      "line": 254,
       "column": 17,
-      "index": 9598
+      "index": 9599
     },
     "end": {
-      "line": 256,
+      "line": 257,
       "column": 3,
-      "index": 9688
+      "index": 9689
     }
   },
   {
@@ -19,14 +19,14 @@
     "defaultMessage": "!!!Set PIN",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 257,
+      "line": 258,
       "column": 18,
-      "index": 9708
+      "index": 9709
     },
     "end": {
-      "line": 260,
+      "line": 261,
       "column": 3,
-      "index": 9806
+      "index": 9807
     }
   },
   {
@@ -34,14 +34,14 @@
     "defaultMessage": "!!!Auth with OS changes",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 261,
+      "line": 262,
       "column": 25,
-      "index": 9833
+      "index": 9834
     },
     "end": {
-      "line": 264,
+      "line": 265,
       "column": 3,
-      "index": 9947
+      "index": 9948
     }
   },
   {
@@ -49,14 +49,14 @@
     "defaultMessage": "!!!Auth with OS changed detected",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 265,
+      "line": 266,
       "column": 27,
-      "index": 9976
+      "index": 9977
     },
     "end": {
-      "line": 268,
+      "line": 269,
       "column": 3,
-      "index": 10097
+      "index": 10098
     }
   }
 ]
\ No newline at end of file

From 33d7eac304ab788058d066906e8142cf4a8f543c Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Mon, 20 Jan 2025 14:13:20 +0000
Subject: [PATCH 6/8] useLayoutEffect

---
 .../features/Notifications/useCases/common/SwipeOutWrapper.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
index 23c06b5539..cc054312d1 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
@@ -26,7 +26,7 @@ export const SwipeOutWrapper = ({children, onSwipeOut, onExpired}: Props) => {
     }
   }, [fadeIn, fadeOut])
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     // When executed without setTimeout, the animation does not start
     const fadeInTimeout = setTimeout(() => fadeIn(), 1)
     return () => clearTimeout(fadeInTimeout)

From 0bd44f18839fa614174e7746b5998c3ca71863c4 Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Mon, 20 Jan 2025 14:13:35 +0000
Subject: [PATCH 7/8] Remove comment

---
 .../features/Notifications/useCases/common/SwipeOutWrapper.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
index cc054312d1..bb797bc749 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
@@ -27,7 +27,6 @@ export const SwipeOutWrapper = ({children, onSwipeOut, onExpired}: Props) => {
   }, [fadeIn, fadeOut])
 
   React.useLayoutEffect(() => {
-    // When executed without setTimeout, the animation does not start
     const fadeInTimeout = setTimeout(() => fadeIn(), 1)
     return () => clearTimeout(fadeInTimeout)
   }, [fadeIn])

From 612da13305216ea194c00dd1b3ad88a48034b235 Mon Sep 17 00:00:00 2001
From: Michal <miso.szorad@gmail.com>
Date: Mon, 20 Jan 2025 14:15:44 +0000
Subject: [PATCH 8/8] Remove timeouts

---
 .../features/Notifications/useCases/common/SwipeOutWrapper.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
index bb797bc749..a3b4ebfa3d 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
@@ -27,8 +27,7 @@ export const SwipeOutWrapper = ({children, onSwipeOut, onExpired}: Props) => {
   }, [fadeIn, fadeOut])
 
   React.useLayoutEffect(() => {
-    const fadeInTimeout = setTimeout(() => fadeIn(), 1)
-    return () => clearTimeout(fadeInTimeout)
+    fadeIn()
   }, [fadeIn])
 
   return (