From f50f6315ae5951912d138b11bde9a8e395283db9 Mon Sep 17 00:00:00 2001
From: Juan Cortes Ross <juan@bohem.io>
Date: Mon, 15 Nov 2021 12:20:01 +0100
Subject: [PATCH] LL-7621 Less intrusive fw update banner

---
 src/actions/appstate.js                |   4 +
 src/components/FirmwareUpdateBanner.js | 166 ++++++++++++-------------
 src/components/SelectDevice/index.js   |   8 +-
 src/index.js                           |   2 -
 src/reducers/appstate.js               |   9 ++
 src/screens/Portfolio/index.js         |  96 +++++++-------
 6 files changed, 150 insertions(+), 135 deletions(-)

diff --git a/src/actions/appstate.js b/src/actions/appstate.js
index 39df46e9b1..bff413eeb5 100644
--- 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
index c8666f0816..5786a1821f 100644
--- 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
index 01a9eddb16..9501356e39 100644
--- 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
index 108d87e77e..525322db16 100644
--- a/src/index.js
+++ b/src/index.js
@@ -78,7 +78,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,
@@ -454,7 +453,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
index af12e06229..63c718fcaf 100644
--- a/src/reducers/appstate.js
+++ b/src/reducers/appstate.js
@@ -11,10 +11,12 @@ 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 = {
@@ -22,13 +24,20 @@ const handlers: Object = {
     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();
 
diff --git a/src/screens/Portfolio/index.js b/src/screens/Portfolio/index.js
index 1b836dd63f..66ebc5e9e5 100644
--- a/src/screens/Portfolio/index.js
+++ b/src/screens/Portfolio/index.js
@@ -33,6 +33,7 @@ import { PortfolioHistoryList } from "./PortfolioHistory";
 
 import FabActions from "../../components/FabActions";
 import LText from "../../components/LText";
+import FirmwareUpdateBanner from "../../components/FirmwareUpdateBanner";
 
 export { default as PortfolioTabIcon } from "./TabIcon";
 
@@ -162,53 +163,56 @@ export default function PortfolioScreen({ navigation }: Props) {
   );
 
   return (
-    <SafeAreaView
-      style={[
-        styles.root,
-        {
-          paddingTop: extraStatusBarPadding,
-          backgroundColor: colors.background,
-        },
-      ]}
-    >
-      {!showingPlaceholder ? (
-        <StickyHeader
-          scrollY={scrollY}
-          portfolio={portfolio}
-          counterValueCurrency={counterValueCurrency}
-        />
-      ) : null}
-
-      <RequireTerms />
-
-      <TrackScreen category="Portfolio" accountsLength={accounts.length} />
-
-      {areAccountsEmpty && <Header />}
-
-      <AnimatedFlatListWithRefreshControl
-        ref={ref}
-        data={data}
-        style={styles.inner}
-        renderItem={({ item }) => item}
-        keyExtractor={(item, index) => String(index)}
-        showsVerticalScrollIndicator={false}
-        stickyHeaderIndices={[2]}
-        onScroll={Animated.event(
-          [
-            {
-              nativeEvent: {
-                contentOffset: { y: scrollY },
+    <>
+      <FirmwareUpdateBanner />
+      <SafeAreaView
+        style={[
+          styles.root,
+          {
+            paddingTop: extraStatusBarPadding,
+            backgroundColor: colors.background,
+          },
+        ]}
+      >
+        {!showingPlaceholder ? (
+          <StickyHeader
+            scrollY={scrollY}
+            portfolio={portfolio}
+            counterValueCurrency={counterValueCurrency}
+          />
+        ) : null}
+
+        <RequireTerms />
+
+        <TrackScreen category="Portfolio" accountsLength={accounts.length} />
+
+        {areAccountsEmpty && <Header />}
+
+        <AnimatedFlatListWithRefreshControl
+          ref={ref}
+          data={data}
+          style={styles.inner}
+          renderItem={({ item }) => item}
+          keyExtractor={(item, index) => String(index)}
+          showsVerticalScrollIndicator={false}
+          stickyHeaderIndices={[2]}
+          onScroll={Animated.event(
+            [
+              {
+                nativeEvent: {
+                  contentOffset: { y: scrollY },
+                },
               },
-            },
-          ],
-          { useNativeDriver: true },
-        )}
-        testID={
-          accounts.length ? "PortfolioAccountsList" : "PortfolioEmptyAccount"
-        }
-      />
-      <MigrateAccountsBanner />
-    </SafeAreaView>
+            ],
+            { useNativeDriver: true },
+          )}
+          testID={
+            accounts.length ? "PortfolioAccountsList" : "PortfolioEmptyAccount"
+          }
+        />
+        <MigrateAccountsBanner />
+      </SafeAreaView>
+    </>
   );
 }