feature/LIVE-20724 [LLD][UI] Memo screen

wip

Fix width on the

wip

wip

Author: Moustafa-Koterba

apps/ledger-live-desktop/src/newArch/features/FlowWizard/FlowWizardOrchestrator.tsx

@@ -0,0 +1,111 @@
+import React, { useMemo, type ComponentType, type ReactNode, type CSSProperties } from "react";
+import { useFlowWizardNavigation } from "./hooks/useFlowWizardNavigation";
+import type {
+  FlowStep,
+  FlowConfig,
+  StepRegistry,
+  StepRenderer,
+  FlowNavigationDirection,
+  AnimationConfig,
+  FlowWizardContextValue,
+  FlowStepConfig,
+} from "./types";
+
+const DEFAULT_ANIMATION_CONFIG: AnimationConfig = {
+  forward: "animate-fade-in",
+  backward: "animate-fade-out",
+};
+
+type FlowWizardOrchestratorProps<
+  TStep extends FlowStep,
+  TContextValue,
+  TStepConfig extends FlowStepConfig<TStep> = FlowStepConfig<TStep>,
+> = Readonly<{
+  flowConfig: FlowConfig<TStep, TStepConfig>;
+  stepRegistry: StepRegistry<TStep>;
+  contextValue: TContextValue;
+  ContextProvider: ComponentType<{
+    value: FlowWizardContextValue<TStep, TContextValue, TStepConfig>;
+    children: ReactNode;
+  }>;
+  animationConfig?: AnimationConfig;
+  getContainerStyle?: (stepConfig: TStepConfig) => CSSProperties | undefined;
+  children?: ReactNode;
+}>;
+
+// Returns the transition class for the current direction; keeps UI concerns isolated here.
+function getAnimationClass(
+  direction: FlowNavigationDirection,
+  config: AnimationConfig,
+): string | undefined {
+  return direction === "FORWARD" ? config.forward : config.backward;
+}
+
+/**
+ * FlowWizardOrchestrator
+ *
+ * Generic runner for multi-step flows:
+ * - drives navigation (forward/back/jump) via useFlowWizardNavigation
+ * - injects navigation & step metadata into the provided ContextProvider
+ * - renders the current step with optional enter animations
+ * - remains UI-agnostic: only needs a step registry and a flow config
+ */
+export function FlowWizardOrchestrator<
+  TStep extends FlowStep,
+  TContextValue,
+  TStepConfig extends FlowStepConfig<TStep> = FlowStepConfig<TStep>,
+>({
+  flowConfig,
+  stepRegistry,
+  contextValue,
+  ContextProvider,
+  animationConfig = DEFAULT_ANIMATION_CONFIG,
+  getContainerStyle,
+  children,
+}: FlowWizardOrchestratorProps<TStep, TContextValue, TStepConfig>) {
+  const { state, actions, currentStepConfig } = useFlowWizardNavigation<TStep, TStepConfig>({
+    flowConfig,
+  });
+
+  const enhancedContextValue = useMemo<FlowWizardContextValue<TStep, TContextValue, TStepConfig>>(
+    () => ({
+      ...contextValue,
+      navigation: actions,
+      currentStep: state.currentStep,
+      direction: state.direction,
+      currentStepConfig,
+    }),
+    [contextValue, actions, state.currentStep, state.direction, currentStepConfig],
+  );
+
+  const StepComponent = useMemo<StepRenderer | null>(() => {
+    const renderer = stepRegistry[state.currentStep];
+    return renderer ?? null;
+  }, [state.currentStep, stepRegistry]);
+
+  const hasNavigated = state.stepHistory.length > 0 || state.direction === "BACKWARD";
+  const animationClass = hasNavigated
+    ? getAnimationClass(state.direction, animationConfig)
+    : undefined;
+
+  const containerStyle = getContainerStyle ? getContainerStyle(currentStepConfig) : undefined;
+  return (
+    <ContextProvider value={enhancedContextValue}>
+      <div className="flex flex-col" style={containerStyle}>
+        {children}
+        {StepComponent && (
+          <div key={state.currentStep} className={`min-h-0 flex-1 ${animationClass ?? ""}`}>
+            <StepComponent />
+          </div>
+        )}
+      </div>
+    </ContextProvider>
+  );
+}
+
+// Need to use it to create the step registry typesafe
+export function createStepRegistry<TStep extends FlowStep>(
+  registry: StepRegistry<TStep>,
+): StepRegistry<TStep> {
+  return registry;
+}

