Merge branch 'main' into tbaut-arrow-squid

packages/ui/cypress/support/commands.ts

@@ -2,7 +2,8 @@
 
 import { AuthRequests, Extension, TxRequests } from './Extension'
 import { MultisigInfo, rejectCurrentMultisigTxs } from '../utils/rejectCurrentMultisigTxs'
-import { InjectedAccountWitMnemonic } from '../fixtures/injectedAccounts'
+import { injectedAccounts, InjectedAccountWitMnemonic } from '../fixtures/injectedAccounts'
+import { topMenuItems } from './page-objects/topMenuItems'
 import 'cypress-wait-until'
 
 // ***********************************************
@@ -43,6 +44,7 @@ import 'cypress-wait-until'
 // }
 
 const extension = new Extension()
+const Account1 = Object.values(injectedAccounts)[0].address
 
 Cypress.Commands.add('initExtension', (accounts: InjectedAccountWitMnemonic[]) => {
   cy.log('Initializing extension')
@@ -59,6 +61,20 @@ Cypress.Commands.add('getAuthRequests', () => {
   return cy.wrap(extension.getAuthRequests())
 })
 
+Cypress.Commands.add('connectAccounts', (accountAddresses = [Account1] as string[]) => {
+  cy.getAuthRequests().then((authRequests) => {
+    const requests = Object.values(authRequests)
+    // we should have 1 connection request to the extension
+    cy.wrap(requests.length).should('eq', 1)
+    // this request should be from the application Multix
+    cy.wrap(requests[0].origin).should('eq', 'Multix')
+    // let's allow Accounts to connect
+    cy.enableAuth(requests[0].id, accountAddresses)
+    // the ui should then move on to connecting to the rpcs
+    topMenuItems.multiproxySelector().should('be.visible')
+  })
+})
+
 Cypress.Commands.add('enableAuth', (id: number, accountAddresses: string[]) => {
   return extension.enableAuth(id, accountAddresses)
 })
@@ -97,6 +113,12 @@ declare global {
        */
       getAuthRequests: () => Chainable<AuthRequests>
 
+      /**
+       * Connect an accounts to the dApp
+       * @param accountAddresses
+       */
+      connectAccounts: (accountAddresses?: string[]) => void
+
       /**
        * Authorize a specific request
        * @param {number} id - the id of the request to authorize. This id is part of the getAuthRequests object response.

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

@@ -0,0 +1,3 @@
+export const newMultisigPage = {
+  addressSelector: () => cy.get('[data-cy="input-account-address"]')
+}

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

@@ -1,6 +1,6 @@
 export const topMenuItems = {
   homeButton: () => cy.get('[data-cy=button-navigate-home]'),
-  newMultisigButton: () => cy.get('[data-cy=button-new-multisig]'),
+  newMultisigButton: () => cy.get('[data-cy=button-navigate-new-multisig]'),
   settingsButton: () => cy.get('[data-cy=button-navigate-settings]'),
   overviewButton: () => cy.get('[data-cy=button-navigate-overview]'),
   aboutButton: () => cy.get('[data-cy=button-navigate-about]'),

packages/ui/cypress/tests/login.cy.ts

@@ -3,6 +3,8 @@ import { landingPageUrl } from '../fixtures/landingData'
 import { landingPage } from '../support/page-objects/landingPage'
 import { topMenuItems } from '../support/page-objects/topMenuItems'
 import { clickOnConnect } from '../utils/clickOnConnect'
+import { newMultisigPage } from '../support/page-objects/newMultisigPage'
+import { accountDisplay } from '../support/page-objects/components/accountDisplay'
 
 describe('Connect Account', () => {
   beforeEach(() => {
@@ -21,22 +23,28 @@ describe('Connect Account', () => {
       // let's allow it for Alice
       cy.rejectAuth(requests[0].id, 'Cancelled')
       // the ui should then move on to connecting to the rpcs
-      landingPage.noAccountFoundError().should('be.visible')
+      landingPage
+        .noAccountFoundError()
+        .should(
+          'contain.text',
+          'No account found. Please connect at least one in a wallet extension.'
+        )
     })
   })
 
-  it('Connects with Alice', () => {
-    const AliceAddress = Object.values(injectedAccounts)[0].address
-    cy.getAuthRequests().then((authRequests) => {
-      const requests = Object.values(authRequests)
-      // we should have 1 connection request to the extension
-      cy.wrap(requests.length).should('eq', 1)
-      // this request should be from the application Multix
-      cy.wrap(requests[0].origin).should('eq', 'Multix')
-      // let's allow it for Alice
-      cy.enableAuth(requests[0].id, [AliceAddress])
-      // the ui should then move on to connecting to the rpcs
-      topMenuItems.multiproxySelector().should('be.visible')
+  it('Connect Accounts', () => {
+    const { address: address1 } = Object.values(injectedAccounts)[0]
+    const { address: address2 } = Object.values(injectedAccounts)[1]
+
+    cy.connectAccounts([address1, address2])
+
+    topMenuItems.newMultisigButton().click()
+    // Click on the account address selector to show the list of accounts
+    newMultisigPage.addressSelector().click()
+
+    accountDisplay.nameLabel().each((el, index) => {
+      const expectedName = Object.values(injectedAccounts)[index].name
+      cy.wrap(el).should('have.text', expectedName)
     })
   })
 })

packages/ui/cypress/tests/transactions.cy.ts

@@ -21,17 +21,7 @@ describe('Perform transactions', () => {
     cy.visit(landingPageUrl)
     cy.initExtension(injectedAccounts)
     clickOnConnect()
-    cy.getAuthRequests().then((authRequests) => {
-      const requests = Object.values(authRequests)
-      // we should have 1 connection request to the extension
-      cy.wrap(requests.length).should('eq', 1)
-      // this request should be from the application Multix
-      cy.wrap(requests[0].origin).should('eq', 'Multix')
-      // let's allow it for Alice
-      cy.enableAuth(requests[0].id, [AliceAddress])
-      // the ui should then move on to connecting to the rpcs
-      topMenuItems.multiproxySelector().should('be.visible')
-    })
+    cy.connectAccounts([AliceAddress])
   })
 
   it('Abort a tx with Alice', () => {

packages/ui/cypress/tests/watched-accounts.cy.ts

@@ -44,7 +44,7 @@ describe('Watched Accounts', () => {
     settingsPage.accountContainer().should('have.length', 0)
   })
 
-  it('can see error when attemping to add same address more than once', () => {
+  it('can see error when attempting to add same address more than once', () => {
     // add an account first
     cy.visit(settingsPageWatchAccountUrl)
     addWatchAccount(addresses.Alice, 'Alice')

packages/ui/src/components/CallInfo.tsx

@@ -104,7 +104,7 @@ const handleBalanceDisplay = ({
 
 const getTypeName = (index: number, name: string, api: ApiPromise) => {
   const [pallet, method] = name.split('.')
-  const metaArgs = !!pallet && !!method && api.tx[pallet][method].meta.args
+  const metaArgs = !!pallet && !!method && api.tx[pallet][method]?.meta?.args
 
   return (
     (!!metaArgs && metaArgs[index] && (metaArgs[index].toHuman().typeName as string)) || undefined
@@ -125,7 +125,7 @@ const createUlTree = ({ name, args, decimals, unit, api, typeName }: CreateTreeP
         }
 
         if (_typeName === 'RuntimeCall') {
-          return handleCallDisplay({ call: value, decimals, unit, api, key: `${key}` })
+          return handleCallDisplay({ call: value, decimals, unit, api, key: `${key}-call` })
         }
 
         // generically show nice value for Balance type