From 2200451c3a2f5fdb84fd9f39a7f190307efc4678 Mon Sep 17 00:00:00 2001
From: RamyEB <ramyelb@gmail.com>
Date: Mon, 19 Aug 2024 11:57:14 +0200
Subject: [PATCH] fix: review correction

---
 .../HorizontalList/MinimalAppCard/index.tsx   | 15 +++++++----
 .../components/HorizontalList/index.tsx       | 25 +++++++------------
 .../ManifestsCategoryList/index.tsx           |  2 +-
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/HorizontalList/MinimalAppCard/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/HorizontalList/MinimalAppCard/index.tsx
index 709cee735748..8bffe698628d 100644
--- a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/HorizontalList/MinimalAppCard/index.tsx
+++ b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/HorizontalList/MinimalAppCard/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity } from "react-native";
 import { Flex, Text } from "@ledgerhq/native-ui";
 import AppIcon from "LLM/features/Web3Hub/components/AppIcon";
@@ -7,14 +7,19 @@ import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
 export default function MinimalAppCard({
   item,
   onPress,
-  disabled,
 }: {
   item: AppManifest;
-  onPress: () => void;
-  disabled?: boolean;
+  onPress: (manifest: AppManifest) => void;
 }) {
+  const disabled = useMemo(() => item.branch === "soon", [item]);
+  const handlePress = useCallback(() => {
+    if (!disabled) {
+      onPress(item);
+    }
+  }, [disabled, item, onPress]);
+
   return (
-    <TouchableOpacity disabled={disabled} onPress={onPress}>
+    <TouchableOpacity disabled={disabled} onPress={handlePress}>
       <Flex rowGap={6} marginRight={3} width={70} alignItems={"center"}>
         <AppIcon isDisabled={disabled} size={48} name={item.name} icon={item.icon} />
         <Text numberOfLines={1}>{item.name}</Text>
diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/HorizontalList/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/HorizontalList/index.tsx
index 8ad1a8936088..fe2a658bc23f 100644
--- a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/HorizontalList/index.tsx
+++ b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/HorizontalList/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { StyleSheet } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 import { Box, Flex, InfiniteLoader, Text } from "@ledgerhq/native-ui";
@@ -10,36 +10,29 @@ type Props = {
   isLoading: boolean;
   data: AppManifest[];
   onEndReached?: () => void;
-  extraData: (manifest: AppManifest) => void;
+  onPressItem: (manifest: AppManifest) => void;
   testID?: string;
 };
 
 type PropRenderItem = {
   item: AppManifest;
-  extraData?: (manifest: AppManifest) => void;
+  onPressItem?: (manifest: AppManifest) => void;
 };
 
 const identityFn = (item: AppManifest) => item.id;
 
+const renderItem = ({ item, onPressItem = () => {} }: PropRenderItem) => {
+  return <MinimalAppCard item={item} onPress={onPressItem} />;
+};
+
 export default function HorizontalList({
   title,
   isLoading,
   data,
   onEndReached,
-  extraData,
+  onPressItem,
   testID,
 }: Props) {
-  const renderItem = useCallback(({ item, extraData = () => {} }: PropRenderItem) => {
-    const disabled = item.branch === "soon";
-    const handlePress = () => {
-      if (!disabled) {
-        extraData(item);
-      }
-    };
-
-    return <MinimalAppCard key={item.id} disabled={disabled} item={item} onPress={handlePress} />;
-  }, []);
-
   return (
     <>
       <Text mt={2} mb={5} numberOfLines={1} variant="h5" mx={5} accessibilityRole="header">
@@ -62,7 +55,7 @@ export default function HorizontalList({
           estimatedItemSize={70}
           data={data}
           showsHorizontalScrollIndicator={false}
-          extraData={extraData}
+          extraData={onPressItem}
           onEndReached={onEndReached}
         />
       </Box>
diff --git a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/ManifestsCategoryList/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/ManifestsCategoryList/index.tsx
index 7954f3033539..3ec4fd2d1ca7 100644
--- a/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/ManifestsCategoryList/index.tsx
+++ b/apps/ledger-live-mobile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/ManifestsCategoryList/index.tsx
@@ -34,7 +34,7 @@ const ManifestsCategoryList = ({ title, categoryId, navigation }: Props) => {
       <HorizontalList
         title={title}
         data={data}
-        extraData={disclaimer.onPressItem}
+        onPressItem={disclaimer.onPressItem}
         isLoading={isLoading}
         onEndReached={onEndReached}
         testID="web3hub-clear-signing-scroll"