binary-com · suthesank · Feb 10, 2022 · Jan 11, 2022 · Jan 11, 2022 · Jan 11, 2022
@@ -6,4 +6,4 @@
     "src/**/*.{js,jsx,ts,tsx,json,md}": [
         "prettier --write"
     ]
-}
+}
@@ -36,7 +36,13 @@
                 ]
             }
         ],
-        "value-keyword-case": null
+        "value-keyword-case": null,
+        "declaration-block-no-redundant-longhand-properties": null,
+        "alpha-value-notation": null,
+        "color-function-notation": null,
+        "shorthand-property-no-redundant-values": null,
+        "keyframes-name-pattern": null,
+        "selector-class-pattern": null
     },
     "syntax": "scss"
 }
@@ -28,6 +28,7 @@ Deriv.com - An online trading platform that offers a wide selection of derivativ
 -   [File structures](documents/file-structures.md)
 -   [GTM workflow](documents/gtm-workflow.md) - Contains Google Tag Manager workflow and additional information
 -   [Translation workflow](documents/translation-workflow.md) - Contains general workflow and commands required for our translation process
+-   [Typescript guidelines](documents/typescript-guidelines.md) - Contains Typescript guidelines and conventions for this project
 
 ## Pre-installation
 
@@ -73,7 +74,7 @@ Moreover, having these extensions will help you to speed up the development proc
     Create two files `.env.development` and `.env.production` inside your project root directory.
 
     Then check your **lastpass** you'll see a shared item named **Deriv-com Env Variables** copy the variables, they look like this:
