Feat/LIVE-3665 - NFT gallery

.changeset/dry-squids-mix.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-common": minor
+---
+
+Add new NFT helpers used for the NFT Gallery (orderByLastReceived, groupByCurrency, getNFTByTokenId), add mock NFT account

.changeset/olive-coins-camp.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Add NFT Gallery

.changeset/thin-windows-behave.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/types-live": minor
+---
+
+Add walletNftGallery feature flag, to control display of the new NFT Gallery

apps/ledger-live-mobile/.eslintrc.js

@@ -81,6 +81,13 @@ module.exports = {
       "error",
       { devDependencies: ["e2e/**"] },
     ],
+    // For Link component from native-ui, that is interpreted like a html link, and thus this rule tried to impose a href prop on it
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        components: [],
+      },
+    ],
 
     // New rules from default RN 0.61 ruleset
     // that were triggered in our codebase

apps/ledger-live-mobile/ios/Podfile.lock

@@ -425,9 +425,9 @@ PODS:
   - react-native-adjust (4.29.6):
     - Adjust (= 4.29.6)
     - React
-  - react-native-appboy-sdk (1.39.0):
-    - Appboy-iOS-SDK (~> 4.5.0)
-    - React
+  - react-native-appboy-sdk (1.40.0):
+    - Appboy-iOS-SDK (~> 4.5.1)
+    - React-Core
   - react-native-biometrics (3.0.1):
     - React-Core
   - react-native-ble-plx (2.0.3):
@@ -448,7 +448,7 @@ PODS:
     - React-Core
   - react-native-netinfo (6.2.1):
     - React-Core
-  - react-native-pager-view (6.0.2):
+  - react-native-pager-view (6.1.0):
     - React-Core
   - react-native-performance (3.1.2):
     - React-Core
@@ -609,7 +609,7 @@ PODS:
   - RNSentry (4.2.4):
     - React-Core
     - Sentry (= 7.23.0)
-  - RNShare (7.9.1):
+  - RNShare (7.9.0):
     - React-Core
   - RNSVG (12.3.0):
     - React-Core
@@ -621,14 +621,14 @@ PODS:
   - SDWebImageWebPCoder (0.8.5):
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.10)
-  - segment-analytics-react-native (2.9.0):
+  - segment-analytics-react-native (2.9.1):
     - React-Core
     - sovran-react-native
   - Sentry (7.23.0):
     - Sentry/Core (= 7.23.0)
   - Sentry/Core (7.23.0)
   - SocketRocket (0.6.0)
-  - sovran-react-native (0.4.4):
+  - sovran-react-native (0.4.5):
     - React-Core
   - Storyly (1.26.2)
   - storyly-react-native (1.26.2):
@@ -703,7 +703,7 @@ DEPENDENCIES:
   - "React-jsinspector (from `../../../node_modules/.pnpm/react-native@0.68.5_qiqqwmyv63yhnuboofexv3s7x4/node_modules/react-native/ReactCommon/jsinspector`)"
   - "React-logger (from `../../../node_modules/.pnpm/react-native@0.68.5_qiqqwmyv63yhnuboofexv3s7x4/node_modules/react-native/ReactCommon/logger`)"
   - "react-native-adjust (from `../../../node_modules/.pnpm/react-native-adjust@4.29.6/node_modules/react-native-adjust`)"
-  - "react-native-appboy-sdk (from `../../../node_modules/.pnpm/react-native-appboy-sdk@1.39.0/node_modules/react-native-appboy-sdk`)"
+  - "react-native-appboy-sdk (from `../../../node_modules/.pnpm/react-native-appboy-sdk@1.40.0/node_modules/react-native-appboy-sdk`)"
   - "react-native-biometrics (from `../../../node_modules/.pnpm/react-native-biometrics@3.0.1_react-native@0.68.5/node_modules/react-native-biometrics`)"
   - "react-native-ble-plx (from `../../../node_modules/.pnpm/react-native-ble-plx@2.0.3/node_modules/react-native-ble-plx`)"
   - "react-native-config (from `../../../node_modules/.pnpm/react-native-config@1.4.4/node_modules/react-native-config`)"
