[WALL] Lubega / WALL-4549 / Wallets initial translations setup

.github/actions/build/action.yml

@@ -9,9 +9,6 @@ inputs:
     description: 'Node environment'
     required: false
     default: 'test'
-  CROWDIN_WALLETS_API_KEY:
-    description: 'Crowdin wallets api key'
-    required: false
   DATADOG_CLIENT_TOKEN:
     description: 'Datadog client token'
     required: false
@@ -64,7 +61,6 @@ runs:
   - name: Build all packages
     env:
       NODE_ENV: ${{ inputs.NODE_ENV }}
-      CROWDIN_WALLETS_API_KEY: ${{ inputs.CROWDIN_WALLETS_API_KEY }}
       DATADOG_APPLICATION_ID: ${{ inputs.DATADOG_APPLICATION_ID }}
       DATADOG_CLIENT_TOKEN: ${{ inputs.DATADOG_CLIENT_TOKEN }}
       DATADOG_CLIENT_TOKEN_LOGS: ${{ inputs.DATADOG_CLIENT_TOKEN_LOGS }}

.github/workflows/release_staging.yml

@@ -24,7 +24,6 @@ jobs:
       uses: "./.github/actions/build"
       with:
         NODE_ENV: production
-        CROWDIN_WALLETS_API_KEY: ${{ secrets.CROWDIN_WALLETS_API_KEY }}
         IS_GROWTHBOOK_ENABLED: ${{ vars.IS_GROWTHBOOK_ENABLED }}
         DATADOG_APPLICATION_ID: ${{ vars.DATADOG_APPLICATION_ID }}
         DATADOG_CLIENT_TOKEN: ${{ vars.DATADOG_CLIENT_TOKEN }}

.github/workflows/release_test.yml

@@ -20,7 +20,6 @@ jobs:
       uses: "./.github/actions/build"
       with:
         NODE_ENV: production
-        CROWDIN_WALLETS_API_KEY: ${{ secrets.CROWDIN_WALLETS_API_KEY }}
         DATADOG_APPLICATION_ID: ${{ vars.DATADOG_APPLICATION_ID }}
         IS_GROWTHBOOK_ENABLED: ${{ vars.IS_GROWTHBOOK_ENABLED }}
         DATADOG_CLIENT_TOKEN: ${{ vars.DATADOG_CLIENT_TOKEN }}

.github/workflows/sync-translations.yml

@@ -6,15 +6,15 @@ on:
       - master
   schedule:
     - cron: '0 */12 * * *'
-
+        
 jobs:
   sync_translations:
     permissions:
       contents: write
     runs-on: ubuntu-latest
     environment: Staging
     steps:
-      - name: Sync translations
+      - name: Sync accounts translations
         uses: deriv-com/translations/.github/actions/extract_and_sync_translations@main
         with:
           PROJECT_NAME: ${{ vars.ACC_R2_PROJECT_NAME }}
@@ -26,3 +26,15 @@ jobs:
           R2_SECRET_ACCESS_KEY: ${{ secrets.ACC_R2_SECRET_ACCESS_KEY }}
           R2_BUCKET_NAME: ${{ secrets.ACC_R2_BUCKET_NAME }}
           PROJECT_SOURCE_DIRECTORY: "packages/account/src"
+      - name: Sync wallets translations
+        uses: deriv-com/translations/.github/actions/extract_and_sync_translations@main
+        with:
+          PROJECT_NAME: ${{ vars.WALLETS_PROJECT_NAME }}
+          CROWDIN_BRANCH_NAME: staging
+          CROWDIN_PROJECT_ID: ${{ secrets.WALLETS_CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.ACC_CROWDIN_PERSONAL_TOKEN }}
+          R2_ACCOUNT_ID: ${{ secrets.ACC_R2_ACCOUNT_ID }}
+          R2_ACCESS_KEY_ID: ${{ secrets.ACC_R2_ACCESS_KEY_ID }}
+          R2_SECRET_ACCESS_KEY: ${{ secrets.ACC_R2_SECRET_ACCESS_KEY }}
+          R2_BUCKET_NAME: ${{ secrets.ACC_R2_BUCKET_NAME }}
+          PROJECT_SOURCE_DIRECTORY: "packages/wallets/src"

__mocks__/translation.mock.js

@@ -1,31 +1,35 @@
 import React from 'react';
 
