diff --git a/.github/actions/build/action.yml b/.github/actions/build/action.yml index fa3538b32bfd..194a791d8fd3 100644 --- a/.github/actions/build/action.yml +++ b/.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 }} diff --git a/.github/workflows/release_staging.yml b/.github/workflows/release_staging.yml index 4623ae0bd255..3d7df848999a 100644 --- a/.github/workflows/release_staging.yml +++ b/.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 }} diff --git a/.github/workflows/release_test.yml b/.github/workflows/release_test.yml index 3105ba94dfe5..9979c9ee3704 100644 --- a/.github/workflows/release_test.yml +++ b/.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 }} diff --git a/.github/workflows/sync-translations.yml b/.github/workflows/sync-translations.yml index d31fd7d7ca43..654fe06a9ebd 100644 --- a/.github/workflows/sync-translations.yml +++ b/.github/workflows/sync-translations.yml @@ -6,7 +6,7 @@ on: - master schedule: - cron: '0 */12 * * *' - + jobs: sync_translations: permissions: @@ -14,7 +14,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 +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" diff --git a/__mocks__/translation.mock.js b/__mocks__/translation.mock.js index 61c0e4560c33..0dd0e76a20d9 100644 --- a/__mocks__/translation.mock.js +++ b/__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 }; \ No newline at end of file +export { Localize, localize, useTranslations, getAllowedLanguages }; diff --git a/packages/wallets/crowdin.yml b/packages/wallets/crowdin.yml deleted file mode 100644 index d043977d7a9d..000000000000 --- a/packages/wallets/crowdin.yml +++ /dev/null @@ -1,10 +0,0 @@ -project_id: '631094' -api_token_env: 'CROWDIN_WALLETS_API_KEY' - -files: - - source: /src/translations/messages.json - translation: /src/translations/%two_letters_code%.json - languages_mapping: - two_letters_code: - zh-CN: zh_cn - zh-TW: zh_tw 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 50c53631ab20..41678a6d4c44 100644 --- a/packages/wallets/package.json +++ b/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", diff --git a/packages/wallets/scripts/update-translations.sh b/packages/wallets/scripts/update-translations.sh deleted file mode 100644 index a8b8bea4ae6b..000000000000 --- a/packages/wallets/scripts/update-translations.sh +++ /dev/null @@ -1,59 +0,0 @@ -#!/bin/sh -RED='\033[0;31m' -GREEN='\033[0;32m' -YELLOW='\033[0;33m' -WHITE='\033[1;37m' -RESET='\033[0m' - -message() { - echo ${GREEN}" >"${RESET} $1 -} - -fail() { - echo $1 >&2 - break -} - -retry() { - local max=5 - local delay=2 - local attempt=1 - while true; do - "$@" && break || { - if [[ $attempt -lt $max ]]; then - echo "Command failed. Attempt $attempt/$max:" - sleep $(($delay * 2 ** attempt)) - ((attempt++)) - else - fail "The command has failed after $attempt attempts." - break - fi - } - done -} - -if [ "$NODE_ENV" = "staging" ]; then - if ! [ -x "$(command -v crowdin)" ]; then - if [ -f /usr/local/bin/crowdin-cli.jar ]; then - alias crowdin="java -jar /usr/local/bin/crowdin-cli.jar" - else - echo "Installing Crowdin CLI..." - npm i -g @crowdin/cli - fi - fi - - GENERATE_KEY=src/utils/generate-keys.ts - if [ -f "$GENERATE_KEY" ]; then - message "Uploading source file to Crowdin" && - retry crowdin upload sources --auto-update && - message "Complete, new translations have been uploaded to Crowdin" - fi - - message "Downloading wallets files from Crowdin (*.json)" && - retry crowdin download && rm -rf src/translations/messages.json && - - echo ${GREEN}"\nSuccessfully Done." -else - rm -rf src/translations/messages.json && - echo ${YELLOW}"\nSkipping translations update..." -fi diff --git a/packages/wallets/src/App.tsx b/packages/wallets/src/App.tsx index 9b4541882f49..f2d0f4579f81 100644 --- a/packages/wallets/src/App.tsx +++ b/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 = () => ( - - - - - - - -); +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 ( + + + + + + + + + + ); +}; export default App; diff --git a/packages/wallets/src/AppContent.tsx b/packages/wallets/src/AppContent.tsx index 7cdbb9c85277..b13fd3c207eb 100644 --- a/packages/wallets/src/AppContent.tsx +++ b/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 ( -
+
- {isPanelOpen && }
); }; diff --git a/packages/wallets/src/components/AccountsList/AccountsList.tsx b/packages/wallets/src/components/AccountsList/AccountsList.tsx index 4ecb454ff2c9..7cc85c16d04b 100644 --- a/packages/wallets/src/components/AccountsList/AccountsList.tsx +++ b/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 = ({ accountsActiveTabIndex, onTabClickHandler }) => { const { isMobile } = useDevice(); - const { t } = useTranslation(); const onChangeTabHandler = useCallback((activeTab: number) => onTabClickHandler?.(activeTab), [onTabClickHandler]); @@ -27,11 +25,11 @@ const AccountsList: FC = ({ accountsActiveTabIndex, onTabClickHandler }) onChange={onChangeTabHandler} wrapperClassName='wallets-accounts-list' > - + - + diff --git a/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx index 4d5c40bc35ea..a73a55804e91 100644 --- a/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx +++ b/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { Trans } from 'react-i18next'; import { useHistory } from 'react-router-dom'; import { useActiveLinkedToTradingAccount } from '@deriv/api-v2'; import { LabelPairedChevronRightCaptionRegularIcon } from '@deriv/quill-icons'; @@ -23,16 +22,14 @@ const OptionsAndMultipliersListing = () => {
{!isMobile && ( - + Options )} - , - ]} - defaults='Predict the market, profit if you’re right, risk only what you put in. <0>Learn more' - /> + Predict the market, profit if you’re right, risk only what you put in.{' '} + + Learn more +
@@ -61,12 +58,8 @@ const OptionsAndMultipliersListing = () => { } >
- - - - - - + {title} + {description}
); diff --git a/packages/wallets/src/components/Page404/Page404.tsx b/packages/wallets/src/components/Page404/Page404.tsx index 0f516223f761..fd2d95951333 100644 --- a/packages/wallets/src/components/Page404/Page404.tsx +++ b/packages/wallets/src/components/Page404/Page404.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { Trans } from 'react-i18next'; import { useHistory } from 'react-router-dom'; import useDevice from '../../hooks/useDevice'; import { WalletButton, WalletText } from '../Base'; @@ -35,7 +34,7 @@ const Page404 = () => { size={buttonSize} > - + Return to Trader's Hub )} diff --git a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx index e405764574dc..19da16e04537 100644 --- a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx +++ b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx @@ -1,6 +1,5 @@ import React, { FC, Fragment, useEffect, useState } from 'react'; import classNames from 'classnames'; -import { Trans } from 'react-i18next'; import { useCountdown } from 'usehooks-ts'; import { DerivLightIcEmailSentIcon, @@ -31,26 +30,23 @@ type SentEmailContentProps = { // NOTE: key field is not from BE or requirements, its only used for key prop const emailReasons = [ { - content: , + content: 'The email is in your spam folder (Sometimes things get lost there).', icon: , key: 'EmailInSpamFolder', }, { - content: ( - - ), + content: + 'You accidentally gave us another email address (Usually a work or a personal one instead of the one you meant).', icon: , key: 'AnotherEmailAddress', }, { - content: , + content: 'The email address you entered had a mistake or typo (happens to the best of us).', icon: , key: 'TypoEmailAddress', }, { - content: ( - - ), + content: 'We can’t deliver the email to this address (Usually because of firewalls or filtering).', icon: , key: 'UnableToDeliverEmailAddress', }, @@ -123,7 +119,7 @@ const SentEmailContent: FC = ({ variant='ghost' > - + Didn't receive the email? )} diff --git a/packages/wallets/src/components/WalletLanguageSidePanel/WalletLanguageSidePanel.scss b/packages/wallets/src/components/WalletLanguageSidePanel/WalletLanguageSidePanel.scss deleted file mode 100644 index 1dae8ce92e11..000000000000 --- a/packages/wallets/src/components/WalletLanguageSidePanel/WalletLanguageSidePanel.scss +++ /dev/null @@ -1,26 +0,0 @@ -.wallets-language-side-panel { - position: fixed; - bottom: 4.6rem; - right: 1rem; - width: 34rem; - border-radius: 0.6rem; - padding: 1.2rem 1.6rem; - background-color: #fff; - box-shadow: 0 2rem 1.3rem #00000003, 0 0.4rem 0.3rem #00000005; - border: 0.1rem solid #897d7d; - z-index: 69420; - display: grid; - grid-template-rows: auto 1fr; - gap: 1rem; - - &__language-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); - gap: 2.5rem; - margin-top: 1rem; - } - - &__language-item { - cursor: pointer; - } -} diff --git a/packages/wallets/src/components/WalletLanguageSidePanel/WalletLanguageSidePanel.tsx b/packages/wallets/src/components/WalletLanguageSidePanel/WalletLanguageSidePanel.tsx deleted file mode 100644 index cab564301275..000000000000 --- a/packages/wallets/src/components/WalletLanguageSidePanel/WalletLanguageSidePanel.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import i18n, { setLanguage } from '../../translations/i18n'; -import { WalletText } from '../Base'; -import './WalletLanguageSidePanel.scss'; - -const languages = { - English: 'EN', - German: 'DE', - Indonesian: 'ID', - Malay: 'MS', -}; - -const WalletLanguageSidePanel: React.FC = () => { - return ( -
- - Languages - -
    - {Object.keys(languages).map(language => { - const languageCode = languages[language as keyof typeof languages]; - return ( -
    { - setLanguage(languageCode); - }} - > -
  • - - {language} - -
    • -
    - ); - })} -
