feat: implement new NoSuchAppOnProviderError component body

.changeset/hot-guests-hide.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+New UI to handle No Such App On Provider Error

apps/ledger-live-desktop/src/config/urls.ts

@@ -184,6 +184,10 @@ export const urls = {
   howToUpdateNewLedger: "https://support.ledger.com/article/9305992683165-zd",
   genuineCheck: "https://support.ledger.com/article/4404389367057-zd",
   whatAreOrdinals: "https://www.ledger.com/academy/bitcoin-ordinals",
+  ledgerShop:
+    "https://shop.ledger.com?utm_source=live&utm_medium=draw&utm_campaign=ledger_sync_lns_uncompatible&utm_content=to_shop",
+  learnMoreLedgerSync:
+    "https://www.ledger.com/blog-ledger-sync-synchronize-your-crypto-accounts-effortless-private-and-secure",
 };
 
 export const vaultSigner = {

apps/ledger-live-desktop/src/renderer/components/DeviceAction/NoSuchAppOnProviderErrorComponent.tsx

@@ -0,0 +1,109 @@
+import React, { useCallback } from "react";
+import { ErrorBody } from "../ErrorBody";
+import { Wrapper } from "./rendering";
+import { Trans } from "react-i18next";
+import { Link, Text } from "@ledgerhq/react-ui";
+import styled, { useTheme } from "styled-components";
+import Box from "../Box";
+import { Icons } from "@ledgerhq/react-ui";
+import { urls } from "~/config/urls";
+import { CircleWrapper } from "../CryptoCurrencyIcon";
+import { track } from "~/renderer/analytics/segment";
+import { openURL } from "~/renderer/linking";
+
+const CtaContainer = styled(Box)`
+  margin-top: 32px;
+`;
+
+const StyledLinkExploreButton = styled(Link)`
+  display: flex;
+  width: 100%;
+  height: 48px;
+  padding: 8px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 500px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  color: ${({ theme }) => theme.colors.neutral.c00};
+  background-color: ${({ theme }) => theme.colors.neutral.c100};
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.neutral.c90};
+  }
+`;
+
+const StyledLinkLearnMoreButton = styled(Link)`
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.neutral.c70};
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+`;
+
+const NoSuchAppOnProviderErrorComponent: React.FC<{
+  error: Error;
+  productName: string;
+}> = ({ error, productName }) => {
+  const theme = useTheme();
+
+  const handleOnOpenExternalLink = useCallback(
+    (url: string, trackEvent?: string, trackPayload?: Record<string, unknown>) => () => {
+      openURL(url);
+      if (trackEvent && trackPayload) {
+        track(trackEvent, trackPayload);
+      }
+    },
+    [],
+  );
+
+  const renderExploreIcon = () => <Icons.ExternalLink size="S" />;
+
+  return (
+    <Wrapper id="error-NoSuchAppOnProvider">
+      <ErrorBody
+        top={
+          <CircleWrapper color={theme.colors.palette.opacityDefault.c05} size={72}>
+            <Icons.DeleteCircleFill size="L" color="error.c50" />
+          </CircleWrapper>
+        }
+        title={
+          <Trans
+            i18nKey="errors.NoSuchAppOnProvider.title"
+            values={{ productName, appName: (error as Error & { appName: string })?.appName }}
+          />
+        }
+        description={
+          <Trans i18nKey="errors.NoSuchAppOnProvider.description" color="neutral.c100">
+            <Text color="neutral.c100" fontWeight="700"></Text>
+          </Trans>
+        }
+      />
+
+      <CtaContainer>
+        <StyledLinkExploreButton
+          onClick={handleOnOpenExternalLink(urls.ledgerShop, "button_clicked", {
+            button: "Explore more compatible devices |  page: NanoS connection LS",
+          })}
+        >
+          <Trans i18nKey="errors.NoSuchAppOnProvider.exploreCTA" />
+        </StyledLinkExploreButton>
+        <StyledLinkLearnMoreButton
+          onClick={handleOnOpenExternalLink(urls.learnMoreLedgerSync)}
+          Icon={renderExploreIcon}
+        >
+          <Trans i18nKey="errors.NoSuchAppOnProvider.learnMoreCTA" />
+        </StyledLinkLearnMoreButton>
+      </CtaContainer>
+    </Wrapper>
+  );
+};
+
+export default NoSuchAppOnProviderErrorComponent;

apps/ledger-live-desktop/src/renderer/components/DeviceAction/index.tsx

@@ -469,6 +469,7 @@ export const DeviceActionDefaultRendering = <R, H extends States, P>({
         error,
         withOpenManager: true,
         withExportLogs: true,
+        ...(device && { device }),
       });
     }
 

apps/ledger-live-desktop/src/renderer/components/DeviceAction/rendering.tsx

@@ -19,6 +19,7 @@ import {
 import {
   DeviceNotOnboarded,
   LatestFirmwareVersionRequired,
+  NoSuchAppOnProvider,
   TransactionRefusedOnDevice,
 } from "@ledgerhq/live-common/errors";
 import { DeviceModelId, getDeviceModel } from "@ledgerhq/devices";
@@ -69,6 +70,7 @@ import { CompleteExchangeError } from "@ledgerhq/live-common/exchange/error";
 import { currencySettingsLocaleSelector, SettingsState } from "~/renderer/reducers/settings";
 import { accountNameSelector, WalletState } from "@ledgerhq/live-wallet/store";
 import { isSyncOnboardingSupported } from "@ledgerhq/live-common/device/use-cases/screenSpecs";
+import NoSuchAppOnProviderErrorComponent from "./NoSuchAppOnProviderErrorComponent";
 
 export const AnimationWrapper = styled.div`
   width: 600px;
@@ -784,6 +786,13 @@ export const renderError = ({
     if (tmpError.message === "User refused") {
       tmpError = new TransactionRefusedOnDevice();
     }
+  } else if (tmpError instanceof NoSuchAppOnProvider) {
+    return (
+      <NoSuchAppOnProviderErrorComponent
+        error={tmpError}
+        productName={getDeviceModel(device?.modelId as DeviceModelId)?.productName}
+      />
+    );
   }
 
   // if no supportLink is provided, we fallback on the related url linked to

apps/ledger-live-desktop/static/i18n/en/app.json

@@ -5399,8 +5399,11 @@
       "description": "The network fee might be too low. Please increase"
     },
     "NoSuchAppOnProvider": {
-      "title": "The {{appName}} app cannot be found for your specific configuration.",
-      "description": "Try reinstalling the app from My Ledger"
+      "title": "{{appName}} is not compatible with {{productName}}.",
+      "titleOld": "The {{appName}} app cannot be found for your specific configuration.",
+      "description": "<0>Unlock more with our devices.</0> To access this feature, upgrade to one of our compatible devices. Choose the best option for your needs and enjoy enhanced security.",
+      "exploreCTA": "Explore compatible devices",
+      "learnMoreCTA": "Learn more about Ledger Sync"
     },
     "PendingOperation": {
       "description": "You have incoming transactions pending. Please beware pending transactions can be reversed."