Utkarsha/update with master

.github/actions/build/action.yml

@@ -9,9 +9,6 @@ inputs:
     description: 'Node environment'
     required: false
     default: 'test'
-  CROWDIN_WALLETS_API_KEY:
-    description: 'Crowdin wallets api key'
-    required: false
   DATADOG_CLIENT_TOKEN:
     description: 'Datadog client token'
     required: false
@@ -64,7 +61,6 @@ runs:
   - name: Build all packages
     env:
       NODE_ENV: ${{ inputs.NODE_ENV }}
-      CROWDIN_WALLETS_API_KEY: ${{ inputs.CROWDIN_WALLETS_API_KEY }}
       DATADOG_APPLICATION_ID: ${{ inputs.DATADOG_APPLICATION_ID }}
       DATADOG_CLIENT_TOKEN: ${{ inputs.DATADOG_CLIENT_TOKEN }}
       DATADOG_CLIENT_TOKEN_LOGS: ${{ inputs.DATADOG_CLIENT_TOKEN_LOGS }}

.github/workflows/build_docker_image.yml

@@ -0,0 +1,43 @@
+name: Build Docker image and push to dockerhub
+on:
+  workflow_dispatch:
+    inputs:
+        docker_image_tag_name:
+          type: string
+          description: Docker image tag name
+          required: true
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    env: 
+      tag_name: ${{ github.event.inputs.docker_image_tag_name }}
+    permissions:
+      packages: write
+      contents: read
+      attestations: write
+      id-token: write
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+        with:
+          username: ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}
+          password: ${{ secrets.WEB_ACCESS_DOCKERHUB_PASSWORD }}
+
+      - name: Run Bootstrap
+        run: npm run bootstrap
+
+      - name: Run Build:prod
+        run: npm run build:prod
+
+      - name: Run Build Docker
+        run: docker build -t ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$tag_name . --platform=linux/amd64
+
+      - name: Run Tag Docker
+        run: docker tag ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$tag_name ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$tag_name
+
+      - name: Run Push Docker
+        run: docker push ${{ secrets.WEB_ACCESS_DOCKERHUB_USERNAME }}/$tag_name

.github/workflows/release_production.yml

@@ -48,7 +48,7 @@ jobs:
     - name: Versioning
       uses: "./.github/actions/versioning"
       with:
-        RELEASE_TYPE: $RELEASE_TYPE
+        RELEASE_TYPE: ${{ env.RELEASE_TYPE }}
     - name: Extract version
       id: extract_version
       run: echo "RELEASE_VERSION=${version}" >> $GITHUB_OUTPUT
@@ -90,7 +90,7 @@ jobs:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
           MESSAGE: "${{ env.RELEASE_TYPE }} Release succeeded for app.deriv.com with version ${{ needs.build_test_and_publish.outputs.RELEASE_VERSION }}"
 
-  build_and_publish_to_docker_k8s:
+  build_and_publish_to_DR_solution:
     name: Build Docker image and push to Docker hub and K8S
     runs-on: Runner_8cores_Deriv-app
     environment: Production
@@ -121,3 +121,20 @@ jobs:
         with:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
           MESSAGE: "${{ env.RELEASE_TYPE }} Docker Publish and Kubernetes Deployment for app.deriv.com with version ${{ needs.build_test_and_publish.outputs.RELEASE_VERSION }} has Failed"
+      - name: Upload to vercel
+        id: vercel-upload
+        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: Production
+          VERCEL_SCOPE: deriv
+          ALIAS_DOMAIN_URL: 'app-dr.binary.sx'
+
+      - name: Send DR Slack Notification
+        uses: "deriv-com/shared-actions/.github/actions/send_slack_notification@master"
+        if: ${{ steps.vercel-upload.outcome != 'success' }}
+        with:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+          MESSAGE: Disaster Recovery Release to vercel failed for app.deriv.com with version ${{ needs.build_test_and_publish.outputs.RELEASE_VERSION }}

.github/workflows/release_staging.yml

@@ -24,7 +24,6 @@ jobs:
       uses: "./.github/actions/build"
       with:
         NODE_ENV: production
-        CROWDIN_WALLETS_API_KEY: ${{ secrets.CROWDIN_WALLETS_API_KEY }}
         IS_GROWTHBOOK_ENABLED: ${{ vars.IS_GROWTHBOOK_ENABLED }}
         DATADOG_APPLICATION_ID: ${{ vars.DATADOG_APPLICATION_ID }}
         DATADOG_CLIENT_TOKEN: ${{ vars.DATADOG_CLIENT_TOKEN }}
@@ -53,14 +52,13 @@ jobs:
         CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
         CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
 
-    - name: Build Docker image and push to Docker hub and K8S
-      uses: "./.github/actions/build_and_push_docker_image"
+    - name: Upload to vercel
+      id: vercel-upload
+      uses: 'deriv-com/shared-actions/.github/actions/vercel_DR_publish@master'
       with:
-        DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-        DOCKERHUB_PASSWORD: ${{ secrets.DOCKERHUB_PASSWORD }}
-        DOCKERHUB_ORGANISATION: ${{ secrets.DOCKERHUB_ORGANISATION }}
-        K8S_NAMESPACE: ${{ secrets.K8S_NAMESPACE }}
-        KUBE_SERVER: ${{ secrets.KUBE_SERVER }}
-        SERVICEACCOUNT_TOKEN: ${{ secrets.SERVICEACCOUNT_TOKEN }}
-        CA_CRT: ${{ secrets.CA_CRT }}
-        APP_VERSION: latest-staging
+        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-app-dr.binary.sx'

