Merge branch 'develop' into 639-improve-unlock-wallet-user-experience

# Conflicts:
#	package.json

.eslintrc

@@ -2,12 +2,11 @@
   "extends": [
     "react-app",
     "plugin:jsx-a11y/recommended",
-    "prettier",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
   ],
   "plugins": [
     "jsx-a11y",
-    "prettier",
     "react-hooks"
   ],
   "parser": "@typescript-eslint/parser",
@@ -16,11 +15,6 @@
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": ["error"],
-    "jsx-a11y/no-autofocus": "off",
-    "prettier/prettier": [
-      "warn", {
-        "semi": true
-      }
-    ]
+    "jsx-a11y/no-autofocus": "off"
   }
 }

.github/pull_request_template.md

@@ -6,7 +6,7 @@ _**Make sure to fill in all the below sections.**_
 
 ## Linked tickets
 
-// Add a `#XXX` link to a related ticket
+[WALLET-XXX](https://make-software.atlassian.net/browse/WALLET-XXX)
 
 ## Checklist
 

.github/workflows/e2e-onboarding-tests.yml

@@ -8,51 +8,36 @@ on:
 
 jobs:
   e2e-onboarding-tests:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
-
     container:
-      image: node:16
-
-    strategy:
-      fail-fast: false
-      matrix:
-# Add Firefox after fixing CI errors
-        browser: [ 'chrome' ]
-        node-version: [ 16.x ]
-
-    services:
-      selenium:
-        image: selenium/standalone-${{ matrix.browser }}
+      image: mcr.microsoft.com/playwright:v1.39.0-jammy
 
     steps:
       - uses: actions/checkout@v3
-
-      - name: Cache npm dependencies
-        id: cache-npm
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-node-modules
-        with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
+          node-version: 18
 
       - name: Install dependencies
-        run: |
-          npm install
-
-      - name: Run E2E onboarding tests on ${{ matrix.browser }}
-        run: npm run test:e2e:${{ matrix.browser }}:headless:onboarding
-        env:
-          SELENIUM_HOST: selenium
-          SELENIUM_PORT: 4444
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Chrome tests
+        run: npm run e2e:chrome:headless:onboarding
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 30

.github/workflows/e2e-popup-tests.yml

@@ -8,59 +8,36 @@ on:
 
 jobs:
   e2e-popup-tests:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
-
     container:
-      image: node:16
-
-    strategy:
-      fail-fast: false
-      matrix:
-# Add Firefox after fixing CI errors
-        browser: [ 'chrome' ]
-        node-version: [ 16.x ]
-
-    services:
-      selenium:
-        image: selenium/standalone-${{ matrix.browser }}
-        options: --shm-size=2gb
+      image: mcr.microsoft.com/playwright:v1.39.0-jammy
 
     steps:
       - uses: actions/checkout@v3
-
-      - name: Cache npm dependencies
-        id: cache-npm
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-node-modules
-        with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
+          node-version: 18
 
       - name: Install dependencies
-        run: |
-          npm install
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Chrome tests
+        run: npm run e2e:chrome:headless:popup
 
-      - name: Run E2E popup tests on ${{ matrix.browser }}
-        run: npm run test:e2e:${{ matrix.browser }}:headless:popup
-        env:
-          SELENIUM_HOST: selenium
-          SELENIUM_PORT: 4444
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
 
-      - name: Add screenshot
-        uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v3
         if: failure()
         with:
-          name: ${{ matrix.browser }}
-          path: test-artifacts/
+          name: test-results
+          path: test-results/
+          retention-days: 30

.gitignore

@@ -30,3 +30,7 @@ secrets.*.js
 
 # packed extension
 chrome.crx
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.nvmrc

@@ -1 +1 @@
-v16
+v16.20.0

README.md

@@ -6,6 +6,10 @@
 
 ---
 
+## Integrate Casper Wallet Into Your App
+
+The recommended way of integrating Casper Wallet into your app is through [CSPR.click](https://CSPR.click), which provides a combined integration of major wallets in the Casper ecosystem, all at once, without the burden of maintaining multiple integrations at the same time. Please head over to [the CSPR.click documentation](https://docs.cspr.click) to start.
+
 ## Testing Casper Wallet integration on **Casper Wallet Playground**
 
 *Casper Wallet Playground is a React webapp created as a developer tool to help test integration with various features available in Casper Wallet.*
@@ -154,13 +158,10 @@ You should install Redux DevTools browser extension and connect it to Redux DevT
 
 ## E2E tests
 
-Write tests into `e2e/tests` folder.
+Write tests into `e2e-tests` folder.
 
-There are a few options to run tests:
+To run e2e tests, you must use npm script `npm run e2e:chrome:ui:popup` or `e2e:chrome:ui:onboarding`.
+Tests are run in UI mode.
 
-1. In docker container
-   - Run docker and up containers. `docker compose up` or `docker-compose -f docker-compose.arm.yml up` for Apple M processors
-   - Use npm scripts `npm run test:e2e:{chrome/firefox}:headless:{popup/onboarding}` depends on target browser and tests
-   - To see what is happening inside the container, open your web browser and navigate to the URL <http://localhost:7900> for Chrome and <http://localhost:7901> for Firefox, enter the password `secret`, and run your test again
-2. Locally on computer
-   - Use npm scripts `npm run test:e2e:chrome` or `npm run test:e2e:firefox` depends on target browser
+All information
+about how to run and debug tests can be found in [playwright docs](https://playwright.dev/docs/running-tests).

constants.js

@@ -1,4 +1,3 @@
-const { Browser } = require('selenium-webdriver');
 const { NODE_ENV, BROWSER: browserEnvVar } = require('./utils/env');
 
 const extensionName = 'Casper Wallet';
@@ -7,9 +6,9 @@ const buildRootDir = ['test', 'production'].includes(NODE_ENV)
   : 'output';
 
 const ExtensionBuildPath = {
-  Chrome: `${buildRootDir}/${Browser.CHROME}`,
-  Firefox: `${buildRootDir}/${Browser.FIREFOX}`,
-  Safari: `${buildRootDir}/${Browser.SAFARI}/${extensionName}`
+  Chrome: `${buildRootDir}/chrome`,
+  Firefox: `${buildRootDir}/firefox`,
+  Safari: `${buildRootDir}/safari/${extensionName}`
 };
 
 const ManifestPath = {
@@ -18,16 +17,15 @@ const ManifestPath = {
   v2_Safari: 'src/manifest.v2.safari.json'
 };
 
-const isSafari = browserEnvVar && browserEnvVar === Browser.SAFARI;
-const isChrome = browserEnvVar && browserEnvVar === Browser.CHROME;
-const isFirefox = browserEnvVar && browserEnvVar === Browser.FIREFOX;
+const isSafari = browserEnvVar && browserEnvVar === 'safari';
+const isChrome = browserEnvVar && browserEnvVar === 'chrome';
+const isFirefox = browserEnvVar && browserEnvVar === 'firefox';
 
 module.exports = {
   ExtensionBuildPath,
   extensionName,
   browserEnvVar,
   ManifestPath,
-  Browser,
   isFirefox,
   isSafari,
   isChrome

e2e/account_secret_key.pem → e2e-tests/account_secret_key.pem

@@ -1,3 +1,3 @@
------BEGIN PRIVATE KEY-----
-MC4CAQAwBQYDK2VwBCIEIHRZr1HEgKVbgchuatwA7dCWDWB7QZe+bpDb5dguIyLE
------END PRIVATE KEY-----
+-----BEGIN PRIVATE KEY-----
+MC4CAQAwBQYDK2VwBCIEIHRZr1HEgKVbgchuatwA7dCWDWB7QZe+bpDb5dguIyLE
+-----END PRIVATE KEY-----

e2e-tests/constants.ts

@@ -0,0 +1,47 @@
+import path from 'path';
+
+export const vaultPassword = '3hQqzYn4C7Y8rEZTVEZb';
+export const recoverSecretPhrase =
+  'hold matrix spider subway bottom jazz charge fire lawn valley stay coil moral hospital dream cycle multiply december agree huge major tower devote old';
+export const secretKeyPath = path.join(__dirname, './account_secret_key.pem');
+
+export const ACCOUNT_NAMES = {
+  defaultFirstAccountName: 'Account 1',
+  defaultSecondAccountName: 'Account 2',
+  createdAccountName: 'New account 1',
+  importedAccountName: 'Imported account',
+  renamedAccountName: 'Renamed account'
+};
+
+export const PLAYGROUND_URL = 'https://casper-wallet-playground.make.services/';
+
+export const IMPORTED_ACCOUNT = {
+  accountName: ACCOUNT_NAMES.importedAccountName,
+  publicKey:
+    '0184f6d260f4ee6869ddb36affe15456de6ae045278fa2f467bb677561ce0dad55',
+  truncatedPublicKey: '0184f...dad55'
+};
+
+export const DEFAULT_FIRST_ACCOUNT = {
+  accountName: ACCOUNT_NAMES.defaultFirstAccountName,
+  publicKey:
+    '0202b1943511b8c23b1b2b8ed7ddcedffcc7be70d9366a5005c7beab08a81b7ae633',
+  truncatedPublicKey: '0202b...ae633'
+};
+
+export const DEFAULT_SECOND_ACCOUNT = {
+  accountName: ACCOUNT_NAMES.defaultSecondAccountName,
+  publicKey:
+    '0203b2e05f074452f5e69ba512310deceaca152ebd3394eadcec26c6e68e91aa7724',
+  truncatedPublicKey: '0203b...a7724'
+};
+
+export const VALIDATOR = {
+  name: 'Validator',
+  truncatedPublicKey: '0106c...ca2ca'
+};
+
+export const NEW_VALIDATOR = {
+  name: 'New validator',
+  truncatedPublicKey: '017d9...2009e'
+};