adress comments

LedgerHQ · Oct 11, 2024 · 9ab981a · 9ab981a
1 parent b10dd9f
commit 9ab981a
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 51 deletions.
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
@@ -3,44 +3,39 @@ 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);
       };
 
       getTabCount();
     }, []),
   );
 
-  const handleClick = () => {
-    if (onclick) {
-      onclick();
-    }
-
+  const goToTabs = useCallback(() => {
+    onClick && onClick();
     navigation.push(NavigatorName.Web3Hub, {
       screen: ScreenName.Web3HubTabs,
     });
-  };
+  }, [navigation, onClick]);
 
   return (
-    <BorderlessButton onPress={handleClick} activeOpacity={0.5} borderless={false}>
+    <BorderlessButton onPress={goToTabs} activeOpacity={0.5} borderless={false}>
       <View
         accessible
         accessibilityRole="button"

diff --git a/...r-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubApp/components/Header/index.tsx b/...r-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubApp/components/Header/index.tsx
@@ -65,7 +65,7 @@ export default function Web3HubAppHeader({
             )}
           </Flex>
 
-          <TabButton count={2} navigation={navigation} onclick={() => captureTab(manifest)} />
+          <TabButton navigation={navigation} onClick={() => captureTab(manifest)} />
         </Flex>
       }
     />

diff --git a/...-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/Header/index.tsx b/...-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/Header/index.tsx
@@ -61,7 +61,7 @@ export default function Web3HubMainHeader({ title, navigation, layoutY }: Props)
             />
           </View>
         </TouchableOpacity>
-        <TabButton count={2} navigation={navigation} />
+        <TabButton navigation={navigation} />
       </Flex>
     </AnimatedBar>
   );

diff --git a/...ive-mobile/src/newArch/features/Web3Hub/screens/Web3HubSearch/components/Header/index.tsx b/...ive-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}
             />
           </Flex>
-          <TabButton count={2} navigation={navigation} />
+          <TabButton navigation={navigation} />
         </Flex>
       }
     />

diff --git a/...live-mobile/src/newArch/features/Web3Hub/screens/Web3HubTabs/components/TabItem/index.tsx b/...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 (
     <TouchableOpacity

diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubTabs/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubTabs/index.tsx
@@ -8,35 +8,54 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { NavigatorName, ScreenName } from "~/const";
 import Header from "./components/Header";
 import deviceStorage from "~/logic/storeWrapper";
-import TabItem, { Web3HubTabType } from "./components/TabItem";
+import TabItem from "./components/TabItem";
 
 const edges = ["top", "bottom", "left", "right"] as const;
 
 const identityFn = (item: TabData) => 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 (
+    <TabItem
+      item={item}
+      navigation={extraData?.navigation}
+      onItemClosePress={extraData?.handleItemClosePress}
+    />
+  );
+};
+
 export default function Web3HubTabs({ navigation }: TabsProps) {
-  const { colors } = useTheme();
   const [tabs, setTabs] = useState<TabData[]>([]);
-
   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 }) => (
-            <TabItem
-              item={item}
-              extraData={{ colors: colors }}
-              navigation={navigation}
-              onItemClosePress={handleItemClosePress}
-            />
-          )}
+          renderItem={renderItem}
           estimatedItemSize={50}
           data={tabs}
           numColumns={2}
+          extraData={{
+            navigation,
+            handleItemClosePress,
+          }}
         />
       </View>
 

diff --git 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
@@ -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 = [];