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.

Nikita/To add trading platform deriv go in the navigation bar #2382

Merged
6 commits merged into from
Jan 17, 2022
Merged

Nikita/To add trading platform deriv go in the navigation bar #2382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
56ea078
feat:add deriv go navigation components
Dec 23, 2021
6fdd693
feat: style trade navigation dropdown / add is_eu check
Dec 24, 2021
a7fd8e0
fix: refactor PR remarks
Dec 28, 2021
c5fa515
fix: broad of the trade nav
Jan 5, 2022
313d699
feat: add deriv-go footer link
Jan 5, 2022
3697f04
refactor: place bonary bot nav card / update offset arrow useEffect
Jan 11, 2022
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
59 changes: 29 additions & 30 deletions src/components/custom/other-platforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import DBot from 'images/svg/dbot/dbot-icon.svg'
import DMT5 from 'images/svg/dmt5/dmt5-icon.svg'
import BinaryBot from 'images/svg/binarybot-icon.svg'
import DTrader from 'images/svg/dtrader/dtrader-icon.svg'
import DerivGo from 'images/svg/deriv-go/deriv-go-icon.svg'
import Forex from 'images/svg/custom/forex-nav.svg'
import Help from 'images/svg/menu/help-center.svg'
import Leadership from 'images/svg/menu/leadership.svg'
Expand Down Expand Up @@ -341,21 +342,6 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
onClick={onClick}
otherLinkProps={{ rel: 'noopener noreferrer' }}
/>
{is_eu_country && (
<NavCard
aria_label="Binary Bot"
icon={() => <img src={BinaryBot} alt="" width="32" height="32" />}
content={
<Localize translate_text="Our classic &ldquo;drag-and-drop&rdquo; tool for creating trading bots, featuring pop-up trading charts, for advanced users." />
}
title={<Localize translate_text="Binary Bot" />}
to="https://bot.deriv.com/"
external="true"
target="_blank"
onClick={onClick}
otherLinkProps={{ rel: 'noopener noreferrer' }}
/>
)}
</Flex>
<Flex direction="column" wrap="wrap" jc="flex-start">
<EmptySpace />
Expand All @@ -369,6 +355,18 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
onClick={onClick}
to="/dtrader/"
/>
{!is_eu_country && (
<NavCard
aria_label="DerivGo"
icon={() => <img src={DerivGo} alt="" width="32" height="32" />}
content={
<Localize translate_text="Trade multipliers on forex, cryptocurrencies, and synthetic indices with our mobile app." />
}
title={<Localize translate_text="DerivGo" />}
onClick={onClick}
to="/landing/deriv-go/"
/>
)}
<NavCard
aria_label="DBot"
icon={() => <img src={DBot} alt="" width="32" height="32" />}
Expand All @@ -379,21 +377,22 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
onClick={onClick}
to="/dbot/"
/>
{!is_eu_country && (
<NavCard
aria_label="Binary Bot"
icon={() => <img src={BinaryBot} alt="" width="32" height="32" />}
content={
<Localize translate_text="Our classic &ldquo;drag-and-drop&rdquo; tool for creating trading bots, featuring pop-up trading charts, for advanced users." />
}
title={<Localize translate_text="Binary Bot" />}
to="https://bot.deriv.com/"
external="true"
target="_blank"
onClick={onClick}
otherLinkProps={{ rel: 'noopener noreferrer' }}
/>
)}
</Flex>
<Flex direction="column" wrap="wrap" jc="flex-start">
<EmptySpace />
<NavCard
aria_label="Binary Bot"
icon={() => <img src={BinaryBot} alt="" width="32" height="32" />}
content={
<Localize translate_text="Our classic &ldquo;drag-and-drop&rdquo; tool for creating trading bots, featuring pop-up trading charts, for advanced users." />
}
title={<Localize translate_text="Binary Bot" />}
to="https://bot.deriv.com/"
external="true"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why we are passing true as a string?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This prop is used in multiple components as string.

target="_blank"
onClick={onClick}
otherLinkProps={{ rel: 'noopener noreferrer' }}
/>
</Flex>
</Flex>
)
Expand Down
61 changes: 42 additions & 19 deletions src/components/custom/platforms-dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
NavResources,
NavMarket,
} from 'components/custom/other-platforms.js'
import { Container, Show } from 'components/containers'
import { Container, Show, Flex } from 'components/containers'

const FadeInDown = keyframes`
from {
Expand All @@ -19,11 +19,10 @@ const FadeInDown = keyframes`
transform: translateY(7.2rem) rotateY(0);
}
`

const NavDropdown = styled.div`
display: flex;
width: auto;
left: ${(props) => (props.offset ? props.offset + 'px !important' : 'none')};
width: ${(props) => (props.is_trade ? '90%' : 'auto')};
max-width: 1200px;
left: ${(props) => (props.offset && !props.is_trade ? props.offset + 'px !important' : 'none')};
position: absolute;
padding: 2.2rem 0.8rem;
z-index: -1;
Expand Down Expand Up @@ -68,18 +67,38 @@ const getNavigationContents = (parent, is_ppc, is_ppc_redirect) => {
if (parent === 'resources') return <NavResources />
}

