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.

Al-amin/27665/updated MT5 signal tab steps #1955

Merged
merged 12 commits into from
Aug 26, 2021
Merged

Al-amin/27665/updated MT5 signal tab steps #1955

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e84fd75
updated MT5 signal tab steps
Jul 27, 2021
bf12b5d
addressed QA comment
Jul 28, 2021
c016214
Addressed QA comments
Jul 29, 2021
6f05360
addressed PR comment
Jul 30, 2021
83fe3d4
revert mt5 signal image back
Aug 3, 2021
2ec9651
updated MT5 signal tab steps
Jul 27, 2021
dad11c1
addressed QA comment
Jul 28, 2021
e2da6c5
Addressed QA comments
Jul 29, 2021
c04c05b
addressed PR comment
Jul 30, 2021
c320c43
revert mt5 signal image back
Aug 3, 2021
559aea1
resolved conflict
Aug 26, 2021
1d04636
---
Aug 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified src/images/common/dmt5-signals/provider-step1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
276 changes: 149 additions & 127 deletions src/pages/dmt5-trading-signals/_signal-steps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { graphql, useStaticQuery } from 'gatsby'
import styled from 'styled-components'
import Tabs from '../trade-types/components/_side-tab'
import { Show } from '../../components/containers'
import { usePageLoaded } from 'components/hooks/use-page-loaded'
import { Localize } from 'components/localization'
import { QueryImage, LocalizedLinkText } from 'components/elements'
import device from 'themes/device.js'
Expand Down Expand Up @@ -39,7 +40,6 @@ const content = {
),
notice: (
<Localize
translate_text="<0>Note:</0> For a wider selection of signal providers for Deriv, go to <1>MQL5 showcase page</1> and search for <0>Deriv</0> under the <0>Broker</0> server field."
components={[
<strong key={0} />,
<LocalizedLinkText
Expand All @@ -52,15 +52,16 @@ const content = {
key={1}
/>,
]}
translate_text="<0>Note:</0> For a wider selection of signal providers for Deriv, go to <1>MQL5 showcase page</1> and search for <0>Deriv</0> under the <0>Broker</0> server field."
/>
),
},
provider: {
header: <Localize translate_text="How to register as a signals provider" />,
step_one_header: <Localize translate_text="1. Create signal" />,
step_one_header: <Localize translate_text="1. Head to MQL5.com" />,
step_one_text: (
<Localize
translate_text="Go to the <0>MQL5 signals showcase</0> page and click on the Create signal button."
translate_text="In the <0>MQL5 signals showcase page</0>, click the Create signal button."
components={[
<LocalizedLinkText
external="true"
Expand All @@ -75,28 +76,41 @@ const content = {
step_two_header: <Localize translate_text="2. Fill the broker field" />,
step_two_text: (
<Localize
translate_text="Complete the form with your Deriv MT5 account credentials. For the Broker field, add <0>Deriv-Server</0> or <0>Deriv-Server-02</0> as your broker or <0>Deriv-Demo</0> if your signal is for demo accounts only."
components={[<strong key={0} />]}
translate_text="Complete the form with your Deriv MT5 account credentials. In the <0>Broker</0> field, enter your account server name: <1/> <0>- Deriv-Demo</0> if your signal is for demo accounts only <1/> <0>- Deriv-Server</0> or <0>Deriv-Server-02</0> if your signal is for real accounts only <1/>
(You can find the account server name on your <2>Deriv MT5 dashboard</2>.)"
components={[
<strong key={0} />,
<br key={1} />,
<LocalizedLinkText
external="true"
to="https://app.deriv.com/mt5"
color="red"
target="_blank"
rel="noopener noreferrer"
size={16}
key={2}
/>,
]}
/>
),
step_three_header: <Localize translate_text="3. Complete the registration" />,
step_three_header: <Localize translate_text="3. Fill in your details" />,
step_three_text: (
<Localize translate_text="Click Save and add a description to complete the registration." />
<Localize translate_text="Add a description and click Save to complete your registration." />
),
notice: (
<Localize
translate_text="<0>Note:</0> You need to upgrade your MQL5 account to seller status to be able to add a signal. If you’ve not upgraded yet, <1>follow the steps on this page</1> to register as a seller. You will find the account server name on your MT5 dashboard."
translate_text="<1>Note:</1> You need to upgrade your MQL5 account to seller status to be able to add a signal. If you’ve not upgraded yet, <0>follow the steps on this page</0> to register as a seller."
components={[
<strong key={0} />,
<LocalizedLinkText
external="true"
to="https://www.metatrader5.com/en/terminal/help/signals/signal_provider"
color="red"
target="_blank"
rel="noopener noreferrer"
size={16}
key={1}
key={0}
/>,
<strong key={1} />,
]}
/>
),
Expand Down Expand Up @@ -199,131 +213,139 @@ const query = graphql`

const SignalSteps = (active_tab) => {
const data = useStaticQuery(query)

const [is_mounted] = usePageLoaded(false) // needed to fix tab highlighting not being rerendered during first load
return (
<>
{active_tab.active_tab === 'signal-subscriber' && (
<Container>
<StyledTabs
is_reverse
max_width={'tabletL'}
has_notice
notice_content={content.subscriber.notice}
>
<Tabs.Panel
label={content.subscriber.step_one_header}
description={content.subscriber.step_one_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['subscriber_step_1']}
alt="Trade types option market"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['subscriber_step_1_mobile']}
alt="Trade types option market"
/>
</Show.Mobile>
</Tabs.Panel>
<Tabs.Panel
label={content.subscriber.step_two_header}
description={content.subscriber.step_two_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['subscriber_step_2']}
alt="Trade types option trade type open"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['subscriber_step_2_mobile']}
alt="Trade types option trade type open"
/>
</Show.Mobile>
</Tabs.Panel>
<Tabs.Panel
label={content.subscriber.step_three_header}
description={content.subscriber.step_three_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['subscriber_step_3']}
alt="Trade types option duration"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['subscriber_step_3_mobile']}
alt="Trade types option duration"
/>
</Show.Mobile>
</Tabs.Panel>
</StyledTabs>
{is_mounted && (
<>
<StyledTabs
is_reverse
max_width={'tabletL'}
has_notice
notice_content={content.subscriber.notice}
>
<Tabs.Panel
label={content.subscriber.step_one_header}
description={content.subscriber.step_one_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['subscriber_step_1']}
alt="Trade types option market"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['subscriber_step_1_mobile']}
alt="Trade types option market"
/>
</Show.Mobile>
</Tabs.Panel>
<Tabs.Panel
label={content.subscriber.step_two_header}
description={content.subscriber.step_two_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['subscriber_step_2']}
alt="Trade types option trade type open"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['subscriber_step_2_mobile']}
alt="Trade types option trade type open"
/>
</Show.Mobile>
</Tabs.Panel>
<Tabs.Panel
label={content.subscriber.step_three_header}
description={content.subscriber.step_three_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['subscriber_step_3']}
alt="Trade types option duration"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['subscriber_step_3_mobile']}
alt="Trade types option duration"
/>
</Show.Mobile>
</Tabs.Panel>
</StyledTabs>
</>
)}
</Container>
)}
{active_tab.active_tab === 'signal-provider' && (
<Container>
<StyledTabs
is_reverse
max_width={'tabletL'}
has_notice
notice_content={content.provider.notice}
>
<Tabs.Panel
label={content.provider.step_one_header}
description={content.provider.step_one_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['provider_step_1']}
alt="Trade types option market"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['provider_step_1_mobile']}
alt="Trade types option market"
/>
</Show.Mobile>
</Tabs.Panel>
<Tabs.Panel
label={content.provider.step_two_header}
description={content.provider.step_two_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['provider_step_2']}
alt="Trade types option trade type open"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['provider_step_2_mobile']}
alt="Trade types option trade type open"
/>
</Show.Mobile>
</Tabs.Panel>
<Tabs.Panel
label={content.provider.step_three_header}
description={content.provider.step_three_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['provider_step_3']}
alt="Trade types option duration"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['provider_step_3_mobile']}
alt="Trade types option duration"
/>
</Show.Mobile>
</Tabs.Panel>
</StyledTabs>
{is_mounted && (
<>
<StyledTabs
is_reverse
max_width={'tabletL'}
has_notice
notice_content={content.provider.notice}
>
<Tabs.Panel
label={content.provider.step_one_header}
description={content.provider.step_one_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['provider_step_1']}
alt="Trade types option market"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['provider_step_1_mobile']}
alt="Trade types option market"
/>
</Show.Mobile>
</Tabs.Panel>
<Tabs.Panel
label={content.provider.step_two_header}
description={content.provider.step_two_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['provider_step_2']}
alt="Trade types option trade type open"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['provider_step_2_mobile']}
alt="Trade types option trade type open"
/>
</Show.Mobile>
</Tabs.Panel>
<Tabs.Panel
label={content.provider.step_three_header}
description={content.provider.step_three_text}
>
<Show.Desktop min_width="992">
<StyledQueryImage
data={data['provider_step_3']}
alt="Trade types option duration"
/>
</Show.Desktop>
<Show.Mobile>
<StyledQueryImage
data={data['provider_step_3_mobile']}
alt="Trade types option duration"
/>
</Show.Mobile>
</Tabs.Panel>
</StyledTabs>
</>
)}
</Container>
)}
</>
Expand Down