Merge branch 'master' into appstore

.circleci/config.yml

@@ -38,7 +38,7 @@ commands:
     steps:
       - run:
           name: "Create cache key"
-          command: echo $(find . ./packages/ -maxdepth 2 -name package-lock.json -type f -exec md5sum {} \; | sort -n | md5sum | cut -d" " -f1) >> CACHE_KEY1
+          command: echo $(find . ./packages/ -maxdepth 2 -name package.json -type f -exec md5sum {} \; | sort -n | md5sum | cut -d" " -f1) >> CACHE_KEY1
       - restore_cache:
           keys:
             - node-v{{ .Environment.CACHE_VERSION }}-{{ checksum "CACHE_KEY1" }}
@@ -69,6 +69,7 @@ commands:
             - "packages/cfd/node_modules"
             - "packages/indicators/node_modules"
             - "packages/p2p/node_modules"
+            - "packages/reports/node_modules"
             - "packages/shared/node_modules"
             - "packages/trader/node_modules"
             - "packages/translations/node_modules"
@@ -157,6 +158,29 @@ commands:
             cd devops-ci-scripts/k8s-build_tools
             echo $CA_CRT | base64 --decode > ca.crt
             ./release.sh << parameters.k8s_service >> ${TAG}
+
+  publish_to_pages_staging:
+    description: "Publish to cloudflare pages"
+    steps:
+      - run:
+          name: "Publish to cloudflare pages (staging)"
+          command: |
+            npm i wrangler@2.0.19
+            cd packages/core 
+            npx wrangler pages publish dist/ --project-name=deriv-app-pages --branch=staging
+            echo "New staging website - http://staging.cf-pages-deriv-app.deriv.com"
+
+  publish_to_pages_production:
+    description: "Publish to cloudflare pages"
+    steps:
+      - run:
+          name: "Publish to cloudflare pages (production)"
+          command: | 
+            npm i wrangler@2.0.19
+            cd packages/core 
+            npx wrangler pages publish dist/ --project-name=deriv-app-pages --branch=main
+            echo "New website - http://cf-pages-deriv-app.deriv.com"
+
 jobs:
   build:
     docker:
@@ -195,6 +219,10 @@ jobs:
       - build
       - versioning:
           version_name: staging
+      - persist_to_workspace:
+          root: packages
+          paths:
+            - core
       - docker_build_push
       - k8s_deploy
       - notify_slack
@@ -210,6 +238,10 @@ jobs:
       - build
       - versioning:
           version_name: production
+      - persist_to_workspace:
+          root: packages
+          paths:
+            - core
       - docker_build_push:
           docker_image_latest_tag: latest
       - k8s_deploy:
@@ -218,6 +250,26 @@ jobs:
     environment:
       NODE_ENV: staging
 
+  publish_cloudflare_staging:
+    docker:
+      - image: circleci/node:16.13.1-stretch
+    steps:
+      - attach_workspace:
+          at: packages
+      - publish_to_pages_staging
+    environment:
+      NODE_ENV: staging
+
+  publish_cloudflare_production:
+    docker:
+      - image: circleci/node:16.13.1-stretch
+    steps:
+      - attach_workspace:
+          at: packages
+      - publish_to_pages_production
+    environment:
+      NODE_ENV: staging
+
   build_and_test:
     docker:
       - image: circleci/node:14.17.1-stretch
@@ -248,6 +300,12 @@ workflows:
           filters:
             branches:
               only: /^master$/
+      - publish_cloudflare_staging:
+          requires:
+            - release_staging
+          filters:
+            branches:
+              only: /^master$/
 
   release_production:
     jobs:
@@ -258,6 +316,14 @@ workflows:
               ignore: /.*/
             tags:
               only: /^production.*/
+      - publish_cloudflare_production:
+          requires:
+            - release_production
+          filters:
+            branches:
+              ignore: /.*/
+            tags:
+              only: /^production.*/
 
   test:
     jobs:

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
     root: true,
