Add Banner to warn users about the migration

.changeset/slimy-suns-speak.md

@@ -0,0 +1,7 @@
+---
+"ledger-live-desktop": minor
+"live-mobile": minor
+"@ledgerhq/coin-framework": minor
+---
+
+add banner to warn users about the migration

apps/ledger-live-desktop/src/renderer/screens/account/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { compose } from "redux";
 import { connect } from "react-redux";
-import { withTranslation } from "react-i18next";
+import { withTranslation, Trans } from "react-i18next";
 import { TFunction } from "i18next";
 import { Redirect } from "react-router";
 import { SyncOneAccountOnMount } from "@ledgerhq/live-common/bridge/react/index";
@@ -141,6 +141,11 @@ const AccountPage = ({
 
   const localizedContactSupportURL = useLocalizedUrl(urls.contactSupportWebview);
 
+  const supportLink = (currencyConfig?.status as { link?: string })?.link;
+  const openSupportLink = useCallback(() => {
+    openURL(supportLink || localizedContactSupportURL);
+  }, [supportLink, localizedContactSupportURL]);
+
   if (!account || !mainAccount || !currency) {
     return <Redirect to="/accounts" />;
   }
@@ -150,11 +155,6 @@ const AccountPage = ({
   const displayOrdinals =
     isOrdinalsEnabled && isBitcoinBasedAccount(account) && isBitcoinAccount(account);
 
-  const openFeatureUnvailableSupportLink = () => {
-    currencyConfig?.status.type === "feature_unavailable" &&
-      openURL(currencyConfig?.status.link || localizedContactSupportURL);
-  };
-
   return (
     <Box key={account.id}>
       <TrackPage
@@ -187,6 +187,31 @@ const AccountPage = ({
       >
         <AccountHeaderActions account={account} parentAccount={parentAccount} />
       </Box>
+      {currencyConfig?.status.type === "migration" && (
+        <TopBanner
+          status="warning"
+          content={{
+            message: (
+              <Text fontFamily="Inter|Bold" color="neutral.c00" flex={1}>
+                <Trans
+                  i18nKey="account.migrationBanner.title"
+                  values={{
+                    coinA: currencyConfig.status.coinA,
+                    coinB: currencyConfig.status.coinB,
+                  }}
+                  components={[
+                    <Link key={0} color="neutral.c00" alwaysUnderline onClick={openSupportLink} />,
+                  ]}
+                />
+              </Text>
+            ),
+          }}
+          link={{
+            text: t("account.migrationBanner.contactSupport"),
+            href: localizedContactSupportURL,
+          }}
+        />
+      )}
       {currencyConfig?.status.type === "feature_unavailable" && (
         <TopBanner
           status="warning"
@@ -197,11 +222,7 @@ const AccountPage = ({
                   feature: t(`account.featureUnavailable.feature.${currencyConfig.status.feature}`),
                   support: "",
                 })}
-                <Link
-                  color="neutral.c00"
-                  alwaysUnderline
-                  onClick={openFeatureUnvailableSupportLink}
-                >
+                <Link color="neutral.c00" alwaysUnderline onClick={openSupportLink}>
                   {t("account.featureUnavailable.support")}
                 </Link>
               </Text>

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

@@ -768,6 +768,10 @@
         "description3Link": "This integration has been carried out by <1><0>{{team}}</0></1> in collaboration with Ledger"
       }
     },
+    "migrationBanner": {
+      "title": "{{coinA}} is migrating to {{coinB}}. Follow this <0>link</0> to know more or contact the support if you need assistance.",
+      "contactSupport": "Contact support"
+    },
     "featureUnavailable": {
       "title": "The following feature is momentarily unavailable : {{feature}}. To know more please refer to {{support}}",
       "feature": {

apps/ledger-live-mobile/src/locales/en/common.json

@@ -2619,6 +2619,10 @@
         "description3Link": "This integration has been carried out by <1><0>{{team}}</0></1> in collaboration with Ledger"
       }
     },
+    "migrationBanner": {
+      "title": "{{coinA}} is migrating to {{coinB}}. Follow this <0>link</0> to know more or contact the support if you need assistance.",
+      "contactSupport": "Contact support"
+    },
     "willBedeprecatedBanner": {
       "title": "To optimize efficiencies, {{currencyName}} will not be supported on Ledger Live as of {{deprecatedDate}}. However, it will still be supported on Ledger hardware wallets. Please contact Ledger Customer Support if you would like assistance on this.",
       "contactSupport": "Contact support"

apps/ledger-live-mobile/src/screens/Account/ListHeaderComponent.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { LayoutChangeEvent, View } from "react-native";
+import { LayoutChangeEvent, View, Linking } from "react-native";
 import { isAccountEmpty, getMainAccount } from "@ledgerhq/live-common/account/index";
 import {
   AccountLike,
@@ -9,9 +9,10 @@ import {
   BalanceHistoryWithCountervalue,
 } from "@ledgerhq/types-live";
 import { CryptoCurrency, Currency } from "@ledgerhq/types-cryptoassets";
-import { Box, ColorPalette } from "@ledgerhq/native-ui";
+import { Box, ColorPalette, Text } from "@ledgerhq/native-ui";
 import { isNFTActive } from "@ledgerhq/coin-framework/nft/support";
-import { TFunction } from "react-i18next";
+import { TFunction, Trans } from "react-i18next";
+import styled from "styled-components/native";
 import { CosmosAccount } from "@ledgerhq/live-common/families/cosmos/types";
 import { PolkadotAccount } from "@ledgerhq/live-common/families/polkadot/types";
 import { ElrondAccount } from "@ledgerhq/live-common/families/elrond/types";
@@ -37,6 +38,10 @@ import Alert from "~/components/Alert";
 import { CurrencyConfig } from "@ledgerhq/coin-framework/config";
 import { urls } from "~/utils/urls";
 
+const UnderlinedText = styled(Text)`
+  text-decoration-line: underline;
+`;
+
 type Props = {
   account?: AccountLike;
   parentAccount?: Account;
@@ -128,6 +133,11 @@ export function getListHeaderComponents({
     oldestEditableOperation &&
     isStuckOperation({ family: mainAccount.currency.family, operation: oldestEditableOperation });
 
+  const supportLink = (currencyConfig?.status as { link?: string })?.link;
+  const openSupportLink = () => {
+    Linking.openURL(supportLink || urls.contactSupportWebview.en);
+  };
+
   return {
     listHeaderComponents: [
       <Box mt={6} onLayout={onAccountCardLayout} key="AccountGraphCard">
@@ -143,6 +153,25 @@ export function getListHeaderComponents({
           parentAccount={parentAccount}
         />
       </Box>,
+      currencyConfig?.status.type === "migration" && (
+        <View style={{ marginTop: 16 }}>
+          <Alert
+            key="migration_banner"
+            type="warning"
+            learnMoreKey="account.migrationBanner.contactSupport"
+            learnMoreUrl={urls.contactSupportWebview.en}
+          >
+            <Trans
+              i18nKey="account.migrationBanner.title"
+              values={{
+                coinA: currencyConfig.status.coinA,
+                coinB: currencyConfig.status.coinB,
+              }}
+              components={[<UnderlinedText onPress={openSupportLink} key="SupportLink" />]}
+            />
+          </Alert>
+        </View>
+      ),
       currencyConfig?.status.type === "will_be_deprecated" && (
         <View style={{ marginTop: 16 }}>
           <Alert

apps/ledger-live-mobile/src/screens/WalletCentricAsset/index.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo, useState, useCallback, useRef } from "react";
-import { FlatList, LayoutChangeEvent, ListRenderItemInfo } from "react-native";
+import { FlatList, LayoutChangeEvent, ListRenderItemInfo, Linking } from "react-native";
 import Animated, { useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
 import { useSelector } from "react-redux";
-import { useTranslation } from "react-i18next";
-import { Box, Flex } from "@ledgerhq/native-ui";
+import { useTranslation, Trans } from "react-i18next";
+import { Box, Flex, Text } from "@ledgerhq/native-ui";
 import { getCurrencyColor, isCryptoCurrency } from "@ledgerhq/live-common/currencies/index";
 import { isAccountEmpty } from "@ledgerhq/live-common/account/helpers";
-import { useTheme } from "styled-components/native";
+import styled, { useTheme } from "styled-components/native";
 import { useNavigation } from "@react-navigation/native";
 import { Account, TokenAccount } from "@ledgerhq/types-live";
 import isEqual from "lodash/isEqual";
@@ -42,6 +42,10 @@ import { LoadingBasedGroupedCurrencies, LoadingStatus } from "@ledgerhq/live-com
 import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
 import { AddAccountContexts } from "LLM/features/Accounts/screens/AddAccount/enums";
 
+const UnderlinedText = styled(Text)`
+  text-decoration-line: underline;
+`;
+
 const AnimatedFlatListWithRefreshControl = Animated.createAnimatedComponent(
   accountSyncRefreshControl(FlatList),
 );
@@ -152,6 +156,11 @@ const AssetScreen = ({ route }: NavigationProps) => {
     }
   }
 
+  const supportLink = (currencyConfig?.status as { link?: string })?.link;
+  const openSupportLink = useCallback(() => {
+    Linking.openURL(supportLink || urls.contactSupportWebview.en);
+  }, [supportLink]);
+
   const data = useMemo(
     () => [
       <Box
@@ -169,6 +178,25 @@ const AssetScreen = ({ route }: NavigationProps) => {
           accountsAreEmpty={cryptoAccountsEmpty}
         />
       </Box>,
+      currencyConfig?.status.type === "migration" && (
+        <View style={{ marginTop: 16 }}>
+          <Alert
+            key="migration_banner"
+            type="warning"
+            learnMoreKey="account.migrationBanner.contactSupport"
+            learnMoreUrl={urls.contactSupportWebview.en}
+          >
+            <Trans
+              i18nKey="account.migrationBanner.title"
+              values={{
+                coinA: currencyConfig.status.coinA,
+                coinB: currencyConfig.status.coinB,
+              }}
+              components={[<UnderlinedText onPress={openSupportLink} key="SupportLink" />]}
+            />
+          </Alert>
+        </View>
+      ),
       currencyConfig?.status.type === "will_be_deprecated" && (
         <View style={{ marginTop: 16 }}>
           <Alert
@@ -235,6 +263,7 @@ const AssetScreen = ({ route }: NavigationProps) => {
       defaultAccount,
       onAddAccount,
       currencyConfig,
+      openSupportLink,
     ],
   );
 

libs/coin-framework/src/config.ts

@@ -1,4 +1,4 @@
-import { CryptoCurrency } from "@ledgerhq/types-cryptoassets";
+import { CryptoCurrency, CryptoCurrencyId } from "@ledgerhq/types-cryptoassets";
 import { MissingCoinConfig } from "./errors";
 
 type ConfigStatus =
@@ -9,6 +9,13 @@ type ConfigStatus =
       type: "under_maintenance";
       message?: string;
     }
+  | {
+      type: "migration";
+      chain: CryptoCurrencyId;
+      coinA: string;
+      coinB: string;
+      link: string;
+    }
   | {
       type: "feature_unavailable";
       link: string;