[LIVE-1174] - Feature: Upgrade NFT Architecture LLM V3

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

@@ -5,32 +5,30 @@ 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 amount = nft?.amount?.toFixed();
   const { colors } = useTheme();
   const navigation = useNavigation();
   const loading = status === "loading";
@@ -45,9 +43,11 @@ const NftCardView = ({
           },
         ]}
         onPress={() => {
-          navigation.navigate(ScreenName.NftViewer, {
-            nft,
-            collection,
+          navigation.navigate(NavigatorName.NftNavigator, {
+            screen: ScreenName.NftViewer,
+            params: {
+              nft,
+            },
           });
         }}
       >
@@ -71,7 +71,7 @@ const NftCardView = ({
             ellipsizeMode="middle"
             numberOfLines={1}
           >
-            ID {nft.tokenId}
+            ID {nft?.tokenId}
           </LText>
           {amount > 1 ? (
             <LText
@@ -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,25 +1,35 @@
-import React from "react";
+import React, { memo } from "react";
 import { StyleSheet } from "react-native";
 import { RectButton } from "react-native-gesture-handler";
 import {
+  useNftCollectionMetadata,
   useNftMetadata,
-  CollectionWithNFT,
 } from "@ledgerhq/live-common/lib/nft";
+import { ProtoNFT } from "@ledgerhq/live-common/lib/types";
 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 loading = status === "loading";
+  const nft = collection[0];
+  const { status: nftStatus, metadata: nftMetadata } = useNftMetadata(
+    nft?.contract,
+    nft?.tokenId,
+    nft?.currencyId,
+  );
+  const {
+    status: collectionStatus,
+    metadata: collectionMetadata,
+  } = useNftCollectionMetadata(nft?.contract, nft?.currencyId);
+
+  const loading = nftStatus === "loading" || collectionStatus === "loading";
 
   return (
     <RectButton
@@ -30,8 +40,8 @@ function NftCollectionRow({ collection, onCollectionPress }: Props) {
       <Flex accessible flexDirection={"row"} alignItems={"center"} py={6}>
         <NftImage
           style={styles.collectionImage}
-          status={status}
-          src={metadata?.media}
+          status={nftStatus}
+          src={nftMetadata?.media}
         />
         <Flex flexGrow={1} flexShrink={1} ml={6} flexDirection={"column"}>
           <Skeleton style={styles.collectionNameSkeleton} loading={loading}>
@@ -41,7 +51,7 @@ function NftCollectionRow({ collection, onCollectionPress }: Props) {
               ellipsizeMode="tail"
               numberOfLines={2}
             >
-              {metadata?.tokenName || collection.contract}
+              {collectionMetadata?.tokenName || nft?.contract}
             </Text>
           </Skeleton>
         </Flex>
@@ -51,14 +61,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>

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

@@ -1,20 +1,18 @@
-// @flow
-
-import React from "react";
+import React, { memo } from "react";
 import { View, StyleSheet } from "react-native";
 import NftImage from "./NftImage";
 
 // import PanAndZoomView from "../PanAndZoomView";
 
 type Props = {
   route: {
-    params?: RouteParams,
-  },
+    params?: RouteParams;
+  };
 };
 
 type RouteParams = {
-  media: string,
-  status: string,
+  media: string;
+  status: string;
 };
 
 const NftViewer = ({ route }: Props) => {
@@ -47,4 +45,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default NftViewer;
+export default memo(NftViewer);