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

Dockerfile

@@ -5,6 +5,7 @@ COPY . .
 
 # install deps
 RUN yarn install --frozen-lockfile
+RUN yarn after-install
 
 ENV NODE_ENV production
 

cypress/e2e/pages/balances.pages.js

@@ -20,7 +20,6 @@ const hiddenTokenDeselectAllBtn = 'span[data-track="assets: Deselect all hide di
 const hiddenTokenIcon = 'svg[data-testid="VisibilityOffOutlinedIcon"]'
 
 const hideTokenDefaultString = 'Hide tokens'
-const gotItStr = 'Got it!'
 const assetNameSortBtnStr = 'Asset'
 const assetBalanceSortBtnStr = 'Balance'
 const sendBtnStr = 'Send'
@@ -184,14 +183,6 @@ export function verifyEachRowHasCheckbox(state) {
   })
 }
 
-export function acceptSpamWarning() {
-  cy.get('button').contains(gotItStr).click()
-  verifySpamWarningNotdisplayed()
-}
-
-export function verifySpamWarningNotdisplayed() {
-  cy.contains(gotItStr).should('not.exist')
-}
 export function verifyTokensTabIsSelected(option) {
   cy.get(`a[aria-selected="${option}"]`).contains('Tokens')
 }

cypress/e2e/pages/main.page.js

