Add placeholder for NFTs in Account page

LedgerHQ · May 4, 2022 · 2662777 · 2662777
1 parent 782103c
commit 2662777
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 31 deletions.
diff --git 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<any> | void,
-  onLongPress: ?() => ?Promise<any> | void,
+  onLongPress?: ?() => ?Promise<any> | void,
   children: *,
   event?: string,
   eventProperties?: { [key: string]: any },

diff --git 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</0> using your <1>{{currency}} address</1>."
     }
   },
   "accounts": {

diff --git 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({
             </Box>,
           ]
         : []),
-      ...(!empty && account.type === "Account" && account.nfts?.length
+      ...(!empty && account.type === "Account" && isNFTActive(account.currency)
         ? [<NftCollectionsList account={account} />]
         : []),
       ...(compoundSummary &&

diff --git 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(
     () => (
       <View style={styles.header}>
         <Text variant={"h3"}>NFT</Text>
-        <Link
-          type="color"
-          event="AccountReceiveToken"
-          Icon={ArrowBottomMedium}
-          iconPosition={"left"}
-          onPress={navigateToReceive}
-        >
-          <Trans i18nKey="account.nft.receiveNft" />
-        </Link>
+        {data.length ? (
+          <Link
+            type="color"
+            event="AccountReceiveToken"
+            Icon={ArrowBottomMedium}
+            iconPosition={"left"}
+            onPress={navigateToReceive}
+          >
+            <Trans i18nKey="account.nft.receiveNft" />
+          </Link>
+        ) : null}
       </View>
     ),
-    [navigateToReceive],
+    [data.length, navigateToReceive],
   );
 
   const renderFooter = useCallback(
-    () => (
-      <Button
-        type={"shade"}
-        size={"small"}
-        outline
-        onPress={navigateToGallery}
-        Icon={DroprightMedium}
-        mt={3}
-      >
-        <Trans i18nKey="nft.account.seeAllNfts" />
-      </Button>
-    ),
-    [navigateToGallery],
+    () =>
+      data.length ? (
+        <Button
+          type={"shade"}
+          size={"small"}
+          outline
+          onPress={navigateToGallery}
+          Icon={DroprightMedium}
+          mt={3}
+        >
+          <Trans i18nKey="nft.account.seeAllNfts" />
+        </Button>
+      ) : (
+        <Touchable
+          event="AccountReceiveSubAccount"
+          onPress={navigateToReceiveConnectDevice}
+        >
+          <View
+            style={[
+              styles.footer,
+              {
+                borderColor: colors.fog,
+              },
+            ]}
+          >
+            <Icon color={colors.live} size={26} name="plus" />
+            <View style={styles.footerText}>
+              <Text variant={"large"}>
+                <Trans
+                  i18nKey={`account.nft.howTo`}
+                  values={{ currency: account.currency.family }}
+                >
+                  <Text variant={"large"} fontWeight={"semiBold"}>
+                    text
+                  </Text>
+                  <Text variant={"large"} fontWeight={"semiBold"}>
+                    text
+                  </Text>
+                </Trans>
+              </Text>
+            </View>
+          </View>
+        </Touchable>
+      ),
+    [
+      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,
+  },
 });