binary-com · habib-deriv · Feb 1, 2022 · Jan 31, 2022 · Jan 26, 2022 · Jan 26, 2022
@@ -6,4 +6,4 @@
     "src/**/*.{js,jsx,ts,tsx,json,md}": [
         "prettier --write"
     ]
-}
+}
@@ -33,6 +33,7 @@ module.exports = {
             options: {
                 failOnError: true,
                 base64Width: 20,
+                forceBase64Format: 'webp',
                 stripMetadata: true,
                 defaultQuality: 50,
             },

@@ -5,34 +5,34 @@
     "author": "Deriv",
     "dependencies": {
         "@artsy/fresnel": "^3.2.1",
-        "@directus/gatsby-source-directus": "^9.5.0",
+        "@directus/gatsby-source-directus": "^9.4.2",
         "@livechat/customer-sdk": "^3.1.0",
         "@loadable/component": "^5.15.2",
-        "@svgr/webpack": "^6.2.0",
+        "@svgr/webpack": "^6.1.2",
         "commander": "^8.3.0",
-        "crc-32": "^1.2.1",
-        "embla-carousel-react": "^6.1.1",
+        "crc-32": "^1.2.0",
+        "embla-carousel-react": "^6.0.2",
         "eslint-import-resolver-node": "^0.3.6",
         "extend": "^3.0.2",
         "formik": "^2.2.9",
-        "gatsby": "^4.6.0",
+        "gatsby": "^4.4.0",
         "gatsby-background-image": "^1.6.0",
         "gatsby-plugin-anchor-links": "^1.2.1",
-        "gatsby-plugin-google-tagmanager": "^4.6.0",
-        "gatsby-plugin-image": "^2.6.0",
-        "gatsby-plugin-manifest": "^4.6.0",
+        "gatsby-plugin-google-tagmanager": "^4.4.0",
+        "gatsby-plugin-image": "^2.4.0",
+        "gatsby-plugin-manifest": "^4.4.0",
         "gatsby-plugin-page-progress": "^2.2.1",
-        "gatsby-plugin-preact": "^6.6.0",
-        "gatsby-plugin-react-helmet": "^5.6.0",
-        "gatsby-plugin-robots-txt": "^1.7.0",
-        "gatsby-plugin-sharp": "^4.6.0",
-        "gatsby-plugin-sitemap": "^5.6.0",
+        "gatsby-plugin-preact": "^6.5.0",
+        "gatsby-plugin-react-helmet": "^5.4.0",
+        "gatsby-plugin-robots-txt": "^1.6.14",
+        "gatsby-plugin-sharp": "^4.4.0",
+        "gatsby-plugin-sitemap": "^5.4.0",
         "gatsby-plugin-svgr": "^3.0.0-beta.0",
         "gatsby-plugin-use-query-params": "^1.0.1",
-        "gatsby-source-filesystem": "^4.6.0",
-        "gatsby-transformer-sharp": "^4.6.0",
+        "gatsby-source-filesystem": "^4.4.0",
+        "gatsby-transformer-sharp": "^4.4.0",
         "gbimage-bridge": "^0.2.1",
-        "i18next": "^21.6.9",
+        "i18next": "^21.6.5",
         "js-cookie": "^2.2.1",
         "lottie-web": "^5.8.1",
         "match-sorter": "^6.3.1",
@@ -49,21 +49,21 @@
         "react-perfect-scrollbar": "^1.5.8",
         "use-query-params": "^1.2.3",
         "web-push-notifications": "^3.24.0",
-        "webpack": "^5.67.0"
+        "webpack": "^5.65.0"
     },
     "devDependencies": {
-        "@storybook/addon-actions": "^6.4.14",
-        "@storybook/addon-essentials": "^6.4.14",
-        "@storybook/addon-links": "^6.4.14",
-        "@storybook/builder-webpack5": "^6.4.14",
-        "@storybook/manager-webpack5": "^6.4.14",
-        "@storybook/react": "^6.4.14",
-        "@types/node": "^17.0.12",
+        "@storybook/addon-actions": "^6.4.9",
+        "@storybook/addon-essentials": "^6.4.9",
+        "@storybook/addon-links": "^6.4.9",
+        "@storybook/builder-webpack5": "^6.4.9",
+        "@storybook/manager-webpack5": "^6.4.9",
+        "@storybook/react": "^6.4.9",
+        "@types/node": "^17.0.8",
         "@types/react": "^17.0.38",
         "@types/react-dom": "^17.0.11",
-        "@types/styled-components": "^5.1.21",
-        "@typescript-eslint/eslint-plugin": "^5.10.1",
-        "@typescript-eslint/parser": "^5.10.1",
+        "@types/styled-components": "^5.1.19",
+        "@typescript-eslint/eslint-plugin": "^5.9.0",
+        "@typescript-eslint/parser": "^5.9.0",
         "babel-eslint": "10.1.0",
         "babel-plugin-styled-components": "^2.0.2",
         "eslint": "^7.32.0",
@@ -72,22 +72,21 @@
         "eslint-plugin-react": "^7.28.0",
         "eslint-webpack-plugin": "^3.1.1",
         "gatsby-plugin-eslint": "^4.0.2",
-        "gatsby-plugin-styled-components": "^5.6.0",
+        "gatsby-plugin-styled-components": "^5.4.0",
         "gh-pages": "^3.2.3",
         "husky": "^7.0.4",
-        "lint-staged": "^12.3.1",
-        "minify-lint-staged": "^0.0.6",
+        "lint-staged": "^12.1.5",
         "npm-force-resolutions": "0.0.10",
         "prettier": "^2.5.1",
-        "query-string": "^7.1.0",
+        "query-string": "^7.0.1",
         "styled-components": "^5.3.3",
-        "stylelint": "^14.3.0",
+        "stylelint": "^14.2.0",
         "stylelint-config-prettier": "^9.0.3",
         "stylelint-config-standard": "^24.0.0",
         "stylelint-config-styled-components": "^0.1.1",
         "stylelint-processor-styled-components": "^1.10.0",
-        "stylelint-webpack-plugin": "^3.1.1",
-        "typescript": "^4.5.5"
+        "stylelint-webpack-plugin": "^3.1.0",
+        "typescript": "^4.5.4"
     },
     "keywords": [
         "deriv",

@@ -8,7 +8,7 @@ import CssGrid, { CssGridColumn } from './css-grid'
 import SEO from './seo'
 import Show from './show'
 import Box from './box'
-import { Desktop, Mobile, EU, UK, ROW, NonEU, NonUK, UKEU } from './visibility'
+import { Desktop, Mobile, EU, UK, ROW, NonEU, NonUK } from './visibility'
 
 export {
     Container,
@@ -26,7 +26,6 @@ export {
     Mobile,
     EU,
     UK,
-    UKEU,
     ROW,
     NonUK,
     NonEU,

@@ -64,20 +64,6 @@ const deviceRenderer = (): boolean => {
     return is_loaded
 }
 
-export const getCountryRule = () => {
-    const { is_eu_domain, is_uk_domain } = domainBasedCheck()
-    const { is_eu_country, is_uk_country } = React.useContext<StoreDataType>(DerivStore)
-
-    const is_eu = (is_eu_country || is_eu_domain) && !is_uk_country
-    const is_uk = is_uk_country || is_uk_domain
-    const is_non_uk = !is_uk
-    const is_non_eu = !is_eu
-    const is_eu_uk = !(!is_eu && !is_uk)
-    const is_row = !is_eu_uk
-
-    return { is_eu, is_uk, is_non_uk, is_non_eu, is_eu_uk, is_row }
-}
-
 export const Desktop = ({
     children,
     breakpoint = DEFAULT_BREAKPOINT,
@@ -110,37 +96,47 @@ export const Mobile = ({ children, breakpoint = DEFAULT_BREAKPOINT }: Responsive
 }
 
 export const EU = ({ children }: ResponsiveContainerProps) => {
-    const { is_eu } = getCountryRule()
+    const { is_eu_domain } = domainBasedCheck()
+    const { is_eu_country } = React.useContext<StoreDataType>(DerivStore)
+
+    const is_eu = is_eu_country || is_eu_domain
 
     return is_eu ? <>{children}</> : null
 }
 
 export const NonEU = ({ children }: ResponsiveContainerProps) => {
-    const { is_non_eu } = getCountryRule()
+    const { is_eu_domain } = domainBasedCheck()
+    const { is_eu_country } = React.useContext<StoreDataType>(DerivStore)
+
+    const is_eu = is_eu_domain || is_eu_country
 
-    return is_non_eu ? <>{children}</> : null
+    return !is_eu ? <>{children}</> : null
 }
 
 export const UK = ({ children }: ResponsiveContainerProps) => {
-    const { is_uk } = getCountryRule()
+    const { is_uk_domain } = domainBasedCheck()
+    const { is_uk_country } = React.useContext<StoreDataType>(DerivStore)
+
+    const is_uk = is_uk_country || is_uk_domain
 
     return is_uk ? <>{children}</> : null
 }
 
 export const NonUK = ({ children }: ResponsiveContainerProps) => {
-    const { is_non_uk } = getCountryRule()
-
-    return is_non_uk ? <>{children}</> : null
-}
+    const { is_uk_domain } = domainBasedCheck()
+    const { is_uk_country } = React.useContext<StoreDataType>(DerivStore)
 
-export const UKEU = ({ children }: ResponsiveContainerProps) => {
-    const { is_eu_uk } = getCountryRule()
+    const is_uk = is_uk_domain || is_uk_country
 
-    return is_eu_uk ? <>{children}</> : null
+    return !is_uk ? <>{children}</> : null
 }
 
 export const ROW = ({ children }: ResponsiveContainerProps) => {
-    const { is_row } = getCountryRule()
+    const { is_uk_domain, is_eu_domain } = domainBasedCheck()
+    const { is_uk_country, is_eu_country } = React.useContext<StoreDataType>(DerivStore)
+
+    const is_uk = is_uk_country || is_uk_domain
+    const is_eu = is_eu_domain || is_eu_country
 
-    return is_row ? <>{children}</> : null
+    return !is_eu && !is_uk ? <>{children}</> : null
 }
@@ -29,12 +29,12 @@ const StyledSectionContainer = styled(Box).attrs({ as: 'section' })`
     background-color: var(--color-white);
 
     @media ${device.tabletL} {
-        padding: 0 0 40px;
+        padding: 41px 0 40px;
     }
 `
 const Wrapper = styled.div`
     border-radius: 8px;
-    background: linear-gradient(241.92deg, #d74b56 12.96%, #d1632f 86.33%);
+    background-image: linear-gradient(73deg, #ff6444, #ff444f);
     background-repeat: round;
     position: relative;
     display: flex;
@@ -374,7 +374,7 @@ const SignupPublic = ({
                                             background="white"
                                             tabletBackground="green-1"
                                             inputColor="grey-5"
-                                            inputBackground="white"
+                                            inputBackground="grey-8"
                                             labelFocusColor="grey-7"
                                             labelColor="black-3"
                                             labelSize="16px"
@@ -387,6 +387,7 @@ const SignupPublic = ({
                                             autoFocus={autofocus}
                                             autoComplete="off"
                                             required
+                                            border="unset"
                                             height="40px"
                                             focusBorder="var(--color-grey-7)"
                                         />
@@ -411,7 +412,7 @@ const SignupPublic = ({
                                     handleChangeCheckbox={handleChange}
                                 />
                                 <SocialWrapper jc="unset" ai="center">
-                                    <SignInText>{localize('Or sign up with')}</SignInText>
+                                    <SignInText>{localize('Or sign in with')}</SignInText>
                                     <SocialButton
                                         onClick={handleSocialSignup}
                                         provider="google"

@@ -139,10 +139,12 @@ export const DMT5Card = ({ is_selected, is_ppc_redirect, word_break_cover }) =>
     <StyledLink aria_label="DMT5" to={is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/'}>
         <Card
             cover_background="var(--color-green)"
-            cover_content={localize('Discover Deriv MT5 now')}
-            title={localize('Deriv MT5')}
+            cover_content={localize('Discover DMT5 now')}
+            title={localize('DMT5')}
             Icon={() => <StyledDmt5 src={DMT5} alt="" width="72" height="72" />}
-            content={[localize('Trade on Deriv MT5, the all-in-one CFD trading platform.')]}
+            content={[
+                localize('Trade on Deriv MT5 (DMT5), the all-in-one FX and CFD trading platform.'),
+            ]}
             is_inline_icon
             min_height="12.4rem"
             is_selected={is_selected}
@@ -312,12 +314,12 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
             <Flex direction="column" wrap="wrap" jc="flex-start">
                 <StyledText>{localize('Trading platforms')}</StyledText>
                 <NavCard
-                    aria_label="Deriv MT5"
+                    aria_label="DMT5"
                     icon={() => <img src={DMT5} alt="" width="32" height="32" />}
                     content={
-                        <Localize translate_text="Trade on Deriv MT5, the all-in-one CFD trading platform." />
+                        <Localize translate_text="Trade on Deriv MT5 (DMT5), the all-in-one FX and CFD trading platform." />
                     }
-                    title={<Localize translate_text="Deriv MT5" />}
+                    title={<Localize translate_text="DMT5" />}
                     onClick={onClick}
                     to={is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/'}
                 />

@@ -14,26 +14,10 @@ const StyledBackground = styled(BackgroundImage)`
     }
 `
 
-export const Background = ({
-    children,
-    dark,
-    data,
-    fluid,
-    is_unstyled = false,
-    style,
-    ...props
-}) => {
+export const Background = ({ children, data, fluid, style, dark, ...props }) => {
     const image = getImage(data)
     const bgImage = convertToBgImage(image)
 
-    if (is_unstyled) {
-        return (
-            <BackgroundImage Tag="div" {...bgImage} {...props}>
-                {children}
-            </BackgroundImage>
-        )
-    }
-
     return (
         <StyledBackground Tag="div" style={style} dark={dark} fluid={fluid} {...bgImage} {...props}>
             {children}
@@ -47,7 +31,7 @@ Background.propTypes = {
     dark: PropTypes.string,
     data: PropTypes.object,
     fluid: PropTypes.array,
-    is_unstyled: PropTypes.bool,
+    img_name: PropTypes.string,
     style: PropTypes.object,
 }
 export default Background
@@ -324,8 +324,8 @@ const FlexHover = styled(Flex)`
 const SvgWrapper = styled.div`
     & > svg,
     img {
-        width: 32px;
-        height: 32px;
+        width: 33px;
+        height: 33px;
         margin-right: 1.6rem;
 
         @media ${device.mobileL} {
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,4 +6,4 @@ @@
         "src/**/*.{js,jsx,ts,tsx,json,md}": [
             "prettier --write"
         ]
-    }
+    }