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 a5ba513

Browse files
matin-derivcakasuma
matin-deriv
authored and
cakasuma
committed
Matin/Add DP2P in Payment Method Page (#1204)
* Matin/Add DP2P in Payment Method Page * Matin/Improvement: use Show component to separate Mobile and Desktop * Use pixel inside media queries * Matin/Fix/Improvement: Added mobileOsDetect * Fix dp2p buttons size and misalignments * Todo IOS os to redirect to apple store Co-authored-by: matin-binary <[email protected]>
1 parent 518bcf5 commit a5ba513

File tree

7 files changed

+290
-3
lines changed

7 files changed

+290
-3
lines changed

‎gatsby-browser.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { WrapPagesWithLocaleContext } from './src/components/localization'
44
import { isProduction, isLocalHost } from './src/common/websocket/config'
55
import { CookieStorage, LocalStore } from './src/common/storage'
66
import TrafficSource from './src/common/traffic-source'
7-
import isMobile from './src/common/os-detect'
7+
import { isMobile } from './src/common/os-detect'
88
import { gtm_test_domain } from './src/common/utility'
99
import { MediaContextProvider } from './src/themes/media'
1010
import { DerivProvider } from './src/store'

‎src/common/os-detect.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,22 @@
1-
const isMobile = () =>
1+
export const isMobile = () =>
22
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
33

4-
export default isMobile
4+
export const mobileOSDetect = () => {
5+
const userAgent = navigator.userAgent || navigator.vendor || window.opera
6+
7+
// Windows Phone must come first because its UA also contains "Android"
8+
if (/windows phone/i.test(userAgent)) {
9+
return 'Windows Phone'
10+
}
11+
12+
if (/android/i.test(userAgent)) {
13+
return 'Android'
14+
}
15+
16+
// iOS detection from: http://stackoverflow.com/a/9039885/177710
17+
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
18+
return 'iOS'
19+
}
20+
21+
return 'unknown'
22+
}

‎src/common/utility.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ const trimSpaces = (value) => value.trim()
105105

106106
const deriv_app_url = 'https://app.deriv.com'
107107
const deriv_bot_app_url = 'https://app.deriv.com/bot'
108+
const deriv_dp2p_app_url = 'https://app.deriv.com/cashier/p2p'
108109
const smarttrader_url = 'https://smarttrader.deriv.com'
109110
const binary_url = 'https://binary.com'
110111
const deriv_cookie_domain = 'deriv.com'
@@ -124,6 +125,8 @@ const dmt5_linux_url = 'https://www.metatrader5.com/en/terminal/help/start_advan
124125
const dmt5_android_url =
125126
'https://download.mql5.com/cdn/mobile/mt5/android?server=Deriv-Demo,Deriv-Server'
126127
const dmt5_ios_url = 'https://download.mql5.com/cdn/mobile/mt5/ios?server=Deriv-Demo,Deriv-Server'
128+
const dp2p_google_play_url =
129+
'https://play.google.com/store/apps/details?id=com.deriv.dp2p&hl=en&gl=US'
127130

