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

.gitignore

@@ -7,9 +7,6 @@
 # testing
 /coverage
 
-# types
-/src/types/contracts/
-
 # next.js
 /.next/
 /out/
@@ -69,3 +66,20 @@ certificates
 # os
 THUMBS_DB
 thumbs.db
+
+# web
+apps/web/.next/*
+apps/web/out/*
+apps/web/public/sw.js
+apps/web/public/workbox-*.js
+apps/web/public/worker-development.js
+apps/web/src/types/
+apps/web/tsconfig.tsbuildinfo
+node_modules/*
+out/*
+tsconfig.tsbuildinfo
+apps/web/.env
+apps/web/node_modules/*
+apps/web/public/fallback-development.js
+apps/web/.env
+apps/web/src/types/contracts/*

apps/mobile/package.json

@@ -46,15 +46,15 @@
     "@react-native-menu/menu": "^1.1.6",
     "@react-native/babel-preset": "^0.76.2",
     "@react-navigation/material-top-tabs": "^7.0.1",
-    "@react-navigation/native": "^7.0.0",
+    "@react-navigation/native": "^7.0.14",
     "@reduxjs/toolkit": "^2.4.0",
     "@safe-global/store": "workspace:^",
     "@storybook/addon-react-native-web": "^0.0.26",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@tamagui/animations-moti": "^1.117.1",
     "@tamagui/babel-plugin": "^1.120.2",
     "@tamagui/config": "^1.117.1",
-    "@tamagui/font-dm-sans": "^1.117.1",
+    "@tamagui/font-dm-sans": "^1.121.3",
     "@tamagui/toast": "^1.117.1",
     "babel-plugin-react-native-web": "^0.19.13",
     "blo": "^1.2.0",

apps/web/package.json

@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@cowprotocol/widget-react": "^0.10.0",
+    "@cowprotocol/widget-react": "^0.13.0",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.13.5",
@@ -47,7 +47,7 @@
     "@ledgerhq/device-management-kit": "^0.5.1",
     "@ledgerhq/device-signer-kit-ethereum": "^1.1.0",
     "@mui/icons-material": "^6.1.6",
-    "@mui/material": "^6.1.6",
+    "@mui/material": "^6.3.0",
     "@mui/x-date-pickers": "^7.22.1",
     "@reduxjs/toolkit": "^2.5.0",
     "@reown/walletkit": "^1.1.1",

apps/web/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap

@@ -22,15 +22,15 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
             <h3
               class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
             >
-              <div
+              <button
                 aria-expanded="false"
-                class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-6csn7x-MuiButtonBase-root-MuiAccordionSummary-root"
+                class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-10sjung-MuiButtonBase-root-MuiAccordionSummary-root"
                 data-testid="decoded-tx-summary"
-                role="button"
                 tabindex="0"
+                type="button"
               >
-                <div
-                  class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-1pnrdlh-MuiAccordionSummary-content"
+                <span
+                  class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-1r0e0ir-MuiAccordionSummary-content"
                 >
                   Advanced details
                   <span
@@ -46,8 +46,8 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
                   <div
                     class="MuiBox-root css-i9gxme"
                   />
-                </div>
-                <div
+                </span>
+                <span
                   class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
                 >
                   <svg
@@ -61,8 +61,8 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
                       d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
                     />
                   </svg>
-                </div>
-              </div>
+                </span>
+              </button>
             </h3>
             <div
               class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
@@ -360,15 +360,15 @@ exports[`SignOrExecute should display an error screen 1`] = `
             <h3
               class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
             >
-              <div
+              <button
                 aria-expanded="false"
-                class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-6csn7x-MuiButtonBase-root-MuiAccordionSummary-root"
+                class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-10sjung-MuiButtonBase-root-MuiAccordionSummary-root"
                 data-testid="decoded-tx-summary"
-                role="button"
                 tabindex="0"
+                type="button"
               >
-                <div
-                  class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-1pnrdlh-MuiAccordionSummary-content"
+                <span
+                  class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-1r0e0ir-MuiAccordionSummary-content"
                 >
                   Advanced details
                   <span
@@ -384,8 +384,8 @@ exports[`SignOrExecute should display an error screen 1`] = `
                   <div
                     class="MuiBox-root css-i9gxme"
                   />
-                </div>
-                <div
+                </span>
+                <span
                   class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
                 >
                   <svg
@@ -399,8 +399,8 @@ exports[`SignOrExecute should display an error screen 1`] = `
                       d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
                     />
                   </svg>
-                </div>
-              </div>
+                </span>
+              </button>
             </h3>
             <div
               class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"

apps/web/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap

@@ -20,14 +20,14 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
         <h3
           class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
+          <button
             aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-6csn7x-MuiButtonBase-root-MuiAccordionSummary-root"
-            role="button"
+            class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-10sjung-MuiButtonBase-root-MuiAccordionSummary-root"
             tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-1pnrdlh-MuiAccordionSummary-content"
+            <span
+              class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-1r0e0ir-MuiAccordionSummary-content"
             >
               <div
                 class="MuiBox-root css-mvjamn"
@@ -63,8 +63,8 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
                   </span>
                 </div>
               </div>
-            </div>
-            <div
+            </span>
+            <span
               class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
             >
               <svg
@@ -78,8 +78,8 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
                   d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
                 />
               </svg>
-            </div>
-          </div>
+            </span>
+          </button>
         </h3>
         <div
           class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"

apps/web/src/components/tx/confirmation-views/UpdateSafe/index.test.tsx

@@ -0,0 +1,26 @@
+import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { _UpdateSafe as UpdateSafe } from './index'
+import { render } from '@/tests/test-utils'
+
+const chain = {
+  recommendedMasterCopyVersion: '1.4.1',
+} as ChainInfo
+
+const warningText = 'This upgrade will invalidate all queued transactions!'
+
+describe('Container', () => {
+  it('renders correctly with a queue warning', async () => {
+    const container = render(<UpdateSafe safeVersion="1.1.1" queueSize="10+" chain={chain} />)
+    await expect(container.findByText(warningText)).resolves.not.toBeNull()
+  })
+
+  it('renders correctly without a queue warning because no queue', async () => {
+    const container = render(<UpdateSafe safeVersion="1.1.1" queueSize="" chain={chain} />)
+    await expect(container.findByText(warningText)).rejects.toThrowError(Error)
+  })
+
+  it('renders correctly without a queue warning because of compatible Safe version', async () => {
+    const container = render(<UpdateSafe safeVersion="1.3.0" queueSize="10" chain={chain} />)
+    await expect(container.findByText(warningText)).rejects.toThrowError(Error)
+  })
+})

apps/web/src/components/tx/confirmation-views/UpdateSafe/index.tsx

@@ -1,11 +1,15 @@
 import type { ReactNode } from 'react'
 import { Alert, AlertTitle, Box, Divider, Stack, Typography } from '@mui/material'
+import semverSatisfies from 'semver/functions/satisfies'
 import { LATEST_SAFE_VERSION } from '@/config/constants'
 import { useCurrentChain } from '@/hooks/useChains'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { useQueuedTxsLength } from '@/hooks/useTxQueue'
 import ExternalLink from '@/components/common/ExternalLink'
 import { maybePlural } from '@/utils/formatters'
+import madProps from '@/utils/mad-props'
+
+const QUEUE_WARNING_VERSION = '<1.3.0'
 
 function BgBox({ children, light }: { children: ReactNode; light?: boolean }) {
   return (
@@ -23,38 +27,55 @@ function BgBox({ children, light }: { children: ReactNode; light?: boolean }) {
   )
 }
 
-function UpdateSafe() {
-  const { safe } = useSafeInfo()
-  const chain = useCurrentChain()
-  const queueSize = useQueuedTxsLength()
+export function _UpdateSafe({
+  safeVersion,
+  queueSize,
+  chain,
+}: {
+  safeVersion: string
+  queueSize: string
+  chain: ReturnType<typeof useCurrentChain>
+}) {
+  const showQueueWarning = queueSize && semverSatisfies(safeVersion, QUEUE_WARNING_VERSION)
   const latestSafeVersion = chain?.recommendedMasterCopyVersion || LATEST_SAFE_VERSION
 
   return (
     <>
       <Stack direction="row" alignItems="center" spacing={2}>
-        <BgBox>Current version: {safe.version}</BgBox>
+        <BgBox>Current version: {safeVersion}</BgBox>
         <Box fontSize={28}>→</Box>
         <BgBox light>New version: {latestSafeVersion}</BgBox>
       </Stack>
 
-      <Typography mb={1}>
+      <Typography>
         Read about the updates in the new Safe contracts version in the{' '}
         <ExternalLink href={`https://github.com/safe-global/safe-contracts/releases/tag/v${latestSafeVersion}`}>
           version {latestSafeVersion} changelog
         </ExternalLink>
       </Typography>
 
-      {queueSize && (
+      {showQueueWarning && (
         <Alert severity="warning">
           <AlertTitle sx={{ fontWeight: 700 }}>This upgrade will invalidate all queued transactions!</AlertTitle>
           You have {queueSize} unexecuted transaction{maybePlural(parseInt(queueSize))}. Please make sure to execute or
           delete them before upgrading, otherwise you&apos;ll have to reject or replace them after the upgrade.
         </Alert>
       )}
 
-      <Divider sx={{ mt: 1, mx: -3 }} />
+      <Divider sx={{ my: 1, mx: -3 }} />
     </>
   )
 }
 
+function useSafeVersion() {
+  const { safe } = useSafeInfo()
+  return safe?.version || ''
+}
+
+const UpdateSafe = madProps(_UpdateSafe, {
+  chain: useCurrentChain,
+  safeVersion: useSafeVersion,
+  queueSize: useQueuedTxsLength,
+})
+
 export default UpdateSafe