apps/ledger-live-desktop/src/newArch/features/Send/SendFlowOrchestrator.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo, type ReactNode } from "react";
+import { FlowWizardOrchestrator } from "../FlowWizard/FlowWizardOrchestrator";
+import type { StepRegistry, AnimationConfig, FlowWizardContextValue } from "../FlowWizard/types";
+import { SendFlowProvider } from "./context/SendFlowContext";
+import { useSendFlowBusinessLogic } from "./hooks/useSendFlowState";
+import { SEND_FLOW_CONFIG } from "./constants";
+import { SEND_FLOW_STEP } from "./types";
+import type {
+  SendFlowStep,
+  SendFlowInitParams,
+  SendFlowBusinessContext,
+  SendStepConfig,
+} from "./types";
+
+type SendFlowStepRegistry = StepRegistry<SendFlowStep>;
+type SendFlowWizardContext = FlowWizardContextValue<
+  SendFlowStep,
+  SendFlowBusinessContext,
+  SendStepConfig
+>;
+
+type SendFlowOrchestratorProps = Readonly<{
+  initParams?: SendFlowInitParams;
+  onClose: () => void;
+  stepRegistry: SendFlowStepRegistry;
+  animationConfig?: AnimationConfig;
+  children?: ReactNode;
+}>;
+
+type SendFlowProviderWrapperProps = Readonly<{
+  value: SendFlowWizardContext;
+  children: ReactNode;
+}>;
+
+// Adapter that injects the Send context into the generic FlowWizard orchestrator
+function SendFlowProviderWrapper({ value, children }: SendFlowProviderWrapperProps) {
+  return <SendFlowProvider value={value}>{children}</SendFlowProvider>;
+}
+
+export function SendFlowOrchestrator({
+  initParams,
+  onClose,
+  stepRegistry,
+  animationConfig,
+  children,
+}: SendFlowOrchestratorProps) {
+  const skipAccountSelection = Boolean(initParams?.account) || Boolean(initParams?.fromMAD);
+  const businessContext = useSendFlowBusinessLogic({ initParams, onClose });
+  const flowConfig = useMemo(
+    () => ({
+      ...SEND_FLOW_CONFIG,
+      initialStep: skipAccountSelection
+        ? SEND_FLOW_STEP.RECIPIENT
+        : SEND_FLOW_STEP.ACCOUNT_SELECTION,
+    }),
+    [skipAccountSelection],
+  );
+
+  // Bridge the generic wizard runner with Send-specific business state and config
+  return (
+    <FlowWizardOrchestrator<SendFlowStep, SendFlowBusinessContext, SendStepConfig>
+      flowConfig={flowConfig}
+      stepRegistry={stepRegistry}
+      contextValue={businessContext}
+      ContextProvider={SendFlowProviderWrapper}
+      animationConfig={animationConfig}
+      getContainerStyle={stepConfig =>
+        stepConfig.sizeDialog ? { height: `${stepConfig.sizeDialog}px` } : { height: "612px" }
+      }
+    >
+      {children}
+    </FlowWizardOrchestrator>
+  );
+}

apps/ledger-live-desktop/src/newArch/features/Send/SendFlowRoot.tsx

@@ -0,0 +1,72 @@
+import React, { useCallback } from "react";
+import { createPortal } from "react-dom";
+import { Dialog, DialogContent, DialogBody } from "@ledgerhq/lumen-ui-react";
+import { DomainServiceProvider } from "@ledgerhq/domain-service/hooks/index";
+import { useDispatch, useSelector } from "react-redux";
+import { SendWorkflow } from ".";
+import { closeSendFlowDialog, sendFlowStateSelector } from "~/renderer/reducers/sendFlow";
+import { setMemoTagInfoBoxDisplay } from "~/renderer/actions/UI";
+import Snow, { isSnowTime } from "~/renderer/extra/Snow";
+
+export function SendFlowRoot() {
+  const dispatch = useDispatch();
+  const { isOpen, data } = useSelector(sendFlowStateSelector);
+
+  const handleClose = useCallback(() => {
+    dispatch(
+      setMemoTagInfoBoxDisplay({
+        isMemoTagBoxVisible: false,
+        forceAutoFocusOnMemoField: false,
+      }),
+    );
+    data?.onClose?.();
+    dispatch(closeSendFlowDialog());
+  }, [data, dispatch]);
+
+  const handleDialogOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        handleClose();
+      }
+    },
+    [handleClose],
+  );
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {isSnowTime() && isOpen
+        ? createPortal(
+            <div
+              style={{
+                position: "fixed",
+                top: 0,
+                left: 0,
+                width: "100vw",
+                height: "100vh",
+                pointerEvents: "none",
+                zIndex: 99,
+                overflow: "hidden",
+              }}
+            >
+              <Snow numFlakes={30} />
+            </div>,
+            document.body,
+          )
+        : null}
+      <Dialog open={isOpen} onOpenChange={handleDialogOpenChange}>
+        <DialogContent>
+          <DialogBody
+            className="shrink-0 px-0 text-base"
+            style={{ scrollbarWidth: "none" as const }}
+          >
+            <DomainServiceProvider>
+              <SendWorkflow onClose={handleClose} params={data?.params} />
+            </DomainServiceProvider>
+          </DialogBody>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

