fix: translation tags should work inside tooltip

lifinance · Jun 9, 2023 · afbf669 · afbf669
1 parent 14c05de
commit afbf669
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/packages/widget/src/components/Insurance/InsuranceCard.tsx b/packages/widget/src/components/Insurance/InsuranceCard.tsx
@@ -74,17 +74,18 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
           </Box>
           <Box>
             <Typography fontSize={14}>
-              <Trans>
-                {status === RouteExecutionStatus.Idle
-                  ? t('insurance.insure', {
-                      amount: insuredAmount,
-                      tokenSymbol: insuredTokenSymbol,
-                    })
-                  : t('insurance.insured', {
-                      amount: insuredAmount,
-                      tokenSymbol: insuredTokenSymbol,
-                    })}
-              </Trans>
+              <Trans
+                i18nKey={
+                  status === RouteExecutionStatus.Idle
+                    ? 'insurance.insure'
+                    : 'insurance.insured'
+                }
+                values={{
+                  amount: insuredAmount,
+                  tokenSymbol: insuredTokenSymbol,
+                }}
+                components={[<strong />]}
+              />
             </Typography>
             <Collapse
               timeout={225}

diff --git a/packages/widget/src/components/RouteCard/RouteCard.tsx b/packages/widget/src/components/RouteCard/RouteCard.tsx
@@ -6,7 +6,7 @@ import type { TooltipProps } from '@mui/material';
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import type { MouseEventHandler } from 'react';
 import { Fragment, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers';
 import { formatTokenAmount } from '../../utils';
 import type { CardProps } from '../Card';
@@ -120,10 +120,14 @@ const InsuranceTooltip: React.FC<
       title={
         <Box component="span">
           <Typography fontSize={12} fontWeight="500">
-            {t('insurance.insure', {
-              amount: insuredAmount,
-              tokenSymbol: insuredTokenSymbol,
-            })}
+            <Trans
+              i18nKey="insurance.insure"
+              values={{
+                amount: insuredAmount,
+                tokenSymbol: insuredTokenSymbol,
+              }}
+              components={[<strong />]}
+            />
           </Typography>
           <Box
             sx={{