[LIVE-1035] - Feature: Add NFT counter value

package.json

@@ -74,7 +74,7 @@
     "@ledgerhq/errors": "6.10.0",
     "@ledgerhq/hw-transport": "6.24.1",
     "@ledgerhq/hw-transport-http": "6.27.0",
-    "@ledgerhq/live-common": "21.36.0",
+    "@ledgerhq/live-common": "https://github.com/LedgerHQ/ledger-live-common.git#1effe19c902a37475d858ef5bb82ff9724ccf7f6",
     "@ledgerhq/logs": "6.10.0",
     "@ledgerhq/native-ui": "^0.7.9",
     "@ledgerhq/react-native-hid": "6.24.1",

src/components/BottomModal.js

@@ -104,6 +104,7 @@ const BottomModal = ({
           </View>
         </View>
       </ReactNativeModal>
+    </ButtonUseTouchable.Provider>
   );
 };
 

src/components/Nft/NftCard.js → src/components/Nft/NftCard.tsx

@@ -5,30 +5,28 @@ import { RectButton } from "react-native-gesture-handler";
 import { View, StyleSheet, Platform } from "react-native";
 import { useNftMetadata } from "@ledgerhq/live-common/lib/nft";
 import { useTheme, useNavigation } from "@react-navigation/native";
