Merge branch 'dev' of github.com:safe-global/safe-wallet-web into ana…

…lytics

.github/workflows/nextjs_bundle_analysis.yml

@@ -0,0 +1,65 @@
+# Copyright (c) HashiCorp, Inc.
+# SPDX-License-Identifier: MPL-2.0
+
+name: 'Next.js Bundle Analysis'
+
+on:
+  pull_request:
+  push:
+    branches:
+      - dev
+
+permissions:
+  contents: read # for checkout repository
+  actions: read # for fetching base branch bundle stats
+  pull-requests: write # for comments
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install dependencies
+        uses: ./.github/workflows/yarn
+
+      - name: Build next.js app
+        uses: ./.github/workflows/build
+        with:
+          secrets: ${{ toJSON(secrets) }}
+
+      - name: Analyze bundle
+        run: npx -p nextjs-bundle-analysis report
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v3
+        with:
+          name: bundle
+          path: .next/analyze/__bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: nextjs_bundle_analysis.yml
+          branch: ${{ github.event.pull_request.base.ref }}
+          path: .next/analyze/base
+
+      - name: Compare with base branch bundle
+        if: success() && github.event.number
+        run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
+
+      - name: Get Comment Body
+        id: get-comment-body
+        if: success() && github.event.number
+        # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings
+        run: |
+          echo "body<<EOF" >> $GITHUB_OUTPUT
+          echo "$(cat .next/analyze/__bundle_analysis_comment.txt)" >> $GITHUB_OUTPUT
+          echo EOF >> $GITHUB_OUTPUT
+
+      - name: Comment
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: next-bundle-analysis
+          message: ${{ steps.get-comment-body.outputs.body }}

.gitignore

@@ -52,4 +52,5 @@ yalc.lock
 /public/worker-*.js
 /public/workbox-*.js
 /public/workbox-*.js.map
