diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/TabButton/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/TabButton/index.tsx index 6b163a185294..6ef2b63d94a2 100644 --- a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/TabButton/index.tsx +++ b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/components/TabButton/index.tsx @@ -3,25 +3,23 @@ import { useTheme, useFocusEffect } from "@react-navigation/native"; import { View, StyleSheet } from "react-native"; import { Text } from "@ledgerhq/native-ui"; import { BorderlessButton } from "react-native-gesture-handler"; -import type { AppProps, MainProps, SearchProps } from "LLM/features/Web3Hub/types"; +import type { AppProps, MainProps, SearchProps, TabData } from "LLM/features/Web3Hub/types"; import { NavigatorName, ScreenName } from "~/const"; import deviceStorage from "~/logic/storeWrapper"; -import { Web3HubTabType } from "../../screens/Web3HubTabs/components/TabItem"; type Props = { - count?: number; - onclick?: () => void; + onClick?: () => void; navigation: MainProps["navigation"] | SearchProps["navigation"] | AppProps["navigation"]; }; -export default function TabButton({ navigation, onclick }: Props) { +export default function TabButton({ navigation, onClick }: Props) { const { colors } = useTheme(); const [count, setCount] = useState(0); useFocusEffect( useCallback(() => { const getTabCount = async () => { - const tabs = (await deviceStorage.get("web3hub__TabHistory")) as Web3HubTabType[]; + const tabs = (await deviceStorage.get("web3hub__TabHistory")) as TabData[]; setCount(tabs?.length || 0); }; @@ -29,18 +27,15 @@ export default function TabButton({ navigation, onclick }: Props) { }, []), ); - const handleClick = () => { - if (onclick) { - onclick(); - } - + const goToTabs = useCallback(() => { + onClick && onClick(); navigation.push(NavigatorName.Web3Hub, { screen: ScreenName.Web3HubTabs, }); - }; + }, [navigation, onClick]); return ( - + - captureTab(manifest)} /> + captureTab(manifest)} /> } /> diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/Header/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/Header/index.tsx index 196b904304e9..9fd18758f867 100644 --- a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/Header/index.tsx +++ b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/Header/index.tsx @@ -61,7 +61,7 @@ export default function Web3HubMainHeader({ title, navigation, layoutY }: Props) /> - + ); diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubSearch/components/Header/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubSearch/components/Header/index.tsx index 36c8b098c7ef..6aaf191a9829 100644 --- a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubSearch/components/Header/index.tsx +++ b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubSearch/components/Header/index.tsx @@ -56,7 +56,7 @@ export default function Web3HubSearchHeader({ navigation, onSearch, layoutY }: P onChangeText={setSearch} /> - + } /> diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubTabs/components/TabItem/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubTabs/components/TabItem/index.tsx index 2451f115070a..e14ef5a5e8a1 100644 --- a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubTabs/components/TabItem/index.tsx +++ b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubTabs/components/TabItem/index.tsx @@ -1,34 +1,23 @@ +import { Image, StyleSheet, TouchableOpacity, View } from "react-native"; import { Flex, IconsLegacy, Text } from "@ledgerhq/native-ui"; -import type { TabsProps } from "LLM/features/Web3Hub/types"; +import { useTheme } from "@react-navigation/native"; +import type { TabData, TabsProps } from "LLM/features/Web3Hub/types"; import React, { useCallback, useState } from "react"; -import { Image, StyleSheet, TouchableOpacity, View } from "react-native"; -import { Theme } from "~/colors"; import { NavigatorName, ScreenName } from "~/const"; -export type Web3HubTabType = { - id: string; - manifestId: string; - icon: string | null | undefined; - title: string; - previewUri: string; - url: string | URL; -}; - export default function TabItem({ item, - onItemClosePress, - extraData, navigation, + onItemClosePress, }: { - item: Web3HubTabType; - onItemClosePress: (itemId: string) => void; + item: TabData; navigation: TabsProps["navigation"]; - extraData: { colors: Theme["colors"] }; + onItemClosePress: (itemId: string) => void; }) { const [imageLoaded, setImageLoaded] = useState(true); const handleImageLoad = useCallback(() => setImageLoaded(true), []); const handleImageError = useCallback(() => setImageLoaded(false), []); - const { colors } = extraData; + const { colors } = useTheme(); const goToApp = useCallback(() => { navigation.push(NavigatorName.Web3Hub, { @@ -39,9 +28,9 @@ export default function TabItem({ }); }, [navigation, item?.manifestId]); - const handleClosePress = () => { + const handleClosePress = useCallback(() => { onItemClosePress(item.id); - }; + }, [item.id, onItemClosePress]); return ( item.id; const newTab = "New tab"; +type PropRenderItem = { + item: TabData; + extraData?: { + navigation: TabsProps["navigation"]; + handleItemClosePress: (itemId: string) => void; + }; +}; + +const renderItem = ({ item, extraData }: PropRenderItem) => { + if (!extraData) return null; + return ( + + ); +}; + export default function Web3HubTabs({ navigation }: TabsProps) { - const { colors } = useTheme(); const [tabs, setTabs] = useState([]); - const listRef = useRef(null); + const { colors } = useTheme(); const handleItemClosePress = (itemId: string) => { const filteredTabs = tabs.filter(item => item.id !== itemId); deviceStorage.save("web3hub__TabHistory", filteredTabs); setTabs(filteredTabs); }; + const goToSearch = useCallback(() => { navigation.push(NavigatorName.Web3Hub, { screen: ScreenName.Web3HubSearch, }); }, [navigation]); + useEffect(() => { const getTabs = async () => { try { - const tabHistory = - ((await deviceStorage.get("web3hub__TabHistory")) as Web3HubTabType[]) || []; + const tabHistory = ((await deviceStorage.get("web3hub__TabHistory")) as TabData[]) || []; setTabs(tabHistory); } catch (error) { console.error("Error fetching tabs from storage:", error); @@ -62,17 +81,14 @@ export default function Web3HubTabs({ navigation }: TabsProps) { ref={listRef} testID="web3hub-tabs-scroll" keyExtractor={identityFn} - renderItem={({ item }) => ( - - )} + renderItem={renderItem} estimatedItemSize={50} data={tabs} numColumns={2} + extraData={{ + navigation, + handleItemClosePress, + }} /> diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/types.ts b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/types.ts index 5e344ed6794f..3fb86f7da8ca 100644 --- a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/types.ts +++ b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/types.ts @@ -45,3 +45,12 @@ export type RecentlyUsed = { export type DismissedManifests = { [id: string]: boolean; }; + +export type TabData = { + id: string; + manifestId: string; + icon: string | null | undefined; + title: string; + previewUri: string; + url: string | URL; +}; diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/utils/captureTab.ts b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/utils/captureTab.ts index 246de1d388cb..8f7ac76ab883 100644 --- a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/utils/captureTab.ts +++ b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/utils/captureTab.ts @@ -1,7 +1,7 @@ import { AppManifest } from "@ledgerhq/live-common/wallet-api/types"; import { captureScreen } from "react-native-view-shot"; import deviceStorage from "~/logic/storeWrapper"; -import { Web3HubTabType } from "../screens/Web3HubTabs/components/TabItem"; +import { TabData } from "../types"; export const captureTab = async (manifest: AppManifest | undefined) => { try { @@ -13,7 +13,7 @@ export const captureTab = async (manifest: AppManifest | undefined) => { result: "data-uri", }); - let tabHistory = (await deviceStorage.get("web3hub__TabHistory")) as Web3HubTabType[]; + let tabHistory = (await deviceStorage.get("web3hub__TabHistory")) as TabData[]; if (!tabHistory || Object.keys(tabHistory).length === 0) { tabHistory = [];