Development

.eslintrc

@@ -37,7 +37,6 @@
   ],
   "plugins": ["react-hooks", "prettier", "import", "sort-exports"],
   "rules": {
-    "sort-exports/sort-exports": "error",
     "sort-imports": [
       "error",
       {

.github/workflows/run-merge-e2e-tests.yml

@@ -4,21 +4,8 @@ on:
     branches: [main]
   workflow_dispatch:
 jobs:
-  Slack-Notification:
-    runs-on: runner-dapp
-    steps:
-      - name: Slack Notification
-        uses: rtCamp/action-slack-notify@master
-        env:
-          if: always()
-          SLACK_ICON_EMOJI: ':robot_face:'
-          SLACK_USERNAME: Playwright Bot
-          SLACK_MESSAGE: E2E merge tests are now running. A new notification will be sent when completed.
-          SLACK_TITLE : 'Playwright E2E Template RUN'
-          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
   E2E-RUN:
     runs-on: runner-dapp
-    needs: Slack-Notification
     env:
       KEYSTORE1_JSON_B64: ${{ secrets.KEYSTORE1_JSON_B64 }}
       KEYSTORE1_PASSWORD: ${{ secrets.KEYSTORE1_PASSWORD }}
@@ -41,6 +28,10 @@ jobs:
 
       KEYSTORE6_PRIVATE_KEY_UTF8: ${{ secrets.KEYSTORE6_PRIVATE_KEY_UTF8 }}
       KEYSTORE6_ADDRESS: ${{ secrets.KEYSTORE6_ADDRESS }}
+
+      METAMASK_MNEMONIC: ${{ secrets.METAMASK_MNEMONIC }}
+      METAMASK_ADDRESS: ${{ secrets.METAMASK_ADDRESS }}
+      METAMASK_PASSWORD: ${{ secrets.METAMASK_PASSWORD }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -59,8 +50,10 @@ jobs:
           command: pnpm install
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
+      - name: Setup Synpress Cache
+        run: xvfb-run pnpm exec synpress tests/test/wallet-setup
       - name: Run Playwright E2E Tests
-        run: pnpm run run-playwright-test
+        run: xvfb-run pnpm run run-playwright-test
       - name: Upload Playwright test report
         uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
@@ -72,18 +65,18 @@ jobs:
         uses: rtCamp/action-slack-notify@master
         if: success()
         env:
-          SLACK_ICON_EMOJI: ':white_check_mark:'
+          SLACK_ICON_EMOJI: ':robot_face:'
           SLACK_USERNAME: Playwright Bot
-          SLACK_MESSAGE: 'E2E merge Tests completed successfully! All tests passed. 📊 Test Report: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
+          SLACK_MESSAGE: 'E2E merge Tests completed successfully!'
           SLACK_TITLE: 'Playwright E2E Tests - SUCCESS'
           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
       - name: Slack Failure Notification
         uses: rtCamp/action-slack-notify@master
         if: failure()
         env:
-          SLACK_ICON_EMOJI: ':red_circle:'
+          SLACK_ICON_EMOJI: ':robot_face:'
           SLACK_USERNAME: Playwright Bot
-          SLACK_MESSAGE: 'E2E merge Tests failed. Please check the logs for details. 📊 Test Report: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
+          SLACK_MESSAGE: 'E2E merge Tests failed!'
           SLACK_TITLE: 'Playwright E2E Tests - FAILED'
           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
 

.github/workflows/run-night-e2e-tests.yml

@@ -4,21 +4,8 @@ on:
     - cron: '0 20 * * *'
   workflow_dispatch:
 jobs:
-  Slack-Notification:
-    runs-on: runner-dapp
-    steps:
-      - name: Slack Notification
-        uses: rtCamp/action-slack-notify@master
-        env:
-          if: always()
-          SLACK_ICON_EMOJI: ':robot_face:'
-          SLACK_USERNAME: Playwright Bot
-          SLACK_MESSAGE: E2E night tests are now running. A new notification will be sent when completed.
-          SLACK_TITLE : 'Playwright E2E Template RUN'
-          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
   E2E-RUN:
     runs-on: runner-dapp
-    needs: Slack-Notification
     env:
       KEYSTORE1_JSON_B64: ${{ secrets.KEYSTORE1_JSON_B64 }}
       KEYSTORE1_PASSWORD: ${{ secrets.KEYSTORE1_PASSWORD }}
@@ -41,6 +28,10 @@ jobs:
 
       KEYSTORE6_PRIVATE_KEY_UTF8: ${{ secrets.KEYSTORE6_PRIVATE_KEY_UTF8 }}
       KEYSTORE6_ADDRESS: ${{ secrets.KEYSTORE6_ADDRESS }}
+
+      METAMASK_MNEMONIC: ${{ secrets.METAMASK_MNEMONIC }}
+      METAMASK_ADDRESS: ${{ secrets.METAMASK_ADDRESS }}
+      METAMASK_PASSWORD: ${{ secrets.METAMASK_PASSWORD }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -59,8 +50,11 @@ jobs:
           command: pnpm install
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
+      - name: Setup Synpress Cache
+        run: xvfb-run pnpm exec synpress tests/test/wallet-setup
       - name: Run Playwright E2E Tests
-        run: pnpm run run-playwright-test
+        working-directory: tests
+        run: xvfb-run pnpm run run-playwright-test
       - name: Upload Playwright test report
         uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
@@ -72,17 +66,17 @@ jobs:
         uses: rtCamp/action-slack-notify@master
         if: success()
         env:
-          SLACK_ICON_EMOJI: ':white_check_mark:'
+          SLACK_ICON_EMOJI: ':robot_face:'
           SLACK_USERNAME: Playwright Bot
-          SLACK_MESSAGE: 'E2E Night Tests completed successfully! All tests passed. 📊 Test Report: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
+          SLACK_MESSAGE: 'E2E Night Tests completed successfully!'
           SLACK_TITLE: 'Playwright E2E Tests - SUCCESS'
           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
       - name: Slack Failure Notification
         uses: rtCamp/action-slack-notify@master
         if: failure()
         env:
-          SLACK_ICON_EMOJI: ':x:'
+          SLACK_ICON_EMOJI: ':robot_face:'
           SLACK_USERNAME: Playwright Bot
-          SLACK_MESSAGE: 'E2E Night Tests failed. Please check the logs for details. 📊 Test Report: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
+          SLACK_MESSAGE: 'E2E Night Tests failed!'
           SLACK_TITLE: 'Playwright E2E Tests - FAILED'
           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}

.gitignore

@@ -37,6 +37,7 @@ node_modules/
 /playwright/.cache/
 /certificates/
 /temps/
+.cache-synpress
 
 # secrets (local only)
 tests/support/wallets/

jest.config.js

@@ -16,7 +16,11 @@ module.exports = {
   transformIgnorePatterns: ['node_modules/(^.+\\\\.(ts|js)$)'],
   testMatch: ['**/src/**/?(*.)+(spec|test|bgTest).ts?(x)'],
   moduleNameMapper: {
-    '\\.(css|sass|scss)$': 'identity-obj-proxy'
+    '\\.(css|sass|scss)$': 'identity-obj-proxy',
+    '^@multiversx/sdk-dapp-ui$':
+      '<rootDir>/src/__mocks__/@multiversx/sdk-dapp-ui.ts',
+    '^@multiversx/sdk-dapp-ui/(.*)$':
+      '<rootDir>/src/__mocks__/@multiversx/sdk-dapp-ui.ts'
   },
   moduleFileExtensions: [
     // Place tsx and ts to beginning as suggestion from Jest team
@@ -25,6 +29,9 @@ module.exports = {
     'ts',
     'web.js',
     'js',
+    'jsx',
+    'cjs',
+    'mjs',
     'web.ts',
     'web.tsx',
     'json',

package.json

@@ -18,7 +18,7 @@
     "axios": "1.10.0",
     "bignumber.js": "^9.x",
     "classnames": "2.3.2",
-    "moment": "2.29.4",
+    "luxon": "3.5.0",
     "motion": "^12.23.12",
     "protobufjs": "^7.5.3",
     "react": "18.2.0",
@@ -52,13 +52,15 @@
     "@playwright/test": "1.49.1",
     "@swc/core": "1.3.90",
     "@swc/jest": "0.2.29",
+    "@synthetixio/synpress": "4.1.1",
     "@tailwindcss/cli": "4.0.17",
     "@tailwindcss/postcss": "4.1.3",
     "@tailwindcss/vite": "4.1.11",
     "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.1",
     "@types/jest": "29.5.5",
+    "@types/luxon": "3.4.2",
     "@types/node": "20.7.1",
     "@types/react": "18.2.23",
     "@types/react-dom": "^19.1.7",

playwright.config.ts

@@ -54,14 +54,22 @@ export default defineConfig({
       use: {
         ...devices['Desktop Chrome'],
         launchOptions: {
-          args: ['--start-maximized']
+          args: [
+            '--start-maximized',
+            '--disable-web-security',
+            '--disable-features=VizDisplayCompositor'
+          ]
         }
       }
     }
   ],
   webServer: {
     command: 'pnpm run start-devnet',
+    url: 'https://localhost:3000',
     timeout: 120 * 1000,
-    reuseExistingServer: !process.env.CI
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+    stderr: 'pipe',
+    ignoreHTTPSErrors: true
   }
 });