-const replaceValue = (text, values) => {
-    const valueMatch = text.match(/{{(\w+)}}/);
-    if (valueMatch) {
-        const valueKey = valueMatch[1];
-        return values[valueKey] || text;
-    }
-    return text;
-};
-
 const Localize = ({ i18n_default_text, components = [], values = {} }) => {
-    // Split text into parts, extracting placeholders for components
+    // Split text into parts, extracting placeholders for components and values
     const parts = i18n_default_text.split(/(<\d+>.*?<\/\d+>|{{\w+}})/g);
 
+    const replaceValues = text => {
+        return text.replace(/{{(\w+)}}/g, (match, key) => values[key] || match);
+    };
+
     return (
         <>
             {parts.map((part, index) => {
-                // Handle component placeholders
+                // Replace component placeholders with actual components
                 const componentMatch = part.match(/<(\d+)>(.*?)<\/\1>/);
+
                 if (componentMatch) {
                     const componentIndex = parseInt(componentMatch[1]);
-                    const content = replaceValue(componentMatch[2], values);
+
+                    // Replace values wrapped in components with actual values
+                    const content = replaceValues(componentMatch[2]);
                     const Component = components[componentIndex];
                     return Component ? React.cloneElement(Component, { key: index, children: content }) : content;
                 }
-                // Replace placeholders with actual values
-                return replaceValue(part, values);
+
+                // Replace value placeholders with actual values
+                const valueMatch = part.match(/{{(\w+)}}/);
+                if (valueMatch) {
+                    const valueKey = valueMatch[1];
+                    return values[valueKey] || part;
+                }
+                return part;
             })}
         </>
     );
@@ -45,4 +49,4 @@ const localize = mockFn;
 
 const getAllowedLanguages = jest.fn(() => ({ EN: 'English', VI: 'Tiếng Việt' }));
 
-export { Localize, localize, useTranslations, getAllowedLanguages };
+export { Localize, localize, useTranslations, getAllowedLanguages };

packages/wallets/jest.config.js

@@ -3,6 +3,7 @@ const baseConfigForPackages = require('../../jest.config.base');
 module.exports = {
     ...baseConfigForPackages,
     moduleNameMapper: {
+        '@deriv-com/translations': '<rootDir>/../../__mocks__/translation.mock.js',
         '\\.(css|s(c|a)ss)$': '<rootDir>/../../__mocks__/styleMock.js',
         '^.+\\.svg$': '<rootDir>/../../__mocks__/fileMock.js',
     },

packages/wallets/package.json

@@ -9,19 +9,18 @@
     "scripts": {
         "analyze:stats": "NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\" --profile --json=stats.json",
         "analyze:build": "webpack-bundle-analyzer --no-open -m static -r treemap.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
-        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\" && npm run translate",
+        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\"",
         "serve": "rimraf dist && concurrently \"cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config ./webpack.config.js\" \"tsc -w --noEmit --preserveWatchOutput\"",
-        "start": "rimraf dist && npm run test && npm run serve",
-        "translate": "sh ./scripts/update-translations.sh"
+        "start": "rimraf dist && npm run test && npm run serve"
     },
     "dependencies": {
         "@deriv-com/analytics": "1.10.0",
+        "@deriv-com/translations": "1.3.4",
         "@deriv-com/ui": "1.29.9",
         "@deriv-com/utils": "^0.0.25",
         "@deriv/api-v2": "^1.0.0",
         "@deriv/integration": "^1.0.0",
         "@deriv/quill-icons": "1.23.3",
-        "react-joyride": "^2.5.3",
         "@deriv/utils": "^1.0.0",
         "@tanstack/react-table": "^8.10.3",
         "@zxcvbn-ts/core": "^3.0.4",
@@ -31,14 +30,13 @@
         "downshift": "^8.2.2",
         "embla-carousel-react": "8.0.0-rc12",
         "formik": "^2.1.4",
-        "i18next": "^22.4.6",
         "moment": "^2.29.2",
         "qrcode.react": "^3.1.0",
         "react": "^17.0.2",
         "react-calendar": "^4.7.0",
         "react-dom": "^17.0.2",
         "react-dropzone": "11.0.1",
-        "react-i18next": "^11.11.0",
+        "react-joyride": "^2.5.3",
         "react-router-dom": "^5.2.0",
         "react-transition-group": "4.4.2",
         "usehooks-ts": "^2.7.0",

packages/wallets/src/App.tsx

@@ -1,20 +1,29 @@
 import React from 'react';
 import { APIProvider } from '@deriv/api-v2';
+import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
 import { ModalProvider } from './components/ModalProvider';
 import AppContent from './AppContent';
 import WalletsAuthProvider from './AuthProvider';
 import './styles/fonts.scss';
 import './index.scss';
-import './translations/i18n';
 
-const App: React.FC = () => (
-    <APIProvider standalone>
-        <WalletsAuthProvider>
-            <ModalProvider>
-                <AppContent />
-            </ModalProvider>
-        </WalletsAuthProvider>
-    </APIProvider>
-);
+const App: React.FC = () => {
+    const i18nInstance = initializeI18n({
+        cdnUrl: `${process.env.CROWDIN_URL}/${process.env.WALLETS_TRANSLATION_PATH}`, // 'https://translations.deriv.com/deriv-app-wallets/staging'
+        useSuspense: false,
+    });
+
+    return (
+        <APIProvider standalone>
+            <WalletsAuthProvider>
+                <ModalProvider>
+                    <TranslationProvider defaultLang='EN' i18nInstance={i18nInstance}>
+                        <AppContent />
+                    </TranslationProvider>
+                </ModalProvider>
+            </WalletsAuthProvider>
+        </APIProvider>
+    );
+};
 
 export default App;

packages/wallets/src/AppContent.tsx

@@ -1,16 +1,12 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useEffect, useRef } from 'react';
 import { useDerivAccountsList } from '@deriv/api-v2';
 import { Analytics } from '@deriv-com/analytics';
 import useAllBalanceSubscription from './hooks/useAllBalanceSubscription';
 import { defineViewportHeight } from './utils/utils';
-import { WalletLanguageSidePanel } from './components';
 import { Router } from './routes';
 import './AppContent.scss';
 
 const AppContent: React.FC = () => {
-    const [isPanelOpen, setIsPanelOpen] = useState(false);
-    const { i18n } = useTranslation();
     const { isSubscribed, subscribeToAllBalance, unsubscribeFromAllBalance } = useAllBalanceSubscription();
     const { data: derivAccountList } = useDerivAccountsList();
     const previousDerivAccountListLenghtRef = useRef(0);
@@ -28,20 +24,6 @@ const AppContent: React.FC = () => {
         };
     }, [derivAccountList?.length, isSubscribed, subscribeToAllBalance, unsubscribeFromAllBalance]);
 
-    useEffect(() => {
-        const handleShortcutKey = (event: globalThis.KeyboardEvent) => {
-            if (event.ctrlKey && event.key === 'p') {
-                setIsPanelOpen(prev => !prev);
-            }
-        };
-
-        window.addEventListener('keydown', handleShortcutKey);
-
-        return () => {
-            window.removeEventListener('keydown', handleShortcutKey);
-        };
-    }, [setIsPanelOpen]);
-
     useEffect(() => {
         defineViewportHeight();
     }, []);
@@ -54,10 +36,9 @@ const AppContent: React.FC = () => {
     }, []);
 
     return (
-        <div className='wallets-app' key={`wallets_app_${i18n.language}`}>
+        <div className='wallets-app'>
             <div className='wallets-modal-show-header-root' id='wallets_modal_show_header_root' />
             <Router />
-            {isPanelOpen && <WalletLanguageSidePanel />}
         </div>
     );
 };

