feat: wallet v4 tour

Author: tonykhaov

.changeset/wallet-v4-tour-drawer.md

@@ -0,0 +1,6 @@
+---
+"live-mobile": minor
+"@ledgerhq/native-ui": minor
+---
+
+Add Wallet V4 Tour drawer with slides showcasing new features

apps/ledger-live-mobile/src/locales/en/common.json

@@ -8409,5 +8409,26 @@
     "actions": {
       "swap": "Swap"
     }
+  },
+  "walletV4Tour": {
+    "title": "Discover your new portfolio",
+    "slides": {
+      "portfolio": {
+        "title": "Your portfolio, reimagined",
+        "description": "We've decluttered your home screen. Missing your graph? Just tap below your balance."
+      },
+      "navigation": {
+        "title": "Everything in its right place",
+        "description": "My Ledger & Discover are now at the top. Swap & Card have moved to the bottom for faster access."
+      },
+      "actions": {
+        "title": "Actions at market speed",
+        "description": "Spot market trends with the new banner and trade instantly."
+      }
+    },
+    "cta": {
+      "continue": "Continue",
+      "explore": "Explore my new portfolio"
+    }
   }
 }

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/__integrations__/walletV4TourDrawer.test.tsx

@@ -1,31 +1,23 @@
 import React from "react";
 import { Button } from "react-native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import { render, screen, waitFor } from "@tests/test-renderer";
+import { fireEvent, render, screen, waitFor } from "@tests/test-renderer";
 import { useWalletV4TourDrawer, WalletV4TourDrawer } from "../index";
 
