Fasih/: revert live pricing (#5689)

* chore: revert live pricing * fix: fixed spacing * fix: fixed padding issue * fix: fixed spacing --------- Co-authored-by: Fasih Ali <[email protected]>
binary-com · Sep 26, 2023 · 7c1e4be · 7c1e4be · vercel · Sep 26, 2023
1 parent 40725f4
commit 7c1e4be
Show file tree

Hide file tree

Showing 12 changed files with 228 additions and 243 deletions.
diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -184,5 +184,5 @@ export const bannerTypes = {
 }
 
 export const firebaseConfig = {
-    databaseURL: 'https://deriv-static-pricingfeedv2.firebaseio.com',
+    databaseURL: 'https://deriv-static-pricingfeed.firebaseio.com',
 }
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/mkt' : 'row/mkt')
+        const commoditiesRef = ref(db, is_eu ? 'eu/market' : 'row/market')
         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,12 +18,21 @@ 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_block="10x"
                 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,29 +8,23 @@ 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>('fx')
+    const [selected_market, setSelectedMarket] = useState<TAvailableLiveMarkets>('forex')
     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' }}
             >
-                {updated_market_buttons.map((market_item) => (
+                {market_buttons.map((market_item) => (
                     <Flex.Box
                         key={market_item.button_text}
                         direction="col"
@@ -67,6 +61,7 @@ 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,13 +2,11 @@ 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'
 
@@ -17,7 +15,7 @@ export const market_buttons: TMarketButtons[] = [
         src: Forex,
         selected_src: SelectedForex,
         button_text: 'Forex',
-        market_name: 'fx',
+        market_name: 'forex',
         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/',
@@ -26,7 +24,7 @@ export const market_buttons: TMarketButtons[] = [
         src: Derived,
         selected_src: SelectedDerived,
         button_text: 'Derived indices',
-        market_name: 'der',
+        market_name: 'derived',
         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/',
@@ -35,25 +33,16 @@ export const market_buttons: TMarketButtons[] = [
         src: Stocks,
         selected_src: SelectedStocks,
         button_text: 'Stocks & indices',
-        market_name: 'ind',
+        market_name: 'indices',
         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: 'cry',
+        market_name: 'cryptocurrency',
         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/',
@@ -62,7 +51,7 @@ export const market_buttons: TMarketButtons[] = [
         src: Commodities,
         selected_src: SelectedCommodities,
         button_text: 'Commodities',
-        market_name: 'com',
+        market_name: 'commodities',
         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,12 +49,13 @@ 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['stk']
-            const indices = rawMarketsData['ind']
+            const stocks = rawMarketsData['stocks']
+            const indices = rawMarketsData['indices']
             const stocks_indices = { ...stocks, ...indices }
-            const res = { ...rawMarketsData, ind: stocks_indices }
+            const res = { ...rawMarketsData, indices: stocks_indices }
 
             if (res[selected_market]) {
                 return Object.values(res[selected_market])

diff --git a/src/features/pages/home/live-pricing/table-component/live-pricing.module.scss b/src/features/pages/home/live-pricing/table-component/live-pricing.module.scss
@@ -10,7 +10,7 @@
     align-items: center;
     min-block-size: 7.5rem;
     th {
-        padding: 1rem;
+        padding-block: 0;
         inline-size: 7.3rem;
         &:nth-child(1) {
             inline-size: 11rem;
@@ -80,7 +80,6 @@
         }
     }
     @include breakpoints(phone) {
-        padding: 2rem;
         gap: 0;
         td {
             justify-content: flex-start;
@@ -98,7 +97,7 @@
         }
     }
     @include breakpoints(laptop) {
-        padding: 2rem;
+        padding: 1rem;
         gap: 0;
         td {
             justify-content: flex-start;
@@ -116,3 +115,8 @@
         }
     }
 }
+
+
+
+
+
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 === 'Volatility_150_(1s)_Index')
+    if (icon_src === '1HZ150V')
         return <Image src={icons['Vol_1HZ150V']} width="24px" height="24px" />
-    if (icon_src === 'Volatility_250_(1s)_Index')
+    if (icon_src === '1HZ250V')
         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,14 +3,25 @@ import { TString } from 'types/generics'
 export type TMarketData = {
     ask: number
     bid: number
-    chng: number
-    mkt: string
-    sprd: number
-    sym: string
-    code: string
+    day_percentage_change: number
+    market: string
+    spread: number
+    symbol: string
+    shortcode: string
 }
 
-export type TAvailableLiveMarkets = 'fx' | 'der' | 'ind' | 'cry' | 'com' | 'etfs'
+export type TMarketDataResponse = {
+    trading_platform_asset_listing: any
+    active_symbols: TMarketData[]
+    req_id: number
+}
+
+export type TAvailableLiveMarkets =
+    | 'forex'
+    | 'derived'
+    | 'indices'
+    | 'cryptocurrency'
+    | 'commodities'
 
 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,10 +11,9 @@ const liveMarketColumnHelper = createColumnHelper<TMarketData>()
 
 const useLiveColumns = () => {
     const { is_mobile } = useBreakpoints()
-
     const columns = useMemo(() => {
         return [
-            liveMarketColumnHelper.accessor('code', {
+            liveMarketColumnHelper.accessor('shortcode', {
                 header: () => (
                     <Flex.Box>
                         <Typography.Paragraph
@@ -29,15 +28,11 @@ const useLiveColumns = () => {
                 ),
                 cell: (info) => (
                     <Flex.Box>
-                        {info.row.original.mkt !== 'etfs' ? (
-                            <SymbolIcon icon_src={info.getValue()} />
-                        ) : (
-                            <SymbolIcon icon_src="ETFSICON" />
-                        )}
+                        <SymbolIcon icon_src={info.getValue()} />
                     </Flex.Box>
                 ),
             }),
-            liveMarketColumnHelper.accessor('sym', {
+            liveMarketColumnHelper.accessor('symbol', {
                 header: () => <Flex.Box></Flex.Box>,
                 cell: (info) => (
                     <Flex.Box>
@@ -89,7 +84,7 @@ const useLiveColumns = () => {
                     </Flex.Box>
                 ),
             }),
-            liveMarketColumnHelper.accessor('sprd', {
+            liveMarketColumnHelper.accessor('spread', {
                 header: () => (
                     <Flex.Box>
                         <Typography.Paragraph
@@ -110,7 +105,7 @@ const useLiveColumns = () => {
                     </Flex.Box>
                 ),
             }),
-            liveMarketColumnHelper.accessor('chng', {
+            liveMarketColumnHelper.accessor('day_percentage_change', {
                 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