[LIVE-1911] Feature - Add collection name resolver to eth familly (#4899

) * Bump temp LLC dependency * update screenshots (windows) * update screenshots (linux) * Fix NFT transaction summary error (#4898) * v2.41.0 * run ci * Add LLC dependency * Add nftResolvers to bridge proxy * Add useNftCollectionName everywhere Co-authored-by: Team Live <[email protected]>
LedgerHQ · Apr 7, 2022 · 0228d44 · 0228d44
1 parent 1e730c2
commit 0228d44
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 59 deletions.
diff --git a/src/renderer/bridge/proxy.js b/src/renderer/bridge/proxy.js
@@ -51,7 +51,7 @@ export const getCurrencyBridge = (currency: CryptoCurrency): CurrencyBridge => {
     hydrate: value => bridgeImpl.getCurrencyBridge(currency).hydrate(value, currency),
 
     scanAccounts,
-    nftMetadataResolver: bridgeImpl.getCurrencyBridge(currency).nftMetadataResolver,
+    nftResolvers: bridgeImpl.getCurrencyBridge(currency).nftResolvers,
   };
 
   if (getPreloadStrategy) {

diff --git a/src/renderer/drawers/NFTViewerDrawer/NFTProperties.js b/src/renderer/drawers/NFTViewerDrawer/NFTProperties.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import Text from "~/renderer/components/Text";
 import Skeleton from "~/renderer/screens/nft/Skeleton";
@@ -37,9 +37,9 @@ type NFTPropertiesProps = {
   status: string,
 };
 
-export function NFTProperties({ nft, metadata }: NFTPropertiesProps) {
+export function NFTProperties({ nft, metadata, status }: NFTPropertiesProps) {
   const { t } = useTranslation();
-  const showSkeleton = status === "loading";
+  const showSkeleton = useMemo(() => status === "loading", [status]);
   if (!metadata?.properties?.length) return null;
 
   return (

diff --git a/src/renderer/drawers/NFTViewerDrawer/index.js b/src/renderer/drawers/NFTViewerDrawer/index.js
@@ -1,26 +1,29 @@
 // @flow
 
 import React, { useMemo, useCallback, useState, memo } from "react";
-import Box from "~/renderer/components/Box";
+import {
+  useNftMetadata,
+  useNftCollectionMetadata,
+} from "@ledgerhq/live-common/lib/nft/NftMetadataProvider";
 import styled from "styled-components";
+import { useTranslation } from "react-i18next";
+import { useSelector, useDispatch } from "react-redux";
+import { space, layout, position } from "styled-system";
+
+import type { Account } from "@ledgerhq/live-common/lib/types";
+
+import Box from "~/renderer/components/Box";
 import Text from "~/renderer/components/Text";
 import Button from "~/renderer/components/Button";
 import IconSend from "~/renderer/icons/Send";
 import ZoomInIcon from "~/renderer/icons/ZoomIn";
-
-import type { Account } from "@ledgerhq/live-common/lib/types";
-
-import { useTranslation } from "react-i18next";
-import { useSelector, useDispatch } from "react-redux";
 import { getNFTById } from "~/renderer/reducers/accounts";
 import { NFTProperties } from "./NFTProperties";
 import { CopiableField } from "./CopiableField";
 import NftPanAndZoom from "./NftPanAndZoom";
 import ExternalViewerButton from "./ExternalViewerButton";
 import Skeleton from "~/renderer/screens/nft/Skeleton";
 import Image from "~/renderer/screens/nft/Image";
-import { useNftMetadata } from "@ledgerhq/live-common/lib/nft/NftMetadataProvider";
-import { space, layout, position } from "styled-system";
 import { openModal } from "~/renderer/actions/modals";
 import { setDrawer } from "~/renderer/drawers/Provider";
 import { SplitAddress } from "~/renderer/components/OperationsList/AddressCell";
@@ -168,9 +171,20 @@ const NFTViewerDrawer = ({ account, nftId, height }: NFTViewerDrawerProps) => {
   const dispatch = useDispatch();
 
   const nft = useSelector(state => getNFTById(state, { nftId }));
-  const { status, metadata } = useNftMetadata(nft.contract, nft.tokenId, nft.currencyId);
-  const show = useMemo(() => status === "loading", [status]);
-  const name = metadata?.nftName || nft.tokenId;
+  const { status: collectionStatus, metadata: collectionMetadata } = useNftCollectionMetadata(
+    nft.contract,
+    nft.currencyId,
+  );
+  const { status: nftStatus, metadata: nftMetadata } = useNftMetadata(
+    nft.contract,
+    nft.tokenId,
+    nft.currencyId,
+  );
+  const loading = useMemo(() => nftStatus === "loading" || collectionStatus === "loading", [
+    collectionStatus,
+    nftStatus,
+  ]);
+  const name = nftMetadata?.nftName || nft.tokenId;
 
   const onNFTSend = useCallback(() => {
     setDrawer();
@@ -189,7 +203,7 @@ const NFTViewerDrawer = ({ account, nftId, height }: NFTViewerDrawerProps) => {
 
   return (
     <Box height={height}>
-      {isPanAndZoomOpen && <NftPanAndZoom nft={metadata} onClose={closeNftPanAndZoom} />}
+      {isPanAndZoomOpen && <NftPanAndZoom nft={nftMetadata} onClose={closeNftPanAndZoom} />}
       <NFTViewerDrawerContainer>
         <NFTViewerDrawerContent>
           <StickyWrapper top={0} pb={3} pt="24px">
@@ -200,8 +214,8 @@ const NFTViewerDrawer = ({ account, nftId, height }: NFTViewerDrawerProps) => {
               color="palette.text.shade50"
               pb={2}
             >
-              <Skeleton show={show} width={100} barHeight={10} minHeight={24}>
-                {metadata?.tokenName || "-"}
+              <Skeleton show={loading} width={100} barHeight={10} minHeight={24}>
+                {collectionMetadata?.tokenName || "-"}
               </Skeleton>
             </Text>
             <Text
@@ -220,9 +234,9 @@ const NFTViewerDrawer = ({ account, nftId, height }: NFTViewerDrawerProps) => {
               {name}
             </Text>
           </StickyWrapper>
-          <Skeleton show={show} width={393}>
+          <Skeleton show={loading} width={393}>
             <NFTImageContainer onClick={openNftPanAndZoom}>
-              <Image nft={metadata} full square={false} maxHeight={700} />
+              <Image nft={nftMetadata} full square={false} maxHeight={700} />
               <NFTImageOverlay>
                 <ZoomInIcon color="white" />
               </NFTImageOverlay>
@@ -242,14 +256,14 @@ const NFTViewerDrawer = ({ account, nftId, height }: NFTViewerDrawerProps) => {
               </Text>
             </Button>
 
-            <ExternalViewerButton nft={nft} account={account} metadata={metadata} />
+            <ExternalViewerButton nft={nft} account={account} metadata={nftMetadata} />
           </NFTActions>
           <NFTAttributes>
-            <NFTProperties nft={nft} metadata={metadata} status={status} />
+            <NFTProperties nft={nft} metadata={nftMetadata} status={status} />
             <NFTAttribute
-              skeleton={show}
+              skeleton={loading}
               title={t("NFT.viewer.attributes.description")}
-              value={metadata?.description}
+              value={nftMetadata?.description}
               separatorBottom
             />
             <Text
@@ -294,7 +308,7 @@ const NFTViewerDrawer = ({ account, nftId, height }: NFTViewerDrawerProps) => {
               <React.Fragment>
                 <NFTAttribute
                   separatorTop
-                  skeleton={show}
+                  skeleton={loading}
                   title={t("NFT.viewer.attributes.quantity")}
                   value={nft.amount.toString()}
                 />

diff --git a/src/renderer/drawers/OperationDetails/NFTOperationDetails.js b/src/renderer/drawers/OperationDetails/NFTOperationDetails.js
@@ -14,16 +14,30 @@ import {
 import type { Operation } from "@ledgerhq/live-common/lib/types";
 import Image from "~/renderer/screens/nft/Image";
 import Box from "~/renderer/components/Box";
-import { useNftMetadata } from "@ledgerhq/live-common/lib/nft/NftMetadataProvider";
+import {
+  useNftMetadata,
+  useNftCollectionMetadata,
+} from "@ledgerhq/live-common/lib/nft/NftMetadataProvider";
 import CopyWithFeedback from "~/renderer/components/CopyWithFeedback";
 import Skeleton from "~/renderer/screens/nft/Skeleton";
 import { centerEllipsis } from "~/renderer/styles/helpers";
 
 const NFTOperationDetails = ({ operation }: { operation: Operation }) => {
   const { t } = useTranslation();
   const { currencyId } = decodeAccountId(operation.accountId);
-  const { status, metadata } = useNftMetadata(operation.contract, operation.tokenId, currencyId);
-  const show = useMemo(() => status === "loading", [status]);
+  const { status: nftStatus, metadata: nftMetadata } = useNftMetadata(
+    operation.contract,
+    operation.tokenId,
+    currencyId,
+  );
+  const { status: collectionStatus, metadata: collectionMetadata } = useNftCollectionMetadata(
+    operation.contract,
+    currencyId,
+  );
+  const show = useMemo(() => nftStatus === "loading" || collectionStatus === "loading", [
+    collectionStatus,
+    nftStatus,
+  ]);
 
   return operation.contract && operation.tokenId ? (
     <>
@@ -32,17 +46,17 @@ const NFTOperationDetails = ({ operation }: { operation: Operation }) => {
         <OpDetailsData>
           <Box horizontal alignItems="center">
             <Skeleton width={24} minHeight={24} show={show}>
-              <Image nft={metadata} size={24} />
+              <Image nft={nftMetadata} size={24} />
             </Skeleton>
             <Box ml={2}>
               <Skeleton width={200} barHeight={10} minHeight={32} show={show}>
-                <TextEllipsis>{metadata?.tokenName || "-"}</TextEllipsis>
+                <TextEllipsis>{collectionMetadata?.tokenName || "-"}</TextEllipsis>
               </Skeleton>
             </Box>
           </Box>
           {!show ? (
             <GradientHover>
-              <CopyWithFeedback text={metadata?.tokenName} />
+              <CopyWithFeedback text={collectionMetadata?.tokenName} />
             </GradientHover>
           ) : null}
         </OpDetailsData>

diff --git a/src/renderer/screens/nft/CollectionName.js b/src/renderer/screens/nft/CollectionName.js
@@ -1,6 +1,6 @@
 // @flow
-import React, { memo } from "react";
-import { useNftMetadata } from "@ledgerhq/live-common/lib/nft";
+import React, { memo, useMemo } from "react";
+import { useNftCollectionMetadata } from "@ledgerhq/live-common/lib/nft";
 import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
 import type { Account, ProtoNFT } from "@ledgerhq/live-common/lib/types";
 import NFTCollectionContextMenu from "~/renderer/components/ContextMenu/NFTCollectionContextMenu";
@@ -34,9 +34,9 @@ type Props = {
 
 // TODO Make me pretty
 const CollectionName = ({ nft, fallback, account, showHideMenu }: Props) => {
-  const { status, metadata } = useNftMetadata(nft.contract, nft.tokenId, nft.currencyId);
+  const { status, metadata } = useNftCollectionMetadata(nft.contract, nft.currencyId);
   const { tokenName } = metadata || {};
-  const loading = status === "loading";
+  const loading = useMemo(() => status === "loading", [status]);
 
   return (
     <Skeleton width={80} minHeight={24} barHeight={10} show={loading}>

diff --git a/src/renderer/screens/nft/Collections/Row.js b/src/renderer/screens/nft/Collections/Row.js
@@ -2,6 +2,10 @@
 
 import React, { useMemo, memo } from "react";
 import styled from "styled-components";
+import {
+  useNftCollectionMetadata,
+  useNftMetadata,
+} from "@ledgerhq/live-common/lib/nft/NftMetadataProvider";
 import Box from "~/renderer/components/Box";
 import Text from "~/renderer/components/Text";
 import { rgba } from "~/renderer/styles/helpers";
@@ -10,7 +14,6 @@ import type { Account, NFTWithMetadata } from "@ledgerhq/live-common/lib/types";
 import NFTCollectionContextMenu from "~/renderer/components/ContextMenu/NFTCollectionContextMenu";
 import Image from "~/renderer/screens/nft/Image";
 import Skeleton from "~/renderer/screens/nft/Skeleton";
-import { useNftMetadata } from "@ledgerhq/live-common/lib/nft/NftMetadataProvider";
 
 const Container: ThemedComponent<{}> = styled(Box)`
   &.disabled {
@@ -35,9 +38,20 @@ type Props = {
 };
 
 const Row = ({ nfts, contract, account, onClick }: Props) => {
-  const { status, metadata } = useNftMetadata(contract, nfts[0].tokenId, account.currency.id);
-  const { tokenName } = metadata || {};
-  const show = useMemo(() => status === "loading", [status]);
+  const { status: collectionStatus, metadata: collectionMetadata } = useNftCollectionMetadata(
+    contract,
+    account.currency.id,
+  );
+  const { status: nftStatus, metadata: nftMetadata } = useNftMetadata(
+    contract,
+    nfts[0].tokenId,
+    account.currency.id,
+  );
+  const { tokenName } = collectionMetadata || {};
+  const loading = useMemo(() => nftStatus === "loading" || collectionStatus === "loading", [
+    collectionStatus,
+    nftStatus,
+  ]);
 
   return (
     <NFTCollectionContextMenu
@@ -46,25 +60,25 @@ const Row = ({ nfts, contract, account, onClick }: Props) => {
       account={account}
     >
       <Container
-        className={show || process.env.ALWAYS_SHOW_SKELETONS ? "disabled" : ""}
+        className={loading || process.env.ALWAYS_SHOW_SKELETONS ? "disabled" : ""}
         justifyContent="center"
         horizontal
         px={4}
         py={3}
         onClick={onClick}
       >
-        <Skeleton width={32} minHeight={32} show={show}>
-          <Image nft={metadata} />
+        <Skeleton width={32} minHeight={32} show={loading}>
+          <Image nft={nftMetadata} />
         </Skeleton>
         <Box ml={3} flex={1}>
-          <Skeleton width={136} minHeight={24} barHeight={10} show={show}>
+          <Skeleton width={136} minHeight={24} barHeight={10} show={loading}>
             <Text ff="Inter|SemiBold" color="palette.text.shade100" fontSize={4}>
               {tokenName || contract}
             </Text>
           </Skeleton>
         </Box>
-        <Skeleton width={42} minHeight={24} barHeight={10} show={show}>
-          <Text ff="Inter|SemiBold" color="palette.text.shade100" fontSize={4}>
+        <Skeleton width={42} minHeight={24} barHeight={10} show={loading}>
+          <Text ff="Inter|SemiBold" color="palette.text.shade100" fontSize={4} textAlign="right">
             {nfts?.length ?? 0}
           </Text>
         </Skeleton>

diff --git a/src/renderer/screens/settings/sections/Accounts/HiddenNFTCollections.js b/src/renderer/screens/settings/sections/Accounts/HiddenNFTCollections.js
@@ -1,20 +1,22 @@
 // @flow
-import { SettingsSection as Section, SettingsSectionRow as Row } from "../../SettingsSection";
-import Text from "~/renderer/components/Text";
 import React, { useCallback, useState, useMemo } from "react";
+import styled from "styled-components";
 import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  useNftMetadata,
+  useNftCollectionMetadata,
+} from "@ledgerhq/live-common/lib/nft/NftMetadataProvider";
+import { SettingsSection as Section, SettingsSectionRow as Row } from "../../SettingsSection";
+import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
+import Text from "~/renderer/components/Text";
 import Box from "~/renderer/components/Box";
-import styled from "styled-components";
 import IconCross from "~/renderer/icons/Cross";
 import Image from "~/renderer/screens/nft/Image";
 import Skeleton from "~/renderer/screens/nft/Skeleton";
-import { useDispatch, useSelector } from "react-redux";
 import { unhideNftCollection } from "~/renderer/actions/settings";
 import { hiddenNftCollectionsSelector } from "~/renderer/reducers/settings";
 import { accountSelector } from "~/renderer/reducers/accounts";
-import { useNftMetadata } from "@ledgerhq/live-common/lib/nft/NftMetadataProvider";
-
-import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
 import Track from "~/renderer/analytics/Track";
 import IconAngleDown from "~/renderer/icons/AngleDown";
 
@@ -30,28 +32,33 @@ const HiddenNftCollectionRow = ({
   const account = useSelector(state => accountSelector(state, { accountId }));
 
   const firstNft = account?.nfts.find(nft => nft.contract === contractAddress);
-
-  const { metadata, status } = useNftMetadata(
+  const { metadata: nftMetadata, status: nftStatus } = useNftMetadata(
     contractAddress,
     firstNft?.tokenId,
     firstNft?.currencyId,
   );
-  const { tokenName } = metadata || {};
+  const { metadata: collectionMetadata, status: collectionStatus } = useNftCollectionMetadata(
+    contractAddress,
+    firstNft?.currencyId,
+  );
 
-  const show = useMemo(() => status === "loading", [status]);
+  const loading = useMemo(() => nftStatus === "loading" || collectionStatus === "loading", [
+    collectionStatus,
+    nftStatus,
+  ]);
 
   return (
     <HiddenNftCollectionRowContainer>
-      <Skeleton width={32} minHeight={32} show={show}>
-        <Image nft={metadata} />
+      <Skeleton width={32} minHeight={32} show={loading}>
+        <Image nft={nftMetadata} />
       </Skeleton>
       <Text
         style={{ marginLeft: 10, flex: 1 }}
         ff="Inter|Medium"
         color="palette.text.shade100"
         fontSize={3}
       >
-        {tokenName || contractAddress}
+        {collectionMetadata?.tokenName || contractAddress}
       </Text>
       <IconContainer onClick={onUnhide}>
         <IconCross size={16} />