Feat/add access to settings from LLM/LLD welcome screen (#1615)

* add new entry point for features flags settings in LLD

* add new entry point for features flags settings in LLM

* c stash

* re use FF components

* Add DebugFeatureFlags screen in BaseOnboardingNavigator & fix access to it in welcome screen

* Improve UI of LLM FF settings so the top of the list is not hidden by keyboard

* Fix changeset

* Use same logic as on LLM for FF button in LLD

* LLM welcome: Navigate to settings instead of just FF settings

* Add hidden button to navigate to settings in LLD welcome screen

* Update changesets

* fix typecheck

* Fix props typing in WelcomeScreenSettings

Co-authored-by: Olivier Freyssinet <[email protected]>

.changeset/old-parrots-cheer.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Add hidden button in Welcome screen to access the settings.

.changeset/silly-wolves-prove.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Add hidden button in Welcome screen to access the settings.

apps/ledger-live-desktop/src/renderer/Default.jsx

@@ -69,6 +69,7 @@ import MarketCoinScreen from "~/renderer/screens/market/MarketCoinScreen";
 import Learn from "~/renderer/screens/learn";
 
 import { useProviders } from "~/renderer/screens/exchange/Swap2/Form";
+import WelcomeScreenSettings from "~/renderer/screens/settings/WelcomeScreenSettings";
 
 // in order to test sentry integration, we need the ability to test it out.
 const LetThisCrashForCrashTest = () => {
@@ -192,7 +193,9 @@ export default function Default() {
               <Route path="/USBTroubleshooting">
                 <USBTroubleshooting onboarding={!hasCompletedOnboarding} />
               </Route>
-              {hasCompletedOnboarding && (
+              {!hasCompletedOnboarding ? (
+                <Route path="/settings" render={props => <WelcomeScreenSettings {...props} />} />
+              ) : (
                 <Route>
                   <Switch>
                     <Route exact path="/walletconnect">

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/Welcome/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
@@ -16,7 +16,6 @@ import stayOffline from "./assets/stayOffline.png";
 import validateTransactions from "./assets/validateTransactions.png";
 
 import { registerAssets } from "~/renderer/components/Onboarding/preloadAssets";
-
 import { hasCompletedOnboardingSelector, languageSelector } from "~/renderer/reducers/settings";
 
 const stepLogos = [accessCrypto, ownPrivateKey, stayOffline, validateTransactions, setupNano];
@@ -113,17 +112,54 @@ export function Welcome() {
     isLast: index === stepLogos.length - 1,
   }));
 
+  const countTitle = useRef(0);
+  const countSubtitle = useRef(0);
+  const [
+    isFeatureFlagsSettingsButtonDisplayed,
+    setIsFeatureFlagsSettingsButtonDisplayed,
+  ] = useState<boolean>(false);
+
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+
+  const handleOpenFeatureFlagsDrawer = useCallback(nb => {
+    if (nb === "1") countTitle.current++;
+    else if (nb === "2") countSubtitle.current++;
+    if (countTitle.current > 3 && countSubtitle.current > 5) {
+      countTitle.current = 0;
+      countSubtitle.current = 0;
+      setIsFeatureFlagsSettingsButtonDisplayed(true);
+    }
+    if (timeout.current) clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => {
+      countTitle.current = 0;
+      countSubtitle.current = 0;
+    }, 1000);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (timeout.current) clearTimeout(timeout.current);
+    };
+  }, []);
+
   return (
     <WelcomeContainer>
       <LeftContainer>
         <Presentation>
           <Logos.LedgerLiveRegular color={colors.neutral.c100} />
-          <Text variant="h1" pt={10} pb={7}>
+          <Text variant="h1" pt={10} pb={7} onClick={() => handleOpenFeatureFlagsDrawer("1")}>
             {t("onboarding.screens.welcome.title")}
           </Text>
-          <Description variant="body">{t("onboarding.screens.welcome.description")}</Description>
+          <Description variant="body" onClick={() => handleOpenFeatureFlagsDrawer("2")}>
+            {t("onboarding.screens.welcome.description")}
+          </Description>
         </Presentation>
         <ProductHighlight>
+          {isFeatureFlagsSettingsButtonDisplayed && (
+            <Button variant="main" outline mb="24px" onClick={() => history.push("/settings")}>
+              {t("settings.title")}
+            </Button>
+          )}
           <Button
             data-test-id="v3-onboarding-get-started-button"
             iconPosition="right"

apps/ledger-live-desktop/src/renderer/screens/settings/WelcomeScreenSettings.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { RouteComponentProps } from "react-router-dom";
+import { Icons, Link } from "@ledgerhq/react-ui";
+import Box from "~/renderer/components/Box";
+import Page from "~/renderer/components/Page";
+import Settings from ".";
+
+type Props = RouteComponentProps;
+
+const WelcomeScreenSettings: React.FC<Props> = props => {
+  return (
+    <Box
+      grow
+      horizontal
+      bg="palette.background.default"
+      color="palette.text.shade60"
+      style={{ width: "100%", height: "100%" }}
+    >
+      <Page>
+        <Link
+          alignSelf="flex-start"
+          onClick={() => {
+            props.history.push("/onboarding");
+          }}
+          mb={5}
+          Icon={Icons.ArrowLeftMedium}
+          iconPosition="left"
+        >
+          Back
+        </Link>
+        <Settings {...props} />
+      </Page>
+    </Box>
+  );
+};
+
+export default WelcomeScreenSettings;

apps/ledger-live-desktop/src/renderer/screens/settings/sections/Developer/FeatureFlagsSettings/index.tsx

@@ -17,7 +17,7 @@ the input field below and it will appear in the list. Type the \
 flag name in camelCase without the "feature" prefix.\
 `;
 
-const Content = withV3StyleProvider((props: { visible?: boolean }) => {
+export const FeatureFlagContent = withV3StyleProvider((props: { visible?: boolean }) => {
   const { t } = useTranslation();
   const [focusedName, setFocusedName] = useState<string | undefined>();
   const [hiddenFlagName, setHiddenFlagName] = useState("");
@@ -104,7 +104,7 @@ const FeatureFlagsSettings = () => {
       descContainerStyle={{ maxWidth: undefined }}
       contentContainerStyle={{ marginRight: 0 }}
       childrenContainerStyle={{ alignSelf: visible ? "flex-start" : "center" }}
-      desc={<Content visible={visible} />}
+      desc={<FeatureFlagContent visible={visible} />}
     >
       <ButtonV2 small primary onClick={handleClick}>
         {visible ? "Hide" : "Show"}

apps/ledger-live-mobile/src/screens/FeatureFlagsSettings/index.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useState, useMemo } from "react";
-import { StyleSheet, View } from "react-native";
 import { useTranslation } from "react-i18next";
 import { defaultFeatures } from "@ledgerhq/live-common/featureFlags/index";
 import type { FeatureId } from "@ledgerhq/types-live";
 
 import { BaseInput, Text, Flex, SearchInput, Icons } from "@ledgerhq/native-ui";
 import { includes, lowerCase, trim } from "lodash";
 import { InputRenderLeftContainer } from "@ledgerhq/native-ui/components/Form/Input/BaseInput";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import NavigationScrollView from "../../components/NavigationScrollView";
 import FeatureFlagDetails, {
   Divider,
@@ -17,8 +17,8 @@ import Alert from "../../components/Alert";
 
 const addFlagHint = `\
 If a feature flag is defined in the targeted Firebase environment \
-but it is missing from the following list, you can type its name in \
-the input field below and it will appear in the list.\nType the \
+but it is missing from the list, you can type its name in \
+the input field "Add missing flag" above and it will appear in the list.\nType the \
 flag name in camelCase without the "feature" prefix.\
 `;
 
@@ -71,48 +71,46 @@ export default function DebugFeatureFlags() {
     [filteredFlags, focusedName],
   );
 
+  const insets = useSafeAreaInsets();
+
   return (
-    <NavigationScrollView>
-      <View style={styles.root}>
-        <Text mb={6}>{t("settings.debug.featureFlagsTitle")}</Text>
-        <Flex flexDirection="row">
-          <Text>Legend: </Text>
-          <TagEnabled mx={2}>enabled flag</TagEnabled>
-          <TagDisabled mx={2}>disabled flag</TagDisabled>
-        </Flex>
-        <Divider />
-        <SearchInput
-          value={searchInput}
-          placeholder="Search flag"
-          onChange={handleSearch}
-          autoCapitalize="none"
-        />
-        <Flex my={3}>
-          <Alert title={addFlagHint} type="hint" />
+    <>
+      <NavigationScrollView>
+        <Flex p={16}>
+          <Text mb={6}>{t("settings.debug.featureFlagsTitle")}</Text>
+          <SearchInput
+            value={searchInput}
+            placeholder="Search flag"
+            onChange={handleSearch}
+            autoCapitalize="none"
+          />
+          <Flex mt={3} />
+          <BaseInput
+            value={undefined}
+            renderLeft={() => (
+              <InputRenderLeftContainer>
+                <Icons.PlusMedium color="neutral.c70" />
+              </InputRenderLeftContainer>
+            )}
+            placeholder="Add missing flag (instructions above)"
+            onChange={handleAddHiddenFlag}
+            autoCapitalize="none"
+          />
+          <Flex flexDirection="row" mt={4}>
+            <Text>Legend: </Text>
+            <TagEnabled mx={2}>enabled flag</TagEnabled>
+            <TagDisabled mx={2}>disabled flag</TagDisabled>
+          </Flex>
+          <Divider />
+          {filteredFlags.length === 0 ? (
+            <Text>{`No flag matching "${searchInput}"`}</Text>
+          ) : null}
+          {content}
         </Flex>
-        <BaseInput
-          value={undefined}
-          renderLeft={() => (
-            <InputRenderLeftContainer>
-              <Icons.PlusMedium color="neutral.c70" />
-            </InputRenderLeftContainer>
-          )}
-          placeholder="Add missing flag (instructions above)"
-          onChange={handleAddHiddenFlag}
-          autoCapitalize="none"
-        />
-        <Divider />
-        {filteredFlags.length === 0 ? (
-          <Text>{`No flag matching "${searchInput}"`}</Text>
-        ) : null}
-        {content}
-      </View>
-    </NavigationScrollView>
+      </NavigationScrollView>
+      <Flex px={16} mt={3} mb={insets.bottom}>
+        <Alert title={addFlagHint} type="hint" />
+      </Flex>
+    </>
   );
 }
-
-const styles = StyleSheet.create({
-  root: {
-    padding: 16,
-  },
-});

apps/ledger-live-mobile/src/screens/Onboarding/steps/welcome.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components/native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -8,7 +8,7 @@ import Video from "react-native-video";
 import { Linking } from "react-native";
 import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
 import { useDispatch } from "react-redux";
-import { ScreenName } from "../../../const";
+import { NavigatorName, ScreenName } from "../../../const";
 import StyledStatusBar from "../../../components/StyledStatusBar";
 import { urls } from "../../../config/urls";
 import { useTermsAccept } from "../../../logic/terms";
@@ -73,6 +73,40 @@ function OnboardingStepWelcome({ navigation }: any) {
 
   const videoMounted = !useIsAppInBackground();
 
+  const countTitle = useRef(0);
+  const countSubtitle = useRef(0);
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+
+  const handleNavigateToFeatureFlagsSettings = useCallback(
+    nb => {
+      if (nb === "1") countTitle.current++;
+      else if (nb === "2") countSubtitle.current++;
+      if (countTitle.current > 3 && countSubtitle.current > 5) {
+        countTitle.current = 0;
+        countSubtitle.current = 0;
+        navigation.navigate(NavigatorName.Base, {
+          screen: NavigatorName.Settings,
+          params: {
+            screen: ScreenName.SettingsScreen,
+            params: {},
+          },
+        });
+      }
+      if (timeout.current) clearTimeout(timeout.current);
+      timeout.current = setTimeout(() => {
+        countTitle.current = 0;
+        countSubtitle.current = 0;
+      }, 1000);
+    },
+    [navigation],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timeout.current) clearTimeout(timeout.current);
+    };
+  }, []);
+
   return (
     <ForceTheme selectedPalette={"dark"}>
       <Flex flex={1} position="relative" bg="constant.purple">
@@ -136,10 +170,19 @@ function OnboardingStepWelcome({ navigation }: any) {
             color="neutral.c100"
             pb={3}
             style={{ textTransform: "uppercase" }}
+            onPress={() => handleNavigateToFeatureFlagsSettings("1")}
+            suppressHighlighting
           >
             {t("onboarding.stepWelcome.title")}
           </Text>
-          <Text variant="large" fontWeight="medium" color="neutral.c80" pb={9}>
+          <Text
+            variant="large"
+            fontWeight="medium"
+            color="neutral.c80"
+            pb={9}
+            onPress={() => handleNavigateToFeatureFlagsSettings("2")}
+            suppressHighlighting
+          >
             {t("onboarding.stepWelcome.subtitle")}
           </Text>
           <Button