@@ -8,6 +8,11 @@ export function clickOnSideMenuItem(item) {
 
 export function acceptCookies() {
   cy.wait(1000)
+
+  cy.findAllByText('Got it!')
+    .should('have.length.at.least', 0)
+    .each(($el) => $el.click())
+
   cy.get('button')
     .contains(acceptSelection)
     .should(() => {})

cypress/e2e/smoke/assets.cy.js

@@ -14,7 +14,6 @@ describe('Assets tests', () => {
     cy.visit(constants.BALANCE_URL + constants.SEPOLIA_TEST_SAFE_5)
     cy.clearLocalStorage()
     main.acceptCookies()
-    balances.acceptSpamWarning()
   })
 
   it('Verify that the token tab is selected by default and the table is visible [C56039]', () => {
@@ -107,7 +106,6 @@ describe('Assets tests', () => {
   it('Verify that a tool tip is shown pointing to "Token list" dropdown [C56044]', () => {
     //Spam warning message is removed in beforeEach hook
     cy.reload()
-    balances.verifySpamWarningNotdisplayed()
   })
 
   it('Verify that Token list dropdown down options show/hide spam tokens [C56045]', () => {

cypress/e2e/smoke/balances.cy.js

@@ -15,7 +15,6 @@ describe('Balance tests', () => {
     cy.clearLocalStorage()
     cy.visit(constants.BALANCE_URL + constants.SEPOLIA_TEST_SAFE_5)
     main.acceptCookies()
-    balances.acceptSpamWarning()
     cy.contains('Assets')
     cy.get(balances.balanceSingleRow).should('have.length.lessThan', ASSETS_LENGTH)
     balances.selectTokenList(balances.tokenListOptions.allTokens)

cypress/e2e/smoke/balances_pagination.cy.js

@@ -12,7 +12,6 @@ describe('Balance tests', () => {
     // Table is loaded
     cy.contains('Görli Ether')
 
-    cy.contains('button', 'Got it').click()
     cy.contains('div', 'Default tokens').click()
     cy.wait(100)
     cy.contains('div', 'All tokens').click()

cypress/e2e/smoke/batch_tx.cy.js

@@ -1,7 +1,6 @@
 import * as batch from '../pages/batches.pages'
 import * as constants from '../../support/constants'
 import * as main from '../../e2e/pages/main.page'
-import * as balances from '../pages/balances.pages'
 
 const currentNonce = 3
 const funds_first_tx = '0.001'
@@ -12,7 +11,6 @@ describe('Batch transaction tests', () => {
     cy.clearLocalStorage()
     cy.visit(constants.BALANCE_URL + constants.SEPOLIA_TEST_SAFE_5)
     main.acceptCookies()
-    balances.acceptSpamWarning()
   })
 
   it('Verify empty batch list can be opened [C56082]', () => {

cypress/e2e/smoke/create_tx.cy.js

@@ -1,7 +1,6 @@
 import * as constants from '../../support/constants'
 import * as main from '../../e2e/pages/main.page'
 import * as createtx from '../../e2e/pages/create_tx.pages'
-import * as balances from '../pages/balances.pages'
 
 const sendValue = 0.00002
 const currentNonce = 1
@@ -11,7 +10,6 @@ describe('Create transactions tests', () => {
     cy.clearLocalStorage()
     cy.visit(constants.BALANCE_URL + constants.SEPOLIA_TEST_SAFE_5)
     main.acceptCookies()
-    balances.acceptSpamWarning()
   })
 
   it('Verify a new send token transaction can be created [C56104]', () => {

cypress/e2e/smoke/tx_history.cy.js

@@ -15,6 +15,10 @@ describe('Transaction history tests', () => {
     cy.clearLocalStorage()
     // Go to the test Safe transaction history
     cy.visit(constants.transactionsHistoryUrl + constants.SEPOLIA_TEST_SAFE_5)
+
+    // So that tests that rely on this feature don't randomly fail
+    cy.window().then((win) => win.localStorage.setItem('SAFE_v2__AB_human-readable', true))
+
     main.acceptCookies()
   })
 

cypress/support/e2e.js

@@ -37,10 +37,4 @@ before(() => {
       }
     }
   })
-
-  cy.on('window:before:load', (window) => {
-    window.localStorage.setItem('SAFE_v2__show_terms', false)
-    // So that tests that rely on this feature don't randomly fail
-    window.localStorage.setItem('SAFE_v2__AB_human-readable', true)
-  })
 })

jest.config.cjs

@@ -18,9 +18,12 @@ const customJestConfig = {
   testEnvironment: 'jest-environment-jsdom',
   testEnvironmentOptions: { url: 'http://localhost/balances?safe=rin:0xb3b83bf204C458B461de9B0CD2739DB152b4fa5A' },
   globals: {
-    fetch: global.fetch
-  }
+    fetch: global.fetch,
+  },
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
-module.exports = createJestConfig(customJestConfig)
+module.exports = async () => ({
+  ...(await createJestConfig(customJestConfig)()),
+  transformIgnorePatterns: ['node_modules/(?!(uint8arrays|multiformats)/)'],
+})

package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/safe-global/safe-wallet-web",
   "license": "GPL-3.0",
   "type": "module",
-  "version": "1.19.1",
+  "version": "1.20.0",
   "scripts": {
     "dev": "next dev",
     "start": "next dev",
@@ -57,6 +57,8 @@
     "@sentry/react": "^7.74.0",
     "@sentry/tracing": "^7.74.0",
     "@truffle/hdwallet-provider": "^2.1.4",
+    "@walletconnect/utils": "^2.10.2",
+    "@walletconnect/web3wallet": "^1.9.2",
     "@web3-onboard/coinbase": "^2.2.6",
     "@web3-onboard/core": "^2.21.2",
     "@web3-onboard/injected-wallets": "^2.10.7",
@@ -111,6 +113,7 @@
     "@types/react-qr-reader": "^2.1.5",
     "@types/semver": "^7.3.10",
     "@typescript-eslint/eslint-plugin": "^5.47.1",
+    "@walletconnect/types": "^2.10.1",
     "cross-env": "^7.0.3",
     "cypress": "^12.15.0",
     "cypress-file-upload": "^5.0.8",

src/components/batch/BatchIndicator/index.tsx

@@ -11,9 +11,17 @@ const BatchIndicator = ({ onClick }: { onClick?: () => void }) => {
   return (
     <BatchTooltip>
       <Track {...BATCH_EVENTS.BATCH_SIDEBAR_OPEN} label={length}>
-        <ButtonBase onClick={onClick} sx={{ p: 0.5 }} title="Batch">
-          <Badge variant="standard" color="secondary" badgeContent={length}>
-            <SvgIcon component={BatchIcon} inheritViewBox fontSize="small" />
+        <ButtonBase title="Batch" onClick={onClick} sx={{ p: 2 }}>
+          <Badge
+            variant="standard"
+            badgeContent={length}
+            color={'secondary'}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right',
+            }}
+          >
+            <SvgIcon component={BatchIcon} inheritViewBox fontSize="medium" />
           </Badge>
         </ButtonBase>
       </Track>

src/components/common/AddressInput/index.test.tsx

@@ -201,8 +201,9 @@ describe('AddressInput tests', () => {
 
     const { input } = setup(`${mockChain.shortName}:${TEST_ADDRESS_A}`)
 
-    act(() => {
+    await act(() => {
       fireEvent.change(input, { target: { value: `${mockChain.shortName}:${TEST_ADDRESS_B}` } })
+      return Promise.resolve()
     })
 
     await waitFor(() => expect(input.previousElementSibling?.textContent).toBe(''))

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -74,7 +74,11 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
           vertical: 'top',
           horizontal: 'center',
         }}
-        sx={{ marginTop: 1 }}
+        sx={{
+          '& > .MuiPaper-root': {
+            top: 'var(--header-height) !important',
+          },
+        }}
       >
         <Paper className={css.popoverContainer}>
           <Identicon address={wallet.address} />

src/components/common/ConnectWallet/index.tsx

@@ -2,11 +2,12 @@ import type { ReactElement } from 'react'
 import useWallet from '@/hooks/wallets/useWallet'
 import AccountCenter from '@/components/common/ConnectWallet/AccountCenter'
 import ConnectWalletButton from './ConnectWalletButton'
+import css from './styles.module.css'
 
 const ConnectWallet = (): ReactElement => {
   const wallet = useWallet()
 
-  return wallet ? <AccountCenter wallet={wallet} /> : <ConnectWalletButton />
+  return <div className={css.container}>{wallet ? <AccountCenter wallet={wallet} /> : <ConnectWalletButton />}</div>
 }
 
 export default ConnectWallet

src/components/common/ConnectWallet/styles.module.css

@@ -1,3 +1,7 @@
+.container {
+  padding: 0 var(--space-2);
+}
+
 .buttonContainer {
   display: flex;
   align-items: center;

src/components/common/Header/index.tsx

@@ -15,7 +15,10 @@ import SafeLogo from '@/public/images/logo.svg'
 import Link from 'next/link'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import BatchIndicator from '@/components/batch/BatchIndicator'
+import WalletConnectUi from '@/components/walletconnect'
 import { PushNotificationsBanner } from '@/components/settings/PushNotifications/PushNotificationsBanner'
+import { useCurrentChain } from '@/hooks/useChains'
+import { hasFeature, FEATURES } from '@/utils/chains'
 
 type HeaderProps = {
   onMenuToggle?: Dispatch<SetStateAction<boolean>>
@@ -27,6 +30,8 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
   const safeAddress = useSafeAddress()
   const showSafeToken = safeAddress && !!getSafeTokenAddress(chainId)
   const router = useRouter()
+  const chain = useCurrentChain()
+  const enableWc = !!chain && hasFeature(chain, FEATURES.NATIVE_WALLETCONNECT)
 
   // Logo link: if on Dashboard, link to Welcome, otherwise to the root (which redirects to either Dashboard or Welcome)
   const logoHref = router.pathname === AppRoutes.home ? AppRoutes.welcome : AppRoutes.index
@@ -65,17 +70,23 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
         </div>
       )}
 
+      <div className={css.element}>
+        <PushNotificationsBanner>
+          <NotificationCenter />
+        </PushNotificationsBanner>
+      </div>
+
       {safeAddress && (
         <div className={classnames(css.element, css.hideMobile)}>
           <BatchIndicator onClick={handleBatchToggle} />
         </div>
       )}
 
-      <div className={css.element}>
-        <PushNotificationsBanner>
-          <NotificationCenter />
-        </PushNotificationsBanner>
-      </div>
+      {enableWc && (
+        <div className={classnames(css.element, css.hideMobile)}>
+          <WalletConnectUi />
+        </div>
+      )}
 
       <div className={classnames(css.element, css.connectWallet)}>
         <ConnectWallet />