From cbb0f287876fc9c5dd04036f7d3d1003383cf627 Mon Sep 17 00:00:00 2001
From: mempoolboy <mempoolboy@proton.me>
Date: Sat, 28 Sep 2024 09:22:54 +0200
Subject: [PATCH] refactor(suite): deduplicate common translation formatters
 and placeholders, move them to Translation component's defaults

---
 .../components/firmware/FirmwareInitial.tsx   | 29 ++-----------------
 .../suite/SecurityCheck/SecurityCheckFail.tsx |  2 +-
 .../src/components/suite/Translation.tsx      | 17 +++++++++--
 .../DeviceContextModal/PinModal.tsx           |  5 +---
 .../TransactionReviewEvmExplanation.tsx       |  1 -
 .../DisableTorStopCoinjoinModal.tsx           |  7 +----
 .../RequestEnableTorModal.tsx                 |  7 +----
 .../UserContextModal/UnecoCoinjoinModal.tsx   |  1 -
 .../AccountBanners/TorDisconnected.tsx        |  7 +----
 .../suite/src/views/dashboard/PromoBanner.tsx |  5 +---
 .../SettingsCoins/FirmwareTypeSuggestion.tsx  |  2 --
 .../SettingsDevice/FirmwareTypeChange.tsx     |  8 +----
 12 files changed, 25 insertions(+), 66 deletions(-)

