Fix NFT send making the app crash in prod (again) (#4958)

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>

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,
 };
 

src/renderer/screens/accounts/AccountList/Order.js

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

src/renderer/screens/accounts/AccountList/Range.js

@@ -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,
 };
 

src/renderer/screens/accounts/OptionsButton.js

@@ -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"),

src/renderer/screens/nft/CollectionName.js

@@ -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}
  >