@@ -712,7 +712,7 @@ DEPENDENCIES:
   - "react-native-image-crop-tools (from `../../../node_modules/.pnpm/react-native-image-crop-tools@1.6.2_ykxjy5s7xujdxmsgrwxo5mh3y4_ondxtwf5lqq5g76dzmsmwamaca/node_modules/react-native-image-crop-tools`)"
   - "react-native-image-picker (from `../../../node_modules/.pnpm/react-native-image-picker@4.8.5_ondxtwf5lqq5g76dzmsmwamaca/node_modules/react-native-image-picker`)"
   - "react-native-netinfo (from `../../../node_modules/.pnpm/@react-native-community+netinfo@6.2.1_react-native@0.68.5/node_modules/@react-native-community/netinfo`)"
-  - "react-native-pager-view (from `../../../node_modules/.pnpm/react-native-pager-view@6.0.2_ondxtwf5lqq5g76dzmsmwamaca/node_modules/react-native-pager-view`)"
+  - "react-native-pager-view (from `../../../node_modules/.pnpm/react-native-pager-view@6.1.0_ondxtwf5lqq5g76dzmsmwamaca/node_modules/react-native-pager-view`)"
   - "react-native-performance (from `../../../node_modules/.pnpm/react-native-performance@3.1.2_react-native@0.68.5/node_modules/react-native-performance`)"
   - "react-native-randombytes (from `../../../node_modules/.pnpm/react-native-randombytes@3.6.1/node_modules/react-native-randombytes`)"
   - "react-native-restart (from `../../../node_modules/.pnpm/react-native-restart@0.0.24_ondxtwf5lqq5g76dzmsmwamaca/node_modules/react-native-restart`)"
@@ -750,11 +750,11 @@ DEPENDENCIES:
   - "RNReanimated (from `../../../node_modules/.pnpm/react-native-reanimated@2.8.0_ng25wgrbxfbuobm4i4zjlzcppu/node_modules/react-native-reanimated`)"
   - "RNScreens (from `../../../node_modules/.pnpm/react-native-screens@3.13.1_ondxtwf5lqq5g76dzmsmwamaca/node_modules/react-native-screens`)"
   - "RNSentry (from `../../../node_modules/.pnpm/@sentry+react-native@4.2.4_ondxtwf5lqq5g76dzmsmwamaca/node_modules/@sentry/react-native`)"
-  - "RNShare (from `../../../node_modules/.pnpm/react-native-share@7.9.1/node_modules/react-native-share`)"
+  - "RNShare (from `../../../node_modules/.pnpm/react-native-share@7.9.0/node_modules/react-native-share`)"
   - "RNSVG (from `../../../node_modules/.pnpm/react-native-svg@12.3.0_ondxtwf5lqq5g76dzmsmwamaca/node_modules/react-native-svg`)"
   - "RNVectorIcons (from `../../../node_modules/.pnpm/react-native-vector-icons@8.1.0/node_modules/react-native-vector-icons`)"
-  - "segment-analytics-react-native (from `../../../node_modules/.pnpm/@segment+analytics-react-native@2.9.0_ondxtwf5lqq5g76dzmsmwamaca/node_modules/@segment/analytics-react-native`)"
-  - "sovran-react-native (from `../../../node_modules/.pnpm/@segment+sovran-react-native@0.4.4_ondxtwf5lqq5g76dzmsmwamaca/node_modules/@segment/sovran-react-native`)"
+  - "segment-analytics-react-native (from `../../../node_modules/.pnpm/@segment+analytics-react-native@2.9.1_ondxtwf5lqq5g76dzmsmwamaca/node_modules/@segment/analytics-react-native`)"
+  - "sovran-react-native (from `../../../node_modules/.pnpm/@segment+sovran-react-native@0.4.5_ondxtwf5lqq5g76dzmsmwamaca/node_modules/@segment/sovran-react-native`)"
   - "storyly-react-native (from `../../../node_modules/.pnpm/storyly-react-native@1.26.2_ondxtwf5lqq5g76dzmsmwamaca/node_modules/storyly-react-native`)"
   - "TcpSockets (from `../../../node_modules/.pnpm/react-native-tcp@4.0.0_frdjcnsdohx4blxdmaawwvdihy_react-native@0.68.5/node_modules/react-native-tcp`)"
   - "Yoga (from `../../../node_modules/.pnpm/react-native@0.68.5_qiqqwmyv63yhnuboofexv3s7x4/node_modules/react-native/ReactCommon/yoga`)"
