feat: update earn info modal to add more links and icon

LedgerHQ · Sep 4, 2024 · dccce0e · dccce0e
1 parent 1825bd3
commit dccce0e
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 25 deletions.
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/colors.tsx b/apps/ledger-live-mobile/src/colors.tsx
@@ -71,6 +71,8 @@ export const lightTheme = {
     translucentGrey: "rgba(153, 153, 153, 0.2)",
     lightLiveBg: "#e3dfff",
 
+    darkGrey: "#333333",
+
     errorBg: "#ff0042",
 
     /* PILLS */
@@ -127,6 +129,8 @@ export const darkTheme = {
     translucentGrey: "rgba(153, 153, 153, 0.2)",
     lightLiveBg: "#222635",
 
+    darkGrey: "#CCCCCC",
+
     errorBg: "#ff0042",
 
     /* PILLS */

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,15 @@
+import { Button, Flex, Link, Text } from "@ledgerhq/native-ui";
+import { useTheme } from "@react-navigation/native";
 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 Svg, { Path } from "react-native-svg";
+import { useDispatch, useSelector } from "react-redux";
+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 +22,50 @@ 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 onLearMorePress = 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.lightGrey}>
+            <Svg width={32} height={32} viewBox="0 0 33 34">
+              <Path
+                fill={colors.darkGrey}
+                d="M0.399902 16.9999C0.399902 8.09167 7.60811 0.899902 16.4999 0.899902C25.3924 0.899902 32.5999 8.10739 32.5999 16.9999C32.5999 25.8924 25.3924 33.0999 16.4999 33.0999C7.59167 33.0999 0.399902 25.8917 0.399902 16.9999ZM16.4836 9.23325L16.4751 9.23327L16.4669 9.23325C16.436 9.23325 16.4054 9.23452 16.3752 9.23702C15.5854 9.29214 14.9669 9.94551 14.9669 10.7499C14.9669 11.5455 15.6145 12.2666 16.4836 12.2666C16.9294 12.2666 17.3024 12.0659 17.551 11.8173C17.7995 11.5688 18.0002 11.1958 18.0002 10.7499C18.0002 9.90079 17.3275 9.29911 16.5899 9.23832C16.5549 9.23497 16.5194 9.23325 16.4836 9.23325ZM17.6002 16.9999C17.6002 16.3924 17.1077 15.8999 16.5002 15.8999C15.8927 15.8999 15.4002 16.3924 15.4002 16.9999V25.3333C15.4002 25.9408 15.8927 26.4333 16.5002 26.4333C17.1077 26.4333 17.6002 25.9408 17.6002 25.3333V16.9999Z"
+              />
+            </Svg>
+          </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={onLearMorePress}>
+            {t("common.learnMore")}
+          </Link>
+        )}
       </Flex>
     </QueuedDrawer>
   );