Merge pull request #8665 from LedgerHQ/fix/live-15143-revert

Revert "fix(lld): use a debounce on memotag field"

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

@@ -7,14 +7,6 @@ import { render, screen, fireEvent } from "tests/testUtils";
 import MemoTagField from "../components/MemoTagField";
 
 describe("MemoTagField", () => {
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
   it("renders MemoTagField with label and text field", () => {
     render(<MemoTagField showLabel={true} />);
     expect(screen.getByText(/Tag \/ Memo/gi)).toBeInTheDocument();
@@ -27,14 +19,12 @@ describe("MemoTagField", () => {
     expect(screen.queryByText(/Tag \/ Memo/gi)).not.toBeInTheDocument();
   });
 
-  it("should call onChange when input value changes with a debounce", () => {
+  it("should call onChange when input value changes", () => {
     const handleChange = jest.fn();
     render(<MemoTagField onChange={handleChange} />);
     fireEvent.change(screen.getByPlaceholderText(/Enter Tag \/ Memo/gi), {
       target: { value: "new memo" },
     });
-    expect(handleChange).not.toHaveBeenCalled();
-    jest.runAllTimers();
     expect(handleChange).toHaveBeenCalledTimes(1);
   });
 

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

@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import Input, { Props as InputBaseProps } from "~/renderer/components/Input";
-import { useDebounce } from "@ledgerhq/live-common//hooks/useDebounce";
 import Label from "~/renderer/components/Label";
 import Box from "~/renderer/components/Box";
 import { useTranslation } from "react-i18next";
 import { Flex, Text, Tooltip } from "@ledgerhq/react-ui";
 import styled from "styled-components";
 import InfoCircle from "~/renderer/icons/InfoCircle";
+
 const TooltipContainer = styled(Box)`
   background-color: ${({ theme }) => theme.colors.palette.neutral.c100};
   padding: 10px;
@@ -30,7 +30,6 @@ type MemoTagFieldProps = InputBaseProps & {
   placeholder?: string;
   label?: string;
   tooltipText?: string;
-  validationHandler?: (newValue: string) => string;
 };
 
 const MemoTagField = ({
@@ -45,20 +44,8 @@ const MemoTagField = ({
   placeholder,
   label,
   tooltipText,
-  validationHandler,
 }: MemoTagFieldProps) => {
   const { t } = useTranslation();
-  const [memoValue, setMemoValue] = useState(value);
-  const debouncedMemoValue = useDebounce(memoValue, 300);
-
-  useEffect(() => {
-    if (debouncedMemoValue !== value) onChange?.(debouncedMemoValue || "");
-  }, [debouncedMemoValue, onChange, value]);
-
-  const handleChange = (newValue: string) => {
-    setMemoValue(validationHandler ? validationHandler(newValue) : newValue);
-  };
-
   return (
     <Box flow={1}>
       {showLabel && (
@@ -81,10 +68,10 @@ const MemoTagField = ({
         <Flex justifyContent="end">{CaracterCountComponent && <CaracterCountComponent />}</Flex>
         <Input
           placeholder={placeholder ?? t("MemoTagField.placeholder")}
-          onChange={handleChange}
+          onChange={onChange}
           warning={warning}
           error={error}
-          value={memoValue}
+          value={value}
           spellCheck="false"
           ff="Inter"
           maxMemoLength={maxMemoLength}

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

@@ -14,6 +14,7 @@ const MemoField = ({ onChange, account, transaction, status, autoFocus }: MemoTa
 
   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 }));
     },
@@ -31,7 +32,6 @@ const MemoField = ({ onChange, account, transaction, status, autoFocus }: MemoTa
       onChange={onTransferIdFieldChange}
       spellCheck="false"
       autoFocus={autoFocus}
-      validationHandler={newValue => newValue.replace(/\D/g, "")}
     />
   );
 };

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

@@ -15,7 +15,7 @@ const TagField = ({ onChange, account, transaction, autoFocus }: Props) => {
   const onChangeTag = useCallback(
     (str: string) => {
       const bridge = getAccountBridge(account);
-      const tag = BigNumber(str);
+      const tag = BigNumber(str.replace(/[^0-9]/g, ""));
       const patch = {
         tag:
           !tag.isNaN() &&
@@ -37,7 +37,6 @@ const TagField = ({ onChange, account, transaction, autoFocus }: Props) => {
       value={String(transaction.tag || "")}
       onChange={onChangeTag}
       autoFocus={autoFocus}
-      validationHandler={str => str.replace(/[^0-9]/g, "")}
     />
   );
 };