Merge branch 'main' into farabi/bot-1856/fix-tutorial-tab-and-tours

.github/workflows/build-and-deploy-staging.yml

@@ -75,3 +75,13 @@ jobs:
                     echo "Deployment to Cloudflare Pages failed."
                     exit 1
                   fi
+
+            - name: Upload to vercel
+              uses: 'deriv-com/shared-actions/.github/actions/vercel_DR_publish@master'
+              with:
+                VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+                VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+                VERCEL_TOKEN: ${{ secrets.VERCEL_API_TOKEN }}
+                ENVIRONMENT: Preview
+                VERCEL_SCOPE: deriv
+                ALIAS_DOMAIN_URL: 'staging-dbot-dr.binary.sx'

.github/workflows/build-and-deploy-test.yml

@@ -62,10 +62,6 @@ jobs:
                   message: ${{steps.generate_action_url.outputs.comment}}
                   recreate: true
 
-            - name: Create npmrc file
-              shell: bash
-              run: echo "@deriv-com:registry=https://npm.pkg.github.com" >> .npmrc
-
             - name: Get cached dependencies
               id: cache-npm
               uses: actions/cache/restore@e12d46a63a90f2fae62d114769bbf2a179198b5c
@@ -115,7 +111,7 @@ jobs:
                   branch=$(echo "$HEAD_BRANCH" | head -c 20 | sed 's/[\/_\.]/-/g; s/[^a-zA-Z0-9]$/1/')
                   cf_preview_url=$(wrangler pages deploy $directory --project-name=$CLOUDFLARE_PROJECT_NAME --branch=$branch > log.txt 2>&1; echo $?)
                   echo "------"
-                  preview_url=https://$branch.$CLOUDFLARE_PROJECT_NAME.pages.dev
+                  preview_url=https://$branch.bot-65f.pages.dev
                   cat log.txt
                   if grep -q "Deployment complete" log.txt; then
                     echo "preview_url=$preview_url" >> "$GITHUB_OUTPUT"

.gitignore

@@ -1,4 +1,5 @@
 *~
+.vercel
 .idea/
 .grunt/
 .sass-cache/

.stylelintrc.cjs

@@ -8,6 +8,7 @@ module.exports = {
         'color-no-invalid-hex': true,
         'declaration-block-no-duplicate-properties': [true, { ignore: ['consecutive-duplicates'] }],
         'declaration-block-no-shorthand-property-overrides': true,
+        'declaration-block-no-redundant-longhand-properties': null,
         'font-family-name-quotes': 'always-unless-keyword',
         'function-calc-no-unspaced-operator': true,
         'function-name-case': 'lower',
@@ -16,13 +17,15 @@ module.exports = {
         'no-invalid-double-slash-comments': true,
         'number-max-precision': 3,
         'no-descending-specificity': null,
+        'no-invalid-position-at-import-rule': null,
         'selector-pseudo-class-no-unknown': [
             true,
             {
                 ignorePseudoClasses: ['export'],
             },
         ],
         'selector-class-pattern': null,
+        'selector-id-pattern': null,
         'selector-pseudo-element-colon-notation': 'single',
         'selector-pseudo-element-no-unknown': true,
         'selector-type-case': 'lower',
@@ -32,6 +35,9 @@ module.exports = {
         'time-min-milliseconds': 100,
         'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
         'value-keyword-case': 'lower',
+        'scss/at-extend-no-missing-placeholder': null,
+        'scss/percent-placeholder-pattern': null,
+        'custom-property-pattern': null,
     },
     extends: ['stylelint-config-standard-scss'],
     ignoreFiles: ['packages/*/dist/**/*.css'],

package.json

@@ -83,7 +83,7 @@
         "@commitlint/config-conventional": "^17.1.0",
         "@deriv-com/eslint-config-deriv": "^2.1.0-beta.3",
         "@jest/globals": "^29.7.0",
-        "@rsbuild/core": "^1.0.1-beta.0",
+        "@rsbuild/core": "^1.0.1-beta.1",
         "@rsbuild/plugin-react": "^1.0.1-beta.1",
         "@rsbuild/plugin-sass": "^1.0.1-beta.1",
         "@testing-library/dom": "^10.3.1",

rsbuild.config.ts

@@ -1,22 +1,20 @@
 import { defineConfig } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
+
 const path = require('path');
 
 export default defineConfig({
     plugins: [
         pluginSass({
             sassLoaderOptions: {
                 sourceMap: true,
-                additionalData: `
-                    @import "${path.resolve(__dirname, 'src/components/shared/styles/constants.scss')}";
-                    @import "${path.resolve(__dirname, 'src/components/shared/styles/mixins.scss')}";
-                    @import "${path.resolve(__dirname, 'src/components/shared/styles/fonts.scss')}";
-                    @import "${path.resolve(__dirname, 'src/components/shared/styles/inline-icons.scss')}";
-                    @import "${path.resolve(__dirname, 'src/components/shared/styles/devices.scss')}";
-                    @import "${path.resolve(__dirname, 'src/components/shared/styles/themes.scss')}";
-                `,
+                sassOptions: {
+                    includePaths: [path.resolve(__dirname, 'src')],
+                },
+                // additionalData: `@use "${path.resolve(__dirname, 'src/components/shared/styles')}" as *;`,
             },
+            exclude: /node_modules/,
         }),
         pluginReact(),
     ],
@@ -53,6 +51,13 @@ export default defineConfig({
     html: {
         template: './index.html',
     },
+    server: {
+        port: 8443,
+        compress: true,
+    },
+    dev: {
+        hmr: true,
+    },
     tools: {
         rspack: {
             plugins: [],

src/components/bot-notification-messages/bot-notification-messages.scss

@@ -1,3 +1,5 @@
+@use './../shared/styles/mixins' as *;
+
 .notifications-container {
     position: absolute;
     top: 6.5rem;
@@ -10,6 +12,7 @@
             transform 0.3s ease,
             opacity 0.25s linear;
     }
+
     &__dashboard {
         .notification-messages {
             transform: translate3d(calc(-42.7rem), 0, 0);
@@ -19,6 +22,7 @@
             }
         }
     }
+
     &--panel-open {
         .notification-messages {
             transform: translate3d(calc(-36.5rem), 0, 0);

src/components/bot-notification/bot-notification.scss

@@ -1,3 +1,5 @@
+@use 'components/shared/styles/devices' as *;
+
 .Toastify {
     &__toast {
         background: var(--icon-black-plus);

src/components/contract-result-overlay/contract-result-overlay.scss

@@ -1,7 +1,11 @@
+@use 'components/shared/styles/constants' as *;
+@use 'components/shared/styles/mixins' as *;
+
 @keyframes animate-fade-in {
     0% {
         opacity: 0;
     }
+
     100% {
         opacity: 1;
     }
@@ -22,6 +26,7 @@
     z-index: 2;
     background-color: var(--overlay-inside-dialog);
     animation: animate-fade-in 0.3s;
+
     @include flex-center;
 
     &:hover {
@@ -31,21 +36,25 @@
             opacity: 0;
         }
     }
+
     &-caption {
         display: flex;
         align-items: center;
         transition: opacity 0.25s linear;
     }
+
     &-icon {
         margin-left: 10px;
     }
+
     &--won {
         background-image: $COLOR_LIGHT_GREEN_GRADIENT; // TODO: Update when gradients are added.
 
         > #{$contract_result}-caption {
             color: var(--text-profit-success);
         }
     }
+
     &--lost {
         background-image: $COLOR_LIGHT_RED_GRADIENT; // TODO: Update when gradients are added.