FAT-130 FAT-119 FAT-129 Multiple prompts for changing device language (…

…#742)

* FAT-127 Refresh language after installation + disable button when selected lang is the current one

* FAT-127 Fix unit test name

* FAT-127 Remove useless change in comment place

* FAT-127 Hide language setting under feature flag

* FAT-127 Fix linting

* FAT-127 Add changeset for mobile

* FAT-127 Fix linting

* FAT-127 Pre-filter available languages for device on manager api

* FAT-127 Fix endless installation of languages

* FAT-127 Move device version retrieval to inside manager api

* FAT-127 Fix untranslated string

* FAT-127 Treat special case for english inside the command

* FAT-127 Retrieve available languages for device

* FAT-127 Move divider to design system repo

* FAT-126 Add missing dependency to useCallback hook

* FAT-127 Move useAvailableLanguagesForDevice hook to manager folder

* FAT-127 Fix typo and deprecated observable creation

* FAT-127 Temporarily enable device localization feature flag

* FAT-127 Correctly enable the localization feature flag

* FAT-127 Fix typo in function name

* FAT-127 Minor code improvements

* FAT-127 Extract attemptToQuitApp to common place

* FAT-127 Use identifytargetid instead of hardcoded table

* FAT-127 Fix bug in supported target id identification

* FAT-127 Fix bug where device doesn't quit app before installing language

* FAT-127 Add translations for custom errors

* FAT-127 Fix font weight on successful language install message

* FAT-127 Fix hidden device action modal bug on iOS

* FAT-127 Disable language button when installing apps

* FAT-130 Extract language device action to be reused

* FAT-120 WIP Prep work for recognizing the potential device language change

* FAT-130 Trigger device language change from live language change flow

* FAT-130 formatting + feature flag placeholder

* FAT-130 Add changeset

* LIVE-542 Add full device action logic for device localization

* LIVE-542 Add changelog

* LIVE-542 Fix linting

* LIVE-542 Check if it's osu before getting extra info from getVersion

* LIVE-542 Add version and model checks for parsing getVersion data

* LIVE-542 Fix version check for the experimental firmware

* FAT-127 Add device language component that displays only if supported

* FAT-127 Implemlent language selection screen UI

* FAT-127 Remove useless console.log

* FAT-127 First working version of the installation flow

* FAT-127 Add new unit tests for getDeviceInfo

* FAT-127 Refresh language after installation + disable button when selected lang is the current one

* FAT-127 Fix unit test name

* FAT-127 Remove useless change in comment place

* FAT-127 Hide language setting under feature flag

* FAT-127 Fix linting

* FAT-127 Add changeset for mobile

* FAT-127 Fix linting

* FAT-127 Pre-filter available languages for device on manager api

* FAT-127 Fix endless installation of languages

* FAT-127 Move device version retrieval to inside manager api

* FAT-127 Fix untranslated string

* FAT-127 Treat special case for english inside the command

* FAT-127 Retrieve available languages for device

* FAT-127 Move divider to design system repo

* FAT-126 Add missing dependency to useCallback hook

* FAT-127 Move useAvailableLanguagesForDevice hook to manager folder

* FAT-127 Fix typo and deprecated observable creation

* FAT-127 Temporarily enable device localization feature flag

* FAT-127 Correctly enable the localization feature flag

* FAT-127 Fix typo in function name

* FAT-127 Minor code improvements

* FAT-127 Extract attemptToQuitApp to common place

* FAT-127 Use identifytargetid instead of hardcoded table

* FAT-127 Fix bug in supported target id identification

* FAT-127 Fix bug where device doesn't quit app before installing language

* FAT-127 Add translations for custom errors

* FAT-127 Fix font weight on successful language install message

* FAT-127 Fix hidden device action modal bug on iOS

* FAT-127 Disable language button when installing apps

* FAT-127 Reactivate the use of the devicelocalization feature flag

* FAT-127 Add changeset for UI lib

* FAT-127 Support for lo4 test firmware + use of prod URLs

* FAT-127 Remove left over console.log

* FAT-130 Extract language device action to be reused

* FAT-120 WIP Prep work for recognizing the potential device language change

* FAT-130 Trigger device language change from live language change flow

* FAT-130 formatting + feature flag placeholder

* FAT-130 Add changeset

* FAT-119 WIP: initial implementation for the language prompt when updating the firmware

* FAT-119 Improve prompt wording + prompt whenever language is available for the 1st time

* FAT-119 Fix logic for when language is available for the first time

* FAT-119 Replace Divider by the one from the design system

* LIVE-542 Add full device action logic for device localization

* LIVE-542 Add changelog

* LIVE-542 Fix linting

* LIVE-542 Check if it's osu before getting extra info from getVersion

* LIVE-542 Add version and model checks for parsing getVersion data

* LIVE-542 Fix version check for the experimental firmware

* FAT-127 Add device language component that displays only if supported

* FAT-127 Implemlent language selection screen UI

* FAT-127 Remove useless console.log

* FAT-127 First working version of the installation flow

* FAT-127 Add new unit tests for getDeviceInfo

* FAT-127 Refresh language after installation + disable button when selected lang is the current one

* FAT-127 Fix unit test name

* FAT-127 Remove useless change in comment place

* FAT-127 Hide language setting under feature flag

* FAT-127 Fix linting

* FAT-127 Add changeset for mobile

* FAT-127 Fix linting

* FAT-127 Pre-filter available languages for device on manager api

* FAT-127 Fix endless installation of languages

* FAT-127 Move device version retrieval to inside manager api

* FAT-127 Fix untranslated string

* FAT-127 Treat special case for english inside the command

* FAT-127 Retrieve available languages for device

* FAT-127 Move divider to design system repo

* FAT-126 Add missing dependency to useCallback hook

* FAT-127 Move useAvailableLanguagesForDevice hook to manager folder

* FAT-127 Fix typo and deprecated observable creation

* FAT-127 Temporarily enable device localization feature flag

* FAT-127 Correctly enable the localization feature flag

* FAT-127 Fix typo in function name

* FAT-127 Minor code improvements

* FAT-127 Extract attemptToQuitApp to common place

* FAT-127 Use identifytargetid instead of hardcoded table

* FAT-127 Fix bug in supported target id identification

* FAT-127 Fix bug where device doesn't quit app before installing language

* FAT-127 Add translations for custom errors

* FAT-127 Fix font weight on successful language install message

* FAT-127 Fix hidden device action modal bug on iOS

* FAT-127 Disable language button when installing apps

* FAT-127 Reactivate the use of the devicelocalization feature flag

* FAT-127 Add changeset for UI lib

* FAT-127 Support for lo4 test firmware + use of prod URLs

* FAT-127 Remove left over console.log

* FAT-127 Fix types libraries references

* FAT-127 Fix linting

* FAT-127 Update type docs

* FAT-127 Fix linting

* FAT-127 Fix linting

* FAT-130 fix wrong imports

* FAT-119 Fix imports

* FAT-129 First attempt at reinstalling language after update

* FAT-129 Refresh device info in the manager when the language changes

* FAT-129 WIP failed attempt at reinstall language with some tips

* FAT-119 Split change language action and change language modal

* LIVE-542 Add full device action logic for device localization

* LIVE-542 Add changelog

* LIVE-542 Fix linting

* LIVE-542 Check if it's osu before getting extra info from getVersion

* LIVE-542 Add version and model checks for parsing getVersion data

* LIVE-542 Fix version check for the experimental firmware

* FAT-127 Add device language component that displays only if supported

* FAT-127 Implemlent language selection screen UI

* FAT-127 Remove useless console.log

* FAT-127 First working version of the installation flow

* FAT-127 Add new unit tests for getDeviceInfo

* FAT-127 Refresh language after installation + disable button when selected lang is the current one

* FAT-127 Fix unit test name

* FAT-127 Remove useless change in comment place

* FAT-127 Hide language setting under feature flag

* FAT-127 Fix linting

* FAT-127 Add changeset for mobile

* FAT-127 Fix linting

* FAT-127 Pre-filter available languages for device on manager api

* FAT-127 Fix endless installation of languages

* FAT-127 Move device version retrieval to inside manager api

* FAT-127 Fix untranslated string

* FAT-127 Treat special case for english inside the command

* FAT-127 Retrieve available languages for device

* FAT-127 Move divider to design system repo

* FAT-126 Add missing dependency to useCallback hook

* FAT-127 Move useAvailableLanguagesForDevice hook to manager folder

* FAT-127 Fix typo and deprecated observable creation

* FAT-127 Temporarily enable device localization feature flag

* FAT-127 Correctly enable the localization feature flag

* FAT-127 Fix typo in function name

* FAT-127 Minor code improvements

* FAT-127 Extract attemptToQuitApp to common place

* FAT-127 Use identifytargetid instead of hardcoded table

* FAT-127 Fix bug in supported target id identification

* FAT-127 Fix bug where device doesn't quit app before installing language

* FAT-127 Add translations for custom errors

* FAT-127 Fix font weight on successful language install message

* FAT-127 Fix hidden device action modal bug on iOS

* FAT-127 Disable language button when installing apps

* FAT-127 Reactivate the use of the devicelocalization feature flag

* FAT-127 Add changeset for UI lib

* FAT-127 Support for lo4 test firmware + use of prod URLs

* FAT-127 Remove left over console.log

* FAT-127 Fix types libraries references

* FAT-127 Fix linting

* FAT-127 Update type docs

* FAT-127 Fix linting

* FAT-127 Fix linting

* FAT-127 Activate feature flag for QA

* FAT-127 Reactivate feature flag and remove left-over comment

* FAT-119 Finish up implementation of the reinstall after update feature

* FAT-130 Fix linting

* FAT-127 fix pnpm lock

* FAT-127 Update supported firmware versions

* FAT-130 Add new localization firmware and fix double modal on prompt

* FAT-130 Don't show device language prompt when there's no change to the language

* FAT-130 Remove left-over console.log

* FAT-130 fix bug on language reinstallation after fw update

* FAT-130 Refresh device info after language

* FAT-130 Refresh device language when an error occurs

* FAT-130 Refresh device info after firwmare update

* FAT-130 Prevent backdrop click on prompt while language is installing

* FAT-130 Update pnpm-lock

* FAT-130 Update pnpm-lock

* FAT-130 Add device localization feature flag to the edit tool

* FAT-130 Fix pnpm-lock file

* FAT-253 Analytics for device localization (#947)

* FAT-253 Add events to changing device language from the manager

* FAT-253 Add device language to common analytics properties

* FAT-253 Fix bug on language installed tracking

* FAT-253 Add tracking events to live language prompt

* FAT-253 Add tracking events to device language changes on fw update

* FAT-253 Add tracking to device language installation errors

* FAT-130 Fix crash on live language change prompt

* FAT-130 Fix deviceLanguage on analytics events

* FAT-130 Add RC firmware versions to the supported list

* FAT-130 Add link to 'learn more' button

* FAT-130 Fix multiple linting issues

* FAT-130 Fix linting

* FAT-371 Integrate design and wording feedbacks

* FAT-130 Update lock file

* FAT-130 Increase bluetooth time out to 60s

* FAT-130 Fix prettier

* FAT-130 Change device polling time out to 30s

* FAT-130 Fix prettier

* FAT-130 Fix linting

* FAT-130 Fix copy updates

* FAT-130 Fix font on language selection menu title

* FAT-130 Reactivate feature flag checks

* Smartling translations are completed for PR#742 from feat/FAT-130-prompt-language-change-after-live-language-change (#1085)

* File apps/ledger-live-mobile/src/locales/en/common.json was translated to ru-RU locale

* File apps/ledger-live-mobile/src/locales/en/common.json was translated to de-DE locale

* File apps/ledger-live-mobile/src/locales/en/common.json was translated to ko-KR locale

* File apps/ledger-live-mobile/src/locales/en/common.json was translated to pt-BR locale

* File apps/ledger-live-mobile/src/locales/en/common.json was translated to es-ES locale

* File apps/ledger-live-mobile/src/locales/en/common.json was translated to tr-TR locale

* File apps/ledger-live-mobile/src/locales/en/common.json was translated to ar-AE locale

* File apps/ledger-live-mobile/src/locales/en/common.json was translated to fr-FR locale

* File apps/ledger-live-mobile/src/locales/en/common.json was translated to zh-CN locale

* File apps/ledger-live-mobile/src/locales/en/common.json was translated to ja-JP locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was translated to ru-RU locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was translated to de-DE locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was translated to ko-KR locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was translated to pt-BR locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was translated to es-ES locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was translated to tr-TR locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was translated to ar-AE locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was translated to fr-FR locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was translated to zh-CN locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was translated to ja-JP locale

* FAT-130 Remove desktop i18n changes

* FAT-130 Remove unrelated changes

Co-authored-by: Gabriel Soares <[email protected]>

* Smartling translations are updated for PR#742 from feat/FAT-130-prompt-language-change-after-live-language-change (#1124)

* File apps/ledger-live-desktop/static/i18n/en/app.json was updated on ru-RU locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was updated on de-DE locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was updated on ko-KR locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was updated on pt-BR locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was updated on es-ES locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was updated on tr-TR locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was updated on ar-AE locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was updated on fr-FR locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was updated on zh-CN locale

* File apps/ledger-live-desktop/static/i18n/en/app.json was updated on ja-JP locale

* File apps/ledger-live-mobile/src/locales/en/common.json was updated on ru-RU locale

* File apps/ledger-live-mobile/src/locales/en/common.json was updated on de-DE locale

* File apps/ledger-live-mobile/src/locales/en/common.json was updated on ko-KR locale

* File apps/ledger-live-mobile/src/locales/en/common.json was updated on pt-BR locale

* File apps/ledger-live-mobile/src/locales/en/common.json was updated on es-ES locale

* File apps/ledger-live-mobile/src/locales/en/common.json was updated on tr-TR locale

* File apps/ledger-live-mobile/src/locales/en/common.json was updated on ar-AE locale

* File apps/ledger-live-mobile/src/locales/en/common.json was updated on fr-FR locale

* File apps/ledger-live-mobile/src/locales/en/common.json was updated on zh-CN locale

* File apps/ledger-live-mobile/src/locales/en/common.json was updated on ja-JP locale

* FAT-130 remove unrelated locale changes

Co-authored-by: Gabriel Soares <[email protected]>

* FAT-130 Add devicelocalization featureId

* FAT-130 Fix linting

* FAT-130 Update docs

* FAT-130 Update translations

* FAT-130 Remove left-over trailing spaces

* FAT-130 Update LJS docs

Co-authored-by: Ledger Live <[email protected]>

.changeset/brave-cycles-call.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/native-ui": minor
+---
+
+Add a Divider component to the UI lib

.changeset/green-masks-reflect.md

@@ -0,0 +1,6 @@
+---
+"@ledgerhq/live-cli": minor
+"@ledgerhq/live-common": minor
+---
+
+Adds device action logic for installing and uninstalling language packs

.changeset/large-numbers-remain.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Adds a device language change feature under feature flag

.changeset/selfish-countries-burn.md

@@ -0,0 +1,6 @@
+---
+"live-mobile": minor
+"@ledgerhq/live-common": patch
+---
+
+Add prompt to change device language when live language is changed

apps/ledger-live-mobile/services/BackgroundRunnerService.ts

@@ -11,7 +11,7 @@ import mainFirmwareUpdate from "@ledgerhq/live-common/hw/firmwareUpdate-main";
 
 import { addBackgroundEvent } from "../src/actions/appstate";
 import { store } from "../src/context/LedgerStore";
-import { BackgroundEvent } from "../src/reducers/appstate";
+import { FwUpdateBackgroundEvent } from "../src/reducers/appstate";
 
 const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
 
@@ -29,7 +29,7 @@ const BackgroundRunnerService = async ({
   deviceId: string;
   firmwareSerializedJson: string;
 }) => {
-  const emitEvent = (e: BackgroundEvent) =>
+  const emitEvent = (e: FwUpdateBackgroundEvent) =>
     store.dispatch(addBackgroundEvent(e));
   const latestFirmware = JSON.parse(firmwareSerializedJson) as
     | FirmwareUpdateContext
@@ -47,7 +47,6 @@ const BackgroundRunnerService = async ({
   };
 
   const onFirmwareUpdated = () => {
-    emitEvent({ type: "firmwareUpdated" });
     NativeModules.BackgroundRunner.stop();
   };
 
@@ -90,6 +89,7 @@ const BackgroundRunnerService = async ({
             emitEvent({ type: "confirmPin" });
             waitForOnlineDevice(5 * 60 * 1000).subscribe({
               error: onError,
+              next: (updatedDeviceInfo) => emitEvent({ type: "firmwareUpdated", updatedDeviceInfo }),
               complete: onFirmwareUpdated,
             });
           },
@@ -99,6 +99,7 @@ const BackgroundRunnerService = async ({
         // We're waiting forever condition that make getDeviceInfo work
         waitForOnlineDevice(FIVE_MINUTES_IN_MS).subscribe({
           error: onError,
+          next: (updatedDeviceInfo) => emitEvent({ type: "firmwareUpdated", updatedDeviceInfo }),
           complete: onFirmwareUpdated,
         });
       }

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

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import type { Currency } from "@ledgerhq/types-cryptoassets";
-import { DeviceModelInfo } from "@ledgerhq/types-live";
+import { DeviceModelInfo, DeviceInfo } from "@ledgerhq/types-live";
 import type { Device } from "@ledgerhq/live-common/hw/actions/types";
 import type { PortfolioRange } from "@ledgerhq/types-live";
 import { MarketListRequestParams } from "@ledgerhq/live-common/market/types";
@@ -167,6 +167,16 @@ export const setLastSeenDeviceInfo = (dmi: DeviceModelInfo) => ({
   type: "LAST_SEEN_DEVICE_INFO",
   payload: dmi,
 });
+
+export const setLastSeenDevice = ({
+  deviceInfo,
+}: {
+  deviceInfo: DeviceInfo;
+}) => ({
+  type: "LAST_SEEN_DEVICE",
+  payload: { deviceInfo },
+});
+
 export const addStarredMarketCoins = (payload: string) => ({
   type: "ADD_STARRED_MARKET_COINS",
   payload,

apps/ledger-live-mobile/src/analytics/segment.ts

@@ -15,6 +15,7 @@ import {
 } from "@react-navigation/native";
 import { snakeCase } from "lodash";
 import { useCallback } from "react";
+import { idsToLanguage } from "@ledgerhq/types-live";
 import {
   getAndroidArchitecture,
   getAndroidVersionCode,
@@ -55,6 +56,10 @@ const extraProperties = store => {
   const deviceInfo = lastDevice
     ? {
         deviceVersion: lastDevice.deviceInfo?.version,
+        deviceLanguage:
+          lastDevice.deviceInfo?.languageId !== undefined
+            ? idsToLanguage[lastDevice.deviceInfo.languageId]
+            : undefined,
         appLength: lastDevice?.appsInstalled,
         modelId: lastDevice.modelId,
       }
@@ -148,8 +153,8 @@ export const trackSubject: any = new ReplaySubject<{
 }>(10);
 export const track = (
   event: string,
-  properties: Record<string, any> | null | undefined,
-  mandatory?: boolean | null | undefined,
+  properties?: Record<string, any> | null,
+  mandatory?: boolean | null,
 ) => {
   Sentry.addBreadcrumb({
     message: event,

apps/ledger-live-mobile/src/components/ChangeDeviceLanguageAction.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useMemo } from "react";
+
+import { Device } from "@ledgerhq/live-common/lib/hw/actions/types";
+import { Language } from "@ledgerhq/types-live";
+import { createAction } from "@ledgerhq/live-common/lib/hw/actions/installLanguage";
+import installLanguage from "@ledgerhq/live-common/lib/hw/installLanguage";
+import { useTranslation } from "react-i18next";
+import { Flex, Alert } from "@ledgerhq/native-ui";
+import DeviceAction from "./DeviceAction";
+import DeviceLanguageInstalled from "./DeviceLanguageInstalled";
+
+type Props = {
+  device: Device;
+  language: Language;
+  onContinue: () => void;
+  onStart?: () => void;
+  onResult?: () => void;
+  onError?: (err: Error) => void;
+};
+
+const ChangeDeviceLanguageAction: React.FC<Props> = ({
+  device,
+  language,
+  onStart,
+  onContinue,
+  onResult,
+  onError,
+}) => {
+  const showAlert = !device?.wired;
+  const { t } = useTranslation();
+
+  const action = useMemo(
+    () =>
+      createAction(() =>
+        installLanguage({
+          deviceId: device?.deviceId ?? "",
+          language,
+        }),
+      ),
+    [language, device?.deviceId],
+  );
+
+  useEffect(() => {
+    if (onStart && device) {
+      onStart();
+    }
+  }, [device]);
+
+  return (
+    <>
+      <Flex flexDirection="row" mb={showAlert ? "16px" : 0}>
+        <DeviceAction
+          action={action}
+          device={device}
+          onError={onError}
+          renderOnResult={() => (
+            <DeviceLanguageInstalled
+              onContinue={onContinue}
+              onMount={onResult}
+              installedLanguage={language}
+            />
+          )}
+        />
+      </Flex>
+      {showAlert && (
+        <Alert type="info" title={t("DeviceAction.stayInTheAppPlz")} />
+      )}
+    </>
+  );
+};
+
+export default ChangeDeviceLanguageAction;

apps/ledger-live-mobile/src/components/ChangeDeviceLanguageActionModal.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from "react";
+
+import { Device } from "@ledgerhq/live-common/lib/hw/actions/types";
+import { Language } from "@ledgerhq/types-live";
+import { createAction } from "@ledgerhq/live-common/lib/hw/actions/installLanguage";
+import installLanguage from "@ledgerhq/live-common/lib/hw/installLanguage";
+import DeviceActionModal from "./DeviceActionModal";
+import DeviceLanguageInstalled from "./DeviceLanguageInstalled";
+
+type Props = {
+  device: Device | null;
+  language: Language;
+  onClose?: () => void;
+  onError?: (error: Error) => void;
+  onResult?: () => void;
+};
+
+const ChangeDeviceLanguageActionModal: React.FC<Props> = ({
+  device,
+  language,
+  onClose,
+  onError,
+  onResult,
+}) => {
+  const action = useMemo(
+    () =>
+      createAction(() =>
+        installLanguage({
+          deviceId: device?.deviceId ?? "",
+          language,
+        }),
+      ),
+    [language, device?.deviceId],
+  );
+
+  return (
+    <DeviceActionModal
+      action={action}
+      onClose={onClose}
+      onError={onError}
+      device={device}
+      renderOnResult={() => (
+        <DeviceLanguageInstalled
+          onContinue={onClose}
+          onMount={onResult}
+          installedLanguage={language}
+        />
+      )}
+    />
+  );
+};
+
+export default ChangeDeviceLanguageActionModal;

apps/ledger-live-mobile/src/components/ChangeDeviceLanguagePrompt.tsx

@@ -0,0 +1,68 @@
+import { Flex, Text, Button, Link, Icons } from "@ledgerhq/native-ui";
+import React from "react";
+import { Linking } from "react-native";
+import { useTranslation } from "react-i18next";
+import { Language } from "@ledgerhq/types-live";
+import NanoXFolded from "../images/devices/NanoXFolded";
+import { urls } from "../config/urls";
+
+type Props = {
+  onConfirm: () => void;
+  deviceName: string;
+  language: Language;
+} & (
+  | { canSkip: true; onSkip: () => void }
+  | { canSkip?: false; onSkip?: undefined }
+);
+
+const ChangeDeviceLanguagePrompt: React.FC<Props> = ({
+  deviceName,
+  language,
+  onConfirm,
+  canSkip,
+  onSkip,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex alignItems="center">
+      <NanoXFolded size={200} />
+      <Text variant="h4" textAlign="center">
+        {t("onboarding.stepLanguage.changeDeviceLanguage", {
+          language: t(`deviceLocalization.languages.${language}`),
+          deviceName,
+        })}
+      </Text>
+      <Flex px={7} mt={4} mb={8}>
+        <Text variant="paragraph" textAlign="center" color="neutral.c70">
+          {t("onboarding.stepLanguage.changeDeviceLanguageDescription", {
+            language: t(`deviceLocalization.languages.${language}`),
+          })}
+        </Text>
+      </Flex>
+      <Button type="main" onPress={onConfirm} alignSelf="stretch">
+        {t("deviceLocalization.yesChangeLanguage")}
+      </Button>
+      {canSkip && (
+        <Button mt={4} onPress={onSkip} alignSelf="stretch" type="main" outline>
+          {t("common.skip")}
+        </Button>
+      )}
+      <Flex mt={6}>
+        {/* lint is interpreting this Link component as something it's not */}
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <Link
+          onPress={() => Linking.openURL(urls.deviceLocalization.learnMore)}
+          Icon={Icons.ExternalLinkMedium}
+          iconPosition="right"
+          type="color"
+          style={{ justifyContent: "flex-start" }}
+        >
+          {t("common.learnMore")}
+        </Link>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ChangeDeviceLanguagePrompt;

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

@@ -5,7 +5,7 @@ import { DeviceNotOnboarded } from "@ledgerhq/live-common/errors";
 import { TransportStatusError } from "@ledgerhq/errors";
 import { useTranslation } from "react-i18next";
 import { useNavigation, useTheme } from "@react-navigation/native";
-import { Flex, Log } from "@ledgerhq/native-ui";
+import { Flex, Text } from "@ledgerhq/native-ui";
 import { setLastSeenDeviceInfo } from "../../actions/settings";
 import ValidateOnDevice from "../ValidateOnDevice";
 import ValidateMessageOnDevice from "../ValidateMessageOnDevice";
@@ -107,6 +107,12 @@ export default function DeviceAction<R, H, P>({
     }
   }, [dispatch, device, deviceInfo]);
 
+  useEffect(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error]);
+
   if (displayUpgradeWarning && appAndVersion) {
     return renderWarningOutdated({
       t,
@@ -145,7 +151,7 @@ export default function DeviceAction<R, H, P>({
       <Flex>
         <DeviceActionProgress progress={progress} />
         <Flex mt={5}>
-          <Log>{t("deviceLocalization.installingLanguage")}</Log>
+          <Text variant="h4">{t("deviceLocalization.installingLanguage")}</Text>
         </Flex>
       </Flex>
     );
@@ -270,7 +276,6 @@ export default function DeviceAction<R, H, P>({
   if (!isLoading && error) {
     /** @TODO Put that back if the app is still crashing */
     // track("DeviceActionError", error);
-    onError && onError(error);
 
     // NB Until we find a better way, remap the error if it's 6d06 and we haven't fallen
     // into another handled case.

apps/ledger-live-mobile/src/components/DeviceAction/rendering.tsx

@@ -14,6 +14,7 @@ import {
   Icons,
   Log,
 } from "@ledgerhq/native-ui";
+import { getDeviceModel } from "@ledgerhq/devices";
 import { setModalLock } from "../../actions/appstate";
 import { urls } from "../../config/urls";
 import Alert from "../Alert";
@@ -287,14 +288,18 @@ export function renderAllowLanguageInstallation({
 }: RawProps & {
   device: Device;
 }) {
+  const deviceName = getDeviceModel(device.modelId).productName;
+
   return (
     <Wrapper>
+      <Text variant="h4" textAlign="center">
+        {t("deviceLocalization.allowLanguageInstallation", { deviceName })}
+      </Text>
       <AnimationContainer>
         <Animation
           source={getDeviceAnimation({ device, key: "validate", theme })}
         />
       </AnimationContainer>
-      <Log>{t("deviceLocalization.allowLanguageInstallation")}</Log>
     </Wrapper>
   );
 }