LedgerHQ · juan-cortes · Feb 21, 2023 · Feb 21, 2023 · Feb 21, 2023 · Feb 21, 2023
diff --git a/.changeset/lazy-paws-wave.md b/.changeset/lazy-paws-wave.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Fix up some warnings at launch
diff --git a/.changeset/new-hounds-count.md b/.changeset/new-hounds-count.md
@@ -0,0 +1,5 @@
+---
+"@ledgerhq/native-ui": patch
+---
+
+Remove cycle dependencies
diff --git a/.changeset/stupid-students-develop.md b/.changeset/stupid-students-develop.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Refactor useIsMounted hook
@@ -15,7 +15,7 @@ import {
   ImageDownloadError,
 } from "@ledgerhq/live-common/customImage/errors";
 import { urlContentToDataUri } from "~/renderer/components/CustomImage/shared";
-import { useIsMounted } from "~/renderer/hooks/useIsMounted";
+import useIsMounted from "@ledgerhq/live-common/hooks/useIsMounted";
 
 type Props = StepProps & {
   onResult: (res: ImageBase64Data) => void;

@@ -36,9 +36,11 @@ export const FirebaseRemoteConfigProvider = ({
         });
         await remoteConfig().fetchAndActivate();
       } catch (error) {
-        console.error(
-          `Failed to fetch Firebase remote config with error: ${error}`,
-        );
+        if (!unmounted) {
+          console.error(
+            `Failed to fetch Firebase remote config with error: ${error}`,
+          );
+        }
       }
       if (!unmounted) {
         setLoaded(true);

@@ -9,10 +9,10 @@ import { useReceiveNFTsModal } from "../../screens/Nft/NftGallery/ReceiveNFTsMod
 
 const StyledTouchableOpacity = styled(TouchableOpacity)`
   background-color: ${props => props.theme.colors.background.main};
-  margin-bottom: 8;
-  border-radius: 8;
-  height: 160;
-  border-width: 1;
+  margin-bottom: 8px;
+  border-radius: 8px;
+  height: 160px;
+  border-width: 1px;
   border-color: ${props => props.theme.colors.neutral.c60};
   border-style: dashed;
   flex-direction: column;

@@ -2,7 +2,7 @@ import { Button, Flex, Link, Text } from "@ledgerhq/native-ui";
 import React, { ReactNode, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AppState, Linking, PermissionsAndroid } from "react-native";
-import { useIsMounted } from "../../helpers/useIsMounted";
+import useIsMounted from "@ledgerhq/live-common/hooks/useIsMounted";
 import QueuedDrawer from "../QueuedDrawer";
 import {
   bluetoothPermissions,

@@ -1,5 +1,5 @@
 import React, { ReactNode, useCallback, useEffect, useState } from "react";
-import { useIsMounted } from "../../helpers/useIsMounted";
+import useIsMounted from "@ledgerhq/live-common/hooks/useIsMounted";
 import LocationRequired from "../LocationRequired";
 import {
   checkLocationPermission,

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Camera } from "expo-camera";
+import useIsMounted from "@ledgerhq/live-common/hooks/useIsMounted";
 import { AppState, Linking } from "react-native";
-import { useIsMounted } from "../../helpers/useIsMounted";
 
 export default function useCameraPermissions() {
   const [permission, requestPermission, checkPermission] =

@@ -74,6 +74,7 @@ if (__DEV__ && process.env.NODE_ENV !== "test") {
         "Warning: componentWillReceiveProps has been renamed",
         "Warning: componentWillUpdate has been renamed",
         "Warning: componentWillMount has been renamed",
+        "exported from 'deprecated-react-native-prop-types'.", // https://github.com/facebook/react-native/issues/33557#issuecomment-1093083115
       ]);
     } catch (e) {
       console.warn(e);

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from "react";
 
 // Stateless hook that returns a function which, when called, indicates if the component
 // using the hook is currently mounted or not
-export const useIsMounted = () => {
+const useIsMounted = () => {
   const mountedRef = useRef(false);
   const isMounted = useCallback(() => mountedRef.current, []);
 
@@ -16,3 +16,5 @@ export const useIsMounted = () => {
 
   return isMounted;
 };
+
+export default useIsMounted;
@@ -12,6 +12,7 @@ import { LiveAppManifest, Loadable } from "../../types";
 import api from "./api";
 import { FilterParams } from "../../filters";
 import { getEnv } from "../../../env";
+import useIsMounted from "../../../hooks/useIsMounted";
 
 const initialState: Loadable<LiveAppRegistry> = {
   isLoading: false,
@@ -74,6 +75,7 @@ export function RemoteLiveAppProvider({
   parameters,
   updateFrequency,
 }: LiveAppProviderProps): JSX.Element {
+  const isMounted = useIsMounted();
   const [state, setState] = useState<Loadable<LiveAppRegistry>>(initialState);
   const [provider, setProvider] = useState<string>(initialProvider);
 
@@ -101,6 +103,7 @@ export function RemoteLiveAppProvider({
         branches,
       });
 
+      if (!isMounted()) return;
       setState(() => ({
         isLoading: false,
         value: {
@@ -114,13 +117,15 @@ export function RemoteLiveAppProvider({
         error: null,
       }));
     } catch (error) {
+      if (!isMounted()) return;
       setState((currentState) => ({
         ...currentState,
         isLoading: false,
         error,
       }));
     }
-  }, [allowDebugApps, allowExperimentalApps, providerURL]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allowDebugApps, allowExperimentalApps, providerURL, isMounted]);
 
   const value: LiveAppContextType = useMemo(
     () => ({

@@ -5,8 +5,9 @@ import styled from "styled-components/native";
 import { CheckAloneMedium } from "@ledgerhq/icons-ui/native";
 
 import { Item, ItemStatus } from "../types";
-import { Flex } from "../..";
-import { Text, ProgressLoader } from "../../..";
+import Flex from "../../Flex";
+import Text from "../../../Text";
+import ProgressLoader from "../../../Loader/ProgressLoader";
 
 export type Props = {
   item: Item;

@@ -5,8 +5,9 @@ import { Theme } from "src/styles/theme";
 import styled from "styled-components/native";
 
 import { Item, ItemStatus } from "../types";
-import { Flex } from "../..";
-import { Text, Tag } from "../../..";
+import Flex from "../../Flex";
+import Text from "../../../Text";
+import Tag from "../../../tags/Tag";
 import TimelineIndicator from "./TimelineIndicator";
 
 export type Props = {

@@ -1,7 +1,7 @@
 import React from "react";
 
 import TimelineItem from "./TimelineItem";
-import { Flex } from "../..";
+import Flex from "../../Flex";
 import { BaseStyledProps } from "src/components/styled";
 import { Item, ItemStatus } from "../types";