128131
export {
129132
affiliate_signin_url,
@@ -137,6 +140,8 @@ export {
137140
community_url,
138141
deriv_app_url,
139142
deriv_bot_app_url,
143+
deriv_dp2p_app_url,
144+
dp2p_google_play_url,
140145
mga_link_url,
141146
debounce,
142147
brand_name,

‎src/images/common/dp2p_platform.png

68.2 KB
Loading

‎src/images/svg/checkmark.svg

Lines changed: 15 additions & 0 deletions
Loading

‎src/pages/payment-methods/_dp2p.js

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
import React, { Fragment, useEffect, useState } from 'react'
2+
import styled from 'styled-components'
3+
import { graphql, useStaticQuery } from 'gatsby'
4+
import device, { size } from 'themes/device'
5+
import { Text, Header, QueryImage } from 'components/elements'
6+
import { Flex, Show } from 'components/containers'
7+
import { Button, LinkButton } from 'components/form'
8+
import { localize, Localize } from 'components/localization'
9+
import { isBrowser, deriv_dp2p_app_url, dp2p_google_play_url } from 'common/utility'
10+
import { mobileOSDetect } from 'common/os-detect'
11+
import Checkmark from 'images/svg/checkmark.svg'
12+
13+
const query = graphql`
14+
query {
15+
dp2p_platform: file(relativePath: { eq: "dp2p_platform.png" }) {
16+
...fadeIn
17+
}
18+
}
19+
`
20+
21+
const StyledContainer = styled.div`
22+
width: 100%;
23+
display: flex;
24+
flex-direction: row;
25+
justify-content: center;
26+
margin-top: 4rem;
27+
28+
@media ${device.tabletS} {
29+
flex-direction: column;
30+
}
31+
`
32+
33+
const ContentLeft = styled.div`
34+
display: flex;
35+
flex-direction: column;
36+
justify-content: center;
37+
width: 100%;
38+
max-width: 58.8rem;
39+
`
40+
41+
const ContentRight = styled.div`
42+
width: 100%;
43+
display: flex;
44+
flex-direction: column;
45+
margin-left: 3.2rem;
46+
47+
@media ${device.tabletS} {
48+
margin-left: 0;
49+
}
50+
`
51+
52+
const ItemTitle = styled.div`
53+
display: flex;
54+
55+
img {
56+
flex-shrink: 0;
57+
width: 2.4rem;
58+
height: 2.4rem;
59+
margin: 0.6rem 0.8rem 0 0;
60+
object-fit: contain;
61+
}
62+
`
63+
64+
const ImageWrapper = styled(Flex)`
65+
max-width: 58.8rem;
66+
width: 100%;
67+
height: auto;
68+
margin: 0.8rem 0 2.4rem;
69+
70+
div {
71+
width: 100%;
72+
}
73+
74+
@media ${device.tabletS} {
75+
margin: 8px auto 32px;
76+
}
77+
78+
@media ${device.mobileL} {
79+
width: 100%;
80+
height: 100%;
81+
}
82+
`
83+
84+
const ButtonWrapper = styled.div`
85+
display: flex;
86+
flex-direction: row;
87+
justify-content: center;
88+
align-items: center;
89+
90+
@media ${device.mobileL} {
91+
flex-direction: column;
92+
93+
button {
94+
width: 100%;
95+
}
96+
}
97+
`
98+
99+
const ButtonLearnMore = styled(LinkButton)`
100+
height: 4.2rem;
101+
line-height: 1.25;
102+
@media ${device.mobileL} {
103+
height: auto;
104+
width: 100%;
105+
margin-bottom: 16px;
106+
font-size: 14px;
107+
padding: 12px 16px;
108+
}
109+
`
110+
111+
const ButtonDp2p = styled(Button)`
112+
margin-left: 1.6rem;
113+
@media ${device.mobileL} {
114+
margin-left: 0;
115+
width: 100%;
116+
font-size: 14px;
117+
padding: 12px 16px;
118+
}
119+
`
120+
121+
const Dp2p = () => {
122+
const [is_mobile, setMobile] = useState(false)
123+
const handleResizeWindow = () => {
124+
setMobile(isBrowser() ? window.screen.width <= size.tabletS : false)
125+
}
126+
useEffect(() => {
127+
setMobile(isBrowser() ? window.screen.width <= size.tabletS : false)
128+
window.addEventListener('resize', handleResizeWindow)
129+
})
130+
131+
const handleExternalLink = () => {
132+
let link = deriv_dp2p_app_url
133+
if (is_mobile) {
134+
// TODO handle IOS case once the app is ready
135+
if (mobileOSDetect() === 'Android') {
136+
link = dp2p_google_play_url
137+
}
138+
}
139+
window.open(link, '_blank')
140+
}
141+
142+
const data = useStaticQuery(query)
143+
const dp2p_checklist = [
144+
{
145+
title: <Localize translate_text="Make speedy deposits and withdrawals" />,
146+
subtitle: (
147+
<Localize translate_text="On DP2P, all exchanges are completed within 2 hours." />
148+
),
149+
},
150+
{
151+
title: <Localize translate_text="Choose the best rates" />,
152+
subtitle: (
153+
<Localize translate_text="Exchange your local currency at your preferred rate." />
154+
),
155+
},
156+
{
157+
title: <Localize translate_text="Exchange with trusted traders" />,
158+
subtitle: (
159+
<Localize translate_text="Traders are rated based on their completion rate and speed of exchanges." />
160+
),
161+
},
162+
{
163+
title: <Localize translate_text="Communicate in real-time" />,
164+
subtitle: (
165+
<Localize translate_text="Chat in-app with your chosen trader for faster exchanges." />
166+
),
167+
},
168+
{
169+
title: <Localize translate_text="Get our help" />,
170+
subtitle: (
171+
<Localize translate_text="Our support team is always ready to help resolve any disputes." />
172+
),
173+
},
174+
]
175+
return (
176+
<Fragment>
177+
<Header as="h2" size="var(--text-size-xl)" align="center" mb="1.2rem" lh="1.25">
178+
{localize('Deriv peer-to-peer (DP2P)')}
179+
</Header>
180+
<Show.Mobile>
181+
<Text align="center" size="var(--text-size-sm)">
182+
{localize(
183+
'A fast and secure peer-to-peer deposit and withdrawal service. Easily exchange with fellow traders to move funds in and out of your Deriv account.',
184+
)}
185+
</Text>
186+
</Show.Mobile>
187+
<Show.Desktop>
188+
<Text align="center" size="var(--text-size-m)">
189+
{localize('A fast and secure peer-to-peer deposit and withdrawal service.')}
190+
</Text>
191+
<Text align="center" size="var(--text-size-m)">
192+
{localize(
193+
'Easily exchange with fellow traders to move funds in and out of your Deriv account.',
194+
)}
195+
</Text>
196+
</Show.Desktop>
197+
<StyledContainer>
198+
<ContentLeft>
199+
{dp2p_checklist.map((item, index) => (
200+
<div style={{ marginBottom: '1.6rem' }} key={index}>
201+
<ItemTitle>
202+
<img src={Checkmark} />
203+
<Text
204+
size={is_mobile ? 'var(--text-size-sm)' : 'var(--text-size-m)'}
205+
weight="bold"
206+
>
207+
{item.title}
208+
</Text>
209+
</ItemTitle>
210+
<Text
211+
size={is_mobile ? 'var(--text-size-sm)' : 'var(--text-size-s)'}
212+
mt="0.8rem"
213+
ml="3.2rem"
214+
>
215+
{item.subtitle}
216+
</Text>
217+
</div>
218+
))}
219+
</ContentLeft>
220+
<ContentRight>
221+
<ImageWrapper ai="center">
222+
<QueryImage
223+
data={data['dp2p_platform']}
224+
alt={localize('DP2P Platform')}
225+
width="100%"
226+
/>
227+
</ImageWrapper>
228+
<ButtonWrapper>
229+
<ButtonLearnMore tertiary to="/p2p/v1">
230+
{localize('Learn more')}
231+
</ButtonLearnMore>
232+
<ButtonDp2p secondary="true" onClick={handleExternalLink}>
233+
{localize('Take me to DP2P')}
234+
</ButtonDp2p>
235+
</ButtonWrapper>
236+
</ContentRight>
237+
</StyledContainer>
238+
</Fragment>
239+
)
240+
}
241+
242+
export default Dp2p

‎src/pages/payment-methods/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Helmet } from 'react-helmet'
55
import Scrollbar from 'react-perfect-scrollbar'
66
import ExpandList from './_expanded-list'
77
import payment_data from './_payment-data'
8+
import Dp2p from './_dp2p'
89
import Layout from 'components/layout/layout'
910
import { Text, Header, Divider, Accordion, AccordionItem } from 'components/elements'
1011
import { SEO, SectionContainer, Container } from 'components/containers'
@@ -228,6 +229,12 @@ const PaymentMethods = () => {
228229
</Text>
229230
</Container>
230231
</SectionContainer>
232+
<Divider height="2px" />
233+
<SectionContainer>
234+
<Container direction="column">
235+
<Dp2p />
236+
</Container>
237+
</SectionContainer>
231238
</Layout>
232239
)
233240
}

0 commit comments

Comments
 (0)