From a291e3778c4c528e4de3f50f83521dc366360be5 Mon Sep 17 00:00:00 2001 From: Mounir Hamzaoui Date: Wed, 16 Oct 2024 14:41:44 +0200 Subject: [PATCH] feat: implement new NoSuchAppOnProviderError component body --- .changeset/hot-guests-hide.md | 5 + apps/ledger-live-desktop/src/config/urls.ts | 4 + .../NoSuchAppOnProviderErrorComponent.tsx | 109 ++++++++++++++++++ .../components/DeviceAction/index.tsx | 1 + .../components/DeviceAction/rendering.tsx | 9 ++ .../static/i18n/en/app.json | 7 +- 6 files changed, 133 insertions(+), 2 deletions(-) create mode 100644 .changeset/hot-guests-hide.md create mode 100644 apps/ledger-live-desktop/src/renderer/components/DeviceAction/NoSuchAppOnProviderErrorComponent.tsx diff --git a/.changeset/hot-guests-hide.md b/.changeset/hot-guests-hide.md new file mode 100644 index 000000000000..41bcd5790b62 --- /dev/null +++ b/.changeset/hot-guests-hide.md @@ -0,0 +1,5 @@ +--- +"ledger-live-desktop": minor +--- + +New UI to handle No Such App On Provider Error diff --git a/apps/ledger-live-desktop/src/config/urls.ts b/apps/ledger-live-desktop/src/config/urls.ts index 083c32dc3c43..d632614ec35e 100644 --- a/apps/ledger-live-desktop/src/config/urls.ts +++ b/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 = { diff --git a/apps/ledger-live-desktop/src/renderer/components/DeviceAction/NoSuchAppOnProviderErrorComponent.tsx b/apps/ledger-live-desktop/src/renderer/components/DeviceAction/NoSuchAppOnProviderErrorComponent.tsx new file mode 100644 index 000000000000..2b741e9e1778 --- /dev/null +++ b/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) => () => { + openURL(url); + if (trackEvent && trackPayload) { + track(trackEvent, trackPayload); + } + }, + [], + ); + + const renderExploreIcon = () => ; + + return ( + + + + + } + title={ + + } + description={ + + + + } + /> + + + + + + + + + + + ); +}; + +export default NoSuchAppOnProviderErrorComponent; diff --git a/apps/ledger-live-desktop/src/renderer/components/DeviceAction/index.tsx b/apps/ledger-live-desktop/src/renderer/components/DeviceAction/index.tsx index cd9fd8e9f119..3a3a952391fb 100644 --- a/apps/ledger-live-desktop/src/renderer/components/DeviceAction/index.tsx +++ b/apps/ledger-live-desktop/src/renderer/components/DeviceAction/index.tsx @@ -469,6 +469,7 @@ export const DeviceActionDefaultRendering = ({ error, withOpenManager: true, withExportLogs: true, + ...(device && { device }), }); } diff --git a/apps/ledger-live-desktop/src/renderer/components/DeviceAction/rendering.tsx b/apps/ledger-live-desktop/src/renderer/components/DeviceAction/rendering.tsx index 77a86d5c9409..96f3f0bec2e5 100644 --- a/apps/ledger-live-desktop/src/renderer/components/DeviceAction/rendering.tsx +++ b/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 ( + + ); } // if no supportLink is provided, we fallback on the related url linked to diff --git a/apps/ledger-live-desktop/static/i18n/en/app.json b/apps/ledger-live-desktop/static/i18n/en/app.json index 59e13ed9822d..4c03dc953217 100644 --- a/apps/ledger-live-desktop/static/i18n/en/app.json +++ b/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. 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."