From fb99855c0dd15bfc3958c6ff061321259ec227ae Mon Sep 17 00:00:00 2001 From: meenu-deriv Date: Thu, 7 Dec 2023 09:17:36 +0400 Subject: [PATCH] chore: added crypto etf and commodities markets --- .../markets/commodities/commodity-content.tsx | 23 + .../markets/commodities/faq-section/index.tsx | 35 ++ .../markets/commodities/hero-banner/index.tsx | 33 + .../pages/markets/commodities/index.tsx | 22 + .../commodities/other-markets/index.tsx | 21 + .../commodities/platforms-available/index.tsx | 26 + .../commodities/trading-in-deriv/index.tsx | 18 + .../commodities/why-trade-in-deriv/index.tsx | 22 + .../markets/cryptocurrency/crypto-content.tsx | 23 + .../cryptocurrency/faq-section/index.tsx | 35 ++ .../cryptocurrency/hero-banner/index.tsx | 33 + .../pages/markets/cryptocurrency/index.tsx | 22 + .../cryptocurrency/other-markets/index.tsx | 21 + .../platforms-available/index.tsx | 26 + .../cryptocurrency/trading-in-deriv/index.tsx | 19 + .../why-trade-in-deriv/index.tsx | 22 + .../pages/markets/etf/banner/data.tsx | 27 - .../pages/markets/etf/banner/index.tsx | 9 - .../pages/markets/etf/check-trading/index.tsx | 38 -- .../etf/check-trading/styles.module.scss | 10 - src/features/pages/markets/etf/index.tsx | 43 -- .../markets/etf/instrumental-content/data.tsx | 566 ------------------ .../etf/instrumental-content/index.tsx | 37 -- .../instrumental-content/styles.module.scss | 21 - .../etf/instrumental-content/types.tsx | 10 - .../pages/markets/etf/instruments/data.tsx | 166 ----- .../pages/markets/etf/instruments/index.tsx | 26 - .../etf/instruments/styles.module.scss | 8 - src/features/pages/markets/etf/steps/data.tsx | 29 - .../pages/markets/etf/steps/index.tsx | 14 - .../markets/etf/trades-available/data.tsx | 55 -- .../markets/etf/trades-available/index.tsx | 27 - .../pages/markets/etf/why-trade/data.tsx | 62 -- .../pages/markets/etf/why-trade/index.tsx | 11 - .../pages/markets/etfs/etf-content.tsx | 23 + .../pages/markets/etfs/faq-section/index.tsx | 35 ++ .../pages/markets/etfs/hero-banner/index.tsx | 33 + src/features/pages/markets/etfs/index.tsx | 22 + .../markets/etfs/other-markets/index.tsx | 23 + .../etfs/platforms-available/index.tsx | 26 + .../markets/etfs/trading-in-deriv/index.tsx | 19 + .../markets/etfs/why-trade-in-deriv/index.tsx | 22 + .../pages/markets/forex/forex-content.tsx | 22 + src/features/pages/markets/forex/index.tsx | 35 +- .../markets/forex/other-markets/data.tsx | 15 + .../markets/forex/other-markets/index.tsx | 3 +- .../pages/markets/market-tab/index.tsx | 103 +++- src/images/migration/markets/commodities.png | Bin 0 -> 136100 bytes .../migration/markets/cryptocurrencies.png | Bin 0 -> 127456 bytes src/images/migration/markets/derived-eu.png | Bin 0 -> 84545 bytes src/images/migration/markets/etf.png | Bin 0 -> 687934 bytes .../migration/markets/stocks-and-indices.png | Bin 0 -> 134603 bytes src/pages/markets/commodities/index.tsx | 24 +- src/pages/markets/cryptocurrencies/index.tsx | 18 +- .../markets/exchange-traded-funds/index.tsx | 4 +- 55 files changed, 729 insertions(+), 1258 deletions(-) create mode 100644 src/features/pages/markets/commodities/commodity-content.tsx create mode 100644 src/features/pages/markets/commodities/faq-section/index.tsx create mode 100644 src/features/pages/markets/commodities/hero-banner/index.tsx create mode 100644 src/features/pages/markets/commodities/index.tsx create mode 100644 src/features/pages/markets/commodities/other-markets/index.tsx create mode 100644 src/features/pages/markets/commodities/platforms-available/index.tsx create mode 100644 src/features/pages/markets/commodities/trading-in-deriv/index.tsx create mode 100644 src/features/pages/markets/commodities/why-trade-in-deriv/index.tsx create mode 100644 src/features/pages/markets/cryptocurrency/crypto-content.tsx create mode 100644 src/features/pages/markets/cryptocurrency/faq-section/index.tsx create mode 100644 src/features/pages/markets/cryptocurrency/hero-banner/index.tsx create mode 100644 src/features/pages/markets/cryptocurrency/index.tsx create mode 100644 src/features/pages/markets/cryptocurrency/other-markets/index.tsx create mode 100644 src/features/pages/markets/cryptocurrency/platforms-available/index.tsx create mode 100644 src/features/pages/markets/cryptocurrency/trading-in-deriv/index.tsx create mode 100644 src/features/pages/markets/cryptocurrency/why-trade-in-deriv/index.tsx delete mode 100644 src/features/pages/markets/etf/banner/data.tsx delete mode 100644 src/features/pages/markets/etf/banner/index.tsx delete mode 100644 src/features/pages/markets/etf/check-trading/index.tsx delete mode 100644 src/features/pages/markets/etf/check-trading/styles.module.scss delete mode 100644 src/features/pages/markets/etf/index.tsx delete mode 100644 src/features/pages/markets/etf/instrumental-content/data.tsx delete mode 100644 src/features/pages/markets/etf/instrumental-content/index.tsx delete mode 100644 src/features/pages/markets/etf/instrumental-content/styles.module.scss delete mode 100644 src/features/pages/markets/etf/instrumental-content/types.tsx delete mode 100644 src/features/pages/markets/etf/instruments/data.tsx delete mode 100644 src/features/pages/markets/etf/instruments/index.tsx delete mode 100644 src/features/pages/markets/etf/instruments/styles.module.scss delete mode 100644 src/features/pages/markets/etf/steps/data.tsx delete mode 100644 src/features/pages/markets/etf/steps/index.tsx delete mode 100644 src/features/pages/markets/etf/trades-available/data.tsx delete mode 100644 src/features/pages/markets/etf/trades-available/index.tsx delete mode 100644 src/features/pages/markets/etf/why-trade/data.tsx delete mode 100644 src/features/pages/markets/etf/why-trade/index.tsx create mode 100644 src/features/pages/markets/etfs/etf-content.tsx create mode 100644 src/features/pages/markets/etfs/faq-section/index.tsx create mode 100644 src/features/pages/markets/etfs/hero-banner/index.tsx create mode 100644 src/features/pages/markets/etfs/index.tsx create mode 100644 src/features/pages/markets/etfs/other-markets/index.tsx create mode 100644 src/features/pages/markets/etfs/platforms-available/index.tsx create mode 100644 src/features/pages/markets/etfs/trading-in-deriv/index.tsx create mode 100644 src/features/pages/markets/etfs/why-trade-in-deriv/index.tsx create mode 100644 src/features/pages/markets/forex/forex-content.tsx create mode 100644 src/images/migration/markets/commodities.png create mode 100644 src/images/migration/markets/cryptocurrencies.png create mode 100644 src/images/migration/markets/derived-eu.png create mode 100644 src/images/migration/markets/etf.png create mode 100644 src/images/migration/markets/stocks-and-indices.png diff --git a/src/features/pages/markets/commodities/commodity-content.tsx b/src/features/pages/markets/commodities/commodity-content.tsx new file mode 100644 index 00000000000..41714b3e8bd --- /dev/null +++ b/src/features/pages/markets/commodities/commodity-content.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import HeroBanner from './hero-banner' +import WhyTradeInDeriv from './why-trade-in-deriv' +import PlatformsToTrade from './platforms-available' +import TradingInDeriv from './trading-in-deriv' +import OtherMarkets from './other-markets' +import FAQSection from './faq-section' + +const CommoditiesContent = () => { + return ( + <> + + + + + + + + + ) +} + +export default CommoditiesContent diff --git a/src/features/pages/markets/commodities/faq-section/index.tsx b/src/features/pages/markets/commodities/faq-section/index.tsx new file mode 100644 index 00000000000..d76493fe2ee --- /dev/null +++ b/src/features/pages/markets/commodities/faq-section/index.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import { AccordionBlock } from '@deriv-com/blocks' +import { Section } from '@deriv/quill-design' +import { AccordionProps } from '@deriv-com/components' +import { FAQContent } from '../../forex/faq-section/data' +import { localize } from 'components/localization' + +const FAQSection = () => { + const { data } = FAQContent + + const accordionItems: AccordionProps[] = [] + + data.forEach((item) => { + const answer = item.answers ? item.answers[0] : () => <> + accordionItems.push({ + title: item.title, + content: answer, + divider: 'bottom', + }) + }) + + return ( +
+ +
+ ) +} + +export default FAQSection diff --git a/src/features/pages/markets/commodities/hero-banner/index.tsx b/src/features/pages/markets/commodities/hero-banner/index.tsx new file mode 100644 index 00000000000..2af93fe6539 --- /dev/null +++ b/src/features/pages/markets/commodities/hero-banner/index.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { Hero } from '@deriv-com/blocks' +import { StaticImage } from 'gatsby-plugin-image' +import { Button } from '@deriv/quill-design' +import { localize } from 'components/localization' + +const HeroBanner = () => { + return ( + ( + + )} + > +
+ + +
+ + ) +} + +export default HeroBanner diff --git a/src/features/pages/markets/commodities/index.tsx b/src/features/pages/markets/commodities/index.tsx new file mode 100644 index 00000000000..227acf6ea1b --- /dev/null +++ b/src/features/pages/markets/commodities/index.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { BreakpointProvider, ThemeProvider } from '@deriv/quill-design' +import { PageLayout } from '@deriv-com/components' +import MarketTab from '../market-tab' +import Layout from 'features/components/templates/layout' +import MainRowNavigation from 'features/pages/home/navigation' + +const CommoditiesMarket = () => { + return ( + + + + + + + + + + + ) +} +export default CommoditiesMarket diff --git a/src/features/pages/markets/commodities/other-markets/index.tsx b/src/features/pages/markets/commodities/other-markets/index.tsx new file mode 100644 index 00000000000..cf90d0dad04 --- /dev/null +++ b/src/features/pages/markets/commodities/other-markets/index.tsx @@ -0,0 +1,21 @@ +import { Features } from '@deriv-com/blocks' +import React from 'react' +import { cards } from '../../forex/other-markets/data' +import { localize } from 'components/localization' + +const OtherMarkets = () => { + const filteredCards = cards.filter((card) => card.header !== localize('_t_Commodities_t_')) + + return ( + <> + + + ) +} + +export default OtherMarkets diff --git a/src/features/pages/markets/commodities/platforms-available/index.tsx b/src/features/pages/markets/commodities/platforms-available/index.tsx new file mode 100644 index 00000000000..b1aa6d4bc4b --- /dev/null +++ b/src/features/pages/markets/commodities/platforms-available/index.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { Features } from '@deriv-com/blocks' +import { cards } from '../../forex/platforms-available/data' +import { localize } from 'components/localization' + +const PlatformsToTrade = () => { + const filteredCards = cards.filter((card) => { + const headerText = card.header.toLowerCase() + return ( + headerText.includes('deriv mt5') || + headerText.includes('deriv x') || + headerText.includes('deriv ctrader') + ) + }) + return ( + <> + + + ) +} +export default PlatformsToTrade diff --git a/src/features/pages/markets/commodities/trading-in-deriv/index.tsx b/src/features/pages/markets/commodities/trading-in-deriv/index.tsx new file mode 100644 index 00000000000..2bd4386fa03 --- /dev/null +++ b/src/features/pages/markets/commodities/trading-in-deriv/index.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { Features } from '@deriv-com/blocks' +import { cards } from '../../forex/trading-in-deriv/data' +import { localize } from 'components/localization' + +const TradingInDeriv = () => { + return ( + <> + + + ) +} +export default TradingInDeriv diff --git a/src/features/pages/markets/commodities/why-trade-in-deriv/index.tsx b/src/features/pages/markets/commodities/why-trade-in-deriv/index.tsx new file mode 100644 index 00000000000..1c4d95501d4 --- /dev/null +++ b/src/features/pages/markets/commodities/why-trade-in-deriv/index.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Features } from '@deriv-com/blocks' +import { cards } from '../../forex/why-trade-in-deriv/data' +import { localize } from 'components/localization' + +const WhyTradeInDeriv = () => { + return ( + <> + + + ) +} +export default WhyTradeInDeriv diff --git a/src/features/pages/markets/cryptocurrency/crypto-content.tsx b/src/features/pages/markets/cryptocurrency/crypto-content.tsx new file mode 100644 index 00000000000..07cd8580723 --- /dev/null +++ b/src/features/pages/markets/cryptocurrency/crypto-content.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import HeroBanner from './hero-banner' +import WhyTradeInDeriv from './why-trade-in-deriv' +import PlatformsToTrade from './platforms-available' +import TradingInDeriv from './trading-in-deriv' +import OtherMarkets from './other-markets' +import FAQSection from './faq-section' + +const CryptoContent = () => { + return ( + <> + + + + + + + + + ) +} + +export default CryptoContent diff --git a/src/features/pages/markets/cryptocurrency/faq-section/index.tsx b/src/features/pages/markets/cryptocurrency/faq-section/index.tsx new file mode 100644 index 00000000000..be16e9a5fb8 --- /dev/null +++ b/src/features/pages/markets/cryptocurrency/faq-section/index.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import { AccordionBlock } from '@deriv-com/blocks' +import { Section } from '@deriv/quill-design' +import { AccordionProps } from '@deriv-com/components' +import { FAQContent } from '../../forex/faq-section/data' +import { localize } from 'components/localization' + +const FAQSection = () => { + const { data } = FAQContent + + const accordionItems: AccordionProps[] = [] + + data.forEach((item) => { + const answer = item.answers ? item.answers[0] : () => <> + accordionItems.push({ + title: item.title, + content: answer, + divider: 'bottom', + }) + }) + + return ( +
+ +
+ ) +} + +export default FAQSection diff --git a/src/features/pages/markets/cryptocurrency/hero-banner/index.tsx b/src/features/pages/markets/cryptocurrency/hero-banner/index.tsx new file mode 100644 index 00000000000..edc6976b09a --- /dev/null +++ b/src/features/pages/markets/cryptocurrency/hero-banner/index.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { Hero } from '@deriv-com/blocks' +import { StaticImage } from 'gatsby-plugin-image' +import { Button } from '@deriv/quill-design' +import { localize } from 'components/localization' + +const HeroBanner = () => { + return ( + ( + + )} + > +
+ + +
+ + ) +} + +export default HeroBanner diff --git a/src/features/pages/markets/cryptocurrency/index.tsx b/src/features/pages/markets/cryptocurrency/index.tsx new file mode 100644 index 00000000000..cd44a2cb7d7 --- /dev/null +++ b/src/features/pages/markets/cryptocurrency/index.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { BreakpointProvider, ThemeProvider } from '@deriv/quill-design' +import { PageLayout } from '@deriv-com/components' +import MarketTab from '../market-tab' +import Layout from 'features/components/templates/layout' +import MainRowNavigation from 'features/pages/home/navigation' + +const CryptoMarket = () => { + return ( + + + + + + + + + + + ) +} +export default CryptoMarket diff --git a/src/features/pages/markets/cryptocurrency/other-markets/index.tsx b/src/features/pages/markets/cryptocurrency/other-markets/index.tsx new file mode 100644 index 00000000000..e227c08f5e1 --- /dev/null +++ b/src/features/pages/markets/cryptocurrency/other-markets/index.tsx @@ -0,0 +1,21 @@ +import { Features } from '@deriv-com/blocks' +import React from 'react' +import { cards } from '../../forex/other-markets/data' +import { localize } from 'components/localization' + +const OtherMarkets = () => { + const filteredCards = cards.filter((card) => card.header !== localize('_t_Cryptocurrencies_t_')) + + return ( + <> + + + ) +} + +export default OtherMarkets diff --git a/src/features/pages/markets/cryptocurrency/platforms-available/index.tsx b/src/features/pages/markets/cryptocurrency/platforms-available/index.tsx new file mode 100644 index 00000000000..043d6cebecf --- /dev/null +++ b/src/features/pages/markets/cryptocurrency/platforms-available/index.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { Features } from '@deriv-com/blocks' +import { cards } from '../../forex/platforms-available/data' +import { localize } from 'components/localization' + +const PlatformsToTrade = () => { + const filteredCards = cards.filter((card) => { + const headerText = card.header.toLowerCase() + return ( + headerText.includes('deriv mt5') || + headerText.includes('deriv x') || + headerText.includes('deriv ctrader') + ) + }) + return ( + <> + + + ) +} +export default PlatformsToTrade diff --git a/src/features/pages/markets/cryptocurrency/trading-in-deriv/index.tsx b/src/features/pages/markets/cryptocurrency/trading-in-deriv/index.tsx new file mode 100644 index 00000000000..765392454b7 --- /dev/null +++ b/src/features/pages/markets/cryptocurrency/trading-in-deriv/index.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import { Features } from '@deriv-com/blocks' +import { cards } from '../../forex/trading-in-deriv/data' +import { localize } from 'components/localization' + +const TradingInDeriv = () => { + const filteredCards = cards.filter((card) => card.header !== localize('_t_Options_t_')) + return ( + <> + + + ) +} +export default TradingInDeriv diff --git a/src/features/pages/markets/cryptocurrency/why-trade-in-deriv/index.tsx b/src/features/pages/markets/cryptocurrency/why-trade-in-deriv/index.tsx new file mode 100644 index 00000000000..102c0729c73 --- /dev/null +++ b/src/features/pages/markets/cryptocurrency/why-trade-in-deriv/index.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Features } from '@deriv-com/blocks' +import { cards } from '../../forex/why-trade-in-deriv/data' +import { localize } from 'components/localization' + +const WhyTradeInDeriv = () => { + return ( + <> + + + ) +} +export default WhyTradeInDeriv diff --git a/src/features/pages/markets/etf/banner/data.tsx b/src/features/pages/markets/etf/banner/data.tsx deleted file mode 100644 index 89efcc1a395..00000000000 --- a/src/features/pages/markets/etf/banner/data.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import { StaticImage } from 'gatsby-plugin-image' -import { HomepageBannerType } from 'features/components/organisms/markets/market-banner/types' - -export const BannerItems: HomepageBannerType = { - title: '_t_Exchange-traded funds_t_', - image_tablet: ( - - ), - image_phone: ( - - ), - description: - '_t_Exchange-traded funds (ETFs) allow you to diversify your portfolio with assets that track bonds, commodities, and indices, without the high cost of owning the underlying assets._t_', -} diff --git a/src/features/pages/markets/etf/banner/index.tsx b/src/features/pages/markets/etf/banner/index.tsx deleted file mode 100644 index eddff965e88..00000000000 --- a/src/features/pages/markets/etf/banner/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' -import { BannerItems } from './data' -import MarketWrapper from 'features/components/organisms/markets/market-banner/market-wrapper' - -const Banner = () => { - return -} - -export default Banner diff --git a/src/features/pages/markets/etf/check-trading/index.tsx b/src/features/pages/markets/etf/check-trading/index.tsx deleted file mode 100644 index b0a9f17d4c8..00000000000 --- a/src/features/pages/markets/etf/check-trading/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react' -import * as styles from './styles.module.scss' -import Flex from 'features/components/atoms/flex-box' -import { Localize } from 'components/localization' -import LinkButton from 'features/components/atoms/link-button' -import Typography from 'features/components/atoms/typography' - -const CheckTrading = () => { - return ( - - - - - - - - - - - ) -} - -export default CheckTrading diff --git a/src/features/pages/markets/etf/check-trading/styles.module.scss b/src/features/pages/markets/etf/check-trading/styles.module.scss deleted file mode 100644 index 18775529cbe..00000000000 --- a/src/features/pages/markets/etf/check-trading/styles.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'features/styles/theme/theme-mixins' as *; -@import 'features/styles/theme/variables'; - -.item_container { - box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 0; - - @include breakpoints(tablet) { - box-shadow: none; - } -} diff --git a/src/features/pages/markets/etf/index.tsx b/src/features/pages/markets/etf/index.tsx deleted file mode 100644 index 34ddf965d0e..00000000000 --- a/src/features/pages/markets/etf/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react' -import Layout from 'features/components/templates/layout' -import Steps from './steps' -import WhyTrade from './why-trade' -import Banner from './banner' -import InstrumentsTable from './instruments' -import InstrumentsContent from './instrumental-content' -import TradeTypes from './trades-available' -import CheckTrading from './check-trading' -import SignupPublic from 'features/components/templates/signup/with-banner' -import Flex from 'features/components/atoms/flex-box' -import OtherMarketsSlider from 'features/components/molecules/other-markets-slider' -import MarketNav from 'features/components/templates/navigation/market-nav' -import Footer from 'features/components/templates/footer/' - -const ETFMarket = () => { - return ( - - - - - - - - - - - - - -