feat(mobile): update background images for wallet 4.0 light and dark modes

- Add v4-light.webp portfolio background for wallet 4.0 light mode
- Replace card-landing-bg.webp with card-bg.webp
- Update WalletTabBackgroundGradient to use v4-light image instead of solid color
- Simplify CardLandingScreenView with dynamic background image source
- Update EarnBackground to support both light and dark theme backgrounds

Author: LucasWerey

.changeset/afraid-lemons-train.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Update background images on card and wallet for w4.0

apps/ledger-live-mobile/src/components/WalletTab/WalletTabBackgroundGradient.tsx

@@ -16,7 +16,7 @@ function WalletTabBackgroundGradient({ color, visible = true }: Readonly<Props>)
   const { theme, colors } = useTheme();
   const { scrollY, headerHeight } = useContext(WalletTabNavigatorScrollContext);
   const [imageLoaded, setImageLoaded] = useState(false);
-  const { isWallet40Enabled, isWallet40DarkMode } = useWallet40Theme("mobile");
+  const { isWallet40Enabled } = useWallet40Theme("mobile");
 
   const opacity = useMemo(
     () =>
@@ -59,23 +59,21 @@ function WalletTabBackgroundGradient({ color, visible = true }: Readonly<Props>)
   );
 
   const chosenSource = useMemo(() => {
-    if (isWallet40Enabled && theme === "dark") {
-      return require("~/images/portfolio/v4-dark.webp");
+    if (isWallet40Enabled) {
+      return theme === "dark"
+        ? require("~/images/portfolio/v4-dark.webp")
+        : require("~/images/portfolio/v4-light.webp");
     }
     return theme === "dark"
       ? require("~/images/portfolio/dark.webp")
       : require("~/images/portfolio/light.webp");
   }, [theme, isWallet40Enabled]);
 
-  // Wallet 4.0 light mode uses a solid background color
-  const isWallet40LightMode = isWallet40Enabled && !isWallet40DarkMode;
-
-  if (color || isWallet40LightMode) {
-    const backgroundColor = color ?? colors.background.main;
+  if (color) {
     return (
       <Animated.View style={[containerStyle, { opacity: visible ? opacity : 0 }]}>
         <LinearGradient
-          colors={[backgroundColor, colors.background.main]}
+          colors={[color, colors.background.main]}
           locations={[0, 1]}
           start={{ x: 0.5, y: 0 }}
           end={{ x: 0.5, y: 1 }}
@@ -94,23 +92,7 @@ function WalletTabBackgroundGradient({ color, visible = true }: Readonly<Props>)
         onLoadStart={() => setImageLoaded(false)}
         fadeDuration={imageLoaded ? 0 : 300}
       />
-      {isWallet40DarkMode ? (
-        // Wallet 4.0: permanent gradient from transparent to black (faster fade)
-        <LinearGradient
-          colors={["transparent", "rgba(0,0,0,0.6)", "#000000"]}
-          locations={[0, 0.5, 0.85]}
-          start={{ x: 0.5, y: 0 }}
-          end={{ x: 0.5, y: 1 }}
-          style={{
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            top: 0,
-            left: 0,
-          }}
-        />
-      ) : (
-        // Legacy: animated gradient on scroll
+      {!isWallet40Enabled && (
         <Animated.View
           style={{
             position: "absolute",

apps/ledger-live-mobile/src/images/card/card-bg.webp

@@ -1,7 +1,6 @@
 import React, { memo } from "react";
-import { ImageBackground } from "react-native";
+import { ImageBackground, ImageSourcePropType } from "react-native";
 import { Box } from "@ledgerhq/lumen-ui-rnative";
-import LinearGradient from "react-native-linear-gradient";
 import SafeAreaView from "~/components/SafeAreaView";
 import { TrackScreen } from "~/analytics";
 import { ScreenHeroSectionView } from "LLM/components/ScreenHeroSection/ScreenHeroSectionView";
@@ -19,9 +18,9 @@ interface CardLandingScreenViewProps {
   readonly topInset: number;
   readonly bottomInset: number;
   readonly backgroundColor: string;
-  readonly isWallet40DarkMode: boolean;
   readonly imageLoaded: boolean;
   readonly onImageLoaded: () => void;
+  readonly backgroundImageSource: ImageSourcePropType;
 }
 
 const CardLandingScreenView = ({
@@ -32,45 +31,29 @@ const CardLandingScreenView = ({
   topInset,
   bottomInset,
   backgroundColor,
-  isWallet40DarkMode,
   imageLoaded,
   onImageLoaded,
+  backgroundImageSource,
 }: CardLandingScreenViewProps) => {
   return (
     <SafeAreaView isFlex style={{ backgroundColor }} testID={CARD_LANDING_TEST_IDS.screen}>
       <TrackScreen name={pageName} />
-
-      {isWallet40DarkMode && (
-        <Box
-          style={{
-            position: "absolute",
-            width: "100%",
-            height: 500,
-            top: 0,
-            left: 0,
-          }}
-        >
-          <ImageBackground
-            source={require("~/images/portfolio/v4-dark.webp")}
-            style={{ width: "100%", height: "100%" }}
-            onLoad={onImageLoaded}
-            fadeDuration={imageLoaded ? 0 : 300}
-          />
-          <LinearGradient
-            colors={["transparent", "rgba(0,0,0,0.6)", "#000000"]}
-            locations={[0, 0.5, 0.85]}
-            start={{ x: 0.5, y: 0 }}
-            end={{ x: 0.5, y: 1 }}
-            style={{
-              position: "absolute",
-              width: "100%",
-              height: "100%",
-              top: 0,
-              left: 0,
-            }}
-          />
-        </Box>
-      )}
+      <Box
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: 500,
+          top: 0,
+          left: 0,
+        }}
+      >
+        <ImageBackground
+          source={backgroundImageSource}
+          style={{ width: "100%", height: "100%" }}
+          onLoad={onImageLoaded}
+          fadeDuration={imageLoaded ? 0 : 300}
+        />
+      </Box>
 
       <Box style={{ flex: 1, paddingTop: topInset }}>
         <ScreenHeroSectionView ctas={<CardActions ctas={ctas} />}>

apps/ledger-live-mobile/src/images/card/card-landing-bg.webp

@@ -10,6 +10,7 @@ import { PAGE_NAME, CARD_APP_ID, CL_CARD_APP_ID } from "../../constants";
 import { NavigatorName, ScreenName } from "~/const";
 import { useNavigation } from "@react-navigation/core";
 import { useNavigationBarHeights } from "LLM/hooks/useNavigationBarHeights";
+import { ImageSourcePropType } from "react-native";
 
 const HEADER_HEIGHT = 48;
 
@@ -21,9 +22,9 @@ export interface CardLandingScreenViewModelResult {
   readonly topInset: number;
   readonly bottomInset: number;
   readonly backgroundColor: string;
-  readonly isWallet40DarkMode: boolean;
   readonly imageLoaded: boolean;
   readonly onImageLoaded: () => void;
+  readonly backgroundImageSource: ImageSourcePropType;
 }
 
 const TRACKING_BUTTON_EVENT = "button_clicked";
@@ -87,6 +88,13 @@ export const useCardLandingScreenViewModel = (): CardLandingScreenViewModelResul
     [t, handleExploreCardsPress, handleIHaveACardPress],
   );
 
+  const backgroundImageSource = useMemo(() => {
+    if (isWallet40DarkMode) {
+      return require("~/images/card/card-bg.webp");
+    }
+    return require("~/images/portfolio/v4-light.webp");
+  }, [isWallet40DarkMode]);
+
   const topInset = HEADER_HEIGHT;
   const bottomInset = bottomBarHeight;
 
@@ -98,8 +106,8 @@ export const useCardLandingScreenViewModel = (): CardLandingScreenViewModelResul
     topInset,
     bottomInset,
     backgroundColor: lumenTheme.colors.bg.base,
-    isWallet40DarkMode,
     imageLoaded,
     onImageLoaded,
+    backgroundImageSource,
   };
 };