binary-com · Jun 9, 2021 · May 11, 2021 · May 16, 2021 · May 17, 2021 · May 17, 2021
@@ -11,7 +11,7 @@ jobs:
     steps:
       - name: Add comment to PR
         id: loading_comment_to_pr
-        uses: marocchino/sticky-pull-request-comment@v1
+        uses: marocchino/sticky-pull-request-comment@v2
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           number: ${{ github.event.issue.number }}

@@ -52,6 +52,8 @@ module.exports = {
                     '/landing/**',
                     '/**/landing',
                     '/**/landing/**',
+                    '/endpoint',
+                    '/**/endpoint',
                 ],
                 serialize: ({ site, allSitePage }) =>
                     allSitePage.edges.map((edge) => {
@@ -173,11 +175,7 @@ module.exports = {
                     {
                         userAgent: '*',
                         allow: '/',
-                        disallow: [
-                            '/404/',
-                            '/homepage/',
-                            '/landing/',
-                        ],
+                        disallow: ['/404/', '/homepage/', '/landing/', '/endpoint/'],
                     },
                 ],
             },

@@ -102,19 +102,15 @@ exports.onCreatePage = ({ page, actions }) => {
         const localized_path = is_default ? page.path : `${path}${page.path}`
         const is_production = process.env.GATSBY_ENV === 'production'
         const careers_regex = /^[a-z-]+\/careers\//g
-        // TODO: this is a temporary workaround to remove a/b testing page
-        const homepage_regex = /homepage/g
-        // TODO: this is a temporary workaround to remove a/b testing page
-        const amp_regex = /amp/g
+        const endpoint_regex = /^[a-z-]+\/endpoint\//g
         const offline_plugin_regex = /^[a-z-]+\/offline-plugin-app-shell-fallback/g
 
         if (is_production) {
             if (path === 'ach') return
         }
         if (
             careers_regex.test(localized_path) ||
-            homepage_regex.test(localized_path) ||
-            amp_regex.test(localized_path) ||
+            endpoint_regex.test(localized_path) ||
             offline_plugin_regex.test(localized_path)
         )
             return

@@ -12,6 +12,7 @@ const domain_url =
         ? window.location.hostname
         : deriv_com_url
 
+// URL
 export const deriv_app_id = domain_url === deriv_com_url ? deriv_com_app_id : deriv_me_app_id
 export const deriv_app_url = `https://app.${domain_url}`
 export const deriv_developer_url = `https://developers.${domain_url}`
@@ -74,6 +75,7 @@ export const localized_link_url = Object.freeze({
     smart_trader: smarttrader_url,
     zoho: zoho_url,
 })
+export const default_server_url = 'green.binaryws.com'
 
 export const fb_url = 'https://www.facebook.com/derivdotcom'
 export const fb_url_career = 'https://www.facebook.com/derivcareers'

@@ -2,7 +2,7 @@ import Cookies from 'js-cookie'
 import extend from 'extend'
 import { deriv_cookie_domain, deriv_app_languages } from './constants'
 
-export const trimSpaces = (value) => value.trim()
+export const trimSpaces = (value) => value?.trim()
 
 export const toISOFormat = (date) => {
     if (date instanceof Date) {
@@ -182,3 +182,23 @@ export const nonENLangUrlReplace = (current_path) => {
     const path_with_or_without_slash = /\/.+?(\/)|(\/[a-zA-Z'-]+)/u
     return current_path.replace(path_with_or_without_slash, '')
 }
+export const getDateFromToday = (num_of_days) => {
+    const today = new Date()
+    const end_date = new Date(today.getFullYear(), today.getMonth(), today.getDate() + num_of_days)
+
+    return end_date
+}
+
+export const isNullUndefined = (value) => value === null || typeof value === 'undefined'
+
+export const isObject = (value) => typeof value === 'object'
+
+export const isJSONString = (value) => {
+    try {
+        return JSON.parse(value) && !!value
+    } catch (e) {
+        return false
+    }
+}
+
+export const parseJSONString = (value) => (isJSONString(value) ? JSON.parse(value) : value)
@@ -2,15 +2,44 @@ import { localize } from 'components/localization'
 
 const validation_regex = {
     email: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,63}$/,
+    url: /^[\w|\-|.]+$/,
+    alphabetic: /^[a-zA-Z]+$/,
+    number: /^\d+$/,
 }
 
 const validation = {
     // Validation will return a string for error message
-    email: (input) => {
+    email: (input, message) => {
+        if (!validation_regex.email.test(input)) {
+            return message ? message : localize('Email is required')
+        } else {
+            return null
+        }
+    },
+    required: (input, message) => {
         if (!input) {
-            return localize('Email is required')
-        } else if (!validation_regex.email.test(input)) {
-            return localize('Invalid email address')
+            return message ? message : localize('This field is required')
+        } else {
+            return null
+        }
+    },
+    url: (input, message) => {
+        if (!validation_regex.url.test(input)) {
+            return message ? message : localize('Please enter a valid URL format')
+        } else {
+            return null
+        }
+    },
+    number: (input, message) => {
+        if (!validation_regex.number.test(input)) {
+            return message ? message : localize('Please enter a valid number')
+        } else {
+            return null
+        }
+    },
+    alphabetic: (input, message) => {
+        if (!validation_regex.alphabetic.test(input)) {
+            return message ? message : localize('Please enter only alphabetic characters')
         } else {
             return null
         }

@@ -7,7 +7,9 @@
  *
  */
 import { isBrowser } from '../utility'
-const domain_config = {
+import { default_server_url } from '../constants'
+
+export const domain_config = {
     production: [
         {
             hostname: 'deriv.com',
@@ -72,7 +74,7 @@ const getSocketURL = () => {
         server_url = window.localStorage.getItem('config.server_url')
     }
     if (!server_url) {
-        server_url = 'green.binaryws.com'
+        server_url = default_server_url
     }
     return `wss://${server_url}/websockets/v3`
 }

@@ -60,7 +60,8 @@ class Signup extends Component {
     }
 
     validateEmail = (email) => {
-        const error_message = validation.email(email) || this.state.submit_error_msg
+        const error_message =
+            validation.required(email) || validation.email(email) || this.state.submit_error_msg
 
         if (this.state.submit_error_msg) {
             this.setState({

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import styled, { css } from 'styled-components'
 import PropTypes from 'prop-types'
 import { Arrow, BottomLabel, DropdownContainer, ItemList, StyledLabel } from './dropdown'
-import { useDropdownHooks } from 'components/hooks/dropdown-hooks'
+import { useDropdown } from 'components/hooks/use-dropdown'
 import device from 'themes/device'
 import { Flex } from 'components/containers'
 
@@ -48,14 +48,9 @@ const DropdownSearch = ({
 }) => {
     const [input_value, setInputValue] = useState('')
     const [dropdown_items, setDropdownItems] = useState([...items])
-    const [
-        is_open,
-        dropdown_ref,
-        nodes,
-        handleChange,
-        toggleListVisibility,
-        setOpen,
-    ] = useDropdownHooks(onChange)
+    const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen] = useDropdown(
+        onChange,
+    )
 
     const handleInputChange = (e) => {
         setInputValue(e.target.value)

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
 import { getCommaSeparatedNumber } from 'common/utility'
-import { useDropdownHooks } from 'components/hooks/dropdown-hooks'
+import { useDropdown } from 'components/hooks/use-dropdown'
 import { Text } from 'components/elements/typography'
 import { ReactComponent as Chevron } from 'images/svg/chevron-bottom.svg'
 import device from 'themes/device'
@@ -336,9 +336,7 @@ const Dropdown = ({
     contract_size,
     ...props
 }) => {
-    const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility] = useDropdownHooks(
-        onChange,
-    )
+    const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility] = useDropdown(onChange)
 
     return (
         <>

@@ -1,11 +1,11 @@
 import React, { useState, useRef, useEffect } from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
+import { useOutsideClick } from 'components/hooks/use-outside-click'
 import { Flex } from 'components/containers'
 import { LocalizedLink, localize, Localize } from 'components/localization'
 import { Accordion, AccordionItem, NavCard, Text, Divider } from 'components/elements'
 import Signals from 'components/svgs/signals'
-import { useOutsideClick } from 'components/hooks/outside-click'
 import { deriv_status_page_url } from 'common/constants'
 // SVG
 import AffiliateIb from 'images/svg/menu/affiliate-ib.svg'

@@ -42,6 +42,12 @@ const InputWrapper = styled.div`
                 color: var(--color-red-1) !important;
             }
         `}
+    ${(props) =>
+        props.disabled &&
+        css`
+            opacity: 0.32;
+            pointer-events: none;
+        `}
 `
 
 const StyledError = styled.img`
@@ -112,20 +118,32 @@ const StyledInput = styled.input`
         }
     }
     &:valid {
-        ${(props) =>
-            props.value &&
-            css`
-                & ~ label {
-                    transform: translate(-0.6rem, -2rem) scale(0.7);
-                    color: var(--color-black-3);
-                    @media ${device.tabletL} {
-                        top: 9px;
-                    }
-                    /* prettier-ignore */
-                    background-color: var(--color-${(props) => props.background || 'grey-1'});
-                }
-            `}
+        & ~ label {
+            transform: translate(-0.6rem, -2rem) scale(0.7);
+            color: var(--color-black-3);
+            @media ${device.tabletL} {
+                top: 9px;
+            }
+
+            /* prettier-ignore */
+            background-color: var(--color-${(props) => props.background || 'grey-1'});
+        }
     }
+
+    ${(props) =>
+        !!props.value &&
+        css`
+            & ~ label {
+                transform: translate(-0.6rem, -2rem) scale(0.7);
+                color: var(--color-black-3);
+                @media ${device.tabletL} {
+                    top: 9px;
+                }
+
+                /* prettier-ignore */
+                background-color: var(--color-${(props) => props.background || 'grey-1'});
+            }
+        `}
 `
 
 const ErrorMessages = styled(Text)`
@@ -155,6 +173,7 @@ const Input = ({
     focusBorder,
     labelHoverColor,
     labelColor,
+    disabled,
     id,
     error,
     background,
@@ -171,6 +190,7 @@ const Input = ({
                 border={border}
                 focusBorder={focusBorder}
                 labelHoverColor={labelHoverColor}
+                disabled={disabled}
                 error={error}
                 className="input-wrapper"
             >
@@ -179,6 +199,7 @@ const Input = ({
                     background={background}
                     maxLength={maxLength}
                     error={error}
+                    disabled={disabled}
                     height={height}
                     {...props}
                     ref={(ip) => (current_input = ip)}
@@ -212,6 +233,7 @@ Input.propTypes = {
     background: PropTypes.string,
     border: PropTypes.string,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    disabled: PropTypes.bool,
     error: PropTypes.string,
     focusBorder: PropTypes.string,
     handleError: PropTypes.func,

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react'
+import { CookieStorage } from 'common/storage'
+import { isNullUndefined, parseJSONString } from 'common/utility'
+
+export const useCookieState = (defaultValue, key, options) => {
+    const cookie_state = new CookieStorage(key)
+    const [value, setValue] = useState(() => {
+        const sticky_value = cookie_state.get(key)
+        const result = sticky_value ? parseJSONString(sticky_value) : defaultValue
+
+        return result
+    })
+
+    useEffect(() => {
+        if (isNullUndefined(value)) {
+            cookie_state.remove()
+        } else {
+            cookie_state.set(key, JSON.stringify(value), options)
+        }
+    }, [key, value])
+
+    return [value, setValue]
+}
@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react'
-import { useOutsideClick } from 'components/hooks/outside-click'
+import { useOutsideClick } from 'components/hooks/use-outside-click'
 
-export const useDropdownHooks = (onChange) => {
+export const useDropdown = (onChange) => {
     const [is_open, setOpen] = useState(false)
     const dropdown_ref = useRef(null)
     const nodes = new Map()

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+import { isBrowser, isNullUndefined, parseJSONString } from 'common/utility'
+
+export const useLocalStorageState = (defaultValue, key) => {
+    const [value, setValue] = useState(() => {
+        const sticky_value = isBrowser() ? window.localStorage.getItem(key) : null
+        return sticky_value ? parseJSONString(sticky_value) : defaultValue
+    })
+
+    useEffect(() => {
+        if (isBrowser()) {
+            if (isNullUndefined(value)) {
+                window.localStorage.removeItem(key)
+            } else {
+                window.localStorage.setItem(key, value)
+            }
+        }
+    }, [key, value])
+
+    return [value, setValue]
+}