-    
+
     ```sh
     DIRECTUS_AUTH_TOKEN=********************************
     GATSBY_DIRECTUS_AUTH_TOKEN=********************************

@@ -0,0 +1,133 @@
+# TS Conventions in Deriv-com (Work-in-progress)
+
+Good reads:
+
+-   https://www.sitepoint.com/react-with-typescript-best-practices/
+-   https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example
+
+### When to use .tsx over .ts
+
+-   A general rule of thumb would be that if the file either imports `react` or uses `jsx` syntax, use `.tsx`.
+-   If not, `.ts` will do.
+
+### ⚠️ Avoid typing the return type
+
+-   We can allow Typescript to infer the return types of React components for us.
+
+### Unions Over Enums
+
+> Unlike most TypeScript features, [enum] is not a type-level addition to JavaScript but something added to the language and runtime. Because of this, it’s a feature which you should know exists, but maybe hold off on using unless you are sure.
+> —TypeScript Handbook
+
+Union types and enums tend to occupy the same space in React in that they both enforce that a particular prop must be one value of a given set. However, we recommend union types over enums for a number of reasons:
+
+-   They are compiler-only constructs, so they won't end up in your application's JS bundle.
+-   They are extensible to other union types.
+-   They are less verbose.
+
+```jsx
+// Avoid enums:
+enum ButtonKind {
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+}
+
+// Prefer union types:
+type ButtonKind = "primary" | "secondary";
+
+// Extensible to other union types:
+type ExtendedButtonKind = ButtonKind | "tertiary";
+```
+
+### Type vs. Interface
+
+Use type when you might need a union or intersection:
+
+```jsx
+type Foo = number | { someProperty: number }
+```
+
+Use interface when you want extends or implements e.g.
+
+```jsx
+interface Foo {
+    foo: string;
+}
+interface FooBar extends Foo {
+    bar: string;
+}
+class X implements FooBar {
+    foo: string
+    bar: string
+}
+```
+
+> Use **Type** until you need an **Interface**
+
+### ⚠️ Type naming conventions
+
+-   When typing props, it should follow the component name in PascalCase along with a `Props` at the end of it, e.g. `type ContainerProps`
+-   If it's anything else, it should follow the variable name in PascalCase along with a `Type` at the end of it, e.g. `type TradingType`
+
+### Extending Native HTML Elements
+
+TypeScript ships with tons of helper types that cut down boilerplate for common React idioms. These types are particularly useful when extending native HTML elements like `button` or `input`, where you’ll want to maintain the component's original props to ensure extensibility.
+
+Start by implementing a `Button` component in the two most important use-cases: clicking the button and defining its text. When typing everything manually, you get the following result:
+
+```jsx
+import React from 'react'
+
+interface Props {
+    children: React.ReactNode;
+    onClick: () => void;
+}
+
+const Button = ({ children, onClick }: Props) => {
+    return <button onClick={onClick}>{children}</button>
+}
+```
+
+We can use the helper type `React.PropsWithChildren` here, which automatically adds the children prop to the component:
+
+```jsx
+import React from 'react'
+
+type Props = React.PropsWithChildren<{
+    onClick: () => void,
+}>
+
+const Button = ({ children, onClick }: Props) => {
+    return <button onClick={onClick}>{children}</button>
+}
+```
+
+`ComponentPropsWithoutRef` is a generic type that supplies props for built-in React handlers and native HTML attributes. By passing in `"button"` as the template, you specify that the component is extending the HTML `button` element.
+
+```jsx
+import React from 'react'
+
+type Props = React.ComponentPropsWithoutRef<'button'>
+
+const Button = ({ children, onClick, type }: Props) => {
+    return (
+        <button onClick={onClick} type={type}>
+            {children}
+        </button>
+    )
+}
+```
+
+If additional props are needed, swap the `type` for an `interface`:
+
+```jsx
+import React from 'react'
+
+interface Props extends React.ComponentPropsWithoutRef<'button'> {
+    specialProp: number;
+}
+
+const Button = ({ children, onClick, type, specialProp }: Props) => {
+    // ...
+}
+```
@@ -1,5 +1,4 @@
 import React from 'react'
-import NProgress from 'nprogress'
 import { Pushwoosh } from 'web-push-notifications'
 import { WrapPagesWithLocaleContext } from './src/components/localization'
 import { isProduction, isLive, isLocalHost } from './src/common/websocket/config'
@@ -112,13 +111,9 @@ export const onInitialClientRender = () => {
             document.head.appendChild(jipt)
         }
     }
-
-    NProgress.done()
 }
 
 export const onClientEntry = () => {
-    NProgress.start()
-
     const is_gtm_test_domain = window.location.hostname === gtm_test_domain
     const push_woosh = new Pushwoosh()
     if (isLive()) {
@@ -149,12 +144,7 @@ export const onClientEntry = () => {
     checkLiveChatRedirection()
 }
 
-export const onPreRouteUpdate = () => {
-    NProgress.start()
-}
-
 export const onRouteUpdate = () => {
-    NProgress.done()
     checkDomain()
 
     const dataLayer = window.dataLayer
@@ -177,7 +167,7 @@ export const onRouteUpdate = () => {
                 userId: client_information.user_id,
             }),
         })
-    }, 50)
+    }, 1500)
 }
 
 export const wrapPageElement = WrapPagesWithLocaleContext
@@ -3,18 +3,19 @@ require('dotenv').config({
     path: `.env.${process.env.NODE_ENV}`,
 })
 
+const site_url = 'https://deriv.com'
+
 module.exports = {
     // pathPrefix: process.env.PATH_PREFIX || '/deriv-com/', // For non CNAME GH-pages deployment
     flags: {
         FAST_DEV: true,
-        PRESERVE_WEBPACK_CACHE: true,
     },
     siteMetadata: {
         title: 'Deriv',
         description:
             'Deriv.com gives everyone an easy way to participate in the financial markets. Trade with as little as $1 USD on major currencies, stocks, indices, and commodities.',
         author: 'Deriv.com',
-        siteUrl: 'https://deriv.com',
+        siteUrl: site_url,
     },
     plugins: [
         'gatsby-plugin-react-helmet',
@@ -32,7 +33,6 @@ module.exports = {
             options: {
                 failOnError: true,
                 base64Width: 20,
-                forceBase64Format: 'webp',
                 stripMetadata: true,
                 defaultQuality: 50,
             },
@@ -41,7 +41,7 @@ module.exports = {
         {
             resolve: 'gatsby-plugin-sitemap',
             options: {
-                exclude: [
+                excludes: [
                     '/404',
                     '/**/404.html',
                     '/**/404',
@@ -73,55 +73,55 @@ module.exports = {
                     '/**/endpoint',
                     '/signup-success',
                     '/**/signup-success',
+                    '/academy/blog/posts/preview',
                 ],
-                serialize: ({ site, allSitePage }) =>
-                    allSitePage.edges.map((edge) => {
-                        const ignore_localized_regex = /careers|besquare|livechat|academy/
-                        const path = edge.node.path
-                        let priority = 0.7
-                        const languages = Object.keys(language_config)
-                        if (path === '/') {
-                            priority = 1.0
-                        } else if (path.match(/dbot|dtrader|dmt5|story/)) {
-                            priority = 1.0
-                        } else {
-                            languages.forEach((lang) => {
-                                if (path === `/${lang}/`) {
-                                    priority = 1.0
-                                }
-                            })
-                        }
-
-                        const path_array = path.split('/')
-                        const current_lang = path_array[1]
-                        const check_lang = current_lang.replace('-', '_')
-                        let current_page = path
+                query: `
+                {
+                    allSitePage {
+                      nodes {
+                        path
+                      }
+                    }
+                }
+                `,
+                resolveSiteUrl: () => site_url,
+                resolvePages: ({ allSitePage: { nodes: allPages } }) => {
+                    return allPages.map((page) => {
+                        return { ...page }
+                    })
+                },
+                serialize: ({ path }) => {
+                    const ignore_localized_regex = /careers|besquare|livechat|academy/
+                    const languages = Object.keys(language_config)
 
-                        if (languages.includes(check_lang)) {
-                            path_array.splice(1, 1)
-                            current_page = path_array.join('/')
-                        }
+                    const path_array = path.split('/')
+                    const current_lang = path_array[1]
+                    const check_lang = current_lang.replace('-', '_')
+                    let current_page = path
 
-                        languages.push('x-default')
-                        languages.splice(languages.indexOf('ach'), 1)
-                        const ignore_localized = current_page.match(ignore_localized_regex)
-                        const links = languages.map((locale) => {
-                            if (locale !== 'ach' && locale) {
-                                const replaced_locale = locale.replace('_', '-')
-                                const is_default = locale === 'en' || locale === 'x-default'
-                                const href_locale = is_default ? '' : `/${replaced_locale}`
-                                const href = `${site.siteMetadata.siteUrl}${href_locale}${current_page}`
-                                return { lang: replaced_locale, url: href }
-                            }
-                        })
+                    if (languages.includes(check_lang)) {
+                        path_array.splice(1, 1)
+                        current_page = path_array.join('/')
+                    }
 
-                        return {
-                            url: site.siteMetadata.siteUrl + edge.node.path,
-                            changefreq: `monthly`,
-                            priority,
-                            links: !ignore_localized ? links : null,
+                    languages.push('x-default')
+                    languages.splice(languages.indexOf('ach'), 1)
+                    const ignore_localized = current_page.match(ignore_localized_regex)
+                    const links = languages.map((locale) => {
+                        if (locale !== 'ach' && locale) {
+                            const replaced_locale = locale.replace('_', '-')
+                            const is_default = ['en', 'x-default'].includes(locale)
+                            const href_locale = is_default ? '' : `/${replaced_locale}`
+                            const href = `${site_url}${href_locale}${current_page}`
+                            return { lang: replaced_locale, url: href }
                         }
-                    }),
+                    })
+
+                    return {
+                        url: path,
+                        links: !ignore_localized ? links : null,
+                    }
+                },
             },
         },
         {
@@ -149,8 +149,6 @@ module.exports = {
                         type: `image/png`,
                     },
                 ],
-                gcm_sender_id: '370236002280',
-                gcm_user_visible_only: true,
                 crossOrigin: `use-credentials`,
                 // TODO: add translations and support for language routes e.g:
                 // localize: [
@@ -200,14 +198,6 @@ module.exports = {
             },
         },
         'gatsby-plugin-anchor-links',
-        {
-            resolve: `gatsby-plugin-nprogress`,
-            options: {
-                color: `#85ACB0`,
-                showSpinner: false,
-                minimum: 0.4,
-            },
-        },
         {
             resolve: 'gatsby-plugin-google-tagmanager',
             options: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,4 +6,4 @@ @@
         "src/**/*.{js,jsx,ts,tsx,json,md}": [
             "prettier --write"
         ]
-    }
+    }