.github/workflows/release_test.yml

@@ -20,7 +20,6 @@ jobs:
       uses: "./.github/actions/build"
       with:
         NODE_ENV: production
-        CROWDIN_WALLETS_API_KEY: ${{ secrets.CROWDIN_WALLETS_API_KEY }}
         DATADOG_APPLICATION_ID: ${{ vars.DATADOG_APPLICATION_ID }}
         IS_GROWTHBOOK_ENABLED: ${{ vars.IS_GROWTHBOOK_ENABLED }}
         DATADOG_CLIENT_TOKEN: ${{ vars.DATADOG_CLIENT_TOKEN }}

.github/workflows/sync-translations.yml

@@ -6,15 +6,15 @@ on:
       - master
   schedule:
     - cron: '0 */12 * * *'
-
+        
 jobs:
   sync_translations:
     permissions:
       contents: write
     runs-on: ubuntu-latest
     environment: Staging
     steps:
-      - name: Sync translations
+      - name: Sync accounts translations
         uses: deriv-com/translations/.github/actions/extract_and_sync_translations@main
         with:
           PROJECT_NAME: ${{ vars.ACC_R2_PROJECT_NAME }}
@@ -26,3 +26,15 @@ jobs:
           R2_SECRET_ACCESS_KEY: ${{ secrets.ACC_R2_SECRET_ACCESS_KEY }}
           R2_BUCKET_NAME: ${{ secrets.ACC_R2_BUCKET_NAME }}
           PROJECT_SOURCE_DIRECTORY: "packages/account/src"
+      - name: Sync wallets translations
+        uses: deriv-com/translations/.github/actions/extract_and_sync_translations@main
+        with:
+          PROJECT_NAME: ${{ vars.WALLETS_PROJECT_NAME }}
+          CROWDIN_BRANCH_NAME: staging
+          CROWDIN_PROJECT_ID: ${{ secrets.WALLETS_CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.ACC_CROWDIN_PERSONAL_TOKEN }}
+          R2_ACCOUNT_ID: ${{ secrets.ACC_R2_ACCOUNT_ID }}
+          R2_ACCESS_KEY_ID: ${{ secrets.ACC_R2_ACCESS_KEY_ID }}
+          R2_SECRET_ACCESS_KEY: ${{ secrets.ACC_R2_SECRET_ACCESS_KEY }}
+          R2_BUCKET_NAME: ${{ secrets.ACC_R2_BUCKET_NAME }}
+          PROJECT_SOURCE_DIRECTORY: "packages/wallets/src"

.stylelintrc.js

@@ -36,7 +36,7 @@ module.exports = {
         'shorthand-property-no-redundant-values': true,
         'string-no-newline': true,
         'time-min-milliseconds': 100,
-        'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'svw', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
+        'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'svw', 'vw', 'vh', 'dvh', 'deg', 'ms', 's', 'dpcm'],
         'value-keyword-case': 'lower',
     },
     extends: [

__mocks__/translation.mock.js

@@ -1,19 +1,51 @@
-const Localize = ({ i18n_default_text, values }) => {
-    // Replace placeholders in the default text with actual values
-    const localizedText = i18n_default_text.replace(/\{\{(\w+)\}\}/g, (match, key) => values[key] || match);
+import React from 'react';
 
-    return localizedText || null;
+const Localize = ({ i18n_default_text, components = [], values = {} }) => {
+    // Split text into parts, extracting placeholders for components and values
+    const parts = i18n_default_text.split(/(<\d+>.*?<\/\d+>|{{\w+}})/g);
+
+    const replaceValues = text => {
+        return text.replace(/{{(\w+)}}/g, (match, key) => values[key] || match);
+    };
+
+    return (
+        <>
+            {parts.map((part, index) => {
+                // Replace component placeholders with actual components
+                const componentMatch = part.match(/<(\d+)>(.*?)<\/\1>/);
+
+                if (componentMatch) {
+                    const componentIndex = parseInt(componentMatch[1]);
+
+                    // Replace values wrapped in components with actual values
+                    const content = replaceValues(componentMatch[2]);
+                    const Component = components[componentIndex];
+                    return Component ? React.cloneElement(Component, { key: index, children: content }) : content;
+                }
+
+                // Replace value placeholders with actual values
+                const valueMatch = part.match(/{{(\w+)}}/);
+                if (valueMatch) {
+                    const valueKey = valueMatch[1];
+                    return values[valueKey] || part;
+                }
+                return part;
+            })}
+        </>
+    );
 };
 
+const mockFn = jest.fn((text, args) => {
+    return text.replace(/{{(.*?)}}/g, (_, match) => args[match.trim()]);
+});
+
 // Mock for useTranslations hook
 const useTranslations = () => ({
-    localize: jest.fn((text, args) => {
-        return text.replace(/{{(.*?)}}/g, (_, match) => args[match.trim()]);
-    }),
+    localize: mockFn,
     currentLang: 'EN',
 });
 
-const localize = jest.fn(text => text);
+const localize = mockFn;
 
 const getAllowedLanguages = jest.fn(() => ({ EN: 'English', VI: 'Tiếng Việt' }));