feat: set up translation

.github/workflows/sync-translations.yml

@@ -0,0 +1,27 @@
+name: Sync translations
+
+on:
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  sync_translations:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout to main branch
+        uses: actions/checkout@v3
+
+      - name: Sync translations
+        uses: deriv-com/translations/.github/actions/extract_and_sync_translations@main
+        with:
+          PROJECT_NAME: ${{ env.PROJECT_NAME }}
+          CROWDIN_BRANCH_NAME: ${{ env.CROWDIN_BRANCH_NAME }}
+          # CROWDIN_BASE_URL: ${{ env.CROWDIN_BASE_URL }}
+          # CROWDIN_BASE_PATH: ${{ env.CROWDIN_BASE_PATH }}
+          CROWDIN_PROJECT_ID: ${{ env.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ env.CROWDIN_PERSONAL_TOKEN }}
+          R2_ACCOUNT_ID: ${{ env.R2_ACCOUNT_ID }}
+          R2_ACCESS_KEY_ID: ${{ env.R2_ACCESS_KEY_ID }}
+          R2_SECRET_ACCESS_KEY: ${{ env.R2_SECRET_ACCESS_KEY }}
+          R2_BUCKET_NAME: ${{ env.R2_BUCKET_NAME }}

package.json

@@ -16,6 +16,7 @@
     "dependencies": {
         "@babel/preset-env": "^7.24.5",
         "@deriv-com/api-hooks": "^0.1.19",
+        "@deriv-com/translations": "^1.2.0",
         "@deriv-com/ui": "latest",
         "@deriv-com/utils": "latest",
         "@deriv/deriv-api": "^1.0.15",

src/App.tsx

@@ -2,14 +2,21 @@ import { BrowserRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { Header } from '@/components';
+import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
 import AppContent from './routes/AppContent';
 
+const i18nInstance = initializeI18n({
+    cdnUrl: `https://pub-5ce11fcb15f34c0a9ce8ba7086d16e6a.r2.dev/${process.env.CROWDIN_PROJECT_ID}/${process.env.CROWDIN_BRANCH_NAME}`,
+});
+
 const App = () => {
     return (
         <BrowserRouter>
             <QueryParamProvider adapter={ReactRouter5Adapter}>
-                <Header />
-                <AppContent />
+                <TranslationProvider defaultLang='ID' i18nInstance={i18nInstance}>
+                    <Header />
+                    <AppContent />
+                </TranslationProvider>
             </QueryParamProvider>
         </BrowserRouter>
     );

src/components/AdvertiserName/AdvertiserNameStats.tsx

@@ -3,6 +3,7 @@ import { DeepPartial, TAdvertiserStats } from 'types';
 import { OnlineStatusIcon, OnlineStatusLabel, StarRating } from '@/components';
 import { getCurrentRoute } from '@/utils';
 import { LabelPairedCircleUserSlashSmRegularIcon, LabelPairedThumbsUpSmRegularIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import './AdvertiserNameStats.scss';
 
@@ -51,7 +52,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
             {!ratingAverage && (
                 <div>
                     <Text color='less-prominent' size='sm'>
-                        Not rated yet
+                        <Localize i18n_default_text='Not rated yet' />
                     </Text>
                 </div>
             )}

src/hooks/api/advertiser/p2p-advertiser/useAdvertiserCreate.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { useP2PAdvertiserCreate } from '@deriv-com/api-hooks';
+import { useP2PAdvertiserCreate, useP2PAdvertiserInfo } from '@deriv-com/api-hooks';
 import useInvalidateQuery from '../../useInvalidateQuery';
 
 type TCreateAdvertiserPayload = Parameters<ReturnType<typeof useP2PAdvertiserCreate>['mutate']>[0];
@@ -16,6 +16,7 @@ type TCreateAdvertiserPayload = Parameters<ReturnType<typeof useP2PAdvertiserCre
  *
 */
 const useAdvertiserCreate = () => {
+    const { subscribe } = useP2PAdvertiserInfo() ?? {};
     const invalidate = useInvalidateQuery();
     const {
         data,
@@ -24,6 +25,7 @@ const useAdvertiserCreate = () => {
     } = useP2PAdvertiserCreate({
         onSuccess: () => {
             invalidate('p2p_advertiser_info');
+            subscribe({});
         },
     });
 

tsconfig.json

@@ -19,7 +19,7 @@
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "noFallthroughCasesInSwitch": true,
-        "types": ["@testing-library/jest-dom"],
+        "types": ["@testing-library/jest-dom", "node"],
         "paths": {
             "@/*": ["src/*"]
         }