Merge pull request #1979 from LedgerHQ/LL-7621

LL-7621 Less intrusive fw update banner
LedgerHQ · Jan 15, 2022 · 73c47eb · 73c47eb
2 parents a540ab6 + 89d95c8
commit 73c47eb
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 135 deletions.
diff --git a/src/actions/appstate.js b/src/actions/appstate.js
@@ -14,3 +14,7 @@ export const syncIsConnected = (isConnected: boolean | null) => (
     });
   }
 };
+
+export const setHasConnectedDevice = (
+  hasConnectedDevice: boolean,
+) => dispatch => dispatch({ type: "HAS_CONNECTED_DEVICE", hasConnectedDevice });
diff --git a/src/components/FirmwareUpdateBanner.js b/src/components/FirmwareUpdateBanner.js
@@ -23,6 +23,7 @@ import {
   lastSeenDeviceSelector,
   hasCompletedOnboardingSelector,
 } from "../reducers/settings";
+import { hasConnectedDeviceSelector } from "../reducers/appstate";
 import IconExclamation from "../icons/ExclamationCircleFull";
 import { BaseButton as Button } from "./Button";
 import IconDownload from "../icons/Download";
@@ -34,6 +35,7 @@ import LText from "./LText";
 
 const FirmwareUpdateBanner = () => {
   const lastSeenDevice: DeviceModelInfo = useSelector(lastSeenDeviceSelector);
+  const hasConnectedDevice = useSelector(hasConnectedDeviceSelector);
   const hasCompletedOnboarding: boolean = useSelector(
     hasCompletedOnboardingSelector,
   );
@@ -68,101 +70,95 @@ const FirmwareUpdateBanner = () => {
     setShowBanner(false);
   };
 
-  return (
-    showBanner &&
-    hasCompletedOnboarding && (
-      <>
-        <Animatable.View
-          animation="fadeInDownBig"
-          easing="ease-out-expo"
-          useNativeDriver
-          style={styles.banner.root}
+  return showBanner && hasConnectedDevice && hasCompletedOnboarding ? (
+    <>
+      <Animatable.View
+        animation="fadeInDownBig"
+        easing="ease-out-expo"
+        useNativeDriver
+        style={styles.banner.root}
+      >
+        <TouchableHighlight
+          style={[
+            styles.banner.snack,
+            {
+              backgroundColor: colors.warning,
+            },
+          ]}
+          underlayColor={colors.darkWarning}
+          onPress={onPress}
         >
-          <TouchableHighlight
-            style={[
-              styles.banner.snack,
-              {
-                backgroundColor: colors.warning,
-              },
-            ]}
-            underlayColor={colors.darkWarning}
-            onPress={onPress}
-          >
-            <>
-              <View style={styles.banner.iconContainer}>
-                <IconNano color={colors.white} size={16} />
-              </View>
-              <LText
-                semiBold
-                style={[styles.banner.textContainer, { color: colors.white }]}
+          <>
+            <View style={styles.banner.iconContainer}>
+              <IconNano color={colors.white} size={16} />
+            </View>
+            <LText
+              semiBold
+              style={[styles.banner.textContainer, { color: colors.white }]}
+            >
+              {t("FirmwareUpdate.newVersion", { version })}
+            </LText>
+            <View style={styles.banner.closeContainer}>
+              <TouchableOpacity
+                onPress={onDismissBanner}
+                style={styles.banner.closeIcon}
               >
-                {t("FirmwareUpdate.newVersion", { version })}
-              </LText>
-              <View style={styles.banner.closeContainer}>
-                <TouchableOpacity
-                  onPress={onDismissBanner}
-                  style={styles.banner.closeIcon}
-                >
-                  <IconClose color={colors.white} size={16} />
-                </TouchableOpacity>
-              </View>
-            </>
-          </TouchableHighlight>
-        </Animatable.View>
+                <IconClose color={colors.white} size={16} />
+              </TouchableOpacity>
+            </View>
+          </>
+        </TouchableHighlight>
+      </Animatable.View>
 
-        <BottomModal
+      <BottomModal
+        style={[
+          styles.drawer.root,
+          {
+            backgroundColor: colors.card,
+          },
+        ]}
+        isOpened={showDrawer}
+        onClose={onCloseDrawer}
+      >
+        <TouchableOpacity
+          style={styles.drawer.closeIcon}
+          onPress={onCloseDrawer}
+        >
+          <IconClose size={18} />
+        </TouchableOpacity>
+
+        <View
           style={[
-            styles.drawer.root,
+            styles.drawer.roundIconContainer,
             {
-              backgroundColor: colors.card,
+              backgroundColor: rgba(colors.live, 0.15),
             },
           ]}
-          isOpened={showDrawer}
-          onClose={onCloseDrawer}
         >
-          <TouchableOpacity
-            style={styles.drawer.closeIcon}
-            onPress={onCloseDrawer}
-          >
-            <IconClose size={18} />
-          </TouchableOpacity>
-
-          <View
-            style={[
-              styles.drawer.roundIconContainer,
-              {
-                backgroundColor: rgba(colors.live, 0.15),
-              },
-            ]}
-          >
-            <IconDownload color={colors.live} size={30} />
-            <IconExclamation style={styles.drawer.exclamationIcon} size={30} />
-          </View>
+          <IconDownload color={colors.live} size={30} />
+          <IconExclamation style={styles.drawer.exclamationIcon} size={30} />
+        </View>
 
-          <LText
-            semiBold
-            style={[styles.drawer.textCenter, styles.drawer.title]}
-          >
-            {t("FirmwareUpdate.drawerUpdate.title")}
-          </LText>
-          <LText style={[styles.drawer.textCenter, styles.drawer.description]}>
-            {t("FirmwareUpdate.drawerUpdate.description")}
-          </LText>
+        <LText semiBold style={[styles.drawer.textCenter, styles.drawer.title]}>
+          {t("FirmwareUpdate.drawerUpdate.title")}
+        </LText>
+        <LText style={[styles.drawer.textCenter, styles.drawer.description]}>
+          {t("FirmwareUpdate.drawerUpdate.description")}
+        </LText>
 
-          <View style={styles.drawer.buttonContainer}>
-            <Button
-              type="primary"
-              title={t("common.close")}
-              colors={colors}
-              useTouchable={useTouchable}
-              isFocused={true}
-              onPress={onCloseDrawer}
-            />
-          </View>
-        </BottomModal>
-      </>
-    )
-  );
+        <View style={styles.drawer.buttonContainer}>
+          <Button
+            type="primary"
+            title={t("common.close")}
+            colors={colors}
+            useTouchable={useTouchable}
+            isFocused={true}
+            onPress={onCloseDrawer}
+          />
+        </View>
+      </BottomModal>
+    </>
+  ) : null;
 };
 
 const styles = {

diff --git a/src/components/SelectDevice/index.js b/src/components/SelectDevice/index.js
@@ -2,13 +2,14 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { StyleSheet, View, Platform } from "react-native";
 import Config from "react-native-config";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { Trans } from "react-i18next";
 import { useNavigation, useTheme } from "@react-navigation/native";
 import { discoverDevices } from "@ledgerhq/live-common/lib/hw";
 import type { TransportModule } from "@ledgerhq/live-common/lib/hw";
 import type { Device } from "@ledgerhq/live-common/lib/hw/actions/types";
 import Icon from "react-native-vector-icons/dist/Feather";
+import { setHasConnectedDevice } from "../../actions/appstate";
 import { ScreenName } from "../../const";
 import { knownDevicesSelector } from "../../reducers/ble";
 import DeviceItem from "./DeviceItem";
@@ -43,6 +44,7 @@ export default function SelectDevice({
   const { colors } = useTheme();
   const navigation = useNavigation();
   const knownDevices = useSelector(knownDevicesSelector);
+  const dispatch = useDispatch();
 
   const handleOnSelect = useCallback(
     deviceInfo => {
@@ -51,9 +53,11 @@ export default function SelectDevice({
         modelId,
         connectionType: wired ? "USB" : "BLE",
       });
+      // Nb consider a device selection enough to show the fw update banner in portfolio
+      dispatch(setHasConnectedDevice(true));
       onSelect(deviceInfo);
     },
-    [onSelect],
+    [dispatch, onSelect],
   );
 
   const [devices, setDevices] = useState([]);

diff --git a/src/index.js b/src/index.js
@@ -81,7 +81,6 @@ import NotificationsProvider from "./screens/NotificationCenter/NotificationsPro
 import SnackbarContainer from "./screens/NotificationCenter/Snackbar/SnackbarContainer";
 import NavBarColorHandler from "./components/NavBarColorHandler";
 import { setOsTheme, setTheme } from "./actions/settings";
-import FirmwareUpdateBanner from "./components/FirmwareUpdateBanner";
 
 const themes = {
   light: lightTheme,
@@ -458,7 +457,6 @@ export default class Root extends Component<
                                 >
                                   <ButtonUseTouchable.Provider value={true}>
                                     <OnboardingContextProvider>
-                                      <FirmwareUpdateBanner />
                                       <ToastProvider>
                                         <NotificationsProvider>
                                           <SnackbarContainer />

diff --git a/src/reducers/appstate.js b/src/reducers/appstate.js
@@ -11,24 +11,33 @@ export type AsyncState = {
 
 export type AppState = {
   isConnected: boolean | null,
+  hasConnectedDevice: boolean,
 };
 
 const initialState: AppState = {
   isConnected: true,
+  hasConnectedDevice: false, // NB for this current session, have we done a device action with a device.
 };
 
 const handlers: Object = {
   SYNC_IS_CONNECTED: (
     state: AppState,
     { isConnected }: { isConnected: boolean | null },
   ) => ({
+    ...state,
     isConnected,
   }),
+  HAS_CONNECTED_DEVICE: (
+    state: AppState,
+    { hasConnectedDevice }: { hasConnectedDevice: boolean },
+  ) => ({ ...state, hasConnectedDevice }),
 };
 
 // Selectors
 
 export const isConnectedSelector = (state: State) => state.appstate.isConnected;
+export const hasConnectedDeviceSelector = (state: State) =>
+  state.appstate.hasConnectedDevice;
 
 const globalNetworkDown = new NetworkDown();