Launch Chopsticks forking Kusama and an indexer pointed at it in tests

.github/workflows/cypress-tests.yaml

@@ -3,11 +3,18 @@ on:
   pull_request:
     paths:
       - 'packages/ui/**/*'
+      - '.github/workflows/cypress-tests.yaml'
 jobs:
   cypress-run:
     runs-on: ubuntu-latest
     container:
       image: cypress/browsers:latest
+    services:
+      postgres:
+        image: postgres:14
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: postgres
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -22,17 +29,35 @@ jobs:
           key: ${{ runner.os }}-node_modules-files-build-${{ hashFiles('./yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node_modules-build-
-      - name: Install and show git version
-        run: apt-get -y install git && git --version
-        id: git-install
+      - name: Install indexer deps
+        working-directory: squid
+        run: npm ci
+      - name: run indexer routine
+        working-directory: squid
+        run: |
+          npm run codegen
+          npm run typegen
+          npm run build
+          npm run db:migrate
+        env:
+          DB_HOST: postgres
+
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
         uses: cypress-io/github-action@v6
+        env:
+          VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }}
+          DB_HOST: postgres
+          GQL_PORT: 4350
+          DB_PORT: 5432
         with:
-          working-directory: packages/ui
           install-command: yarn install
-          start: 'yarn start'
+          start: |
+            npm run start:chopsticks
+            yarn ui:start-with-chopsticks
+            npm run indexer:start:chopsticks-ci
+            npm run start:graphql-server
           wait-on: 'http://localhost:3333'
           # custom test command to run
           command: yarn test:ci

README.md

@@ -42,7 +42,7 @@ docker compose up db -d;
 npm run codegen;
 npm run build;
 npm run db:migrate;
-npm run start:indexer # this will start the indexer using the environment variables set in your .env
+npm run start # this will start the indexer using the environment variables set in your .env
 # alternatively, you can run with predefined values, see in /squid/assets/envs/, e.g here with polkadot
 node -r dotenv/config lib/main dotenv_config_path=assets/envs/.env.polkadot
 ```
@@ -61,6 +61,29 @@ From the repository root
 # install all dependencies
 yarn;
 
-# install and launch the db in a docker
+# start Multix UI (accessible on localhost:3333 per default)
 yarn ui:start
 ```
+
+#### Running tests in Cypress
+
+Make sure you have docker.
+
+```bash
+# install all dependancies
+yarn && cd squid && npm ci
+
+# go back to the root
+cd ..
+
+# Launch the full setup. It will:
+# - delete any previous Chopsticks database
+# - launch a docker with the indexer db
+# - launch a Chopsticks node
+# - build and launch a subsquid indexer pointed at Chopsticks
+# - launch a graphQL server for the squid
+# - launch the UI with local env pointed at Chopsticks
+rm db.sqlite*; npm run start:chopsticks-test-build-and-launch-all
+
+yarn ui:test
+```

chopsticks-config.yml

@@ -1,7 +1,9 @@
-endpoint: wss://rococo-rpc.polkadot.io
+endpoint: wss://kusama-rpc.dwellir.com
 mock-signature-host: true
-block: 7717608
+block: 20487320
 db: ./db.sqlite
+# wasm-override: staging_kusama_runtime.wasm
+runtime-log-level: 5
 
 import-storage:
   System:
@@ -10,22 +12,53 @@ import-storage:
         - providers: 1
           data:
             free: '10000000000000000000'
-      - - - 5DqVySMC366P8NRjdyp948TJj64hAvg17eaiEn4ZbuKCNZHc
+      - - - JEqfw2FPda5eycsqqXN2Ay67eEh5R85aSHcArs3XdUYjj5H
         - providers: 1
           data:
             free: '10000000000000000000'
-      - - - 5HKy3cW562kw9zXWQFtMWGqhNYgjLZGntUeYhNFsYcEKqjbc
+      - - - JF3RaX21TrQuPrRbEV7i1iT5QXNQZBN6qvKx3iZN8CEN9bB
         - providers: 1
           data:
             free: '10000000000000000000'
-  Council:
-    Members: [5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY]
-  PhragmenElection:
+      - - - HxehWqUZGorCrahv3PiWWqdcFNBG9oQhZ2ft5VXueWaSBEs
+        - providers: 1
+          data:
+            free: '10000000000000000000'
+  FellowshipCollective:
+    $removePrefix:
+      - IdToIndex
+      - IndexToId
+      - MemberCount
+      - Members
+    IdToIndex:
+      - [[0, 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY], 0]
+      - [[1, 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY], 0]
+      - [[2, 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY], 0]
+      - [[3, 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY], 0]
+      - [[4, 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY], 0]
+      - [[5, 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY], 0]
+      - [[6, 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY], 0]
+      - [[7, 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY], 0]
+    IndexToId:
+      - [[0, 0], 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY]
+      - [[1, 0], 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY]
+      - [[2, 0], 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY]
+      - [[3, 0], 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY]
+      - [[4, 0], 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY]
+      - [[5, 0], 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY]
+      - [[6, 0], 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY]
+      - [[7, 0], 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY]
+    MemberCount:
+      - [[0], 1]
+      - [[1], 1]
+      - [[2], 1]
+      - [[3], 1]
+      - [[4], 1]
+      - [[5], 1]
+      - [[6], 1]
+      - [[7], 1]
     Members:
-      - who: 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY
-        stake: 1000000000000
-        deposit: 1000000000000
-  TechnicalCommittee:
-    Members: [5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY]
-  TechnicalMembership:
-    Members: [5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY]
+      - [[5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY], rank: 7]
+    Voting: []
+  ParasDisputes:
+    $removePrefix: ['disputes'] # those can makes block building super slow

package.json

@@ -22,13 +22,22 @@
     "docker:db": "docker compose up -d db",
     "docker:down": "docker compose down",
     "build": "yarn workspaces foreach run build",
+    "build:indexer": "cd squid && npm run codegen && npm run typegen && npm run build && npm run db:migrate",
     "lint": "yarn workspaces foreach run lint",
     "lint:fix": "yarn workspaces foreach run lint:fix",
     "formatAll": "prettier --write .",
+    "start:chopsticks-test-build-and-launch-all": "concurrently --kill-others 'npm run start:chopsticks' 'npm run ui:start-with-chopsticks' 'npm run docker:down && npm run docker:db && npm run build:indexer && npm run indexer:start:chopsticks-local' 'npm run start:graphql-server'",
+    "start:chopsticks": "npx --yes @acala-network/chopsticks@0.9.4-4 --config chopsticks-config.yml",
+    "start:graphql-server": "cd squid && npm run start:graphql-server",
+    "indexer:start:chopsticks-ci": "cd squid && npm run start:chopsticks-ci",
+    "indexer:start:chopsticks-local": "cd squid && npm run start:chopsticks-local",
     "ui:start": "yarn workspace multix-ui start",
-    "ui:lint": "yarn workspace multix-ui lint"
+    "ui:lint": "yarn workspace multix-ui lint",
+    "ui:test": "yarn workspace multix-ui test",
+    "ui:start-with-chopsticks": "yarn workspace multix-ui start-with-chopsticks"
   },
   "devDependencies": {
+    "concurrently": "^8.2.2",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "prettier": "^3.0.3"

packages/ui/.env.example

@@ -1,4 +1,5 @@
 VITE_NETWORK_NAME="kusama"
 VITE_WS_PROVIDER="wss://kusama-rpc.polkadot.io"
 VITE_GRAPHQL_WS_PROVIDER="ws://localhost:4350/graphql"
-VITE_GRAPHQL_HTTP_PROVIDER="http://localhost:4350/graphql"
+VITE_GRAPHQL_HTTP_PROVIDER="http://localhost:4350/graphql"
+VITE_WALLETCONNECT_PROJECT_ID=""

packages/ui/.env.staging

@@ -0,0 +1,5 @@
+VITE_CHAIN_ID="kusama"
+VITE_NETWORK_NAME="kusama"
+VITE_WS_PROVIDER="ws://localhost:8000"
+VITE_GRAPHQL_WS_PROVIDER="ws://localhost:4350/graphql"
+VITE_GRAPHQL_HTTP_PROVIDER="http://localhost:4350/graphql"

packages/ui/README.md

@@ -41,6 +41,7 @@ VITE_NETWORK_NAME="kusama" # this name is needed to build explorer links
 VITE_WS_PROVIDER="wss://kusama-rpc.polkadot.io" # the front-end will connect to this blockchain node
 VITE_GRAPHQL_WS_PROVIDER="http://localhost:4350/graphql" # url queried for the indexer subscriptions
 VITE_GRAPHQL_HTTP_PROVIDER="http://localhost:4350/graphql" # url queried for the indexer queries
+VITE_WALLETCONNECT_PROJECT_ID="" # a WalletConnect project id
 ```
 
 ## Hacky watch signatory account

packages/ui/cypress/fixtures/testAccounts.ts

@@ -40,5 +40,26 @@ export const testAccounts = {
     name: 'Many Multisig And Pure Member 1',
     type: 'sr25519',
     mnemonic: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk//Alice'
+  } as InjectedAccountWitMnemonic,
+  'Funded Account 1 Chopsticks Kusama': {
+    address: 'JEqfw2FPda5eycsqqXN2Ay67eEh5R85aSHcArs3XdUYjj5H',
+    publicKey: '0xfa8e003cb5d22db1e8658e05245c3bab0851e516b71a8256bc3edf006b817161',
+    name: 'Funded Account 1 Chopsticks',
+    type: 'sr25519',
+    mnemonic: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk//chopsticks/1'
+  } as InjectedAccountWitMnemonic,
+  'Funded Account 2 Chopsticks Kusama': {
+    address: 'JF3RaX21TrQuPrRbEV7i1iT5QXNQZBN6qvKx3iZN8CEN9bB',
+    publicKey: '0xfab5903e86cb55051903d16a94bdd454f8db9e377d79dd6d420dfe9734d00c4f',
+    name: 'Funded Account 2 Chopsticks',
+    type: 'sr25519',
+    mnemonic: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk//chopsticks/2'
+  } as InjectedAccountWitMnemonic,
+  'Funded Account 3 Chopsticks Kusama': {
+    address: 'HxehWqUZGorCrahv3PiWWqdcFNBG9oQhZ2ft5VXueWaSBEs',
+    publicKey: '0xee35231494a285e552ba4592c8e32ac42192f3bb3443618f8e62ecc896f0e749',
+    name: 'Funded Account 3 Chopsticks',
+    type: 'sr25519',
+    mnemonic: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk//chopsticks/3'
   } as InjectedAccountWitMnemonic
 }

packages/ui/cypress/support/Extension.ts

@@ -24,7 +24,6 @@ export type TxRequests = Record<number, TxRequest>
 export type AuthRequests = Record<number, AuthRequest>
 
 export type EnableRequest = number
-
 export class Extension {
   authRequests: AuthRequests = {}
   accounts: InjectedAccountWitMnemonic[] = []
@@ -47,7 +46,7 @@ export class Extension {
     this.keyring = new Keyring({ type: 'sr25519' })
     accounts.forEach(({ mnemonic }) => {
       // we only add to the keyring the accounts with a known mnemonic
-      !!mnemonic && this.keyring?.addFromMnemonic(mnemonic)
+      !!mnemonic && this.keyring?.addFromUri(mnemonic)
     })
   }
 
@@ -68,9 +67,12 @@ export class Extension {
                   const res = () => {
                     const registry = new TypeRegistry()
                     registry.setSignedExtensions(payload.signedExtensions)
-                    const pair = this.keyring?.getPair(this.accounts[0].address)
+                    const pair = this.keyring?.getPair(payload.address)
                     if (!pair) {
-                      console.error('Pair not found')
+                      console.error(
+                        `Pair not found for encoded address ${payload.address}, with keyring:`,
+                        this.keyring?.toJson
+                      )
                       return
                     }
                     const signature = registry

packages/ui/cypress/support/page-objects/landingPage.ts

@@ -13,6 +13,7 @@ export const landingPage = {
   noAccountFoundError: () => cy.get('[data-cy=label-no-account-found]', { timeout: 10000 }),
   linkedAddressNotFound: () => cy.get('[data-cy=label-linked-address-not-found]'),
   resetLinkedAddressButton: () => cy.get('[data-cy=button-reset-linked-address]'),
+  firstMultisigCreationLabel: () => cy.get('[data-cy=label-first-multisig-creation'),
 
   // page specific assertion
   shouldHaveNoAccountErrorAndWikiLink() {

packages/ui/cypress/support/page-objects/multisigPage.ts

@@ -1,5 +1,5 @@
 export const multisigPage = {
-  accountHeader: () => cy.get('[data-cy=header-account]'),
+  accountHeader: (timeout = 4000) => cy.get('[data-cy=header-account]', { timeout }),
   seeOverviewButton: () => cy.get('[data-cy=button-see-overview]'),
   newTransactionButton: () => cy.get('[data-cy=button-new-transaction]'),
   optionsMenuButton: () => cy.get('[data-cy=button-options-menu]'),

packages/ui/cypress/support/page-objects/newMultisigPage.ts

@@ -1,3 +1,8 @@
 export const newMultisigPage = {
-  addressSelector: () => cy.get('[data-cy=input-account-address]')
+  addressSelector: () => cy.get('[data-cy=input-account-address]'),
+  addButton: () => cy.get('[data-cy=button-add-account]'),
+  nextButton: () => cy.get('[data-cy=button-next]'),
+  thresholdInput: () => cy.get('[data-cy=input-threshold-creation'),
+  nameInput: () => cy.get('[data-cy=input-name-creation'),
+  creatingLoader: () => cy.get('[data-cy=button-creating-loader')
 }

packages/ui/cypress/support/page-objects/notifications.ts

@@ -1,6 +1,7 @@
 export const notifications = {
-  successNotificationIcon: () => cy.get('[data-cy=notification-icon-success]'),
+  successNotificationIcon: (timeout = 4000) =>
+    cy.get('[data-cy=notification-icon-success]', { timeout }),
   errorNotificationIcon: () => cy.get('[data-cy=notification-icon-error]'),
   loadingNotificationIcon: () => cy.get('[data-cy=notification-icon-loading]'),
-  notificationWrapper: () => cy.get('[data-cy=notification-wrapper]')
+  notificationWrapper: (timeout = 4000) => cy.get('[data-cy=notification-wrapper]', { timeout })
 }

packages/ui/cypress/support/page-objects/settingsPage.ts

@@ -3,7 +3,7 @@ export const settingsPage = {
   watchedAccountsAccordion: () => cy.get('[data-cy=accordion-title-watched-accounts]'),
   accountAddressInput: () => cy.get('[data-cy=input-account-address]'),
   accountNameInput: () => cy.get('[data-cy=input-account-name]'),
-  addButton: () => cy.get('[data-cy=button-add-watched-account]'),
+  addButton: () => cy.get('[data-cy=button-add-account]'),
   accountContainer: () => cy.get('[data-cy=container-account-details]', { timeout: 20000 }),
   accountDeleteButton: () => cy.get('[data-cy=button-delete-watched-account]'),
   errorLabel: () => cy.get('[data-cy=label-watch-account-error]'),

packages/ui/cypress/tests/multisig-creation.cy.ts

@@ -0,0 +1,56 @@
+import { landingPageNetwork } from '../fixtures/landingData'
+import { testAccounts } from '../fixtures/testAccounts'
+import { accountDisplay } from '../support/page-objects/components/accountDisplay'
+import { landingPage } from '../support/page-objects/landingPage'
+import { multisigPage } from '../support/page-objects/multisigPage'
+import { newMultisigPage } from '../support/page-objects/newMultisigPage'
+import { notifications } from '../support/page-objects/notifications'
+import { topMenuItems } from '../support/page-objects/topMenuItems'
+import { clickOnConnect } from '../utils/clickOnConnect'
+
+const { address: address1 } = testAccounts['Funded Account 1 Chopsticks Kusama']
+const { address: address2 } = testAccounts['Funded Account 2 Chopsticks Kusama']
+const { address: address3 } = testAccounts['Funded Account 3 Chopsticks Kusama']
+
+const typeAndAdd = (address: string) => {
+  newMultisigPage.addressSelector().click().type(`${address}{downArrow}{enter}`)
+  newMultisigPage.addButton().click()
+}
+describe('Multisig creation', () => {
+  beforeEach(() => {
+    cy.visit(landingPageNetwork('local'))
+    cy.initExtension(Object.values(testAccounts))
+    clickOnConnect()
+    cy.connectAccounts([address1, address2, address3])
+  })
+
+  it('Create a multisig tx with proxy', () => {
+    topMenuItems.newMultisigButton().click()
+    typeAndAdd(address1)
+    typeAndAdd(address2)
+    typeAndAdd(address3)
+    newMultisigPage.nextButton().should('contain', 'Next').click()
+    newMultisigPage.thresholdInput().type('2')
+    newMultisigPage.nameInput().type('Some Name')
+    newMultisigPage.nextButton().should('contain', 'Next').click()
+    newMultisigPage.nextButton().should('contain', 'Create').click()
+    cy.getTxRequests().then((req) => {
+      const txRequests = Object.values(req)
+      cy.wrap(txRequests.length).should('eq', 1)
+      cy.wrap(txRequests[0].payload.address).should('eq', address1)
+      newMultisigPage.nextButton().should('not.exist')
+      newMultisigPage.creatingLoader().should('exist')
+      cy.approveTx(txRequests[0].id)
+      notifications.notificationWrapper(10000).should('have.length', 1)
+      notifications.loadingNotificationIcon().should('be.visible')
+      notifications.notificationWrapper().should('contain', 'broadcast')
+
+      notifications.successNotificationIcon(30000).should('be.visible')
+      notifications.notificationWrapper().should('contain', 'Tx in block')
+      const expectedMultisigAddress = 'D9b1mkwhCwyRMUQZLyyKPdVkiJfFCuyVuWr3EmYAV6ETXkX'
+      multisigPage.accountHeader(10000).within(() => {
+        accountDisplay.addressLabel().should('contain.text', expectedMultisigAddress.slice(0, 6))
+      })
+    })
+  })
+})

packages/ui/package.json

@@ -54,6 +54,7 @@
   },
   "scripts": {
     "start": "vite --port 3333",
+    "start-with-chopsticks": "vite --port 3333 --mode staging",
     "build": "tsc && vite build",
     "serve": "vite preview",
     "lint": "eslint --color 'src/**/*.{js,ts,tsx}'",