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 77bde1e

Browse files
suthesanksuthesank
authored
Suthesh/margin trading page update (#1208)
* modified margin trading page (wip) * completed updating margin trading page * fix image size and position * fix image layout
1 parent 3043f4b commit 77bde1e

File tree

3 files changed

+162
-89
lines changed

3 files changed

+162
-89
lines changed

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

43.6 KB
Loading

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

44.9 KB
Loading

‎src/pages/trade-types/margin/_policies.js

Lines changed: 162 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,78 @@
11
import React from 'react'
22
import styled from 'styled-components'
3+
import { graphql, useStaticQuery } from 'gatsby'
34
import { SmallContainer, Ul } from '../components/_style'
4-
import { SectionContainer, Flex } from 'components/containers'
5-
import { Header, Text, CardStyle } from 'components/elements'
6-
import { localize, Localize } from 'components/localization'
7-
import Info from 'images/svg/trade-types/info.svg'
5+
import { SectionContainer, Show } from 'components/containers'
6+
import { Header, Text, QueryImage } from 'components/elements'
7+
import { LinkButton } from 'components/form'
8+
import { localize } from 'components/localization'
9+
import device from 'themes/device'
810

9-
const Card = styled.article`
10-
${CardStyle}
11+
const query = graphql`
12+
query {
13+
example: file(relativePath: { eq: "trade-types/margin-example-crash-boom.png" }) {
14+
...fadeIn
15+
}
16+
example_mobile: file(relativePath: { eq: "trade-types/margin-example-crash-boom-mobile.png" }) {
17+
...fadeIn
18+
}
19+
}
1120
`
1221

13-
const CardHeading = styled(Flex)`
14-
padding: 3rem 2.4rem;
15-
background: var(--color-grey-25);
16-
align-items: center;
22+
const ShowWrapper = styled.div`
23+
width:100%;
1724
`
1825

19-
const CardBody = styled(Flex)`
20-
flex-direction: column;
21-
padding: 2.4rem;
22-
`
23-
const InfoWrapper = styled.div`
24-
margin-right: 1.6rem;
26+
const ExampleImage = styled(QueryImage)`
27+
margin:${(props) => (props.center ? '0 auto' : 'unset')};
28+
width: 792px;
29+
height: 453px;
30+
31+
@media ${device.laptop}{
32+
width: 630px;
33+
height: 361px;
34+
}
35+
36+
@media ${device.tabletL}{
37+
width:328px;
38+
height:506px;
39+
}
40+
41+
@media ${device.mobileM}{
42+
width:289px;
43+
height:454px;
44+
}
2545
`
46+
const StyledLinkButton = styled(LinkButton)`
47+
padding: 1.2rem 1.5rem;
48+
font-size: 14px;
49+
max-height: 4rem;
50+
height: 100%;
51+
margin-right: 0.8rem;
2652
27-
const Note = styled.div`
28-
background-color: var(--color-grey-25);
29-
border-radius: 60px;
30-
padding: 0.8rem 2.4rem;
31-
width: fit-content;
53+
@media ${device.laptop} {
54+
padding: 1.5rem 1.6rem;
55+
height: 42px;
56+
white-space: nowrap;
57+
display: block;
58+
max-height: 40px;
59+
60+
:nth-child(2) {
61+
margin-bottom: 16px;
62+
}
63+
}
64+
65+
:active {
66+
outline: none;
67+
border: none;
68+
}
69+
:focus {
70+
outline: 0;
71+
}
3272
`
3373

3474
const Policies = () => {
75+
const data = useStaticQuery(query)
3576
return (
3677
<>
3778
<SectionContainer background="white" padding="4rem 0 0">
@@ -80,107 +121,139 @@ const Policies = () => {
80121
<Header as="h3" type="section-title" mb="0.8rem">
81122
{localize('Things you should know when trading on margin')}
82123
</Header>
83-
<Text weight="bold" mb="0.8rem">
124+
<Text size="var(--text-size-m)" weight="bold" mb="0.8rem">
84125
{localize('Margin increases both potential profit and loss')}
85126
</Text>
86-
<Text mb="1.2rem">
127+
<Text mb="2.4rem">
87128
{localize(
88129
'Trading on margin increases your market exposure, thus amplifying both your potential profit and loss.',
89130
)}
90131
</Text>
91-
<Text weight="bold" mb="0.8rem">
132+
<Text size="var(--text-size-m)" weight="bold" mb="0.8rem">
92133
{localize('Stop-loss')}
93134
</Text>
94-
<Text mb="1.2rem">
135+
<Text mb="1.6rem">
95136
{localize(
96-
'You can use the stop-loss tool to minimise potential losses and decrease the chances of getting a margin call.',
137+
'You can set the stop loss level to minimise potential losses and decrease the chances of getting a margin call. When you set this level, your trade will automatically close when your losses equal the stop loss amount.',
97138
)}
98139
</Text>
99140
<Text weight="bold" mb="0.8rem">
141+
{localize(
142+
'Stop loss with Crash/Boom/Range break indices',
143+
)}
144+
</Text>
145+
<Text mb="1.6rem">
146+
{localize(
147+
"Stop loss works slightly differently in Crash/Boom/Range break indices. When trading on these indices with a stop loss level, your trade will automatically close if your losses exceed the stop loss amount.",
148+
)}
149+
</Text>
150+
<Text mb="1.6rem">
151+
{localize(
152+
"The reason is that in Crash/Boom/Range break indices, sudden fluctuations in price between one tick to another can sometimes surpass the stop loss you set. In this case, your trade will close at the nearest applicable market price instead of exactly at the stop loss level.",
153+
)}
154+
</Text>
155+
<Text mb="1.6rem">
156+
{localize(
157+
"For example, you predict that the market will go up, and buy a contract on Crash 500 index at 8,000.",
158+
)}
159+
</Text>
160+
<Text mb="1.6rem">
161+
{localize(
162+
"When the market price climbs to 8,700, you decide to set the stop loss level at 8,200. After a few ticks, the price dives to 8,100, surpassing your stop loss level.",
163+
)}
164+
</Text>
165+
<Text mb="1.6rem">
166+
{localize(
167+
"Your trade will automatically close at 8,100, which is the nearest applicable market price to your stop loss level.",
168+
)}
169+
</Text>
170+
<Show.Desktop>
171+
<ExampleImage data={data['example']} />
172+
</Show.Desktop>
173+
<ShowWrapper>
174+
<Show.Mobile width="100%">
175+
<ExampleImage data={data['example_mobile']} />
176+
</Show.Mobile>
177+
</ShowWrapper>
178+
179+
<Text size="var(--text-size-m)" weight="bold" mb="0.8rem" mt="2.4rem">
100180
{localize('Margin call')}
101181
</Text>
102-
<Text mb="1.2rem">
182+
<Text mb="2.4rem">
103183
{localize(
104184
'You can still open positions when you get a margin call, but we recommend you add funds to your account to keep your positions running.',
105185
)}
106186
</Text>
107-
<Text weight="bold" mb="0.8rem">
187+
<Text size="var(--text-size-m)" weight="bold" mb="0.8rem">
108188
{localize('Margin requirements')}
109189
</Text>
110-
<Text mb="4rem">
190+
<Text mb="2.4rem">
111191
{localize(
112192
'Margin requirements may differ depending on factors like the asset you want to trade, the equity in your account, your account type and market conditions.',
113193
)}
114194
</Text>
115-
<Card>
116-
<CardHeading>
117-
<InfoWrapper>
118-
<img src={Info} alt="info" />
119-
</InfoWrapper>
120-
<Header as="h4" type="sub-section-title" id="swap-policy">
121-
{localize('Important notes on our swap rates (overnight funding)')}
122-
</Header>
123-
</CardHeading>
124-
<CardBody>
125-
<Text mb="1.6rem">
195+
<Header as="h4" type="sub-section-title" id="swap-policy">
196+
{localize('Swap rates (overnight funding)')}
197+
</Header>
198+
199+
<Text mb="1.6rem">
200+
{localize(
201+
'If you keep any position open overnight, an interest adjustment (or swap rate) will be made to your trading account to compensate for the cost of keeping your position open. Instruments traded on our platforms are subjected to different swap rates and other conditions:',
202+
)}
203+
</Text>
204+
<Header as="h5" type="main-paragraph" mb="0.8rem">
205+
{localize('Forex and commodities')}
206+
</Header>
207+
<Text mb="0.8rem">
208+
{localize(
209+
'The swap rate is based on interbank lending rates, in addition to a 2% fee that is charged daily (every night) that your position is held. The swap rate also depends on the time and days that you hold your positions open:',
210+
)}
211+
</Text>
212+
<Ul>
213+
<li>
214+
<Text>
126215
{localize(
127-
'If you keep any position open overnight, an interest adjustment (or swap rate) will be made to your trading account to compensate for the cost of keeping your position open. Instruments traded on our platforms are subjected to different swap rates and other conditions:',
216+
'If you keep a position open past 23:59:59 GMT, you will be subjected to the basic swap rate.',
128217
)}
129218
</Text>
130-
<Header as="h5" type="main-paragraph" mb="0.8rem">
131-
{localize('Forex and commodities')}
132-
</Header>
133-
<Text mb="0.8rem">
219+
</li>
220+
<li>
221+
<Text>
134222
{localize(
135-
'The swap rate is based on interbank lending rates, in addition to a 2% fee that is charged daily (every night) that your position is held. The swap rate also depends on the time and days that you hold your positions open:',
223+
'Since it takes two days for forex transactions to settle, positions that are still open on Wednesday at 23:59:59 GMT will be charged three times the swap rate to account for weekends.',
136224
)}
137225
</Text>
138-
<Ul>
139-
<li>
140-
<Text>
141-
{localize(
142-
'If you keep a position open past 23:59:59 GMT, you will be subjected to the basic swap rate.',
143-
)}
144-
</Text>
145-
</li>
146-
<li>
147-
<Text>
148-
{localize(
149-
'Since it takes two days for forex transactions to settle, positions that are still open on Wednesday at 23:59:59 GMT will be charged three times the swap rate to account for weekends.',
150-
)}
151-
</Text>
152-
</li>
153-
<li>
154-
<Text>
155-
{localize(
156-
'Our swap rate may also be adjusted to take holidays into account.',
157-
)}
158-
</Text>
159-
</li>
160-
</Ul>
161-
<Header as="h5" type="main-paragraph" mt="1.6rem" mb="0.8rem">
162-
{localize('Synthetic indices')}
163-
</Header>
164-
<Text mb="0.8rem">
226+
</li>
227+
<li>
228+
<Text>
165229
{localize(
166-
'An interest adjustment will be made to your trading account to compensate for the cost of keeping your position open overnight.',
230+
'Our swap rate may also be adjusted to take holidays into account.',
167231
)}
168232
</Text>
169-
<Text mb="0.8rem">
170-
<Localize
171-
translate_text="The interest adjustment is calculated on an annual basis for long and short positions according to the formula: <0>(volume in lot * specified swap size/100)/360</0>."
172-
components={[<strong key={0} />]}
173-
/>
174-
</Text>
175-
<Note>
176-
<Text size="14px">
177-
{localize(
178-
'Please note that our swap rate also depends on the time and days you hold your positions open.',
179-
)}
180-
</Text>
181-
</Note>
182-
</CardBody>
183-
</Card>
233+
</li>
234+
</Ul>
235+
<Header as="h5" type="main-paragraph" mt="1.6rem" mb="0.8rem">
236+
{localize('Synthetic indices')}
237+
</Header>
238+
<Text mb="1.6rem">
239+
{localize(
240+
'An interest adjustment will be made to your trading account to compensate for the cost of keeping your position open overnight. The interest adjustment is calculated on an annual basis for long and short positions.',
241+
)}
242+
</Text>
243+
<Text mb="1.6rem">
244+
{localize('You can use our swap calculator to estimate the swap charges required to keep your positions open overnight on DMT5.')}
245+
</Text>
246+
247+
<StyledLinkButton secondary="true" to="/trade-types/margin">
248+
{localize('Swap calculator')}
249+
</StyledLinkButton>
250+
251+
<Text size="var(--text-size-xs)" mt="1.6rem">
252+
{localize(
253+
'Please note that our swap rate also depends on the time and days you hold your positions open.',
254+
)}
255+
</Text>
256+
184257
</SmallContainer>
185258
</SectionContainer>
186259
</>

0 commit comments

Comments
 (0)