fix: options and multipliers translations

binary-com · Sep 12, 2023 · ba457ed · ba457ed
1 parent a90bb43
commit ba457ed
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 22 deletions.
diff --git a/packages/wallets/package.json b/packages/wallets/package.json
@@ -5,6 +5,7 @@
     "main": "src/index.tsx",
     "dependencies": {
         "@deriv/api": "^1.0.0",
+        "@deriv/translations": "^1.0.0",
         "embla-carousel-react": "^8.0.0-rc12",
         "react": "^17.0.2"
     },

diff --git a/...ges/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.scss b/...ges/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.scss
@@ -21,8 +21,6 @@
         &-subtitle {
             font-size: 16px;
             line-height: 24px;
-            display: flex;
-            align-self: stretch;
 
             &__link {
                 color: var(--brand-coral, #ff444f);

diff --git a/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Localize } from '@deriv/translations';
 import IcAppstoreBinaryBot from '../../public/images/ic-appstore-binary-bot.svg';
 import IcAppstoreDerivBot from '../../public/images/ic-appstore-deriv-bot.svg';
 import IcAppstoreDerivGo from '../../public/images/ic-appstore-deriv-go.svg';
@@ -10,27 +11,27 @@ import './OptionsAndMultipliersListing.scss';
 const options_and_multipliers = [
     {
         title: 'Deriv Trader',
-        description: 'Options and multipliers trading platform',
+        description: 'Options and multipliers trading platform.',
         icon: <IcAppstoreDerivTrader />,
     },
     {
         title: 'Deriv Bot',
-        description: 'Automated trading, no coding required',
+        description: 'Automate your trading, no coding needed.',
         icon: <IcAppstoreDerivBot />,
     },
     {
         title: 'SmartTrader',
-        description: 'Our legacy options trading platform',
+        description: 'Our legacy options trading platform.',
         icon: <IcAppstoreSmartTrader />,
     },
     {
         title: 'Binary Bot',
-        description: 'Our legacy automated trading platform',
+        description: 'Our legacy automated trading platform.',
         icon: <IcAppstoreBinaryBot />,
     },
     {
         title: 'Deriv GO',
-        description: 'Multipliers trading on the go',
+        description: 'Trade on the go with our mobile app.',
         icon: <IcAppstoreDerivGo />,
     },
 ];
@@ -40,20 +41,25 @@ const OptionsAndMultipliersListing = () => {
         <div className='wallets-options-and-multipliers-listing'>
             <section className='wallets-options-and-multipliers-listing__header'>
                 <div className='wallets-options-and-multipliers-listing__header-title'>
-                    <h1>Options & multipliers</h1>
+                    <Localize i18n_default_text='Options & Multipliers' />
                 </div>
                 <div className='wallets-options-and-multipliers-listing__header-subtitle'>
-                    <p>
-                        Earn a range of payouts by correctly predicting market price movements with{' '}
-                        <a href='#' className='wallets-options-and-multipliers-listing__header-subtitle__link'>
-                            options
-                        </a>{' '}
-                        or get the upside of CFDs without risking more than your initial stake with{' '}
-                        <a href='#' className='wallets-options-and-multipliers-listing__header-subtitle__link'>
-                            multipliers
-                        </a>
-                        .
-                    </p>
+                    <Localize
+                        i18n_default_text='Earn a range of payouts by correctly predicting market price movements with <0>options</0>, or get the
+                        upside of CFDs without risking more than your initial stake with <1>multipliers</1>.'
+                        components={[
+                            <a
+                                key={0}
+                                href='#'
+                                className='wallets-options-and-multipliers-listing__header-subtitle__link'
+                            />,
+                            <a
+                                key={1}
+                                href='#'
+                                className='wallets-options-and-multipliers-listing__header-subtitle__link'
+                            />,
+                        ]}
+                    />
                 </div>
             </section>
             <div className='wallets-options-and-multipliers-listing__content'>

diff --git a/packages/wallets/src/components/TradingAccountCard/TradingAccountCard.tsx b/packages/wallets/src/components/TradingAccountCard/TradingAccountCard.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { Localize } from '@deriv/translations';
 import './TradingAccountCard.scss';
 
 type TProps = {
@@ -13,11 +14,17 @@ const TradingAccountCard: React.FC<TProps> = ({ description, icon, title }) => {
             {icon}
             <div className='wallets-trading-account-card__content'>
                 <div className='wallets-trading-account-card__details'>
-                    <p className='wallets-trading-account-card__details-title'>{title}</p>
-                    <p className='wallets-trading-account-card__details-description'>{description}</p>
+                    <p className='wallets-trading-account-card__details-title'>
+                        <Localize i18n_default_text={title} />
+                    </p>
+                    <p className='wallets-trading-account-card__details-description'>
+                        <Localize i18n_default_text={description} />
+                    </p>
                 </div>
                 <div className='wallets-trading-account-card__actions'>
-                    <button className='wallets-trading-account-card__action'>Open</button>
+                    <button className='wallets-trading-account-card__action'>
+                        <Localize i18n_default_text='Open' />
+                    </button>
                 </div>
             </div>
         </div>