⚗️ [SUPPORT] : Revamp LedgerSyncDebugger (#7677)

.changeset/cuddly-peas-look.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Revamp LedgerSyncDebugger

apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useLedgerSyncInfo.ts

@@ -6,8 +6,14 @@ import getCloudSyncApi, {
 } from "@ledgerhq/live-wallet/cloudsync/api";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import getWalletSyncEnvironmentParams from "@ledgerhq/live-common/walletSync/getEnvironmentParams";
+import { trustchainSelector } from "@ledgerhq/trustchain/store";
+import { useSelector } from "react-redux";
+import { walletSelector } from "~/renderer/reducers/wallet";
 
 export function useLedgerSyncInfo() {
+  const trustchain = useSelector(trustchainSelector);
+  const walletState = useSelector(walletSelector);
+
   const featureWalletSync = useFeature("lldWalletSync");
   const { trustchainApiBaseUrl, cloudSyncApiBaseUrl } = getWalletSyncEnvironmentParams(
     featureWalletSync?.params?.environment,
@@ -23,10 +29,16 @@ export function useLedgerSyncInfo() {
     },
   ];
 
-  return useQueries({
+  const statusQuery = useQueries({
     queries: QUERIES,
     combine: combineData,
   });
+
+  return {
+    statusQuery,
+    trustchain,
+    walletState,
+  };
 }
 
 function combineData(results: UseQueryResult<TrustchainStatus | CloudSyncStatus, Error>[]) {

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Manage/index.tsx

@@ -24,7 +24,9 @@ const WalletSyncManage = () => {
   const { t } = useTranslation();
   useLifeCycle();
 
-  const { error: ledgerSyncError, isError: isLedgerSyncError } = useLedgerSyncInfo();
+  const {
+    statusQuery: { error: ledgerSyncError, isError: isLedgerSyncError },
+  } = useLedgerSyncInfo();
   const { instances, isLoading, hasError, error: membersError } = useInstances();
 
   const dispatch = useDispatch();

apps/ledger-live-desktop/src/renderer/modals/SimpleHashTools/index.tsx

@@ -29,7 +29,7 @@ const getItems = (
   const items = [
     {
       key: "spam",
-      label: t("settings.experimental.features.testSimpleHash.tabs.spam"),
+      label: t("settings.developer.debugSimpleHash.testSimpleHash.tabs.spam"),
       value: <SpamReport {...hooks.spam} />,
       onClick: hooks.spam.onClick,
       cta: t("settings.developer.debugSimpleHash.debugSpamNft.report"),
@@ -38,7 +38,7 @@ const getItems = (
     },
     {
       key: "refresh",
-      label: t("settings.experimental.features.testSimpleHash.tabs.refresh"),
+      label: t("settings.developer.debugSimpleHash.testSimpleHash.tabs.refresh"),
       value: <RefreshMetadata {...hooks.refresh} />,
       onClick: hooks.refresh.onClick,
       cta: t("settings.developer.debugSimpleHash.debugRefreshMetadata.refresh"),
@@ -47,7 +47,7 @@ const getItems = (
     },
     {
       key: "check",
-      label: t("settings.experimental.features.testSimpleHash.tabs.check"),
+      label: t("settings.developer.debugSimpleHash.testSimpleHash.tabs.check"),
       value: <SpamScore {...hooks.check} />,
       onClick: hooks.check.onClick,
       cta: t("settings.developer.debugSimpleHash.debugCheckSpamScore.check"),
@@ -84,7 +84,7 @@ const SimpleHashToolsDebugger = () => {
         <ModalBody
           onClose={onClose}
           onBack={undefined}
-          title={<Trans i18nKey="settings.experimental.features.testSimpleHash.title" />}
+          title={<Trans i18nKey="settings.developer.debugSimpleHash.testSimpleHash.title" />}
           noScroll
           render={() => (
             <>

apps/ledger-live-desktop/src/renderer/modals/WalletSyncDebugger/index.tsx

@@ -1,92 +1,36 @@
 import React, { useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import Modal, { ModalBody } from "~/renderer/components/Modal";
-import Select from "~/renderer/components/Select";
 import { ScrollArea } from "~/renderer/components/Onboarding/ScrollArea";
-import { Flex, Text } from "@ledgerhq/react-ui";
-import { Flow, Step } from "~/renderer/reducers/walletSync";
-import Switch from "~/renderer/components/Switch";
-import ButtonV3 from "~/renderer/components/ButtonV3";
-import { useDispatch } from "react-redux";
-import {
-  addInstance,
-  setFaked,
-  setFlow,
-  setQrCodePinCode,
-  setQrCodeUrl,
-} from "~/renderer/actions/walletSync";
-import { useHistory } from "react-router";
-import styled, { useTheme } from "styled-components";
-import { TrustchainMember } from "@ledgerhq/trustchain/types";
-import { FlowOptions } from "LLD/features/WalletSync/hooks/useFlows";
-
-type State = {
-  flow: Flow;
-  step: Step | null;
-  instances: TrustchainMember[];
+import { Flex } from "@ledgerhq/react-ui";
+import TabBar from "~/renderer/components/TabBar";
+import { GeneratorLedgerSync } from "~/renderer/screens/settings/sections/Developer/WalletSync/Generator";
+import { CheckerLedgerSync } from "~/renderer/screens/settings/sections/Developer/WalletSync/Checker";
+
+const getItems = (t: (a: string) => string) => {
+  const items = [
+    {
+      key: "generator",
+      label: t("settings.developer.debugWalletSync.modal.generator.title"),
+      value: <GeneratorLedgerSync />,
+    },
+    {
+      key: "checker",
+      label: t("settings.developer.debugWalletSync.modal.check.title"),
+      value: <CheckerLedgerSync />,
+    },
+  ];
+
+  return items;
 };
 
 const WalletSyncDebugger = () => {
   const { t } = useTranslation();
-  const { colors } = useTheme();
-  const history = useHistory();
-  const dispatch = useDispatch();
-
-  const [state, setState] = useState<State>({
-    flow: Flow.Activation,
-    step: Step.CreateOrSynchronize,
-    instances: [],
-  });
-
-  const flowsOptions = Object.keys(FlowOptions).map(flow => ({
-    label: flow,
-    value: flow as Flow,
-  }));
-
-  const stepOptions = useMemo(() => {
-    const currentFlow = FlowOptions[state.flow];
-    return Object.values(currentFlow.steps).map(step => ({
-      label: step,
-      value: step,
-    }));
-  }, [state.flow]);
-
-  const apply = () => {
-    if (state.flow && state.step) {
-      dispatch(setFlow({ flow: state.flow, step: state.step }));
-      dispatch(setFaked(true));
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
 
-      dispatch(setQrCodePinCode("392"));
-      dispatch(setQrCodeUrl("url"));
+  const items = useMemo(() => getItems(t), [t]);
 
-      if (state.instances.length > 0)
-        state.instances.forEach(instance => dispatch(addInstance(instance)));
-
-      history.push("/settings");
-      setTimeout(() => {
-        const aboutPageNode = document.getElementById("setting-walletSync");
-        aboutPageNode?.scrollIntoView({ behavior: "smooth" });
-      }, 0);
-    }
-  };
-
-  const generateInstances = () => {
-    if (state.instances.length > 0) {
-      setState({ ...state, instances: [] });
-      return;
-    }
-    const instances = Array.from(
-      { length: Math.floor(Math.random() * 5) },
-      (_, index) =>
-        ({
-          id: String(index),
-          name: index % 2 === 0 ? `Iphone ${index + 1}` : "macOS",
-          permissions: index % 2 === 0 ? 1 : 2,
-        }) as TrustchainMember,
-    );
-
-    setState({ ...state, instances });
-  };
+  const activeItem = useMemo(() => items[activeTabIndex], [activeTabIndex, items]);
 
   return (
     <Modal
@@ -96,92 +40,32 @@ const WalletSyncDebugger = () => {
         <ModalBody
           onClose={onClose}
           onBack={undefined}
-          title={<Trans i18nKey="settings.experimental.features.testWalletSync.title" />}
+          title={<Trans i18nKey="settings.developer.debugWalletSync.title" />}
           noScroll
           render={() => (
-            <ScrollArea>
-              <Flex flexDirection="column" justifyContent="center" rowGap={"24px"}>
-                <Flex justifyContent="space-between" alignItems="center">
-                  <Text>{t("settings.experimental.features.testWalletSync.modal.flow")}</Text>
-
-                  <Select
-                    minWidth={275}
-                    isSearchable={false}
-                    onChange={option => {
-                      if (option) {
-                        setState({ ...state, flow: option.value as Flow, step: null });
-                      }
-                    }}
-                    value={{ label: String(state.flow), value: String(state.flow) }}
-                    options={flowsOptions}
-                  />
+            <>
+              <TabBar
+                onIndexChange={setActiveTabIndex}
+                defaultIndex={activeTabIndex}
+                index={activeTabIndex}
+                tabs={items.map(i => t(i.label))}
+                ids={items.map(i => `simplehash-${i.key}`)}
+                separator
+                withId
+                fullWidth
+                fontSize={14}
+                height={15}
+              />
+              <ScrollArea>
+                <Flex minHeight={550} flex={1} mt={3} flexDirection="column">
+                  {activeItem.value}
                 </Flex>
-
-                <Flex justifyContent="space-between" alignItems="center">
-                  <Text>{t("settings.experimental.features.testWalletSync.modal.step")}</Text>
-                  <Select
-                    minWidth={275}
-                    isSearchable={false}
-                    onChange={option => {
-                      if (option) {
-                        setState({ ...state, step: option.value as Step });
-                      }
-                    }}
-                    value={{ label: String(state.step), value: String(state.step) }}
-                    options={stepOptions}
-                  />
-                </Flex>
-
-                <Flex justifyContent="space-between" alignItems="center">
-                  <Text>{t("settings.experimental.features.testWalletSync.modal.instance")}</Text>
-                  <Switch isChecked={state.instances.length > 0} onChange={generateInstances} />
-                </Flex>
-
-                <StingifyComponent
-                  flexDirection="column"
-                  backgroundColor={colors.opacityDefault.c05}
-                  p={3}
-                  borderRadius={8}
-                >
-                  {Object.entries(state).map(([key, value]) => (
-                    <Text fontSize={11} key={key}>
-                      <pre>
-                        {`"${key}"`} : {JSON.stringify(value, null, 2)}
-                      </pre>
-                    </Text>
-                  ))}
-                </StingifyComponent>
-
-                <ButtonV3
-                  variant="main"
-                  onClick={() => {
-                    apply();
-                    onClose();
-                  }}
-                  disabled={!state.step}
-                >
-                  {t("settings.experimental.features.testWalletSync.modal.cta")}
-                </ButtonV3>
-              </Flex>
-            </ScrollArea>
+              </ScrollArea>
+            </>
           )}
         />
       )}
     />
   );
 };
 export default WalletSyncDebugger;
-
-const StingifyComponent = styled(Flex)`
-  max-height: 300px;
-  overflow-y: auto;
-
-  ::-webkit-scrollbar-thumb {
-    background-color: ${p => p.theme.colors.opacityDefault.c20};
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: ${p => p.theme.colors.opacityDefault.c10};
-    border-radius: 8px;
-  }
-`;

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

@@ -14,11 +14,11 @@ const SimpleHashTools = () => {
   );
   return (
     <SettingsSectionRow
-      title={t("settings.experimental.features.testSimpleHash.title")}
-      desc={t("settings.experimental.features.testSimpleHash.description")}
+      title={t("settings.developer.debugSimpleHash.testSimpleHash.title")}
+      desc={t("settings.developer.debugSimpleHash.testSimpleHash.description")}
     >
       <Button onClick={onOpenModal} primary>
-        {t("settings.experimental.features.testSimpleHash.cta")}
+        {t("settings.developer.debugSimpleHash.testSimpleHash.cta")}
       </Button>
     </SettingsSectionRow>
   );