refactor(suite): deduplicate common translation formatters and placeh…

…olders, move them to Translation component's defaults
trezor · Sep 28, 2024 · cbb0f28 · cbb0f28
1 parent 03347b5
commit cbb0f28
Show file tree

Hide file tree

Showing 12 changed files with 25 additions and 66 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/...onents/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewEvmExplanation.tsx b/...onents/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/...e/src/components/suite/modals/ReduxModal/UserContextModal/DisableTorStopCoinjoinModal.tsx b/...e/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/...s/suite/src/components/suite/modals/ReduxModal/UserContextModal/RequestEnableTorModal.tsx b/...s/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/...ages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnecoCoinjoinModal.tsx b/...ages/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
@@ -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
@@ -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
@@ -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
@@ -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>
             )}
-Original file line number
+Diff line change
@@ Expand Up / @@ -114,7 +114,6 @@ export const UnecoCoinjoinModal = () => { @@
                                         symbol={symbol}
                                     />
                                 ),
-                                b: chunk => <b>{chunk}</b>,
                             }}
                         />
                     </Explanation>
@@ Expand Down @@