✨ [FEAT]: LLM - Hide whole NFT collection from Individual NFT settings drawer

apps/ledger-live-mobile/src/components/Nft/HideNftDrawer.tsx

@@ -0,0 +1,91 @@
+import React, { memo, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigation } from "@react-navigation/native";
+
+import { BottomDrawer, Button, Icons } from "@ledgerhq/native-ui";
+import { useDispatch, useSelector } from "react-redux";
+import { decodeNftId } from "@ledgerhq/live-common/lib/nft/nftId";
+import { track, TrackScreen } from "../../analytics";
+import { NavigatorName, ScreenName } from "../../const";
+import { hideNftCollection } from "../../actions/settings";
+import { accountSelector } from "../../reducers/accounts";
+
+type Props = {
+  nftId?: string;
+  nftContract?: string;
+  collection?: string;
+  isOpened: boolean;
+  onClose: () => void;
+};
+const HideNftDrawer = ({
+  nftId,
+  nftContract,
+  collection,
+  isOpened,
+  onClose,
+}: Props) => {
+  const { t } = useTranslation();
+  const navigation = useNavigation();
+  const dispatch = useDispatch();
+
+  const { accountId } = decodeNftId(nftId ?? "");
+  const account = useSelector(state => accountSelector(state, { accountId }));
+
+  const onClickContinue = useCallback(() => {
+    track("button_clicked", {
+      button: "Continue",
+      drawer: "HideCollectionModal",
+    });
+
+    dispatch(hideNftCollection(`${account?.id}|${nftContract}`));
+    onClose();
+    navigation.navigate(NavigatorName.WalletTab, {
+      screen: ScreenName.NftGallery,
+    });
+  }, [account?.id, dispatch, navigation, nftContract, onClose]);
+
+  const onPressClose = useCallback(() => {
+    track("button_clicked", {
+      button: "Close 'x'",
+      drawer: "HideCollectionModal",
+    });
+    onClose();
+  }, [onClose]);
+
+  return (
+    <BottomDrawer
+      testId="HideCollectionModal"
+      isOpen={isOpened}
+      onClose={onPressClose}
+      Icon={Icons.EyeNoneMedium}
+      title={t("wallet.nftGallery.hideNftModal.title")}
+      description={t("wallet.nftGallery.hideNftModal.desc", {
+        collectionName: collection,
+      })}
+    >
+      <TrackScreen category="Hide collection Confirmation" type="drawer" />
+
+      <Button
+        type="main"
+        size="large"
+        alignSelf="stretch"
+        onPress={onClickContinue}
+        mt={4}
+        mb={2}
+      >
+        {t("wallet.nftGallery.hideNftModal.cta")}
+      </Button>
+
+      <Button
+        type="default"
+        size="large"
+        alignSelf="stretch"
+        onPress={onPressClose}
+      >
+        {t("common.cancel")}
+      </Button>
+    </BottomDrawer>
+  );
+};
+
+export default memo(HideNftDrawer);

apps/ledger-live-mobile/src/components/Nft/NftImage.tsx

@@ -4,7 +4,7 @@ import FastImage, {
   FastImageProps,
   ResizeMode,
 } from "react-native-fast-image";
-import { View, StyleSheet, Animated } from "react-native";
+import { View, StyleSheet, Animated, StyleProp, ViewStyle } from "react-native";
 import ImageNotFoundIcon from "../../icons/ImageNotFound";
 import { withTheme } from "../../colors";
 import Skeleton from "../Skeleton";
@@ -39,7 +39,7 @@ const NotFound: React.FC<{
 };
 
 type Props = {
-  style?: any;
+  style?: StyleProp<ViewStyle>;
   status: string;
   src: string;
   srcFallback: string;
@@ -68,7 +68,6 @@ class NftImage extends React.PureComponent<Props, State> {
   skeletonOpacityAnim = new Animated.Value(1);
 
   startAnimation = () => {
-    console.log("nft image loaded");
     Animated.timing(this.contentOpacityAnim, {
       toValue: 1,
       duration: 500,
@@ -84,7 +83,6 @@ class NftImage extends React.PureComponent<Props, State> {
   };
 
   onLoad = ({ nativeEvent }: OnLoadEvent) => {
-    console.log("nft image load");
     if (!nativeEvent) {
       if (this.state.usingFallback) {
         this.setState({ error: true });
@@ -156,7 +154,6 @@ class NftImage extends React.PureComponent<Props, State> {
               onLoad={this.onLoad}
               onLoadEnd={this.startAnimation}
               onError={this.onError}
-              onLoadStart={() => console.log("nft image load start", src)}
             />
           )}
         </Animated.View>