fix: casper support on memo tag send flow (#8419)

.changeset/new-eels-deliver.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Fix casper issues with new memo tag flow (using an intermediary screen) - feature flagged

apps/ledger-live-desktop/src/newArch/features/MemoTag/__tests__/MemoTagField.test.tsx

@@ -48,4 +48,14 @@ describe("MemoTagField", () => {
     render(<MemoTagField error={new Error("Error message")} />);
     expect(screen.getByTestId("input-error")).toBeInTheDocument();
   });
+
+  it("should render with custom placeholder", () => {
+    render(<MemoTagField placeholder="Custom Placeholder" />);
+    expect(screen.getByPlaceholderText("Custom Placeholder")).toBeInTheDocument();
+  });
+
+  it("should render with custom label", () => {
+    render(<MemoTagField label="Custom Label" />);
+    expect(screen.getByText("Custom Label")).toBeInTheDocument();
+  });
 });

apps/ledger-live-desktop/src/newArch/features/MemoTag/components/MemoTagField.tsx

@@ -27,6 +27,9 @@ type MemoTagFieldProps = InputBaseProps & {
   showLabel?: boolean;
   CaracterCountComponent?: React.FC;
   autoFocus?: boolean;
+  placeholder?: string;
+  label?: string;
+  tooltipText?: string;
 };
 
 const MemoTagField = ({
@@ -38,28 +41,33 @@ const MemoTagField = ({
   maxMemoLength,
   CaracterCountComponent,
   autoFocus,
+  placeholder,
+  label,
+  tooltipText,
 }: MemoTagFieldProps) => {
   const { t } = useTranslation();
   return (
     <Box flow={1}>
       {showLabel && (
         <Label>
           <Flex>
-            <span>{t("MemoTagField.label")}</span>
+            <span>{label ?? t("MemoTagField.label")}</span>
             &nbsp;&nbsp;
             <Tooltip
               placement="top"
-              content={<TooltipContainer>{t("MemoTagField.information")}</TooltipContainer>}
+              content={
+                <TooltipContainer>{tooltipText ?? t("MemoTagField.information")}</TooltipContainer>
+              }
             >
-              <InfoCircle size={16} />
+              <InfoCircle size={16} data-testid="memo-tag-field-tooltip-icon" />
             </Tooltip>
           </Flex>
         </Label>
       )}
       <Flex flexDirection="column" justifyContent="center">
         <Flex justifyContent="end">{CaracterCountComponent && <CaracterCountComponent />}</Flex>
         <Input
-          placeholder={t("MemoTagField.placeholder")}
+          placeholder={placeholder ?? t("MemoTagField.placeholder")}
           onChange={onChange}
           warning={warning}
           error={error}

apps/ledger-live-desktop/src/newArch/features/MemoTag/constants.ts

@@ -1,5 +1,4 @@
 export const MEMO_TAG_COINS: string[] = [
-  "algorand",
   "cardano",
   "casper",
   "cosmos",

apps/ledger-live-desktop/src/newArch/features/MemoTag/utils.ts

@@ -27,6 +27,8 @@ export const getMemoTagValueByTransactionFamily = (transaction: Transaction) =>
           };
         }
       )?.model.uiState.memo;
+    case "casper":
+      return transaction?.transferId;
     default:
       return (transaction as Transaction & { memo: string })?.memo;
   }

apps/ledger-live-desktop/src/renderer/families/casper/MemoField.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from "react";
+import { getAccountBridge } from "@ledgerhq/live-common/bridge/index";
+import invariant from "invariant";
+import { useTranslation } from "react-i18next";
+import MemoTagField from "~/newArch/features/MemoTag/components/MemoTagField";
+import { MemoTagFieldProps } from "./types";
+
+const MemoField = ({ onChange, account, transaction, status, autoFocus }: MemoTagFieldProps) => {
+  invariant(transaction.family === "casper", "TransferIdField: casper family expected");
+
+  const { t } = useTranslation();
+
+  const bridge = getAccountBridge(account);
+
+  const onTransferIdFieldChange = useCallback(
+    (value: string) => {
+      value = value.replace(/\D/g, "");
+      if (value !== "") onChange(bridge.updateTransaction(transaction, { transferId: value }));
+      else onChange(bridge.updateTransaction(transaction, { transferId: undefined }));
+    },
+    [onChange, transaction, bridge],
+  );
+
+  return (
+    <MemoTagField
+      warning={status.warnings.transaction}
+      error={status.errors.transaction}
+      value={transaction.transferId ?? ""}
+      placeholder={t("families.casper.transferIdPlaceholder")}
+      label={t("families.casper.transferId")}
+      tooltipText={t("families.casper.transferIdWarningText")}
+      onChange={onTransferIdFieldChange}
+      spellCheck="false"
+      autoFocus={autoFocus}
+    />
+  );
+};
+
+export default MemoField;

apps/ledger-live-desktop/src/renderer/families/casper/SendAmountFields.tsx

@@ -7,6 +7,7 @@ import LabelInfoTooltip from "~/renderer/components/LabelInfoTooltip";
 
 import { Transaction, TransactionStatus } from "@ledgerhq/live-common/families/casper/types";
 import { Account } from "@ledgerhq/types-live";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 
 type Props = {
   account: Account;
@@ -18,6 +19,10 @@ type Props = {
 };
 
 const Root = (props: Props) => {
+  const lldMemoTag = useFeature("lldMemoTag");
+
+  if (lldMemoTag?.enabled) return null;
+
   return (
     <Box flow={1}>
       <Box mb={10}>
@@ -29,6 +34,7 @@ const Root = (props: Props) => {
           </LabelInfoTooltip>
         </Label>
       </Box>
+
       <Box mb={15} horizontal grow alignItems="center" justifyContent="space-between">
         <Box grow={1}>
           <TransferIdField

apps/ledger-live-desktop/src/renderer/families/casper/SendRecipientFields.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Box from "~/renderer/components/Box";
+import MemoField from "./MemoField";
+import { TransferIdProps } from "./types";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+
+const Root = (props: TransferIdProps) => {
+  const lldMemoTag = useFeature("lldMemoTag");
+
+  if (!lldMemoTag?.enabled) return null;
+
+  return (
+    <Box flow={1}>
+      <MemoField {...props} />
+    </Box>
+  );
+};
+export default {
+  component: Root,
+  fields: ["memo"],
+};

apps/ledger-live-desktop/src/renderer/families/casper/index.ts

@@ -9,10 +9,12 @@ import operationDetails from "./operationDetails";
 import AccountSubHeader from "./AccountSubHeader";
 import sendAmountFields from "./SendAmountFields";
 import transactionConfirmFields from "./TransactionConfirmFields";
+import sendRecipientFields from "./SendRecipientFields";
 
 const family: LLDCoinFamily<CasperAccount, Transaction, TransactionStatus, CasperOperation> = {
   operationDetails,
   AccountSubHeader,
+  sendRecipientFields,
   sendAmountFields,
   transactionConfirmFields,
 };

apps/ledger-live-desktop/src/renderer/families/casper/types.ts

@@ -5,6 +5,7 @@ import {
   TransactionStatus,
 } from "@ledgerhq/live-common/families/casper/types";
 import { FieldComponentProps, LLDCoinFamily } from "../types";
+import type { Account } from "@ledgerhq/types-live";
 
 export type CasperFamily = LLDCoinFamily<
   CasperAccount,
@@ -17,3 +18,13 @@ export type CasperFieldComponentProps = FieldComponentProps<
   Transaction,
   TransactionStatus
 >;
+export type TransferIdProps = {
+  onChange: (t: Transaction) => void;
+  account: Account;
+  transaction: Transaction;
+  status: TransactionStatus;
+};
+
+export type MemoTagFieldProps = TransferIdProps & {
+  autoFocus?: boolean;
+};