feat: add memo tag information section in LLD recieve flow (#8055)

.changeset/new-cougars-develop.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Add Memo tag info section in LLD

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

@@ -0,0 +1,20 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from "react";
+import { fireEvent, render, screen } from "tests/testUtils";
+import MemoTagInfo from "../components/MemoTagInfo";
+
+describe("MemoTagInfo", () => {
+  it("should display MemoTagInfo", async () => {
+    render(<MemoTagInfo />);
+    const clickabelLabel = screen.getByText(/Need a Tag\/Memo?/);
+    expect(clickabelLabel).toBeVisible();
+    fireEvent.click(clickabelLabel);
+    const memoTagInfoBody = await screen.findByTestId("memo-tag-info-body");
+    // spec: when a user clicks on the label, it should display the memo tag info body
+    expect(memoTagInfoBody).toBeVisible();
+    // spec: when a user clicks on the label, it should disappear
+    expect(clickabelLabel).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,30 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from "react";
+import { fireEvent, render, screen } from "tests/testUtils";
+import MemoTagInfoBody from "../components/MemoTagInfoBody";
+import { MEMO_TAG_LEARN_MORE_LINK } from "../constants";
+import * as LinkingHelpers from "~/renderer/linking";
+
+jest.mock("~/renderer/linking", () => ({
+  openURL: jest.fn(),
+}));
+
+describe("MemoTagInfoBody", () => {
+  it("should display MemoTagInfoBody correctly", async () => {
+    render(<MemoTagInfoBody />);
+
+    const memoTagInfoBody = screen.getByTestId("memo-tag-info-body");
+    const learnMoreLink = screen.getByText(/Learn more about Tag\/Memo/);
+
+    expect(memoTagInfoBody).toBeVisible();
+    expect(learnMoreLink).toBeVisible();
+
+    fireEvent.click(learnMoreLink);
+
+    jest.spyOn(LinkingHelpers, "openURL");
+    // spec: when a user clicks on the learn more link, it should open the link
+    expect(LinkingHelpers.openURL).toHaveBeenCalledWith(MEMO_TAG_LEARN_MORE_LINK);
+  });
+});

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

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { Trans } from "react-i18next";
+
+import { Alert } from "@ledgerhq/react-ui";
+
+import { colors } from "~/renderer/styles/theme";
+
+import Label from "~/renderer/components/Label";
+
+import MemoTagInfoBody from "./MemoTagInfoBody";
+
+const MemoTagInfo = () => {
+  const [isAlertDisplayed, toggleAlertDisplay] = useState(false);
+
+  const handleOnToggleAlertDisplay = () => {
+    toggleAlertDisplay(!isAlertDisplayed);
+  };
+
+  return !isAlertDisplayed ? (
+    <Label
+      color={colors.wallet}
+      style={{
+        fontSize: "13px",
+        fontWeight: 600,
+        cursor: "pointer",
+      }}
+      onClick={handleOnToggleAlertDisplay}
+    >
+      <Trans i18nKey="receive.memoTag.title" />
+    </Label>
+  ) : (
+    <Alert
+      containerProps={{
+        p: 12,
+        borderRadius: "4px",
+      }}
+      renderContent={() => <MemoTagInfoBody />}
+    />
+  );
+};
+
+export default MemoTagInfo;

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { Link, Text } from "@ledgerhq/react-ui";
+import { Trans } from "react-i18next";
+import { openURL } from "~/renderer/linking";
+import { MEMO_TAG_LEARN_MORE_LINK } from "../constants";
+
+const MemoTagInfoBody = () => {
+  const handleOpenLMLink = () => openURL(MEMO_TAG_LEARN_MORE_LINK);
+
+  return (
+    <div data-testid="memo-tag-info-body">
+      <Text variant="paragraphLineHeight" color="neutral.c80" fontSize={13}>
+        <Trans i18nKey="receive.memoTag.description">
+          <Text variant="paragraphLineHeight" fontWeight="700" color="neutral.c90"></Text>
+        </Trans>
+      </Text>
+      <br />
+      <Link
+        size="small"
+        color={"neutral.c80"}
+        onClick={handleOpenLMLink}
+        textProps={{
+          fontSize: "13px",
+        }}
+        style={{ textDecoration: "underline" }}
+      >
+        <Trans i18nKey="receive.memoTag.learnMore" />
+      </Link>
+    </div>
+  );
+};
+
+export default MemoTagInfoBody;

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

@@ -0,0 +1,14 @@
+export const MEMO_TAG_LEARN_MORE_LINK = "https://support.ledger.com/article/4409603715217-zd";
+export const MEMO_TAG_COINS: string[] = [
+  "ripple",
+  "stellar",
+  "cosmos",
+  "hedera",
+  "injective",
+  "crypto_org",
+  "crypto_org_croeseid",
+  "stacks",
+  "ton",
+  "eos",
+  "bsc",
+];

apps/ledger-live-desktop/src/renderer/modals/Receive/steps/StepReceiveFunds.tsx

@@ -29,7 +29,7 @@ import ModalBody from "~/renderer/components/Modal/ModalBody";
 import QRCode from "~/renderer/components/QRCode";
 import { getEnv } from "@ledgerhq/live-env";
 import AccountTagDerivationMode from "~/renderer/components/AccountTagDerivationMode";
-import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { FeatureToggle, useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { LOCAL_STORAGE_KEY_PREFIX } from "./StepReceiveStakingFlow";
 import { useDispatch } from "react-redux";
 import { openModal } from "~/renderer/actions/modals";
@@ -41,6 +41,8 @@ import { getDefaultAccountName } from "@ledgerhq/live-wallet/accountName";
 import { useMaybeAccountName } from "~/renderer/reducers/wallet";
 import { UTXOAddressAlert } from "~/renderer/components/UTXOAddressAlert";
 import { isUTXOCompliant } from "@ledgerhq/live-common/currencies/helpers";
+import MemoTagInfo from "~/newArch/features/MemoTag/components/MemoTagInfo";
+import { MEMO_TAG_COINS } from "~/newArch/features/MemoTag/constants";
 
 const Separator = styled.div`
   border-top: 1px solid #99999933;
@@ -68,7 +70,12 @@ const Receive1ShareAddress = ({
   address: string;
   showQRCodeModal: () => void;
 }) => {
-  const isUTXOCompliantCurrency = isUTXOCompliant(account.currency.family);
+  const { currency } = account;
+
+  const isUTXOCompliantCurrency = isUTXOCompliant(currency.family);
+  const shouldRenderMemoTagInfo =
+    currency.explorerId && MEMO_TAG_COINS.includes(currency.explorerId);
+
   return (
     <>
       <Box horizontal alignItems="center" flow={2} mb={4}>
@@ -103,6 +110,13 @@ const Receive1ShareAddress = ({
           <UTXOAddressAlert />
         </Box>
       )}
+      <FeatureToggle featureId="lldMemoTag">
+        {shouldRenderMemoTagInfo && (
+          <Box mt={3}>
+            <MemoTagInfo />
+          </Box>
+        )}
+      </FeatureToggle>
     </>
   );
 };

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

@@ -2253,7 +2253,12 @@
           "description": "Stake your CELO with Ledger by Figment validator. It guarantees complete cover against slashing, backed by Ledger’s uncompromising security."
         }
       }
-    }
+    },
+    "memoTag": {
+        "title": "Need a Tag/Memo?",
+        "description": "You might need a <0>Tag/Memo</0> for receiving this asset from an exchange. You can use any combination of numbers like 1234.",
+        "learnMore": "Learn more about Tag/Memo"
+      }
   },
   "send": {
     "title": "Send",