LedgerHQ · lambertkevin · May 2, 2022 · May 2, 2022 · henri-ly · May 2, 2022
diff --git a/src/renderer/components/Breadcrumb/NFTCrumb.js b/src/renderer/components/Breadcrumb/NFTCrumb.js
@@ -3,8 +3,10 @@ import React, { useCallback, useMemo, memo } from "react";
 import { useHistory, useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { nftsByCollections } from "@ledgerhq/live-common/lib/nft";
+import type { ProtoNFT } from "@ledgerhq/live-common/lib/nft";
 import { accountSelector } from "~/renderer/reducers/accounts";
 import DropDownSelector from "~/renderer/components/DropDownSelector";
+import type { DropDownItemType } from "~/renderer/components/DropDownSelector";
 import Button from "~/renderer/components/Button";
 import Text from "~/renderer/components/Text";
 import IconCheck from "~/renderer/icons/Check";
@@ -13,17 +15,13 @@ import IconAngleUp from "~/renderer/icons/AngleUp";
 import { Separator, Item, TextLink, AngleDown, Check } from "./common";
 import { setTrackingSource } from "~/renderer/analytics/TrackPage";
 import CollectionName from "~/renderer/screens/nft/CollectionName";
-import type { ProtoNFT } from "@ledgerhq/live-common/lib/nft";
 
 const LabelWithMeta = ({
   item,
   isActive,
 }: {
   isActive: boolean,
-  item: {
-    label: string,
-    content?: ProtoNFT,
-  },
+  item: DropDownItemType<ProtoNFT>,
 }) => (
   <Item isActive={isActive}>
     <Text ff={`Inter|${isActive ? "SemiBold" : "Regular"}`} fontSize={4}>
@@ -43,18 +41,18 @@ const NFTCrumb = () => {
   const account = useSelector(state => accountSelector(state, { accountId: id }));
   const collections = useMemo(() => nftsByCollections(account.nfts), [account.nfts]);
 
-  const items = useMemo(
+  const items: DropDownItemType<ProtoNFT>[] = useMemo(
     () =>
-      Object.entries(collections).map(([contract, nfts]: any) => ({
+      Object.entries(collections).map(([contract, nfts]: [string, any]) => ({
         key: contract,
         label: contract,
         content: nfts[0],
       })),
     [collections],
   );
 
-  const activeItem = useMemo(
-    () => items.find((item: any) => item.key === collectionAddress) || items[0],
+  const activeItem: ?DropDownItemType<ProtoNFT> = useMemo(
+    () => items.find(item => item.key === collectionAddress) || items[0],
     [collectionAddress, items],
   );
 
@@ -98,7 +96,7 @@ const NFTCrumb = () => {
               <TextLink>
                 <Button>
                   <CollectionName
-                    nft={activeItem.content}
+                    nft={activeItem?.content}
                     fallback={activeItem?.content?.contract}
                   />
                 </Button>

diff --git a/src/renderer/components/DropDownSelector.js b/src/renderer/components/DropDownSelector.js
@@ -48,11 +48,11 @@ const DropContainer: ThemedComponent<{}> = styled.div`
   }
 `;
 
-export type DropDownItemType = {
+export type DropDownItemType<ContentType = any> = {
   key: string,
   label: any,
   disabled?: boolean,
-  content?: any,
+  content?: ContentType,
 };
 
 const OptionContainer = styled.div`
@@ -65,13 +65,13 @@ const ButtonContainer = styled.div`
 `;
 
 type Props = {
-  children: (props: { isOpen: ?boolean, value: ?DropDownItemType }) => React$Node,
-  items: DropDownItemType[],
+  children: (props: { isOpen: ?boolean, value: ?DropDownItemType<> }) => React$Node,
+  items: DropDownItemType<>[],
   onChange?: (value: any) => void,
   renderItem: (props: { isActive: boolean, item: any }) => React$Node | null,
-  value?: ?DropDownItemType,
+  value?: ?DropDownItemType<>,
   controlled?: boolean,
-  defaultValue?: ?DropDownItemType,
+  defaultValue?: ?DropDownItemType<>,
   buttonId?: string,
 };
 

@@ -76,7 +76,7 @@ export default function Order() {
 }
 
 type ItemProps = {
-  item: DropDownItemType,
+  item: DropDownItemType<>,
   isActive: boolean,
 };
 

@@ -12,7 +12,7 @@ import DropDownSelector, { DropDownItem } from "~/renderer/components/DropDownSe
 import { useTimeRange } from "~/renderer/actions/settings";
 
 type RangeItemProps = {
-  item: DropDownItemType,
+  item: DropDownItemType<>,
   isActive: boolean,
 };
 

@@ -37,7 +37,7 @@ const Item: ThemedComponent<{
   align-items: center;
 `;
 
-type ItemType = DropDownItemType & {
+type ItemType = DropDownItemType<> & {
   icon?: React$Element<*>,
   onClick?: Function,
   type?: "separator",
@@ -55,7 +55,7 @@ const OptionsButton = () => {
   );
   const { t } = useTranslation();
 
-  const items: DropDownItemType[] = [
+  const items: DropDownItemType<>[] = [
     {
       key: "exportOperations",
       label: t("accounts.optionsMenu.exportOperations"),

@@ -26,7 +26,7 @@ const Container: ThemedComponent<{}> = styled.div`
 `;
 
 type Props = {
-  nft: ProtoNFT,
+  nft?: ProtoNFT,
   fallback?: string,
   account?: Account,
   showHideMenu?: boolean,
@@ -42,10 +42,10 @@ const CollectionName = ({ nft, fallback, account, showHideMenu }: Props) => {
     <Skeleton width={80} minHeight={24} barHeight={10} show={loading}>
       <Container>
         {tokenName || fallback || "-"}
-        {account && showHideMenu && (
+        {account && showHideMenu && nft && (
           <NFTCollectionContextMenu
             collectionName={tokenName || fallback || "-"}
-            collectionAddress={nft?.contract}
+            collectionAddress={nft.contract || ""}
             account={account}
             leftClick={true}
           >