-    parser: 'babel-eslint',
-    plugins: ['prettier', 'testing-library'],
+    parser: '@babel/eslint-parser',
+    plugins: ['prettier', 'testing-library', '@typescript-eslint'],
     env: {
         es6: true,
         browser: true,
@@ -15,6 +15,7 @@ module.exports = {
         dataLayer: true,
         texts_json: false,
     },
+    ignorePatterns: ['**/dist/**/*.js', '**/lib/**/*.js'],
     rules: {
         camelcase: 0,
         // semi                                : ['error', 'always'],
@@ -48,18 +49,18 @@ module.exports = {
         'space-infix-ops': 'error',
         // 'space-unary-ops'                   : 'error',
         // 'no-multiple-empty-lines'           : ['error', { 'max': 1, 'maxEOF': 1 }],
+        'global-require': 'warn',
 
         // import rules
         'import/no-extraneous-dependencies': [
-            'error',
+            'warn',
             {
                 devDependencies: [
                     '**/__tests__/**/*.js',
                     '**/test*.js',
                     '**/*.test.js*',
                     '**/*.spec.js',
                     '**/*.spec.jsx',
-                    '**/*.{test,spec}.{ts,tsx}',
                 ],
             },
         ],
@@ -72,6 +73,7 @@ module.exports = {
                 'newlines-between': 'ignore',
             },
         ],
+        'spaced-comment': 'off',
         'import/prefer-default-export': 0,
         'import/extensions': ['warn', 'never', { jsx: 'always', json: 'always' }],
         'no-sequences': ['warn'],
@@ -86,7 +88,12 @@ module.exports = {
         // 'react/jsx-indent-props'            : ['error', 4],
         // 'react/jsx-max-props-per-line'      : ['error', { when: 'multiline' }],
         // 'react/jsx-tag-spacing'             : ['error', { closingSlash: 'never', beforeSelfClosing: 'always' }],
-        'react/prop-types': 0,
+        'react/prop-types': [
+            1,
+            {
+                skipUndeclared: true,
+            },
+        ],
         'react/self-closing-comp': 'error',
         // 'react/sort-prop-types'             : ['error', { ignoreCase: true, sortShapeProp: true }],
     },
@@ -100,7 +107,21 @@ module.exports = {
         'plugin:jest-dom/recommended',
     ],
     parserOptions: {
-        ecmaVersion: 6,
+        requireConfigFile: false,
+        ecmaVersion: 8,
+        babelOptions: {
+            presets: ['@babel/preset-react', '@babel/preset-typescript'],
+            plugins: [
+                ['@babel/plugin-proposal-decorators', { legacy: true }],
+                ['@babel/plugin-proposal-class-properties', { loose: true }],
+                '@babel/plugin-proposal-export-default-from',
+                '@babel/plugin-proposal-object-rest-spread',
+                '@babel/plugin-proposal-export-namespace-from',
+                '@babel/plugin-syntax-dynamic-import',
+                '@babel/plugin-proposal-optional-chaining',
+                '@babel/plugin-proposal-nullish-coalescing-operator',
+            ],
+        },
         ecmaFeatures: {
             jsx: true,
         },
@@ -109,11 +130,51 @@ module.exports = {
         react: {
             version: '16',
         },
+        'import/resolver': {
+            typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
+        },
     },
     overrides: [
         {
             files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
             extends: ['plugin:testing-library/react'],
         },
+        {
+            files: ['*.{ts,tsx}'],
+            parser: '@typescript-eslint/parser',
+            plugins: ['@typescript-eslint'],
+            extends: [
+                'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+                'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+                'plugin:react/recommended',
+                'plugin:@typescript-eslint/recommended',
+                'plugin:prettier/recommended',
+            ],
+            parserOptions: {
+                ecmaversion: 2018,
+                sourceType: 'module',
+                ecmaFeatures: {
+                    jsx: true,
+                },
+                babelOptions: {
+                    presets: ['@babel/preset-react', '@babel/preset-typescript'],
+                    plugins: [
+                        ['@babel/plugin-proposal-decorators', { legacy: true }],
+                        ['@babel/plugin-proposal-class-properties', { loose: true }],
+                        '@babel/plugin-proposal-export-default-from',
+                        '@babel/plugin-proposal-object-rest-spread',
+                        '@babel/plugin-proposal-export-namespace-from',
+                        '@babel/plugin-syntax-dynamic-import',
+                        '@babel/plugin-proposal-optional-chaining',
+                        '@babel/plugin-proposal-nullish-coalescing-operator',
+                    ],
+                },
+            },
+            settings: {
+                react: {
+                    version: 'detect',
+                },
+            },
+        },
     ],
 };

.github/CODEOWNERS

@@ -119,7 +119,11 @@
 
 /packages/trader/**/*                                           @matin-binary @balakrishna-binary @akmal-binary 
 
+# ==============================================================
+#  deriv-app/reports
+# ==============================================================
 
+/packages/reports/**/*                                           @matin-binary @balakrishna-binary
 
 # ==============================================================
 #  deriv-app/publisher

.github/workflows/generate_and_push_deriv_api_types.md

@@ -1,6 +1,6 @@
 # Generate and push Deriv API TypeScript types
 
-This action takes Deriv API's JSON schema (published at https://github.com/binary-com/websockets/tree/gh-pages/config/v3) and converts it into consumable TypeScript types. 
+This action takes Deriv API's JSON schema (published at https://github.com/binary-com/websockets/tree/gh-pages/config/v3) and converts it into consumable TypeScript types.
 
 If the action detects the contents of the generated `index.d.ts` file has changed, it will attempt to publish a new version of `@deriv/api-types` to the NPM registry (https://www.npmjs.com/package/@deriv/api-types).
 
@@ -10,5 +10,5 @@ After a new version has been published the action will automatically create a PR
 
 Required GitHub secrets:
 
-- `NPM_ACCESS_TOKEN`: To allow for automatic publishing of new version of `@deriv/api-types`
-- `PERSONAL_ACCESS_TOKEN`: (GitHub PAT) To allow the action to authenticate with Git for git operations.
+-   `NPM_ACCESS_TOKEN`: To allow for automatic publishing of new version of `@deriv/api-types`
+-   `PERSONAL_ACCESS_TOKEN`: (GitHub PAT) To allow the action to authenticate with Git for git operations.

.github/workflows/generate_and_push_deriv_api_types.yml

@@ -13,7 +13,7 @@ jobs:
         id: step1
         uses: actions/setup-node@v2
         with:
-          node-version: "12"
+          node-version: "14"
           check-latest: true
           registry-url: "https://registry.npmjs.org"
         env:
@@ -57,8 +57,16 @@ jobs:
 
             echo ::set-output name=should_create_pr::true
           fi
-      - name: Bump version and create PR
+      
+      - name: Checkout repo
         id: step4
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+          ref: master
+
+      - name: Bump version and create PR
+        id: step5
         run: |
           if [ ${{ steps.step3.outputs.should_create_pr }} = true ]
           then
@@ -67,30 +75,24 @@ jobs:
 
             new_version=$(npm show @deriv/api-types version)
 
-            # Make a shallow clone of the project
-            git clone "https://DerivFE:${{ secrets.PERSONAL_ACCESS_TOKEN }}@github.com/binary-com/deriv-app.git" --depth 1
-
             # lerna: To allow us to bootstrap the project.
             # json: To manually edit the target package's package.json
-            npm i -g lerna@latest json@latest
-
-            cd deriv-app
+            npm i -g lerna@latest json@latest npm@8
 
             package_name="@deriv/api-types"
             old_version=$(json -f packages/appstore/package.json -a dependencies."$package_name")
             safe_old_version=$(echo $old_version | sed 's/[^a-zA-Z0-9.]//g')
 
             git checkout -b "$package_name"
+            git reset --hard master
 
             # "Manually" bump the version in package.json to accommodate 
             # Lerna's flexibility (or its lack thereof).
-            json -I -f packages/appstore/package.json -e "this.dependencies[\"$package_name\"]=\"$new_version\"" -o json-4
-            json -I -f packages/trader/package.json -e "this.dependencies[\"$package_name\"]=\"$new_version\"" -o json-4
+            for file in packages/**/package.json; do grep -q $package_name $file && json -I -f $file -e "this.dependencies[\"$package_name\"]=\"$new_version\"" -o json-4 || echo not found in $file ; done;
 
             # We have to run "lerna bootstrap --no-ci" to generate a new 
             # package-lock.json ("npm run bootstrap" requires this).
-            lerna bootstrap --no-ci
-            npm run bootstrap
+            npm run bootstrap:dev
 
             # Identify with Git, these values come from the shared Deriv FE account. https://github.com/DerivFE
             git config --global user.name "DerivFE"

.github/workflows/push_and_pull_crowdin_translations.md

@@ -4,6 +4,6 @@ This action will automatically extract strings from the Deriv.app repo and uploa
 
 Required GitHub secrets:
 
-- `NPM_ACCESS_TOKEN`: To allow for automatic publishing of new version of `@deriv/api-types`
-- `PERSONAL_ACCESS_TOKEN`: (GitHub PAT) To allow the action to authenticate with Git for git operations.
-- `CROWDIN_API_TOKEN`: To allow us to download and upload new language files to and from Crowdin.
+-   `NPM_ACCESS_TOKEN`: To allow for automatic publishing of new version of `@deriv/api-types`
+-   `PERSONAL_ACCESS_TOKEN`: (GitHub PAT) To allow the action to authenticate with Git for git operations.
+-   `CROWDIN_API_TOKEN`: To allow us to download and upload new language files to and from Crowdin.

.gitignore

@@ -7,6 +7,7 @@ dist/
 node_modules/
 packages/**/scripts/CNAME
 .DS_Store
+tsconfig.tsbuildinfo
 *.swp
 npm-debug.log
 lerna-debug.log

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run prettify
+npx lint-staged --allow-empty

.lintstagedrc.json

@@ -0,0 +1,5 @@
+{
+    "*.{js,jsx,ts,tsx,md,html,css,scss}": "prettier --write",
+    "*.{js,jsx,ts,tsx}": "npx eslint --fix",
+    "*.{css,scss}": "npx stylelint --fix"
+}

.prettierignore

@@ -0,0 +1 @@
+packages/components/stories/icon/icons.js