feat: refacto / fix conflicts / update banner

Author: dilaouid

apps/ledger-live-desktop/src/mvvm/features/Send/components/SendFlowLayout.tsx

@@ -38,7 +38,7 @@ export function SendFlowLayout({ stepRegistry, isOpen, onClose }: SendFlowLayout
 
   return (
     <Dialog height={dialogHeight} open={isOpen} onOpenChange={handleDialogOpenChange}>
-      <DialogContent>
+      <DialogContent className="text-base">
         {shouldShowStatusGradient && (
           <div
             className={cn("pointer-events-none absolute inset-x-0 top-0 h-full", {
@@ -48,7 +48,7 @@ export function SendFlowLayout({ stepRegistry, isOpen, onClose }: SendFlowLayout
           />
         )}
         <SendHeader />
-        <DialogBody className="-mb-24 gap-32 px-24 py-16 text-base [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <DialogBody className="-mb-24 gap-32 px-24 py-16">
           {StepComponent && (
             <div key={currentStep} className="animate-fade-in">
               <StepComponent />

apps/ledger-live-desktop/src/mvvm/features/Send/components/SendHeader.tsx

@@ -6,6 +6,7 @@ import { AddressInput, DialogHeader } from "@ledgerhq/lumen-ui-react";
 import type { AccountLike } from "@ledgerhq/types-live";
 import { formatCurrencyUnit } from "@ledgerhq/live-common/currencies/index";
 import { getAccountCurrency } from "@ledgerhq/live-common/account/index";
+import { sendFeatures } from "@ledgerhq/live-common/bridge/descriptor";
 import { useCalculate } from "@ledgerhq/live-countervalues-react";
 import { useMaybeAccountUnit } from "~/renderer/hooks/useAccountUnit";
 import { counterValueCurrencySelector, localeSelector } from "~/renderer/reducers/settings";
@@ -14,6 +15,10 @@ import {
   useSendFlowData,
   useSendFlowActions,
 } from "../context/SendFlowContext";
+import { useRecipientMemo } from "../screens/Recipient/hooks/useRecipientMemo";
+import { MemoTypeSelect } from "../screens/Recipient/components/Memo/MemoTypeSelect";
+import { MemoValueInput } from "../screens/Recipient/components/Memo/MemoValueInput";
+import { SkipMemoSection } from "../screens/Recipient/components/Memo/SkipMemoSection";
 
 function useAvailableBalance(account?: AccountLike | null) {
   const locale = useSelector(localeSelector);
@@ -57,7 +62,7 @@ function useAvailableBalance(account?: AccountLike | null) {
 export function SendHeader() {
   const { navigation, currentStepConfig } = useSendFlowNavigation();
   const { state, uiConfig, recipientSearch } = useSendFlowData();
-  const { close } = useSendFlowActions();
+  const { close, transaction } = useSendFlowActions();
   const { t } = useTranslation();
 
   const currencyName = state.account.currency?.ticker ?? "";
@@ -79,9 +84,41 @@ export function SendHeader() {
     showTitle && availableText ? t("newSendFlow.available", { amount: availableText }) : "";
 
   const showRecipientInput = currentStepConfig?.addressInput ?? false;
+  const showMemoControls = Boolean(
+    showRecipientInput && uiConfig.hasMemo && recipientSearch.value.length > 0,
+  );
+
+  const currencyId = state.account.currency?.id;
+  const memoDefaultOption = useMemo(() => {
+    return state.account.currency
+      ? sendFeatures.getMemoDefaultOption(state.account.currency)
+      : undefined;
+  }, [state.account.currency]);
+
+  const memoTypeOptions = uiConfig.memoOptions ?? [];
+  const memoType = uiConfig.memoType;
+  const memoMaxLength = uiConfig.memoMaxLength;
+
+  const memoViewModel = useRecipientMemo({
+    hasMemo: uiConfig.hasMemo,
+    memoDefaultOption,
+    memoType,
+    memoTypeOptions,
+    onMemoChange: memo => {
+      transaction.setRecipient({ memo });
+    },
+    onMemoSkip: () => {
+      navigation.goToNextStep();
+    },
+    resetKey: `${state.account.account?.id ?? ""}|${currencyId ?? ""}|${
+      recipientSearch.value.length === 0 ? "empty" : "filled"
+    }`,
+  });
+
+  const transactionErrorName = state.transaction.status?.errors?.transaction?.name;
 
   return (
-    <div className="-mb-12 flex flex-col">
+    <div className="flex flex-col">
       <DialogHeader
         appearance="compact"
         title={title}
@@ -90,17 +127,54 @@ export function SendHeader() {
         onClose={close}
       />
       {showRecipientInput ? (
-        <AddressInput
-          className="mb-24 px-24"
-          value={recipientSearch.value}
-          onChange={e => recipientSearch.setValue(e.target.value)}
-          onClear={recipientSearch.clear}
-          placeholder={
-            uiConfig.recipientSupportsDomain
-              ? t("newSendFlow.placeholder")
-              : t("newSendFlow.placeholderNoENS")
-          }
-        />
+        <>
+          <AddressInput
+            className="mb-12 px-24"
+            value={recipientSearch.value}
+            onChange={e => recipientSearch.setValue(e.target.value)}
+            onClear={recipientSearch.clear}
+            placeholder={
+              uiConfig.recipientSupportsDomain
+                ? t("newSendFlow.placeholder")
+                : t("newSendFlow.placeholderNoENS")
+            }
+          />
+
+          {showMemoControls && currencyId ? (
+            <div className="mb-24 px-24">
+              <div className="flex flex-col gap-12">
+                {memoViewModel.hasMemoTypeOptions ? (
+                  <MemoTypeSelect
+                    currencyId={currencyId}
+                    options={memoTypeOptions}
+                    value={memoViewModel.memo.type}
+                    onChange={memoViewModel.onMemoTypeChange}
+                  />
+                ) : null}
+
+                {memoViewModel.showMemoValueInput ? (
+                  <MemoValueInput
+                    currencyId={currencyId}
+                    value={memoViewModel.memo.value}
+                    maxLength={memoMaxLength}
+                    transactionErrorName={transactionErrorName}
+                    onChange={memoViewModel.onMemoValueChange}
+                  />
+                ) : null}
+              </div>
+
+              {memoViewModel.showSkipMemo ? (
+                <SkipMemoSection
+                  currencyId={currencyId}
+                  state={memoViewModel.skipMemoState}
+                  onRequestConfirm={memoViewModel.onSkipMemoRequestConfirm}
+                  onCancelConfirm={memoViewModel.onSkipMemoCancelConfirm}
+                  onConfirm={memoViewModel.onSkipMemoConfirm}
+                />
+              ) : null}
+            </div>
+          ) : null}
+        </>
       ) : null}
     </div>
   );

apps/ledger-live-desktop/src/mvvm/features/Send/hooks/__tests__/useSendFlowTransaction.test.ts

@@ -76,7 +76,7 @@ describe("useSendFlowTransaction", () => {
       act(() => {
         result.current.actions.setRecipient({
           address: "cosmos1abc123",
-          memo: "test memo",
+          memo: { value: "test memo" },
         });
       });
 
@@ -117,7 +117,7 @@ describe("useSendFlowTransaction", () => {
       act(() => {
         result.current.actions.setRecipient({
           address: "solana-address",
-          memo: "solana memo",
+          memo: { value: "solana memo" },
         });
       });
 
@@ -199,7 +199,7 @@ describe("useSendFlowTransaction", () => {
       act(() => {
         result.current.actions.setRecipient({
           address: "casper-address",
-          memo: "transfer-id-123",
+          memo: { value: "transfer-id-123" },
         });
       });
 
@@ -236,7 +236,7 @@ describe("useSendFlowTransaction", () => {
       act(() => {
         result.current.actions.setRecipient({
           address: "xrp-address",
-          memo: "test",
+          memo: { value: "test" },
           destinationTag: "67890",
         });
       });

apps/ledger-live-desktop/src/mvvm/features/Send/hooks/useSendFlowState.ts

@@ -25,6 +25,7 @@ export function useSendFlowBusinessLogic({
 }: UseSendFlowBusinessLogicParams): SendFlowBusinessContext {
   const [flowStatus, setFlowStatus] = useState(FLOW_STATUS.IDLE);
   const [recipientSearchValue, setRecipientSearchValue] = useState("");
+  const [recipient, setRecipient] = useState<RecipientData | null>(null);
 
   const accountHook = useSendFlowAccount({
     initialAccount: initParams?.account,
@@ -57,6 +58,7 @@ export function useSendFlowBusinessLogic({
   const handleRecipientSet = useCallback(
     (recipient: RecipientData) => {
       transactionHook.actions.setRecipient(recipient);
+      setRecipient(prev => ({ ...(prev ?? {}), ...recipient }));
     },
     [transactionHook.actions],
   );
@@ -74,12 +76,12 @@ export function useSendFlowBusinessLogic({
     () => ({
       account: accountHook.state,
       transaction: transactionHook.state,
-      recipient: null,
+      recipient,
       operation: operationHook.state,
       isLoading: transactionHook.state.bridgePending,
       flowStatus,
     }),
-    [accountHook.state, transactionHook.state, operationHook.state, flowStatus],
+    [accountHook.state, transactionHook.state, recipient, operationHook.state, flowStatus],
   );
 
   const statusActions = useMemo(

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

@@ -43,33 +43,61 @@ export function useSendFlowTransaction({
     [bridgeUpdateTransaction],
   );
 
-  const setRecipient = useCallback(
-    (recipient: RecipientData) => {
-      if (!account || !transaction) return;
+  const buildRecipientUpdates = useCallback(
+    (currentTransaction: Transaction, recipient: RecipientData): Partial<Transaction> => {
+      const updates: Partial<Transaction> = {};
 
-      const bridge = getAccountBridge(account, parentAccount);
-      const updates: Partial<Transaction> = { recipient: recipient.address };
+      if (recipient.address !== undefined) {
+        updates.recipient = recipient.address;
+      }
 
       if (recipient.memo !== undefined) {
         Object.assign(
           updates,
-          applyMemoToTransaction(transaction.family, recipient.memo, transaction),
+          applyMemoToTransaction(
+            currentTransaction.family,
+            recipient.memo.value,
+            recipient.memo.type,
+            currentTransaction,
+          ),
         );
       }
 
       if (recipient.destinationTag !== undefined) {
-        const parsedTag = Number(recipient.destinationTag.trim());
-        if (Number.isFinite(parsedTag)) {
-          Object.assign(
-            updates,
-            applyMemoToTransaction(transaction.family, parsedTag, transaction),
-          );
+        const trimmed = recipient.destinationTag.trim();
+        if (trimmed.length > 0) {
+          const parsedTag = Number(trimmed);
+          if (Number.isFinite(parsedTag)) {
+            Object.assign(
+              updates,
+              applyMemoToTransaction(
+                currentTransaction.family,
+                parsedTag,
+                undefined,
+                currentTransaction,
+              ),
+            );
+          }
         }
       }
 
-      bridgeSetTransaction(bridge.updateTransaction(transaction, updates));
+      return updates;
+    },
+    [],
+  );
+
+  const setRecipient = useCallback(
+    (recipient: RecipientData) => {
+      if (!account || !transaction) return;
+
+      const bridge = getAccountBridge(account, parentAccount);
+      const updates = buildRecipientUpdates(transaction, recipient);
+
+      if (Object.keys(updates).length > 0) {
+        bridgeSetTransaction(bridge.updateTransaction(transaction, updates));
+      }
     },
-    [account, parentAccount, transaction, bridgeSetTransaction],
+    [account, parentAccount, transaction, bridgeSetTransaction, buildRecipientUpdates],
   );
 
   const setAccountForTransaction = useCallback(

apps/ledger-live-desktop/src/mvvm/features/Send/screens/Recipient/RecipientScreen.tsx

@@ -1,15 +1,15 @@
 import React, { useCallback, useMemo } from "react";
 import { getAccountCurrency } from "@ledgerhq/live-common/account/index";
 import type { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
+import { RecipientAddressModal } from "./components/RecipientAddressModal";
 import {
-  useSendFlowData,
   useSendFlowActions,
+  useSendFlowData,
   useSendFlowNavigation,
 } from "../../context/SendFlowContext";
-import { RecipientAddressModal } from "./components/RecipientAddressModal";
 
 export function RecipientScreen() {
-  const { state, uiConfig, recipientSearch } = useSendFlowData();
+  const { state, uiConfig } = useSendFlowData();
   const { transaction, close } = useSendFlowActions();
   const { navigation } = useSendFlowNavigation();
 
@@ -22,16 +22,17 @@ export function RecipientScreen() {
   }, [state.account.currency, account]);
 
   const handleAddressSelected = useCallback(
-    (address: string, ensName?: string) => {
+    (address: string, ensName?: string, goToNextStep?: boolean) => {
       transaction.setRecipient({
         address,
         ensName,
       });
 
-      recipientSearch.clear();
-      navigation.goToNextStep();
+      if (goToNextStep) {
+        navigation.goToNextStep();
+      }
     },
-    [transaction, navigation, recipientSearch],
+    [transaction, navigation],
   );
 
   if (!account || !currency) {

apps/ledger-live-desktop/src/mvvm/features/Send/screens/Recipient/components/Memo/MemoTypeSelect.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectTrigger,
+} from "@ledgerhq/lumen-ui-react";
+import { useTranslation } from "react-i18next";
+
+type MemoTypeSelectProps = Readonly<{
+  currencyId: string;
+  options: readonly string[];
+  value?: string;
+  onChange: (value: string) => void;
+}>;
+
+function MemoTypeSelectComponent({ currencyId, options, value, onChange }: MemoTypeSelectProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Select onValueChange={onChange} value={value}>
+      <SelectTrigger />
+      <SelectContent>
+        {options.map(optionValue => (
+          <SelectItem key={optionValue} value={optionValue}>
+            <SelectItemText>{t(`families.${currencyId}.memoType.${optionValue}`)}</SelectItemText>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export const MemoTypeSelect = React.memo(MemoTypeSelectComponent);