Merge branch 'master' of https://github.com/binary-com/deriv-com

crowdin/messages.json

@@ -1770,17 +1770,19 @@
   "2144330112": "<0>Deriv MT5</0> offers CFD trading on a similar range of assets, where you're able to open positions with leverage and your potential profit is only known when you close your positions. It's riskier than multipliers trading because while you may potentially gain a lot if you win, you may also lose a lot if you don't. Deriv MT5 is popular among our traders who enjoy the risks as part of the excitement of CFD trading.",
   "2145594485": "95% and above",
   "2147176310": "1. Find or create an ad",
+  "-1308346982": "Derived",
   "-49538650": "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.",
   "-1954765400": "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.",
+  "-1995163270": "ETFs",
+  "-493573295": "Diversify your portfolio with various assets, such as bonds, commodities, and indices, without the high cost of owning the underlying assets.",
+  "-1959484303": "Cryptocurrencies",
   "-999492653": "Take advantage of a highly liquid market with round-the-clock trading. Profit from correctly predicting the movement of world's most popular cryptocurrencies.",
+  "-362324454": "Commodities",
   "-2072074553": "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.",
   "-737399162": "Partnership programmes",
   "-1829383827": "Contact us",
   "-1236814682": "Deriv life",
   "-2115275974": "CFDs",
-  "-1308346982": "Derived",
-  "-1959484303": "Cryptocurrencies",
-  "-362324454": "Commodities",
   "-1879666853": "Deriv MT5",
   "-1290112064": "Deriv EZ",
   "-319687255": "Deriv GO",

gatsby-browser.js

