Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Commit 78e1ad7

Browse files
fiona-derivfiona-deriv
fiona-deriv
and
fiona-deriv
authored
fiona / Change margin to CFDs (#1841)
* add markets available for CFD trading * add start trading CFDs on deriv section * add styling for cfd page sections * add more CFDs page sections * add cfd page * change margin to cfd * update margin to cfds * minify svg file * fix: missing s and currencies * triger deployment * trigger deployment * update margin-calculator link * fix: spacing on title * align checklist icon with titles in responsive mode * remove real Deriv X * update text * remove extra space * change margin and swap calculator * implement pr changes * delete fragment * add redirect to cfds page * redirect margin to cfds * add markets available for CFD trading * add start trading CFDs on deriv section * add styling for cfd page sections * add more CFDs page sections * add cfd page * change margin to cfd * update margin to cfds * minify svg file * fix: missing s and currencies * update margin-calculator link * fix: spacing on title * align checklist icon with titles in responsive mode * remove real Deriv X * update text * remove extra space * change margin and swap calculator * implement pr changes * delete fragment * add redirect to cfds page * redirect margin to cfds * remove unused import * delete margin folder Co-authored-by: fiona-deriv <[email protected]>
1 parent b10e1b6 commit 78e1ad7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+721
-969
lines changed

‎gatsby-node.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ exports.onCreatePage = ({ page, actions }) => {
1515
const is_p2p = /responsible/g.test(page.path)
1616
const is_story = /story/g.test(page.path)
1717
const is_market = /markets/g.test(page.path)
18+
const is_cfds = /cfds/g.test(page.path)
1819

1920
if (is_responsible_trading) {
2021
createRedirect({
@@ -97,6 +98,21 @@ exports.onCreatePage = ({ page, actions }) => {
9798
})
9899
}
99100

101+
if (is_cfds) {
102+
createRedirect({
103+
fromPath: `/trade-types/margin/`,
104+
toPath: `/trade-types/cfds/`,
105+
redirectInBrowser: true,
106+
isPermanent: true,
107+
})
108+
createRedirect({
109+
fromPath: `/trade-types/margin`,
110+
toPath: `/trade-types/cfds/`,
111+
redirectInBrowser: true,
112+
isPermanent: true,
113+
})
114+
}
115+
100116
Object.keys(language_config).map((lang) => {
101117
// Use the values defined in "locales" to construct the path
102118
const { path, is_default } = language_config[lang]
@@ -232,6 +248,21 @@ exports.onCreatePage = ({ page, actions }) => {
232248
})
233249
}
234250

251+
if (is_cfds) {
252+
createRedirect({
253+
fromPath: `/${lang}/trade-types/margin/`,
254+
toPath: `/${lang}/trade-types/cfds/`,
255+
redirectInBrowser: true,
256+
isPermanent: true,
257+
})
258+
createRedirect({
259+
fromPath: `/${lang}/trade-types/margin`,
260+
toPath: `/${lang}/trade-types/cfds/`,
261+
redirectInBrowser: true,
262+
isPermanent: true,
263+
})
264+
}
265+
235266
return current_page
236267
})
237268
}

