refactor(ui): replace some of the reactStringReplace usage using i18Next Trans (#1626)

refactor(ui): replace some of the reactStringReplace usage using i18nNext Trans

replace some of the reactStringReplace usage using i18nNext Trans

packages/phrases-ui/src/locales/en.ts

@@ -32,14 +32,14 @@ const translation = {
     reminder: 'Reminder',
     not_found: '404 Not Found',
     agree_with_terms: 'I have read and agree to the ',
-    agree_with_terms_modal: 'To proceed, please agree to the {{terms}}.',
+    agree_with_terms_modal: 'To proceed, please agree to the <link></link>.',
     terms_of_use: 'Terms of Use',
     create_account: 'Create Account',
     forgot_password: 'Forgot Password?',
     or: 'or',
     enter_passcode: 'The passcode has been sent to your {{address}}',
     passcode_sent: 'The passcode has been resent',
-    resend_after_seconds: 'Resend after {{seconds}} seconds',
+    resend_after_seconds: 'Resend after <span>{{seconds}}</span> seconds',
     resend_passcode: 'Resend Passcode',
     continue_with: 'Continue with',
     create_account_id_exists:

packages/phrases-ui/src/locales/zh-cn.ts

@@ -34,14 +34,14 @@ const translation = {
     reminder: '提示',
     not_found: '404 页面不存在',
     agree_with_terms: '我已阅读并同意 ',
-    agree_with_terms_modal: '请先同意 {{terms}} 以继续',
+    agree_with_terms_modal: '请先同意 <link></link> 以继续',
     terms_of_use: '使用条款',
     create_account: '创建帐号',
     forgot_password: '忘记密码？',
     or: '或',
     enter_passcode: '验证码已经发送至你的{{ address }}',
     passcode_sent: '验证码已经发送',
-    resend_after_seconds: '在 {{ seconds }} 秒后重发',
+    resend_after_seconds: '在 <span>{{ seconds }}</span> 秒后重发',
     resend_passcode: '重发验证码',
     continue_with: '通过以下方式继续',
     create_account_id_exists: '{{ type }}为 {{ value }} 的帐号已存在，你要登录吗？',

packages/ui/src/containers/PasscodeValidation/index.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import { useState, useEffect, useContext, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import reactStringReplace from 'react-string-replace';
+import { useTranslation, Trans } from 'react-i18next';
 import { useTimer } from 'react-timer-hook';
 
 import { getSendPasscodeApi, getVerifyPasscodeApi } from '@/apis/utils';
@@ -87,18 +86,6 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
     }
   }, [verifyPasscodeResult]);
 
-  const renderCountDownMessage = useMemo(() => {
-    const contents = t('description.resend_after_seconds', { seconds });
-
-    return (
-      <div className={styles.message}>
-        {reactStringReplace(contents, `${seconds}`, (match) => (
-          <span key="counter">{match}</span>
-        ))}
-      </div>
-    );
-  }, [seconds, t]);
-
   return (
     <form className={classNames(styles.form, className)}>
       <Passcode
@@ -109,7 +96,11 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
         onChange={setCode}
       />
       {isRunning ? (
-        renderCountDownMessage
+        <div className={styles.message}>
+          <Trans components={{ span: <span key="counter" /> }}>
+            {t('description.resend_after_seconds', { seconds })}
+          </Trans>
+        </div>
       ) : (
         <TextLink
           className={styles.link}

packages/ui/src/containers/TermsOfUse/TermsOfUseConfirmModal/index.tsx

@@ -1,7 +1,6 @@
-import { ReactNode, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useContext } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
 import { create } from 'react-modal-promise';
-import reactStringReplace from 'react-string-replace';
 
 import { WebModal, MobileModal } from '@/components/ConfirmModal';
 import TextLink from '@/components/TextLink';
@@ -30,7 +29,6 @@ const TermsOfUseConfirmModal = ({ isOpen = false, onConfirm, onClose }: Props) =
   const ConfirmModal = isMobile ? MobileModal : WebModal;
 
   const terms = t('description.terms_of_use');
-  const content = t('description.agree_with_terms_modal', { terms });
 
   const linkProps = isMobile
     ? {
@@ -43,10 +41,6 @@ const TermsOfUseConfirmModal = ({ isOpen = false, onConfirm, onClose }: Props) =
         target: '_blank',
       };
 
-  const modalContent: ReactNode = reactStringReplace(content, terms, () => (
-    <TextLink key={terms} text="description.terms_of_use" {...linkProps} />
-  ));
-
   return (
     <ConfirmModal
       isOpen={isOpen}
@@ -57,7 +51,13 @@ const TermsOfUseConfirmModal = ({ isOpen = false, onConfirm, onClose }: Props) =
       }}
       onClose={onClose}
     >
-      {modalContent}
+      <Trans
+        components={{
+          link: <TextLink key={terms} text="description.terms_of_use" {...linkProps} />,
+        }}
+      >
+        {t('description.agree_with_terms_modal')}
+      </Trans>
     </ConfirmModal>
   );
 };

packages/ui/src/jest.setup.ts

@@ -23,6 +23,7 @@ global.crypto = new Crypto();
 const translation = (key: string) => key;
 
 jest.mock('react-i18next', () => ({
+  ...jest.requireActual('react-i18next'),
   useTranslation: () => ({
     t: translation,
     i18n: {