-/public/fallback*
+/public/fallback*
+/public/*.js.LICENSE.txt

cypress/e2e/pages/dashboard.pages.js

@@ -5,6 +5,8 @@ const transactionQueueStr = 'Pending transactions'
 const noTransactionStr = 'This Safe has no queued transactions'
 const overviewStr = 'Overview'
 const viewAssetsStr = 'View assets'
+const sendStr = 'Send'
+const receiveStr = 'Receive'
 const tokensStr = 'Tokens'
 const nftStr = 'NFTs'
 const viewAllStr = 'View all'
@@ -27,11 +29,10 @@ export function verifyOverviewWidgetData() {
 
   cy.get('@overviewSection').within(() => {
     // Prefix is separated across elements in EthHashInfo
-    cy.contains(constants.SEPOLIA_TEST_SAFE_5).should('exist')
     cy.get('h2').contains('Overview')
-    cy.get(`a[href="${constants.BALANCE_URL}${encodeURIComponent(constants.SEPOLIA_TEST_SAFE_5)}"]`).contains(
-      viewAssetsStr,
-    )
+    cy.get(`a[href="${constants.BALANCE_URL}${encodeURIComponent(constants.SEPOLIA_TEST_SAFE_5)}"]`).contains('Tokens')
+    cy.get('button').contains(sendStr)
+    cy.get('button').contains(receiveStr)
   })
 }
 

cypress/e2e/pages/main.page.js

@@ -1,6 +1,7 @@
 import * as constants from '../../support/constants'
 
 const acceptSelection = 'Accept selection'
+export const modalDialogCloseBtn = '[data-testid="modal-dialog-close-btn"]'
 
 export function clickOnSideMenuItem(item) {
   cy.get('p').contains(item).click()

cypress/e2e/pages/nfts.pages.js

@@ -1,8 +1,22 @@
 import * as constants from '../../support/constants'
+import * as main from '../pages/main.page'
 
-const nftModal = 'div[role="dialog"]'
-const nftModalCloseBtn = 'button[aria-label="close"]'
+const nftModalTitle = '[data-testid="modal-title"]'
+const nftModal = '[data-testid="modal-view"]'
+
+const nftModalCloseBtn = main.modalDialogCloseBtn
 const recipientInput = 'input[name="recipient"]'
+const nftsRow = '[data-testid^="nfts-table-row"]'
+const inactiveNftIcon = '[data-testid="nft-icon-border"]'
+const activeNftIcon = '[data-testid="nft-icon-primary"]'
+const nftCheckBox = (index) => `[data-testid="nft-checkbox-${index}"] > input`
+const activeSendNFTBtn = '[data-testid="nft-send-btn-false"]'
+const modalTitle = '[data-testid="modal-title"]'
+const modalHeader = '[data-testid="modal-header"]'
+const modalSelectedNFTs = '[data-testid="selected-nfts"]'
+const nftItemList = '[data-testid="nft-item-list"]'
+const nftItemNane = '[data-testid="nft-item-name"]'
+const signBtn = '[data-testid="sign-btn"]'
 
 const noneNFTSelected = '0 NFTs selected'
 const sendNFTStr = 'Send NFTs'
@@ -19,52 +33,57 @@ export function clickOnNftsTab() {
   cy.get('p').contains('NFTs').click()
 }
 function verifyTableRows(number) {
-  cy.get('tbody tr').should('have.length', number)
+  cy.scrollTo('bottom').wait(500)
+  cy.get(nftsRow).should('have.length.at.least', number)
 }
 
 export function verifyNFTNumber(number) {
   verifyTableRows(number)
 }
 
 export function verifyDataInTable(name, address, tokenID) {
-  cy.get('tbody tr:first-child').contains('td:first-child', name)
-  cy.get('tbody tr:first-child').contains('td:first-child', address)
-  cy.get('tbody tr:first-child').contains('td:nth-child(2)', tokenID)
+  cy.get(nftsRow).contains(name)
+  cy.get(nftsRow).contains(address)
+  cy.get(nftsRow).contains(tokenID)
 }
 
-export function openNFT(index) {
-  cy.get('tbody').within(() => {
-    cy.get('tr').eq(index).click()
-  })
+export function waitForNftItems(count) {
+  cy.get(nftsRow).should('have.length.at.least', count)
+}
+
+export function openActiveNFT(index) {
+  cy.get(activeNftIcon).eq(index).click()
 }
 
 export function verifyNameInNFTModal(name) {
-  cy.get(nftModal).contains(name)
+  cy.get(nftModalTitle).contains(name)
 }
 
 export function verifySelectedNetwrokSepolia() {
-  cy.get(nftModal).contains(constants.networks.sepolia)
+  cy.get(nftModal).within(() => {
+    cy.get(nftModalTitle).contains(constants.networks.sepolia)
+  })
 }
 
 export function verifyNFTModalLink(link) {
-  cy.get(nftModal).contains(`a[href="${link}"]`, 'View on OpenSea')
+  cy.get(nftModalTitle).contains(`a[href="${link}"]`, 'View on OpenSea')
 }
 
 export function closeNFTModal() {
   cy.get(nftModalCloseBtn).click()
-  cy.get(nftModal).should('not.exist')
+  cy.get(nftModalTitle).should('not.exist')
 }
 
-export function clickOn6thNFT() {
-  cy.get('tbody tr:nth-child(6) td:nth-child(2)').click()
+export function clickOnInactiveNFT() {
+  cy.get(inactiveNftIcon).eq(0).click()
 }
 export function verifyNFTModalDoesNotExist() {
-  cy.get(nftModal).should('not.exist')
+  cy.get(nftModalTitle).should('not.exist')
 }
 
 export function selectNFTs(numberOfNFTs) {
   for (let i = 1; i <= numberOfNFTs; i++) {
-    cy.get(`tbody tr:nth-child(${i}) input[type="checkbox"]`).click()
+    cy.get(nftCheckBox(i)).click()
     cy.contains(`${i} NFT${i > 1 ? 's' : ''} selected`)
   }
   cy.contains('button', `Send ${numberOfNFTs} NFT${numberOfNFTs > 1 ? 's' : ''}`)
@@ -73,8 +92,8 @@ export function selectNFTs(numberOfNFTs) {
 export function deselectNFTs(checkboxIndexes, checkedItems) {
   let total = checkedItems - checkboxIndexes.length
 
-  checkboxIndexes.forEach((index) => {
-    cy.get(`tbody tr:nth-child(${index}) input[type="checkbox"]`).uncheck()
+  checkboxIndexes.forEach((i) => {
+    cy.get(nftCheckBox(i)).uncheck()
   })
 
   cy.contains(`${total} NFT${total !== 1 ? 's' : ''} selected`)
@@ -88,14 +107,12 @@ export function verifyInitialNFTData() {
   cy.contains('button[disabled]', 'Send')
 }
 
-export function sendNFT(numberOfCheckedNFTs) {
-  cy.contains('button', `Send ${numberOfCheckedNFTs} NFT${numberOfCheckedNFTs !== 1 ? 's' : ''}`).click()
+export function sendNFT() {
+  cy.get(activeSendNFTBtn).click()
 }
 
 export function verifyNFTModalData() {
-  cy.contains(sendNFTStr)
-  cy.contains(recipientAddressStr)
-  cy.contains(selectedNFTStr)
+  main.verifyElementsExist([modalTitle, modalHeader, modalSelectedNFTs])
 }
 
 export function typeRecipientAddress(address) {
@@ -107,11 +124,10 @@ export function clikOnNextBtn() {
 }
 
 export function verifyReviewModalData(NFTcount) {
-  cy.contains(sendStr)
-  cy.contains(toStr)
-  cy.wait(1000)
-  cy.get(`b:contains(${transferFromStr})`).should('have.length', NFTcount)
-  cy.contains('button:not([disabled])', signBtnStr)
+  main.verifyElementsExist([nftItemList])
+  main.verifyElementsCount(nftItemNane, NFTcount)
+  cy.get(signBtn).should('not.be.disabled')
+
   if (NFTcount > 1) {
     const numbersArr = Array.from({ length: NFTcount }, (_, index) => index + 1)
     numbersArr.forEach((number) => {

cypress/e2e/safe-apps/apps_list.cy.js

@@ -5,44 +5,44 @@ import * as safeapps from '../pages/safeapps.pages'
 const myCustomAppTitle = 'Cypress Test App'
 const myCustomAppDescrAdded = 'Cypress Test App Description'
 
-describe('Safe Apps tests', () => {
+describe('Safe Apps list tests', () => {
   beforeEach(() => {
     cy.clearLocalStorage()
     cy.visit(constants.SEPOLIA_TEST_SAFE_4 + constants.appsUrl, { failOnStatusCode: false })
     main.acceptCookies()
   })
 
-  it('Verify app list can be filtered by app name [C56130]', () => {
+  it('Verify app list can be filtered by app name', () => {
     // Wait for /safe-apps response
     cy.intercept('GET', constants.appsEndpoint).then(() => {
       safeapps.typeAppName(constants.appNames.walletConnect)
       safeapps.verifyLinkName(safeapps.linkNames.logo)
     })
   })
 
-  it('Verify app list can be filtered by app description [C56131]', () => {
+  it('Verify app list can be filtered by app description', () => {
     safeapps.typeAppName(constants.appNames.customContract)
     safeapps.verifyLinkName(safeapps.linkNames.logo)
   })
 
-  it('Verify error message is displayed when no app found [C56132]', () => {
+  it('Verify error message is displayed when no app found', () => {
     safeapps.typeAppName(constants.appNames.noResults)
     safeapps.verifyNoAppsTextPresent()
   })
 
-  it('Verify apps can be pinned [C56133]', () => {
+  it('Verify apps can be pinned', () => {
     safeapps.clearSearchAppInput()
     safeapps.pinApp(safeapps.transactionBuilderStr)
     safeapps.verifyPinnedAppCount(1)
   })
 
-  it('Verify apps can be unpinned [C56134]', () => {
+  it('Verify apps can be unpinned', () => {
     safeapps.pinApp(safeapps.transactionBuilderStr)
     safeapps.pinApp(safeapps.transactionBuilderStr, false)
     safeapps.verifyPinnedAppCount(0)
   })
 
-  it('Verify there is an error when the app manifest is invalid [C56135]', () => {
+  it('Verify there is an error when the app manifest is invalid', () => {
     cy.intercept('GET', constants.invalidAppUrl, {
       name: constants.testAppData.name,
     })
@@ -52,7 +52,7 @@ describe('Safe Apps tests', () => {
     safeapps.verifyAppNotSupportedMsg()
   })
 
-  it('Verify an app can be added to the list within the custom apps section [C56136]', () => {
+  it('Verify an app can be added to the list within the custom apps section', () => {
     cy.intercept('GET', constants.validAppUrlJson, {
       name: constants.testAppData.name,
       description: constants.testAppData.descr,

cypress/e2e/safe-apps/browser_permissions.cy.js

@@ -18,13 +18,13 @@ describe('Browser permissions tests', () => {
     main.acceptCookies()
   })
 
-  it('Verify a permissions slide to the user is displayed [C56137]', () => {
+  it('Verify a permissions slide to the user is displayed', () => {
     safeapps.clickOnContinueBtn()
     safeapps.verifyCameraCheckBoxExists()
     safeapps.verifyMicrofoneCheckBoxExists()
   })
 
-  it('Verify the selection can be changed, accepted and stored [C56138]', () => {
+  it('Verify the selection can be changed, accepted and stored', () => {
     safeapps.verifyMicrofoneCheckBoxExists().click()
     safeapps.clickOnContinueBtn()
     safeapps.verifyWarningDefaultAppMsgIsDisplayed()