feat/FAT-133 Simplified UI

apps/ledger-live-mobile/src/components/DeviceAction/InstallSetOfApps/index.tsx

@@ -3,15 +3,14 @@ import { Trans } from "react-i18next";
 import { createAction } from "@ledgerhq/live-common/lib/hw/actions/app";
 import type { Device } from "@ledgerhq/live-common/hw/actions/types";
 import connectApp from "@ledgerhq/live-common/lib/hw/connectApp";
-import { Flex, ProgressLoader, Text } from "@ledgerhq/native-ui";
+import { Flex, Text } from "@ledgerhq/native-ui";
 import { getDeviceModel } from "@ledgerhq/devices";
 
 import { DeviceActionDefaultRendering } from "..";
 import BottomModal from "../../BottomModal";
 
-import Items from "./Items";
+import Item from "./Item";
 import Confirmation from "./Confirmation";
-import WrappedOverriddenUI from "./WrappedOverriddenUI";
 
 type Props = {
   dependencies?: string[];
@@ -22,13 +21,20 @@ type Props = {
 
 const action = createAction(connectApp);
 
+/**
+ * This component overrides the default rendering for device actions in some
+ * cases, falling back to the default one for the rest. Actions such as user blocking
+ * requests, errors and such will be rendered in a BottomModal whereas installation
+ * progress and loading states will be handled inline as part of the screen where this
+ * this is rendered.
+ */
 const InstallSetOfApps = ({
   dependencies = [],
   device: selectedDevice,
   onResult,
   onError,
 }: Props) => {
-  const [installing, setInstalling] = useState(false);
+  const [userConfirmed, setUserConfirmed] = useState(false);
   const productName = getDeviceModel(selectedDevice.modelId).productName;
 
   const commandRequest = useMemo(
@@ -41,103 +47,88 @@ const InstallSetOfApps = ({
   );
 
   const status: any = action.useHook(
-    installing ? selectedDevice : undefined,
+    userConfirmed ? selectedDevice : undefined,
     commandRequest,
   );
 
   const {
     allowManagerRequestedWording,
     listingApps,
-    unresponsive,
     error,
-    isLoading,
     currentAppOp,
     itemProgress,
     progress,
     opened,
-    device,
     installQueue,
   } = status;
 
   const onWrappedError = useCallback(() => {
-    if (onError) {
+    if (onError && error) {
       onError(error);
     }
   }, [error, onError]);
 
-  if (!installing) {
-    return (
-      <Confirmation
-        productName={productName}
-        onConfirm={() => setInstalling(true)}
-        onReject={() => onResult(false)}
-      />
-    );
-  }
-
   if (opened) {
     onResult(true);
     return null;
   }
 
-  if (listingApps) {
-    return (
-      <WrappedOverriddenUI productName={productName}>
-        <Text variant="bodyLineHeight">
-          <Trans i18nKey="installSetOfApps.ongoing.resolving" />
-        </Text>
-      </WrappedOverriddenUI>
-    );
-  }
-
-  if (
-    !error &&
-    !allowManagerRequestedWording &&
-    (isLoading || (!isLoading && !device) || unresponsive || !currentAppOp)
-  ) {
-    return (
-      <WrappedOverriddenUI productName={productName}>
-        <Flex flexDirection="column">
-          <Text mb={3} variant="bodyLineHeight">
-            <Trans i18nKey="installSetOfApps.ongoing.loading" />
+  return userConfirmed ? (
+    <Flex style={{ height: "100%" }}>
+      <Flex flex={1} alignItems="center" justifyContent="center">
+        <Flex mb={2} alignSelf="flex-start">
+          <Text mb={5} variant="paragraphLineHeight">
+            {listingApps ? (
+              <Trans i18nKey="installSetOfApps.ongoing.resolving" />
+            ) : progress || currentAppOp ? (
+              <Trans
+                i18nKey="installSetOfApps.ongoing.progress"
+                values={{ progress: Math.round(progress * 100) }}
+              />
+            ) : (
+              <Trans i18nKey="installSetOfApps.ongoing.loading" />
+            )}
           </Text>
-          <ProgressLoader infinite radius={20} />
+          {dependencies?.map((appName, i) => (
+            <Item
+              key={appName}
+              i={i}
+              appName={appName}
+              isActive={currentAppOp?.name === appName}
+              installed={progress && !installQueue.includes(appName)}
+              itemProgress={itemProgress}
+            />
+          ))}
         </Flex>
-      </WrappedOverriddenUI>
-    );
-  }
-
-  if (currentAppOp) {
-    return (
-      <WrappedOverriddenUI productName={productName}>
-        <Items
-          dependencies={dependencies}
-          installQueue={installQueue}
-          progress={progress}
-          itemProgress={itemProgress}
-          currentAppOp={currentAppOp}
+      </Flex>
+      <Text textAlign="center" color="neutral.c70">
+        <Trans
+          i18nKey="installSetOfApps.ongoing.disclaimer"
+          values={{ productName }}
         />
-      </WrappedOverriddenUI>
-    );
-  }
-
-  // Fallback for non-overridden UI cases using the default UI
-  return (
-    <BottomModal
-      id="DeviceActionModal"
-      isOpened
-      onClose={onWrappedError}
-      onModalHide={onWrappedError}
-    >
-      <Flex alignItems="center">
-        <Flex flexDirection="row">
-          <DeviceActionDefaultRendering
-            status={status}
-            device={selectedDevice}
-          />
+      </Text>
+      <BottomModal
+        id="DeviceActionModal"
+        isOpened={allowManagerRequestedWording || error}
+        onClose={onWrappedError}
+        onModalHide={onWrappedError}
+      >
+        <Flex alignItems="center">
+          <Flex flexDirection="row">
+            <DeviceActionDefaultRendering
+              status={status}
+              device={selectedDevice}
+            />
+          </Flex>
         </Flex>
-      </Flex>
-    </BottomModal>
+      </BottomModal>
+    </Flex>
+  ) : (
+    <Confirmation
+      productName={productName}
+      onConfirm={() => setUserConfirmed(true)}
+      onReject={() => onResult(false)}
+    />
   );
 };