From d55b826d3bdbf46d5206339418740ec9c3fe5278 Mon Sep 17 00:00:00 2001 From: lambertkevin Date: Tue, 26 Apr 2022 16:00:11 +0200 Subject: [PATCH] Add placeholder for NFTs in Account page --- src/components/Touchable.js | 2 +- src/locales/en/common.json | 3 +- src/screens/Account/ListHeaderComponent.tsx | 3 +- src/screens/Account/NftCollectionsList.tsx | 132 +++++++++++++++----- 4 files changed, 109 insertions(+), 31 deletions(-) diff --git a/src/components/Touchable.js b/src/components/Touchable.js index ed1b76c31a..eae80720a5 100644 --- a/src/components/Touchable.js +++ b/src/components/Touchable.js @@ -18,7 +18,7 @@ type Props = { // will wait the promise to complete before enabling the button again // it also displays a spinner if it takes more than WAIT_TIME_BEFORE_SPINNER onPress: ?() => ?Promise | void, - onLongPress: ?() => ?Promise | void, + onLongPress?: ?() => ?Promise | void, children: *, event?: string, eventProperties?: { [key: string]: any }, diff --git a/src/locales/en/common.json b/src/locales/en/common.json index ff352d35f5..f1eef5f67e 100644 --- a/src/locales/en/common.json +++ b/src/locales/en/common.json @@ -1753,7 +1753,8 @@ "sectionLabel": "Undelegation(s)" }, "nft": { - "receiveNft": "Receive NFT" + "receiveNft": "Receive NFT", + "howTo": "To add NFTs, you need to <0>receive them using your <1>{{currency}} address." } }, "accounts": { diff --git a/src/screens/Account/ListHeaderComponent.tsx b/src/screens/Account/ListHeaderComponent.tsx index a40d34ff41..7f7d6d7143 100644 --- a/src/screens/Account/ListHeaderComponent.tsx +++ b/src/screens/Account/ListHeaderComponent.tsx @@ -14,6 +14,7 @@ import { ValueChange } from "@ledgerhq/live-common/lib/portfolio/v2/types"; import { CompoundAccountSummary } from "@ledgerhq/live-common/lib/compound/types"; import { Box, Flex, Text } from "@ledgerhq/native-ui"; +import { isNFTActive } from "@ledgerhq/live-common/lib/nft"; import CurrencyUnitValue from "../../components/CurrencyUnitValue"; import Header from "./Header"; import AccountGraphCard from "../../components/AccountGraphCard"; @@ -252,7 +253,7 @@ export function getListHeaderComponents({ , ] : []), - ...(!empty && account.type === "Account" && account.nfts?.length + ...(!empty && account.type === "Account" && isNFTActive(account.currency) ? [] : []), ...(compoundSummary && diff --git a/src/screens/Account/NftCollectionsList.tsx b/src/screens/Account/NftCollectionsList.tsx index 49aab0cafe..280f6a3e74 100644 --- a/src/screens/Account/NftCollectionsList.tsx +++ b/src/screens/Account/NftCollectionsList.tsx @@ -1,23 +1,25 @@ import React, { useCallback, useMemo, useState } from "react"; import { useSelector } from "react-redux"; +import { Box, Text } from "@ledgerhq/native-ui"; import { Trans, useTranslation } from "react-i18next"; +import { StyleSheet, View, FlatList } from "react-native"; import useEnv from "@ledgerhq/live-common/lib/hooks/useEnv"; +import Icon from "react-native-vector-icons/dist/FontAwesome"; import { nftsByCollections } from "@ledgerhq/live-common/lib/nft"; -import { useNavigation } from "@react-navigation/native"; -import { StyleSheet, View, FlatList } from "react-native"; +import { useNavigation, useTheme } from "@react-navigation/native"; import { Account, ProtoNFT } from "@ledgerhq/live-common/lib/types"; -import { Box, Text } from "@ledgerhq/native-ui"; import { ArrowBottomMedium, DroprightMedium, } from "@ledgerhq/native-ui/assets/icons"; +import NftCollectionOptionsMenu from "../../components/Nft/NftCollectionOptionsMenu"; +import { hiddenNftCollectionsSelector } from "../../reducers/settings"; import NftCollectionRow from "../../components/Nft/NftCollectionRow"; import { NavigatorName, ScreenName } from "../../const"; import Button from "../../components/wrappedUi/Button"; +import Touchable from "../../components/Touchable"; import Link from "../../components/wrappedUi/Link"; -import NftCollectionOptionsMenu from "../../components/Nft/NftCollectionOptionsMenu"; -import { hiddenNftCollectionsSelector } from "../../reducers/settings"; const MAX_COLLECTIONS_TO_SHOW = 3; @@ -28,6 +30,7 @@ type Props = { export default function NftCollectionsList({ account }: Props) { useEnv("HIDE_EMPTY_TOKEN_ACCOUNTS"); + const { colors } = useTheme(); const { t } = useTranslation(); const navigation = useNavigation(); const { nfts } = account; @@ -88,38 +91,88 @@ export default function NftCollectionsList({ account }: Props) { }); }, [account.id, navigation, t]); + const navigateToReceiveConnectDevice = useCallback(() => { + navigation.navigate(NavigatorName.ReceiveFunds, { + screen: ScreenName.ReceiveConnectDevice, + params: { + accountId: account.id, + }, + }); + }, [account.id, navigation]); + const renderHeader = useCallback( () => ( NFT - - - + {data.length ? ( + + + + ) : null} ), - [navigateToReceive], + [data.length, navigateToReceive], ); const renderFooter = useCallback( - () => ( - - ), - [navigateToGallery], + () => + data.length ? ( + + ) : ( + + + + + + + + text + + + text + + + + + + + ), + [ + account.currency.family, + colors.fog, + colors.live, + data.length, + navigateToGallery, + navigateToReceiveConnectDevice, + ], ); const renderItem = useCallback( @@ -170,4 +223,27 @@ const styles = StyleSheet.create({ paddingRight: 16, paddingBottom: 24, }, + footer: { + borderRadius: 4, + paddingHorizontal: 18, + paddingVertical: 12, + borderStyle: "dashed", + borderWidth: 1, + flexDirection: "row", + alignItems: "center", + overflow: "hidden", + }, + footerText: { + flex: 1, + flexShrink: 1, + flexWrap: "wrap", + paddingLeft: 12, + flexDirection: "row", + }, + subAccountList: { + paddingTop: 32, + paddingLeft: 16, + paddingRight: 16, + paddingBottom: 24, + }, });