Remaining watch account ui tests

packages/ui/cypress/fixtures/watchAccounts/watchSignatories.ts

@@ -28,3 +28,15 @@ export const watchSignatories = [
     mnemonic: 'mutual pluck punch boy gym key brush dune master aunt track dynamic'
   }
 ]
+
+// signatory that is a member of 3 multisigs. 2 multisig with a pure, 1 multisig without a pure
+export const signatoryOfMultipleMultisigs = {
+  address: '5CUZNrH9eMCvyz3wL5n8V9oJuaaNPKWCGCZZj7UfUV4otHMN',
+  name: 'Signatory of Multiple Multisigs',
+  type: 'sr25519',
+  mnemonic: 'cement risk mutual large fluid run witness vintage civil pipe cost weasel',
+  multisigWithPureAddress1: '5EKfTP24LJvTDLf3GP3vvJASv1jXmcZumFWGcSzVQ66epXZe',
+  multisigWithPureAddress2: '5ENJzVn5CcVrzSi9dfmysrFWQ6Ce5iX3L22sa1bnZN8KvGBT',
+  multisigWithoutPureAddress: '5HoPXnwfDpqhgNYGMSZTzhdvc3TDSvd41XDaVMg7yUo8W5un',
+  publicKey: '0x12315840d264e4274a7122d8150bb8c5205d3cdc1b92a5c854ce90ae9b0f9e77'
+}

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

@@ -1,4 +1,5 @@
 export const multisigPage = {
+  // header elements
   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]'),
@@ -8,5 +9,13 @@ export const multisigPage = {
   transactionList: () => cy.get('[data-cy=container-transaction-list]', { timeout: 20000 }),
   pendingTransactionItem: () => cy.get('[data-cy=container-pending-tx-item]'),
   reviewButton: () => cy.get('[data-cy=button-review-tx]'),
-  setIdentityMenuOption: () => cy.get('[data-cy=menu-option-set-identity]')
+  setIdentityMenuOption: () => cy.get('[data-cy=menu-option-set-identity]'),
+
+  // multisig details elements
+  multisigDetailsContainer: () => cy.get('[data-cy=container-multisig-details]'),
+  multisigAccountSummary: () => cy.get('[data-cy=container-multisig-account-summary]'),
+  thresholdListItem: () => cy.get('[data-cy=list-item-threshold]'),
+  balanceListItem: () => cy.get('[data-cy=list-item-balance]'),
+  signatoriesAccordion: () => cy.get('[data-cy=accordion-signatories]'),
+  expandSignatoriesIcon: () => cy.get('[data-cy=icon-expand-signatories-summary]')
 }

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

@@ -11,6 +11,7 @@ import { watchMultisigs } from '../fixtures/watchAccounts/watchMultisigs'
 import { multisigPage } from '../support/page-objects/multisigPage'
 import { editNamesModal } from '../support/page-objects/modals/editNamesModal'
 import { testAccounts } from '../fixtures/testAccounts'
+import { signatoryOfMultipleMultisigs } from '../fixtures/watchAccounts/watchSignatories'
 
 const addWatchAccount = (address: string, name?: string) => {
   settingsPage.accountAddressInput().type(`${address}{enter}`, { delay: 20 })
@@ -82,7 +83,6 @@ describe('Watched Accounts', () => {
       },
       watchedAccounts: [multisigPublicKey]
     })
-
     // ensure the multisig name is displayed in the settings account container
     settingsPage.accountContainer().within(() => {
       accountDisplay.identicon().should('be.visible')
@@ -239,4 +239,100 @@ describe('Watched Accounts', () => {
         multisigPage.reviewButton().should('not.exist')
       })
   })