@@ -862,7 +862,7 @@ EXTERNAL SOURCES:
   react-native-adjust:
     :path: "../../../node_modules/.pnpm/react-native-adjust@4.29.6/node_modules/react-native-adjust"
   react-native-appboy-sdk:
-    :path: "../../../node_modules/.pnpm/react-native-appboy-sdk@1.39.0/node_modules/react-native-appboy-sdk"
+    :path: "../../../node_modules/.pnpm/react-native-appboy-sdk@1.40.0/node_modules/react-native-appboy-sdk"
   react-native-biometrics:
     :path: "../../../node_modules/.pnpm/react-native-biometrics@3.0.1_react-native@0.68.5/node_modules/react-native-biometrics"
   react-native-ble-plx:
@@ -880,7 +880,7 @@ EXTERNAL SOURCES:
   react-native-netinfo:
     :path: "../../../node_modules/.pnpm/@react-native-community+netinfo@6.2.1_react-native@0.68.5/node_modules/@react-native-community/netinfo"
   react-native-pager-view:
-    :path: "../../../node_modules/.pnpm/react-native-pager-view@6.0.2_ondxtwf5lqq5g76dzmsmwamaca/node_modules/react-native-pager-view"
+    :path: "../../../node_modules/.pnpm/react-native-pager-view@6.1.0_ondxtwf5lqq5g76dzmsmwamaca/node_modules/react-native-pager-view"
   react-native-performance:
     :path: "../../../node_modules/.pnpm/react-native-performance@3.1.2_react-native@0.68.5/node_modules/react-native-performance"
   react-native-randombytes:
@@ -956,15 +956,15 @@ EXTERNAL SOURCES:
   RNSentry:
     :path: "../../../node_modules/.pnpm/@sentry+react-native@4.2.4_ondxtwf5lqq5g76dzmsmwamaca/node_modules/@sentry/react-native"
   RNShare:
-    :path: "../../../node_modules/.pnpm/react-native-share@7.9.1/node_modules/react-native-share"
+    :path: "../../../node_modules/.pnpm/react-native-share@7.9.0/node_modules/react-native-share"
   RNSVG:
     :path: "../../../node_modules/.pnpm/react-native-svg@12.3.0_ondxtwf5lqq5g76dzmsmwamaca/node_modules/react-native-svg"
   RNVectorIcons:
     :path: "../../../node_modules/.pnpm/react-native-vector-icons@8.1.0/node_modules/react-native-vector-icons"
   segment-analytics-react-native:
-    :path: "../../../node_modules/.pnpm/@segment+analytics-react-native@2.9.0_ondxtwf5lqq5g76dzmsmwamaca/node_modules/@segment/analytics-react-native"
+    :path: "../../../node_modules/.pnpm/@segment+analytics-react-native@2.9.1_ondxtwf5lqq5g76dzmsmwamaca/node_modules/@segment/analytics-react-native"
   sovran-react-native:
-    :path: "../../../node_modules/.pnpm/@segment+sovran-react-native@0.4.4_ondxtwf5lqq5g76dzmsmwamaca/node_modules/@segment/sovran-react-native"
+    :path: "../../../node_modules/.pnpm/@segment+sovran-react-native@0.4.5_ondxtwf5lqq5g76dzmsmwamaca/node_modules/@segment/sovran-react-native"
   storyly-react-native:
     :path: "../../../node_modules/.pnpm/storyly-react-native@1.26.2_ondxtwf5lqq5g76dzmsmwamaca/node_modules/storyly-react-native"
   TcpSockets:
@@ -1033,7 +1033,7 @@ SPEC CHECKSUMS:
   React-jsinspector: eb202e43b3879aba9a14f3f65788aec85d4e1ea9
   React-logger: 98f663b292a60967ebbc6d803ae96c1381183b6d
   react-native-adjust: 8152efdf7a2e94a85ce427f2096b4167f2824273