@@ -35,6 +35,9 @@ const sendTags = (api) => {
     }
     api.getTags()
         .then((result) => {
+            if (!result || !result.result) {
+                return null
+            }
             if (
                 !result.result['Login ID'] ||
                 !result.result['Site Language'] ||

src/components/elements/market-tab/_types.ts

@@ -1,7 +1,10 @@
+import { TString } from 'types/generics'
+
 export type TAvailableLiveMarkets =
     | 'forex'
     | 'derived'
     | 'indices'
+    | 'etfs'
     | 'cryptocurrency'
     | 'commodities'
 

src/components/elements/market-tab/_utils.ts

@@ -4,18 +4,20 @@ import Derived from 'images/svg/home/ts_derived_icon.svg'
 import Stocks from 'images/svg/home/ts_stocks_icon.svg'
 import Crypto from 'images/svg/home/ts_crypto_icon.svg'
 import Commodities from 'images/svg/home/ts_commodities_icon.svg'
+import Etfs from 'images/svg/home/ts_etfs.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 SelectedCrypto from 'images/svg/home/selected_ts_crypto_icon.svg'
 import SelectedCommodities from 'images/svg/home/selected_ts_commodities_icon.svg'
+import SelectedEtfs from 'images/svg/home/selected_etfs.svg'
 
 export const market_buttons: TMarketButtons[] = [
     {
         id: 0,
         src: Forex,
         selected_src: SelectedForex,
-        button_text: 'Forex',
+        button_text: '_t_Forex_t_',
         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_',
@@ -25,7 +27,7 @@ export const market_buttons: TMarketButtons[] = [
         id: 1,
         src: Derived,
         selected_src: SelectedDerived,
-        button_text: 'Derived',
+        button_text: '_t_Derived_t_',
         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_',
@@ -35,27 +37,37 @@ export const market_buttons: TMarketButtons[] = [
         id: 2,
         src: Stocks,
         selected_src: SelectedStocks,
-        button_text: 'Stocks & indices',
+        button_text: '_t_Stocks & indices_t_',
         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/',
     },
     {
         id: 3,
+        src: Etfs,
+        selected_src: SelectedEtfs,
+        button_text: '_t_ETFs_t_',
+        market_name: 'etfs',
+        market_description:
+            '_t_Diversify your portfolio with various assets, such as bonds, commodities, and indices, without the high cost of owning the underlying assets._t_',
+        to: 'markets/etfs/',
+    },
+    {
+        id: 4,
         src: Crypto,
         selected_src: SelectedCrypto,
-        button_text: 'Cryptocurrencies',
+        button_text: '_t_Cryptocurrencies_t_',
         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/',
     },
     {
-        id: 4,
+        id: 5,
         src: Commodities,
         selected_src: SelectedCommodities,
-        button_text: 'Commodities',
+        button_text: '_t_Commodities_t_',
         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_',

src/components/elements/market-tab/index.tsx

@@ -4,8 +4,10 @@ import { market_buttons } from './_utils'
 import { TAvailableLiveMarkets } from './_types'
 import { ContainerWrapper, MarketButton, MarketsContainer } from './_styles'
 import { Header } from 'components/elements'
+import AvailablePlatform from 'pages/trading-specification/components/_available-platform'
 import { Localize } from 'components/localization'
 import TradingSpecificationTable from 'pages/trading-specification/components/_trading_spec_table'
+import useRegion from 'components/hooks/use-region'
 
 const TabStyledHeader = styled(Header)`
     font-family: 'Ubuntu';
@@ -18,6 +20,7 @@ const MarketIcon = styled.img<{ is_selected?: boolean }>`
 `
 
 const MarketTab = () => {
+    const { is_row } = useRegion()
     const [selected_market, setSelectedMarket] = useState<TAvailableLiveMarkets>('forex')
     const onMarketButtonClick = (selected) => {
         setSelectedMarket(selected)
@@ -26,26 +29,28 @@ const MarketTab = () => {
     return (
         <>
             <MarketsContainer>
-                {market_buttons.map((marketItem) => (
-                    <MarketButton
-                        selected={marketItem.market_name === selected_market}
-                        key={marketItem.id}
-                        onClick={() => {
-                            onMarketButtonClick(marketItem.market_name)
-                        }}
-                    >
-                        <MarketIcon
-                            src={
-                                marketItem.market_name === selected_market
-                                    ? marketItem.selected_src
-                                    : marketItem.src
-                            }
-                        />
-                        <TabStyledHeader type="paragraph-2" as="p">
-                            <Localize translate_text={marketItem.button_text} />
-                        </TabStyledHeader>
-                    </MarketButton>
-                ))}
+                {market_buttons
+                    .filter((marketItem) => is_row || marketItem.market_name !== 'etfs')
+                    .map((marketItem) => (
+                        <MarketButton
+                            selected={marketItem.market_name === selected_market}
+                            key={marketItem.id}
+                            onClick={() => {
+                                onMarketButtonClick(marketItem.market_name)
+                            }}
+                        >
+                            <MarketIcon
+                                src={
+                                    marketItem.market_name === selected_market
+                                        ? marketItem.selected_src
+                                        : marketItem.src
+                                }
+                            />
+                            <TabStyledHeader type="paragraph-2" as="p">
+                                <Localize translate_text={marketItem.button_text} />
+                            </TabStyledHeader>
+                        </MarketButton>
+                    ))}
             </MarketsContainer>
             <ContainerWrapper>
                 {market_buttons.map(
@@ -63,6 +68,7 @@ const MarketTab = () => {
                         ),
                 )}
             </ContainerWrapper>
+            <AvailablePlatform selected_market={selected_market} />
             <TradingSpecificationTable market={selected_market} />
         </>
     )

src/pages/landing/ebooks/components/_get-ebook.tsx

@@ -343,11 +343,11 @@ const GetEbook = ({ color = 'var(--color-white)', ebook_utm_code, onSubmit }: Ge
                             components={[
                                 <StyledLocalizedLink
                                     key={0}
-                                    to="/tnc/security-and-privacy.pdf"
+                                    as="a"
+                                    href="/tnc/security-and-privacy.pdf"
                                     size="1.2rem"
                                     color="red"
                                     rel="noopener noreferrer"
-                                    target="_blank"
                                 />,
                             ]}
                         />

src/pages/trading-specification/_types.ts

@@ -4,6 +4,7 @@ export type TAvailableLiveMarkets =
     | 'forex'
     | 'derived'
     | 'stocks'
+    | 'etfs'
     | 'cryptocurrency'
     | 'commodities'
 
@@ -22,8 +23,8 @@ export type THeaders = {
     target_spread: number
     max_effective_leverage: string | number
     margin_requirement: string | number
-    swap_long: number
-    swap_short: number
+    swap_long: string | number
+    swap_short: string | number
     trading_hours: string
 }
 export type TDLHeaders = {
@@ -35,7 +36,7 @@ export type TDLHeaders = {
 export type TSpecification = {
     market: string
     data: THeaders[]
-    eu_data: THeaders[]
+    eu_data?: THeaders[]
     dl_data?: TDLHeaders[]
     dl_title?: TString
 }

src/pages/trading-specification/_use-trading-spec-columns.tsx

@@ -117,7 +117,12 @@ const useLiveColumns = (market: string) => {
             }),
             liveMarketColumnHelper.accessor('swap_long', {
                 header: () => {
-                    if (market == 'forex' || market == 'indices' || market == 'commodities')
+                    if (
+                        market == 'forex' ||
+                        market == 'indices' ||
+                        market == 'commodities' ||
+                        market == 'etfs'
+                    )
                         return (
                             <TableHeaderCell
                                 text={<Localize translate_text={swap_long_points} />}
@@ -138,7 +143,12 @@ const useLiveColumns = (market: string) => {
             }),
             liveMarketColumnHelper.accessor('swap_short', {
                 header: () => {
-                    if (market == 'forex' || market == 'indices' || market == 'commodities')
+                    if (
+                        market == 'forex' ||
+                        market == 'indices' ||
+                        market == 'commodities' ||
+                        market == 'etfs'
+                    )
                         return (
                             <TableHeaderCell
                                 text={<Localize translate_text={swap_short_points} />}