Merge pull request #14748 from LedgerHQ/feat/earn-background-scroll-fade

feat(mobile): add scroll-based fade animation to earn background

Author: Valentin-Ledger

.changeset/earn-background-scroll-fade.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Add scroll-based fade animation to Earn background image

apps/ledger-live-mobile/src/screens/PTX/Earn/EarnBackground.tsx

@@ -1,8 +1,15 @@
 import React, { memo, useMemo } from "react";
-import { View, ImageBackground } from "react-native";
+import { Animated, ImageBackground, View } from "react-native";
 import { useTheme, useStyleSheet } from "@ledgerhq/lumen-ui-rnative/styles";
 
-function EarnBackgroundComponent() {
+const FADE_DISTANCE = 150;
+
+type Props = {
+  scrollY?: Animated.Value;
+  fadeDistance?: number;
+};
+
+function EarnBackgroundComponent({ scrollY, fadeDistance }: Props) {
   const { colorScheme } = useTheme();
   const styles = useStyleSheet(
     theme => ({
@@ -25,11 +32,27 @@ function EarnBackgroundComponent() {
     return colorScheme === "dark";
   }, [colorScheme]);
 
+  const opacity = useMemo(
+    () =>
+      scrollY
+        ? scrollY.interpolate({
+            inputRange: [0, fadeDistance ?? FADE_DISTANCE],
+            outputRange: [1, 0],
+            extrapolate: "clamp",
+          })
+        : 1,
+    [scrollY, fadeDistance],
+  );
+
   const source = require("~/images/liveApps/earn/background-dark.webp");
 
   return (
     <View style={styles.container} pointerEvents="none">
-      {isDark && <ImageBackground source={source} style={styles.imageContainer} />}
+      {isDark && (
+        <Animated.View style={{ opacity }}>
+          <ImageBackground source={source} style={styles.imageContainer} />
+        </Animated.View>
+      )}
     </View>
   );
 }

apps/ledger-live-mobile/src/screens/PTX/Earn/EarnV2Webview/index.tsx

@@ -2,8 +2,9 @@ import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
 import { useRemoteLiveAppContext } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
 import { Flex } from "@ledgerhq/native-ui";
-import React, { Fragment } from "react";
-import { View } from "react-native";
+import React, { ComponentProps, Fragment, useRef, useCallback } from "react";
+import { Animated, View } from "react-native";
+import type WebView from "react-native-webview";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { TrackScreen } from "~/analytics";
 import GenericErrorView from "~/components/GenericErrorView";
@@ -33,6 +34,14 @@ export const EarnV2Webview = ({
   const earnUiVersion = earnUiFlag?.params?.value ?? "v1";
   const isPtxUiV2 = earnUiVersion === "v2" || earnUiVersion === "2";
 
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const handleScroll = useCallback<NonNullable<ComponentProps<typeof WebView>["onScroll"]>>(
+    event => {
+      scrollY.setValue(event.nativeEvent.contentOffset.y);
+    },
+    [scrollY],
+  );
+
   const webviewInputs = {
     ...inputs,
     safeAreaTop: insets.top.toString(),
@@ -47,7 +56,7 @@ export const EarnV2Webview = ({
 
   return (
     <View style={{ flex: 1, overflow: "visible" }}>
-      {isPtxUiV2 && !hideMainNavigator && <EarnBackground />}
+      {isPtxUiV2 && !hideMainNavigator && <EarnBackground scrollY={scrollY} />}
       <View style={{ flex: 1, zIndex: 1 }} pointerEvents="box-none">
         {manifest ? (
           <Fragment>
@@ -56,6 +65,7 @@ export const EarnV2Webview = ({
               manifest={manifest}
               inputs={webviewInputs}
               isLwm40Enabled={isLwm40Enabled}
+              onScroll={isPtxUiV2 && !hideMainNavigator ? handleScroll : undefined}
             />
           </Fragment>
         ) : (

apps/ledger-live-mobile/src/screens/PTX/Earn/EarnWebview/index.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { View, StyleSheet, SafeAreaView, BackHandler, Platform } from "react-native";
 import { useSelector } from "~/context/hooks";
 
 import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
 import { safeGetRefValue } from "@ledgerhq/live-common/wallet-api/react";
 import { safeUrl } from "@ledgerhq/live-common/wallet-api/helpers";
+import WebView from "react-native-webview";
 
 import { useNavigation, useFocusEffect } from "@react-navigation/native";
 
@@ -37,9 +38,10 @@ type Props = {
   manifest: LiveAppManifest;
   inputs?: Record<string, string | undefined>;
   isLwm40Enabled?: boolean;
+  onScroll?: ComponentProps<typeof WebView>["onScroll"];
 };
 /** Subset of WebPTXPlayer functionality required for Earn live app. */
-export const EarnWebview = ({ manifest, inputs, isLwm40Enabled }: Props) => {
+export const EarnWebview = ({ manifest, inputs, isLwm40Enabled, onScroll }: Props) => {
   const webviewAPIRef = useRef<WebviewAPI>(null);
   const [webviewState, setWebviewState] = useState<WebviewState>(initialWebviewState);
 
@@ -149,6 +151,7 @@ export const EarnWebview = ({ manifest, inputs, isLwm40Enabled }: Props) => {
         inputs={inputs}
         onStateChange={setWebviewState}
         customHandlers={customHandlers}
+        onScroll={onScroll}
         Loader={() => <Loading backgroundColor="transparent" />}
       />
     </Container>