Merge pull request #14169 from LedgerHQ/feat/amount-screen-redesign

feat(lwd): amount screen new send flow

Author: dilaouid

.changeset/spicy-wasps-brush.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+feat(LWD): Amount screen of send flow revamp

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

@@ -10,11 +10,12 @@ import { SignatureScreen } from "./screens/Signature/SignatureScreen";
 import { ConfirmationScreen } from "./screens/Confirmation/ConfirmationScreen";
 import { SendFlowLayout } from "./components/SendFlowLayout";
 import { RecipientScreen } from "./screens/Recipient/RecipientScreen";
+import { AmountScreen } from "./screens/Amount/AmountScreen";
 import type { StepRegistry } from "@ledgerhq/live-common/flows/wizard/types";
 
 const stepRegistry: StepRegistry<SendFlowStep> = {
   [SEND_FLOW_STEP.RECIPIENT]: RecipientScreen,
-  [SEND_FLOW_STEP.AMOUNT]: () => <></>,
+  [SEND_FLOW_STEP.AMOUNT]: AmountScreen,
   [SEND_FLOW_STEP.SIGNATURE]: SignatureScreen,
   [SEND_FLOW_STEP.CONFIRMATION]: ConfirmationScreen,
 };

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { AmountScreenInner } from "./components/AmountScreenInner";
+import { useAmountScreen } from "./hooks/useAmountScreen";
+
+export function AmountScreen() {
+  const viewModel = useAmountScreen();
+
+  if (!viewModel.ready) {
+    return null;
+  }
+
+  return (
+    <AmountScreenInner
+      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/AmountFooter.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Button } from "@ledgerhq/lumen-ui-react";
+import { LedgerLogo } from "@ledgerhq/lumen-ui-react/symbols";
+import type { FeePresetOption } from "../hooks/useFeePresetOptions";
+import type { FeeFiatMap } from "../hooks/useFeePresetFiatValues";
+import type { FeePresetLegendMap } from "../hooks/useFeePresetLegends";
+import { useSendFlowData } from "../../../context/SendFlowContext";
+import { NetworkFeesMenu } from "./Fees/NetworkFeesMenu";
+
+type AmountFooterProps = Readonly<{
+  feesRowLabel: string;
+  feesRowValue: string;
+  feesRowStrategyLabel: string;
+  selectedFeeStrategy: string | null;
+  feePresetOptions: readonly FeePresetOption[];
+  fiatByPreset: FeeFiatMap;
+  legendByPreset: FeePresetLegendMap;
+  onSelectFeeStrategy: (strategy: string) => void;
+  reviewLabel: string;
+  reviewShowIcon: boolean;
+  reviewDisabled: boolean;
+  reviewLoading: boolean;
+  onReview: () => void;
+  onGetFunds?: () => void;
+}>;
+
+export function AmountFooter({
+  feesRowLabel,
+  feesRowValue,
+  feesRowStrategyLabel,
+  selectedFeeStrategy,
+  feePresetOptions,
+  fiatByPreset,
+  legendByPreset,
+  onSelectFeeStrategy,
+  reviewLabel,
+  reviewShowIcon,
+  reviewDisabled,
+  reviewLoading,
+  onReview,
+  onGetFunds,
+}: AmountFooterProps) {
+  const { state } = useSendFlowData();
+  const { account } = state.account;
+  const { transaction } = state.transaction;
+
+  if (!account || !transaction) {
+    return null;
+  }
+  return (
+    <div className="mt-56 pt-12">
+      <div className="border-t border-muted-subtle" />
+      <NetworkFeesMenu
+        display={{
+          label: feesRowLabel,
+          value: feesRowValue,
+          strategyLabel: feesRowStrategyLabel,
+        }}
+        selection={{
+          selectedStrategy: selectedFeeStrategy,
+          onSelectStrategy: onSelectFeeStrategy,
+        }}
+        presets={{
+          options: feePresetOptions,
+          fiatByPreset,
+          legendByPreset,
+        }}
+      />
+      <Button
+        appearance="base"
+        size="lg"
+        isFull
+        onClick={reviewShowIcon ? onReview : onGetFunds}
+        disabled={reviewDisabled}
+        loading={reviewLoading}
+        icon={reviewShowIcon ? LedgerLogo : undefined}
+        className="rounded-full"
+      >
+        {reviewLoading ? "" : reviewLabel}
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+import React from "react";
+import { AmountInput, IconButton } from "@ledgerhq/lumen-ui-react";
+import { TransferVertical } from "@ledgerhq/lumen-ui-react/symbols";
+import { cn } from "LLD/utils/cn";
+import type { AmountScreenMessage } from "../types";
+import { AmountMessageText } from "./AmountMessageText";
+
+type AmountInputSectionProps = Readonly<{
+  amountValue: string;
+  amountInputMaxDecimalLength: number;
+  currencyText: string;
+  currencyPosition: "left" | "right";
+  isInputDisabled: boolean;
+  onAmountChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onToggleInputMode: () => void;
+  toggleLabel: string;
+  secondaryValue: string;
+  amountMessage: AmountScreenMessage | null | undefined;
+}>;
+
+export function AmountInputSection({
+  amountValue,
+  amountInputMaxDecimalLength,
+  currencyText,
+  currencyPosition,
+  isInputDisabled,
+  onAmountChange,
+  onToggleInputMode,
+  toggleLabel,
+  secondaryValue,
+  amountMessage,
+}: AmountInputSectionProps) {
+  return (
+    <section className="relative flex flex-col items-center pt-56 text-center">
+      <div className="relative flex w-full items-center justify-center">
+        <AmountInput
+          value={amountValue}
+          placeholder="0"
+          onChange={onAmountChange}
+          maxDecimalLength={amountInputMaxDecimalLength}
+          currencyText={currencyText}
+          currencyPosition={currencyPosition}
+          disabled={isInputDisabled}
+          autoFocus
+          aria-invalid={amountMessage?.type === "error"}
+          className={cn(
+            "heading-0-semi-bold text-base placeholder:text-muted",
+            amountMessage?.type === "error" && "text-error",
+          )}
+        />
+        <IconButton
+          icon={TransferVertical}
+          size="xs"
+          appearance="gray"
+          aria-label={toggleLabel}
+          className="absolute top-12 right-8"
+          onClick={onToggleInputMode}
+        />
+      </div>
+      <p className="mt-8 body-2 text-muted">{secondaryValue}</p>
+      <div className="mt-8 min-h-20">
+        <AmountMessageText message={amountMessage} />
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +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(messageStyles({ type: message.type }))}>{message.text}</p>;
+}

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

@@ -0,0 +1,40 @@
+import React, { useMemo } from "react";
+import type { Account, AccountLike } from "@ledgerhq/types-live";
+import type { Transaction } from "@ledgerhq/live-common/generated/types";
+import type { SendFlowTransactionActions } from "@ledgerhq/live-common/flows/send/types";
+import { getAccountCurrency, getMainAccount } from "@ledgerhq/coin-framework/account/helpers";
+import { sendFeatures } from "@ledgerhq/live-common/bridge/descriptor";
+import { EvmGasOptionsSyncPlugin } from "./plugins/EvmGasOptionsSyncPlugin";
+
+type AmountPluginProps = Readonly<{
+  account: AccountLike;
+  parentAccount: Account | null;
+  transaction: Transaction;
+  transactionActions: SendFlowTransactionActions;
+}>;
+
+type AmountPluginComponent = (props: AmountPluginProps) => React.ReactElement | null;
+
+const pluginRegistry: Readonly<Record<string, AmountPluginComponent>> = {
+  evmGasOptionsSync: EvmGasOptionsSyncPlugin,
+};
+
+export function AmountPluginsHost(props: AmountPluginProps) {
+  const mainAccount = useMemo(
+    () => getMainAccount(props.account, props.parentAccount ?? undefined),
+    [props.account, props.parentAccount],
+  );
+  const currency = useMemo(() => getAccountCurrency(mainAccount), [mainAccount]);
+
+  const pluginIds = useMemo(() => sendFeatures.getAmountPlugins(currency), [currency]);
+
+  return (
+    <>
+      {pluginIds.map(id => {
+        const Plugin = pluginRegistry[id];
+        if (!Plugin) return null;
+        return <Plugin key={id} {...props} />;
+      })}
+    </>
+  );
+}

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

@@ -0,0 +1,63 @@
+import React, { useCallback } from "react";
+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";
+import { useAmountScreenViewModel } from "../hooks/useAmountScreenViewModel";
+import { AmountScreenView } from "./AmountScreenView";
+import { AmountPluginsHost } from "./AmountPluginsHost";
+
+type AmountScreenInnerProps = Readonly<{
+  account: AccountLike;
+  parentAccount: Account | null;
+  transaction: Transaction;
+  status: TransactionStatus;
+  bridgePending: boolean;
+  bridgeError: Error | null;
+  uiConfig: SendFlowUiConfig;
+  transactionActions: SendFlowTransactionActions;
+  onReview: () => void;
+  onGetFunds: () => void;
+}>;
+
+export function AmountScreenInner({
+  account,
+  parentAccount,
+  transaction,
+  status,
+  bridgePending,
+  bridgeError,
+  uiConfig,
+  transactionActions,
+  onReview,
+  onGetFunds,
+}: AmountScreenInnerProps) {
+  const handleReview = useCallback(() => {
+    onReview();
+  }, [onReview]);
+
+  const viewModel = useAmountScreenViewModel({
+    account,
+    parentAccount,
+    transaction,
+    status,
+    bridgePending,
+    bridgeError,
+    uiConfig,
+    transactionActions,
+  });
+
+  return (
+    <>
+      <AmountPluginsHost
+        account={account}
+        parentAccount={parentAccount}
+        transaction={transaction}
+        transactionActions={transactionActions}
+      />
+      <AmountScreenView {...viewModel} onReview={handleReview} onGetFunds={onGetFunds} />
+    </>
+  );
+}