From fdc42e4dbb258d24c1e9d3977a31ca1e1913279f Mon Sep 17 00:00:00 2001
From: Michal S <miso.szorad@gmail.com>
Date: Mon, 20 Jan 2025 15:28:08 +0100
Subject: [PATCH] feat(wallet-mobile): Add slide in and out animations (#3791)

---
 apps/wallet-mobile/src/AppNavigator.tsx       |  4 +-
 .../useCases/NotificationUIHandler.tsx        |  5 +-
 .../useCases/NotificationsDevScreen.tsx       |  4 +-
 .../useCases/common/NotificationPopup.tsx     |  9 +--
 .../useCases/common/NotificationStack.tsx     |  2 +-
 .../useCases/common/SwipeOutWrapper.tsx       | 68 +++++++++++++++++--
 .../src/legacy/Dashboard/UserSummary.json     | 16 ++---
 .../reactjs/useReceivedNotificationEvents.ts  |  4 +-
 8 files changed, 85 insertions(+), 27 deletions(-)

diff --git a/apps/wallet-mobile/src/AppNavigator.tsx b/apps/wallet-mobile/src/AppNavigator.tsx
index 3c0e6bbd9a..f033d3f91a 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,8 @@ 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 6fb4491e31..ee29f46836 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>
@@ -38,14 +38,13 @@ export const NotificationUIHandler = () => {
 const useCollectNewNotifications = ({enabled}: {enabled: boolean}) => {
   const manager = useNotificationManager()
   const walletManager = useWalletManager()
-  const selectedWalletId = walletManager.selected.wallet?.id
+  const selectedWalletId = walletManager.selected.wallet?.id ?? ''
   const [events, setEvents] = React.useState<Notifications.Event[]>([])
 
   React.useEffect(() => {
     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) => {
diff --git a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx
index 43efc4f63a..4676fa8049 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx
@@ -30,7 +30,7 @@ export const NotificationsDevScreen = () => {
 const Screen = () => {
   const manager = useNotificationManager()
   const walletManager = useWalletManager()
-  const selectedWalletId = walletManager.selected.wallet?.id ?? 'walletId'
+  const selectedWalletId = walletManager.selected.wallet?.id ?? ''
 
   const handleOnTriggerTransactionReceived = () => {
     manager.events.push(
@@ -50,7 +50,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/NotificationPopup.tsx b/apps/wallet-mobile/src/features/Notifications/useCases/common/NotificationPopup.tsx
index f5d67362ac..d88195a767 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()
@@ -121,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 9018752b71..a3b4ebfa3d 100644
--- a/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
+++ b/apps/wallet-mobile/src/features/Notifications/useCases/common/SwipeOutWrapper.tsx
@@ -1,18 +1,40 @@
 import * as React from 'react'
-import {Animated, Dimensions, PanResponder} from 'react-native'
+import {Animated, Dimensions, Easing, PanResponder} from 'react-native'
 
 type Props = {
   children: React.ReactNode
   onSwipeOut: () => void
+  onExpired: () => void
 }
 
-export const SwipeOutWrapper = ({children, onSwipeOut}: Props) => {
-  const {pan, panResponder} = 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, translateY} = usePanAnimation({onRelease: onSwipeOut})
+  const onExpiredRef = React.useRef(onExpired)
+  onExpiredRef.current = onExpired
+
+  React.useEffect(() => {
+    const expiredTimeout = setTimeout(() => onExpiredRef.current(), notificationDisplayTime)
+    const fadeOutTimeout = setTimeout(() => fadeOut(), notificationDisplayTime - fadeInTime - fadeOutPaddingTime)
+
+    return () => {
+      clearTimeout(expiredTimeout)
+      clearTimeout(fadeOutTimeout)
+    }
+  }, [fadeIn, fadeOut])
+
+  React.useLayoutEffect(() => {
+    fadeIn()
+  }, [fadeIn])
 
   return (
     <Animated.View
       style={{
-        transform: [{translateX: pan.x}],
+        transform: [{translateX: pan.x}, {translateY}],
+        opacity,
       }}
       {...panResponder.panHandlers}
     >
@@ -23,9 +45,45 @@ 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 translateY = React.useRef(new Animated.Value(-50)).current
   const screenWidth = Dimensions.get('window').width
   const screenLimitInPercentAfterWhichShouldRelease = 0.3
 
+  const fadeIn = React.useCallback(() => {
+    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.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({
       onMoveShouldSetPanResponder: () => true,
@@ -50,5 +108,5 @@ const usePanAnimation = ({onRelease}: {onRelease: () => void}) => {
     }),
   ).current
 
-  return {pan, panResponder}
+  return {pan, panResponder, fadeIn, fadeOut, opacity, translateY}
 }
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
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']),
     )