apps/ledger-live-desktop/src/newArch/features/Send/hooks/useSendFlowTransaction.ts

@@ -0,0 +1,114 @@
+import { useCallback, useMemo } from "react";
+import useBridgeTransaction from "@ledgerhq/live-common/bridge/useBridgeTransaction";
+import { getAccountBridge } from "@ledgerhq/live-common/bridge/index";
+import { applyMemoToTransaction } from "@ledgerhq/live-common/bridge/descriptor";
+import type { Account, AccountLike } from "@ledgerhq/types-live";
+import type { Transaction } from "@ledgerhq/live-common/generated/types";
+import type { SendFlowTransactionState, SendFlowTransactionActions, RecipientData } from "../types";
+
+type UseSendFlowTransactionParams = Readonly<{
+  account: AccountLike | null;
+  parentAccount: Account | null;
+}>;
+
+type UseSendFlowTransactionResult = Readonly<{
+  state: SendFlowTransactionState;
+  actions: SendFlowTransactionActions;
+}>;
+
+export function useSendFlowTransaction({
+  account,
+  parentAccount,
+}: UseSendFlowTransactionParams): UseSendFlowTransactionResult {
+  const {
+    transaction,
+    setTransaction: bridgeSetTransaction,
+    updateTransaction: bridgeUpdateTransaction,
+    status,
+    bridgeError,
+    bridgePending,
+    setAccount,
+  } = useBridgeTransaction(() => {
+    if (!account) return {};
+    return { account, parentAccount: parentAccount ?? undefined };
+  });
+
+  const setTransaction = useCallback(
+    (tx: Transaction) => bridgeSetTransaction(tx),
+    [bridgeSetTransaction],
+  );
+
+  const updateTransaction = useCallback(
+    (updater: (tx: Transaction) => Transaction) => bridgeUpdateTransaction(updater),
+    [bridgeUpdateTransaction],
+  );
+
+  const setRecipient = useCallback(
+    (recipient: RecipientData) => {
+      if (!account || !transaction) return;
+
+      const bridge = getAccountBridge(account, parentAccount);
+      const updates: Partial<Transaction> = {};
+
+      if (recipient !== undefined) {
+        Object.assign(updates, { recipient: recipient.address });
+      }
+
+      if (recipient.memo !== undefined) {
+        Object.assign(
+          updates,
+          applyMemoToTransaction(
+            transaction.family,
+            recipient.memo.value,
+            recipient.memo.type,
+            transaction,
+          ),
+        );
+      }
+
+      if (recipient.destinationTag !== undefined) {
+        const parsedTag = Number(recipient.destinationTag.trim());
+        if (Number.isFinite(parsedTag)) {
+          Object.assign(
+            updates,
+            applyMemoToTransaction(transaction.family, parsedTag, undefined, transaction),
+          );
+        }
+      }
+
+      if (Object.keys(updates).length > 0) {
+        bridgeSetTransaction(bridge.updateTransaction(transaction, updates));
+      }
+    },
+    [account, parentAccount, transaction, bridgeSetTransaction],
+  );
+
+  const setAccountForTransaction = useCallback(
+    (newAccount: AccountLike, newParentAccount?: Account | null) => {
+      setAccount(newAccount, newParentAccount ?? undefined);
+    },
+    [setAccount],
+  );
+
+  const state: SendFlowTransactionState = useMemo(
+    () => ({
+      transaction: transaction ?? null,
+      status,
+      bridgeError: bridgeError ?? null,
+      bridgePending,
+    }),
+    [transaction, status, bridgeError, bridgePending],
+  );
+
+  const actions: SendFlowTransactionActions = useMemo(
+    () => ({
+      setTransaction,
+      updateTransaction,
+      setRecipient,
+      setAccount: setAccountForTransaction,
+    }),
+    [setTransaction, updateTransaction, setRecipient, setAccountForTransaction],
+  );
+
+  return { state, actions };
+}