LIVE-3253 - LLM - add referral program discover card

LedgerHQ · Oct 5, 2022 · f255b25 · f255b25
1 parent c7e40bf
commit f255b25
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 10 deletions.
diff --git a/.changeset/light-hotels-talk.md b/.changeset/light-hotels-talk.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+LLM - Add discover card for referral program
diff --git a/.changeset/tender-buckets-learn.md b/.changeset/tender-buckets-learn.md
@@ -0,0 +1,5 @@
+---
+"@ledgerhq/types-live": patch
+---
+
+Types - Add new feature flag FeatureId type
diff --git a/apps/ledger-live-mobile/src/images/illustration/Dark/_ReferralProgram.png b/apps/ledger-live-mobile/src/images/illustration/Dark/_ReferralProgram.png
diff --git a/apps/ledger-live-mobile/src/images/illustration/Light/_ReferralProgram.png b/apps/ledger-live-mobile/src/images/illustration/Light/_ReferralProgram.png
diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
@@ -1002,24 +1002,28 @@
   },
   "discover": {
     "title": "Discover",
-    "desc": "Explore the world of web3 included in Ledger Live",
+    "desc": "Explore the world of Web3 securely",
     "link": "Tell me more",
     "sections": {
       "learn": {
         "title": "Learn",
-        "desc": "Learn about crypto, NFTs, digital security and more"
+        "desc": "Learn about crypto, and more from experts for free."
       },
       "ledgerApps": {
         "title": "Apps",
         "desc": "Explore Ledger's partner apps all in one place"
       },
       "earn": {
         "title": "Earn",
-        "desc": "Earn passive income and grow your crypto assets"
+        "desc": "Grow your crypto through staking and lending."
       },
       "mint": {
         "title": "Mint",
-        "desc": "Mint NFTs from exclusive collaborations on [ L ] Market"
+        "desc": "Mint NFTs from exclusive campaigns on [L] Market."
+      },
+      "referralProgram": {
+        "title": "Refer a friend",
+        "desc": "Earn $10 in BTC when your friend buys a Ledger. "
       }
     },
     "comingSoon": "Coming soon",
@@ -5206,4 +5210,4 @@
       "description": "Click here to finish setting up your {{productName}} with Ledger Live"
     }
   }
-}
+}
diff --git a/apps/ledger-live-mobile/src/screens/Discover/index.tsx b/apps/ledger-live-mobile/src/screens/Discover/index.tsx
@@ -24,6 +24,10 @@ const appsImg = require("../../images/illustration/Shared/_Apps.png");
 const earnImg = require("../../images/illustration/Shared/_Earn.png");
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const mintImg = require("../../images/illustration/Shared/_Mint.png");
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const referralImgDark = require("../../images/illustration/Dark/_ReferralProgram.png");
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const referralImgLight = require("../../images/illustration/Light/_ReferralProgram.png");
 
 const StyledSafeAreaView = styled(TabBarSafeAreaView)`
   background-color: ${({ theme }) => theme.colors.background.main};
@@ -34,6 +38,7 @@ function Discover() {
   const navigation = useNavigation();
 
   const learn = useFeature("learn");
+  const referralProgramConfig = useFeature("referralProgramDiscoverCard");
 
   const readOnlyTrack = useCallback((bannerName: string) => {
     track("banner_clicked", {
@@ -132,8 +137,31 @@ function Discover() {
             />
           ),
         },
+        ...(referralProgramConfig?.enabled && referralProgramConfig?.params.url
+          ? [
+              {
+                title: t("discover.sections.referralProgram.title"),
+                subTitle: t("discover.sections.referralProgram.desc"),
+                onPress: () => {
+                  readOnlyTrack("referralProgram");
+                  track("Discover - Refer Program - OpenUrl", {
+                    url: referralProgramConfig?.params.url,
+                  });
+                  Linking.openURL(referralProgramConfig?.params.url);
+                },
+                disabled: false,
+                Image: (
+                  <Illustration
+                    size={130}
+                    darkSource={referralImgDark}
+                    lightSource={referralImgLight}
+                  />
+                ),
+              },
+            ]
+          : []),
       ].sort((a, b) => (b.disabled ? -1 : 0)),
-    [learn?.enabled, navigation, readOnlyTrack, t],
+    [learn?.enabled, referralProgramConfig, navigation, readOnlyTrack, t],
   );
 
   const { setSource, setScreen } = useContext(AnalyticsContext);
@@ -155,13 +183,12 @@ function Discover() {
         contentContainerStyle={{ paddingBottom: TAB_BAR_SAFE_HEIGHT }}
       >
         <Flex p={8} mt={8} flexDirection="row">
-          <Flex flex={1} justyfyContent="flex-start" alignItems="flex-start">
+          <Flex flex={1} justifyContent="flex-start" alignItems="flex-start">
             <Text variant="h1">{t("discover.title")}</Text>
             <Text variant="body" mb={4} mt={4} color="neutral.c70">
               {t("discover.desc")}
             </Text>
           </Flex>
-          <Flex flex={1} />
         </Flex>
         {featuresList.map(
           ({ title, subTitle, onPress, disabled, labelBadge, Image }, i) => (

diff --git a/libs/ledgerjs/packages/types-live/README.md b/libs/ledgerjs/packages/types-live/README.md
@@ -482,7 +482,7 @@ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 
 Add others with union (e.g. "learn" | "market" | "foo")
 
-Type: (`"learn"` | `"pushNotifications"` | `"llmUsbFirmwareUpdate"` | `"ratings"` | `"counterValue"` | `"deviceLocalization"` | `"buyDeviceFromLive"` | `"ptxSmartRouting"` | `"currencyOsmosis"` | `"currencyOsmosisMobile"` | `"currencyFantom"` | `"currencyMoonbeam"` | `"currencyCronos"` | `"currencySongbird"` | `"currencyFlare"` | `"currencyFantomMobile"` | `"currencyMoonbeamMobile"` | `"currencyCronosMobile"` | `"currencySongbirdMobile"` | `"currencyFlareMobile"` | `"ptxSmartRoutingMobile"` | `"mockFeature"` | `"walletConnectLiveApp"` | `"customImage"`)
+Type: (`"learn"` | `"pushNotifications"` | `"llmUsbFirmwareUpdate"` | `"ratings"` | `"counterValue"` | `"deviceLocalization"` | `"buyDeviceFromLive"` | `"ptxSmartRouting"` | `"currencyOsmosis"` | `"currencyOsmosisMobile"` | `"currencyFantom"` | `"currencyMoonbeam"` | `"currencyCronos"` | `"currencySongbird"` | `"currencyFlare"` | `"currencyFantomMobile"` | `"currencyMoonbeamMobile"` | `"currencyCronosMobile"` | `"currencySongbirdMobile"` | `"currencyFlareMobile"` | `"ptxSmartRoutingMobile"` | `"mockFeature"` | `"walletConnectLiveApp"` | `"customImage"` | `"referralProgramDiscoverCard"`)
 
 ### Feature
 

diff --git a/libs/ledgerjs/packages/types-live/src/feature.ts b/libs/ledgerjs/packages/types-live/src/feature.ts
@@ -23,7 +23,8 @@ export type FeatureId =
   | "ptxSmartRoutingMobile"
   | "mockFeature"
   | "walletConnectLiveApp"
-  | "customImage";
+  | "customImage"
+  | "referralProgramDiscoverCard";
 
 /**  We use objects instead of direct booleans for potential future improvements
 like feature versioning etc */