diff --git a/src/renderer/components/Breadcrumb/NFTCrumb.js b/src/renderer/components/Breadcrumb/NFTCrumb.js index 0d05da2a39..c6a081f9ad 100644 --- 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, }) => ( @@ -43,9 +41,9 @@ const NFTCrumb = () => { const account = useSelector(state => accountSelector(state, { accountId: id })); const collections = useMemo(() => nftsByCollections(account.nfts), [account.nfts]); - const items = useMemo( + const items: DropDownItemType[] = useMemo( () => - Object.entries(collections).map(([contract, nfts]: any) => ({ + Object.entries(collections).map(([contract, nfts]: [string, any]) => ({ key: contract, label: contract, content: nfts[0], @@ -53,8 +51,8 @@ const NFTCrumb = () => { [collections], ); - const activeItem = useMemo( - () => items.find((item: any) => item.key === collectionAddress) || items[0], + const activeItem: ?DropDownItemType = useMemo( + () => items.find(item => item.key === collectionAddress) || items[0], [collectionAddress, items], ); @@ -98,7 +96,7 @@ const NFTCrumb = () => { diff --git a/src/renderer/components/DropDownSelector.js b/src/renderer/components/DropDownSelector.js index a1d7052911..d62147caea 100644 --- 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 = { 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, }; diff --git a/src/renderer/screens/accounts/AccountList/Order.js b/src/renderer/screens/accounts/AccountList/Order.js index 5ed3b16cea..4384a98c3c 100644 --- a/src/renderer/screens/accounts/AccountList/Order.js +++ b/src/renderer/screens/accounts/AccountList/Order.js @@ -76,7 +76,7 @@ export default function Order() { } type ItemProps = { - item: DropDownItemType, + item: DropDownItemType<>, isActive: boolean, }; diff --git a/src/renderer/screens/accounts/AccountList/Range.js b/src/renderer/screens/accounts/AccountList/Range.js index efaa7012b5..70dd426363 100644 --- a/src/renderer/screens/accounts/AccountList/Range.js +++ b/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, }; diff --git a/src/renderer/screens/accounts/OptionsButton.js b/src/renderer/screens/accounts/OptionsButton.js index 4b1c6057a4..4b1d658ee2 100644 --- a/src/renderer/screens/accounts/OptionsButton.js +++ b/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"), diff --git a/src/renderer/screens/nft/CollectionName.js b/src/renderer/screens/nft/CollectionName.js index 9390d3deec..c1e21dae37 100644 --- a/src/renderer/screens/nft/CollectionName.js +++ b/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) => { {tokenName || fallback || "-"} - {account && showHideMenu && ( + {account && showHideMenu && nft && (