Feat/llm cex deposit entry points (#4680)

* chore(release): 🚀 prepare release [skip ci] * chore(prerelease): 🚀 entering prerelease mode * fix: add changeset * chore(prerelease): 🚀 release prerelease [LLD(2.68.1-next.0), LLM(3.31.0)] * Smartling on-demand translation delivery from release (#4651) * File apps/ledger-live-desktop/static/i18n/en/app.json was translated to ar-AE locale * File apps/ledger-live-desktop/static/i18n/en/app.json was translated to zh-CN locale * File apps/ledger-live-desktop/static/i18n/en/app.json was translated to fr-FR locale * File apps/ledger-live-desktop/static/i18n/en/app.json was translated to de-DE locale * File apps/ledger-live-desktop/static/i18n/en/app.json was translated to ja-JP locale * File apps/ledger-live-desktop/static/i18n/en/app.json was translated to ko-KR locale * File apps/ledger-live-desktop/static/i18n/en/app.json was translated to pt-BR locale * File apps/ledger-live-desktop/static/i18n/en/app.json was translated to ru-RU locale * File apps/ledger-live-desktop/static/i18n/en/app.json was translated to es-ES locale * File apps/ledger-live-desktop/static/i18n/en/app.json was translated to tr-TR locale * chore: update RELEASE_NOTES * chore(release): 🚀 prepare release [skip ci] * feat(llm/llc/native-ui): added deposit from cex entry point on the select crypto screen * undo some changes * fixed type issues * lint fixed * lint fixed * Add changeset --------- Co-authored-by: live-github-bot[bot] <105061298+live-github-bot[bot]@users.noreply.github.com> Co-authored-by: hzheng-ledger <[email protected]> Co-authored-by: ldg-smartling-sa <[email protected]>
LedgerHQ · Sep 18, 2023 · 8c1de2f · 8c1de2f · vercel · Sep 18, 2023
1 parent 6eea7de
commit 8c1de2f
Show file tree

Hide file tree

Showing 10 changed files with 153 additions and 12 deletions.
diff --git a/.changeset/five-monkeys-juggle.md b/.changeset/five-monkeys-juggle.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Add Entry point to CEX with feature flag
diff --git a/apps/ledger-live-mobile/src/icons/Coinbase.tsx b/apps/ledger-live-mobile/src/icons/Coinbase.tsx
diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
@@ -2928,7 +2928,8 @@
         "account": "{{count}} account",
         "account_plural": "{{count}} accounts",
         "subtitle": "This must match the network chosen on the wallet or exchange transferring the crypto.",
-        "bannerTitle": "Make sure to select the right network. Learn how."
+        "bannerTitle": "Make sure to select the right network. Learn how.",
+        "depositFromCexBannerTitle": "Deposit crypto from your Coinbase account"
       },
       "stepperHeader": {
         "range": "Step {{currentStep}} of {{totalSteps}}",

diff --git a/apps/ledger-live-mobile/src/screens/ReceiveFunds/01-SelectCrypto.tsx b/apps/ledger-live-mobile/src/screens/ReceiveFunds/01-SelectCrypto.tsx
@@ -22,6 +22,8 @@ import { getEnv } from "@ledgerhq/live-env";
 import { findAccountByCurrency } from "../../logic/deposit";
 
 import { useGroupedCurrenciesByProvider } from "@ledgerhq/live-common/deposit/index";
+import DepositFromCoinbaseButton from "./DepositFromCoinbaseButton";
+import { CexDepositEntryPointsLocationsMobile } from "@ledgerhq/types-live/lib/cexDeposit";
 
 const SEARCH_KEYS = getEnv("CRYPTO_ASSET_SEARCH_KEYS");
 
@@ -114,6 +116,12 @@ export default function AddAccountsSelectCrypto({ navigation, route }: Props) {
         keyExtractor={keyExtractor}
         showsVerticalScrollIndicator={false}
         keyboardDismissMode="on-drag"
+        ListHeaderComponent={
+          <DepositFromCoinbaseButton
+            location={CexDepositEntryPointsLocationsMobile.selectCrypto}
+            source="Choose a crypto to secure"
+          />
+        }
       />
     ),
     [onPressItem],

diff --git a/apps/ledger-live-mobile/src/screens/ReceiveFunds/DepositFromCoinbaseButton.tsx b/apps/ledger-live-mobile/src/screens/ReceiveFunds/DepositFromCoinbaseButton.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { Linking } from "react-native";
+import { useTranslation } from "react-i18next";
+import { Flex, BannerCard } from "@ledgerhq/native-ui";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { CexDepositEntryPointsLocationsMobile } from "@ledgerhq/types-live/lib/cexDeposit";
+import { track } from "../../analytics";
+import CoinbaseIcon from "../../icons/Coinbase";
+
+type Props = {
+  location: CexDepositEntryPointsLocationsMobile;
+  source: string;
+};
+const DepositFromCoinbaseButton = ({ location, source }: Props) => {
+  const { t } = useTranslation();
+  const cexDepositEntryPointsMobile = useFeature("cexDepositEntryPointsMobile");
+
+  const onPressDepositFromCex = () => {
+    const path = cexDepositEntryPointsMobile?.params?.path;
+
+    if (path) {
+      Linking.canOpenURL(path).then(() => Linking.openURL(path));
+      track("button_clicked", {
+        button: "deposit from coinbase",
+        page: source,
+      });
+    }
+  };
+
+  if (
+    !cexDepositEntryPointsMobile?.enabled ||
+    !cexDepositEntryPointsMobile?.params?.locations?.[location] ||
+    !cexDepositEntryPointsMobile?.params?.path
+  ) {
+    return null;
+  }
+
+  return (
+    <Flex mx={6} mb={3}>
+      <BannerCard
+        typeOfRightIcon="arrow"
+        title={t("transfer.receive.selectNetwork.depositFromCexBannerTitle")}
+        LeftElement={<CoinbaseIcon />}
+        hideLeftElementContainer
+        onPress={onPressDepositFromCex}
+      />
+    </Flex>
+  );
+};
+
+export default DepositFromCoinbaseButton;
diff --git a/libs/ledger-live-common/src/featureFlags/defaultFeatures.ts b/libs/ledger-live-common/src/featureFlags/defaultFeatures.ts
@@ -348,4 +348,24 @@ export const DEFAULT_FEATURES: Features = {
         "https://form.typeform.com/to/Jo7gqcB4?typeform-medium=embed-sdk&typeform-medium-version=next&typeform-embed=popup-blank",
     },
   },
+
+  cexDepositEntryPointsDesktop: {
+    enabled: false,
+    params: {
+      path: "/discover/ledger-cex-deposit",
+      locations: {
+        selectCrypto: true,
+      },
+    },
+  },
+
+  cexDepositEntryPointsMobile: {
+    enabled: false,
+    params: {
+      path: "/discover/ledger-cex-deposit",
+      locations: {
+        selectCrypto: true,
+      },
+    },
+  },
 };
