Fasih:/Translation fix live price db updates n icons (#5593)

* auto-pull-translation * auto-pull-translation * fix: changed keys and updated db link * chore: updated image names * chore: added new icons for eu * chore: adding coler functionality * fix: removed unused code * fix: fixed stock data issue * chore: added etf tab * chore: removed unusted code * fix: fixed PR suggestions * chore: worked on live pricing * chore: removed live price table bottom line * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * chore: updated live pricing link --------- Co-authored-by: meenu-deriv <[email protected]> Co-authored-by: Fasih Ali <[email protected]> Co-authored-by: DerivFE <[email protected]>
binary-com · Sep 22, 2023 · 03151e7 · 03151e7 · vercel · Sep 22, 2023
1 parent 7f7603f
commit 03151e7
Show file tree

Hide file tree

Showing 29 changed files with 265 additions and 247 deletions.
diff --git a/crowdin/messages.json b/crowdin/messages.json
@@ -276,7 +276,6 @@
   "274438767": "The order amount is locked in escrow until both parties confirm that the transaction has been completed from their end.",
   "275116637": "Deriv X",
   "275316510": "Impersonators ask you to send confidential information over an unsecure platform, for example via SMS, WhatsApp, email, etc.",
-  "276089446": "All spreads are indicative. To view real-time spreads, please refer to your terminal.",
   "276341434": "As part of our rebranding exercise, your affiliate login URL will change.",
   "276482397": "No, you can't.",
   "278499050": "Use your local currency to make deposits into and withdrawals from your Deriv account.",
@@ -3115,6 +3114,7 @@
   "-1638607416": "Download now >",
   "-1981735781": "One broker, countless trading opportunities",
   "-1722031734": "Check trading specs",
+  "-61718257": "Speculate on the price movements of popular exchange-traded funds (ETFs). Diversify your portfolio with assets that track bonds, commodities, and indices, without the high cost of owning the underlying assets.",
   "-777850431": "View all >",
   "-1384760133": "Bid price",
   "-1882694284": "Ask price",

diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -184,7 +184,7 @@ export const bannerTypes = {
 }
 
 export const firebaseConfig = {
-    databaseURL: 'https://deriv-static-pricingfeed.firebaseio.com',
+    databaseURL: 'https://deriv-static-pricingfeedv2.firebaseio.com',
 }
 
 export const hreflang_codes_row = [

diff --git a/src/components/elements/symbols-shortcode.ts b/src/components/elements/symbols-shortcode.ts
diff --git a/src/components/hooks/use-pricing-feed.tsx b/src/components/hooks/use-pricing-feed.tsx
@@ -13,7 +13,7 @@ const usePricingFeed = () => {
         const app = initializeApp(firebaseConfig)
         const db = getDatabase(app)
 
-        const commoditiesRef = ref(db, is_eu ? 'eu/market' : 'row/market')
+        const commoditiesRef = ref(db, is_eu ? 'eu/mkt' : 'row/mkt')
         const unsubscribe = onValue(
             commoditiesRef,
             (snapshot) => {

diff --git a/src/features/pages/home/live-pricing/index.tsx b/src/features/pages/home/live-pricing/index.tsx
@@ -18,22 +18,12 @@ const LivePricing = () => {
     return (
         <Container.Fixed as="section" pt="16x" pb="16x" md={{ padding_block: '40x' }}>
             <MarketTab />
-            <Flex.Box justify="center" align="center" padding="16x">
-                <Typography.Paragraph
-                    align="center"
-                    font_family="UBUNTU"
-                    textcolor="secondary"
-                    size="medium"
-                >
-                    <Localize translate_text="_t_All spreads are indicative. To view real-time spreads, please refer to your terminal._t_" />
-                </Typography.Paragraph>
-            </Flex.Box>
-
             <Flex.Box
                 justify="center"
                 align="center"
                 gap="4x"
                 direction="col"
+                padding="16x"
                 md={{ direction: 'row', gap: '10x' }}
             >
                 <LinkButton.Primary

diff --git a/src/features/pages/home/live-pricing/market-tabs/market-tab.tsx b/src/features/pages/home/live-pricing/market-tabs/market-tab.tsx
@@ -8,23 +8,29 @@ import Typography from 'features/components/atoms/typography'
 import Container from 'features/components/atoms/container'
 import Flex from 'features/components/atoms/flex-box'
 import TabMenu from 'features/components/templates/tabs/menu'
+import useRegion from 'components/hooks/use-region'
 
 const MarketTab = () => {
-    const [selected_market, setSelectedMarket] = useState<TAvailableLiveMarkets>('forex')
+    const [selected_market, setSelectedMarket] = useState<TAvailableLiveMarkets>('fx')
     const [tab_name, setTabName] = useState('Forex')
     const [linkToMarketPage, setLinkToMarketPage] = useState('/markets/forex/')
+    const { is_eu } = useRegion()
+    const updated_market_buttons = market_buttons.filter((items) => {
+        if (!is_eu) return items
+        if (is_eu && items.market_name !== 'etfs') return items
+    })
+
     const onMarketButtonClick = (selected) => {
         setSelectedMarket(selected)
     }
-
     return (
         <Container.Fluid>
             <Flex.Box
                 className={tab_container}
                 padding_block="10x"
                 md={{ justify: 'center', padding: '10x' }}
             >
-                {market_buttons.map((market_item) => (
+                {updated_market_buttons.map((market_item) => (
                     <Flex.Box
                         key={market_item.button_text}
                         direction="col"
@@ -61,7 +67,6 @@ const MarketTab = () => {
                         </Typography.Paragraph>
                     ),
             )}
-
             <LiveMarketTable selected_market={selected_market} link_to={linkToMarketPage} />
         </Container.Fluid>
     )

diff --git a/src/features/pages/home/live-pricing/market-tabs/utils.tsx b/src/features/pages/home/live-pricing/market-tabs/utils.tsx
@@ -2,11 +2,13 @@ import { TMarketButtons } from '../types'
 import Forex from 'images/svg/home/ts_fx_icon.svg'
 import Derived from 'images/svg/home/ts_derived_icon.svg'
 import Stocks from 'images/svg/home/ts_stocks_icon.svg'
+import ETFS from 'images/svg/home/ts_etfs.svg'
 import Crypto from 'images/svg/home/ts_crypto_icon.svg'
 import Commodities from 'images/svg/home/ts_commodities_icon.svg'
 import SelectedForex from 'images/svg/home/selected_ts_fx_icon.svg'
 import SelectedDerived from 'images/svg/home/selected_ts_derived_icon.svg'
 import SelectedStocks from 'images/svg/home/selected_ts_stocks_icon.svg'
+import SelectedETFS from 'images/svg/home/selected_etfs.svg'
 import SelectedCrypto from 'images/svg/home/selected_ts_crypto_icon.svg'
 import SelectedCommodities from 'images/svg/home/selected_ts_commodities_icon.svg'
 
@@ -15,7 +17,7 @@ export const market_buttons: TMarketButtons[] = [
         src: Forex,
         selected_src: SelectedForex,
         button_text: 'Forex',
-        market_name: 'forex',
+        market_name: 'fx',
         market_description:
             '_t_Benefit from round-the-clock trading hours (Monday to Friday), high liquidity, low barriers to entry, a wide range of offerings, and opportunities to trade on world events._t_',
         to: '/markets/forex/',
@@ -24,7 +26,7 @@ export const market_buttons: TMarketButtons[] = [
         src: Derived,
         selected_src: SelectedDerived,
         button_text: 'Derived indices',
-        market_name: 'derived',
+        market_name: 'der',
         market_description:
             '_t_Trade on asset prices derived from real-world or simulated markets. Manage your exposure by selecting the volatility level to suit your risk appetite. Choose from our 24/7 synthetics, derived FX, and baskets._t_',
         to: '/markets/synthetic/',
@@ -33,16 +35,25 @@ export const market_buttons: TMarketButtons[] = [
         src: Stocks,
         selected_src: SelectedStocks,
         button_text: 'Stocks & indices',
-        market_name: 'indices',
+        market_name: 'ind',
         market_description:
             '_t_Trade global stocks of your favourite household brands and international stock market indices on Deriv. Expand your trading opportunities with access to a wide range of stocks and indices at competitive prices, and the convenience to trade indices beyond standard market hours._t_',
         to: '/markets/stock/',
     },
+    {
+        src: ETFS,
+        selected_src: SelectedETFS,
+        button_text: 'ETFs',
+        market_name: 'etfs',
+        market_description:
+            '_t_Speculate on the price movements of popular exchange-traded funds (ETFs). Diversify your portfolio with assets that track bonds, commodities, and indices, without the high cost of owning the underlying assets._t_',
+        to: '/markets/exchange-traded-funds/',
+    },
     {
         src: Crypto,
         selected_src: SelectedCrypto,
         button_text: 'Cryptocurrencies',
-        market_name: 'cryptocurrency',
+        market_name: 'cry',
         market_description:
             "_t_Take advantage of a highly liquid market with round-the-clock trading. Profit from correctly predicting the movement of world's most popular cryptocurrencies._t_",
         to: '/markets/cryptocurrencies/',
@@ -51,7 +62,7 @@ export const market_buttons: TMarketButtons[] = [
         src: Commodities,
         selected_src: SelectedCommodities,
         button_text: 'Commodities',
-        market_name: 'commodities',
+        market_name: 'com',
         market_description:
             '_t_Speculate on the price movements of silver, gold, oil and more. Profit from the price difference when the market moves in the direction that you have predicted._t_',
         to: '/markets/commodities/',

diff --git a/src/features/pages/home/live-pricing/table-component/live-market-table.tsx b/src/features/pages/home/live-pricing/table-component/live-market-table.tsx
@@ -49,13 +49,12 @@ const LiveMarketTable = ({ selected_market, link_to }: TLiveMarketTableProps) =>
     const [error, rawMarketsData] = usePricingFeed()
     const TABLE_VISIBLE_ROWS = 5
     const [sorting, setSorting] = React.useState<SortingState>([])
-
     const markets_data = useMemo(() => {
         if (rawMarketsData) {
-            const stocks = rawMarketsData['stocks']
-            const indices = rawMarketsData['indices']
+            const stocks = rawMarketsData['stk']
+            const indices = rawMarketsData['ind']
             const stocks_indices = { ...stocks, ...indices }
-            const res = { ...rawMarketsData, indices: stocks_indices }
+            const res = { ...rawMarketsData, ind: stocks_indices }
 
             if (res[selected_market]) {
                 return Object.values(res[selected_market])

diff --git a/src/features/pages/home/live-pricing/table-component/symbol-icon.tsx b/src/features/pages/home/live-pricing/table-component/symbol-icon.tsx
@@ -3,9 +3,9 @@ import * as icons from 'components/elements/symbols-shortcode'
 import Image from 'features/components/atoms/image'
 
 const SymbolIcon = ({ icon_src }: { icon_src: string }) => {
-    if (icon_src === '1HZ150V')
+    if (icon_src === 'Volatility_150_(1s)_Index')
         return <Image src={icons['Vol_1HZ150V']} width="24px" height="24px" />
-    if (icon_src === '1HZ250V')
+    if (icon_src === 'Volatility_250_(1s)_Index')
         return <Image src={icons['Vol_1HZ250V']} width="24px" height="24px" />
     else return <Image src={icons[icon_src]} width="24px" height="24px" />
 }

diff --git a/src/features/pages/home/live-pricing/types.tsx b/src/features/pages/home/live-pricing/types.tsx
@@ -3,25 +3,14 @@ import { TString } from 'types/generics'
 export type TMarketData = {
     ask: number
     bid: number
-    day_percentage_change: number
-    market: string
-    spread: number
-    symbol: string
-    shortcode: string
+    chng: number
+    mkt: string
+    sprd: number
+    sym: string
+    code: string
 }
 
-export type TMarketDataResponse = {
-    trading_platform_asset_listing: any
-    active_symbols: TMarketData[]
-    req_id: number
-}
-
-export type TAvailableLiveMarkets =
-    | 'forex'
-    | 'derived'
-    | 'indices'
-    | 'cryptocurrency'
-    | 'commodities'
+export type TAvailableLiveMarkets = 'fx' | 'der' | 'ind' | 'cry' | 'com' | 'etfs'
 
 export type TMarketButtons = {
     src: string

diff --git a/src/features/pages/home/live-pricing/use-live-columns.tsx b/src/features/pages/home/live-pricing/use-live-columns.tsx
@@ -11,9 +11,10 @@ const liveMarketColumnHelper = createColumnHelper<TMarketData>()
 
 const useLiveColumns = () => {
     const { is_mobile } = useBreakpoints()
+
     const columns = useMemo(() => {
         return [
-            liveMarketColumnHelper.accessor('shortcode', {
+            liveMarketColumnHelper.accessor('code', {
                 header: () => (
                     <Flex.Box>
                         <Typography.Paragraph
@@ -28,11 +29,15 @@ const useLiveColumns = () => {
                 ),
                 cell: (info) => (
                     <Flex.Box>
-                        <SymbolIcon icon_src={info.getValue()} />
+                        {info.row.original.mkt !== 'etfs' ? (
+                            <SymbolIcon icon_src={info.getValue()} />
+                        ) : (
+                            <SymbolIcon icon_src="ETFSICON" />
+                        )}
                     </Flex.Box>
                 ),
             }),
-            liveMarketColumnHelper.accessor('symbol', {
+            liveMarketColumnHelper.accessor('sym', {
                 header: () => <Flex.Box></Flex.Box>,
                 cell: (info) => (
                     <Flex.Box>
@@ -84,7 +89,7 @@ const useLiveColumns = () => {
                     </Flex.Box>
                 ),
             }),
-            liveMarketColumnHelper.accessor('spread', {
+            liveMarketColumnHelper.accessor('sprd', {
                 header: () => (
                     <Flex.Box>
                         <Typography.Paragraph
@@ -105,7 +110,7 @@ const useLiveColumns = () => {
                     </Flex.Box>
                 ),
             }),
-            liveMarketColumnHelper.accessor('day_percentage_change', {
+            liveMarketColumnHelper.accessor('chng', {
                 header: () => (
                     <Flex.Box>
                         <Typography.Paragraph

diff --git a/src/images/svg/symbols/etf-usd-500.svg b/src/images/svg/symbols/etf-usd-500.svg
diff --git a/src/translations/ar.json b/src/translations/ar.json
@@ -270,7 +270,6 @@
   "274438767": "يتم تأمين مبلغ الطلب في الضمان حتى يؤكد الطرفان أن المعاملة قد اكتملت من نهايتها.",
   "275116637": "Deriv X",
   "275316510": "يطلب منك منتحلو الهوية إرسال معلومات سرية عبر منصة غير آمنة، على سبيل المثال عبر الرسائل القصيرة وWhatsApp والبريد الإلكتروني وما إلى ذلك.",
-  "276089446": "جميع فروق الأسعار إرشادية. لعرض فروق الأسعار في الوقت الفعلي، يرجى الرجوع إلى الجهاز الخاص بك.",
   "276341434": "كجزء من عملية تغيير العلامة التجارية الخاصة بنا، سيتغير عنوان URL لتسجيل الدخول إلى الشركة التابعة.",
   "276482397": "لا، لا يمكنك.",
   "278499050": "استخدم عملتك المحلية لإجراء عمليات الإيداع والسحب من حساب Deriv الخاص بك.",
@@ -3108,6 +3107,7 @@
   "-1981735781": "وسيط واحد وفرص تداول لا حصر لها",
   "-704828346": "منصة التداول عبر الإنترنت | تداول العملات الأجنبية والسلع والمؤشرات الاصطناعية والأسهم ومؤشرات الأسهم | Deriv",
   "-1722031734": "تحقق من مواصفات التداول",
+  "-61718257": "قم بالمضاربة على تحركات أسعار الصناديق الشائعة المتداولة في البورصة (ETFs). قم بتنويع محفظتك باستخدام الأصول التي تتبع السندات والسلع والمؤشرات، دون التكلفة العالية لامتلاك الأصول الأساسية.",
   "-777850431": "عرض الكل >",
   "-1384760133": "سعر العطاء",
   "-1882694284": "اسأل عن السعر",

diff --git a/src/translations/bn.json b/src/translations/bn.json
@@ -270,7 +270,6 @@
   "274438767": "উভয় পক্ষের লেনদেন তাদের শেষ থেকে সম্পন্ন হয়েছে তা নিশ্চিত না হওয়া পর্যন্ত অর্ডার পরিমাণ এসক্রোতে লক করা হয়।",
   "275116637": "Deriv X",
   "275316510": "ছদ্মবেশকারীরা আপনাকে একটি অনিরাপদ প্ল্যাটফর্মের মাধ্যমে গোপনীয় তথ্য পাঠাতে বলে, উদাহরণস্বরূপ এসএমএস, হোয়াটসঅ্যাপ, ইমেইল ইত্যাদির মাধ্যমে।",
-  "276089446": "সমস্ত স্প্রেড ইঙ্গিতপূর্ণ। রিয়েল-টাইম স্প্রেড দেখতে অনুগ্রহ করে আপনার টার্মিনালটি দেখুন।",
   "276341434": "আমাদের রিব্র্যান্ডিং অনুশীলনের অংশ হিসাবে, আপনার এফিলিয়েট লগইন ইউআরএল পরিবর্তিত হবে।",
   "276482397": "না, আপনি পারবেন না।",
   "278499050": "আপনার Deriv অ্যাকাউন্ট থেকে ডিপোজিট এবং তোলার জন্য আপনার স্থানীয় মুদ্রা ব্যবহার করুন।",
@@ -3108,6 +3107,7 @@
   "-1981735781": "এক ব্রোকার, অগণিত ট্রেডিং সুযোগ",
   "-704828346": "অনলাইন ট্রেডিং প্ল্যাটফর্ম | ফরেক্স, কমোডিটি, সিন্থেটিক ইন্ডিসেস, স্টক এবং স্টক ইন্ডিসেস | Deriv",
   "-1722031734": "ট্রেডিং স্পেস চেক করুন",
+  "-61718257": "জনপ্রিয় এক্সচেঞ্জ-ট্রেডেড তহবিলের মূল্য আন্দোলনের (ETF) সম্পর্কে ধারণা করুন। অন্তর্নিহিত সম্পদের মালিকানাধীন উচ্চ খরচ ছাড়াই বন্ড, পণ্য এবং সূচকগুলি ট্র্যাক করে এমন সম্পদের সাথে আপনার পোর্টফোলিওকে বৈচিত্রপূর্ণ করুন।",
   "-777850431": "সব দেখুন>",
   "-1384760133": "বিড মূল্য",
   "-1882694284": "মূল্য জিজ্ঞাসা করুন",

diff --git a/src/translations/de.json b/src/translations/de.json
@@ -270,7 +270,6 @@
   "274438767": "Der Bestellbetrag wird auf einem Treuhandkonto verwahrt, bis beide Parteien bestätigen, dass die Transaktion von ihrer Seite aus abgeschlossen wurde.",
   "275116637": "Deriv X",
   "275316510": "Imitatoren bitten Sie, vertrauliche Informationen über eine unsichere Plattform zu senden, z. B. per SMS, WhatsApp, E-Mail usw.",
-  "276089446": "Alle Spreads sind Richtwerte. Um Spreads in Echtzeit zu sehen, wenden Sie sich bitte an Ihr Terminal.",
   "276341434": "Im Rahmen unserer Rebranding-Übung ändert sich Ihre Affiliate-Login-URL.",
   "276482397": "Nein, das kannst du nicht.",
   "278499050": "Verwenden Sie Ihre Landeswährung, um Ein- und Auszahlungen von Ihrem Deriv-Konto vorzunehmen.",
@@ -3108,6 +3107,7 @@
   "-1981735781": "Ein Broker, unzählige Handelsmöglichkeiten",
   "-704828346": "Online-Handelsplattform | Forex, Rohstoffe, Synthetic Indizes, Aktien und Aktienindizes | Deriv",
   "-1722031734": "Überprüfen Sie die Handelsspezifikationen",
+  "-61718257": "Spekulieren Sie auf die Kursbewegungen von beliebten börsengehandelten Fonds (ETFs). Diversifizieren Sie Ihr Portfolio mit Anlagen, die Anleihen, Rohstoffe und Indizes nachbilden, ohne die hohen Kosten für den Besitz der zugrunde liegenden Vermögenswerte.",
   "-777850431": "Alles ansehen >",
   "-1384760133": "Gebotspreis",
   "-1882694284": "Briefkurs",

diff --git a/src/translations/es.json b/src/translations/es.json
@@ -270,7 +270,6 @@
   "274438767": "El monto del pedido queda bloqueado en escrow hasta que ambas partes confirman que la transacción se ha completado por su parte.",
   "275116637": "Deriv X",
   "275316510": "Los suplantadores te piden que envíes información confidencial a través de una plataforma no segura, por ejemplo, por SMS, WhatsApp, correo electrónico, etc.",
-  "276089446": "Todos los spreads son indicativos. Para ver los spreads en tiempo real, consulte su terminal.",
   "276341434": "Como parte de nuestro cambio de marca, la URL de su inicio de sesión como afiliado cambiará.",
   "276482397": "No, no puede.",
   "278499050": "Utilice su moneda local para realizar depósitos y retiros de su cuenta Deriv.",
@@ -3108,6 +3107,7 @@
   "-1981735781": "Un bróker, innumerables oportunidades de operación",
   "-704828346": "Plataforma de trading online | Forex, materias primas, índices sintéticos, acciones e índices bursátiles | Deriv",
   "-1722031734": "Consulte las especificaciones para operar",
+  "-61718257": "Especule con los movimientos de precios de los fondos cotizados (ETF) más populares. Diversifique su cartera con activos que replican bonos, materias primas e índices, sin el elevado coste de poseer los activos subyacentes.",
   "-777850431": "Ver todo >",
   "-1384760133": "Precio de compra",
   "-1882694284": "Precio de venta",