-  react-native-appboy-sdk: 4400ab090eff57f5d4a2381e994ac2fb1f68a0aa
+  react-native-appboy-sdk: 60b4dbb70486426ccc00cd04ab105f8f9afc83fa
   react-native-biometrics: 352e5a794bfffc46a0c86725ea7dc62deb085bdc
   react-native-ble-plx: f10240444452dfb2d2a13a0e4f58d7783e92d76e
   react-native-config: 72d948053a442779b3178fddd571e37f118ef606
@@ -1042,7 +1042,7 @@ SPEC CHECKSUMS:
   react-native-image-crop-tools: 06b171ac13f1cd520e633a0d190c00f664b4cb79
   react-native-image-picker: cd420f97f6ed6ff74fc4686d27dbcfdbd051db91
   react-native-netinfo: 3d3769f0d65de15c83a9bf1346f8be71de5a24bf
-  react-native-pager-view: 592421df0259bf7a7a4fe85b74c24f3f39905605
+  react-native-pager-view: 7abf89f9834d9a4021b2fb6a5ef2abff570b46fb
   react-native-performance: e66c3730f9e463b959dc21ff38fd2c8b8e53ea79
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
   react-native-restart: 45c8dca02491980f2958595333cbccd6877cb57e
@@ -1080,15 +1080,15 @@ SPEC CHECKSUMS:
   RNReanimated: 64573e25e078ae6bec03b891586d50b9ec284393
   RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
   RNSentry: 7495ba091f09f12902d8cf916024efd99b058efe
-  RNShare: a5dc3b9c53ddc73e155b8cd9a94c70c91913c43c
+  RNShare: be91a5c149585affb02c25b351bd07ba927c7006
   RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
-  segment-analytics-react-native: a66ad0fc52b657774ea8b53410f19d14b595ffd2
+  segment-analytics-react-native: 36a0e668c91fe9dc35a31079493d504c45ebf8d8
   Sentry: a0d4563fa4ddacba31fdcc35daaa8573d87224d6
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
-  sovran-react-native: 5f9715a62b50008d72c0cf904cb08c8377777b62
+  sovran-react-native: fd3dc8f1a4b14acdc4ad25fc6b4ac4f52a2a2a15
   Storyly: 9f7694d816cbe22d1d5604b7653e75feabf1915f
   storyly-react-native: 2e2e21c3b8d966327659948ab1bed55e1e05127c
   TcpSockets: 4ef55305239923b343ed0a378b1fac188b1373b0

apps/ledger-live-mobile/package.json

@@ -95,7 +95,7 @@
     "@react-navigation/bottom-tabs": "^6.4.0",
     "@react-navigation/devtools": "^6.0.10",
     "@react-navigation/elements": "^1.3.6",
-    "@react-navigation/material-top-tabs": "^6.2.4",
+    "@react-navigation/material-top-tabs": "^6.3.0",
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/stack": "^6.3.1",
     "@segment/analytics-react-native": "^2.9.0",
@@ -160,7 +160,7 @@
     "react-native-modal": "^13.0.0",
     "react-native-navigation-bar-color": "^2.0.1",
     "react-native-os": "^1.2.6",
-    "react-native-pager-view": "^6.0.0",
+    "react-native-pager-view": "^6.0.1",
     "react-native-qrcode-svg": "6.1.1",
     "react-native-randombytes": "^3.6.1",
     "react-native-reanimated": "^2.8.0",
@@ -172,14 +172,14 @@
     "react-native-slider": "^0.11.0",
     "react-native-splash-screen": "3.2.0",
     "react-native-svg": "^12.1.1",
-    "react-native-tab-view": "3.1.1",
+    "react-native-tab-view": "^3.3.0",
     "react-native-tcp": "^4.0.0",
     "react-native-text-input-mask": "^3.1.4",
     "react-native-udp": "^4.1.4",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-vector-icons": "^8.1.0",
     "react-native-version-number": "^0.3.6",
-    "react-native-video": "^5.2.0",
+    "react-native-video": "5.2.0",
     "react-native-webview": "^11.17.1",
     "react-redux": "^7.2.9",
     "redux": "^4.1.2",

apps/ledger-live-mobile/src/actions/settings.ts

@@ -60,7 +60,9 @@ import {
   SettingsUnhideNftCollectionPayload,
   SettingsUpdateCurrencyPayload,
   SettingsActionTypes,
+  SettingsSetWalletTabNavigatorLastVisitedTabPayload,
 } from "./types";
