From 8452b123c0cfc96802c7c0bfca07dd0e57c80832 Mon Sep 17 00:00:00 2001 From: lubega-deriv <142860499+lubega-deriv@users.noreply.github.com> Date: Mon, 28 Oct 2024 21:39:11 +0800 Subject: [PATCH] =?UTF-8?q?[WALL]=20Lubega=20/=20WALL-4977=20/=20Enable=20?= =?UTF-8?q?wallets=20translations=20for=20Fran=C3=A7ais=20(FR)=20(#17092)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add french translations to wallets * fix: default options desc * fix: add more success footer button * fix: get allowed languages mock * fix: applied comments * fix: design updates * fix: wrap wallets in localize * fix: subtasks * fix: subtasks * fix: additional kyc info form * fix: cfd password modal tnc redirection language * fix: modal button width * fix: responsive ui issues * fix: enter password hint * Merge branch 'master' of github.com:binary-com/deriv-app into WALL-4977/wallets-french-translation * fix: latest changes * fix: tablet view issues * fix: desktop desc size * fix: message max width --- __mocks__/translation.mock.js | 7 ++++- .../LanguageSettings/language-settings.tsx | 12 +++---- packages/api-v2/src/APIProvider.tsx | 6 +--- packages/core/src/App/AppContent.tsx | 14 +++++++-- .../ToggleMenu/mobile-language-menu.tsx | 12 +++---- .../SettingsModal/settings-language.jsx | 12 +++---- .../src/utils/constants/default-options.ts | 25 +++++++++++++++ .../Base/ATMAmountInput/ATMAmountInput.scss | 6 ++++ .../Base/ATMAmountInput/ATMAmountInput.tsx | 2 +- .../src/components/Base/Tabs/TabTitle.tsx | 2 +- .../src/components/Base/Tabs/Tabs.scss | 3 +- .../WalletAlertMessage.scss | 2 +- .../components/Base/WalletLink/WalletLink.tsx | 31 ++++++++++++------- .../src/components/Dropzone/Dropzone.scss | 4 +++ .../src/components/Dropzone/Dropzone.tsx | 1 + .../OptionsAndMultipliersListing.tsx | 2 +- .../src/components/WalletCard/WalletCard.tsx | 10 ++++-- .../WalletListCardActions.tsx | 2 +- .../WalletListCardDropdown.tsx | 12 ++++--- .../WalletsAddMoreCard.scss | 2 +- .../WalletsAddMoreCardBanner.scss | 2 +- .../WalletsAddMoreCardContent.tsx | 4 +-- .../WalletsCarouselHeader.tsx | 8 +++-- .../DocumentSubmission.scss | 7 ++++- .../DocumentSubmission/DocumentSubmission.tsx | 8 +++-- .../WalletCashierHeader.tsx | 5 ++- .../features/cashier/constants/constants.ts | 3 +- .../src/features/cashier/helpers/helpers.ts | 3 +- .../FiatOnRampProviderCard.scss | 2 +- .../TransactionsCompletedRow.tsx | 2 +- .../TransactionsPendingRow.tsx | 2 +- .../TransferFormAccountSelection.tsx | 7 +++-- .../WithdrawalCrypto/WithdrawalCrypto.scss | 9 +++++- .../WithdrawalCryptoDisclaimer.scss | 1 - .../DepositErrorScreen/DepositErrorScreen.tsx | 14 +++++++-- .../WithdrawalErrorScreen.tsx | 14 +++++++-- .../CFDPasswordModalTnc.scss | 4 +++ .../CFDPasswordModalTnc.tsx | 6 ++-- .../AvailableDxtradeAccountsList.tsx | 2 +- .../cfd/screens/CFDSuccess/CFDSuccess.tsx | 7 +++-- .../CompareAccountsDescription.tsx | 14 +++++---- .../InstrumentsIconWithLabel.tsx | 10 ++++-- .../screens/EnterPassword/EnterPassword.scss | 9 +++++- .../screens/EnterPassword/EnterPassword.tsx | 4 +-- .../JurisdictionTncSection.tsx | 5 +-- .../VerificationFailed.scss | 3 +- packages/wallets/src/helpers/urls.ts | 13 ++++++-- packages/wallets/src/types.ts | 2 +- 48 files changed, 234 insertions(+), 103 deletions(-) diff --git a/__mocks__/translation.mock.js b/__mocks__/translation.mock.js index bcb5aa8a4f74..8d2f34e9c7ad 100644 --- a/__mocks__/translation.mock.js +++ b/__mocks__/translation.mock.js @@ -44,7 +44,12 @@ const useTranslations = () => ({ const localize = mockFn; -const getAllowedLanguages = jest.fn(() => ({ EN: 'English', VI: 'Tiếng Việt' })); +const getAllowedLanguages = jest.fn(unsupported_languages => { + if (unsupported_languages.includes('VI')) { + return { EN: 'English' }; + } + return { EN: 'English', VI: 'Tiếng Việt' }; +}); const getInitialLanguage = jest.fn(() => 'EN'); diff --git a/packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx b/packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx index ef8a1b467af0..6a9b67dc1dd5 100644 --- a/packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx +++ b/packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx @@ -1,5 +1,5 @@ import { Redirect } from 'react-router-dom'; -import { UNSUPPORTED_LANGUAGES, routes } from '@deriv/shared'; +import { UNSUPPORTED_LANGUAGES, WALLETS_UNSUPPORTED_LANGUAGES, routes } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; import { useTranslations, getAllowedLanguages } from '@deriv-com/translations'; import FormSubHeader from '../../../Components/form-sub-header'; @@ -25,13 +25,9 @@ const LanguageSettings = observer(() => { switchLanguage(language_key); }; - let allowed_languages: Record = getAllowedLanguages(UNSUPPORTED_LANGUAGES); - - if (has_wallet) { - allowed_languages = Object.fromEntries( - Object.entries(allowed_languages).filter(([language_key]) => ['EN', 'AR'].includes(language_key)) - ); - } + const allowed_languages: Record = getAllowedLanguages( + has_wallet ? WALLETS_UNSUPPORTED_LANGUAGES : UNSUPPORTED_LANGUAGES + ); return (
diff --git a/packages/api-v2/src/APIProvider.tsx b/packages/api-v2/src/APIProvider.tsx index 6f77ea9b9268..c4333c5f85fa 100644 --- a/packages/api-v2/src/APIProvider.tsx +++ b/packages/api-v2/src/APIProvider.tsx @@ -36,11 +36,7 @@ type APIContextData = { const getWebSocketURL = () => { const endpoint = getSocketURL(); const app_id = getAppId(); - const initial_language = getInitialLanguage(); - const wallet_allowed_languages = initial_language === 'EN' || initial_language === 'AR'; - // fallback to EN if language on initial load is not EN/AR - const language = wallet_allowed_languages ? initial_language : 'EN'; - + const language = getInitialLanguage(); return `wss://${endpoint}/websockets/v3?app_id=${app_id}&l=${language}&brand=deriv`; }; diff --git a/packages/core/src/App/AppContent.tsx b/packages/core/src/App/AppContent.tsx index 26eda6dd9ec4..7149388addb5 100644 --- a/packages/core/src/App/AppContent.tsx +++ b/packages/core/src/App/AppContent.tsx @@ -19,6 +19,7 @@ import { ThemeProvider } from '@deriv-com/quill-ui'; import { useGrowthbookGetFeatureValue, useGrowthbookIsOn, useLiveChat, useOauth2 } from '@deriv/hooks'; import { useTranslations } from '@deriv-com/translations'; import initHotjar from '../Utils/Hotjar'; +import { WALLETS_UNSUPPORTED_LANGUAGES } from '@deriv/shared'; const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }) => { const store = useStore(); @@ -55,7 +56,7 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough } const { data } = useRemoteConfig(true); const { tracking_datadog } = data; const is_passkeys_supported = browserSupportsWebAuthn(); - const wallets_allowed_languages = current_language === 'EN' || current_language === 'AR'; + const is_wallets_unsupported_language = WALLETS_UNSUPPORTED_LANGUAGES.includes(current_language); const livechat_client_information: Parameters[0] = { is_client_store_initialized, @@ -110,11 +111,18 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough } if (is_dark_mode_on) { setDarkMode(false); } - if (!wallets_allowed_languages) { + if (is_wallets_unsupported_language) { changeSelectedLanguage('EN'); } } - }, [has_wallet, current_language, changeSelectedLanguage, is_dark_mode_on, setDarkMode, wallets_allowed_languages]); + }, [ + has_wallet, + current_language, + changeSelectedLanguage, + is_dark_mode_on, + setDarkMode, + is_wallets_unsupported_language, + ]); return ( diff --git a/packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/mobile-language-menu.tsx b/packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/mobile-language-menu.tsx index 3649d0ed0eba..a0fe6048bd71 100644 --- a/packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/mobile-language-menu.tsx +++ b/packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/mobile-language-menu.tsx @@ -5,7 +5,7 @@ import { observer, useStore } from '@deriv/stores'; import { getAllowedLanguages } from '@deriv-com/translations'; import { localize } from '@deriv/translations'; // [TODO:] Remove this once deriv-app is configured to use the new translation lib import { LanguageLink } from 'App/Components/Routes'; -import { UNSUPPORTED_LANGUAGES } from '@deriv/shared'; +import { UNSUPPORTED_LANGUAGES, WALLETS_UNSUPPORTED_LANGUAGES } from '@deriv/shared'; type TMobileLanguageMenu = { expandSubMenu: (prop: boolean) => void; @@ -18,11 +18,9 @@ const MobileLanguageMenu = observer(({ expandSubMenu, toggleDrawer }: TMobileLan const { has_wallet } = client; const { is_mobile_language_menu_open, setMobileLanguageMenuOpen } = ui; - const allowed_languages = Object.keys(getAllowedLanguages(UNSUPPORTED_LANGUAGES)); - - const filtered_languages = has_wallet - ? allowed_languages.filter(lang => lang === 'EN' || lang === 'AR') - : allowed_languages; + const allowed_languages = Object.keys( + getAllowedLanguages(has_wallet ? WALLETS_UNSUPPORTED_LANGUAGES : UNSUPPORTED_LANGUAGES) + ); return ( - {filtered_languages.map(lang => ( + {allowed_languages.map(lang => ( lang === current_language; @@ -12,16 +12,14 @@ const LanguageSettings = observer(() => { const { toggleLanguageSettingsModal } = ui; const { currentLang } = useTranslations(); - const allowed_languages = Object.keys(getAllowedLanguages(UNSUPPORTED_LANGUAGES)); - - const filtered_languages = has_wallet - ? allowed_languages.filter(lang => lang === 'EN' || lang === 'AR') - : allowed_languages; + const allowed_languages = Object.keys( + getAllowedLanguages(has_wallet ? WALLETS_UNSUPPORTED_LANGUAGES : UNSUPPORTED_LANGUAGES) + ); return (
- {filtered_languages.map(lang => + {allowed_languages.map(lang => isCurrentLanguage(lang, currentLang) ? ( ) : ( diff --git a/packages/shared/src/utils/constants/default-options.ts b/packages/shared/src/utils/constants/default-options.ts index df93f9889438..66e4a004b309 100644 --- a/packages/shared/src/utils/constants/default-options.ts +++ b/packages/shared/src/utils/constants/default-options.ts @@ -4,3 +4,28 @@ import { isProduction } from '../config/config'; * Returns List of unsupported languages based on the environment. */ export const UNSUPPORTED_LANGUAGES = isProduction() ? ['ID', 'MN'] : ['MN']; + +/** + * Returns List of unsupported languages for Wallets. + */ +export const WALLETS_UNSUPPORTED_LANGUAGES = [ + ...UNSUPPORTED_LANGUAGES, + 'BN', + 'DE', + 'ES', + 'ID', + 'IT', + 'SW', + 'KM', + 'KO', + 'PL', + 'PT', + 'RU', + 'SI', + 'TH', + 'TR', + 'UZ', + 'VI', + 'ZH_CN', + 'ZH_TW', +]; diff --git a/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.scss b/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.scss index bd3ee2dea991..189cbace0221 100644 --- a/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.scss +++ b/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.scss @@ -4,6 +4,12 @@ padding-inline-end: 0.8rem; width: 100%; + &__label { + @include mobile-or-tablet-screen { + max-width: 14rem; + } + } + &__input { all: unset; position: absolute; diff --git a/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.tsx b/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.tsx index 5c4b8574f952..09ba8cebe49a 100644 --- a/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.tsx +++ b/packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.tsx @@ -61,7 +61,7 @@ const WalletTransferFormInputField: React.FC = ({ return (
- + {label}
diff --git a/packages/wallets/src/components/Base/Tabs/TabTitle.tsx b/packages/wallets/src/components/Base/Tabs/TabTitle.tsx index 0cfaf6d5d8c3..290b4e470156 100644 --- a/packages/wallets/src/components/Base/Tabs/TabTitle.tsx +++ b/packages/wallets/src/components/Base/Tabs/TabTitle.tsx @@ -24,7 +24,7 @@ const TabTitle: FC = ({ icon, index, isActive, setSelectedTab, si onClick={handleOnClick} > {icon} - + {title} diff --git a/packages/wallets/src/components/Base/Tabs/Tabs.scss b/packages/wallets/src/components/Base/Tabs/Tabs.scss index 2f8ec6ecb162..9945b036911d 100644 --- a/packages/wallets/src/components/Base/Tabs/Tabs.scss +++ b/packages/wallets/src/components/Base/Tabs/Tabs.scss @@ -14,12 +14,13 @@ background: none; padding: 1rem 0; cursor: pointer; + &--active { width: 50%; border: none; border-bottom: 0.2rem solid var(--brand-coral, #ff444f); background: none; - padding: 1rem 0; + padding: 1rem; } } } diff --git a/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.scss b/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.scss index a01ea7071748..c46b1b3bb075 100644 --- a/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.scss +++ b/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.scss @@ -16,7 +16,7 @@ position: absolute; height: 100%; top: 50%; - inset-inline-start: 50%; + left: 50%; transform: translate(-50%, -50%); } diff --git a/packages/wallets/src/components/Base/WalletLink/WalletLink.tsx b/packages/wallets/src/components/Base/WalletLink/WalletLink.tsx index a92280ba6b32..f0402a3a9026 100644 --- a/packages/wallets/src/components/Base/WalletLink/WalletLink.tsx +++ b/packages/wallets/src/components/Base/WalletLink/WalletLink.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { getStaticUrl } from '../../../helpers/urls'; +import { getInitialLanguage } from '@deriv-com/translations'; +import { getStaticUrl, setUrlLanguage } from '../../../helpers/urls'; import './WalletLink.scss'; type TVariant = 'bold' | 'normal'; @@ -7,19 +8,27 @@ type TVariant = 'bold' | 'normal'; interface LinkProps { children?: React.ReactNode; href?: React.AnchorHTMLAttributes['href']; + language?: string; staticUrl?: React.AnchorHTMLAttributes['href']; variant?: TVariant; } -const WalletLink: React.FC = ({ children, href, staticUrl, variant = 'normal' }) => ( - - {children} - -); +const WalletLink: React.FC = ({ children, href, language, staticUrl, variant = 'normal' }) => { + const getHref = () => { + setUrlLanguage(getInitialLanguage()); + return getStaticUrl(staticUrl, language); + }; + + return ( + + {children} + + ); +}; export default WalletLink; diff --git a/packages/wallets/src/components/Dropzone/Dropzone.scss b/packages/wallets/src/components/Dropzone/Dropzone.scss index 00a76b98704d..5bf238ba716e 100644 --- a/packages/wallets/src/components/Dropzone/Dropzone.scss +++ b/packages/wallets/src/components/Dropzone/Dropzone.scss @@ -26,6 +26,10 @@ border: 0.1rem solid var(--status-danger, #ec3f3f); } + &__button { + height: auto; + } + &__content { width: 100%; height: 100%; diff --git a/packages/wallets/src/components/Dropzone/Dropzone.tsx b/packages/wallets/src/components/Dropzone/Dropzone.tsx index 3e86dab1ec76..d93aac2e7f38 100644 --- a/packages/wallets/src/components/Dropzone/Dropzone.tsx +++ b/packages/wallets/src/components/Dropzone/Dropzone.tsx @@ -149,6 +149,7 @@ const Dropzone: React.FC = ({
- {currency} {isDemo && isCarouselContent ? localize('Demo') : ''} Wallet + {isDemoCarouselContent ? ( + + ) : ( + + )} {isBalanceLoading ? (
= ({ accountsActiveTabIndex }) => }} size='lg' /> - + {button.text}
diff --git a/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx b/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx index bb99ca632797..22275819a867 100644 --- a/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx +++ b/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx @@ -4,7 +4,7 @@ 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 { Localize, useTranslations } from '@deriv-com/translations'; import { Text } from '@deriv-com/ui'; import useAllBalanceSubscription from '../../hooks/useAllBalanceSubscription'; import useWalletAccountSwitcher from '../../hooks/useWalletAccountSwitcher'; @@ -18,6 +18,7 @@ const WalletListCardDropdown = () => { const { data: wallets } = useWalletAccountsList(); const { data: activeWallet } = useActiveWalletAccount(); const switchWalletAccount = useWalletAccountSwitcher(); + const { localize } = useTranslations(); const dropdownRef = useRef(null); const { data: balanceData, isLoading: isBalanceLoading } = useAllBalanceSubscription(); @@ -26,9 +27,12 @@ const WalletListCardDropdown = () => { const [isOpen, setIsOpen] = useState(false); const [selectedText, setSelectedText] = useState(''); - const generateTitleText = useCallback((wallet: THooks.WalletAccountsList) => { - return `${wallet?.currency} Wallet`; - }, []); + const generateTitleText = useCallback( + (wallet: THooks.WalletAccountsList) => { + return localize('{{currency}} Wallet', { currency: wallet?.currency }); + }, + [localize] + ); const walletList = useMemo(() => { return ( diff --git a/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.scss b/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.scss index 57c974965a57..60d71b7b19de 100644 --- a/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.scss +++ b/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.scss @@ -5,7 +5,7 @@ gap: 2.4rem; padding: 1.6rem; width: 23.2rem; - height: 28.2rem; + height: 100%; border-radius: 1.6rem; flex-shrink: 0; border: 0.1rem solid var(--system-light-5-active-background, #d6dadb); diff --git a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.scss b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.scss index c56cf8143901..654f3dbc6fe9 100644 --- a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.scss +++ b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.scss @@ -21,7 +21,7 @@ } &__success-footer { - width: 24rem; + width: 26rem; @include mobile-or-tablet-screen { width: 100%; diff --git a/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx b/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx index a952b63d3681..4941ae82c998 100644 --- a/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx +++ b/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { localize } from '@deriv-com/translations'; +import { Localize, localize } from '@deriv-com/translations'; import { Text } from '@deriv-com/ui'; import { THooks } from '../../types'; @@ -35,7 +35,7 @@ const WalletsAddMoreCardContent: React.FC = ({ currency }) => { return (
- {currency} Wallet + diff --git a/packages/wallets/src/components/WalletsCarouselHeader/WalletsCarouselHeader.tsx b/packages/wallets/src/components/WalletsCarouselHeader/WalletsCarouselHeader.tsx index 8d12f2530f4f..ad5b4f72b7b1 100644 --- a/packages/wallets/src/components/WalletsCarouselHeader/WalletsCarouselHeader.tsx +++ b/packages/wallets/src/components/WalletsCarouselHeader/WalletsCarouselHeader.tsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import { useHistory } from 'react-router-dom'; import { LabelPairedArrowUpArrowDownSmBoldIcon } from '@deriv/quill-icons'; -import { useTranslations } from '@deriv-com/translations'; +import { Localize, useTranslations } from '@deriv-com/translations'; import { Text, useDevice } from '@deriv-com/ui'; import { IconButton } from '../Base'; import { WalletCurrencyCard } from '../WalletCurrencyCard'; @@ -27,7 +27,11 @@ const WalletsCarouselHeader: React.FC = ({ balance, currency, hidden, is
- {currency} Wallet + {isDemo ? ( + + ) : ( + + )} {isBalanceLoading ? (
= ({ countryCode }) titleType='bold' />
- + - +
diff --git a/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx b/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx index e1df4a8aa1da..68aac26e035d 100644 --- a/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx +++ b/packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx @@ -106,7 +106,10 @@ const WalletCashierHeader: React.FC = ({ hideWalletDetails }) => { })} > - {activeWallet?.currency} Wallet + {isDemo && }
diff --git a/packages/wallets/src/features/cashier/constants/constants.ts b/packages/wallets/src/features/cashier/constants/constants.ts index 010ca88d4fc7..e11ac6513c6b 100644 --- a/packages/wallets/src/features/cashier/constants/constants.ts +++ b/packages/wallets/src/features/cashier/constants/constants.ts @@ -1,3 +1,4 @@ +import { localize } from '@deriv-com/translations'; import { TMarketTypes, TMT5LandingCompanyName, @@ -109,6 +110,6 @@ export const PlatformDetails = { }, standard: { name: 'standard', - title: 'Options', + title: localize('Options'), }, } as const; diff --git a/packages/wallets/src/features/cashier/helpers/helpers.ts b/packages/wallets/src/features/cashier/helpers/helpers.ts index 9dad150c4409..b76b9698b2b1 100644 --- a/packages/wallets/src/features/cashier/helpers/helpers.ts +++ b/packages/wallets/src/features/cashier/helpers/helpers.ts @@ -1,3 +1,4 @@ +import { localize } from '@deriv-com/translations'; import { THooks, TMarketTypes, TWalletLandingCompanyName } from '../../../types'; import { PRODUCT } from '../../cfd/constants'; import { LandingCompanyDetails, MT5MarketTypeDetails, PlatformDetails } from '../constants'; @@ -38,7 +39,7 @@ export const getAccountName = ({ }: TGetAccountNameProps) => { switch (accountCategory) { case 'wallet': - return `${displayCurrencyCode} Wallet`; + return localize('{{currency}} Wallet', { currency: displayCurrencyCode }); case 'trading': { switch (accountType) { case PlatformDetails.standard.name: diff --git a/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampProviderCard/FiatOnRampProviderCard.scss b/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampProviderCard/FiatOnRampProviderCard.scss index 6b5b0ebdc2f3..aec36b3f2c7c 100644 --- a/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampProviderCard/FiatOnRampProviderCard.scss +++ b/packages/wallets/src/features/cashier/modules/FiatOnRamp/components/FiatOnRampProviderCard/FiatOnRampProviderCard.scss @@ -16,7 +16,7 @@ grid-gap: 0.8rem; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); - padding: 1.6rem; + padding-inline-end: 1.6rem; } &__content { diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.tsx index 815aa49096f0..60169ef21d24 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.tsx @@ -120,7 +120,7 @@ const TransactionsCompletedRow: React.FC = ({ accounts, transaction, wal if (!transaction.action_type || !transaction.amount) return null; const displayCurrency = wallet?.currency_config?.display_code || 'USD'; - const displayWalletName = `${displayCurrency} Wallet`; + const displayWalletName = localize('{{currency}} Wallet', { currency: displayCurrency }); const displayNonTransferActionType = wallet.is_virtual && ['deposit', 'withdrawal'].includes(transaction.action_type) ? getTransactionLabels(localize).reset_balance diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index 60a8df4b0ad1..f175d44cf4e2 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -105,7 +105,7 @@ const TransactionsPendingRow: React.FC = ({ transaction }) => { {getTransactionLabels(localize)[transaction.transaction_type]} - {displayCode} Wallet +
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountSelection/TransferFormAccountSelection.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountSelection/TransferFormAccountSelection.tsx index 45b5c81db30a..74d9ff7596ca 100644 --- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountSelection/TransferFormAccountSelection.tsx +++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountSelection/TransferFormAccountSelection.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from 'react'; import classNames from 'classnames'; import { LegacyClose2pxIcon } from '@deriv/quill-icons'; -import { Localize } from '@deriv-com/translations'; +import { Localize, useTranslations } from '@deriv-com/translations'; import { Divider, Text, useDevice } from '@deriv-com/ui'; import { useModal } from '../../../../../../components/ModalProvider'; import type { TAccount, TAccountsList } from '../../types'; @@ -38,6 +38,7 @@ const TransferFormAccountSelection: React.FC = ({ }) => { const { isDesktop } = useDevice(); const modal = useModal(); + const { localize } = useTranslations(); const transferToHint = useMemo(() => { const isTransferToHintVisible = !isFromAccountDropdown && toAccount?.loginid === activeWallet?.loginid; @@ -91,7 +92,9 @@ const TransferFormAccountSelection: React.FC = ({ ) : ( diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.scss b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.scss index ff960735a017..08042bc4a51b 100644 --- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.scss +++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/WithdrawalCrypto.scss @@ -42,6 +42,12 @@ } } + &__left-content { + @include mobile-or-tablet-screen { + display: none; + } + } + &__right-content { height: fit-content; display: flex; @@ -57,7 +63,8 @@ margin-inline-end: 2.4rem; @include mobile-or-tablet-screen { - margin: 0; + margin-inline-end: 0; + margin-top: 0; } } } diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoDisclaimer/WithdrawalCryptoDisclaimer.scss b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoDisclaimer/WithdrawalCryptoDisclaimer.scss index 7023520d49f3..4e7ffde0d841 100644 --- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoDisclaimer/WithdrawalCryptoDisclaimer.scss +++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoDisclaimer/WithdrawalCryptoDisclaimer.scss @@ -8,7 +8,6 @@ @include mobile-or-tablet-screen { max-width: 100%; - max-height: 10.6rem; } &__items { diff --git a/packages/wallets/src/features/cashier/screens/DepositErrorScreen/DepositErrorScreen.tsx b/packages/wallets/src/features/cashier/screens/DepositErrorScreen/DepositErrorScreen.tsx index 08af446b4348..cdd392e1840f 100644 --- a/packages/wallets/src/features/cashier/screens/DepositErrorScreen/DepositErrorScreen.tsx +++ b/packages/wallets/src/features/cashier/screens/DepositErrorScreen/DepositErrorScreen.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { useActiveWalletAccount } from '@deriv/api-v2'; import { TSocketError } from '@deriv/api-v2/types'; -import { Localize, useTranslations } from '@deriv-com/translations'; +import { getInitialLanguage, Localize, useTranslations } from '@deriv-com/translations'; import { WalletsErrorScreen } from '../../../../components'; import { CryptoDepositErrorCodes } from '../../../../constants/errorCodes'; @@ -20,9 +20,17 @@ type TErrorCodeHandlers = Record; const DepositErrorScreen: React.FC = ({ error }) => { const { data } = useActiveWalletAccount(); - const { localize } = useTranslations(); + const { currentLang, localize } = useTranslations(); + const i18nLanguage = getInitialLanguage(); const currency = data?.currency; + useEffect(() => { + // reload when language is switched to show error message for latest WS connection + if (currentLang !== i18nLanguage) { + window.location.reload(); + } + }, [currentLang, i18nLanguage]); + const defaultContent: TErrorContent = { buttonText: , message: error.message, diff --git a/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/WithdrawalErrorScreen.tsx b/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/WithdrawalErrorScreen.tsx index 11bd635a08d7..837c6b125715 100644 --- a/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/WithdrawalErrorScreen.tsx +++ b/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/WithdrawalErrorScreen.tsx @@ -1,8 +1,8 @@ -import React, { ComponentProps } from 'react'; +import React, { ComponentProps, useEffect } from 'react'; import { useHistory } from 'react-router-dom'; import { useActiveWalletAccount } from '@deriv/api-v2'; import { TSocketError } from '@deriv/api-v2/types'; -import { Localize, useTranslations } from '@deriv-com/translations'; +import { getInitialLanguage, Localize, useTranslations } from '@deriv-com/translations'; import { Button } from '@deriv-com/ui'; import { WalletsErrorScreen } from '../../../../components'; import { CryptoWithdrawalErrorCodes } from '../../../../constants/errorCodes'; @@ -26,9 +26,17 @@ type TErrorCodeHandlers = Record; const WithdrawalErrorScreen: React.FC = ({ error, resetError, setResendEmail }) => { const history = useHistory(); const { data } = useActiveWalletAccount(); - const { localize } = useTranslations(); + const { currentLang, localize } = useTranslations(); + const i18nLanguage = getInitialLanguage(); const currency = data?.currency; + useEffect(() => { + // reload when language is switched to show error message for latest WS connection + if (currentLang !== i18nLanguage) { + window.location.reload(); + } + }, [currentLang, i18nLanguage]); + const defaultContent: TErrorContent = { buttonText: , buttonVariant: 'ghost', diff --git a/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.scss b/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.scss index 5f1047baca7e..b0618c3901e9 100644 --- a/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.scss +++ b/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.scss @@ -3,6 +3,10 @@ flex-direction: column; gap: 1.6rem; + &__message { + max-width: 44rem; + } + @include mobile-or-tablet-screen { margin-top: auto; } diff --git a/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.tsx b/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.tsx index ed0ccb3c891c..d4026be040d6 100644 --- a/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.tsx +++ b/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.tsx @@ -25,7 +25,7 @@ const CFDPasswordModalTnc = ({ checked, onChange, platform, product }: TCFDPassw return (
- + ]} + components={[ + , + ]} i18n_default_text='I confirm and accept {{company}}’s <0>terms and conditions' values={{ company: selectedCompany.name, diff --git a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx index bbfe154d51f1..6f0e69970caa 100644 --- a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx +++ b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx @@ -27,7 +27,7 @@ const AvailableDxtradeAccountsList: React.FC = () => { Deriv X

- + ]} i18n_default_text='CFDs on financial and derived instruments, <0>powered by TradingView.' diff --git a/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx b/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx index 20248bdbcc74..7da446b08bd9 100644 --- a/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx +++ b/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx @@ -1,7 +1,7 @@ import React, { ComponentProps } from 'react'; import classNames from 'classnames'; import { useActiveWalletAccount } from '@deriv/api-v2'; -import { useTranslations } from '@deriv-com/translations'; +import { Localize, useTranslations } from '@deriv-com/translations'; import { Text, useDevice } from '@deriv-com/ui'; import { WalletMarketCurrencyIcon, WalletSuccess } from '../../../../components'; import { WalletGradientBackground } from '../../../../components/WalletGradientBackground'; @@ -92,7 +92,10 @@ const CFDSuccess: React.FC = ({ {platformTitlePrefix} {marketTypeTitle} {!isDemo && landingCompanyName} - {data?.currency} Wallet + {!displayBalance ? (
{ const { localize } = useTranslations(); + const { isTablet } = useDevice(); + const marketTypeShortCode = platform === CFD_PLATFORMS.MT5 && marketType === 'all' ? `${marketType}_${product}_${shortCode}` @@ -40,7 +42,7 @@ const CompareAccountsDescription = ({ })} >
- + {jurisdictionData.leverage} @@ -50,7 +52,7 @@ const CompareAccountsDescription = ({ {!isEuRegion && (
- + {jurisdictionData.spread} {marketTypeShortCode === MARKET_TYPE_SHORTCODE.ALL_ZERO_SPREAD_BVI && ( @@ -73,7 +75,7 @@ const CompareAccountsDescription = ({ {!isDemo && (
- + {jurisdictionData.counterparty_company} @@ -81,7 +83,7 @@ const CompareAccountsDescription = ({
- + {jurisdictionData.jurisdiction} @@ -89,7 +91,7 @@ const CompareAccountsDescription = ({
- + {jurisdictionData.regulator} {jurisdictionData.regulator_license && ( diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx index c1cdbc21eafd..2b2d6238340a 100644 --- a/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx +++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx @@ -11,7 +11,7 @@ type TInstrumentsIcon = { }; const InstrumentsIconWithLabel = ({ highlighted, icon, isAsterisk, text }: TInstrumentsIcon) => { - const { isDesktop } = useDevice(); + const { isDesktop, isTablet } = useDevice(); return (
{getInstrumentsIcons(!isDesktop)[icon]}
- + {text}
diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss index ef7889c76d47..1e4692d8b610 100644 --- a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss +++ b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss @@ -1,7 +1,6 @@ .wallets-enter-password { display: flex; flex-direction: column; - width: 40rem; padding: 2rem 2.4rem 2.4rem; border-radius: 0.8rem; background: var(--system-light-8-primary-background, #fff); @@ -40,6 +39,10 @@ } } + &__description { + max-width: 40rem; + } + &__buttons { display: flex; width: 100%; @@ -47,4 +50,8 @@ align-items: center; gap: 0.8rem; } + + &__hint { + max-width: 44rem; + } } diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx index d48df9ae70e7..5b8c25c0b00c 100644 --- a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx +++ b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx @@ -75,7 +75,7 @@ const EnterPassword: React.FC = ({ )}
- + = ({ shouldDisablePasswordMeter /> {passwordError && ( - + {passwordErrorHints} )} diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx index db13ea3bd5b1..2fc4ba8d1548 100644 --- a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx +++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionTncSection/JurisdictionTncSection.tsx @@ -39,7 +39,7 @@ const JurisdictionTncSection: React.FC = ({ className='wallets-jurisdiction-tnc-checkbox__link' key={0} onClick={() => { - window.open(getStaticUrl(selectedCompany.tncUrl), '_blank'); + window.open(getStaticUrl(selectedCompany.tncUrl, 'en'), '_blank'); }} // Reason: To fix sonarcloud issue onKeyDown={(event: React.KeyboardEvent) => { @@ -48,7 +48,8 @@ const JurisdictionTncSection: React.FC = ({ getStaticUrl( companyNamesAndUrls[ selectedJurisdiction as keyof typeof companyNamesAndUrls - ].tncUrl + ].tncUrl, + 'en' ), '_blank' ); diff --git a/packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.scss b/packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.scss index 7ab924307ff6..767c7b90de36 100644 --- a/packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.scss +++ b/packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.scss @@ -5,10 +5,8 @@ gap: 2.4rem; border-radius: 0.8rem; background-color: var(--system-light-8-primary-background, #fff); - width: 44rem; @include mobile-or-tablet-screen { - width: 32rem; padding: 1.6rem; gap: 1.6rem; } @@ -33,6 +31,7 @@ display: flex; flex-direction: column; gap: 2rem; + max-width: 44rem; @include mobile-or-tablet-screen { gap: 1rem; diff --git a/packages/wallets/src/helpers/urls.ts b/packages/wallets/src/helpers/urls.ts index 445fdef6c164..f2c2d0042f0a 100644 --- a/packages/wallets/src/helpers/urls.ts +++ b/packages/wallets/src/helpers/urls.ts @@ -28,6 +28,10 @@ export const whatsappUrl = 'https://wa.me/35699578341'; let defaultLanguage: string; +export const setUrlLanguage = (lang: string) => { + defaultLanguage = lang; +}; + /** * @deprecated Please use 'URLUtils.normalizePath' from '@deriv-com/utils' instead of this. */ @@ -82,9 +86,14 @@ export const isStaging = (domain = window.location.hostname) => { /** * @deprecated Please use 'URLUtils.getDerivStaticURL' from '@deriv-com/utils' instead of this. */ -export const getStaticUrl = (path = '', isDocument = false, isEuUrl = false) => { +export const getStaticUrl = ( + path = '', + language = defaultLanguage?.toLowerCase(), + isDocument = false, + isEuUrl = false +) => { const host = isEuUrl ? derivUrls.DERIV_COM_PRODUCTION_EU : derivUrls.DERIV_COM_PRODUCTION; - let lang = defaultLanguage?.toLowerCase(); + let lang = language; if (lang && lang !== 'en') { lang = `/${lang}`; diff --git a/packages/wallets/src/types.ts b/packages/wallets/src/types.ts index 04d846e65c8f..a95ffbaa2250 100644 --- a/packages/wallets/src/types.ts +++ b/packages/wallets/src/types.ts @@ -116,4 +116,4 @@ export type TProductForMarketDetails = NonNullable< export type TTranslations = ReturnType; -export type TLanguageType = 'AR' | 'EN'; +export type TLanguageType = 'AR' | 'EN' | 'FR';