From 26c1db8491b54c9ff81acdb247a7fab78cd39f5c Mon Sep 17 00:00:00 2001 From: nparigi-ledger Date: Tue, 4 Oct 2022 14:15:58 +0200 Subject: [PATCH 1/5] Wip tab navigator --- .../RootNavigator/PortfolioNavigator.tsx | 11 +- .../RootNavigator/WalletTabNavigator.tsx | 106 ++++++++++++++++++ .../src/const/navigation.ts | 2 + 3 files changed, 112 insertions(+), 7 deletions(-) create mode 100644 apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/PortfolioNavigator.tsx b/apps/ledger-live-mobile/src/components/RootNavigator/PortfolioNavigator.tsx index 6f807bf311e2..02c39820547b 100644 --- a/apps/ledger-live-mobile/src/components/RootNavigator/PortfolioNavigator.tsx +++ b/apps/ledger-live-mobile/src/components/RootNavigator/PortfolioNavigator.tsx @@ -11,6 +11,7 @@ import AccountsNavigator from "./AccountsNavigator"; import { getStackNavigatorConfig } from "../../navigation/navigatorConfig"; import { readOnlyModeEnabledSelector } from "../../reducers/settings"; import { accountsSelector } from "../../reducers/accounts"; +import WalletTabNavigator from "./WalletTabNavigator"; export default function PortfolioNavigator() { const { colors } = useTheme(); @@ -24,16 +25,12 @@ export default function PortfolioNavigator() { return ( p.theme.colors.palette.neutral.c40}; + background-color: transparent; +`; + +function TabBar({ state, descriptors, navigation }: MaterialTopTabBarProps) { + return ( + + + {state.routes.map((route, index) => { + const { options } = descriptors[route.key]; + const label = options.title; + + const isActive = state.index === index; + + const onPress = () => { + const event = navigation.emit({ + type: "tabPress", + target: route.key, + canPreventDefault: true, + }); + + if (!isActive && !event.defaultPrevented) { + navigation.navigate(route.name); + } + }; + + return ( + + ); + })} + + + ); +} + +const TestNftGallery = () => { + console.log("Test3red"); + return ; +}; + +export default function WalletTabNavigator() { + const { colors } = useTheme(); + const { t } = useTranslation(); + return ( + } + screenOptions={{ + tabBarStyle: { backgroundColor: "red" }, + }} + style={{ backgroundColor: "transparent" }} + sceneContainerStyle={{ backgroundColor: "transparent" }} + tabBarOptions={{ style: { backgroundColor: "transparent" } }} + // lazy + lazyPlaceholder={() => { + console.log("PlaceHolderred"); + return ; + }} + > + + + + ); +} diff --git a/apps/ledger-live-mobile/src/const/navigation.ts b/apps/ledger-live-mobile/src/const/navigation.ts index ec35bb0985c8..babd41952adb 100644 --- a/apps/ledger-live-mobile/src/const/navigation.ts +++ b/apps/ledger-live-mobile/src/const/navigation.ts @@ -165,6 +165,7 @@ export const ScreenName = { VoteValidation: "VoteValidation", VoteValidationError: "VoteValidationError", VoteValidationSuccess: "VoteValidationSuccess", + WalletNftGallery: "WalletNftGallery", // celo CeloRegistrationValidationSuccess: "CeloRegistrationValidationSuccess", @@ -523,6 +524,7 @@ export const NavigatorName = { CeloWithdrawFlow: "CeloWithdrawFlow", // Tab Main: "Main", + WalletTab: "WalletTabNavigator", // Root RootNavigator: "RootNavigator", Discover: "Discover", From ae7d558fcbde1c76e9979aa13ccfc4960d4bad78 Mon Sep 17 00:00:00 2001 From: nparigi-ledger Date: Tue, 4 Oct 2022 16:44:51 +0200 Subject: [PATCH 2/5] Customize tab navigator style + new (empty) wallet nft gallery screen --- .../RootNavigator/PortfolioNavigator.tsx | 11 +-- .../RootNavigator/WalletTabNavigator.tsx | 79 +++++++++++-------- .../src/locales/en/common.json | 6 ++ .../screens/Nft/WalletNftGallery/index.tsx | 9 +++ 4 files changed, 65 insertions(+), 40 deletions(-) create mode 100644 apps/ledger-live-mobile/src/screens/Nft/WalletNftGallery/index.tsx diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/PortfolioNavigator.tsx b/apps/ledger-live-mobile/src/components/RootNavigator/PortfolioNavigator.tsx index 02c39820547b..958ba63c639f 100644 --- a/apps/ledger-live-mobile/src/components/RootNavigator/PortfolioNavigator.tsx +++ b/apps/ledger-live-mobile/src/components/RootNavigator/PortfolioNavigator.tsx @@ -1,16 +1,11 @@ import React, { useMemo } from "react"; -import { useSelector } from "react-redux"; import { createStackNavigator } from "@react-navigation/stack"; import { useTheme } from "styled-components/native"; -import { NavigatorName, ScreenName } from "../../const"; -import Portfolio from "../../screens/Portfolio"; -// eslint-disable-next-line import/no-cycle -import ReadOnlyPortfolio from "../../screens/Portfolio/ReadOnly"; +import { NavigatorName } from "../../const"; // eslint-disable-next-line import/no-cycle import AccountsNavigator from "./AccountsNavigator"; import { getStackNavigatorConfig } from "../../navigation/navigatorConfig"; -import { readOnlyModeEnabledSelector } from "../../reducers/settings"; -import { accountsSelector } from "../../reducers/accounts"; +// eslint-disable-next-line import/no-cycle import WalletTabNavigator from "./WalletTabNavigator"; export default function PortfolioNavigator() { @@ -19,8 +14,6 @@ export default function PortfolioNavigator() { () => getStackNavigatorConfig(colors, true), [colors], ); - const readOnlyModeEnabled = useSelector(readOnlyModeEnabledSelector); - const accounts = useSelector(accountsSelector); return ( - + {state.routes.map((route, index) => { const { options } = descriptors[route.key]; const label = options.title; @@ -51,31 +57,39 @@ function TabBar({ state, descriptors, navigation }: MaterialTopTabBarProps) { }; return ( - + > + + {label} + + ); })} - + ); } -const TestNftGallery = () => { - console.log("Test3red"); - return ; -}; - export default function WalletTabNavigator() { - const { colors } = useTheme(); + const readOnlyModeEnabled = useSelector(readOnlyModeEnabledSelector); + const accounts = useSelector(accountsSelector); + const { t } = useTranslation(); return ( + // } + tabBar={(props: MaterialTopTabBarProps) => } screenOptions={{ tabBarStyle: { backgroundColor: "red" }, }} @@ -83,24 +97,27 @@ export default function WalletTabNavigator() { sceneContainerStyle={{ backgroundColor: "transparent" }} tabBarOptions={{ style: { backgroundColor: "transparent" } }} // lazy - lazyPlaceholder={() => { - console.log("PlaceHolderred"); - return ; - }} + lazy={true} > + // ); } diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json index ee4ba0596bd5..65a79100caed 100644 --- a/apps/ledger-live-mobile/src/locales/en/common.json +++ b/apps/ledger-live-mobile/src/locales/en/common.json @@ -5131,5 +5131,11 @@ "title": "Getting started", "description": "Click here to finish setting up your {{productName}} with Ledger Live" } + }, + "wallet": { + "tabs": { + "crypto": "Crypto", + "nft": "NFTs" + } } } \ No newline at end of file diff --git a/apps/ledger-live-mobile/src/screens/Nft/WalletNftGallery/index.tsx b/apps/ledger-live-mobile/src/screens/Nft/WalletNftGallery/index.tsx new file mode 100644 index 000000000000..dc53baf4590e --- /dev/null +++ b/apps/ledger-live-mobile/src/screens/Nft/WalletNftGallery/index.tsx @@ -0,0 +1,9 @@ +import { Box } from "@ledgerhq/native-ui"; +import React from "react"; + +const WalletNftGallery = () => { + console.log("WalletNftGallery screen"); + return ; +}; + +export default WalletNftGallery; From 1cca6bec66b5dfc3b916d086f3f2b3f271000684 Mon Sep 17 00:00:00 2001 From: nparigi-ledger Date: Tue, 4 Oct 2022 16:59:34 +0200 Subject: [PATCH 3/5] tab bavigator initial route --- .../src/components/RootNavigator/WalletTabNavigator.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx b/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx index 7858bf522504..cb9eee2a56f5 100644 --- a/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx +++ b/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx @@ -89,6 +89,7 @@ export default function WalletTabNavigator() { return ( // } screenOptions={{ tabBarStyle: { backgroundColor: "red" }, From 329e665f10bd03d87cb444fe1872f15223801724 Mon Sep 17 00:00:00 2001 From: nparigi-ledger Date: Tue, 4 Oct 2022 17:04:30 +0200 Subject: [PATCH 4/5] fix padding --- .../src/components/RootNavigator/WalletTabNavigator.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx b/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx index cb9eee2a56f5..aa6b3f4f2906 100644 --- a/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx +++ b/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx @@ -31,12 +31,7 @@ function TabBar({ state, descriptors, navigation }: MaterialTopTabBarProps) { const { colors } = useTheme(); return ( - + {state.routes.map((route, index) => { const { options } = descriptors[route.key]; From 46fdb8e84d0a6ed70f820690bb9ef33ae8f044c9 Mon Sep 17 00:00:00 2001 From: nparigi-ledger Date: Tue, 4 Oct 2022 17:12:36 +0200 Subject: [PATCH 5/5] fix padding --- .../src/components/RootNavigator/WalletTabNavigator.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx b/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx index aa6b3f4f2906..cb9eee2a56f5 100644 --- a/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx +++ b/apps/ledger-live-mobile/src/components/RootNavigator/WalletTabNavigator.tsx @@ -31,7 +31,12 @@ function TabBar({ state, descriptors, navigation }: MaterialTopTabBarProps) { const { colors } = useTheme(); return ( - + {state.routes.map((route, index) => { const { options } = descriptors[route.key];