merge-main-to-public

.env.example

@@ -4,3 +4,4 @@ MOON_PAY_API_KEY=
 
 # Analytics
 MIX_PANEL_TOKEN=
+MIX_PANEL_EXPLORE_APP_TOKEN=

.eslintrc.json

@@ -21,6 +21,7 @@
     "project": "./tsconfig.json"
   },
   "plugins": ["react", "prettier", "eslint-plugin-no-inline-styles", "@tanstack/query"],
+  "ignorePatterns": ["tests/**/*", "playwright.config.ts"],
   "rules": {
     "consistent-return": "off",
     "import/prefer-default-export": 1,
@@ -50,7 +51,8 @@
       }
     ],
     "no-plusplus": "off",
-    "@tanstack/query/exhaustive-deps": 1
+    "@tanstack/query/exhaustive-deps": 1,
+    "import/order": 0
   },
   "settings": {
     "import/resolver": {

.github/workflows/build-rc.yml

@@ -117,6 +117,7 @@ jobs:
           TRANSAC_API_KEY: ${{ secrets.TRANSAC_API_KEY }}
           MOON_PAY_API_KEY: ${{ secrets.MOON_PAY_API_KEY }}
           MIX_PANEL_TOKEN: ${{ secrets.MIX_PANEL_TOKEN }}
+          MIX_PANEL_EXPLORE_APP_TOKEN: ${{ secrets.MIX_PANEL_EXPLORE_APP_TOKEN }}
         run: |
           npm run build
           zip -rj build.zip ./build

.github/workflows/build.yml

@@ -36,7 +36,19 @@ jobs:
           TRANSAC_API_KEY: ${{ secrets.TRANSAC_API_KEY }}
           MOON_PAY_API_KEY: ${{ secrets.MOON_PAY_API_KEY }}
           MIX_PANEL_TOKEN: ${{ secrets.MIX_PANEL_TOKEN }}
+          MIX_PANEL_EXPLORE_APP_TOKEN: ${{ secrets.MIX_PANEL_EXPLORE_APP_TOKEN }}
         run: npm run build --if-present
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium --with-deps
+      - name: Run health check
+        run: xvfb-run --auto-servernum --server-args="-screen 0 1024x768x24" npx playwright test tests/specs/healthcheck.spec.ts --reporter=html
+      - name: Upload Playwright report
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
       - name: Save Filename
         run: |
           BRANCH_NAME=$(echo ${{ github.head_ref }} | sed 's/\//-/g')

.github/workflows/playwright.yml

@@ -0,0 +1,44 @@
+name: Playwright Tests
+on:
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: Branch name
+        required: true
+        default: develop
+jobs:
+  test:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        always-auth: true
+        node-version: 18
+        registry-url: https://npm.pkg.github.com
+        scope: '@secretkeylabs'
+        cache: npm
+    - name: Install dependencies
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.GH_PACKAGE_REGISTRY_TOKEN }}
+      run: npm ci
+    - name: Build
+      env:
+        TRANSAC_API_KEY: ${{ secrets.TRANSAC_API_KEY }}
+        MOON_PAY_API_KEY: ${{ secrets.MOON_PAY_API_KEY }}
+        MIX_PANEL_TOKEN: ${{ secrets.MIX_PANEL_TOKEN }}
+      run: npm run build --if-present
+    - name: Install Playwright Browsers
+      run: npx playwright install chromium --with-deps
+    - name: Run UI test suite
+      run: xvfb-run --auto-servernum --server-args="-screen 0 1024x768x24" npx playwright test --reporter=html
+    - name: Upload Playwright report
+      if: always()
+      uses: actions/upload-artifact@v3
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
+

.gitignore

@@ -131,3 +131,7 @@ yarn-error.log*
 #editors
 .idea
 .vscode
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -12,9 +12,10 @@
    3. Username: GITHUB USERNAME
       Password: PERSONAL_ACCESS_TOKEN
       Email: PUBLIC-EMAIL-ADDRESS
-4. Run `npm install` to install the dependencies.
-5. Run `npm start`
-6. Load your extension on Chrome following:
+4. Add .env file (example: .env.example)
+5. Run `npm install` to install the dependencies.
+6. Run `npm start`
+7. Load your extension on Chrome following:
    1. Access `chrome://extensions/`
    2. Check `Developer mode`
    3. Click on `Load unpacked extension`
@@ -31,3 +32,14 @@ make or pull your local changes to xverse-core, then:
 cd ../xverse-core && npm i && npm run build:esm && \
 cd $OLDPWD && npm i --legacy-peer-deps @secretkeylabs/xverse-core@../xverse-core && npm start
 ```
+
+### Run UI Tests
+To run ui tests, run:
+```
+npm run uitest
+```
+
+To generate test report, run:
+```
+npm run uitest:report
+```