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 65db2b2

Browse files
committed
build: new endpoint page done
1 parent 3d124af commit 65db2b2

24 files changed

+253
-137
lines changed

gatsby-config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ module.exports = {
99
author: 'Deriv.com',
1010
siteUrl: 'https://deriv.com',
1111
},
12-
flags: { PRESERVE_WEBPACK_CACHE: true },
12+
flags: {
13+
FAST_DEV: true,
14+
PRESERVE_FILE_DOWNLOAD_CACHE: true,
15+
},
1316
plugins: [
1417
'gatsby-plugin-react-helmet',
1518
'gatsby-plugin-styled-components',

src/common/utility.js

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Cookies from 'js-cookie'
22
import extend from 'extend'
33
import { deriv_cookie_domain, deriv_app_languages } from './constants'
44

5-
export const trimSpaces = (value) => value.trim()
5+
export const trimSpaces = (value) => value?.trim()
66

77
export const toISOFormat = (date) => {
88
if (date instanceof Date) {
@@ -179,4 +179,27 @@ export const getLocalizedUrl = (path, is_index, to) => `/${path}${is_index ? ``
179179
export const nonENLangUrlReplace = (current_path) => {
180180
const path_with_or_without_slash = /\/.+?(\/)|(\/\w+)/u
181181
return current_path.replace(path_with_or_without_slash, '')
182-
}
182+
}
183+
184+
export const getDateFromToday = (num_of_days) => {
185+
const today = new Date()
186+
const next_week_date = new Date(
187+
today.getFullYear(),
188+
today.getMonth(),
189+
today.getDate() + num_of_days,
190+
)
191+
192+
return next_week_date
193+
}
194+
195+
export const isNullUndefined = (value) => value === null || value === undefined
196+
197+
export const isObject = (value) => typeof value === 'object'
198+
199+
export const isJSONString = (value) => {
200+
try {
201+
return JSON.parse(value) && !!value
202+
} catch (e) {
203+
return false
204+
}
205+
}

src/components/elements/dropdown-search.js

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
22
import styled, { css } from 'styled-components'
33
import PropTypes from 'prop-types'
44
import { Arrow, BottomLabel, DropdownContainer, ItemList, StyledLabel } from './dropdown'
5-
import { useDropdownHooks } from 'components/hooks/dropdown-hooks'
5+
import { useDropdown } from 'components/hooks/use-dropdown'
66
import device from 'themes/device'
77
import { Flex } from 'components/containers'
88

@@ -48,14 +48,9 @@ const DropdownSearch = ({
4848
}) => {
4949
const [input_value, setInputValue] = useState('')
5050
const [dropdown_items, setDropdownItems] = useState([...items])
51-
const [
52-
is_open,
53-
dropdown_ref,
54-
nodes,
55-
handleChange,
56-
toggleListVisibility,
57-
setOpen,
58-
] = useDropdownHooks(onChange)
51+
const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen] = useDropdown(
52+
onChange,
53+
)
5954

6055
const handleInputChange = (e) => {
6156
setInputValue(e.target.value)

src/components/elements/dropdown.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33
import styled, { css } from 'styled-components'
44
import { getCommaSeparatedNumber } from 'common/utility'
5-
import { useDropdownHooks } from 'components/hooks/dropdown-hooks'
5+
import { useDropdown } from 'components/hooks/use-dropdown'
66
import { Text } from 'components/elements/typography'
77
import { ReactComponent as Chevron } from 'images/svg/chevron-bottom.svg'
88
import device from 'themes/device'
@@ -336,9 +336,7 @@ const Dropdown = ({
336336
contract_size,
337337
...props
338338
}) => {
339-
const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility] = useDropdownHooks(
340-
onChange,
341-
)
339+
const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility] = useDropdown(onChange)
342340

343341
return (
344342
<>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Flex } from 'components/containers'
55
import { LocalizedLink, localize, Localize } from 'components/localization'
66
import { Accordion, AccordionItem, NavCard, Text, Divider } from 'components/elements'
77
import Signals from 'components/svgs/signals'
8-
import { useOutsideClick } from 'components/hooks/outside-click'
8+
import { useOutsideClick } from 'components/hooks/use-outside-click'
99
import { cfd_warning_height, deriv_status_page_url } from 'common/constants'
1010
// SVG
1111
import AffiliateIb from 'images/svg/menu/affiliate-ib.svg'

src/components/form/input.js

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,12 @@ const InputWrapper = styled.div`
4242
color: var(--color-red-1) !important;
4343
}
4444
`}
45+
${(props) =>
46+
props.disabled &&
47+
css`
48+
opacity: 0.32;
49+
pointer-events: none;
50+
`}
4551
`
4652

4753
const StyledError = styled.img`
@@ -111,21 +117,20 @@ const StyledInput = styled.input`
111117
font-size: 14px;
112118
}
113119
}
114-
&:valid {
115-
${(props) =>
116-
props.value &&
117-
css`
118-
& ~ label {
119-
transform: translate(-0.6rem, -2rem) scale(0.7);
120-
color: var(--color-black-3);
121-
@media ${device.tabletL} {
122-
top: 9px;
123-
}
124-
/* prettier-ignore */
125-
background-color: var(--color-${(props) => props.background || 'grey-1'});
120+
121+
${(props) =>
122+
props.value &&
123+
css`
124+
& ~ label {
125+
transform: translate(-0.6rem, -2rem) scale(0.7);
126+
color: var(--color-black-3);
127+
@media ${device.tabletL} {
128+
top: 9px;
126129
}
127-
`}
128-
}
130+
/* prettier-ignore */
131+
background-color: var(--color-${(props) => props.background || 'grey-1'});
132+
}
133+
`}
129134
`
130135

131136
const ErrorMessages = styled(Text)`
@@ -155,6 +160,7 @@ const Input = ({
155160
focusBorder,
156161
labelHoverColor,
157162
labelColor,
163+
disabled,
158164
id,
159165
error,
160166
background,
@@ -171,6 +177,7 @@ const Input = ({
171177
border={border}
172178
focusBorder={focusBorder}
173179
labelHoverColor={labelHoverColor}
180+
disabled={disabled}
174181
error={error}
175182
className="input-wrapper"
176183
>
@@ -179,6 +186,7 @@ const Input = ({
179186
background={background}
180187
maxLength={maxLength}
181188
error={error}
189+
disabled={disabled}
182190
height={height}
183191
{...props}
184192
ref={(ip) => (current_input = ip)}
@@ -212,6 +220,7 @@ Input.propTypes = {
212220
background: PropTypes.string,
213221
border: PropTypes.string,
214222
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
223+
disabled: PropTypes.bool,
215224
error: PropTypes.string,
216225
focusBorder: PropTypes.string,
217226
handleError: PropTypes.func,
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useState, useEffect } from 'react'
2+
import { CookieStorage } from 'common/storage'
3+
import { isNullUndefined, isJSONString } from 'common/utility'
4+
5+
export const useCookieState = (defaultValue, key, options) => {
6+
const cookie_state = new CookieStorage(key)
7+
const [value, setValue] = useState(() => {
8+
const sticky_value = cookie_state.get(key)
9+
const result = sticky_value
10+
? isJSONString(sticky_value)
11+
? JSON.parse(sticky_value)
12+
: sticky_value
13+
: defaultValue
14+
15+
return result
16+
})
17+
18+
useEffect(() => {
19+
if (isNullUndefined(value)) {
20+
cookie_state.remove()
21+
} else {
22+
cookie_state.set(key, JSON.stringify(value), options)
23+
}
24+
}, [key, value])
25+
26+
return [value, setValue]
27+
}

src/components/hooks/dropdown-hooks.js renamed to src/components/hooks/use-dropdown.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useRef, useState } from 'react'
2-
import { useOutsideClick } from 'components/hooks/outside-click'
2+
import { useOutsideClick } from 'components/hooks/use-outside-click'
33

4-
export const useDropdownHooks = (onChange) => {
4+
export const useDropdown = (onChange) => {
55
const [is_open, setOpen] = useState(false)
66
const dropdown_ref = useRef(null)
77
const nodes = new Map()
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { useState, useEffect } from 'react'
2+
import { isBrowser, isNullUndefined, isJSONString } from 'common/utility'
3+
4+
export const useLocalStorageState = (defaultValue, key) => {
5+
const [value, setValue] = useState(() => {
6+
const sticky_value = isBrowser() ? window.localStorage.getItem(key) : null
7+
return sticky_value
8+
? isJSONString(sticky_value)
9+
? JSON.parse(sticky_value)
10+
: sticky_value
11+
: defaultValue
12+
})
13+
14+
useEffect(() => {
15+
if (isBrowser()) {
16+
if (isNullUndefined(value)) {
17+
window.localStorage.removeItem(key)
18+
} else {
19+
window.localStorage.setItem(key, value)
20+
}
21+
}
22+
}, [key, value])
23+
24+
return [value, setValue]
25+
}

src/components/hooks/use-sticky-state.js

Lines changed: 0 additions & 15 deletions
This file was deleted.
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { useState, useEffect } from 'react'
2+
import { useCookieState } from './use-cookie-state'
3+
import { BinarySocketBase } from 'common/websocket/socket_base'
4+
import { getDateFromToday } from 'common/utility'
5+
6+
const WEBSITE_STATUS_COUNTRY_KEY = 'website_status'
7+
8+
export const useWebsiteStatus = () => {
9+
const [website_status, setWebsiteStatus] = useCookieState(null, WEBSITE_STATUS_COUNTRY_KEY, {
10+
expires: getDateFromToday(7),
11+
})
12+
const [is_loading, setLoading] = useState(true)
13+
14+
useEffect(() => {
15+
setLoading(true)
16+
if (!website_status) {
17+
const binary_socket = BinarySocketBase.init()
18+
19+
binary_socket.onopen = () => {
20+
binary_socket.send(JSON.stringify({ website_status: 1 }))
21+
}
22+
23+
binary_socket.onmessage = (msg) => {
24+
const response = JSON.parse(msg.data)
25+
26+
if (!response.error) {
27+
const { clients_country, crypto_config } = response.website_status
28+
setWebsiteStatus({ clients_country, crypto_config })
29+
}
30+
setLoading(false)
31+
binary_socket.close()
32+
}
33+
} else {
34+
setLoading(false)
35+
}
36+
}, [website_status])
37+
38+
return [website_status, setWebsiteStatus, is_loading]
39+
}

src/components/hooks/website-status-hooks.js

Lines changed: 0 additions & 46 deletions
This file was deleted.

src/components/layout/layout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import Loadable from '@loadable/component'
33
import PropTypes from 'prop-types'
44
import styled from 'styled-components'
5-
import useGTMData from '../hooks/gtm-data-hooks'
5+
import useGTMData from '../hooks/use-gtm-data'
66
import Copyright from './copyright'
77
import { Nav, NavStatic, NavPartners, NavInterim } from './nav'
88
import BeSquareNav from './besquare/nav'

src/components/layout/nav.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { graphql, useStaticQuery } from 'gatsby'
44
import PropTypes from 'prop-types'
55
import styled from 'styled-components'
66
import PlatformsDropdown from '../custom/platforms-dropdown'
7-
import { useOutsideClick } from 'components/hooks/outside-click'
7+
import { useOutsideClick } from 'components/hooks/use-outside-click'
88
import { LocalizedLink, localize, LanguageSwitcher } from 'components/localization'
99
import { Button, LinkButton } from 'components/form'
1010
import { Container, Show, Flex } from 'components/containers'

src/components/localization/language-dropdown.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import { graphql, useStaticQuery } from 'gatsby'
33
import PropTypes from 'prop-types'
44
import styled, { keyframes } from 'styled-components'
5-
import { useOutsideClick } from 'components/hooks/outside-click'
5+
import { useOutsideClick } from 'components/hooks/use-outside-click'
66
import { QueryImage, Text } from 'components/elements'
77
import { ReactComponent as Chevron } from 'images/svg/chevron-bottom.svg'
88
import device from 'themes/device'

0 commit comments

Comments
 (0)