From 8c1de2f9debb825b47c99e6fc34a19d73d04c1cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=B4me=20Grellard?= Date: Mon, 18 Sep 2023 10:50:00 +0200 Subject: [PATCH] Feat/llm cex deposit entry points (#4680) * chore(release): :rocket: prepare release [skip ci] * chore(prerelease): :rocket: entering prerelease mode * fix: add changeset * chore(prerelease): :rocket: 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): :rocket: 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 Co-authored-by: ldg-smartling-sa <133769770+ldg-smartling-sa@users.noreply.github.com> --- .changeset/five-monkeys-juggle.md | 5 ++ .../ledger-live-mobile/src/icons/Coinbase.tsx | 23 +++++++++ .../src/locales/en/common.json | 3 +- .../screens/ReceiveFunds/01-SelectCrypto.tsx | 8 +++ .../DepositFromCoinbaseButton.tsx | 51 +++++++++++++++++++ .../src/featureFlags/defaultFeatures.ts | 20 ++++++++ .../packages/types-live/src/cexDeposit.ts | 7 +++ .../packages/types-live/src/feature.ts | 20 ++++++++ .../ledgerjs/packages/types-live/src/index.ts | 1 + .../src/components/Cards/BannerCard/index.tsx | 27 ++++++---- 10 files changed, 153 insertions(+), 12 deletions(-) create mode 100644 .changeset/five-monkeys-juggle.md create mode 100644 apps/ledger-live-mobile/src/icons/Coinbase.tsx create mode 100644 apps/ledger-live-mobile/src/screens/ReceiveFunds/DepositFromCoinbaseButton.tsx create mode 100644 libs/ledgerjs/packages/types-live/src/cexDeposit.ts diff --git a/.changeset/five-monkeys-juggle.md b/.changeset/five-monkeys-juggle.md new file mode 100644 index 000000000000..48ddea74c10f --- /dev/null +++ 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 new file mode 100644 index 000000000000..90ff057cb554 --- /dev/null +++ b/apps/ledger-live-mobile/src/icons/Coinbase.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import Svg, { Path, Defs, Pattern, Use, Image } from "react-native-svg"; + +type Props = { + size?: number; +}; +const SvgComponent = ({ size = 40 }: Props) => ( + + + + + + + + + +); +export default SvgComponent; diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json index e1e6c923dd99..603dfe9d4772 100644 --- 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 index 12682fc16ffb..221c71119283 100644 --- 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={ + + } /> ), [onPressItem], diff --git a/apps/ledger-live-mobile/src/screens/ReceiveFunds/DepositFromCoinbaseButton.tsx b/apps/ledger-live-mobile/src/screens/ReceiveFunds/DepositFromCoinbaseButton.tsx new file mode 100644 index 000000000000..8a78b63af5f3 --- /dev/null +++ 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 ( + + } + hideLeftElementContainer + onPress={onPressDepositFromCex} + /> + + ); +}; + +export default DepositFromCoinbaseButton; diff --git a/libs/ledger-live-common/src/featureFlags/defaultFeatures.ts b/libs/ledger-live-common/src/featureFlags/defaultFeatures.ts index 98997f383867..8fb4d44ba219 100644 --- 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 new file mode 100644 index 000000000000..b17d136feb1b --- /dev/null +++ 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 index 4489a40f8abf..af0c3630bc4e 100644 --- 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 index 7ca1a525c6b3..7310b7fdcef1 100644 --- 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 index a6d51b360c51..1584be06d595 100644 --- 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 ( - - {LeftElement} - + {hideLeftElementContainer ? ( + + {LeftElement} + + ) : ( + LeftElement + )}