feat(desktop): add send max descriptor

Author: Moustafa-Koterba

apps/ledger-live-desktop/src/mvvm/features/Send/screens/Amount/AmountScreen.tsx

@@ -1,52 +1,26 @@
-import React, { useCallback } from "react";
-import { useNavigate } from "react-router";
-import { useSendFlowActions, useSendFlowData } from "../../context/SendFlowContext";
-import { getMainAccount } from "@ledgerhq/coin-framework/account/helpers";
+import React from "react";
 import { AmountScreenInner } from "./components/AmountScreenInner";
-import { useFlowWizard } from "LLD/features/FlowWizard/FlowWizardContext";
+import { useAmountScreen } from "./hooks/useAmountScreen";
 
 export function AmountScreen() {
-  const { state, uiConfig } = useSendFlowData();
-  const { transaction: transactionActions, close } = useSendFlowActions();
-  const { navigation } = useFlowWizard();
-  const navigate = useNavigate();
+  const viewModel = useAmountScreen();
 
-  const { account, parentAccount } = state.account;
-  const { bridgePending, bridgeError, status, transaction } = state.transaction;
-
-  const handleGetFunds = useCallback(() => {
-    if (!account) return;
-    const mainAccount = getMainAccount(account, parentAccount ?? undefined);
-    const currencyId = "currency" in mainAccount ? mainAccount.currency.id : undefined;
-
-    // Navigate to exchange (Buy) page with preselected currency (same behavior as Buy button)
-    navigate("/exchange", {
-      state: {
-        currency: currencyId,
-        account: mainAccount.id,
-        mode: "buy",
-      },
-    });
-    // Close the send flow dialog
-    close();
-  }, [account, close, navigate, parentAccount]);
-
-  if (!account || !transaction || !status) {
+  if (!viewModel.ready) {
     return null;
   }
 
   return (
     <AmountScreenInner
-      account={account}
-      parentAccount={parentAccount}
-      transaction={transaction}
-      status={status}
-      bridgePending={bridgePending}
-      bridgeError={bridgeError}
-      uiConfig={uiConfig}
-      transactionActions={transactionActions}
-      onReview={() => navigation.goToNextStep()}
-      onGetFunds={handleGetFunds}
+      account={viewModel.account}
+      parentAccount={viewModel.parentAccount}
+      transaction={viewModel.transaction}
+      status={viewModel.status}
+      bridgePending={viewModel.bridgePending}
+      bridgeError={viewModel.bridgeError}
+      uiConfig={viewModel.uiConfig}
+      transactionActions={viewModel.transactionActions}
+      onReview={viewModel.onReview}
+      onGetFunds={viewModel.onGetFunds}
     />
   );
 }

apps/ledger-live-desktop/src/mvvm/features/Send/screens/Amount/components/AmountMessageText.tsx

@@ -1,24 +1,24 @@
 import React from "react";
+import { cva } from "class-variance-authority";
 import { cn } from "LLD/utils/cn";
 import type { AmountScreenMessage } from "../types";
 
+const messageStyles = cva("text-center body-2", {
+  variants: {
+    type: {
+      error: "text-error",
+      warning: "text-warning",
+      info: "text-base",
+    },
+  },
+});
+
 type AmountMessageTextProps = Readonly<{
   message: AmountScreenMessage | null | undefined;
 }>;
 
 export function AmountMessageText({ message }: AmountMessageTextProps) {
   if (!message) return null;
 
-  return (
-    <p
-      className={cn(
-        "text-center body-2",
-        message.type === "error" && "text-error",
-        message.type === "warning" && "text-warning",
-        message.type === "info" && "text-base",
-      )}
-    >
-      {message.text}
-    </p>
-  );
+  return <p className={cn(messageStyles({ type: message.type }))}>{message.text}</p>;
 }

apps/ledger-live-desktop/src/mvvm/features/Send/screens/Amount/hooks/__tests__/useAmountScreenViewModel.test.ts

@@ -12,11 +12,6 @@ import type { Transaction, TransactionStatus } from "@ledgerhq/live-common/gener
 import { getCryptoCurrencyById } from "@ledgerhq/live-common/currencies/index";
 import { createMockAccount } from "../../../Recipient/__integrations__/__fixtures__/accounts";
 
-jest.mock("react-i18next", () => ({
-  ...jest.requireActual("react-i18next"),
-  useTranslation: () => ({ t: (key: string) => key }),
-}));
-
 jest.mock("@ledgerhq/live-common/bridge/impl");
 jest.mock("@ledgerhq/coin-framework/account/helpers");
 jest.mock("@ledgerhq/live-common/bridge/descriptor", () => ({

apps/ledger-live-desktop/src/mvvm/features/Send/screens/Amount/hooks/useAmountScreen.ts

@@ -0,0 +1,78 @@
+import { useCallback } from "react";
+import { useNavigate } from "react-router";
+import { useSendFlowActions, useSendFlowData } from "../../../context/SendFlowContext";
+import { getMainAccount } from "@ledgerhq/coin-framework/account/helpers";
+import { useFlowWizard } from "LLD/features/FlowWizard/FlowWizardContext";
+import type { Account, AccountLike } from "@ledgerhq/types-live";
+import type { Transaction, TransactionStatus } from "@ledgerhq/live-common/generated/types";
+import type {
+  SendFlowTransactionActions,
+  SendFlowUiConfig,
+} from "@ledgerhq/live-common/flows/send/types";
+
+type AmountScreenViewModelBase = Readonly<{
+  onReview: () => void;
+  onGetFunds: () => void;
+}>;
+
+export type AmountScreenViewModel =
+  | (AmountScreenViewModelBase & { ready: false })
+  | (AmountScreenViewModelBase &
+      Readonly<{
+        ready: true;
+        account: AccountLike;
+        parentAccount: Account | null;
+        transaction: Transaction;
+        status: TransactionStatus;
+        bridgePending: boolean;
+        bridgeError: Error | null;
+        uiConfig: SendFlowUiConfig;
+        transactionActions: SendFlowTransactionActions;
+      }>);
+
+export function useAmountScreen(): AmountScreenViewModel {
+  const { state, uiConfig } = useSendFlowData();
+  const { transaction: transactionActions, close } = useSendFlowActions();
+  const { navigation } = useFlowWizard();
+  const navigate = useNavigate();
+
+  const { account, parentAccount } = state.account;
+  const { bridgePending, bridgeError, status, transaction } = state.transaction;
+
+  const onGetFunds = useCallback(() => {
+    if (!account) return;
+    const mainAccount = getMainAccount(account, parentAccount ?? undefined);
+    const currencyId = "currency" in mainAccount ? mainAccount.currency.id : undefined;
+
+    navigate("/exchange", {
+      state: {
+        currency: currencyId,
+        account: mainAccount.id,
+        mode: "buy",
+      },
+    });
+    close();
+  }, [account, close, navigate, parentAccount]);
+
+  const onReview = useCallback(() => {
+    navigation.goToNextStep();
+  }, [navigation]);
+
+  if (!account || !transaction || !status || !uiConfig || !transactionActions) {
+    return { ready: false, onReview, onGetFunds };
+  }
+
+  return {
+    ready: true,
+    account,
+    parentAccount: parentAccount ?? null,
+    transaction,
+    status,
+    bridgePending: bridgePending ?? false,
+    bridgeError: bridgeError ?? null,
+    uiConfig,
+    transactionActions,
+    onReview,
+    onGetFunds,
+  };
+}

apps/ledger-live-desktop/src/mvvm/features/Send/screens/Amount/hooks/useFeePresetFiatValues.ts

@@ -9,6 +9,26 @@ import { formatCurrencyUnit } from "@ledgerhq/coin-framework/currencies/formatCu
 import type { Currency, Unit } from "@ledgerhq/types-cryptoassets";
 import { buildEstimationKey } from "../utils/feeEstimation";
 
+function getFeesStrategyForPreset(presetId: string): Transaction["feesStrategy"] | null {
+  if (presetId === "slow") return "slow";
+  if (presetId === "medium") return "medium";
+  if (presetId === "fast") return "fast";
+  if (presetId === "custom") return "custom";
+  return null;
+}
+
+function formatCountervalueAsFiat(
+  fiatUnit: Unit,
+  countervalue: BigNumber | null | undefined,
+): string | null {
+  return countervalue !== null && countervalue !== undefined
+    ? formatCurrencyUnit(fiatUnit, countervalue, {
+        showCode: true,
+        disableRounding: true,
+      })
+    : null;
+}
+
 export type FeeFiatMap = Readonly<Record<string, string | null>>;
 
 type Params = Readonly<{
@@ -39,13 +59,7 @@ async function estimateFiatValuesForPresets(params: {
   try {
     const entries = await Promise.all(
       params.presetIds.map(async presetId => {
-        const feesStrategy: Transaction["feesStrategy"] =
-          presetId === "slow" ||
-          presetId === "medium" ||
-          presetId === "fast" ||
-          presetId === "custom"
-            ? presetId
-            : null;
+        const feesStrategy = getFeesStrategyForPreset(presetId);
         const txWithStrategy = params.bridge.updateTransaction(params.transaction, {
           feesStrategy,
         });
@@ -57,13 +71,7 @@ async function estimateFiatValuesForPresets(params: {
         const estimatedFees = status.estimatedFees ?? new BigNumber(0);
 
         const countervalue = params.convertCountervalue(params.mainAccount.currency, estimatedFees);
-        const fiatValue =
-          countervalue !== null && countervalue !== undefined
-            ? formatCurrencyUnit(params.fiatUnit, countervalue, {
-                showCode: true,
-                disableRounding: true,
-              })
-            : null;
+        const fiatValue = formatCountervalueAsFiat(params.fiatUnit, countervalue);
 
         return [presetId, fiatValue] as const;
       }),
@@ -140,13 +148,7 @@ export function useFeePresetFiatValues({
     const next: Record<string, string | null> = {};
     for (const option of feePresetOptions) {
       const countervalue = convertCountervalue(mainAccount.currency, option.amount);
-      next[option.id] =
-        countervalue !== null && countervalue !== undefined
-          ? formatCurrencyUnit(fiatUnit, countervalue, {
-              showCode: true,
-              disableRounding: true,
-            })
-          : null;
+      next[option.id] = formatCountervalueAsFiat(fiatUnit, countervalue);
     }
     return next;
   }, [

apps/ledger-live-desktop/src/mvvm/features/Send/screens/Amount/hooks/useQuickActions.ts

@@ -7,6 +7,7 @@ import { useMaybeAccountUnit } from "~/renderer/hooks/useAccountUnit";
 import { areAmountsEqual } from "../utils/amount";
 import type { AmountScreenQuickAction } from "../types";
 import { getAccountCurrency, getMainAccount } from "@ledgerhq/coin-framework/account/helpers";
+import { sendFeatures } from "@ledgerhq/live-common/bridge/descriptor";
 
 type UseQuickActionsParams = Readonly<{
   account: AccountLike;
@@ -88,6 +89,7 @@ export function useQuickActions({
       };
     });
 
+    const canSendMax = sendFeatures.canSendMax(accountCurrency);
     const isMaxActive = transaction.useAllAmount ?? false;
     actions.push({
       id: "max",
@@ -98,7 +100,7 @@ export function useQuickActions({
         onSelectMax();
       },
       active: isMaxActive,
-      disabled,
+      disabled: disabled || !canSendMax,
     });
 
     return actions;
@@ -112,6 +114,7 @@ export function useQuickActions({
     transaction.amount,
     transaction.useAllAmount,
     tolerance,
+    accountCurrency,
   ]);
 
   return quickActions;

apps/ledger-live-desktop/src/mvvm/features/Send/screens/Amount/utils/amountInput.ts

@@ -9,28 +9,23 @@ export type FormattedAmount = Readonly<{
   value: BigNumber;
 }>;
 
-export function formatAmountForInput(unit: Unit, amount: BigNumber, locale: string): string {
-  if (amount.isZero()) return "";
-
-  return formatCurrencyUnit(unit, amount, {
+const formatUnitForInput = (unit: Unit, amount: BigNumber, locale: string): string =>
+  formatCurrencyUnit(unit, amount, {
     showCode: false,
     disableRounding: true,
     useGrouping: false,
     locale,
   });
+
+export function formatAmountForInput(unit: Unit, amount: BigNumber, locale: string): string {
+  if (amount.isZero()) return "";
+  return formatUnitForInput(unit, amount, locale);
 }
 
 export function formatFiatForInput(unit: Unit, amount: BigNumber, locale: string): string {
   if (amount.isZero()) return "";
-
-  const formatted = formatCurrencyUnit(unit, amount, {
-    showCode: false,
-    disableRounding: true,
-    useGrouping: false,
-    locale,
-  });
-  const clamped = clampDecimals(formatted);
-  return trimTrailingZeros(clamped);
+  const formatted = formatUnitForInput(unit, amount, locale);
+  return trimTrailingZeros(clampDecimals(formatted));
 }
 
 export function processRawInput(rawValue: string, unit: Unit, locale: string): FormattedAmount {