From 71178fca7bc18749c764f31209a5a02aa20441df Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Tue, 9 Apr 2024 10:09:34 +0100 Subject: [PATCH 1/5] show kilt in UI --- packages/ui/src/constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts index 220a5626..4443515e 100644 --- a/packages/ui/src/constants.ts +++ b/packages/ui/src/constants.ts @@ -210,7 +210,7 @@ export const polkadotNetworksAndParachains: Partial[] 'bifrost-dot', 'hydradx', 'interlay', - // 'kilt', + 'kilt', // 'moonbeam', // 'pendulum', 'phala' From 0fd7c363764fab0a06e38a87911f08be28d68474 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Tue, 9 Apr 2024 10:34:15 +0100 Subject: [PATCH 2/5] clear small UI issues --- .../components/AccountDisplay/AccountDisplay.tsx | 15 +++++++++++---- .../ui/src/components/select/NetworkSelection.tsx | 10 ++++++---- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/AccountDisplay/AccountDisplay.tsx b/packages/ui/src/components/AccountDisplay/AccountDisplay.tsx index fcbeb51b..1ac829cd 100644 --- a/packages/ui/src/components/AccountDisplay/AccountDisplay.tsx +++ b/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} > {getDisplayAddress(encodedAddress)} diff --git a/packages/ui/src/components/select/NetworkSelection.tsx b/packages/ui/src/components/select/NetworkSelection.tsx index 962c609a..302051ef 100644 --- a/packages/ui/src/components/select/NetworkSelection.tsx +++ b/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} > ` +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')` From 1a5c89457932344f3423717e4e893da9ae5dacf1 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Tue, 9 Apr 2024 11:57:39 +0100 Subject: [PATCH 3/5] clear small UI issues and tests --- chopsticks-config.yml | 2 +- .../ui/cypress/support/page-objects/landingPage.ts | 1 + packages/ui/cypress/tests/address-bar.cy.ts | 3 +++ packages/ui/cypress/tests/multisig-creation.cy.ts | 10 +++------- packages/ui/src/components/DeepTxAlert.tsx | 2 +- packages/ui/src/components/NewMulisigAlert.tsx | 1 + packages/ui/src/constants.ts | 2 +- squid/squid-manifests/large-squid.yaml | 6 +++--- 8 files changed, 14 insertions(+), 13 deletions(-) diff --git a/chopsticks-config.yml b/chopsticks-config.yml index 46fab52a..f7ad31b9 100644 --- a/chopsticks-config.yml +++ b/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 diff --git a/packages/ui/cypress/support/page-objects/landingPage.ts b/packages/ui/cypress/support/page-objects/landingPage.ts index a4894e4b..7b658986 100644 --- a/packages/ui/cypress/support/page-objects/landingPage.ts +++ b/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() { diff --git a/packages/ui/cypress/tests/address-bar.cy.ts b/packages/ui/cypress/tests/address-bar.cy.ts index 19fa9741..2bebbc44 100644 --- a/packages/ui/cypress/tests/address-bar.cy.ts +++ b/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=') }) diff --git a/packages/ui/cypress/tests/multisig-creation.cy.ts b/packages/ui/cypress/tests/multisig-creation.cy.ts index f842e6ae..34fa1107 100644 --- a/packages/ui/cypress/tests/multisig-creation.cy.ts +++ b/packages/ui/cypress/tests/multisig-creation.cy.ts @@ -144,14 +144,10 @@ 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') topMenuItems .desktopMenu() diff --git a/packages/ui/src/components/DeepTxAlert.tsx b/packages/ui/src/components/DeepTxAlert.tsx index c0ba7bfe..57ea368c 100644 --- a/packages/ui/src/components/DeepTxAlert.tsx +++ b/packages/ui/src/components/DeepTxAlert.tsx @@ -214,7 +214,7 @@ export const DeepTxAlert = ({ pendingTxCallData }: Props) => { { Your new multisig is being created. It will be available in ~1min from the dropdown. [] 'bifrost-dot', 'hydradx', 'interlay', - 'kilt', + // 'kilt', // 'moonbeam', // 'pendulum', 'phala' diff --git a/squid/squid-manifests/large-squid.yaml b/squid/squid-manifests/large-squid.yaml index f3d789a7..cd0ed744 100644 --- a/squid/squid-manifests/large-squid.yaml +++ b/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', From b30856595eea3f6a67616829e4e2f0008c4e069c Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Tue, 9 Apr 2024 13:12:08 +0100 Subject: [PATCH 4/5] fix test waiting for refresh --- packages/ui/cypress/tests/multisig-creation.cy.ts | 15 +++++++++------ .../ui/cypress/utils/waitForMultisigLength.ts | 13 +++++++++++++ 2 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 packages/ui/cypress/utils/waitForMultisigLength.ts diff --git a/packages/ui/cypress/tests/multisig-creation.cy.ts b/packages/ui/cypress/tests/multisig-creation.cy.ts index 34fa1107..6e604b54 100644 --- a/packages/ui/cypress/tests/multisig-creation.cy.ts +++ b/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') }) @@ -89,7 +92,7 @@ describe('Multisig creation', () => { newMultisigPage.nextButton().should('contain', 'Next').click() }) - it('Create a multisig with a pure proxy', () => { + it.only('Create a multisig with a pure proxy', () => { const multisigName = 'Multisig with proxy' const expectedMultisigAddress = 'D9b1mkwhCwyRMUQZLyyKPdVkiJfFCuyVuWr3EmYAV6ETXkX' @@ -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(() => { @@ -124,7 +125,7 @@ describe('Multisig creation', () => { }) }) - it('Create a multisig without a pure proxy', () => { + it.only('Create a multisig without a pure proxy', () => { const multisigName = 'Multisig without proxy' const expectedMultisigAddress = 'F764i4HX9LvpW14injFtt9MThuifVdic8PnuPtUAVvMDiwD' const expectedMultisigAddressFirst6Char = expectedMultisigAddress.slice(0, 6) @@ -149,6 +150,8 @@ describe('Multisig creation', () => { // The banner should disappear landingPage.multisigCreationInfoBanner().should('not.exist') + waitForMultisigLength(2) + topMenuItems .desktopMenu() .within(() => diff --git a/packages/ui/cypress/utils/waitForMultisigLength.ts b/packages/ui/cypress/utils/waitForMultisigLength.ts new file mode 100644 index 00000000..acf961fe --- /dev/null +++ b/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) + }) + }) From b6a4b68efefed8f9b7862eeed958bf1150e400b0 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Tue, 9 Apr 2024 13:13:50 +0100 Subject: [PATCH 5/5] remove .only --- packages/ui/cypress/tests/multisig-creation.cy.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/cypress/tests/multisig-creation.cy.ts b/packages/ui/cypress/tests/multisig-creation.cy.ts index 6e604b54..9b065f28 100644 --- a/packages/ui/cypress/tests/multisig-creation.cy.ts +++ b/packages/ui/cypress/tests/multisig-creation.cy.ts @@ -92,7 +92,7 @@ describe('Multisig creation', () => { newMultisigPage.nextButton().should('contain', 'Next').click() }) - it.only('Create a multisig with a pure proxy', () => { + it('Create a multisig with a pure proxy', () => { const multisigName = 'Multisig with proxy' const expectedMultisigAddress = 'D9b1mkwhCwyRMUQZLyyKPdVkiJfFCuyVuWr3EmYAV6ETXkX' @@ -125,7 +125,7 @@ describe('Multisig creation', () => { }) }) - it.only('Create a multisig without a pure proxy', () => { + it('Create a multisig without a pure proxy', () => { const multisigName = 'Multisig without proxy' const expectedMultisigAddress = 'F764i4HX9LvpW14injFtt9MThuifVdic8PnuPtUAVvMDiwD' const expectedMultisigAddressFirst6Char = expectedMultisigAddress.slice(0, 6)