diff --git a/packages/suite/src/components/firmware/FirmwareInitial.tsx b/packages/suite/src/components/firmware/FirmwareInitial.tsx
index bdb60b586d2..35e5e1efdde 100644
--- a/packages/suite/src/components/firmware/FirmwareInitial.tsx
+++ b/packages/suite/src/components/firmware/FirmwareInitial.tsx
@@ -163,14 +163,7 @@ export const FirmwareInitial = ({
     if (bitcoinOnlyOffer) {
         // Installing Bitcoin-only firmware in onboarding
         content = {
-            heading: (
-                <Translation
-                    id="TR_INSTALL_BITCOIN_ONLY_FW"
-                    values={{
-                        bitcoinOnly: <Translation id="TR_FIRMWARE_TYPE_BITCOIN_ONLY" />,
-                    }}
-                />
-            ),
+            heading: <Translation id="TR_INSTALL_BITCOIN_ONLY_FW" />,
             description: (
                 <Description>
                     <Translation id="TR_FIRMWARE_SUBHEADING_BITCOIN" />
@@ -187,24 +180,14 @@ export const FirmwareInitial = ({
                         onClick={() => installFirmware(FirmwareType.Regular)}
                         multipleDevicesConnected={multipleDevicesConnected}
                     >
-                        <Translation
-                            id="TR_INSTALL_REGULAR"
-                            values={{
-                                regular: <Translation id="TR_FIRMWARE_TYPE_REGULAR" />,
-                            }}
-                        />
+                        <Translation id="TR_INSTALL_REGULAR" />
                     </FirmwareInstallButton>
 
                     <FirmwareInstallButton
                         onClick={() => installFirmware(targetType)}
                         multipleDevicesConnected={multipleDevicesConnected}
                     >
-                        <Translation
-                            id="TR_INSTALL_BITCOIN_ONLY"
-                            values={{
-                                bitcoinOnly: <Translation id="TR_FIRMWARE_TYPE_BITCOIN_ONLY" />,
-                            }}
-                        />
+                        <Translation id="TR_INSTALL_BITCOIN_ONLY" />
                     </FirmwareInstallButton>
                 </FirmwareButtonsRow>
             ),
@@ -220,13 +203,11 @@ export const FirmwareInitial = ({
                 <Translation
                     id={subheadingId}
                     values={{
-                        i: chunks => <i>{chunks}</i>,
                         button: chunks => (
                             <TextButton onClick={() => setBitcoinOnlyOffer(true)}>
                                 {chunks}
                             </TextButton>
                         ),
-                        bitcoinOnly: <Translation id="TR_FIRMWARE_TYPE_BITCOIN_ONLY" />,
                     }}
                 />
             ),
@@ -293,10 +274,6 @@ export const FirmwareInitial = ({
                         shouldSwitchFirmwareType,
                         isBitcoinOnlyAvailable,
                     })}
-                    values={{
-                        bitcoinOnly: <Translation id="TR_FIRMWARE_TYPE_BITCOIN_ONLY" />,
-                        regular: <Translation id="TR_FIRMWARE_TYPE_REGULAR" />,
-                    }}
                 />
             ),
             body: (
diff --git a/packages/suite/src/components/suite/SecurityCheck/SecurityCheckFail.tsx b/packages/suite/src/components/suite/SecurityCheck/SecurityCheckFail.tsx
index d6069d5f90b..fa976a7267e 100644
--- a/packages/suite/src/components/suite/SecurityCheck/SecurityCheckFail.tsx
+++ b/packages/suite/src/components/suite/SecurityCheck/SecurityCheckFail.tsx
@@ -30,7 +30,7 @@ const checklistItems = [
     },
     {
         icon: 'chat',
-        content: <Translation id="TR_USE_CHAT" values={{ b: chunks => <b>{chunks}</b> }} />,
+        content: <Translation id="TR_USE_CHAT" />,
     },
 ] as const;
 
diff --git a/packages/suite/src/components/suite/Translation.tsx b/packages/suite/src/components/suite/Translation.tsx
index f832863a91d..9768dddd681 100644
--- a/packages/suite/src/components/suite/Translation.tsx
+++ b/packages/suite/src/components/suite/Translation.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -19,13 +19,26 @@ type OwnProps = {
 export type ExtendedMessageDescriptor = CommonExtendedMessageDescriptor;
 type MsgType = OwnProps & ExtendedMessageDescriptor;
 
+const COMMON_TRANSLATION_FORMATTERS = {
+    b: (chunks: ReactElement) => <b>{chunks}</b>,
+    i: (chunks: ReactElement) => <i>{chunks}</i>,
+};
+
 export const isMsgType = (
     props: MsgType | ReactNode | ExtendedMessageDescriptor | Date | FormatXMLElementFn,
 ): props is MsgType =>
     typeof props === 'object' && props !== null && (props as MsgType).id !== undefined;
 
 export const Translation = (props: MsgType) => {
-    const values: Record<string, any> = {};
+    const COMMON_TRANSLATION_PLACEHOLDER_MAP = {
+        bitcoinOnly: <Translation id="TR_FIRMWARE_TYPE_BITCOIN_ONLY" />,
+        regular: <Translation id="TR_FIRMWARE_TYPE_REGULAR" />,
+    };
+
+    const values: Record<string, any> = {
+        ...COMMON_TRANSLATION_FORMATTERS,
+        ...COMMON_TRANSLATION_PLACEHOLDER_MAP,
+    };
     // message passed via props (id, defaultMessage, values)
     Object.keys(props.values || []).forEach(key => {
         // Iterates through all values. The entry may also contain a MessageDescriptor.
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PinModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PinModal.tsx
index e4bf5bd6d96..ff32722721b 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PinModal.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PinModal.tsx
@@ -36,10 +36,7 @@ export const PinModal = ({ device, ...rest }: PinModalProps) => {
         <StyledModal
             heading={<Translation id={isWipeCode ? 'TR_ENTER_WIPECODE' : 'TR_ENTER_PIN'} />}
             description={
-                <Translation
-                    id="TR_THE_PIN_LAYOUT_IS_DISPLAYED"
-                    values={{ deviceLabel, b: text => <b>{text}</b> }}
-                />
+                <Translation id="TR_THE_PIN_LAYOUT_IS_DISPLAYED" values={{ deviceLabel }} />
             }
             onCancel={onCancel}
             isCancelable
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewEvmExplanation.tsx b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewEvmExplanation.tsx
index 641730b86d7..db08be50b8e 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewEvmExplanation.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewEvmExplanation.tsx
@@ -26,7 +26,6 @@ export const TransactionReviewEvmExplanation = ({
                 id="TR_EVM_EXPLANATION_SEND_MODAL_DESCRIPTION"
                 values={{
                     network: network.name,
-                    b: text => <b>{text}</b>,
                 }}
             />
         </Banner>
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/DisableTorStopCoinjoinModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/DisableTorStopCoinjoinModal.tsx
index ff58083e293..4322b50ebaf 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/DisableTorStopCoinjoinModal.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/DisableTorStopCoinjoinModal.tsx
@@ -58,12 +58,7 @@ export const DisableTorStopCoinjoinModal = ({
             >
                 <>
                     <Description>
-                        <Translation
-                            id="TR_TOR_REQUEST_ENABLE_FOR_COIN_JOIN_TITLE"
-                            values={{
-                                b: chunks => <b>{chunks}</b>,
-                            }}
-                        />
+                        <Translation id="TR_TOR_REQUEST_ENABLE_FOR_COIN_JOIN_TITLE" />
                     </Description>
                     <ItalicDescription>
                         <Translation id="TR_TOR_KEEP_RUNNING_FOR_COIN_JOIN_SUBTITLE" />
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/RequestEnableTorModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/RequestEnableTorModal.tsx
index 279a8e2d841..242c9658de2 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/RequestEnableTorModal.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/RequestEnableTorModal.tsx
@@ -78,12 +78,7 @@ export const RequestEnableTorModal = ({ onCancel, decision }: RequestEnableTorMo
         >
             <>
                 <Description>
-                    <Translation
-                        id="TR_TOR_REQUEST_ENABLE_FOR_COIN_JOIN_TITLE"
-                        values={{
-                            b: chunks => <b>{chunks}</b>,
-                        }}
-                    />
+                    <Translation id="TR_TOR_REQUEST_ENABLE_FOR_COIN_JOIN_TITLE" />
                 </Description>
                 <ItalicDescription>
                     <Translation id="TR_TOR_REQUEST_ENABLE_FOR_COIN_JOIN_SUBTITLE" />
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnecoCoinjoinModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnecoCoinjoinModal.tsx
index f7a3db439e5..b90dac1de58 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnecoCoinjoinModal.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnecoCoinjoinModal.tsx
@@ -114,7 +114,6 @@ export const UnecoCoinjoinModal = () => {
                                     symbol={symbol}
                                 />
                             ),
-                            b: chunk => <b>{chunk}</b>,
                         }}
                     />
                 </Explanation>
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/TorDisconnected.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/TorDisconnected.tsx
index d369d242cc4..7154dd7ec1a 100644
--- a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/TorDisconnected.tsx
+++ b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/TorDisconnected.tsx
@@ -26,12 +26,7 @@ export const TorDisconnected = () => {
                 ),
             }}
         >
-            <Translation
-                id="TR_TOR_REQUEST_ENABLE_FOR_COIN_JOIN_TITLE"
-                values={{
-                    b: chunks => <b>{chunks}</b>,
-                }}
-            />
+            <Translation id="TR_TOR_REQUEST_ENABLE_FOR_COIN_JOIN_TITLE" />
         </NotificationCard>
     );
 };
diff --git a/packages/suite/src/views/dashboard/PromoBanner.tsx b/packages/suite/src/views/dashboard/PromoBanner.tsx
index a0efd35c073..621586e4ac3 100644
--- a/packages/suite/src/views/dashboard/PromoBanner.tsx
+++ b/packages/suite/src/views/dashboard/PromoBanner.tsx
@@ -238,10 +238,7 @@ export const PromoBanner = () => {
             )}
 
             <MobilePromoContainer>
-                <Translation
-                    values={{ b: text => <b>{text}</b> }}
-                    id="TR_MOBILE_APP_PROMO_TEXT_FOOTER"
-                />
+                <Translation id="TR_MOBILE_APP_PROMO_TEXT_FOOTER" />
 
                 <BadgeContainer>
                     <StoreBadge
diff --git a/packages/suite/src/views/settings/SettingsCoins/FirmwareTypeSuggestion.tsx b/packages/suite/src/views/settings/SettingsCoins/FirmwareTypeSuggestion.tsx
index b00971b1e9d..814a7dbe979 100644
--- a/packages/suite/src/views/settings/SettingsCoins/FirmwareTypeSuggestion.tsx
+++ b/packages/suite/src/views/settings/SettingsCoins/FirmwareTypeSuggestion.tsx
@@ -46,8 +46,6 @@ const FirmwareTypeSuggestionDescription = () => {
                             </Button>
                         </InlineButtonWrapper>
                     ),
-                    bitcoinOnly: <Translation id="TR_FIRMWARE_TYPE_BITCOIN_ONLY" />,
-                    regular: <Translation id="TR_FIRMWARE_TYPE_REGULAR" />,
                 }}
             />
         </Description>
diff --git a/packages/suite/src/views/settings/SettingsDevice/FirmwareTypeChange.tsx b/packages/suite/src/views/settings/SettingsDevice/FirmwareTypeChange.tsx
index bbba9f388d3..a6aacef9cc3 100644
--- a/packages/suite/src/views/settings/SettingsDevice/FirmwareTypeChange.tsx
+++ b/packages/suite/src/views/settings/SettingsDevice/FirmwareTypeChange.tsx
@@ -90,13 +90,7 @@ export const FirmwareTypeChange = ({ isDeviceLocked }: FirmwareTypeProps) => {
                         data-testid="@settings/device/switch-fw-type-button"
                         isDisabled={isDeviceLocked}
                     >
-                        <Translation
-                            id={actionButtonId}
-                            values={{
-                                bitcoinOnly: <Translation id="TR_FIRMWARE_TYPE_BITCOIN_ONLY" />,
-                                regular: <Translation id="TR_FIRMWARE_TYPE_REGULAR" />,
-                            }}
-                        />
+                        <Translation id={actionButtonId} />
                     </ActionButton>
                 </ActionColumn>
             )}