[LWD] feat(contacts): render desktop contact edit and delete actions

apps/ledger-live-desktop/src/mvvm/features/Contacts/hooks/useContactsEditDeletePorts.ts

@@ -0,0 +1,37 @@
+import {
+  deleteContact as deleteContactAction,
+  parseContactName,
+  renameContact as renameContactAction,
+  selectContactById,
+} from "@domain/entity-contact";
+import { useMemo } from "react";
+import type { ContactDetailActionsPorts } from "@features/flow-contacts";
+import { useDispatch, useStore } from "LLD/hooks/redux";
+
+export function useContactsEditDeletePorts(): ContactDetailActionsPorts {
+  const dispatch = useDispatch();
+  const store = useStore();
+
+  return useMemo<ContactDetailActionsPorts>(
+    () => ({
+      edit: {
+        renameContact: async ({ contactId, name }) => {
+          dispatch(renameContactAction({ contactId, name: parseContactName(name) }));
+          const updatedContact = selectContactById(store.getState(), contactId);
+
+          if (updatedContact === undefined) {
+            throw new Error("Contact not found");
+          }
+
+          return updatedContact;
+        },
+      },
+      deletion: {
+        deleteContact: async contactIdToDelete => {
+          dispatch(deleteContactAction(contactIdToDelete));
+        },
+      },
+    }),
+    [dispatch, store],
+  );
+}

apps/ledger-live-desktop/src/mvvm/features/Contacts/screens/Contacts/ContactsView.tsx