+
+  it('can see the same details displayed when watching a pure or its multisig address', () => {
+    const {
+      purePublicKey,
+      pureAddress,
+      publicKey: multisigPublicKey,
+      address: multisigAddress
+    } = watchMultisigs['multisig-with-pure']
+
+    const pureCheck = () => {
+      multisigPage
+        .accountHeader()
+        .should('be.visible')
+        .within(() => {
+          accountDisplay
+            .addressLabel()
+            .should('be.visible')
+            .and('contain.text', pureAddress.slice(0, 6))
+        })
+      multisigPage.multisigDetailsContainer().within(() => {
+        multisigPage.multisigAccountSummary().within(() => {
+          accountDisplay
+            .addressLabel()
+            .should('be.visible')
+            .and('contain.text', multisigAddress.slice(0, 6))
+        })
+      })
+      topMenuItems.multiproxySelector().should('be.visible').first().click()
+      topMenuItems
+        .multiproxySelectorOption()
+        .should('have.length', 1)
+        .within(() => {
+          accountDisplay.pureBadge().should('be.visible')
+          accountDisplay
+            .addressLabel()
+            .should('be.visible')
+            .and('contain.text', pureAddress.slice(0, 6))
+        })
+    }
+
+    // watch the pure public key
+    cy.visitWithLocalStorage({
+      url: landingPageUrl,
+      watchedAccounts: [purePublicKey]
+    })
+    // ensure expected display when watching via the public key
+    pureCheck()
+
+    // now watch via the multisig public key and ensure that we see the same details displayed
+    cy.visitWithLocalStorage({
+      url: landingPageUrl,
+      watchedAccounts: [multisigPublicKey]
+    })
+    // ensure the pure address is still displayed in the account header
+    pureCheck()
+  })
+
+  it('can see all multisigs that a watched signatory is a member of', () => {
+    const { publicKey: signatoryPublicKey } = signatoryOfMultipleMultisigs
+    const expectedAddresses = [
+      signatoryOfMultipleMultisigs.multisigWithPureAddress1,
+      signatoryOfMultipleMultisigs.multisigWithPureAddress2,
+      signatoryOfMultipleMultisigs.multisigWithoutPureAddress
+    ]
+
+    cy.visitWithLocalStorage({
+      url: landingPageUrl,
+      watchedAccounts: [signatoryPublicKey]
+    })
+    topMenuItems.multiproxySelector().should('be.visible').first().click()
+    // ensure all multisigs are displayed in the multiproxy selector
+    topMenuItems
+      .multiproxySelectorOption()
+      .should('have.length', 3)
+      .each(($el, index) => {
+        cy.wrap($el).within(() => {
+          accountDisplay.addressLabel().should('contain.text', expectedAddresses[index].slice(0, 6))
+          if (index < 2) {
+            accountDisplay.pureBadge().should('exist')
+          } else {
+            accountDisplay.multisigBadge().should('exist')
+          }
+        })
+      })
+    // ensure each multisig that the signatory is a member of can be viewed
+    expectedAddresses.forEach((address, index) => {
+      topMenuItems.multiproxySelector().first().click()
+      topMenuItems.multiproxySelectorOption().eq(index).click()
+      multisigPage
+        .accountHeader()
+        .should('be.visible')
+        .within(() => {
+          accountDisplay.addressLabel().should('contain.text', address.slice(0, 6))
+        })
+    })
+  })
 })

packages/ui/src/pages/Home/MultisigAccordion.tsx

@@ -11,13 +11,17 @@ interface AccordionProps {
 
 const MultisigAccordion = ({ multisig }: AccordionProps) => {
   return (
-    <AccordionMuiStyled TransitionProps={{ timeout: { appear: 300, enter: 300, exit: 0 } }}>
+    <AccordionMuiStyled
+      TransitionProps={{ timeout: { appear: 300, enter: 300, exit: 0 } }}
+      data-cy="accordion-signatories"
+    >
       <AccordionSummary
         expandIcon={
           <HiOutlineChevronDown
             color="black"
             size="1rem"
             strokeWidth="2"
+            data-cy="icon-expand-signatories-summary"
           />
         }
       >
@@ -27,7 +31,7 @@ const MultisigAccordion = ({ multisig }: AccordionProps) => {
       </AccordionSummary>
       <AccordionDetails>
         <MultisigPaperStyled key={multisig.address}>
-          <AddressListStyled>
+          <AddressListStyled data-cy="list-item-signatory">
             {multisig?.signatories?.map((signatory) => (
               <li key={signatory}>
                 <AccountDisplay address={signatory} />

packages/ui/src/pages/Home/MultisigView.tsx

@@ -30,9 +30,10 @@ const MultisigView = () => {
               <MultisigWrapperStyled
                 selectedHasProxy={selectedHasProxy}
                 key={multisig.address}
+                data-cy="container-multisig-details"
               >
                 {selectedHasProxy && (
-                  <AccountDisplayWrapperStyled>
+                  <AccountDisplayWrapperStyled data-cy="container-multisig-account-summary">
                     <AccountDisplay
                       address={multisig.address || ''}
                       badge={AccountBadge.MULTI}
@@ -41,12 +42,12 @@ const MultisigView = () => {
                   </AccountDisplayWrapperStyled>
                 )}
                 <List>
-                  <ListElement>
+                  <ListElement data-cy="list-item-threshold">
                     <ListFieldText>Threshold</ListFieldText>
                     <ChipStyled label={`${multisig.threshold}/${multisig.signatories?.length}`} />
                   </ListElement>
                   {selectedHasProxy && (
-                    <ListElement>
+                    <ListElement data-cy="list-item-balance">
                       <ListFieldText>Balance</ListFieldText>
                       <Balance address={multisig.address} />
                     </ListElement>