feat: update earn info modal on ledger-live-mobile to add a link to `…

…learnMore` (#7765) * feat: update earn info modal to add more links and icon * chore: update changeset * Update apps/ledger-live-mobile/src/screens/PTX/Earn/EarnInfoDrawer.tsx Co-authored-by: Beth Swingler <beth.swingler-ext@ledger.fr> * Update apps/ledger-live-mobile/src/screens/PTX/Earn/EarnInfoDrawer.tsx Co-authored-by: Beth Swingler <beth.swingler-ext@ledger.fr> * fix: use styled-components default theme for EarnInfoDrawer * chore: replace svg with existing icon * chore: fix lint * chore: remove curly braces on string property --------- Co-authored-by: Beth Swingler <beth.swingler-ext@ledger.fr>
LedgerHQ · Sep 16, 2024 · d18ec03 · d18ec03
1 parent 8679584
commit d18ec03
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 25 deletions.
diff --git a/.changeset/rude-ants-share.md b/.changeset/rude-ants-share.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Upgrade Earn Info modal to support and display "Learn more" links
diff --git a/apps/ledger-live-desktop/src/renderer/screens/asset/AssetBalanceSummaryHeader.tsx b/apps/ledger-live-desktop/src/renderer/screens/asset/AssetBalanceSummaryHeader.tsx
@@ -77,6 +77,7 @@ export default function AssetBalanceSummaryHeader({
 
   const startStakeFlow = useStakeFlow();
   const stakeProgramsFeatureFlag = useFeature("stakePrograms");
+
   const listFlag = stakeProgramsFeatureFlag?.params?.list ?? [];
   const stakeProgramsEnabled = stakeProgramsFeatureFlag?.enabled ?? false;
   const availableOnStake = stakeProgramsEnabled && currency && listFlag.includes(currency?.id);

diff --git a/apps/ledger-live-desktop/src/renderer/screens/dashboard/FeaturedButtons.tsx b/apps/ledger-live-desktop/src/renderer/screens/dashboard/FeaturedButtons.tsx
@@ -22,6 +22,7 @@ const FeaturedButtons = () => {
 
   const bannerFeatureFlag = useFeature("portfolioExchangeBanner");
   const stakeProgramsFeatureFlag = useFeature("stakePrograms");
+
   const { enabled: bannerEnabled } = bannerFeatureFlag || { enabled: false };
 
   const stakeDisabled = stakeProgramsFeatureFlag?.params?.list?.length === 0 ?? true;

diff --git a/apps/ledger-live-mobile/src/components/InfoModal.tsx b/apps/ledger-live-mobile/src/components/InfoModal.tsx
@@ -79,7 +79,6 @@ const InfoModal = ({
         {children}
       </View>
     </Flex>
-
     <Flex pt={6}>
       {withCancel ? (
         <Button event={(id || "") + "InfoModalClose"} type={undefined} onPress={onClose} mt={7}>

diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/types/EarnLiveAppNavigator.ts b/apps/ledger-live-mobile/src/components/RootNavigator/types/EarnLiveAppNavigator.ts
@@ -2,11 +2,12 @@ import { ScreenName } from "~/const";
 
 export type EarnLiveAppNavigatorParamList = {
   [ScreenName.Earn]: {
+    accountId?: string;
     action?: "get-funds" | "stake" | "stake-account" | "info-modal";
     currencyId?: string;
-    platform?: string;
-    accountId?: string;
+    learnMore?: string;
     message?: string;
     messageTitle?: string;
+    platform?: string;
   };
 };
diff --git a/apps/ledger-live-mobile/src/navigation/DeeplinksProvider.tsx b/apps/ledger-live-mobile/src/navigation/DeeplinksProvider.tsx
@@ -518,13 +518,15 @@ export const DeeplinksProvider = ({
 
           if (hostname === "earn") {
             if (searchParams.get("action") === "info-modal") {
-              const message = searchParams.get("message") || "";
-              const messageTitle = searchParams.get("messageTitle") || "";
+              const message = searchParams.get("message") ?? "";
+              const messageTitle = searchParams.get("messageTitle") ?? "";
+              const learnMoreLink = searchParams.get("learnMoreLink") ?? "";
 
               dispatch(
                 setEarnInfoModal({
                   message,
                   messageTitle,
+                  learnMoreLink,
                 }),
               );
               return;

diff --git a/apps/ledger-live-mobile/src/reducers/earn.ts b/apps/ledger-live-mobile/src/reducers/earn.ts
@@ -9,9 +9,9 @@ export const INITIAL_STATE: EarnState = {
 };
 
 const handlers: ReducerMap<EarnState, EarnPayload> = {
-  [EarnActionTypes.EARN_INFO_MODAL]: (state, action) => ({
+  [EarnActionTypes.EARN_INFO_MODAL]: (state, action: Action<EarnSetInfoModalPayload>) => ({
     ...state,
-    infoModal: (action as Action<EarnSetInfoModalPayload>)?.payload || {},
+    infoModal: action.payload || {},
   }),
 };
 
@@ -21,6 +21,7 @@ export const exportSelector = storeSelector;
 
 export default handleActions<EarnState, EarnPayload>(handlers, INITIAL_STATE);
 
-export const earnInfoModalSelector = createSelector(storeSelector, (state: EarnState) => {
-  return state.infoModal;
-});
+export const earnInfoModalSelector = createSelector(
+  storeSelector,
+  (state: EarnState) => state.infoModal,
+);
diff --git a/apps/ledger-live-mobile/src/reducers/types.ts b/apps/ledger-live-mobile/src/reducers/types.ts
@@ -296,6 +296,7 @@ export type EarnState = {
   infoModal: {
     message?: string;
     messageTitle?: string;
+    learnMoreLink?: string;
   };
 };
 

diff --git a/apps/ledger-live-mobile/src/screens/PTX/Earn/EarnInfoDrawer.tsx b/apps/ledger-live-mobile/src/screens/PTX/Earn/EarnInfoDrawer.tsx
@@ -1,12 +1,14 @@
+import { Button, Flex, Icons, Link, Text } from "@ledgerhq/native-ui";
 import React, { useCallback, useEffect, useState } from "react";
-import { Button, Flex, Text } from "@ledgerhq/native-ui";
 import { useTranslation } from "react-i18next";
-
+import { Linking } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+import { useTheme } from "styled-components/native";
+import { setEarnInfoModal } from "~/actions/earn";
 import { Track } from "~/analytics";
+import Circle from "~/components/Circle";
 import QueuedDrawer from "~/components/QueuedDrawer";
-import { useDispatch, useSelector } from "react-redux";
 import { earnInfoModalSelector } from "~/reducers/earn";
-import { setEarnInfoModal } from "~/actions/earn";
 
 export function EarnInfoDrawer() {
   const { t } = useTranslation();
@@ -19,31 +21,45 @@ export function EarnInfoDrawer() {
     await dispatch(setEarnInfoModal({}));
     await setModalOpened(false);
   }, [dispatch]);
-  const { message, messageTitle } = useSelector(earnInfoModalSelector);
+  const { message, messageTitle, learnMoreLink } = useSelector(earnInfoModalSelector);
 
   useEffect(() => {
     if (!modalOpened && (message || messageTitle)) {
       openModal();
     }
   }, [openModal, message, messageTitle, modalOpened]);
 
+  const onLearnMorePress = useCallback(() => {
+    if (learnMoreLink) {
+      Linking.openURL(learnMoreLink);
+    }
+  }, [learnMoreLink]);
+
+  const { colors } = useTheme();
+
   return (
     <QueuedDrawer isRequestingToBeOpened={modalOpened} onClose={closeModal}>
-      <Flex rowGap={52}>
+      <Flex rowGap={32}>
         <Track onMount event="Earn Info Modal" />
-        <Flex rowGap={56}>
-          <Flex rowGap={16}>
-            <Text variant="h4" fontFamily="Inter" textAlign="center" fontWeight="bold">
-              {messageTitle}
-            </Text>
-            <Text variant="body" lineHeight="21px" color="neutral.c70" textAlign="center">
-              {message}
-            </Text>
-          </Flex>
+        <Flex rowGap={16} alignItems="center">
+          <Circle size={64} bg={colors.opacityDefault.c05}>
+            <Icons.InformationFill size="L" color={colors.opacityDefault.c80} />
+          </Circle>
+          <Text variant="h4" fontFamily="Inter" textAlign="center" fontWeight="bold">
+            {messageTitle}
+          </Text>
+          <Text variant="body" lineHeight="21px" color="neutral.c70" textAlign="center">
+            {message}
+          </Text>
         </Flex>
         <Button onPress={closeModal} type="main">
           {t("common.close")}
         </Button>
+        {!!learnMoreLink && (
+          <Link type="main" size="large" onPress={onLearnMorePress}>
+            {t("common.learnMore")}
+          </Link>
+        )}
       </Flex>
     </QueuedDrawer>
   );