-const Stack = createNativeStackNavigator();
-
-const TestScreen = () => {
+const TestComponent = () => {
   const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = useWalletV4TourDrawer();
   return (
     <>
       <Button onPress={handleOpenDrawer} title="Open Drawer" />
-      <Button onPress={handleCloseDrawer} title="Close Drawer" />
-      <WalletV4TourDrawer isDrawerOpen={isDrawerOpen} handleCloseDrawer={handleCloseDrawer} />
+      {isDrawerOpen && (
+        <WalletV4TourDrawer isDrawerOpen={isDrawerOpen} handleCloseDrawer={handleCloseDrawer} />
+      )}
     </>
   );
 };
 
-const TestNavigator = () => (
-  <Stack.Navigator screenOptions={{ headerShown: false }}>
-    <Stack.Screen name="Test" component={TestScreen} />
-  </Stack.Navigator>
-);
-
 describe("WalletV4TourDrawer integration", () => {
-  it("should persist seen state when closed", async () => {
-    const { store, user } = render(<TestNavigator />, {
+  function renderTestComponent() {
+    const rendered = render(<TestComponent />, {
       overrideInitialState: state => ({
         ...state,
         settings: {
@@ -35,25 +27,72 @@ describe("WalletV4TourDrawer integration", () => {
       }),
     });
 
+    // Run this to make sure Slides is rendered as it requires its container's width > 0
+    const resizeScreenWidth = () => {
+      const slidesContainer = screen.getByTestId("walletv4-tour-slides-container");
+      fireEvent(slidesContainer, "layout", {
+        nativeEvent: { layout: { width: 375, height: 800 } },
+      });
+    };
+
+    return {
+      ...rendered,
+      resizeScreenWidth,
+    };
+  }
+
+  const SLIDES = [
+    {
+      title: "Your portfolio, reimagined",
+      description:
+        "We've decluttered your home screen. Missing your graph? Just tap below your balance.",
+    },
+    {
+      title: "Everything in its right place",
+      description:
+        "My Ledger & Discover are now at the top. Swap & Card have moved to the bottom for faster access.",
+    },
+    {
+      title: "Actions at market speed",
+      description: "Spot market trends with the new banner and trade instantly.",
+    },
+  ];
+
+  it("should be able to open the drawer and see all the slides", async () => {
+    const { user, resizeScreenWidth } = renderTestComponent();
+
     await user.press(screen.getByText("Open Drawer"));
-    await user.press(screen.getByText("Close Drawer"));
 
-    await waitFor(() => expect(store.getState().settings.hasSeenWalletV4Tour).toBe(true));
-  });
+    resizeScreenWidth();
 
-  it("should not open drawer when tour has already been seen", async () => {
-    const { store, user } = render(<TestNavigator />, {
-      overrideInitialState: state => ({
-        ...state,
-        settings: {
-          ...state.settings,
-          hasSeenWalletV4Tour: true,
-        },
-      }),
+    await waitFor(() => expect(screen.getByText("Your portfolio, reimagined")).toBeOnTheScreen());
+    SLIDES.forEach(slide => {
+      expect(screen.getByText(slide.title)).toBeOnTheScreen();
+      expect(screen.getByText(slide.description)).toBeOnTheScreen();
     });
+  });
+
+  it('should close the drawer and never show again when user presses the "Explore my new portfolio" button on the last slide', async () => {
+    const { user, resizeScreenWidth } = renderTestComponent();
 
     await user.press(screen.getByText("Open Drawer"));
 
-    expect(store.getState().settings.hasSeenWalletV4Tour).toBe(true);
+    resizeScreenWidth();
+
+    const continueButtons = screen.getAllByRole("button", { name: "Continue" });
+
+    for (const continueButton of continueButtons) {
+      await user.press(continueButton);
+    }
+
+    const exploreButton = screen.getByRole("button", { name: "Explore my new portfolio" });
+    await user.press(exploreButton);
+
+    // should never show again
+    await user.press(screen.getByText("Open Drawer"));
+    SLIDES.forEach(slide => {
+      expect(screen.queryByText(slide.title)).not.toBeOnTheScreen();
+      expect(screen.queryByText(slide.description)).not.toBeOnTheScreen();
+    });
   });
 });

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/components/ProgressDots.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, { interpolate, interpolateColor, useAnimatedStyle } from "react-native-reanimated";
+import { useSlidesContext } from "@ledgerhq/native-ui";
+
+interface DotProps {
+  readonly index: number;
+}
+
+const Dot = ({ index }: DotProps) => {
+  const { scrollProgressSharedValue } = useSlidesContext();
+
+  const inputRange = useMemo(() => [index - 1, index, index + 1], [index]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const scale = interpolate(scrollProgressSharedValue.value, inputRange, [1, 1.25, 1], "clamp");
+    const opacity = interpolate(
+      scrollProgressSharedValue.value,
+      inputRange,
+      [0.5, 1, 0.5],
+      "clamp",
+    );
+    const backgroundColor = interpolateColor(scrollProgressSharedValue.value, inputRange, [
+      "#ccc",
+      "#000",
+      "#ccc",
+    ]);
+
+    return { transform: [{ scale }], opacity, backgroundColor };
+  }, [scrollProgressSharedValue.value, inputRange]);
+
+  return <Animated.View style={[styles.dot, animatedStyle]} />;
+};
+
+export const ProgressDots = () => {
+  const { totalSlides } = useSlidesContext();
+
+  return (
+    <View style={styles.container}>
+      {Array.from({ length: totalSlides }, (_, index) => (
+        <Dot key={index} index={index} />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+});

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/components/SlideFooterButton.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { useSlidesContext } from "@ledgerhq/native-ui";
+import { useTranslation } from "~/context/Locale";
+import { Button } from "@ledgerhq/lumen-ui-rnative";
+
+interface SlideFooterButtonProps {
+  readonly onClose: () => void;
+}
+
+export const SlideFooterButton = ({ onClose }: SlideFooterButtonProps) => {
+  const { totalSlides, goToNext, scrollProgressSharedValue } = useSlidesContext();
+  const { t } = useTranslation();
+
+  const lastIndex = totalSlides - 1;
+  const fadeStart = lastIndex - 0.5;
+
+  const continueStyle = useAnimatedStyle(
+    () => ({
+      opacity: interpolate(
+        scrollProgressSharedValue.value,
+        [fadeStart, lastIndex],
+        [1, 0],
+        "clamp",
+      ),
+    }),
+    [fadeStart, lastIndex, scrollProgressSharedValue.value],
+  );
+
+  const exploreStyle = useAnimatedStyle(
+    () => ({
+      opacity: interpolate(
+        scrollProgressSharedValue.value,
+        [fadeStart, lastIndex],
+        [0, 1],
+        "clamp",
+      ),
+    }),
+    [fadeStart, lastIndex, scrollProgressSharedValue.value],
+  );
+
+  return (
+    <Animated.View style={styles.container}>
+      <Animated.View style={[styles.button, continueStyle]} pointerEvents="box-none">
+        <Button appearance="base" size="md" onPress={goToNext}>
+          {t("walletV4Tour.cta.continue")}
+        </Button>
+      </Animated.View>
+
+      <Animated.View style={[styles.button, exploreStyle]} pointerEvents="box-none">
+        <Button appearance="base" size="md" onPress={onClose}>
+          {t("walletV4Tour.cta.explore")}
+        </Button>
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "relative",
+  },
+  button: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/components/SlideItem.tsx

@@ -0,0 +1,79 @@
+import React, { useCallback, useState } from "react";
+import { type LayoutChangeEvent } from "react-native";
+import { useSlidesContext } from "@ledgerhq/native-ui";
+import { Box, Text } from "@ledgerhq/lumen-ui-rnative";
+import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
+
+interface SlideItemProps {
+  readonly title: string;
+  readonly description: string;
+  readonly index: number;
+}
+
+export function SlideItem({ title, description, index }: SlideItemProps) {
+  const { scrollProgressSharedValue } = useSlidesContext();
+  const [slideWidth, setSlideWidth] = useState(0);
+
+  const handleLayout = useCallback(({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+    setSlideWidth(layout.width);
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const progress = scrollProgressSharedValue.value;
+    return {
+      opacity: interpolate(progress, [index - 1, index, index + 1], [0, 1, 0]),
+      transform: [
+        {
+          translateX: interpolate(
+            progress,
+            [index - 1, index, index + 1],
+            [-slideWidth, 0, slideWidth],
+          ),
+        },
+      ],
+    };
+  }, [index, slideWidth, scrollProgressSharedValue.value]);
+
+  return (
+    <Animated.View onLayout={handleLayout} style={[animatedStyle, { flex: 1 }]}>
+      <Box
+        lx={{
+          flex: 1,
+          marginBottom: "s40",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Box
+          lx={{
+            width: "s256",
+            height: "s320",
+            backgroundColor: "active",
+          }}
+        />
+      </Box>
+
+      <Text
+        typography="heading2SemiBold"
+        lx={{
+          textAlign: "center",
+          marginBottom: "s4",
+        }}
+        numberOfLines={1}
+      >
+        {title}
+      </Text>
+
+      <Text
+        typography="body2"
+        lx={{
+          marginTop: "s8",
+          textAlign: "center",
+        }}
+        numberOfLines={2}
+      >
+        {description}
+      </Text>
+    </Animated.View>
+  );
+}