-
- ); -}; - -export default WalletLanguageSidePanel; diff --git a/packages/wallets/src/components/WalletLanguageSidePanel/index.ts b/packages/wallets/src/components/WalletLanguageSidePanel/index.ts deleted file mode 100644 index 4a5c66f66567..000000000000 --- a/packages/wallets/src/components/WalletLanguageSidePanel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WalletLanguageSidePanel } from './WalletLanguageSidePanel'; diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx index a94e61a75d82..9a52002c9bf9 100644 --- a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx +++ b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx @@ -7,22 +7,24 @@ import { LabelPairedMinusMdBoldIcon, LabelPairedPlusMdBoldIcon, } from '@deriv/quill-icons'; +import { useTranslations } from '@deriv-com/translations'; +import { Text } from '@deriv-com/ui'; import useDevice from '../../hooks/useDevice'; -import { IconButton, WalletButton, WalletText } from '../Base'; +import { IconButton, WalletButton } from '../Base'; import './WalletListCardActions.scss'; type TProps = { accountsActiveTabIndex?: number; }; -const getWalletHeaderButtons = (isDemo?: boolean) => { +const getWalletHeaderButtons = (localize: ReturnType['localize'], isDemo?: boolean) => { const buttons = [ { className: isDemo ? 'wallets-mobile-actions-content-icon' : 'wallets-mobile-actions-content-icon--primary', color: isDemo ? 'white' : 'primary', icon: isDemo ? : , name: isDemo ? 'reset-balance' : 'deposit', - text: isDemo ? 'Reset balance' : 'Deposit', + text: isDemo ? localize('Reset balance') : localize('Deposit'), variant: isDemo ? 'outlined' : 'contained', }, { @@ -30,7 +32,7 @@ const getWalletHeaderButtons = (isDemo?: boolean) => { color: 'white', icon: , name: 'withdrawal', - text: 'Withdraw', + text: localize('Withdraw'), variant: 'outlined', }, { @@ -38,7 +40,7 @@ const getWalletHeaderButtons = (isDemo?: boolean) => { color: 'white', icon: , name: 'account-transfer', - text: 'Transfer', + text: localize('Transfer'), variant: 'outlined', }, ] as const; @@ -53,6 +55,7 @@ const WalletListCardActions: React.FC = ({ accountsActiveTabIndex }) => const { data: activeWallet } = useActiveWalletAccount(); const { isMobile } = useDevice(); const history = useHistory(); + const { localize } = useTranslations(); const isActive = activeWallet?.is_active; const isDemo = activeWallet?.is_virtual; @@ -61,7 +64,7 @@ const WalletListCardActions: React.FC = ({ accountsActiveTabIndex }) => return (
- {getWalletHeaderButtons(isDemo).map(button => ( + {getWalletHeaderButtons(localize, isDemo).map(button => (
= ({ accountsActiveTabIndex }) => }} size='lg' /> - + {button.text} - +
))}
@@ -84,7 +87,7 @@ const WalletListCardActions: React.FC = ({ accountsActiveTabIndex }) => return (
- {getWalletHeaderButtons(isDemo).map(button => ( + {getWalletHeaderButtons(localize, isDemo).map(button => ( { return (
{isDemo ? ( - - - + + + ) : ( )} diff --git a/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx b/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx index c2742d58a9a3..a915cdbe0d6e 100644 --- a/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx +++ b/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx @@ -1,15 +1,16 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import classNames from 'classnames'; -import { Trans, useTranslation } from 'react-i18next'; import { useEventListener, useOnClickOutside } from 'usehooks-ts'; import { useActiveWalletAccount, useWalletAccountsList } from '@deriv/api-v2'; import { displayMoney } from '@deriv/api-v2/src/utils'; import { LabelPairedChevronDownLgFillIcon } from '@deriv/quill-icons'; +import { Localize } from '@deriv-com/translations'; +import { Text } from '@deriv-com/ui'; import useAllBalanceSubscription from '../../hooks/useAllBalanceSubscription'; import useWalletAccountSwitcher from '../../hooks/useWalletAccountSwitcher'; import { THooks } from '../../types'; import reactNodeToString from '../../utils/react-node-to-string'; -import { WalletText, WalletTextField } from '../Base'; +import { WalletTextField } from '../Base'; import { WalletCurrencyIcon } from '../WalletCurrencyIcon'; import './WalletListCardDropdown.scss'; @@ -24,7 +25,6 @@ const WalletListCardDropdown = () => { const { data: wallets } = useWalletAccountsList(); const { data: activeWallet } = useActiveWalletAccount(); const switchWalletAccount = useWalletAccountSwitcher(); - const { t } = useTranslation(); const dropdownRef = useRef(null); const { data: balanceData, isLoading: isBalanceLoading } = useAllBalanceSubscription(); @@ -33,12 +33,9 @@ const WalletListCardDropdown = () => { const [isOpen, setIsOpen] = useState(false); const [selectedText, setSelectedText] = useState(''); - const generateTitleText = useCallback( - (wallet: THooks.WalletAccountsList) => { - return t(`${wallet?.currency} Wallet`); - }, - [t] - ); + const generateTitleText = useCallback((wallet: THooks.WalletAccountsList) => { + return `${wallet?.currency} Wallet`; + }, []); const walletList: WalletList = useMemo(() => { return ( @@ -112,9 +109,9 @@ const WalletListCardDropdown = () => { {isOpen && (
    - - - + + +
    {walletList.map((wallet, index) => (
  • {
    - - - + {wallet.currency} Wallet {isBalanceLoading ? (
    ) : ( - - - + + {displayMoney( + balanceData?.[wallet.loginid]?.balance, + wallet?.currency, + { + fractional_digits: + wallet?.currencyConfig?.fractional_digits, + } + )} + )}
    diff --git a/packages/wallets/src/components/WalletListHeader/WalletListHeader.scss b/packages/wallets/src/components/WalletListHeader/WalletListHeader.scss index 05a0cf1dcf8f..3b62db52486e 100644 --- a/packages/wallets/src/components/WalletListHeader/WalletListHeader.scss +++ b/packages/wallets/src/components/WalletListHeader/WalletListHeader.scss @@ -10,11 +10,16 @@ &__label { display: flex; position: absolute; - margin-left: 3rem; + margin-left: 2rem; margin-top: 1rem; - gap: 2.4rem; z-index: 1; pointer-events: none; + + &-item { + width: 5.6rem; + display: flex; + justify-content: center; + } } &__switcher { diff --git a/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx b/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx index 6e7c1a305f7a..bf73c0c99722 100644 --- a/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx +++ b/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx @@ -1,9 +1,9 @@ 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 { Text } from '@deriv-com/ui'; import useDevice from '../../hooks/useDevice'; import useWalletAccountSwitcher from '../../hooks/useWalletAccountSwitcher'; -import { WalletText } from '../Base'; import './WalletListHeader.scss'; const WalletListHeader: React.FC = () => { @@ -35,18 +35,22 @@ const WalletListHeader: React.FC = () => { return (
    - - Trader's Hub - + + + {shouldShowSwitcher && (
    - - - - - - +
    + + + +
    +
    + + + +