From cdede05aff83c3f6b4b723aa7d5013dc1cb59a59 Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Wed, 10 Jul 2024 11:24:48 +0800 Subject: [PATCH 01/24] feat: draft wallet translations --- .github/workflows/sync-translations.yml | 19 +++- .../Containers/Layout/trading-hub-footer.jsx | 14 +-- packages/wallets/jest.config.js | 1 + packages/wallets/package.json | 3 +- packages/wallets/src/App.tsx | 28 +++-- .../WalletListCardActions.tsx | 5 +- .../WalletListCardBalance.tsx | 17 +-- .../WalletListCardDetails.tsx | 4 +- .../WalletListCardDropdown.tsx | 16 +-- .../WalletListHeader/WalletListHeader.tsx | 8 +- .../src/features/cfd/CFDPlatformsList.tsx | 16 +-- packages/wallets/webpack.config.js | 103 +++++++++--------- 12 files changed, 132 insertions(+), 102 deletions(-) diff --git a/.github/workflows/sync-translations.yml b/.github/workflows/sync-translations.yml index d31fd7d7ca43..8194ed319890 100644 --- a/.github/workflows/sync-translations.yml +++ b/.github/workflows/sync-translations.yml @@ -6,7 +6,10 @@ on: - master schedule: - cron: '0 */12 * * *' - + pull_request: + branches: + - master + jobs: sync_translations: permissions: @@ -14,7 +17,7 @@ jobs: 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 +29,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.ACC_R2_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" diff --git a/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx b/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx index b51f1c23efee..225ff10140eb 100644 --- a/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx +++ b/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx @@ -134,14 +134,12 @@ const TradingHubFooter = observer(() => { showPopover={showPopover} /> )} - {!has_wallet && ( - - )} + diff --git a/packages/wallets/jest.config.js b/packages/wallets/jest.config.js index b4e375103328..8812c55d50b2 100644 --- a/packages/wallets/jest.config.js +++ b/packages/wallets/jest.config.js @@ -3,6 +3,7 @@ const baseConfigForPackages = require('../../jest.config.base'); module.exports = { ...baseConfigForPackages, moduleNameMapper: { + '@deriv-com/translations': '/../../__mocks__/translation.mock.js', '\\.(css|s(c|a)ss)$': '/../../__mocks__/styleMock.js', '^.+\\.svg$': '/../../__mocks__/fileMock.js', }, diff --git a/packages/wallets/package.json b/packages/wallets/package.json index 1dd6d052fc33..6922fb496652 100644 --- a/packages/wallets/package.json +++ b/packages/wallets/package.json @@ -16,12 +16,12 @@ }, "dependencies": { "@deriv-com/analytics": "1.8.0", + "@deriv-com/translations": "^1.3.3", "@deriv-com/ui": "^1.28.3", "@deriv-com/utils": "^0.0.25", "@deriv/api-v2": "^1.0.0", "@deriv/integration": "^1.0.0", "@deriv/quill-icons": "^1.22.12", - "react-joyride": "^2.5.3", "@deriv/utils": "^1.0.0", "@tanstack/react-table": "^8.10.3", "@zxcvbn-ts/core": "^3.0.4", @@ -38,6 +38,7 @@ "react-calendar": "^4.7.0", "react-dom": "^17.0.2", "react-dropzone": "11.0.1", + "react-joyride": "^2.5.3", "react-i18next": "^11.11.0", "react-router-dom": "^5.2.0", "react-transition-group": "4.4.2", diff --git a/packages/wallets/src/App.tsx b/packages/wallets/src/App.tsx index 9b4541882f49..22bffd77b2e6 100644 --- a/packages/wallets/src/App.tsx +++ b/packages/wallets/src/App.tsx @@ -1,5 +1,6 @@ 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'; @@ -7,14 +8,23 @@ import './styles/fonts.scss'; import './index.scss'; import './translations/i18n'; -const App: React.FC = () => ( - - - - - - - -); +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/translations', + useSuspense: false, + }); + + return ( + + + + + + + + + + ); +}; export default App; diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx index 234c82e9cd8b..cbd2f05a1f0d 100644 --- a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx +++ b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx @@ -7,6 +7,7 @@ import { LabelPairedMinusMdBoldIcon, LabelPairedPlusMdBoldIcon, } from '@deriv/quill-icons'; +import { Localize } from '@deriv-com/translations'; import useDevice from '../../hooks/useDevice'; import { IconButton, WalletButton, WalletText } from '../Base'; import './WalletListCardActions.scss'; @@ -70,7 +71,7 @@ const WalletListCardActions = () => { size='lg' /> - {button.text} + ))} @@ -91,7 +92,7 @@ const WalletListCardActions = () => { rounded='lg' variant={button.variant} > - {isActive ? button.text : ''} + ))} diff --git a/packages/wallets/src/components/WalletListCardBalance/WalletListCardBalance.tsx b/packages/wallets/src/components/WalletListCardBalance/WalletListCardBalance.tsx index 1435c1097f5c..432e5dc143ae 100644 --- a/packages/wallets/src/components/WalletListCardBalance/WalletListCardBalance.tsx +++ b/packages/wallets/src/components/WalletListCardBalance/WalletListCardBalance.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useActiveWalletAccount } from '@deriv/api-v2'; import { displayMoney } from '@deriv/api-v2/src/utils'; +import { Localize } from '@deriv-com/translations'; import { TSubscribedBalance } from '../../types'; import { WalletText } from '../Base'; import './WalletListCardBalance.scss'; @@ -19,13 +20,15 @@ const WalletListCardBalance: React.FC = ({ balance }) => { /> ) : ( - {displayMoney?.( - balanceData?.accounts?.[activeWallet?.loginid ?? '']?.balance ?? 0, - activeWallet?.currency ?? '', - { - fractional_digits: activeWallet?.currency_config?.fractional_digits, - } - )} + )} diff --git a/packages/wallets/src/components/WalletListCardDetails/WalletListCardDetails.tsx b/packages/wallets/src/components/WalletListCardDetails/WalletListCardDetails.tsx index 3f4a949a0c8c..8cb15aac1a88 100644 --- a/packages/wallets/src/components/WalletListCardDetails/WalletListCardDetails.tsx +++ b/packages/wallets/src/components/WalletListCardDetails/WalletListCardDetails.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; -import { Trans } from 'react-i18next'; import { useActiveWalletAccount } from '@deriv/api-v2'; +import { Localize } from '@deriv-com/translations'; import { TSubscribedBalance } from '../../types'; import { WalletText } from '../Base'; import WalletListCardActions from '../WalletListCardActions/WalletListCardActions'; @@ -24,7 +24,7 @@ const WalletListCardDetails: React.FC = ({ balance }) => {
{isDemo ? ( - + ) : ( diff --git a/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx b/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx index 10fd92c2796a..8d1d0c5dae07 100644 --- a/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx +++ b/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx @@ -1,7 +1,7 @@ import React, { ComponentProps, useCallback, useEffect, useMemo, useState } from 'react'; -import { Trans, useTranslation } from 'react-i18next'; import { useActiveWalletAccount, useWalletAccountsList } from '@deriv/api-v2'; import { displayMoney } from '@deriv/api-v2/src/utils'; +import { Localize, useTranslations } from '@deriv-com/translations'; import useWalletAccountSwitcher from '../../hooks/useWalletAccountSwitcher'; import { THooks, TSubscribedBalance } from '../../types'; import { WalletDropdown, WalletText } from '../Base'; @@ -14,7 +14,7 @@ const WalletListCardDropdown: React.FC = ({ balance }) => { const { data: wallets } = useWalletAccountsList(); const { data: activeWallet } = useActiveWalletAccount(); const switchWalletAccount = useWalletAccountSwitcher(); - const { t } = useTranslation(); + const { localize } = useTranslations(); const { data: balanceData } = balance; const [inputWidth, setInputWidth] = useState('auto'); @@ -22,9 +22,9 @@ const WalletListCardDropdown: React.FC = ({ balance }) => { const generateTitleText = useCallback( (wallet: THooks.WalletAccountsList) => { - return t(`${wallet?.currency} Wallet`); + return localize(`${wallet?.currency} Wallet`); }, - [t] + [localize] ); useEffect(() => { @@ -44,11 +44,11 @@ const WalletListCardDropdown: React.FC = ({ balance }) => {
- + - = ({ balance }) => { list={walletList ?? []} listHeader={ - + } name='wallets-list-card-dropdown' diff --git a/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx b/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx index 6e7c1a305f7a..993cce1ed187 100644 --- a/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx +++ b/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; -import { Trans } from 'react-i18next'; import { useActiveWalletAccount, useWalletAccountsList } from '@deriv/api-v2'; +import { Localize } from '@deriv-com/translations'; import useDevice from '../../hooks/useDevice'; import useWalletAccountSwitcher from '../../hooks/useWalletAccountSwitcher'; import { WalletText } from '../Base'; @@ -36,16 +36,16 @@ const WalletListHeader: React.FC = () => { return (
- Trader's Hub + {shouldShowSwitcher && (
- + - +