Release 1.16.0

.eslintrc.json

@@ -4,7 +4,13 @@
     "@next/next/no-img-element": "off",
     "unused-imports/no-unused-imports-ts": "error",
     "@typescript-eslint/consistent-type-imports": "error",
-    "no-constant-condition": "warn"
+    "no-constant-condition": "warn",
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "useAsync"
+      }
+    ]
   },
   "ignorePatterns": ["node_modules/", ".next/", ".github/"],
   "plugins": ["unused-imports", "@typescript-eslint"]

.gitignore

@@ -51,3 +51,4 @@ yalc.lock
 /public/sw.js.map
 /public/workbox-*.js
 /public/workbox-*.js.map
+/public/fallback*

cypress/e2e/add_owner.cy.js

@@ -4,8 +4,6 @@ const offset = 7
 
 describe('Adding an owner', () => {
   before(() => {
-    cy.connectE2EWallet()
-
     cy.visit(`/${TEST_SAFE}/settings/setup`)
     cy.contains('button', 'Accept selection').click()
 

cypress/e2e/create_safe.cy.js

@@ -1,7 +1,5 @@
 describe('Create Safe', () => {
   it('should create a new Safe', () => {
-    cy.connectE2EWallet()
-
     cy.visit('/welcome')
 
     // Close cookie banner

cypress/e2e/non_owner_spending_limit.cy.js

@@ -3,8 +3,6 @@ const SPENDING_LIMIT_SAFE = 'gor:0xBE3C5aFF7f66c23fe71c3047911f9Aa0026b281B'
 
 describe('Check non-owner spending limit beneficiary modal', () => {
   before(() => {
-    cy.connectE2EWallet()
-
     cy.visit(`/${SPENDING_LIMIT_SAFE}/home`, { failOnStatusCode: false })
 
     cy.contains('Accept selection').click()

cypress/e2e/smoke/create_safe_simple.cy.js

@@ -3,8 +3,6 @@ const OWNER_ADDRESS = '0xE297437d6b53890cbf004e401F3acc67c8b39665'
 
 describe('Create Safe form', () => {
   it('should navigate to the form', () => {
-    cy.connectE2EWallet()
-
     cy.visit('/welcome')
 
     // Close cookie banner

cypress/e2e/smoke/create_tx.cy.js

@@ -6,7 +6,6 @@ const currentNonce = 3
 
 describe('Queue a transaction on 1/N', () => {
   before(() => {
-    cy.connectE2EWallet()
     cy.useProdCGW()
 
     cy.visit(`/home?safe=${SAFE}`)
@@ -59,6 +58,8 @@ describe('Queue a transaction on 1/N', () => {
   it('should create a queued transaction', () => {
     cy.get('button[type="submit"]').should('not.be.disabled')
 
+    cy.wait(1000)
+
     cy.contains('Native token transfer').should('be.visible')
 
     // Changes nonce to next one
@@ -69,7 +70,7 @@ describe('Queue a transaction on 1/N', () => {
     cy.contains('Estimated fee').should('exist')
 
     // Asserting the sponsored info is present
-    cy.contains('Execute').should('be.visible')
+    cy.contains('Execute').scrollIntoView().should('be.visible')
 
     cy.get('span').contains('Estimated fee').next().should('have.css', 'text-decoration-line', 'line-through')
     cy.contains('Transactions per hour')
@@ -96,14 +97,14 @@ describe('Queue a transaction on 1/N', () => {
     cy.get('@Paramsform').submit()
 
     // Asserts the execute checkbox is uncheckable
-    cy.contains('No, only').click()
+    cy.contains('No, later').click()
 
     cy.get('input[name="nonce"]')
       .clear({ force: true })
       .type(currentNonce + 10, { force: true })
       .type('{enter}', { force: true })
 
-    cy.contains('Submit').click()
+    cy.contains('Sign').click()
   })
 
   it('should click the notification and see the transaction queued', () => {

cypress/e2e/smoke/nfts.cy.js

@@ -2,8 +2,6 @@ const TEST_SAFE = 'gor:0x97d314157727D517A706B5D08507A1f9B44AaaE9'
 
 describe('Assets > NFTs', () => {
   before(() => {
-    cy.connectE2EWallet()
-
     cy.visit(`/balances/nfts?safe=${TEST_SAFE}`)
     cy.contains('button', 'Accept selection').click()
     cy.contains(/E2E Wallet @ G(ö|oe)rli/)
@@ -84,7 +82,7 @@ describe('Assets > NFTs', () => {
       cy.contains('1')
       cy.contains('2')
       cy.get('b:contains("safeTransferFrom")').should('have.length', 2)
-      cy.contains('button:not([disabled])', 'Submit')
+      cy.contains('button:not([disabled])', 'Execute')
     })
   })
 })

cypress/e2e/smoke/pending_actions.cy.js

@@ -2,9 +2,7 @@ const SAFE = 'gor:0xCD4FddB8FfA90012DFE11eD4bf258861204FeEAE'
 
 describe('Pending actions', () => {
   before(() => {
-    cy.connectE2EWallet()
     cy.useProdCGW()
-
     cy.visit(`/welcome`)
     cy.contains('button', 'Accept selection').click()
   })

cypress/e2e/spending_limit.cy.js

@@ -3,8 +3,6 @@ const SPENDING_LIMIT_SAFE = 'gor:0x28F95E682D1dd632b54Dc61740575f49DB39Eb7F'
 
 describe('Check spending limit modal', () => {
   before(() => {
-    cy.connectE2EWallet()
-
     cy.visit(`/${SPENDING_LIMIT_SAFE}/home`, { failOnStatusCode: false })
 
     cy.contains('Accept selection').click()

cypress/e2e/tx_modal.cy.js

@@ -5,8 +5,6 @@ const SAFE_NONCE = '6'
 
 describe('Tx Modal', () => {
   before(() => {
-    cy.connectE2EWallet()
-
     // Open the Safe used for testing
     cy.visit(`/${TEST_SAFE}`)
     cy.contains('a', 'Accept selection').click()

cypress/e2e/tx_simulation.cy.js

@@ -3,8 +3,6 @@ const RECIPIENT_ADDRESS = '0x6a5602335a878ADDCa4BF63a050E34946B56B5bC'
 
 describe('Tx Simulation', () => {
   before(() => {
-    cy.connectE2EWallet()
-
     // Open the Safe used for testing
     cy.visit(`/${TEST_SAFE}/home`, { failOnStatusCode: false })
     cy.contains('button', 'Accept selection').click()

cypress/support/commands.js

@@ -1,10 +1,3 @@
-Cypress.Commands.add('connectE2EWallet', () => {
-  cy.on('window:before:load', (window) => {
-    // Does not work unless `JSON.stringify` is used
-    window.localStorage.setItem('SAFE_v2__lastWallet', JSON.stringify('E2E Wallet'))
-  })
-})
-
 Cypress.Commands.add('useProdCGW', () => {
   cy.on('window:before:load', (window) => {
     window.localStorage.setItem('SAFE_v2__debugProdCgw', JSON.stringify(true))

package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/safe-global/safe-wallet-web",
   "license": "GPL-3.0",
   "type": "module",
-  "version": "1.15.2",
+  "version": "1.16.0",
   "scripts": {
     "dev": "next dev",
     "start": "next dev",
@@ -41,18 +41,18 @@
     "@emotion/react": "^11.10.0",
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.13.5",
+    "@mui/icons-material": "^5.14.3",
+    "@mui/material": "^5.14.3",
     "@mui/x-date-pickers": "^5.0.12",
     "@reduxjs/toolkit": "^1.9.5",
     "@safe-global/safe-apps-sdk": "7.11.0",
     "@safe-global/safe-core-sdk": "^3.3.4",
     "@safe-global/safe-core-sdk-utils": "^1.7.4",
     "@safe-global/safe-deployments": "^1.25.0",
     "@safe-global/safe-ethers-lib": "^1.9.4",
-    "@safe-global/safe-gateway-typescript-sdk": "^3.7.3",
+    "@safe-global/safe-gateway-typescript-sdk": "^3.8.0",
     "@safe-global/safe-modules-deployments": "^1.0.0",
-    "@safe-global/safe-react-components": "^2.0.5",
+    "@safe-global/safe-react-components": "^2.0.6",
     "@sentry/react": "^7.28.1",
     "@sentry/tracing": "^7.28.1",
     "@truffle/hdwallet-provider": "^2.1.4",
@@ -69,6 +69,7 @@
     "ethereum-blockies-base64": "^1.0.2",
     "ethers": "5.7.2",
     "exponential-backoff": "^3.1.0",
+    "framer-motion": "^10.13.1",
     "fuse.js": "^6.6.2",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",

src/components/balances/AssetsTable/index.test.tsx

@@ -109,6 +109,7 @@ describe('AssetsTable', () => {
             onChainSigning: false,
           },
           transactionExecution: true,
+          addressEmojis: false,
         },
       },
     })
@@ -215,6 +216,7 @@ describe('AssetsTable', () => {
             onChainSigning: false,
           },
           transactionExecution: true,
+          addressEmojis: false,
         },
       },
     })
@@ -317,6 +319,7 @@ describe('AssetsTable', () => {
             onChainSigning: false,
           },
           transactionExecution: true,
+          addressEmojis: false,
         },
       },
     })
@@ -416,6 +419,7 @@ describe('AssetsTable', () => {
             onChainSigning: false,
           },
           transactionExecution: true,
+          addressEmojis: false,
         },
       },
     })

src/components/balances/HiddenTokenButton/index.test.tsx

@@ -87,6 +87,7 @@ describe('HiddenTokenToggle', () => {
             onChainSigning: false,
           },
           transactionExecution: true,
+          addressEmojis: false,
         },
       },
     })

src/components/batch/BatchIndicator/BatchTooltip.tsx

@@ -0,0 +1,61 @@
+import { type ReactElement, useEffect, useState } from 'react'
+import { Box, SvgIcon } from '@mui/material'
+import Tooltip, { type TooltipProps, tooltipClasses } from '@mui/material/Tooltip'
+import { styled } from '@mui/material/styles'
+import SuccessIcon from '@/public/images/common/success.svg'
+import { TxEvent, txSubscribe } from '@/services/tx/txEvents'
+
+const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    fontSize: theme.typography.pxToRem(16),
+    fontWeight: 700,
+    border: `1px solid ${theme.palette.border.light}`,
+    marginTop: theme.spacing(2) + ' !important',
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.palette.background.paper,
+  },
+  [`& .${tooltipClasses.arrow}:before`]: {
+    border: `1px solid ${theme.palette.border.light}`,
+  },
+}))
+
+const BatchTooltip = ({ children }: { children: ReactElement }) => {
+  const [showTooltip, setShowTooltip] = useState<boolean>(false)
+
+  // Click outside to close the tooltip
+  useEffect(() => {
+    const handleClickOutside = () => setShowTooltip(false)
+    document.addEventListener('click', handleClickOutside)
+    return () => document.removeEventListener('click', handleClickOutside)
+  }, [])
+
+  // Show tooltip when tx is added to batch
+  useEffect(() => {
+    return txSubscribe(TxEvent.BATCH_ADD, () => setShowTooltip(true))
+  }, [])
+
+  return (
+    <StyledTooltip
+      open={showTooltip}
+      onClose={() => setShowTooltip(false)}
+      arrow
+      title={
+        <Box display="flex" flexDirection="column" alignItems="center" p={2} gap={2}>
+          <Box fontSize="53px">
+            <SvgIcon component={SuccessIcon} inheritViewBox fontSize="inherit" />
+          </Box>
+          Transaction is added to batch
+        </Box>
+      }
+    >
+      <div>{children}</div>
+    </StyledTooltip>
+  )
+}
+
+export default BatchTooltip

src/components/batch/BatchIndicator/index.tsx

@@ -0,0 +1,24 @@
+import { Badge, ButtonBase, SvgIcon } from '@mui/material'
+import BatchIcon from '@/public/images/common/batch.svg'
+import { useDraftBatch } from '@/hooks/useDraftBatch'
+import Track from '@/components/common/Track'
+import { BATCH_EVENTS } from '@/services/analytics'
+import BatchTooltip from './BatchTooltip'
+
+const BatchIndicator = ({ onClick }: { onClick?: () => void }) => {
+  const { length } = useDraftBatch()
+
+  return (
+    <BatchTooltip>
+      <Track {...BATCH_EVENTS.BATCH_SIDEBAR_OPEN} label={length}>
+        <ButtonBase onClick={onClick} sx={{ p: 0.5 }}>
+          <Badge variant="standard" color="secondary" badgeContent={length}>
+            <SvgIcon component={BatchIcon} inheritViewBox fontSize="small" />
+          </Badge>
+        </ButtonBase>
+      </Track>
+    </BatchTooltip>
+  )
+}
+
+export default BatchIndicator