feat: Adapt Modular Dev Tool

Author: mcayuelas-ledger

.changeset/fuzzy-bees-thank.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Adapt Modular Dev Tool

apps/ledger-live-mobile/src/newArch/features/ModularDrawer/Debug/const/configurationOptions.ts

@@ -1,22 +1,23 @@
-export const assetLeftOptions = [
-  { label: "Undefined", value: "undefined" },
-  { label: "APY", value: "apy" },
-  { label: "Price Variation", value: "priceVariation" },
-];
+import {
+  assetsLeftElementOptions,
+  assetsRightElementOptions,
+  networksLeftElementOptions,
+  networksRightElementOptions,
+} from "@ledgerhq/live-common/wallet-api/ModularDrawer/types";
 
-export const assetRightOptions = [
-  { label: "Undefined", value: "undefined" },
-  { label: "Balance", value: "balance" },
-  { label: "Market Trend", value: "marketTrend" },
-];
+const toHumanLabel = (value: string): string => {
+  if (value === "undefined") return "Undefined";
+  const withSpaces = value.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/_/g, " ");
+  return withSpaces
+    .split(" ")
+    .map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join(" ");
+};
 
-export const networkLeftOptions = [
-  { label: "Undefined", value: "undefined" },
-  { label: "Number of Accounts", value: "numberOfAccounts" },
-  { label: "Number of Accounts and APY", value: "numberOfAccountsAndApy" },
-];
+const toPickerOptions = <T extends readonly string[]>(values: T) =>
+  values.map(v => ({ label: toHumanLabel(v), value: v }));
 
-export const networkRightOptions = [
-  { label: "Undefined", value: "undefined" },
-  { label: "Balance", value: "balance" },
-];
+export const assetLeftOptions = toPickerOptions(assetsLeftElementOptions);
+export const assetRightOptions = toPickerOptions(assetsRightElementOptions);
+export const networkLeftOptions = toPickerOptions(networksLeftElementOptions);
+export const networkRightOptions = toPickerOptions(networksRightElementOptions);

apps/ledger-live-mobile/src/newArch/features/ModularDrawer/Debug/index.tsx

@@ -14,6 +14,13 @@ import {
   networkRightOptions,
 } from "./const/configurationOptions";
 import { AssetConfiguration, NetworkConfiguration } from "./types";
+import {
+  assetsLeftElementOptions,
+  assetsRightElementOptions,
+  networksLeftElementOptions,
+  networksRightElementOptions,
+} from "@ledgerhq/live-common/wallet-api/ModularDrawer/types";
+import { getElement, makeOnValueChange } from "./utils";
 
 function ModularDrawerScreenDebug() {
   const { openDrawer } = useModularDrawerController();
@@ -46,16 +53,12 @@ function ModularDrawerScreenDebug() {
       flow: "debug_flow",
       source: "debug_source",
       assetsConfiguration: {
-        leftElement:
-          selectedAssetLeftElement === "undefined" ? undefined : selectedAssetLeftElement,
-        rightElement:
-          selectedAssetRightElement === "undefined" ? undefined : selectedAssetRightElement,
+        leftElement: getElement(selectedAssetLeftElement),
+        rightElement: getElement(selectedAssetRightElement),
       },
       networksConfiguration: {
-        leftElement:
-          selectedNetworkLeftElement === "undefined" ? undefined : selectedNetworkLeftElement,
-        rightElement:
-          selectedNetworkRightElement === "undefined" ? undefined : selectedNetworkRightElement,
+        leftElement: getElement(selectedNetworkLeftElement),
+        rightElement: getElement(selectedNetworkRightElement),
       },
     });
   }, [
@@ -85,12 +88,14 @@ function ModularDrawerScreenDebug() {
         </SectionCard>
 
         <SectionCard title="Feature Flag">
-          <FeatureFlagDetails
-            key={"llmModularDrawer"}
-            focused={isFocused}
-            flagName={"llmModularDrawer"}
-            setFocusedName={v => setIsFocused(v === "llmModularDrawer")}
-          />
+          {(["llmModularDrawer", "llmModularDrawerBackendData"] as const).map(flag => (
+            <FeatureFlagDetails
+              key={flag}
+              focused={isFocused}
+              flagName={flag}
+              setFocusedName={v => setIsFocused(v === flag)}
+            />
+          ))}
         </SectionCard>
 
         <SectionCard title="Basic Configuration">
@@ -125,23 +130,18 @@ function ModularDrawerScreenDebug() {
             label="Left Element"
             description="Choose what to display on the left side of asset rows"
             value={selectedAssetLeftElement || "undefined"}
-            onValueChange={(value: string) => {
-              if (value === "undefined" || value === "apy" || value === "priceVariation") {
-                setSelectedAssetLeftElement(value);
-              }
-            }}
+            onValueChange={makeOnValueChange(assetsLeftElementOptions, setSelectedAssetLeftElement)}
             options={assetLeftOptions}
           />
 
           <PickerField
             label="Right Element"
             description="Choose what to display on the right side of asset rows"
             value={selectedAssetRightElement || "undefined"}
-            onValueChange={(value: string) => {
-              if (value === "undefined" || value === "balance" || value === "marketTrend") {
-                setSelectedAssetRightElement(value);
-              }
-            }}
+            onValueChange={makeOnValueChange(
+              assetsRightElementOptions,
+              setSelectedAssetRightElement,
+            )}
             options={assetRightOptions}
           />
         </SectionCard>
@@ -151,27 +151,21 @@ function ModularDrawerScreenDebug() {
             label="Left Element"
             description="Choose what to display on the left side of network rows"
             value={selectedNetworkLeftElement || "undefined"}
-            onValueChange={(value: string) => {
-              if (
-                value === "undefined" ||
-                value === "numberOfAccounts" ||
-                value === "numberOfAccountsAndApy"
-              ) {
-                setSelectedNetworkLeftElement(value);
-              }
-            }}
+            onValueChange={makeOnValueChange(
+              networksLeftElementOptions,
+              setSelectedNetworkLeftElement,
+            )}
             options={networkLeftOptions}
           />
 
           <PickerField
             label="Right Element"
             description="Choose what to display on the right side of network rows"
             value={selectedNetworkRightElement || "undefined"}
-            onValueChange={(value: string) => {
-              if (value === "undefined" || value === "balance") {
-                setSelectedNetworkRightElement(value);
-              }
-            }}
+            onValueChange={makeOnValueChange(
+              networksRightElementOptions,
+              setSelectedNetworkRightElement,
+            )}
             options={networkRightOptions}
           />
         </SectionCard>

apps/ledger-live-mobile/src/newArch/features/ModularDrawer/Debug/utils.ts

@@ -0,0 +1,17 @@
+const getElement = <T extends string>(value: T | "undefined" | undefined): T | undefined =>
+  value === "undefined" || value === undefined ? undefined : value;
+
+const isOneOf = <T extends readonly string[]>(value: string, allowed: T): value is T[number] => {
+  for (const item of allowed) {
+    if (item === value) return true;
+  }
+  return false;
+};
+
+const makeOnValueChange =
+  <T extends readonly string[]>(allowed: T, setter: (v: T[number]) => void) =>
+  (value: string) => {
+    if (isOneOf(value, allowed)) setter(value);
+  };
+
+export { getElement, isOneOf, makeOnValueChange };