Various UI and test fixes

chopsticks-config.yml

@@ -1,4 +1,4 @@
-endpoint: wss://kusama.rpc.amforc.com
+endpoint: wss://rpc.ibp.network/kusama
 mock-signature-host: true
 block: 22568290
 db: ./db.sqlite

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

@@ -18,6 +18,7 @@ export const landingPage = {
     cy.get('[data-cy=label-first-multisig-creation', { timeout: 30000 }),
   multisigCreationInfoBanner: (timeout = 4000) =>
     cy.get('[data-cy=banner-multisig-creation-info]', { timeout }),
+  creationInfoBannerCloseButton: () => cy.get('[data-cy=button-close-multisig-creation-info]'),
 
   // page specific assertion
   shouldHaveNoAccountErrorAndWikiLink() {

packages/ui/cypress/tests/address-bar.cy.ts

@@ -263,6 +263,9 @@ describe('Account address in the address bar', () => {
 
     topMenuItems.desktopMenu().within(() => topMenuItems.networkSelector().click())
     topMenuItems.networkSelectorOption('kusama').click()
+    landingPage
+      .noMultisigFoundError()
+      .should('contain.text', 'No multisig found for your accounts or watched accounts on kusama.')
     cy.url().should('not.include', 'address=')
   })
 

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

@@ -7,6 +7,7 @@ import { notifications } from '../support/page-objects/notifications'
 import { topMenuItems } from '../support/page-objects/topMenuItems'
 import { landingPage } from '../support/page-objects/landingPage'
 import { waitForTxRequest } from '../utils/waitForTxRequests'
+import { waitForMultisigLength } from '../utils/waitForMultisigLength'
 
 const fundedAccount1 = testAccounts['Funded Account 1 Chopsticks Kusama']
 const fundedAccount2 = testAccounts['Funded Account 2 Chopsticks Kusama']
@@ -23,7 +24,7 @@ const typeAndAdd = (address: string) => {
   newMultisigPage.addButton().click()
 }
 
-const acceptMultisigCreationAndVerifyNotifications = () => {
+const acceptMultisigCreationAndVerifyNotifications = (firstMultisig = false) => {
   waitForTxRequest()
   cy.getTxRequests().then((req) => {
     const txRequests = Object.values(req)
@@ -36,6 +37,8 @@ const acceptMultisigCreationAndVerifyNotifications = () => {
     notifications.loadingNotificationIcon().should('be.visible')
     notifications.notificationWrapper().should('contain', 'broadcast')
 
+    firstMultisig && landingPage.firstMultisigCreationLabel().should('be.visible')
+
     notifications.successNotificationIcon(30000).should('be.visible')
     notifications.notificationWrapper().should('contain', 'Tx in block')
   })
@@ -102,9 +105,7 @@ describe('Multisig creation', () => {
       newMultisigPage.step3.infoBox().should('contain', '1 batch transaction')
       newMultisigPage.step3.errorNotEnoughFunds().should('not.exist')
       newMultisigPage.nextButton().should('contain', 'Create').click()
-      acceptMultisigCreationAndVerifyNotifications()
-
-      landingPage.firstMultisigCreationLabel().should('be.visible')
+      acceptMultisigCreationAndVerifyNotifications(true)
 
       // Landing Page
       multisigPage.accountHeader(10000).within(() => {
@@ -144,14 +145,12 @@ describe('Multisig creation', () => {
 
       // The banner should be there, and disapear within 30s
       landingPage.multisigCreationInfoBanner().should('be.visible')
+      landingPage.creationInfoBannerCloseButton().click()
 
-      cy.clock().then((clock) => {
-        // The banner should disapear after 30s, speed it up by 15s
-        clock.tick(15000)
-        // The banner should disappear
-        landingPage.multisigCreationInfoBanner(30000).should('not.exist')
-        clock.restore()
-      })
+      // The banner should disappear
+      landingPage.multisigCreationInfoBanner().should('not.exist')
+
+      waitForMultisigLength(2)
 
       topMenuItems
         .desktopMenu()

packages/ui/cypress/utils/waitForMultisigLength.ts

@@ -0,0 +1,13 @@
+import { multisigPage } from '../support/page-objects/multisigPage'
+import { topMenuItems } from '../support/page-objects/topMenuItems'
+
+export const waitForMultisigLength = (length: number) =>
+  cy.waitUntil(() => {
+    multisigPage.accountHeader().click()
+    return topMenuItems
+      .multiproxySelectorDesktop()
+      .click()
+      .then(() => {
+        return topMenuItems.multiproxySelectorOptionDesktop().then((el) => el.length === length)
+      })
+  })

packages/ui/src/components/AccountDisplay/AccountDisplay.tsx

@@ -1,5 +1,5 @@
 import { Box, Tooltip } from '@mui/material'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { styled } from '@mui/material/styles'
 import { AccountBadge, IconSizeVariant } from '../../types'
 import { getDisplayAddress } from '../../utils'
@@ -55,7 +55,16 @@ const AccountDisplay = ({
       address
     })
 
-  const handleTooltipClose = useCallback(() => setIsCopyTooltipOpen(false), [])
+  useEffect(() => {
+    let timeOut: NodeJS.Timeout
+
+    if (isCopyTooltipOpen) {
+      timeOut = setTimeout(() => setIsCopyTooltipOpen(false), DEFAULT_AUTO_HIDE_DURATION)
+    }
+
+    return () => timeOut && clearTimeout(timeOut)
+  }, [isCopyTooltipOpen])
+
   const handleCopyAddress = useCallback(() => {
     if (!canCopy) return
 
@@ -132,11 +141,9 @@ const AccountDisplay = ({
           onClick={handleCopyAddress}
         >
           <Tooltip
-            onClose={handleTooltipClose}
             open={isCopyTooltipOpen}
             title={DEFAULT_TITLE}
             placement={DEFAULT_PLACEMENT}
-            leaveDelay={DEFAULT_AUTO_HIDE_DURATION}
           >
             <AddressWrapperStyled>{getDisplayAddress(encodedAddress)}</AddressWrapperStyled>
           </Tooltip>

packages/ui/src/components/DeepTxAlert.tsx

@@ -214,7 +214,7 @@ export const DeepTxAlert = ({ pendingTxCallData }: Props) => {
         <InfoTextStyled
           container
           spacing={0}
-          data-cy="banner-multisig-creation-info"
+          data-cy="banner-nested-multisig-tx"
         >
           <Grid
             item

packages/ui/src/components/NewMulisigAlert.tsx

@@ -21,6 +21,7 @@ const NewMulisigAlert = ({ className = '', onClose }: Props) => {
         Your new multisig is being created. It will be available in ~1min from the dropdown.
       </div>
       <IconButton
+        data-cy="button-close-multisig-creation-info"
         className="closeButton"
         size="small"
         aria-label="close"

packages/ui/src/components/select/NetworkSelection.tsx

@@ -47,7 +47,7 @@ const NetworkSelection = () => {
           key={networkName}
           value={networkName}
           data-cy={`select-network-option-${networkName}`}
-          isOneLine={displayedNetworks.length === 1}
+          className={displayedNetworks.length === 1 ? 'oneLine' : undefined}
         >
           <ImgStyled
             alt={`network-logo-${networkName}`}
@@ -197,13 +197,15 @@ const SelectStyled = styled(SelectMui)`
   }
 `
 
-const MenuItemStyled = styled(MenuItem)<{ isOneLine: boolean }>`
+const MenuItemStyled = styled(MenuItem)`
   text-transform: capitalize;
   padding: 0.75rem;
   max-width: 9.1875rem;
   box-sizing: content-box;
-  // Fix for correct display of the one line networks list in Safari
-  ${({ isOneLine }) => isOneLine && 'column-span: all'}
+
+  &.oneLine {
+    column-span: all;
+  }
 `
 
 const ImgStyled = styled('img')`

squid/squid-manifests/large-squid.yaml

@@ -44,8 +44,8 @@ deploy:
       cmd: ['sqd', 'start-westend']
     - name: paseo-processor
       cmd: ['sqd', 'start-paseo']
-    - name: kilt-processor
-      cmd: ['sqd', 'start-kilt']
+    # - name: kilt-processor
+    #   cmd: ['sqd', 'start-kilt']
     # - name: joystream-processor
     #   cmd: ['sqd', 'start-joystream']
     # - name: watr-processor
@@ -56,7 +56,7 @@ deploy:
     #   cmd: ['sqd', 'start-amplitude']
   api:
     env:
-      SQD_DEBUG: sqd:graphql-server
+      # SQD_DEBUG: sqd:graphql-server
     cmd:
       [
         'npx',