diff --git a/.changeset/afraid-lemons-train.md b/.changeset/afraid-lemons-train.md new file mode 100644 index 000000000000..1b3837fb0140 --- /dev/null +++ b/.changeset/afraid-lemons-train.md @@ -0,0 +1,5 @@ +--- +"live-mobile": minor +--- + +Update background images on card and wallet for w4.0 diff --git a/apps/ledger-live-mobile/src/components/WalletTab/WalletTabBackgroundGradient.tsx b/apps/ledger-live-mobile/src/components/WalletTab/WalletTabBackgroundGradient.tsx index b43a127c5d56..ce8e80ab99f3 100644 --- a/apps/ledger-live-mobile/src/components/WalletTab/WalletTabBackgroundGradient.tsx +++ b/apps/ledger-live-mobile/src/components/WalletTab/WalletTabBackgroundGradient.tsx @@ -16,7 +16,7 @@ function WalletTabBackgroundGradient({ color, visible = true }: Readonly) 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) ); 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 ( ) onLoadStart={() => setImageLoaded(false)} fadeDuration={imageLoaded ? 0 : 300} /> - {isWallet40DarkMode ? ( - // Wallet 4.0: permanent gradient from transparent to black (faster fade) - - ) : ( - // Legacy: animated gradient on scroll + {!isWallet40Enabled && ( void; + readonly backgroundImageSource: ImageSourcePropType; } const CardLandingScreenView = ({ @@ -32,45 +31,29 @@ const CardLandingScreenView = ({ topInset, bottomInset, backgroundColor, - isWallet40DarkMode, imageLoaded, onImageLoaded, + backgroundImageSource, }: CardLandingScreenViewProps) => { return ( - - {isWallet40DarkMode && ( - - - - - )} + + + }> diff --git a/apps/ledger-live-mobile/src/mvvm/features/Card/screens/CardLandingScreen/useCardLandingScreenViewModel.ts b/apps/ledger-live-mobile/src/mvvm/features/Card/screens/CardLandingScreen/useCardLandingScreenViewModel.ts index 562a0bb47a8b..addf649f5022 100644 --- a/apps/ledger-live-mobile/src/mvvm/features/Card/screens/CardLandingScreen/useCardLandingScreenViewModel.ts +++ b/apps/ledger-live-mobile/src/mvvm/features/Card/screens/CardLandingScreen/useCardLandingScreenViewModel.ts @@ -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, }; }; diff --git a/apps/ledger-live-mobile/src/screens/PTX/Earn/EarnBackground.tsx b/apps/ledger-live-mobile/src/screens/PTX/Earn/EarnBackground.tsx index efc46ac19604..f8fe209b9d51 100644 --- a/apps/ledger-live-mobile/src/screens/PTX/Earn/EarnBackground.tsx +++ b/apps/ledger-live-mobile/src/screens/PTX/Earn/EarnBackground.tsx @@ -22,16 +22,13 @@ function EarnBackgroundComponent({ scrollY, fadeDistance }: Props) { backgroundColor: theme.colors.bg.base, }, imageContainer: { - aspectRatio: 25 / 32, + width: "100%", + height: 500, }, }), [], ); - const isDark = useMemo(() => { - return colorScheme === "dark"; - }, [colorScheme]); - const opacity = useMemo( () => scrollY @@ -44,15 +41,18 @@ function EarnBackgroundComponent({ scrollY, fadeDistance }: Props) { [scrollY, fadeDistance], ); - const source = require("~/images/liveApps/earn/background-dark.webp"); + const source = useMemo(() => { + if (colorScheme === "dark") { + return require("~/images/liveApps/earn/background-dark.webp"); + } + return require("~/images/portfolio/v4-light.webp"); + }, [colorScheme]); return ( - {isDark && ( - - - - )} + + + ); }