@@ -2,7 +2,10 @@ import React from "react";
 import {
   ContactAddressDetailDialog,
   ContactsAddContactDialog,
+  ContactsDeleteContactDialog,
+  ContactsEditSignerDialog,
   ContactsListView,
+  ContactsRenameContactDialog,
   type ContactAddressDetailDialogProps,
   type ContactsAddContactDialogProps,
   type ContactsListViewProps,
@@ -11,18 +14,21 @@ import {
   ContactsAddAddressFlowDialog,
   type ContactsAddAddressFlowDialogProps,
 } from "./components/ContactsAddAddressFlowDialog";
+import type { ContactDetailEditDeleteDialogProps } from "./useContactDetailEditDeleteAdapter";
 
 export type ContactsViewProps = ContactsListViewProps &
   Readonly<{
     addContactDialog: ContactsAddContactDialogProps;
     addAddressFlowDialog: ContactsAddAddressFlowDialogProps;
     addressDetailDialog: ContactAddressDetailDialogProps;
+    editDeleteDialogs: ContactDetailEditDeleteDialogProps;
   }>;
 
 export function ContactsView({
   addContactDialog,
   addAddressFlowDialog,
   addressDetailDialog,
+  editDeleteDialogs,
   ...pageProps
 }: Readonly<ContactsViewProps>) {
   return (
@@ -31,6 +37,9 @@ export function ContactsView({
       <ContactsAddContactDialog {...addContactDialog} />
       <ContactAddressDetailDialog {...addressDetailDialog} />
       <ContactsAddAddressFlowDialog {...addAddressFlowDialog} />
+      <ContactsRenameContactDialog {...editDeleteDialogs.renameDialog} />
+      <ContactsDeleteContactDialog {...editDeleteDialogs.deleteDialog} />
+      <ContactsEditSignerDialog {...editDeleteDialogs.signerDialog} />
     </>
   );
 }

apps/ledger-live-desktop/src/mvvm/features/Contacts/screens/Contacts/useContactDetailEditDeleteAdapter.ts

@@ -0,0 +1,102 @@
+import {
+  ContactIdSchema,
+  INVALID_CONTACT_NAME_ERROR_NAME,
+  type ContactId,
+} from "@domain/entity-contact";
+import {
+  type ContactsDeleteContactDialogProps,
+  type ContactsEditSignerDialogProps,
+  type ContactsRenameContactDialogProps,
+  type ContactDetailActionsLabels,
+  useContactDetailEditDeleteFlowViewModel,
+  useRenameContactDialogViewModel,
+} from "@features/flow-contacts";
+import { useTranslation } from "react-i18next";
+import { useContactsEditDeletePorts } from "../../hooks/useContactsEditDeletePorts";
+
+export type ContactDetailEditDeleteDialogProps = Readonly<{
+  detailActions?: Readonly<{
+    canDelete: boolean;
+    labels: ContactDetailActionsLabels;
+    onEdit: () => void;
+    onDelete: () => void;
+  }>;
+  renameDialog: ContactsRenameContactDialogProps;
+  deleteDialog: ContactsDeleteContactDialogProps;
+  signerDialog: ContactsEditSignerDialogProps;
+}>;
+
+export function useContactDetailEditDeleteAdapter(
+  contactId: ContactId | undefined,
+  onDeleteSuccess: () => void,
+): ContactDetailEditDeleteDialogProps {
+  const { t } = useTranslation();
+  const ports = useContactsEditDeletePorts();
+  const resolvedContactId = contactId ?? ContactIdSchema.parse("contact-me");
+  const flow = useContactDetailEditDeleteFlowViewModel({
+    contactId: resolvedContactId,
+    ports,
+    onDeleteSuccess,
+  });
+  const renameDialogViewModel = useRenameContactDialogViewModel({
+    contactId: resolvedContactId,
+    currentName: flow.contactName,
+    editPort: ports.edit,
+    isRequestedOpen: flow.editUiState === "edit-open",
+    onCloseRequest: flow.onEditClose,
+    onSaveSuccess: () => undefined,
+  });
+  const actionLabels: ContactDetailActionsLabels = {
+    editContact: t("contacts.detailActions.editContact"),
+    deleteContact: t("contacts.detailActions.deleteContact"),
+  };
+  const renameLabels = {
+    title: t("contacts.editContact.title"),
+    namePlaceholder: t("contacts.editContact.namePlaceholder"),
+    namingDisclaimer: t("contacts.editContact.namingDisclaimer"),
+    applyChanges: t("contacts.editContact.applyChanges"),
+    nameValidationErrors: {
+      [INVALID_CONTACT_NAME_ERROR_NAME]: t("contacts.editContact.invalidNameError"),
+    },
+  };
+  const deleteLabels = {
+    title: t("contacts.deleteContact.title"),
+    description: t("contacts.deleteContact.description"),
+    confirm: t("contacts.deleteContact.confirm"),
+    cancel: t("contacts.deleteContact.cancel"),
+  };
+  const signerLabels = {
+    title: t("contacts.editSigner.title"),
+    description: t("contacts.editSigner.description"),
+    confirm: t("contacts.editSigner.confirm"),
+    cancel: t("contacts.editSigner.cancel"),
+  };
+
+  return {
+    detailActions: contactId
+      ? {
+          canDelete: flow.canDelete,
+          labels: actionLabels,
+          onEdit: flow.onEditPress,
+          onDelete: flow.onDeletePress,
+        }
+      : undefined,
+    renameDialog: {
+      ...renameDialogViewModel,
+      labels: renameLabels,
+    },
+    deleteDialog: {
+      isOpen: flow.deleteLifecycle.status === "open",
+      isDeleting: flow.isDeleting,
+      labels: deleteLabels,
+      onConfirm: flow.confirmDelete,
+      onCancel: flow.cancelDelete,
+    },
+    signerDialog: {
+      isOpen: flow.editUiState === "signer-open",
+      labels: signerLabels,
+      onConfirm: flow.onSignerConfirm,
+      onCancel: flow.onSignerCancel,
+    },
+  };
+}

apps/ledger-live-desktop/src/mvvm/features/Contacts/screens/Contacts/useContactDetailPaneAdapter.ts

@@ -15,19 +15,25 @@ import {
 } from "@features/flow-contacts";
 import { MY_WALLET_AVATAR_USER_URL } from "LLD/features/MyWallet/components/UserAvatar/constants";
 import { useContactsAddressCurrencyAdapter } from "../../hooks/useContactsAddressCurrencyAdapter";
+import { useContactDetailEditDeleteAdapter } from "./useContactDetailEditDeleteAdapter";
 
 export function useContactDetailPaneAdapter(
   onAddAddress: (contact: AddAddressContact) => void,
 ): Readonly<{
   detail: ContactDetailViewProps | undefined;
   addressDetailDialog: ContactAddressDetailDialogProps;
+  editDeleteDialogs: ReturnType<typeof useContactDetailEditDeleteAdapter>;
   onOpenMe: ContactsListViewProps["onOpenMe"];
   onOpenContact: ContactsListViewProps["onOpenContact"];
 }> {
   const { t } = useTranslation();
   const meContact = useContactsMeContact();
   const currencyPort = useContactsAddressCurrencyAdapter();
   const [detailContactId, setDetailContactId] = useState<ContactId | undefined>(meContact.id);
+  const onDeleteSuccess = useCallback(() => {
+    setDetailContactId(meContact.id);
+  }, [meContact.id]);
+  const editDeleteDialogs = useContactDetailEditDeleteAdapter(detailContactId, onDeleteSuccess);
   const emptyContact = useEmptyContactDetail(detailContactId);
   const populatedContactDetail = usePopulatedContactDetail(detailContactId, currencyPort);
   const {
@@ -82,6 +88,7 @@ export function useContactDetailPaneAdapter(
         onAddAddress: () => onAddAddress(populatedContactDetail.contact),
         addressGroups: populatedContactDetail.addressGroups,
         onAddressRowPress,
+        detailActions: editDeleteDialogs.detailActions,
       };
     }
 
@@ -93,8 +100,16 @@ export function useContactDetailPaneAdapter(
       ...baseDetail,
       contact: emptyContact,
       onAddAddress: () => onAddAddress(emptyContact),
+      detailActions: editDeleteDialogs.detailActions,
     };
-  }, [emptyContact, labels, onAddAddress, onAddressRowPress, populatedContactDetail]);
+  }, [
+    emptyContact,
+    editDeleteDialogs.detailActions,
+    labels,
+    onAddAddress,
+    onAddressRowPress,
+    populatedContactDetail,
+  ]);
   const addressDetailDialog = useMemo<ContactAddressDetailDialogProps>(
     () => ({
       isOpen,
@@ -118,6 +133,7 @@ export function useContactDetailPaneAdapter(
   return {
     detail,
     addressDetailDialog,
+    editDeleteDialogs,
     onOpenMe: openContact,
     onOpenContact: openContact,
   };

apps/ledger-live-desktop/src/mvvm/features/Contacts/screens/Contacts/useContactsViewModel.ts

@@ -25,13 +25,15 @@ import { useContactsFeatureIntroductionPreference } from "../../hooks/useContact
 import { useContactsCurrencySelectionAdapter } from "../../hooks/useContactsCurrencySelectionAdapter";
 import { useContactsAddressValidationAdapter } from "../../hooks/useContactsAddressValidationAdapter";
 import { useContactDetailPaneAdapter } from "./useContactDetailPaneAdapter";
+import { useContactDetailEditDeleteAdapter } from "./useContactDetailEditDeleteAdapter";
 import type { ContactsAddAddressFlowDialogProps } from "./components/ContactsAddAddressFlowDialog";
 
 export type ContactsPageViewModel = Omit<ContactsListViewProps, "onAddContact"> &
   Readonly<{
     addAddressFlowState: AddAddressFlowState;
     addAddressFlowDialog: ContactsAddAddressFlowDialogProps;
     addressDetailDialog: ContactAddressDetailDialogProps;
+    editDeleteDialogs: ReturnType<typeof useContactDetailEditDeleteAdapter>;
     onClearSearch: () => void;
   }>;
 
@@ -122,7 +124,7 @@ export function useContactsViewModel(): ContactsPageViewModel {
       updateAddress,
     ],
   );
-  const { detail, addressDetailDialog, onOpenMe, onOpenContact } =
+  const { detail, addressDetailDialog, editDeleteDialogs, onOpenMe, onOpenContact } =
     useContactDetailPaneAdapter(onAddAddress);
   const [isLedgerSyncIntroductionDismissed, setIsLedgerSyncIntroductionDismissed] = useState(false);
   const [ledgerSyncStatus] = useState<ContactsLedgerSyncStatus>("ready");
@@ -188,6 +190,7 @@ export function useContactsViewModel(): ContactsPageViewModel {
     addAddressFlowState,
     addAddressFlowDialog,
     addressDetailDialog,
+    editDeleteDialogs,
     viewModel,
     labels,
     searchQuery,

apps/ledger-live-desktop/static/i18n/en/app.json

@@ -9335,6 +9335,29 @@
       "delete": "Delete",
       "networkTag": "{{name}} Network"
     },
+    "detailActions": {
+      "editContact": "Edit contact",
+      "deleteContact": "Delete contact"
+    },
+    "editContact": {
+      "title": "Edit contact",
+      "namePlaceholder": "Contact name",
+      "namingDisclaimer": "For your privacy, avoid full names and surnames. Use a nickname or just a first name + initial, e.g. 'John S.'",
+      "applyChanges": "Apply changes",
+      "invalidNameError": "Special characters are not allowed."
+    },
+    "deleteContact": {
+      "title": "Delete contact?",
+      "description": "Deleting this contact will erase all associated addresses.",
+      "confirm": "Delete",
+      "cancel": "Cancel"
+    },
+    "editSigner": {
+      "title": "Confirm on your device",
+      "description": "Connect and unlock your Ledger device to confirm this change.",
+      "confirm": "Continue",
+      "cancel": "Cancel"
+    },
     "ledgerSyncIntroduction": {
       "description": "Your contacts are end-to-end encrypted with your Ledger and synced across your devices, only you can unlock them.",
       "dismiss": "Got it"

features/flow/contacts/src/index.ts

@@ -2,6 +2,8 @@ export * from "./steps/List";
 export * from "./steps/List/web";
 export * from "./steps/AddContact";
 export * from "./steps/AddContact/web";
+export * from "./steps/EditContact";
+export * from "./steps/EditContact/web";
 export * from "./steps/AddAddress";
 export * from "./steps/AddAddress/web";
 export * from "./steps/Introduction";

features/flow/contacts/src/steps/AddContact/components/ContactNameInput/ContactNameInput.web.tsx

@@ -25,6 +25,7 @@ export function ContactNameInput({
       maxCount={CONTACT_NAME_MAX_LENGTH}
       helperText={errorMessage}
       status={errorMessage ? "error" : undefined}
+      className="mt-2"
     />
   );
 }

features/flow/contacts/src/steps/Detail/ContactDetailView.web.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { ContactDetailViewProps } from "./types";
+import { ContactDetailActions } from "./components/ContactDetailActions/ContactDetailActions.web";
 import { ContactDetailAddressList } from "./components/ContactDetailAddressList/ContactDetailAddressList.web";
 import { ContactDetailEmptyState } from "./components/ContactDetailEmptyState.web";
 import { ContactDetailHeader } from "./components/ContactDetailHeader.web";
@@ -11,11 +12,16 @@ export function ContactDetailView({
   onAddAddress,
   addressGroups,
   onAddressRowPress,
+  detailActions,
 }: ContactDetailViewProps): React.ReactNode {
   const hasPopulatedAddresses = addressGroups !== undefined && onAddressRowPress !== undefined;
 
   return (
-    <div className="flex h-full flex-col gap-32 px-16 py-32" data-testid="contacts-detail-screen">
+    <div
+      className="relative flex h-full flex-col gap-32 px-16 py-32"
+      data-testid="contacts-detail-screen"
+    >
+      {detailActions ? <ContactDetailActions {...detailActions} /> : null}
       <ContactDetailHeader
         contact={contact}
         labels={labels}

features/flow/contacts/src/steps/Detail/components/ContactDetailActions/ContactDetailActions.web.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { IconButton } from "@ledgerhq/lumen-ui-react";
+import { PenEdit, Trash } from "@ledgerhq/lumen-ui-react/symbols";
+import type { ContactDetailActionsLabels } from "../../types";
+
+export type ContactDetailActionsProps = Readonly<{
+  canDelete: boolean;
+  labels: ContactDetailActionsLabels;
+  onEdit: () => void;
+  onDelete: () => void;
+}>;
+
+export function ContactDetailActions({
+  canDelete,
+  labels,
+  onEdit,
+  onDelete,
+}: ContactDetailActionsProps): React.ReactNode {
+  return (
+    <div className="absolute right-16 top-16 flex gap-8" data-testid="contacts-detail-actions">
+      <IconButton
+        appearance="transparent"
+        size="sm"
+        icon={PenEdit}
+        aria-label={labels.editContact}
+        onClick={onEdit}
+        data-testid="contacts-detail-edit-action"
+      />
+      {canDelete ? (
+        <IconButton
+          appearance="transparent"
+          size="sm"
+          icon={Trash}
+          aria-label={labels.deleteContact}
+          onClick={onDelete}
+          data-testid="contacts-detail-delete-action"
+        />
+      ) : null}
+    </div>
+  );
+}