diff --git a/libs/ledgerjs/packages/types-live/src/cexDeposit.ts b/libs/ledgerjs/packages/types-live/src/cexDeposit.ts
@@ -0,0 +1,7 @@
+export enum CexDepositEntryPointsLocationsDesktop {
+  selectCrypto = "selectCrypto",
+}
+
+export enum CexDepositEntryPointsLocationsMobile {
+  selectCrypto = "selectCrypto",
+}
diff --git a/libs/ledgerjs/packages/types-live/src/feature.ts b/libs/ledgerjs/packages/types-live/src/feature.ts
@@ -1,3 +1,7 @@
+import {
+  CexDepositEntryPointsLocationsDesktop,
+  CexDepositEntryPointsLocationsMobile,
+} from "./cexDeposit";
 import { ChainwatchNetwork } from "./chainwatch";
 import { StorylyInstanceID } from "./storyly";
 
@@ -169,6 +173,8 @@ export type Features = CurrencyFeatures & {
   transactionsAlerts: Feature_TransactionsAlerts;
   listAppsV2: Feature_ListAppsV2;
   llmWalletQuickActions: Feature_LlmWalletQuickActions;
+  cexDepositEntryPointsDesktop: Feature_CexDepositEntryPointsDesktop;
+  cexDepositEntryPointsMobile: Feature_CexDepositEntryPointsMobile;
 };
 
 /**
@@ -415,6 +421,20 @@ export type Feature_RatingsPrompt = Feature<{
   typeform_url: string;
 }>;
 
+export type Feature_CexDepositEntryPointsDesktop = Feature<{
+  path: string;
+  locations: {
+    [key in CexDepositEntryPointsLocationsDesktop]: boolean;
+  };
+}>;
+
+export type Feature_CexDepositEntryPointsMobile = Feature<{
+  path: string;
+  locations: {
+    [key in CexDepositEntryPointsLocationsMobile]: boolean;
+  };
+}>;
+
 export type Feature_LlmNewFirmwareUpdateUx = DefaultFeature;
 export type Feature_CounterValue = DefaultFeature;
 export type Feature_MockFeature = DefaultFeature;

diff --git a/libs/ledgerjs/packages/types-live/src/index.ts b/libs/ledgerjs/packages/types-live/src/index.ts
@@ -14,3 +14,4 @@ export * from "./postOnboarding";
 export * from "./storyly";
 export * from "./chainwatch";
 export * from "./messages";
+export * from "./cexDeposit";
diff --git a/libs/ui/packages/native/src/components/Cards/BannerCard/index.tsx b/libs/ui/packages/native/src/components/Cards/BannerCard/index.tsx
@@ -10,6 +10,7 @@ export type CardProps = TouchableOpacityProps & {
   title?: string;
   onPressDismiss?: () => void;
   LeftElement?: JSX.Element;
+  hideLeftElementContainer?: boolean;
   typeOfRightIcon: "arrow" | "close";
 };
 
@@ -57,20 +58,24 @@ export const CloseButton = ({ onPressDismiss }: CloseProps) => {
 };
 
 const CardContainer = (props: CardProps): React.ReactElement => {
-  const { onPressDismiss, LeftElement, title, typeOfRightIcon } = props;
+  const { onPressDismiss, LeftElement, hideLeftElementContainer, title, typeOfRightIcon } = props;
 
   return (
     <Container {...props}>
-      <Flex
-        borderRadius={50}
-        height={40}
-        width={40}
-        alignItems="center"
-        justifyContent="center"
-        bg={"opacityDefault.c05"}
-      >
-        {LeftElement}
-      </Flex>
+      {hideLeftElementContainer ? (
+        <Flex
+          borderRadius={50}
+          height={40}
+          width={40}
+          alignItems="center"
+          justifyContent="center"
+          bg={"opacityDefault.c05"}
+        >
+          {LeftElement}
+        </Flex>
+      ) : (
+        LeftElement
+      )}
 
       <Text
         mx={4}