packages/wallets/src/components/AccountsList/AccountsList.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Divider, Tab, Tabs } from '@deriv-com/ui';
 import { CFDPlatformsList } from '../../features';
 import useDevice from '../../hooks/useDevice';
@@ -15,7 +14,6 @@ type TProps = {
 
 const AccountsList: FC<TProps> = ({ accountsActiveTabIndex, onTabClickHandler }) => {
     const { isMobile } = useDevice();
-    const { t } = useTranslation();
 
     const onChangeTabHandler = useCallback((activeTab: number) => onTabClickHandler?.(activeTab), [onTabClickHandler]);
 
@@ -27,11 +25,11 @@ const AccountsList: FC<TProps> = ({ accountsActiveTabIndex, onTabClickHandler })
                 onChange={onChangeTabHandler}
                 wrapperClassName='wallets-accounts-list'
             >
-                <Tab className='wallets-accounts-list__tab' title={t('CFDs')}>
+                <Tab className='wallets-accounts-list__tab' title='CFDs'>
                     <CFDPlatformsList />
                     <Divider color='var(--wallets-banner-border-color)' />
                 </Tab>
-                <Tab className='wallets-accounts-list__tab' title={t('Options')}>
+                <Tab className='wallets-accounts-list__tab' title='Options'>
                     <OptionsAndMultipliersListing />
                     <Divider color='var(--wallets-banner-border-color)' />
                 </Tab>