🚦 [FEAT] Create the llmMarketQuickActions feature flag (#7558)

* Create the llmMarketQuickActions feature flag

* Introduce the MarketQuickActions component behind the FF

* Update changelog

* Fix type checking

* Improve navigation routes type accuracy

* Define the quick actions only once

---------

Co-authored-by: Theophile Sandoz <Theophile Sandoz>

.changeset/tiny-socks-jam.md

@@ -0,0 +1,7 @@
+---
+"@ledgerhq/types-live": minor
+"live-mobile": minor
+"@ledgerhq/live-common": minor
+---
+
+Create the llmMarketQuickActions feature flag

apps/ledger-live-mobile/src/components/MarketQuickActions/index.tsx

@@ -0,0 +1,55 @@
+import { useNavigation } from "@react-navigation/native";
+import { StackNavigationProp } from "@react-navigation/stack";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { QuickActionButtonProps, QuickActionList } from "@ledgerhq/native-ui";
+import { EntryOf } from "~/types/helpers";
+import useQuickActions from "../../hooks/useQuickActions";
+import { BaseNavigatorStackParamList } from "../RootNavigator/types/BaseNavigator";
+
+export const MarketQuickActions = () => {
+  const { t } = useTranslation();
+  const navigation = useNavigation<StackNavigationProp<BaseNavigatorStackParamList>>();
+  const { quickActionsList } = useQuickActions();
+
+  const quickActionsData: QuickActionButtonProps[] = useMemo(
+    () =>
+      (Object.entries(QUICK_ACTIONS) as EntryOf<typeof QUICK_ACTIONS>[]).flatMap(([key, prop]) => {
+        const action = quickActionsList[key];
+        if (!action) return [];
+
+        return {
+          variant: "small",
+          textVariant: "small",
+          Icon: action.icon,
+          children: t(prop.name),
+          onPress: () =>
+            navigation.navigate<keyof BaseNavigatorStackParamList>(
+              ...(action.route as EntryOf<BaseNavigatorStackParamList>),
+            ),
+          disabled: action.disabled,
+        };
+      }),
+    [quickActionsList, t, navigation],
+  );
+
+  return <QuickActionList data={quickActionsData} numColumns={5} id="asset_five_columns" />;
+};
+
+const QUICK_ACTIONS = {
+  SEND: {
+    name: "portfolio.quickActions.send",
+  },
+  RECEIVE: {
+    name: "portfolio.quickActions.deposit",
+  },
+  BUY: {
+    name: "portfolio.quickActions.buy",
+  },
+  SWAP: {
+    name: "portfolio.quickActions.swap",
+  },
+  STAKE: {
+    name: "portfolio.quickActions.stake",
+  },
+} as const;

apps/ledger-live-mobile/src/newArch/features/Market/screens/MarketDetail/index.tsx

@@ -1,5 +1,6 @@
 import React, { memo, useMemo, useState } from "react";
 import { useTheme } from "styled-components/native";
+import FeatureToggle from "@ledgerhq/live-common/featureFlags/FeatureToggle";
 import { Flex, ScrollContainerHeader, Text } from "@ledgerhq/native-ui";
 import { FlatList, Image, RefreshControl } from "react-native";
 import { useTranslation } from "react-i18next";
@@ -17,6 +18,7 @@ import MarketGraph from "./components/MarketGraph";
 import { ScreenName } from "~/const";
 import { withDiscreetMode } from "~/context/DiscreetModeContext";
 import { FabMarketActions } from "~/components/FabActions/actionsList/market";
+import { MarketQuickActions } from "~/components/MarketQuickActions";
 import BackButton from "./components/BackButton";
 import { Item } from "~/components/Graph/types";
 import {
@@ -138,13 +140,18 @@ function View({
             </Flex>
 
             {internalCurrency ? (
-              <Flex mb={6}>
-                <FabMarketActions
-                  defaultAccount={defaultAccount}
-                  currency={internalCurrency}
-                  accounts={accounts}
-                />
-              </Flex>
+              <FeatureToggle
+                featureId="llmMarketQuickActions"
+                fallback={
+                  <Flex mb={6}>
+                    <FabMarketActions
+                      defaultAccount={defaultAccount}
+                      currency={internalCurrency}
+                      accounts={accounts}
+                    />
+                  </Flex>
+                }
+              />
             ) : null}
           </>
         }
@@ -166,6 +173,10 @@ function View({
           currency={internalCurrency}
         />
 
+        <FeatureToggle featureId="llmMarketQuickActions">
+          <MarketQuickActions />
+        </FeatureToggle>
+
         {accounts?.length > 0 ? (
           <Flex mx={6} mt={8}>
             <Text variant="h3">{t("accounts.title")}</Text>

apps/ledger-live-mobile/src/types/helpers.ts

@@ -18,3 +18,8 @@ export type Merge<A, B> = Omit<A, keyof B> & B;
 export type PartialNullable<T> = {
   [P in keyof T]?: T[P] | null;
 };
+
+export type EntryOf<
+  T extends Record<string, unknown>,
+  K extends keyof T = keyof T,
+> = K extends unknown ? [K, T[K]] : never;

libs/ledger-live-common/src/featureFlags/defaultFeatures.ts

@@ -484,6 +484,7 @@ export const DEFAULT_FEATURES: Features = {
   lldnewArchOrdinals: DEFAULT_FEATURE,
   enableAppsBackup: DEFAULT_FEATURE,
   web3hub: DEFAULT_FEATURE,
+  llmMarketQuickActions: DEFAULT_FEATURE,
 };
 
 // Firebase SDK treat JSON values as strings

libs/ledgerjs/packages/types-live/src/feature.ts

@@ -187,6 +187,7 @@ export type Features = CurrencyFeatures & {
   lldnewArchOrdinals: DefaultFeature;
   enableAppsBackup: Feature_EnableAppsBackup;
   web3hub: Feature_web3hub;
+  llmMarketQuickActions: DefaultFeature;
 };
 
 /**