‎src/components/custom/_dtrading.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ const DTrading = ({ trading, reverse, two_title }) => {
125125
const data = useStaticQuery(query)
126126
return (
127127
<StyledSection>
128-
<Container direction='column'>
128+
<Container direction="column">
129129
{trading.map((item, index) => {
130130
let is_even = reverse ? (index + 1) % 2 : index % 2
131131
return (

‎src/components/custom/other-platforms.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import DTrader from 'images/svg/dtrader-icon.svg'
2929
import Forex from 'images/svg/forex-nav.svg'
3030
import Help from 'images/svg/menu/help-center.svg'
3131
import Leadership from 'images/svg/menu/leadership.svg'
32-
import Margin from 'images/svg/margin-trading-nav.svg'
32+
import CFD from 'images/svg/margin-trading-nav.svg'
3333
import Multipliers from 'images/svg/multipliers-nav.svg'
3434
import Options from 'images/svg/options-nav.svg'
3535
import Partner from 'images/svg/menu/partner.svg'
@@ -269,14 +269,14 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
269269
<Flex direction="column" wrap="wrap" jc="flex-start">
270270
<StyledText>{localize('Trade types')}</StyledText>
271271
<NavCard
272-
aria_label="Margin trading"
273-
icon={() => <img src={Margin} alt="Margin" width="32" height="32" />}
272+
aria_label="CFDs"
273+
icon={() => <img src={CFD} alt="CFDs" width="32" height="32" />}
274274
content={
275-
<Localize translate_text="Trade with leverage and low spreads for better returns on successful trades." />
275+
<Localize translate_text="Trade with leverage and tight spreads for better returns on successful trades." />
276276
}
277-
title={<Localize translate_text="Margin trading" />}
277+
title={<Localize translate_text="CFDs" />}
278278
onClick={onClick}
279-
to="/trade-types/margin/"
279+
to="/trade-types/cfds/"
280280
/>
281281
{!is_eu_country && (
282282
<NavCard
@@ -298,7 +298,7 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
298298
<img src={Multipliers} alt="Multipliers" width="32" height="32" />
299299
)}
300300
content={
301-
<Localize translate_text="Combine the upside of margin trading with the simplicity of options." />
301+
<Localize translate_text="Combine the upside of CFDs with the simplicity of options." />
302302
}
303303
title={<Localize translate_text="Multipliers" />}
304304
onClick={onClick}

‎src/components/elements/off-canvas-menu.js

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import DTrader from 'images/svg/dtrader-icon.svg'
2323
import Forex from 'images/svg/forex-nav.svg'
2424
import Help from 'images/svg/menu/help-center.svg'
2525
import Leadership from 'images/svg/menu/leadership.svg'
26-
import MarginTrading from 'images/svg/margin-trading-nav.svg'
26+
import CFD from 'images/svg/margin-trading-nav.svg'
2727
import Multipliers from 'images/svg/multipliers-nav.svg'
2828
import Options from 'images/svg/options-nav.svg'
2929
import Partner from 'images/svg/menu/partner.svg'
@@ -151,21 +151,16 @@ export const OffCanvasMenuWrapper = (props) => {
151151
</Text>
152152
<Flex mb="2rem">
153153
<NavCard
154-
aria_label="Margin trading"
154+
aria_label="CFDs"
155155
icon={() => (
156-
<img
157-
src={MarginTrading}
158-
alt="MarginTrading"
159-
width="32"
160-
height="32"
161-
/>
156+
<img src={CFD} alt="CFDs" width="32" height="32" />
162157
)}
163158
content={
164-
<Localize translate_text="Trade with leverage and low spreads for better returns on successful trades." />
159+
<Localize translate_text="Trade with leverage and tight spreads for better returns on successful trades." />
165160
}
166-
title={<Localize translate_text="Margin trading" />}
161+
title={<Localize translate_text="CFDs" />}
167162
onClick={handleArrowClick}
168-
to="/trade-types/margin/"
163+
to="/trade-types/cfds/"
169164
/>
170165
</Flex>
171166
{!is_eu_country && (
@@ -201,7 +196,7 @@ export const OffCanvasMenuWrapper = (props) => {
201196
/>
202197
)}
203198
content={
204-
<Localize translate_text="Combine the upside of margin trading with the simplicity of options." />
199+
<Localize translate_text="Combine the upside of CFDs with the simplicity of options." />
205200
}
206201
title={<Localize translate_text="Multipliers" />}
207202
onClick={handleArrowClick}

‎src/components/layout/footer/main-links.js

Lines changed: 16 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import {LinksWrapper, LinkWrapper, LinksCol, Title, Link } from './common/style.js'
3+
import { LinksWrapper, LinkWrapper, LinksCol, Title, Link } from './common/style.js'
44
import { localize } from 'components/localization'
55
import { Flex, Show } from 'components/containers'
6-
import {
7-
deriv_status_page_url,
8-
} from 'common/constants'
9-
10-
const MainLinksSection = ({is_ppc, is_ppc_redirect, is_eu_country }) => {
6+
import { deriv_status_page_url } from 'common/constants'
117

8+
const MainLinksSection = ({ is_ppc, is_ppc_redirect, is_eu_country }) => {
129
return (
1310
<LinksWrapper>
1411
<Show.Desktop>
@@ -24,14 +21,10 @@ const MainLinksSection = ({is_ppc, is_ppc_redirect, is_eu_country }) => {
2421
<Link to="/leadership/">{localize('Our leadership')}</Link>
2522
</LinkWrapper>
2623
<LinkWrapper>
27-
<Link to="/why-choose-us/">
28-
{localize('Why choose us?')}
29-
</Link>
24+
<Link to="/why-choose-us/">{localize('Why choose us?')}</Link>
3025
</LinkWrapper>
3126
<LinkWrapper>
32-
<Link to="/partners/">
33-
{localize('Partnership programmes')}
34-
</Link>
27+
<Link to="/partners/">{localize('Partnership programmes')}</Link>
3528
</LinkWrapper>
3629
<LinkWrapper>
3730
<Link to="/contact_us/">{localize('Contact us')}</Link>
@@ -78,21 +71,15 @@ const MainLinksSection = ({is_ppc, is_ppc_redirect, is_eu_country }) => {
7871
<Title>{localize('TRADE TYPES')}</Title>
7972
</LinkWrapper>
8073
<LinkWrapper first_child="true">
81-
<Link to="/trade-types/margin/">
82-
{localize('Margin trading')}
83-
</Link>
74+
<Link to="/trade-types/cfds/">{localize('CFDs')}</Link>
8475
</LinkWrapper>
8576
<Show.NonEU>
8677
<LinkWrapper>
87-
<Link to="/trade-types/options/">
88-
{localize('Options')}
89-
</Link>
78+
<Link to="/trade-types/options/">{localize('Options')}</Link>
9079
</LinkWrapper>
9180
</Show.NonEU>
9281
<LinkWrapper>
93-
<Link to="/trade-types/multiplier/">
94-
{localize('Multipliers')}
95-
</Link>
82+
<Link to="/trade-types/multiplier/">{localize('Multipliers')}</Link>
9683
</LinkWrapper>
9784
</LinksCol>
9885
)}
@@ -111,24 +98,18 @@ const MainLinksSection = ({is_ppc, is_ppc_redirect, is_eu_country }) => {
11198
</LinkWrapper>
11299
)}
113100
<LinkWrapper>
114-
<Link to="/markets/stock/">
115-
{localize('Stocks & indices')}
116-
</Link>
101+
<Link to="/markets/stock/">{localize('Stocks & indices')}</Link>
117102
</LinkWrapper>
118103
<LinkWrapper>
119-
<Link to="/markets/commodities/">
120-
{localize('Commodities')}
121-
</Link>
104+
<Link to="/markets/commodities/">{localize('Commodities')}</Link>
122105
</LinkWrapper>
123106
</LinksCol>
124107
<LinksCol>
125108
<LinkWrapper>
126109
<Title>{localize('LEGAL')}</Title>
127110
</LinkWrapper>
128111
<LinkWrapper first_child="true">
129-
<Link to="/regulatory">
130-
{localize('Regulatory information')}
131-
</Link>
112+
<Link to="/regulatory">{localize('Regulatory information')}</Link>
132113
</LinkWrapper>
133114
<LinkWrapper>
134115
<Link to="/terms-and-conditions">
@@ -151,9 +132,7 @@ const MainLinksSection = ({is_ppc, is_ppc_redirect, is_eu_country }) => {
151132
</Link>
152133
</LinkWrapper>
153134
<LinkWrapper>
154-
<Link to="/partners/payment-agent/">
155-
{localize('Payment agents')}
156-
</Link>
135+
<Link to="/partners/payment-agent/">{localize('Payment agents')}</Link>
157136
</LinkWrapper>
158137
<LinkWrapper>
159138
<Link
@@ -186,14 +165,10 @@ const MainLinksSection = ({is_ppc, is_ppc_redirect, is_eu_country }) => {
186165
</Link>
187166
</LinkWrapper>
188167
<LinkWrapper>
189-
<Link to="/trader-tools/">
190-
{localize('Traders’ tools')}
191-
</Link>
168+
<Link to="/trader-tools/">{localize('Traders’ tools')}</Link>
192169
</LinkWrapper>
193170
<LinkWrapper>
194-
<Link to="/payment-methods/">
195-
{localize('Payment methods')}
196-
</Link>
171+
<Link to="/payment-methods/">{localize('Payment methods')}</Link>
197172
</LinkWrapper>
198173
<LinkWrapper>
199174
<Link
@@ -223,11 +198,11 @@ const MainLinksSection = ({is_ppc, is_ppc_redirect, is_eu_country }) => {
223198
)
224199
}
225200

226-
export default MainLinksSection;
201+
export default MainLinksSection
227202

228203
MainLinksSection.propTypes = {
229204
is_eu_country: PropTypes.bool,
230205
is_ppc: PropTypes.bool,
231206
is_ppc_redirect: PropTypes.bool,
232207
type: PropTypes.string,
233-
}
208+
}

‎src/images/common/multiplier/[email protected]

228 KB
Loading

‎src/images/common/multiplier/[email protected]

-377 KB
Binary file not shown.

‎src/images/common/trade-types/cfd-example-crash-boom-mobile.png

55 KB
Loading

‎src/images/common/trade-types/cfd-example-crash-boom.png

58.3 KB
Loading

‎src/images/common/trade-types/cfd-pattern.png

15.6 KB
Loading

‎src/images/common/trade-types/mobile-cfd-pattern.png

5.44 KB
Loading

‎src/images/svg/trade-types/margin.svg renamed to ‎src/images/svg/trade-types/cfds.svg

File renamed without changes.

‎src/images/svg/trade-types/cryptocurrencies.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/pages/dmt5/_margin_calculator.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -234,13 +234,13 @@ const MarginCalculator = () => {
234234
</MainHeader>
235235
<StyledText>
236236
<Localize
237-
translate_text="Explore <0>margin trading</0> on DMT5, and enjoy high leverage and low spreads to increase your returns when the market moves in your favour."
237+
translate_text="Explore <0>CFDs</0> on Deriv MT5, and enjoy high leverage and low spreads to increase your returns when the market moves in your favour."
238238
components={[
239239
<LinkText
240240
color="red"
241241
key={0}
242242
target="_blank"
243-
href="/trade-types/margin/"
243+
href="/trade-types/cfds/"
244244
rel="noopener noreferrer"
245245
/>,
246246
]}

‎src/pages/home/_trade-types-mobile.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Carousel, Header, Text } from 'components/elements'
55
import { SectionContainer, Flex } from 'components/containers'
66
import { localize, Localize, LocalizedLink } from 'components/localization'
77
import { LinkButton } from 'components/form'
8-
import MarginLogo from 'images/svg/trade-types/margin.svg'
8+
import CFDLogo from 'images/svg/trade-types/cfds.svg'
99
import OptionsLogo from 'images/svg/trade-types/options.svg'
1010
import MultipliersLogo from 'images/svg/trade-types/multipliers.svg'
1111
import Arrow from 'images/svg/arrow-right.svg'
@@ -87,14 +87,14 @@ TradeTypeSlide.propTypes = {
8787
}
8888

8989
const TradeTypesMobile = () => {
90-
const margin = {
91-
icon: <img src={MarginLogo} alt="margin" width="48" height="49" />,
92-
title: <Localize translate_text="Margin trading" />,
90+
const cfds = {
91+
icon: <img src={CFDLogo} alt="cfd" width="48" height="49" />,
92+
title: <Localize translate_text="CFDs" />,
9393
description: (
94-
<Localize translate_text="Trade with leverage and low spreads for better returns on successful trades." />
94+
<Localize translate_text="Trade with leverage and tight spreads for better returns on successful trades." />
9595
),
96-
link: '/trade-types/margin/',
97-
linkTitle: localize('Margin'),
96+
link: '/trade-types/cfds/',
97+
linkTitle: localize('CFD'),
9898
}
9999
const options = {
100100
icon: <img src={OptionsLogo} alt="options" width="48" height="49" />,
@@ -109,15 +109,15 @@ const TradeTypesMobile = () => {
109109
icon: <img src={MultipliersLogo} alt="multipliers" width="48" height="49" />,
110110
title: <Localize translate_text="Multipliers" />,
111111
description: (
112-
<Localize translate_text="Get the best of both - the upside of margin trading with the simplicity of options." />
112+
<Localize translate_text="Get the best of both - the upside of CFDs with the simplicity of options." />
113113
),
114114
link: '/trade-types/multiplier/',
115115
linkTitle: localize('Multiplier'),
116116
}
117117

118118
const { is_eu_country } = React.useContext(DerivStore)
119119

120-
const trade_types = is_eu_country ? [margin, multipliers] : [margin, options, multipliers]
120+
const trade_types = is_eu_country ? [cfds, multipliers] : [cfds, options, multipliers]
121121

122122
const settings = {
123123
options: {

0 commit comments

Comments
 (0)