-import type { CollectionWithNFT, NFT } from "@ledgerhq/live-common/lib/nft";
-import { ScreenName } from "../../const";
+import { ProtoNFT } from "@ledgerhq/live-common/lib/types";
+import { NFTResource } from "@ledgerhq/live-common/lib/nft/NftMetadataProvider/types";
+import { NavigatorName, ScreenName } from "../../const";
 import Skeleton from "../Skeleton";
 import NftImage from "./NftImage";
 import LText from "../LText";
 
 type Props = {
-  nft: NFT | $Diff<NFT, { collection: * }>,
-  collection: CollectionWithNFT,
-  style?: Object,
+  nft: ProtoNFT;
+  style?: Object;
 };
 
 const NftCardView = ({
   nft,
-  collection,
   style,
   status,
   metadata,
 }: {
-  nft: NFT | $Diff<NFT, { collection: * }>,
-  collection: CollectionWithNFT,
-  style?: Object,
-  status: "queued" | "loading" | "loaded" | "error" | "nodata",
-  metadata?: Object,
+  nft: ProtoNFT;
+  style?: Object;
+  status: NFTResource["status"];
+  metadata?: Object;
 }) => {
   const amount = nft.amount.toFixed();
   const { colors } = useTheme();
@@ -45,9 +43,11 @@ const NftCardView = ({
           },
         ]}
         onPress={() => {
-          navigation.navigate(ScreenName.NftViewer, {
-            nft,
-            collection,
+          navigation.navigate(NavigatorName.NftNavigator, {
+            screen: ScreenName.NftViewer,
+            params: {
+              nft,
+            },
           });
         }}
       >
@@ -92,17 +92,15 @@ const NftCardView = ({
 const NftCardMemo = memo(NftCardView);
 // this technique of splitting the usage of context and memoing the presentational component is used to prevent
 // the rerender of all NftCards whenever the NFT cache changes (whenever a new NFT is loaded)
-const NftCard = ({ nft, collection, style }: Props) => {
-  const { status, metadata } = useNftMetadata(collection.contract, nft.tokenId);
+const NftCard = ({ nft, style }: Props) => {
+  const { status, metadata } = useNftMetadata(
+    nft.contract,
+    nft.tokenId,
+    nft.currencyId,
+  );
 
   return (
-    <NftCardMemo
-      nft={nft}
-      collection={collection}
-      style={style}
-      status={status}
-      metadata={metadata}
-    />
+    <NftCardMemo nft={nft} style={style} status={status} metadata={metadata} />
   );
 };
 

src/components/Nft/NftCollectionRow.tsx

@@ -1,24 +1,25 @@
-import React from "react";
+import React, { memo } from "react";
 import { StyleSheet } from "react-native";
 import { RectButton } from "react-native-gesture-handler";
-import {
-  useNftMetadata,
-  CollectionWithNFT,
-} from "@ledgerhq/live-common/lib/nft";
+import { useNftMetadata, ProtoNFT } from "@ledgerhq/live-common/lib/nft";
 import { Flex, Text } from "@ledgerhq/native-ui";
 import { useTheme } from "styled-components/native";
 import Skeleton from "../Skeleton";
 import NftImage from "./NftImage";
 
 type Props = {
-  collection: CollectionWithNFT;
+  collection: ProtoNFT[];
   onCollectionPress: () => void;
 };
 
 function NftCollectionRow({ collection, onCollectionPress }: Props) {
   const { colors } = useTheme();
-  const { contract, nfts } = collection;
-  const { status, metadata } = useNftMetadata(contract, nfts[0].tokenId);
+  const nft = collection[0];
+  const { status, metadata } = useNftMetadata(
+    nft?.contract,
+    nft?.tokenId,
+    nft?.currencyId,
+  );
   const loading = status === "loading";
 
   return (
@@ -41,7 +42,7 @@ function NftCollectionRow({ collection, onCollectionPress }: Props) {
               ellipsizeMode="tail"
               numberOfLines={2}
             >
-              {metadata?.tokenName || collection.contract}
+              {metadata?.tokenName || nft.contract}
             </Text>
           </Skeleton>
         </Flex>
@@ -51,14 +52,14 @@ function NftCollectionRow({ collection, onCollectionPress }: Props) {
           color={"neutral.c70"}
           ml={5}
         >
-          {collection.nfts.length}
+          {collection.length}
         </Text>
       </Flex>
     </RectButton>
   );
 }
 
-export default NftCollectionRow;
+export default memo(NftCollectionRow);
 
 const styles = StyleSheet.create({
   container: {

src/components/Nft/NftImage.js → src/components/Nft/NftImage.tsx

@@ -1,41 +1,30 @@
-// @flow
-
 import React, { useState } from "react";
-
-import FastImage from "react-native-fast-image";
-import { Image, View, StyleSheet, Animated } from "react-native";
+import FastImage, {
+  OnLoadEvent,
+  FastImageProps,
+} from "react-native-fast-image";
+import { View, StyleSheet, Animated } from "react-native";
 import ImageNotFoundIcon from "../../icons/ImageNotFound";
 import { withTheme } from "../../colors";
 import Skeleton from "../Skeleton";
 
 const ImageComponent = ({
-  style,
-  source,
-  resizeMode,
-  onLoadEnd,
-  onLoad,
+  ...props
 }: {
-  style: Object,
-  source: { [string]: string },
-  resizeMode: string,
-  onLoadEnd: () => *,
-  onLoad: () => *,
-}) => (
-  <FastImage
-    style={style}
-    resizeMode={FastImage.resizeMode[resizeMode]}
-    source={source}
-    onLoad={onLoad}
-    onLoadEnd={onLoadEnd}
-  />
-);
+  style: Object;
+} & FastImageProps) =>
+  typeof props?.source === "object" && props?.source?.uri ? (
+    <FastImage {...props} />
+  ) : (
+    <></>
+  );
 
 const NotFound = ({
   colors,
   onLayout,
 }: {
-  colors: Object,
-  onLayout: () => *,
+  colors: Object;
+  onLayout: () => void;
 }) => {
   const [iconWidth, setIconWidth] = useState(40);
 
@@ -58,20 +47,22 @@ const NotFound = ({
 };
 
 type Props = {
-  style?: Object,
-  status: string,
-  src: string,
-  resizeMode?: string,
-  colors: any,
+  style?: Object;
+  status: string;
+  src: string;
+  resizeMode?: string;
+  colors: any;
 };
 
 type State = {
-  loadError: boolean,
+  loadError: boolean;
 };
 
 class NftImage extends React.PureComponent<Props, State> {
   state = {
+    beforeLoadDone: false,
     loadError: false,
+    contentType: null,
   };
 
   opacityAnim = new Animated.Value(0);
@@ -84,10 +75,24 @@ class NftImage extends React.PureComponent<Props, State> {
     }).start();
   };
 
+  onLoad = ({ nativeEvent }: OnLoadEvent) => {
+    if (!nativeEvent) {
+      this.setState({ loadError: true });
+    }
+  };
+
+  onError = () => {
+    this.setState({ loadError: true });
+  };
+
   render() {
     const { style, status, src, colors, resizeMode = "cover" } = this.props;
     const { loadError } = this.state;
 
+    const noData = status === "nodata";
+    const metadataError = status === "error";
+    const noSource = status === "loaded" && !src;
+
     return (
       <View style={[style, styles.root]}>
         <Skeleton style={styles.skeleton} loading={true} />
@@ -99,10 +104,7 @@ class NftImage extends React.PureComponent<Props, State> {
             },
           ]}
         >
-          {status === "nodata" ||
-          status === "error" ||
-          (status === "loaded" && !src) ||
-          loadError ? (
+          {noData || metadataError || noSource || loadError ? (
             <NotFound colors={colors} onLayout={this.startAnimation} />
           ) : (
             <ImageComponent
@@ -116,13 +118,9 @@ class NftImage extends React.PureComponent<Props, State> {
               source={{
                 uri: src,
               }}
-              onLoad={({ nativeEvent }: Image.ImageLoadEvent) => {
-                if (!nativeEvent) {
-                  this.setState({ loadError: true });
-                }
-              }}
+              onLoad={this.onLoad}
               onLoadEnd={this.startAnimation}
-              onError={() => this.setState({ loadError: true })}
+              onError={this.onError}
             />
           )}
         </Animated.View>