Merge pull request #14781 from LedgerHQ/chore/LIVE-26919/use-lumen-bottom-sheet

LIVE-26919: Use lumen bottom sheet for WV4 Tour

Author: cfloume

.changeset/smart-mangos-joke.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+chore: use lumen bottom sheet for WV4 Tour

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

@@ -4,10 +4,11 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Animated from "react-native-reanimated";
 import { FlatList } from "react-native-gesture-handler";
 import { useWalletV4TourDrawerViewModel } from "./hooks/useWalletV4TourDrawerViewModel";
-import QueuedDrawerGorhom from "LLM/components/QueuedDrawer/temp/QueuedDrawerGorhom";
+import { BottomSheetHeader } from "@ledgerhq/lumen-ui-rnative";
+import { default as QueuedDrawerBottomSheet } from "LLM/components/QueuedDrawer/QueuedDrawerBottomSheet";
 import { SlideItem } from "./components/SlideItem";
 import { SlideFooterButton } from "./components/SlideFooterButton";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { ProgressIndicator } from "./components/ProgressIndicator";
 import { TrackScreen } from "~/analytics";
 import { PAGE_TRACKING_WALLET_V4_TOUR } from "./const";
@@ -37,49 +38,54 @@ export const WalletV4TourDrawer = ({
   }
 
   return (
-    <QueuedDrawerGorhom
+    <QueuedDrawerBottomSheet
       isRequestingToBeOpened={isDrawerOpen}
       onClose={closeDrawer}
       snapPoints={["92%"]}
-      noCloseButton={false}
-      animateOnMount={false}
     >
-      <TrackScreen page={PAGE_TRACKING_WALLET_V4_TOUR} source="Wallet" />
-      <Slides
-        bounces={false}
-        as={AnimatedGestureHandlerFlatList}
-        testID="walletv4-tour-slides-container"
-        initialNumToRender={1}
-        maxToRenderPerBatch={1}
-        onSlideChange={onSlideChange}
-      >
-        <Slides.Content>
-          {slides.map((slide, index) => (
-            <Slides.Content.Item key={slide.title + slide.description}>
-              <SlideItem
-                title={slide.title}
-                description={slide.description}
-                index={index}
-                lottieSrc={slide.lottieSrc}
-                speed={slide.speed}
-              />
-            </Slides.Content.Item>
-          ))}
-        </Slides.Content>
+      <View style={styles.content}>
+        <BottomSheetHeader />
+        <TrackScreen page={PAGE_TRACKING_WALLET_V4_TOUR} source="Wallet" />
+        <Slides
+          bounces={false}
+          as={AnimatedGestureHandlerFlatList}
+          testID="walletv4-tour-slides-container"
+          initialNumToRender={1}
+          maxToRenderPerBatch={1}
+          onSlideChange={onSlideChange}
+        >
+          <Slides.Content>
+            {slides.map((slide, index) => (
+              <Slides.Content.Item key={slide.title + slide.description}>
+                <SlideItem
+                  title={slide.title}
+                  description={slide.description}
+                  index={index}
+                  lottieSrc={slide.lottieSrc}
+                  speed={slide.speed}
+                />
+              </Slides.Content.Item>
+            ))}
+          </Slides.Content>
 
-        <Slides.ProgressIndicator style={styles.progressIndicator}>
-          <ProgressIndicator />
-        </Slides.ProgressIndicator>
+          <Slides.ProgressIndicator style={styles.progressIndicator}>
+            <ProgressIndicator />
+          </Slides.ProgressIndicator>
 
-        <Slides.Footer style={{ marginBottom: bottomInset + 60 }}>
-          <SlideFooterButton onClose={handleCloseDrawer} />
-        </Slides.Footer>
-      </Slides>
-    </QueuedDrawerGorhom>
+          <Slides.Footer style={{ marginBottom: bottomInset + 60 }}>
+            <SlideFooterButton onClose={handleCloseDrawer} />
+          </Slides.Footer>
+        </Slides>
+      </View>
+    </QueuedDrawerBottomSheet>
   );
 };
 
 const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
   progressIndicator: {
     marginTop: 40,
     marginBottom: 32,