diff --git a/.changeset/new-eels-deliver.md b/.changeset/new-eels-deliver.md new file mode 100644 index 000000000000..dadc2b99d905 --- /dev/null +++ b/.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 diff --git a/apps/ledger-live-desktop/src/newArch/features/MemoTag/__tests__/MemoTagField.test.tsx b/apps/ledger-live-desktop/src/newArch/features/MemoTag/__tests__/MemoTagField.test.tsx index 8a36af3c8dda..8e75955c2f66 100644 --- a/apps/ledger-live-desktop/src/newArch/features/MemoTag/__tests__/MemoTagField.test.tsx +++ b/apps/ledger-live-desktop/src/newArch/features/MemoTag/__tests__/MemoTagField.test.tsx @@ -48,4 +48,14 @@ describe("MemoTagField", () => { render(); expect(screen.getByTestId("input-error")).toBeInTheDocument(); }); + + it("should render with custom placeholder", () => { + render(); + expect(screen.getByPlaceholderText("Custom Placeholder")).toBeInTheDocument(); + }); + + it("should render with custom label", () => { + render(); + expect(screen.getByText("Custom Label")).toBeInTheDocument(); + }); }); diff --git a/apps/ledger-live-desktop/src/newArch/features/MemoTag/components/MemoTagField.tsx b/apps/ledger-live-desktop/src/newArch/features/MemoTag/components/MemoTagField.tsx index a0f60eb7e367..85cbae624eed 100644 --- a/apps/ledger-live-desktop/src/newArch/features/MemoTag/components/MemoTagField.tsx +++ b/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,6 +41,9 @@ const MemoTagField = ({ maxMemoLength, CaracterCountComponent, autoFocus, + placeholder, + label, + tooltipText, }: MemoTagFieldProps) => { const { t } = useTranslation(); return ( @@ -45,13 +51,15 @@ const MemoTagField = ({ {showLabel && ( @@ -59,7 +67,7 @@ const MemoTagField = ({ {CaracterCountComponent && } }; } )?.model.uiState.memo; + case "casper": + return transaction?.transferId; default: return (transaction as Transaction & { memo: string })?.memo; } diff --git a/apps/ledger-live-desktop/src/renderer/families/casper/MemoField.tsx b/apps/ledger-live-desktop/src/renderer/families/casper/MemoField.tsx new file mode 100644 index 000000000000..c9562f5a5675 --- /dev/null +++ b/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 ( + + ); +}; + +export default MemoField; diff --git a/apps/ledger-live-desktop/src/renderer/families/casper/SendAmountFields.tsx b/apps/ledger-live-desktop/src/renderer/families/casper/SendAmountFields.tsx index 004ede50486e..7f14378f5d49 100644 --- a/apps/ledger-live-desktop/src/renderer/families/casper/SendAmountFields.tsx +++ b/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 ( @@ -29,6 +34,7 @@ const Root = (props: Props) => { + { + const lldMemoTag = useFeature("lldMemoTag"); + + if (!lldMemoTag?.enabled) return null; + + return ( + + + + ); +}; +export default { + component: Root, + fields: ["memo"], +}; diff --git a/apps/ledger-live-desktop/src/renderer/families/casper/index.ts b/apps/ledger-live-desktop/src/renderer/families/casper/index.ts index 081e98bdbc37..e7bb6d80dae2 100644 --- a/apps/ledger-live-desktop/src/renderer/families/casper/index.ts +++ b/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 = { operationDetails, AccountSubHeader, + sendRecipientFields, sendAmountFields, transactionConfirmFields, }; diff --git a/apps/ledger-live-desktop/src/renderer/families/casper/types.ts b/apps/ledger-live-desktop/src/renderer/families/casper/types.ts index cbcf3d8be528..80878bd2d0e8 100644 --- a/apps/ledger-live-desktop/src/renderer/families/casper/types.ts +++ b/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; +};