+import { WalletTabNavigatorStackParamList } from "../components/RootNavigator/types/WalletTabNavigator";
 
 // FIXME: NEVER USED BY ANYONE, DROP ?
 const setExchangePairsAction = createAction<SettingsSetPairsPayload>(
@@ -447,6 +449,17 @@ export const setNotifications = (
     notifications,
   });
 
+const setWalletTabNavigatorLastVisitedTabAction =
+  createAction<SettingsSetWalletTabNavigatorLastVisitedTabPayload>(
+    SettingsActionTypes.WALLET_TAB_NAVIGATOR_LAST_VISITED_TAB,
+  );
+export const setWalletTabNavigatorLastVisitedTab = (
+  walletTabNavigatorLastVisitedTab: keyof WalletTabNavigatorStackParamList,
+) =>
+  setWalletTabNavigatorLastVisitedTabAction({
+    walletTabNavigatorLastVisitedTab,
+  });
+
 const dangerouslyOverrideStateAction =
   createAction<SettingsDangerouslyOverrideStatePayload>(
     SettingsActionTypes.DANGEROUSLY_OVERRIDE_STATE,

apps/ledger-live-mobile/src/actions/types.ts

@@ -244,6 +244,7 @@ export enum SettingsActionTypes {
   SET_FIRST_CONNECTION_HAS_DEVICE = "SET_FIRST_CONNECTION_HAS_DEVICE",
   SET_NOTIFICATIONS = "SET_NOTIFICATIONS",
   RESET_SWAP_LOGIN_AND_KYC_DATA = "RESET_SWAP_LOGIN_AND_KYC_DATA",
+  WALLET_TAB_NAVIGATOR_LAST_VISITED_TAB = "WALLET_TAB_NAVIGATOR_LAST_VISITED_TAB",
 }
 
 export type SettingsImportPayload = Partial<SettingsState>;
@@ -377,6 +378,10 @@ export type SettingsSetFirstConnectHasDeviceUpdatedPayload = Pick<
 export type SettingsSetNotificationsPayload = {
   notifications: Partial<SettingsState["notifications"]>;
 };
+export type SettingsSetWalletTabNavigatorLastVisitedTabPayload = Pick<
+  SettingsState,
+  "walletTabNavigatorLastVisitedTab"
+>;
 export type SettingsDangerouslyOverrideStatePayload = State;
 export type SettingsPayload =
   | SettingsImportPayload

apps/ledger-live-mobile/src/components/Nft/AddNewItemList.tsx

@@ -0,0 +1,48 @@
+import { Flex, Icons, Text } from "@ledgerhq/native-ui";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "styled-components/native";
+import { TouchableOpacity } from "react-native";
+import styled from "@ledgerhq/native-ui/components/styled";
+import ReceiveNFTsModal from "../../screens/Nft/NftGallery/ReceiveNFTsModal";
+import { useReceiveNFTsModal } from "../../screens/Nft/NftGallery/ReceiveNFTsModal.hook";
+
+const StyledTouchableOpacity = styled(TouchableOpacity)`
+  background-color: ${props => props.theme.colors.background.main};
+  margin-bottom: 8;
+  border-radius: 8;
+  height: 160;
+  border-width: 1;
+  border-color: ${props => props.theme.colors.neutral.c60};
+  border-style: dashed;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const AddNewItem = () => {
+  const { colors } = useTheme();
+  const { t } = useTranslation();
+
+  const { openModal, closeModal, isModalOpened } = useReceiveNFTsModal();
+
+  return (
+    <StyledTouchableOpacity onPress={openModal}>
+      <Flex flexDirection="column" alignItems="center" justifyContent="center">
+        <Icons.PlusMedium size={24} color={colors.neutral.c100} />
+        <Text
+          variant="body"
+          fontWeight="semiBold"
+          color={colors.neutral.c100}
+          mt={2}
+          fontSize={14}
+          lineHeight="18px"
+        >
+          {t("nft.gallery.addNew")}
+        </Text>
+      </Flex>
+
+      <ReceiveNFTsModal isOpened={isModalOpened} onClose={closeModal} />
+    </StyledTouchableOpacity>
+  );
+};