feat(llm): 📝 add the receive flow NeedMemoTagModal (#7989)

* feat(llm): add the "accent" button type

* feat(llm): add `NeedMemoTagModal`

* feat(llm): style the modal

* chore: update change log

* feat(llm): show the memo/tag modal for some coins only

* chore(llm): use more adapted components

.changeset/nice-plants-complain.md

@@ -0,0 +1,6 @@
+---
+"live-mobile": minor
+"@ledgerhq/native-ui": minor
+---
+
+Add the receive flow `NeedMemoTagModal`

apps/ledger-live-mobile/src/locales/en/common.json

@@ -3134,6 +3134,13 @@
  "shareAddress": "Share address",
  "addressCopied": "Address copied in clipboard",
  "taprootWarning": "Make sure the sender supports taproot",
+ "memoTag": {
+ "link": "Need a Tag/Memo?",
+ "title": "Need a Tag/Memo?",
+ "description": "You might need a Tag/Memo for receiving this asset from an exchange. You can use any combination of numbers like 1234.",
+ "cta": "I understand",
+ "learnMore": "Learn more about Tags"
+ },
  "selectCrypto": {
  "title": "Choose a crypto you want to receive"
  },

apps/ledger-live-mobile/src/screens/ReceiveFunds/03-Confirmation.tsx

@@ -13,6 +13,7 @@ import {
  getAccountCurrency,
 } from "@ledgerhq/live-common/account/index";
 import { getCurrencyColor } from "@ledgerhq/live-common/currencies/color";
+import FeatureToggle from "@ledgerhq/live-common/featureFlags/FeatureToggle";
 import { useToasts } from "@ledgerhq/live-common/notifications/ToastProvider/index";
 import { useTheme } from "styled-components/native";
 import { Flex, Text, IconsLegacy, Button, Box, BannerCard, Icons } from "@ledgerhq/native-ui";
@@ -37,6 +38,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { hasClosedWithdrawBannerSelector } from "~/reducers/settings";
 import { setCloseWithdrawBanner } from "~/actions/settings";
 import { useCompleteActionCallback } from "~/logic/postOnboarding/useCompleteAction";
+import { MEMO_TAG_COINS } from "~/utils/constants";
 import { urls } from "~/utils/urls";
 import { useMaybeAccountName } from "~/reducers/wallet";
 import Animated, {
@@ -46,6 +48,7 @@ import Animated, {
  runOnJS,
 } from "react-native-reanimated";
 import { isUTXOCompliant } from "@ledgerhq/live-common/currencies/helpers";
+import { NeedMemoTagModal } from "./NeedMemoTagModal";
 
 type ScreenProps = BaseComposite<
  StackNavigatorProps<ReceiveFundsStackParamList, ScreenName.ReceiveConfirmation>
@@ -390,6 +393,9 @@ function ReceiveConfirmationInner({ navigation, route, account, parentAccount }:
  )}
  </StyledTouchableOpacity>
  </Flex>
+ <FeatureToggle featureId="llmMemoTag">
+ {"id" in currency && MEMO_TAG_COINS.includes(currency.id) && <NeedMemoTagModal />}
+ </FeatureToggle>
  <Flex px={6} flexDirection="column" rowGap={8} mt={6}>
  {isUTXOCompliantCurrency && (
  <Text variant="small" fontWeight="medium" color="neutral.c70" textAlign="center">

apps/ledger-live-mobile/src/screens/ReceiveFunds/NeedMemoTagModal/NeedMemoTagModal.tsx

@@ -0,0 +1,53 @@
+import { useTheme } from "styled-components/native";
+import React, { useState } from "react";
+import { Linking } from "react-native";
+import { Button, Flex, Icons, Text } from "@ledgerhq/native-ui";
+import { useTranslation } from "react-i18next";
+import Circle from "~/components/Circle";
+import QueuedDrawer from "~/components/QueuedDrawer";
+import { urls } from "~/utils/urls";
+
+export function NeedMemoTagModal() {
+ const { colors } = useTheme();
+ const { t } = useTranslation();
+ const [isOpen, setIsOpen] = useState(false);
+ const openModal = () => setIsOpen(true);
+ const closeModal = () => setIsOpen(false);
+
+ return (
+ <>
+ <Button type="accent" onPress={openModal}>
+ {t("transfer.receive.memoTag.link")}
+ </Button>
+
+ <QueuedDrawer isRequestingToBeOpened={isOpen} onClose={closeModal}>
+ <Flex alignItems="center" mb={7}>
+ <Circle size={72} bg={colors.opacityDefault.c05}>
+ <Icons.InformationFill size="L" color="primary.c80" />
+ </Circle>
+ </Flex>
+
+ <Text variant="h4" textAlign="center" mb={6}>
+ {t("transfer.receive.memoTag.title")}
+ </Text>
+
+ <Text variant="bodyLineHeight" textAlign="center" color="neutral.c80" mb={8}>
+ {t("transfer.receive.memoTag.description")}
+ </Text>
+
+ <Button type="main" size="large" mb={6} onPress={closeModal}>
+ {t("transfer.receive.memoTag.cta")}
+ </Button>
+
+ <Button
+ type="accent"
+ size="large"
+ Icon={() => <Icons.ExternalLink size="S" color="primary.c80" />}
+ onPress={() => Linking.openURL(urls.memoTag)}
+ >
+ {t("transfer.receive.memoTag.learnMore")}
+ </Button>
+ </QueuedDrawer>
+ </>
+ );
+}

apps/ledger-live-mobile/src/screens/ReceiveFunds/NeedMemoTagModal/index.ts

@@ -0,0 +1 @@
+export * from "./NeedMemoTagModal";

apps/ledger-live-mobile/src/utils/constants.ts

@@ -1,4 +1,5 @@
 import Config from "react-native-config";
+import { CryptoCurrencyId } from "@ledgerhq/types-cryptoassets";
 
 export const SYNC_DELAY = 2500;
 export const BLE_SCANNING_NOTHING_TIMEOUT = (Config.MOCK ? 60 : 30) * 1000;
@@ -7,3 +8,17 @@ export const VIBRATION_PATTERN_ERROR = [0, 150];
 export const LEDGER_APPLE_WARNING_EXPLAINER_LINK =
  "https://support.ledger.com/hc/articles/12309873917853?docs=true";
 export const PTX_SERVICES_TOAST_ID = "PTX_SERVICES_TOAST_ID";
+
+export const MEMO_TAG_COINS: string[] = [
+ "ripple",
+ "stellar",
+ "cosmos",
+ "hedera",
+ "injective",
+ "crypto_org",
+ "crypto_org_croeseid",
+ "stacks",
+ "ton",
+ "eos",
+ "bsc",
+] satisfies CryptoCurrencyId[];

apps/ledger-live-mobile/src/utils/urls.tsx

@@ -55,6 +55,7 @@ export const urls = {
  tr: "https://support.ledger.com/tr/article/4423020306705-zd",
  zh: "https://support.ledger.com/zh-CN/article/4423020306705-zd",
  },
+ memoTag: "https://support.ledger.com/article/4409603715217-zd",
  pairingIssues: "https://support.ledger.com/article/360025864773-zd",
  ratingsContact: "https://support.ledger.com/article/4423020306705-zd",
  buyNanoX:

libs/ui/packages/native/src/components/cta/Button/getButtonStyle.ts

@@ -17,6 +17,12 @@ export function getButtonColors(colors: Theme["colors"]): {
  pressedColor: "transparent",
  pressedOutlineColor: "transparent",
  },
+ accent: {
+ primaryColor: colors.primary.c80,
+ secondaryColor: "rgba(0,0,255,0)",
+ pressedColor: "transparent",
+ pressedOutlineColor: "transparent",
+ },
  disabled: {
  primaryColor: colors.neutral.c50,
  secondaryColor: colors.neutral.c30,

libs/ui/packages/native/src/components/cta/Button/index.tsx

@@ -20,7 +20,7 @@ export type ButtonProps = TouchableOpacityProps &
  BaseStyledProps & {
  onPressWhenDisabled?: TouchableOpacityProps["onPress"];
  iconName?: string;
- type?: "main" | "shade" | "error" | "color" | "default";
+ type?: "main" | "shade" | "error" | "color" | "accent" | "default";
  size?: "small" | "medium" | "large";
  iconPosition?: "right" | "left";
  outline?: boolean;

libs/ui/packages/native/storybook/stories/Cta/Button/Button.stories.tsx

@@ -12,7 +12,7 @@ export default {
  component: Button,
  argTypes: {
  type: {
- options: ["main", "error", "shade", "color", undefined],
+ options: ["main", "error", "shade", "color", "default", "accent", undefined],
  control: { type: "select" },
  },
  size: {