const PlatformsDropdown = ({ current_ref, is_ppc, is_ppc_redirect, parent, setActiveDropdown }) => {
const [left_offset, setLeftOffset] = useState(current_ref.offsetLeft)
const [left_arrow_offset, setLeftArrowOffset] = useState(current_ref.offsetWidth / 2 - 15)
const PlatformsDropdown = ({
current_ref,
is_ppc,
is_ppc_redirect,
parent,
setActiveDropdown,
active_dropdown,
}) => {
const dropdownContainerRef = useRef(null)
const is_trade = active_dropdown === 'trade'
const current_offset = current_ref.offsetWidth / 2 - 15
const setTradeArrowOffset = (dropdownOffset) =>
current_ref.offsetLeft - dropdownOffset + current_offset
const [left_offset, setLeftOffset] = useState(current_ref.offsetLeft)
const [left_arrow_offset, setLeftArrowOffset] = useState()

const updateOffsets = useCallback(() => {
if (current_ref) {
if (is_trade) {
setLeftArrowOffset(setTradeArrowOffset(dropdownContainerRef.current.offsetLeft))
} else if (current_ref && !is_trade) {
setLeftOffset(current_ref.offsetLeft)
setLeftArrowOffset(current_ref.offsetWidth / 2 - 15)
setLeftArrowOffset(current_offset)
}
}, [current_ref])

const setInitArrowOffset = () => {
const dropdown_offset = dropdownContainerRef.current.offsetLeft
setLeftArrowOffset(is_trade ? setTradeArrowOffset(dropdown_offset) : current_offset)
}

useEffect(() => setInitArrowOffset(), [])

useEffect(() => {
if (dropdownContainerRef) {
setActiveDropdown(dropdownContainerRef)
Expand All @@ -92,20 +111,24 @@ const PlatformsDropdown = ({ current_ref, is_ppc, is_ppc_redirect, parent, setAc

return (
<Show.Desktop>
<NavDropdown
ref={dropdownContainerRef}
offset={left_offset}
offset_arrow={left_arrow_offset}
>
<StyledContainer>
{getNavigationContents(parent, is_ppc, is_ppc_redirect)}
</StyledContainer>
</NavDropdown>
<Flex>
<NavDropdown
ref={dropdownContainerRef}
offset={left_offset}
offset_arrow={left_arrow_offset}
is_trade={is_trade}
>
<StyledContainer>
{getNavigationContents(parent, is_ppc, is_ppc_redirect)}
</StyledContainer>
</NavDropdown>
</Flex>
</Show.Desktop>
)
}

PlatformsDropdown.propTypes = {
active_dropdown: PropTypes.string,
current_ref: PropTypes.object,
is_ppc: PropTypes.bool,
is_ppc_redirect: PropTypes.bool,
Expand Down
15 changes: 15 additions & 0 deletions src/components/elements/off-canvas-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import Diagonal from 'images/svg/elements/pink-right-diagonal.svg'
import DMT5 from 'images/svg/dmt5/dmt5-icon.svg'
import DerivX from 'images/svg/custom/deriv-x.svg'
import DTrader from 'images/svg/dtrader/dtrader-icon.svg'
import DerivGo from 'images/svg/deriv-go/deriv-go-icon.svg'
import Forex from 'images/svg/custom/forex-nav.svg'
import Help from 'images/svg/menu/help-center.svg'
import Leadership from 'images/svg/menu/leadership.svg'
Expand Down Expand Up @@ -239,6 +240,20 @@ export const OffCanvasMenuWrapper = (props) => {
to="/dtrader/"
/>
</Flex>
{!is_eu_country && (
<Flex mb="2rem">
<NavCard
aria_label="DerivGo"
icon={() => <img src={DerivGo} alt="" width="32" height="32" />}
content={
<Localize translate_text="Trade multipliers on forex, cryptocurrencies, and synthetic indices with our mobile app." />
}
title={<Localize translate_text="DerivGo" />}
onClick={handleArrowClick}
to="/landing/deriv-go/"
/>
</Flex>
)}
<Flex mb="2rem">
<NavCard
aria_label="SmartTrader"
Expand Down
5 changes: 5 additions & 0 deletions src/components/layout/footer/main-links.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect, is_eu_country }) => {
<LinkWrapper first_child="true">
<Link to="/dtrader/">{localize('DTrader')}</Link>
</LinkWrapper>
{!is_eu_country && (
<LinkWrapper>
<Link to="/landing/deriv-go/">{localize('Deriv Go')}</Link>
</LinkWrapper>
)}
<LinkWrapper>
<Link to="/dbot/">{localize('DBot')}</Link>
</LinkWrapper>
Expand Down
1 change: 1 addition & 0 deletions src/components/layout/nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,6 +531,7 @@ const NavDesktop = ({
<>
{active_dropdown && (
<PlatformsDropdown
active_dropdown={active_dropdown}
key={active_dropdown}
current_ref={active_link_ref}
parent={active_dropdown}
Expand Down
1 change: 1 addition & 0 deletions src/images/svg/deriv-go/deriv-go-icon.svg
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.