diff --git a/.changeset/cool-dingos-explode.md b/.changeset/cool-dingos-explode.md new file mode 100644 index 00000000000..5dd09679f92 --- /dev/null +++ b/.changeset/cool-dingos-explode.md @@ -0,0 +1,5 @@ +--- +"live-mobile": patch +--- + +Create a new drawer component on add account on assets screen. This new drawer has new UI and an entry point to walletSync. This entrypoint is hidden under a feature flag diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json index 565081e1ae9..1e637450d39 100644 --- a/apps/ledger-live-mobile/src/locales/en/common.json +++ b/apps/ledger-live-mobile/src/locales/en/common.json @@ -2288,6 +2288,18 @@ "import": { "title": "Import from desktop", "description": "Import asset from Ledger Live Desktop" + }, + "assetsScreen": { + "drawerTitle": "Add another account", + "drawerSubTitle": "Add your assets using your Ledger, or import them directly from your Ledger Live Desktop app.", + "add": { + "title": "Add with your Ledger", + "description": "Create or import your assets using your Ledger device" + }, + "walletSync": { + "title": "Import via another Ledger Live app", + "description": "Activate Ledger Sync" + } } }, "byteSize": { diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/drawers/addAccount/AddAccountDrawerRow.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/drawers/addAccount/AddAccountDrawerRow.tsx new file mode 100644 index 00000000000..aa319a04e3a --- /dev/null +++ b/apps/ledger-live-mobile/src/newArch/features/WalletSync/drawers/addAccount/AddAccountDrawerRow.tsx @@ -0,0 +1,47 @@ +import { Flex, Text } from "@ledgerhq/native-ui"; +import React from "react"; +import Touchable from "~/components/Touchable"; +import styled from "styled-components/native"; + +const Card = styled(Flex)` + background-color: ${p => p.theme.colors.opacityDefault.c05}; + border-radius: 8px; + padding: 16px; + align-items: center; + gap: 12px; + flex-direction: row; + align-self: stretch; +`; + +const CardTitle = styled(Text)` + font-size: 16px; + color: ${p => p.theme.colors.neutral.c100}; +`; + +const CardDescription = styled(Text)` + font-size: 14px; + color: ${p => p.theme.colors.neutral.c70}; + line-height: 18.2px; +`; + +type AddAccountDrawerRowProps = { + title: string; + description: string; + icon?: React.ReactNode; + onPress?: React.ComponentProps["onPress"]; +}; + +const AddAccountDrawerRow = ({ title, description, icon, onPress }: AddAccountDrawerRowProps) => { + return ( + + + {icon} + + {title} + {description} + + + + ); +}; +export default AddAccountDrawerRow; diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/drawers/addAccount/index.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/drawers/addAccount/index.tsx new file mode 100644 index 00000000000..cfeabc737e1 --- /dev/null +++ b/apps/ledger-live-mobile/src/newArch/features/WalletSync/drawers/addAccount/index.tsx @@ -0,0 +1,90 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import React from "react"; +import useAddAccountDrawer from "LLM/features/WalletSync/hooks/useAddAccountDrawer"; +import DummyDrawer from "../DummyDrawer"; +import AddAccountDrawerRow from "./AddAccountDrawerRow"; +import QueuedDrawer from "~/components/QueuedDrawer"; +import { useTranslation } from "react-i18next"; +import { TrackScreen } from "~/analytics"; +import { Flex, Icons, Text } from "@ledgerhq/native-ui"; + +/** This drawer component should be only used in assets screen */ + +type AddAccountDrawerProps = { + isOpened: boolean; + onClose: () => void; + reopenDrawer: () => void; +}; + +const AddAccountDrawer = ({ isOpened, onClose, reopenDrawer }: AddAccountDrawerProps) => { + const { t } = useTranslation(); + const rows = []; + + const { + isWalletSyncEnabled, + isReadOnlyModeEnabled, + isAddAccountDrawerVisible, + isWalletSyncDrawerVisible, + onClickAdd, + onClickImport, + onClickWalletSync, + onCloseAddAccountDrawer, + onCloseWalletSyncDrawer, + } = useAddAccountDrawer({ isOpened, onClose, reopenDrawer }); + + if (!isReadOnlyModeEnabled) { + rows.push({ + titleKey: "addAccountsModal.assetsScreen.add.title", + descriptionKey: "addAccountsModal.assetsScreen.add.description", + onPress: onClickAdd, + icon: , + }); + } + + if (isWalletSyncEnabled) { + rows.push({ + titleKey: "addAccountsModal.assetsScreen.walletSync.title", + descriptionKey: "addAccountsModal.assetsScreen.walletSync.description", + onPress: onClickWalletSync, + icon: , + }); + } else { + rows.push({ + titleKey: "addAccountsModal.import.title", + descriptionKey: "addAccountsModal.import.description", + onPress: onClickImport, + icon: , + }); + } + + return ( + <> + + + + {t("addAccountsModal.assetsScreen.drawerTitle")} + + + {t("addAccountsModal.assetsScreen.drawerSubTitle")} + + + {rows.map((row, index) => ( + + ))} + + + + + ); +}; + +export default AddAccountDrawer; diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/.gitkeep b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/.gitkeep deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useAddAccountDrawer.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useAddAccountDrawer.tsx new file mode 100644 index 00000000000..3450fc68f5f --- /dev/null +++ b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useAddAccountDrawer.tsx @@ -0,0 +1,73 @@ +import { useSelector } from "react-redux"; +import { BaseNavigation } from "~/components/RootNavigator/types/helpers"; +import { readOnlyModeEnabledSelector } from "~/reducers/settings"; +import { useNavigation } from "@react-navigation/native"; +import { NavigatorName } from "~/const"; +import { useCallback, useState } from "react"; +import { track } from "~/analytics"; +import { useFeature } from "@ledgerhq/live-common/featureFlags/index"; + +type AddAccountDrawerProps = { + isOpened: boolean; + onClose: () => void; + reopenDrawer: () => void; +}; + +const useAddAccountDrawer = ({ isOpened, onClose, reopenDrawer }: AddAccountDrawerProps) => { + const navigation = useNavigation(); + const walletSyncFeatureFlag = useFeature("llmWalletSync"); + + const isReadOnlyModeEnabled = useSelector(readOnlyModeEnabledSelector); + const isWalletSyncEnabled = walletSyncFeatureFlag?.enabled; + + const [isWalletSyncDrawerVisible, setWalletSyncDrawerVisible] = useState(false); + + const trackButtonClick = useCallback((button: string) => { + track("button_clicked", { + button, + drawer: "AddAccountsModal", + }); + }, []); + + const onClickImport = useCallback(() => { + trackButtonClick("Import from Desktop"); + onClose(); + navigation.navigate(NavigatorName.ImportAccounts); + }, [trackButtonClick, navigation, onClose]); + + const onClickAdd = useCallback(() => { + trackButtonClick("With your Ledger"); + onClose(); + navigation.navigate(NavigatorName.AddAccounts); + }, [trackButtonClick, navigation, onClose]); + + const onClickWalletSync = useCallback(() => { + trackButtonClick("With Wallet Sync"); + onClose(); + setWalletSyncDrawerVisible(true); + }, [trackButtonClick, onClose]); + + const onCloseAddAccountDrawer = useCallback(() => { + trackButtonClick("Close 'x'"); + onClose(); + }, [trackButtonClick, onClose]); + + const onCloseWalletSyncDrawer = useCallback(() => { + setWalletSyncDrawerVisible(false); + reopenDrawer(); + }, [setWalletSyncDrawerVisible, reopenDrawer]); + + return { + isWalletSyncEnabled, + isReadOnlyModeEnabled, + isAddAccountDrawerVisible: isOpened, + isWalletSyncDrawerVisible, + onClickAdd, + onClickImport, + onClickWalletSync, + onCloseAddAccountDrawer, + onCloseWalletSyncDrawer, + }; +}; + +export default useAddAccountDrawer; diff --git a/apps/ledger-live-mobile/src/screens/Accounts/AddAccount.tsx b/apps/ledger-live-mobile/src/screens/Accounts/AddAccount.tsx index 85fc3ee6ba1..a580b25588b 100644 --- a/apps/ledger-live-mobile/src/screens/Accounts/AddAccount.tsx +++ b/apps/ledger-live-mobile/src/screens/Accounts/AddAccount.tsx @@ -7,6 +7,7 @@ import Touchable from "~/components/Touchable"; import AddAccountsModal from "../AddAccounts/AddAccountsModal"; import { track } from "~/analytics"; import { BaseNavigation } from "~/components/RootNavigator/types/helpers"; +import AddAccountDrawer from "LLM/features/WalletSync/drawers/addAccount"; function AddAccount({ currencyId }: { currencyId?: string }) { const navigation = useNavigation(); @@ -26,6 +27,10 @@ function AddAccount({ currencyId }: { currencyId?: string }) { setIsAddModalOpened(false); } + function reoponAddModal() { + setIsAddModalOpened(true); + } + return ( - + {currency && isAddModalOpened ? ( + + ) : ( + + )} ); } diff --git a/apps/ledger-live-mobile/src/screens/Assets/index.tsx b/apps/ledger-live-mobile/src/screens/Assets/index.tsx index 3d2b29bfa3a..679783f3180 100644 --- a/apps/ledger-live-mobile/src/screens/Assets/index.tsx +++ b/apps/ledger-live-mobile/src/screens/Assets/index.tsx @@ -18,11 +18,10 @@ import AssetRow, { NavigationProp } from "../WalletCentricAsset/AssetRow"; import Spinning from "~/components/Spinning"; import AssetsNavigationHeader from "./AssetsNavigationHeader"; import globalSyncRefreshControl from "~/components/globalSyncRefreshControl"; -import AddAccountsModal from "../AddAccounts/AddAccountsModal"; -import { BaseNavigation } from "~/components/RootNavigator/types/helpers"; import { Asset } from "~/types/asset"; import { ScreenName } from "~/const"; import { blacklistedTokenIdsSelector } from "~/reducers/settings"; +import AddAccountDrawer from "LLM/features/WalletSync/drawers/addAccount"; const List = globalSyncRefreshControl>(FlatList); @@ -66,6 +65,8 @@ function Assets() { const closeAddModal = useCallback(() => setAddModalOpened(false), [setAddModalOpened]); + const reoponAddModal = useCallback(() => setAddModalOpened(true), [setAddModalOpened]); + const renderItem = useCallback( ({ item }: { item: Asset }) => ( @@ -117,10 +118,10 @@ function Assets() { /> -