Hasan/chore: fixed live market issues (#6244)

* chore: sliced live market data

* chore: fixed slider issues

* chore: fixed edge slider issues

* chore: added click handler for live market card

* chore: updated live market buy sell click handler

* chore: updated live market buy sell click handler

* chore: updated live market buy sell click handler

* chore: updated live market bottom content

* chore: updated live market hook for stock and indices

* chore: updated deriv-com pacakges

package.json

@@ -6,8 +6,8 @@
     "dependencies": {
         "@artsy/fresnel": "^6.2.1",
         "@builder.io/partytown": "^0.8.1",
-        "@deriv-com/blocks": "^0.51.0",
-        "@deriv-com/components": "^0.29.0",
+        "@deriv-com/blocks": "^0.52.0",
+        "@deriv-com/components": "^0.31.0",
         "@deriv-com/hooks": "^0.10.0",
         "@deriv-com/providers": "^0.10.0",
         "@deriv/analytics": "^1.4.4",

src/features/pages/home/live-pricing-migration/cards/index.tsx

@@ -1,3 +1,4 @@
+import React, { ReactNode, useMemo } from 'react'
 import { CardSlider, LiveMarketContent } from '@deriv-com/components'
 import {
     MarketForexAudusdIcon,
@@ -6,10 +7,12 @@ import {
     MarketForexGbpusdIcon,
     MarketForexUsdcadIcon,
 } from '@deriv/quill-icons'
-import React, { ReactNode, useMemo } from 'react'
 import useLiveData from '../data-provider/useLiveData'
 import { MarketName } from '../data-provider/types'
 import { percentToDecimal, swiperOption } from '../utils'
+import { handleRedirectToTradersHub } from 'components/custom/utils'
+import useAuthCheck from 'components/hooks/use-auth-check'
+import useHandleSignup from 'components/hooks/use-handle-signup'
 
 const IconsMapper = {
     AUDUSD: <MarketForexAudusdIcon />,
@@ -23,9 +26,12 @@ const LiveMarketCard = <T extends MarketName>({
     market,
     children,
 }: {
-    market: T
+    market: T | T[]
     children: ReactNode
 }) => {
+    const [is_logged_in] = useAuthCheck()
+    const handleSignup = useHandleSignup()
+
     const { data } = useLiveData(market)
 
     const livePriceData: LiveMarketContent[] = useMemo(() => {
@@ -39,16 +45,19 @@ const LiveMarketCard = <T extends MarketName>({
             bidPrice: `${data[key].bid}`,
             askPrice: `${data[key].ask}`,
             spread: `${data[key].sprd}`,
+            onClickBuyButton: is_logged_in ? handleRedirectToTradersHub : handleSignup,
+            onClickSellButton: is_logged_in ? handleRedirectToTradersHub : handleSignup,
         }))
-    }, [data])
+    }, [data, is_logged_in, handleSignup])
 
     return (
         <>
             <CardSlider
                 variant="LiveMarketCard"
                 swiperData={swiperOption}
                 slideClasses="max-w-[286px]"
-                cards={livePriceData}
+                className="w-screen !mr-[calc((-100vw+100%)/2)] lg:w-full lg:!mr-auto"
+                cards={livePriceData.slice(0, 4)}
             />
             {children}
         </>

src/features/pages/home/live-pricing-migration/data-provider/useLiveData.tsx

@@ -2,11 +2,18 @@ import { useContext, useDeferredValue, useMemo } from 'react'
 import { LiveMarketRawData, MarketName } from './types'
 import { LiveMarketContext } from '.'
 
-const useLiveData = <T extends MarketName>(marketName: T) => {
+const useLiveData = <T extends MarketName>(marketName: T | T[]) => {
     const { liveData, dbRef, liveError } = useContext(LiveMarketContext)
 
     const marketData: LiveMarketRawData[T] = useMemo(() => {
-        return liveData[marketName]
+        if (Array.isArray(marketName)) {
+            return marketName.reduce(
+                (acc, current) => ({ ...acc, ...liveData[current] }),
+                {} as LiveMarketRawData[T],
+            )
+        } else {
+            return liveData[marketName]
+        }
     }, [marketName, liveData])
 
     const data = useDeferredValue(marketData)

src/features/pages/home/live-pricing-migration/index.tsx

@@ -43,7 +43,7 @@ const LiveMarketSection = () => {
                 <LiveMarketCard market="der">
                     <Text className="text-center pt-gap-3xl">
                         <Localize
-                            translate_text="_t_<0>Virtual markets, real opportunities.</0>Trade simulated markets, as volatile as you like._t_"
+                            translate_text="_t_<0>Virtual markets, real opportunities.</0> Trade simulated markets, as volatile as you like._t_"
                             components={[<strong key={0} />]}
                         />
                     </Text>
@@ -59,7 +59,7 @@ const LiveMarketSection = () => {
                 <LiveMarketCard market="etfs">
                     <Text className="text-center pt-gap-3xl">
                         <Localize
-                            translate_text="_t_<0>You call the stocks</0> Take a position on 1500+ stocks and indices._t_"
+                            translate_text="_t_<0>Diversify with ETFs.</0> Trade a theme, strategy, or objective through ETFs._t_"
                             components={[<strong key={0} />]}
                         />
                     </Text>
@@ -72,10 +72,10 @@ const LiveMarketSection = () => {
                         <StandaloneChevronRightRegularIcon className="text-solid-slate-1400" />
                     </CustomLink>
                 </LiveMarketCard>
-                <LiveMarketCard market="ind">
+                <LiveMarketCard market={['ind', 'stk']}>
                     <Text className="text-center pt-gap-3xl">
                         <Localize
-                            translate_text="_t_<0>Mine for commodities.</0> Trade the price of precious metals and oil._t_"
+                            translate_text="_t_<0>You call the stocks.</0> Take a position on 1500+ stocks and indices._t_"
                             components={[<strong key={0} />]}
                         />
                     </Text>

src/features/pages/home/live-pricing-migration/utils/index.ts

@@ -1,22 +1,15 @@
 export const percentToDecimal = (percentStr) => {
     return parseFloat(percentStr) / 100
 }
-export const swiperOption = {
+
+interface SwiperOption {
+    spaceBetween: number
+    slidesPerView: number | 'auto'
+}
+
+export const swiperOption: SwiperOption = {
     spaceBetween: 16,
-    breakpoints: {
-        320: {
-            slidesPerView: 1,
-        },
-        600: {
-            slidesPerView: 2,
-        },
-        900: {
-            slidesPerView: 3,
-        },
-        1280: {
-            slidesPerView: 4,
-        },
-    },
+    slidesPerView: 'auto',
 }
 
 export const initialLiveMarketData = {

src/translations/ach.json

@@ -4602,4 +4602,4 @@
   "-1165835520": "crwdns3565842:0crwdne3565842:0",
   "-651384976": "crwdns3565844:0crwdne3565844:0",
   "-1033881248": "crwdns3565846:0crwdne3565846:0"
-}
+}

src/translations/ar.json

@@ -4602,4 +4602,4 @@
   "-1165835520": "موظف",
   "-651384976": "الجنسيات",
   "-1033881248": "شاهد صفقاتنا المفتوحة"
-}
+}

src/translations/de.json

@@ -4602,4 +4602,4 @@
   "-1165835520": "Mitarbeiter",
   "-651384976": "Nationalitäten",
   "-1033881248": "Sehen Sie unsere offenen Stellen"
-}
+}

src/translations/it.json

@@ -4602,4 +4602,4 @@
   "-1165835520": "dipendenti",
   "-651384976": "nazionalità",
   "-1033881248": "Vedi le posizioni aperte"
-}
+}

src/translations/ko.json

@@ -4602,4 +4602,4 @@
   "-1165835520": "직원",
   "-651384976": "출신 국적",
   "-1033881248": "채용 정보 보기"
-}
+}

src/translations/pl.json

@@ -4602,4 +4602,4 @@
   "-1165835520": "pracowników",
   "-651384976": "narodowości",
   "-1033881248": "Zobacz nasze otwarte pozycje"
-}
+}

src/translations/th.json

@@ -4602,4 +4602,4 @@
   "-1165835520": "พนักงาน",
   "-651384976": "สัญชาติ",
   "-1033881248": "ดูตำแหน่งงานที่เปิดรับ"
-}
+}

src/translations/vi.json

@@ -4602,4 +4602,4 @@
   "-1165835520": "nhân viên",
   "-651384976": "dân tộc",
   "-1033881248": "Xem các vị trí đang tuyển"
-}
+}