From 0818e713fa0f9bb7a6472e34a05888896ffc3835 Mon Sep 17 00:00:00 2001
From: Daniel Dimitrov <daniel.d@safe.global>
Date: Tue, 19 Nov 2024 07:49:44 +0100
Subject: [PATCH 01/47] Refactor: upgrade to Next 15 (#4485)

* chore: update to nextjs 15

* chore: fix tsc lint errors

* chore: fix eslint errors

* chore: fixing failing unit tests

* chore: remove yarn

* chore: update eslint to v9

* chore: update github eslint action

* chore: update cypress to v13.15.2 (#4490)

* chore: update cypress to v13.15.2

* chore: update cypress github action to use v13.15.2

* chore: update mui to v6 (#4499)

* chore: update mui to v6

Applied codemons to update the code

* refactor: fix DatePicker with mui v6

fix: failing Date test

* refactor: use ListItemButton instead of ListItem

the selected and disabled props on ListItem have been removed in v6, but
are available on the ListItemButton

* chore: update snapshots

* refactor: recoveryModal tests use snapshots

* fix: failing bookmarks test with mui v6

* fix: missing DM-Sans font

* fix: drawer was stealing clicks from rest of page

* fix: failing tests

* fix: fonts fail to load

Read the comment in the file and have fun!

* fix: prettier errors

* fix: tsc errors
---
 .eslintrc.json                                |   45 -
 .github/workflows/cypress/action.yml          |    4 +-
 .github/workflows/lint.yml                    |    3 +-
 eslint.config.mjs                             |   77 +
 jest.setup.js                                 |    5 +-
 package.json                                  |   58 +-
 public/fonts/fonts.css                        |    2 +
 .../address-book/AddressBookHeader/index.tsx  |   19 +-
 .../address-book/AddressBookTable/index.tsx   |   12 +-
 .../address-book/EntryDialog/index.tsx        |    6 +-
 .../address-book/ExportDialog/index.tsx       |    7 +-
 src/components/balances/AssetsTable/index.tsx |   15 +-
 .../balances/HiddenTokenButton/index.tsx      |    6 +-
 .../balances/TokenListSelect/index.tsx        |   11 +-
 src/components/balances/TokenMenu/index.tsx   |   15 +-
 .../batch/BatchIndicator/BatchTooltip.tsx     |   16 +-
 .../batch/BatchSidebar/BatchTxItem.tsx        |   25 +-
 .../batch/BatchSidebar/EmptyBatch.tsx         |   50 +-
 src/components/batch/BatchSidebar/index.tsx   |    8 +-
 src/components/common/AddFunds/index.tsx      |   54 +-
 src/components/common/AddressInput/index.tsx  |    1 -
 .../common/AddressInputReadOnly/index.tsx     |    8 +-
 .../common/BuyCryptoButton/index.tsx          |   20 +-
 .../common/ChainIndicator/index.tsx           |    8 +-
 src/components/common/Chip/index.tsx          |   12 +-
 src/components/common/ChoiceButton/index.tsx  |   24 +-
 .../common/ConnectWallet/AccountCenter.tsx    |   10 +-
 .../common/CookieAndTermBanner/index.tsx      |   54 +-
 .../common/CopyAddressButton/index.tsx        |    8 +-
 .../common/CopyTooltip/ConfirmCopyModal.tsx   |   24 +-
 src/components/common/Countdown/index.tsx     |   28 +-
 .../common/DatePickerInput/index.tsx          |   10 +-
 src/components/common/Disclaimer/index.tsx    |   40 +-
 src/components/common/EnhancedTable/index.tsx |    1 -
 src/components/common/ErrorBoundary/index.tsx |   21 +-
 .../EthHashInfo/SrcEthHashInfo/index.tsx      |   40 +-
 .../common/ExplorerButton/index.tsx           |   16 +-
 src/components/common/ExternalLink/index.tsx  |    9 +-
 src/components/common/FiatValue/index.tsx     |    9 +-
 src/components/common/FileUpload/index.tsx    |   64 +-
 .../common/LegalDisclaimerContent/index.tsx   |   24 +-
 .../common/NetworkSelector/index.tsx          |   63 +-
 src/components/common/Notifications/index.tsx |    7 +-
 .../common/OnboardingTooltip/index.tsx        |    9 +-
 .../common/PageLayout/SideDrawer.tsx          |    5 +
 .../common/PagePlaceholder/index.tsx          |   10 +-
 src/components/common/PaginatedTxns/index.tsx |   28 +-
 .../__tests__/SafeTokenWidget.test.tsx        |    2 +-
 .../common/SafeTokenWidget/index.tsx          |    8 +-
 .../common/SpendingLimitLabel/index.tsx       |   12 +-
 src/components/common/Sticky/index.tsx        |   12 +-
 src/components/common/Table/DataTable.tsx     |    6 +-
 .../common/TokenExplorerLink/index.tsx        |    7 +-
 src/components/common/WalletInfo/index.tsx    |   46 +-
 .../common/WalletOverview/index.tsx           |   10 +-
 .../common/WidgetDisclaimer/index.tsx         |   19 +-
 .../common/icons/CircularIcon/index.tsx       |    8 +-
 src/components/dashboard/Assets/index.tsx     |   54 +-
 src/components/dashboard/FirstSteps/index.tsx |  133 +-
 .../GovernanceSection/GovernanceSection.tsx   |   67 +-
 .../dashboard/Overview/Overview.tsx           |   53 +-
 .../PendingTxs/PendingRecoveryListItem.tsx    |   13 +-
 .../PendingTxs/PendingTxListItem.tsx          |   29 +-
 .../dashboard/PendingTxs/PendingTxsList.tsx   |   29 +-
 .../SafeAppsDashboardSection.tsx              |   11 +-
 .../dashboard/StakingBanner/index.tsx         |   80 +-
 src/components/new-safe/CardStepper/index.tsx |    7 +-
 src/components/new-safe/OwnerRow/index.tsx    |   20 +-
 .../new-safe/create/AdvancedCreateSafe.tsx    |   35 +-
 .../new-safe/create/CreateSafeInfos/index.tsx |    8 +-
 .../new-safe/create/NetworkWarning/index.tsx  |   12 +-
 .../create/NoWalletConnectedWarning/index.tsx |   10 +-
 .../new-safe/create/OverviewWidget/index.tsx  |   16 +-
 src/components/new-safe/create/index.tsx      |   35 +-
 .../steps/AdvancedOptionsStep/index.tsx       |   53 +-
 .../create/steps/OwnerPolicyStep/index.tsx    |   36 +-
 .../create/steps/ReviewStep/index.tsx         |   59 +-
 .../create/steps/SetNameStep/index.tsx        |   34 +-
 .../create/steps/StatusStep/StatusMessage.tsx |   39 +-
 .../create/steps/StatusStep/StatusStep.tsx    |   17 +-
 .../create/steps/StatusStep/index.tsx         |   29 +-
 src/components/new-safe/load/index.tsx        |   26 +-
 .../load/steps/SafeOwnerStep/index.tsx        |    9 +-
 .../load/steps/SafeReviewStep/index.tsx       |    9 +-
 .../load/steps/SetAddressStep/index.tsx       |   31 +-
 src/components/nfts/NftCollections/index.tsx  |    2 -
 src/components/nfts/NftGrid/index.tsx         |   44 +-
 src/components/nfts/NftSendForm/index.tsx     |   43 +-
 .../NotificationCenter/index.tsx              |    9 +-
 .../NotificationCenterItem/index.tsx          |   10 +-
 .../NotificationCenterList/index.tsx          |    8 +-
 .../safe-apps/AddCustomAppModal/CustomApp.tsx |   20 +-
 .../safe-apps/AddCustomAppModal/index.tsx     |   30 +-
 .../safe-apps/AddCustomSafeAppCard/index.tsx  |   10 +-
 .../AppFrame/TransactionQueueBar/index.tsx    |   17 +-
 src/components/safe-apps/AppFrame/index.tsx   |    6 +-
 .../safe-apps/AppFrame/useAppIsLoading.ts     |    8 +-
 .../safe-apps/AppFrame/useFromAppAnalytics.ts |    2 +-
 .../AppFrame/useThirdPartyCookies.ts          |    2 +-
 .../safe-apps/NativeSwapsCard/index.tsx       |   17 +-
 .../safe-apps/PermissionsPrompt.tsx           |    7 +-
 .../safe-apps/RemoveCustomAppModal.tsx        |    7 +-
 .../safe-apps/SafeAppActionButtons/index.tsx  |   11 +-
 .../safe-apps/SafeAppCard/index.tsx           |    9 +-
 .../SafeAppLandingPage/AppActions.tsx         |   29 +-
 .../SafeAppLandingPage/SafeAppDetails.tsx     |   51 +-
 .../safe-apps/SafeAppLandingPage/TryDemo.tsx  |   17 +-
 .../safe-apps/SafeAppLandingPage/index.tsx    |   16 +-
 .../safe-apps/SafeAppPreviewDrawer/index.tsx  |   31 +-
 .../SafeAppSocialLinksCard/index.tsx          |   62 +-
 .../safe-apps/SafeAppTags/index.tsx           |    9 +-
 .../safe-apps/SafeAppsFilters/index.tsx       |   10 +-
 .../SafeAppsInfoModal/AllowedFeaturesList.tsx |   21 +-
 .../safe-apps/SafeAppsInfoModal/Slider.tsx    |    8 +-
 .../safe-apps/SafeAppsInfoModal/index.tsx     |   25 +-
 .../safe-apps/SafeAppsListHeader/index.tsx    |    9 +-
 .../SafeAppsZeroResultsPlaceholder/index.tsx  |    9 +-
 .../safe-messages/DecodedMsg/index.tsx        |   11 +-
 .../safe-messages/InfoBox/index.tsx           |    7 +-
 .../safe-messages/MsgDetails/index.tsx        |   10 +-
 .../safe-messages/MsgSigners/index.tsx        |   24 +-
 .../safe-messages/MsgSummary/index.tsx        |    2 +-
 .../safe-messages/PaginatedMsgs/index.tsx     |   36 +-
 .../settings/ContractVersion/index.tsx        |   25 +-
 .../settings/DataManagement/ImportDialog.tsx  |    6 +-
 .../settings/DataManagement/index.tsx         |   15 +-
 .../settings/EnvironmentVariables/index.tsx   |   39 +-
 .../FallbackHandler/__tests__/index.test.tsx  |   20 +-
 .../settings/FallbackHandler/index.tsx        |   23 +-
 .../GlobalPushNotifications.tsx               |    2 +-
 .../useNotificationRegistrations.test.ts      |   26 +-
 .../settings/PushNotifications/index.tsx      |   37 +-
 .../settings/RequiredConfirmations/index.tsx  |   29 +-
 .../settings/SafeAppsPermissions/index.tsx    |    2 +-
 .../settings/SafeAppsSigningMethod/index.tsx  |   14 +-
 src/components/settings/SafeModules/index.tsx |    2 +-
 .../settings/SecurityLogin/index.tsx          |    9 +-
 .../settings/SecuritySettings/index.tsx       |   14 +-
 .../SpendingLimits/NoSpendingLimits.tsx       |   12 +-
 .../SpendingLimits/SpendingLimitsTable.tsx    |   27 +-
 .../settings/SpendingLimits/index.tsx         |   17 +-
 .../settings/TransactionGuards/index.tsx      |    2 +-
 .../settings/owner/EditOwnerDialog/index.tsx  |   13 +-
 .../settings/owner/OwnerList/index.tsx        |   30 +-
 src/components/sidebar/DebugToggle/index.tsx  |    7 +-
 .../sidebar/QrCodeButton/QrModal.tsx          |   44 +-
 src/components/sidebar/Sidebar/index.tsx      |    7 +-
 .../sidebar/SidebarHeader/index.tsx           |    9 +-
 .../sidebar/SidebarNavigation/index.tsx       |   43 +-
 .../transactions/BulkTxListGroup/index.tsx    |   27 +-
 .../transactions/GroupedTxListItems/index.tsx |   32 +-
 .../HexEncodedData.test.tsx.snap              |   43 +-
 .../transactions/MaliciousTxWarning/index.tsx |   12 +-
 .../SignedMessagesHelpLink/index.tsx          |   15 +-
 .../transactions/TxConfirmations/index.tsx    |    8 +-
 .../transactions/TxDetails/SafeTxGasForm.tsx  |   19 +-
 .../TxDetails/Summary/TxDataRow/index.tsx     |    8 +-
 .../transactions/TxDetails/Summary/index.tsx  |   19 +-
 .../TxData/DecodedData/MethodCall.tsx         |   13 +-
 .../DecodedData/MethodDetails/index.tsx       |   25 +-
 .../DecodedData/SingleTxDecoded/index.tsx     |    7 +-
 .../TxDetails/TxData/Rejection/index.tsx      |   14 +-
 .../TxData/Transfer/TransferActions.tsx       |    4 +-
 .../TxDetails/TxData/Transfer/index.tsx       |   26 +-
 .../transactions/TxDetails/index.tsx          |    8 +-
 .../TxFilterForm/TxFilterForm.test.tsx        |    4 +-
 .../TxListItem/ExpandableTransactionItem.tsx  |    7 +-
 .../transactions/TxSigners/index.tsx          |   11 +-
 .../transactions/TxStatusChip/index.tsx       |   12 +-
 .../transactions/TxStatusLabel/index.tsx      |    2 +-
 .../transactions/TxSummary/QueueActions.tsx   |    9 +-
 .../transactions/TxSummary/index.tsx          |   74 +-
 src/components/tx-flow/SafeTxProvider.tsx     |    6 +-
 src/components/tx-flow/TxInfoProvider.tsx     |    4 +-
 .../tx-flow/common/OwnerList/index.tsx        |    8 +-
 .../tx-flow/common/TxLayout/index.tsx         |   28 +-
 .../tx-flow/common/TxNonce/index.tsx          |   32 +-
 .../tx-flow/common/TxStatusWidget/index.tsx   |   11 +-
 .../tx-flow/flows/AddOwner/ChooseOwner.tsx    |   46 +-
 .../CancelRecoveryFlowReview.tsx              |    7 +-
 .../CancelRecovery/CancelRecoveryOverview.tsx |   36 +-
 .../flows/ChangeThreshold/ChooseThreshold.tsx |   38 +-
 .../flows/ConfirmTx/ConfirmProposedTx.tsx     |    8 +-
 .../NewSpendingLimit/CreateSpendingLimit.tsx  |    8 +-
 .../NewSpendingLimit/ReviewSpendingLimit.tsx  |   52 +-
 src/components/tx-flow/flows/NewTx/index.tsx  |   45 +-
 .../flows/NftTransfer/ReviewNftBatch.tsx      |   16 +-
 .../flows/NftTransfer/SendNftBatch.tsx        |   68 +-
 .../RecoverAccountFlowReview.tsx              |   22 +-
 .../RecoverAccountFlowSetup.tsx               |   50 +-
 .../RecoveryAttempt/RecoveryAttemptReview.tsx |    7 +-
 .../tx-flow/flows/RejectTx/RejectTx.tsx       |   20 +-
 .../flows/RemoveGuard/ReviewRemoveGuard.tsx   |    8 +-
 .../flows/RemoveModule/ReviewRemoveModule.tsx |   14 +-
 .../flows/RemoveOwner/ReviewRemoveOwner.tsx   |   24 +-
 .../flows/RemoveOwner/SetThreshold.tsx        |   37 +-
 .../RemoveRecoveryFlowOverview.tsx            |   12 +-
 .../RemoveSpendingLimit.tsx                   |   32 +-
 .../tx-flow/flows/ReplaceTx/DeleteTxModal.tsx |   51 +-
 .../tx-flow/flows/ReplaceTx/index.tsx         |   33 +-
 .../flows/SignMessage/SignMessage.test.tsx    |   10 +-
 .../tx-flow/flows/SignMessage/SignMessage.tsx |   75 +-
 .../tx-flow/flows/SignMessage/index.tsx       |   15 +-
 .../ReviewSignMessageOnChain.test.tsx         |    4 +-
 .../ReviewSignMessageOnChain.tsx              |   38 +-
 .../flows/SuccessScreen/StatusMessage.tsx     |   16 +-
 .../flows/SuccessScreen/StatusStepper.tsx     |   28 +-
 .../SuccessScreen/statuses/DefaultStatus.tsx  |   16 +-
 .../SuccessScreen/statuses/IndexingStatus.tsx |   16 +-
 .../statuses/ProcessingStatus.tsx             |   23 +-
 .../TokenTransfer/CreateTokenTransfer.tsx     |   19 +-
 .../TokenTransfer/ReviewSpendingLimitTx.tsx   |    8 +-
 .../flows/TokenTransfer/SendAmountBlock.tsx   |   16 +-
 .../flows/UpdateSafe/UpdateSafeReview.tsx     |   27 +-
 .../UpsertRecoveryFlowIntro.tsx               |   26 +-
 .../UpsertRecoveryFlowSettings.tsx            |   32 +-
 .../UpsertRecovery/useRecoveryPeriods.ts      |    2 +-
 src/components/tx-flow/index.tsx              |    2 +-
 .../tx/AdvancedParams/AdvancedParamsForm.tsx  |   15 +-
 .../tx/AdvancedParams/GasLimitInput.tsx       |    2 +-
 src/components/tx/AdvancedParams/index.tsx    |    2 +-
 .../AdvancedParams/{types.d.ts => types.ts}   |    9 +-
 .../tx/ApprovalEditor/ApprovalEditorForm.tsx  |    6 +-
 .../tx/ApprovalEditor/ApprovalItem.tsx        |   16 +-
 .../tx/ApprovalEditor/Approvals.tsx           |    7 +-
 .../ApprovalEditor/EditableApprovalItem.tsx   |   17 +-
 .../tx/ApprovalEditor/SpenderField.tsx        |   17 +-
 src/components/tx/ApprovalEditor/index.tsx    |   19 +-
 src/components/tx/BalanceInfo/index.tsx       |    7 +-
 .../ConfirmationOrderHeader.tsx               |   70 +-
 src/components/tx/DecodedTx/index.tsx         |   25 +-
 src/components/tx/ErrorMessage/index.tsx      |   15 +-
 .../tx/ExecutionMethodSelector/index.tsx      |    8 +-
 src/components/tx/FieldsGrid/index.tsx        |   30 +-
 src/components/tx/GasParams/index.tsx         |   17 +-
 src/components/tx/RemainingRelays/index.tsx   |   10 +-
 src/components/tx/SendFromBlock/index.tsx     |   17 +-
 .../tx/SignOrExecuteForm/BatchButton.tsx      |    9 +-
 .../tx/SignOrExecuteForm/ExecuteForm.tsx      |   17 +-
 .../ExecuteThroughRoleForm/index.tsx          |   53 +-
 .../MigrateToL2Information.tsx                |   21 +-
 .../tx/SignOrExecuteForm/SignForm.tsx         |   10 +-
 .../SignOrExecuteForm/SignOrExecuteForm.tsx   |    8 +-
 .../SignOrExecuteSkeleton.tsx                 |   10 +-
 .../__snapshots__/SignOrExecute.test.tsx.snap |  260 ++-
 src/components/tx/SuccessMessage/index.tsx    |    7 +-
 .../BatchTransactions.test.tsx.snap           |  147 +-
 .../ChangeThreshold.test.tsx.snap             |    6 +-
 .../ChangeThreshold/index.tsx                 |   15 +-
 .../SettingsChange.test.tsx.snap              |   96 +-
 .../SettingsChange/index.tsx                  |   12 +-
 .../ConfirmationView.test.tsx.snap            |  286 ++-
 .../tx/confirmation-views/index.tsx           |    3 +-
 src/components/tx/confirmation-views/utils.ts |    3 +-
 .../blockaid/BlockaidBalanceChange.tsx        |   71 +-
 src/components/tx/security/blockaid/index.tsx |   46 +-
 .../tx/security/blockaid/useBlockaid.ts       |    2 +-
 .../tx/security/shared/TxSecurityContext.tsx  |   12 +-
 .../security/tenderly/__tests__/utils.test.ts |    2 +-
 src/components/tx/security/tenderly/index.tsx |   40 +-
 .../welcome/MyAccounts/AccountItem.tsx        |   34 +-
 .../welcome/MyAccounts/MultiAccountItem.tsx   |   64 +-
 .../welcome/MyAccounts/PaginatedSafeList.tsx  |   31 +-
 .../welcome/MyAccounts/QueueActions.tsx       |   25 +-
 .../welcome/MyAccounts/SubAccountItem.tsx     |   34 +-
 src/components/welcome/MyAccounts/index.tsx   |   16 +-
 src/components/welcome/NewSafe.tsx            |   44 +-
 .../welcome/WelcomeLogin/WalletLogin.tsx      |   29 +-
 src/components/welcome/WelcomeLogin/index.tsx |   23 +-
 .../counterfactual/ActivateAccountButton.tsx  |    8 +-
 .../counterfactual/ActivateAccountFlow.tsx    |   31 +-
 src/features/counterfactual/CheckBalance.tsx  |   15 +-
 .../counterfactual/CounterfactualForm.tsx     |    6 +-
 .../CounterfactualSuccessScreen.tsx           |   33 +-
 src/features/counterfactual/FirstTxFlow.tsx   |   10 +-
 .../counterfactual/PayNowPayLater.tsx         |   23 +-
 .../__tests__/useDeployGasLimit.test.ts       |    2 +-
 src/features/counterfactual/utils.ts          |    2 +-
 .../components/CreateSafeOnNewChain/index.tsx |   26 +-
 .../InconsistentSignerSetupWarning.tsx        |   31 +-
 .../components/DeleteProposerDialog.tsx       |    8 +-
 .../components/EditProposerDialog.tsx         |    4 +-
 .../ExecuteRecoveryButton/index.tsx           |    4 +-
 .../GroupedRecoveryListItems/index.tsx        |   30 +-
 .../RecoveryCards/RecoveryInProgressCard.tsx  |   67 +-
 .../RecoveryCards/RecoveryProposalCard.tsx    |   84 +-
 .../__tests__/RecoveryProposalCard.test.tsx   |    6 +-
 .../RecoveryContext/useRecoveryPendingTxs.ts  |    2 +-
 .../components/RecoveryDescription/index.tsx  |    8 +-
 .../components/RecoveryHeader/index.test.tsx  |   12 +-
 .../components/RecoveryHeader/index.tsx       |    8 +-
 .../RecoveryList/LazyRecoveryList.tsx         |    4 +-
 .../__snapshots__/index.test.tsx.snap         |    9 +
 .../components/RecoveryModal/index.test.tsx   |   34 +-
 .../components/RecoveryModal/index.tsx        |   12 +-
 .../ChooseRecoveryMethodModal.tsx             |   45 +-
 .../components/RecoverySettings/index.tsx     |   22 +-
 .../components/RecoverySigners/index.tsx      |   20 +-
 .../components/RecoverySummary/index.tsx      |   38 +-
 .../useIsValidRecoveryExecution.test.ts       |   12 +-
 .../components/EnableAccountBanner/index.tsx  |   22 +-
 .../speedup/components/SpeedUpModal.tsx       |   36 +-
 .../speedup/components/SpeedUpMonitor.tsx     |    8 +-
 .../stake/components/StakePage/index.tsx      |   18 +-
 .../StakingConfirmationTx/Deposit.tsx         |   41 +-
 .../components/StakingConfirmationTx/Exit.tsx |   17 +-
 .../StakingConfirmationTx/Withdraw.tsx        |    6 +-
 .../StakingTxDepositDetails/index.tsx         |   12 +-
 .../components/StakingTxExitDetails/index.tsx |   10 +-
 .../StakingTxWithdrawDetails/index.tsx        |   10 +-
 .../swap/components/OrderId/index.tsx         |    6 +-
 .../swap/components/SwapOrder/index.tsx       |   20 +-
 .../SwapOrder/rows/PartBuyAmount.tsx          |   14 +-
 .../SwapOrder/rows/PartSellAmount.tsx         |   14 +-
 .../SwapOrderConfirmationView/index.tsx       |    9 +-
 .../swap/components/SwapTxInfo/SwapTx.tsx     |   31 +-
 .../swap/helpers/__tests__/utils.test.ts      |    1 -
 src/features/swap/helpers/fee.ts              |   11 +-
 .../components/OutreachPopup/index.tsx        |   47 +-
 .../__tests__/WalletConnectContext.test.tsx   |    8 +-
 .../components/WcConnectionForm/index.tsx     |   30 +-
 .../components/WcConnectionState/index.tsx    |    8 +-
 .../components/WcErrorMessage/index.tsx       |    9 +-
 .../components/WcHints/index.tsx              |    8 +-
 .../components/WcLogoHeader/index.tsx         |   10 +-
 .../WcProposalForm/CompatibilityWarning.tsx   |   15 +-
 .../components/WcProposalForm/index.tsx       |   28 +-
 .../components/WcSessionList/WcNoSessions.tsx |   19 +-
 src/hooks/__tests__/useChainId.test.ts        |    2 +-
 src/hooks/__tests__/useDebounce.test.ts       |    3 +-
 .../__tests__/useLoadSpendingLimits.test.ts   |    2 +-
 .../__tests__/useSafeTokenAllocation.test.ts  |   16 +-
 .../__tests__/useSafeMessageStatus.test.ts    |    6 +-
 src/hooks/messages/useSafeMessageStatus.ts    |    2 +-
 .../__tests__/useCategoryFilter.test.ts       |    8 +-
 src/hooks/useTxNotifications.ts               |    4 +-
 src/hooks/useVisibleBalances.ts               |   15 +-
 src/hooks/wallets/consts.ts                   |    2 +-
 src/hooks/wallets/wallets.ts                  |    2 +-
 src/pages/_document.tsx                       |    1 -
 src/pages/_offline.tsx                        |   45 +-
 src/pages/apps/open.tsx                       |    9 +-
 src/pages/balances/index.tsx                  |    8 +-
 src/pages/balances/nfts.tsx                   |   20 +-
 src/pages/imprint.tsx                         |   63 +-
 src/pages/licenses.tsx                        |   53 +-
 src/pages/privacy.tsx                         |    1 -
 src/pages/settings/appearance.tsx             |   32 +-
 src/pages/settings/cookies.tsx                |    9 +-
 src/pages/settings/setup.tsx                  |   15 +-
 src/pages/share/safe-app.tsx                  |    8 +-
 src/pages/stake.tsx                           |    8 +-
 src/pages/swap.tsx                            |    8 +-
 src/pages/terms.tsx                           |    1 -
 src/pages/transactions/history.tsx            |    8 +-
 src/pages/transactions/msg.tsx                |   11 +-
 src/pages/transactions/queue.tsx              |    7 +-
 src/pages/transactions/tx.tsx                 |   11 +-
 .../private-key-module/PkModulePopup.tsx      |   14 +-
 .../push-notifications/preferences.ts         |    2 +-
 src/services/safe-apps/AppCommunicator.ts     |    4 +-
 .../useSafeWalletProvider.test.tsx            |   22 +-
 .../useSafeWalletProvider.tsx                 |    4 +-
 .../security/modules/BlockaidModule/index.ts  |    2 +-
 src/store/__tests__/txQueueSlice.test.ts      |    2 +-
 src/styles/globals.css                        |   10 +
 src/tests/pages/apps-share.test.tsx           |    7 +-
 src/tests/pages/apps.test.tsx                 |   36 +-
 src/tests/test-utils.tsx                      |    2 +-
 src/utils/__tests__/tokens.test.ts            |    4 +-
 src/utils/__tests__/transactions.test.ts      |    4 +-
 src/utils/transactions.ts                     |    2 +-
 tsconfig.json                                 |    4 +-
 yarn.lock                                     | 2072 ++++++++++-------
 374 files changed, 7402 insertions(+), 2691 deletions(-)
 delete mode 100644 .eslintrc.json
 create mode 100644 eslint.config.mjs
 rename src/components/tx/AdvancedParams/{types.d.ts => types.ts} (57%)
 create mode 100644 src/features/recovery/components/RecoveryModal/__snapshots__/index.test.tsx.snap

diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 63839322a5..0000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "extends": [
-    "next",
-    "prettier",
-    "plugin:prettier/recommended",
-    "plugin:storybook/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": ["./tsconfig.json"]
-  },
-  "rules": {
-    "@next/next/no-img-element": "off",
-    "@next/next/google-font-display": "off",
-    "@next/next/google-font-preconnect": "off",
-    "@next/next/no-page-custom-font": "off",
-    "unused-imports/no-unused-imports-ts": "error",
-    "@typescript-eslint/consistent-type-imports": "error",
-    "@typescript-eslint/await-thenable": "error",
-    "no-constant-condition": "warn",
-    "no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
-    "react-hooks/exhaustive-deps": [
-      "warn",
-      {
-        "additionalHooks": "useAsync"
-      }
-    ],
-    "no-only-tests/no-only-tests": "error",
-    "object-shorthand": ["error", "properties"],
-    "jsx-quotes": ["error", "prefer-double"],
-    "react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "never" }]
-  },
-  "ignorePatterns": [
-    "node_modules/",
-    ".next/",
-    ".github/",
-    "cypress/",
-    "src/types/contracts/"
-  ],
-  "plugins": [
-    "unused-imports",
-    "@typescript-eslint",
-    "no-only-tests"
-  ]
-}
diff --git a/.github/workflows/cypress/action.yml b/.github/workflows/cypress/action.yml
index c549e1c5fa..337019affd 100644
--- a/.github/workflows/cypress/action.yml
+++ b/.github/workflows/cypress/action.yml
@@ -38,9 +38,9 @@ runs:
         curl -O 'https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb'
         sudo apt-get install ./google-chrome-stable_current_amd64.deb
 
-    - name: Install Cypress 13.13.1
+    - name: Install Cypress 13.15.2
       shell: bash
-      run: npm install cypress@13.13.1 --legacy-peer-deps
+      run: yarn add -D cypress@13.15.2
 
     - uses: ./.github/workflows/build
       with:
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index bdbe5727fa..0bb639e056 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -18,10 +18,11 @@ jobs:
 
       - uses: ./.github/workflows/yarn
 
-      - uses: CatChen/eslint-suggestion-action@v2
+      - uses: CatChen/eslint-suggestion-action@v4.1.7
         with:
           request-changes: true # optional
           fail-check: true # optional
           github-token: ${{ secrets.GITHUB_TOKEN }} # optional
           directory: './' # optional
           targets: 'src' # optional
+          config-path: './eslint.config.mjs'
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000000..04caa5f0a2
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,77 @@
+import unusedImports from 'eslint-plugin-unused-imports'
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import noOnlyTests from 'eslint-plugin-no-only-tests'
+import tsParser from '@typescript-eslint/parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  {
+    ignores: ['**/node_modules/', '**/.next/', '**/.github/', '**/cypress/', 'src/types/contracts/'],
+  },
+  ...compat.extends('next', 'prettier', 'plugin:prettier/recommended', 'plugin:storybook/recommended'),
+  {
+    plugins: {
+      'unused-imports': unusedImports,
+      '@typescript-eslint': typescriptEslint,
+      'no-only-tests': noOnlyTests,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: 'script',
+
+      parserOptions: {
+        project: ['./tsconfig.json'],
+      },
+    },
+
+    rules: {
+      '@next/next/no-img-element': 'off',
+      '@next/next/google-font-display': 'off',
+      '@next/next/google-font-preconnect': 'off',
+      '@next/next/no-page-custom-font': 'off',
+      'unused-imports/no-unused-imports': 'error',
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/await-thenable': 'error',
+      'no-constant-condition': 'warn',
+
+      'unused-imports/no-unused-vars': [
+        'error',
+        {
+          varsIgnorePattern: '^_',
+        },
+      ],
+
+      'react-hooks/exhaustive-deps': [
+        'warn',
+        {
+          additionalHooks: 'useAsync',
+        },
+      ],
+
+      'no-only-tests/no-only-tests': 'error',
+      'object-shorthand': ['error', 'properties'],
+      'jsx-quotes': ['error', 'prefer-double'],
+
+      'react/jsx-curly-brace-presence': [
+        'error',
+        {
+          props: 'never',
+          children: 'never',
+        },
+      ],
+    },
+  },
+]
diff --git a/jest.setup.js b/jest.setup.js
index ec8ccaa216..d59f4f2592 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -1,9 +1,6 @@
-// Optional: configure or set up a testing framework before each test.
-// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
-
 // Used for __tests__/testing-library.js
 // Learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { TextEncoder, TextDecoder } from 'util'
 import { Request } from 'node-fetch'
 
diff --git a/package.json b/package.json
index 3592ae397b..5d621f26cd 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,9 @@
     "@safe-global/safe-core-sdk-types/**/ethers": "^6.11.1",
     "@safe-global/protocol-kit/**/ethers": "^6.11.1",
     "@safe-global/api-kit/**/ethers": "^6.11.1",
-    "@gnosis.pm/zodiac/**/ethers": "^6.11.1"
+    "@gnosis.pm/zodiac/**/ethers": "^6.11.1",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
   },
   "dependencies": {
     "@cowprotocol/widget-react": "^0.10.0",
@@ -48,17 +50,17 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/styled": "^11.13.0",
     "@gnosis.pm/zodiac": "^4.0.3",
-    "@mui/icons-material": "^5.14.20",
-    "@mui/material": "^5.16.7",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/icons-material": "^6.1.6",
+    "@mui/material": "^6.1.6",
+    "@mui/x-date-pickers": "^7.22.1",
     "@reduxjs/toolkit": "^2.2.6",
     "@safe-global/api-kit": "^2.4.6",
     "@safe-global/protocol-kit": "^4.1.1",
     "@safe-global/safe-apps-sdk": "^9.1.0",
+    "@safe-global/safe-client-gateway-sdk": "v1.60.1",
     "@safe-global/safe-deployments": "1.37.12",
-    "@safe-global/safe-client-gateway-sdk": "1.60.1-next-069fa2b",
     "@safe-global/safe-gateway-typescript-sdk": "3.22.3-beta.15",
     "@safe-global/safe-modules-deployments": "^2.2.1",
     "@sentry/react": "^7.91.0",
@@ -82,11 +84,11 @@
     "idb-keyval": "^6.2.1",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
-    "next": "^14.2.13",
+    "next": "15.0.2",
     "papaparse": "^5.3.2",
     "qrcode.react": "^3.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.0.0-rc-02c0e824-20241028",
+    "react-dom": "19.0.0-rc-02c0e824-20241028",
     "react-dropzone": "^14.2.3",
     "react-gtm-module": "^2.0.11",
     "react-hook-form": "7.41.1",
@@ -98,11 +100,13 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.1",
     "@cowprotocol/app-data": "^2.1.0",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.14.0",
     "@faker-js/faker": "^9.0.3",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/bundle-analyzer": "^13.5.6",
-    "@next/mdx": "^14.2.11",
+    "@next/bundle-analyzer": "15.0.2",
+    "@next/mdx": "15.0.2",
     "@openzeppelin/contracts": "^4.9.6",
     "@safe-global/safe-core-sdk-types": "^5.0.1",
     "@sentry/types": "^7.74.0",
@@ -117,10 +121,10 @@
     "@storybook/react": "^8.0.6",
     "@storybook/test": "^8.0.6",
     "@svgr/webpack": "^6.3.1",
-    "@testing-library/cypress": "^8.0.7",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.4.2",
+    "@testing-library/cypress": "^10.0.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@typechain/ethers-v6": "^0.5.1",
     "@types/jest": "^29.5.4",
     "@types/js-cookie": "^3.0.6",
@@ -128,30 +132,30 @@
     "@types/mdx": "^2.0.13",
     "@types/node": "18.11.18",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "@types/react-gtm-module": "^2.0.3",
     "@types/semver": "^7.3.10",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@walletconnect/types": "^2.16.1",
     "cross-env": "^7.0.3",
-    "cypress": "^12.15.0",
+    "cypress": "^13.15.2",
     "cypress-file-upload": "^5.0.8",
-    "cypress-visual-regression": "^5.0.2",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
+    "cypress-visual-regression": "^5.2.2",
+    "eslint": "^9.14.0",
+    "eslint-config-next": "^15.0.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-no-only-tests": "^3.3.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "fake-indexeddb": "^4.0.2",
     "gray-matter": "^4.0.3",
     "husky": "^9.0.11",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "mockdate": "^3.0.5",
-    "prettier": "^2.7.0",
+    "prettier": "^3.3.3",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-heading-id": "^1.0.1",
diff --git a/public/fonts/fonts.css b/public/fonts/fonts.css
index 6dc970e07d..4c1a1dc164 100644
--- a/public/fonts/fonts.css
+++ b/public/fonts/fonts.css
@@ -2,6 +2,7 @@
   font-family: 'DM Sans';
   font-display: swap;
   font-weight: 400;
+  /** check that the font is loaded on the website. IDEs fail to find the file */
   src: url('/fonts/DMSansRegular.woff2') format('woff2');
 }
 
@@ -9,5 +10,6 @@
   font-family: 'DM Sans';
   font-display: swap;
   font-weight: bold;
+  /** check that the font is loaded on the website. IDEs fail to find the file */
   src: url('/fonts/DMSans700.woff2') format('woff2');
 }
diff --git a/src/components/address-book/AddressBookHeader/index.tsx b/src/components/address-book/AddressBookHeader/index.tsx
index c1b861103a..13e389dbbf 100644
--- a/src/components/address-book/AddressBookHeader/index.tsx
+++ b/src/components/address-book/AddressBookHeader/index.tsx
@@ -55,7 +55,13 @@ function AddressBookHeader({
       title="Address book"
       noBorder
       action={
-        <Grid container pb={1} spacing={1}>
+        <Grid
+          container
+          spacing={1}
+          sx={{
+            pb: 1,
+          }}
+        >
           <Grid item xs={12} md={5} xl={4.5}>
             <TextField
               placeholder="Search"
@@ -77,7 +83,16 @@ function AddressBookHeader({
               size="small"
             />
           </Grid>
-          <Grid item xs={12} md={7} display="flex" justifyContent={['space-between', , 'flex-end']} alignItems="center">
+          <Grid
+            item
+            xs={12}
+            md={7}
+            sx={{
+              display: 'flex',
+              justifyContent: ['space-between', , 'flex-end'],
+              alignItems: 'center',
+            }}
+          >
             <Track {...ADDRESS_BOOK_EVENTS.IMPORT_BUTTON}>
               <HeaderButton onClick={handleOpenModal(ModalType.IMPORT)} icon={ImportIcon}>
                 Import
diff --git a/src/components/address-book/AddressBookTable/index.tsx b/src/components/address-book/AddressBookTable/index.tsx
index f1ee73aeec..6d0263e5ab 100644
--- a/src/components/address-book/AddressBookTable/index.tsx
+++ b/src/components/address-book/AddressBookTable/index.tsx
@@ -145,12 +145,16 @@ function AddressBookTable({ chain, setTxFlow }: AddressBookTableProps) {
         searchQuery={searchQuery}
         onSearchQueryChange={setSearchQuery}
       />
-
       <main>
         {filteredEntries.length > 0 ? (
           <EnhancedTable rows={rows} headCells={headCells} mobileVariant />
         ) : (
-          <Box bgcolor="background.paper" borderRadius={1}>
+          <Box
+            sx={{
+              bgcolor: 'background.paper',
+              borderRadius: 1,
+            }}
+          >
             <PagePlaceholder
               img={<NoEntriesIcon />}
               text={`No entries found${chain ? ` on ${chain.chainName}` : ''}`}
@@ -158,11 +162,8 @@ function AddressBookTable({ chain, setTxFlow }: AddressBookTableProps) {
           </Box>
         )}
       </main>
-
       {open[ModalType.EXPORT] && <ExportDialog handleClose={handleClose} />}
-
       {open[ModalType.IMPORT] && <ImportDialog handleClose={handleClose} />}
-
       {open[ModalType.ENTRY] && (
         <EntryDialog
           handleClose={handleClose}
@@ -170,7 +171,6 @@ function AddressBookTable({ chain, setTxFlow }: AddressBookTableProps) {
           disableAddressInput={Boolean(defaultValues?.name)}
         />
       )}
-
       {open[ModalType.REMOVE] && <RemoveDialog handleClose={handleClose} address={defaultValues?.address || ''} />}
     </>
   )
diff --git a/src/components/address-book/EntryDialog/index.tsx b/src/components/address-book/EntryDialog/index.tsx
index 0d3ceb9852..e22428fd54 100644
--- a/src/components/address-book/EntryDialog/index.tsx
+++ b/src/components/address-book/EntryDialog/index.tsx
@@ -61,7 +61,11 @@ function EntryDialog({
       <FormProvider {...methods}>
         <form onSubmit={onSubmit}>
           <DialogContent>
-            <Box mb={2}>
+            <Box
+              sx={{
+                mb: 2,
+              }}
+            >
               <NameInput data-testid="name-input" label="Name" autoFocus name="name" required />
             </Box>
 
diff --git a/src/components/address-book/ExportDialog/index.tsx b/src/components/address-book/ExportDialog/index.tsx
index 15256feaae..9f089812de 100644
--- a/src/components/address-book/ExportDialog/index.tsx
+++ b/src/components/address-book/ExportDialog/index.tsx
@@ -71,7 +71,11 @@ function ExportDialog({
           .
         </Typography>
 
-        <Typography mt={1}>
+        <Typography
+          sx={{
+            mt: 1,
+          }}
+        >
           <ExternalLink
             href={HelpCenterArticle.ADDRESS_BOOK_DATA}
             title="Learn about the address book import and export"
@@ -80,7 +84,6 @@ function ExportDialog({
           </ExternalLink>
         </Typography>
       </DialogContent>
-
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>
         <CSVDownloader filename={filename} bom config={{ delimiter: ',' }} data={csvData} style={{ order: 2 }}>
diff --git a/src/components/balances/AssetsTable/index.tsx b/src/components/balances/AssetsTable/index.tsx
index 077bfed573..7b1a06f41b 100644
--- a/src/components/balances/AssetsTable/index.tsx
+++ b/src/components/balances/AssetsTable/index.tsx
@@ -157,7 +157,11 @@ const AssetsTable = ({
               rawValue: rawFiatValue,
               collapsed: item.tokenInfo.address === hidingAsset,
               content: (
-                <Typography textAlign="right">
+                <Typography
+                  sx={{
+                    textAlign: 'right',
+                  }}
+                >
                   <FiatValue value={item.fiatBalance} />
 
                   {rawFiatValue === 0 && (
@@ -185,7 +189,14 @@ const AssetsTable = ({
               sticky: true,
               collapsed: item.tokenInfo.address === hidingAsset,
               content: (
-                <Box display="flex" flexDirection="row" gap={1} alignItems="center">
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: 1,
+                    alignItems: 'center',
+                  }}
+                >
                   <>
                     <SendButton tokenInfo={item.tokenInfo} />
 
diff --git a/src/components/balances/HiddenTokenButton/index.tsx b/src/components/balances/HiddenTokenButton/index.tsx
index 18ab57dbc1..e0a30e3514 100644
--- a/src/components/balances/HiddenTokenButton/index.tsx
+++ b/src/components/balances/HiddenTokenButton/index.tsx
@@ -38,7 +38,11 @@ const HiddenTokenButton = ({
         >
           <>
             <VisibilityOutlined fontSize="small" />
-            <Typography fontSize="medium">
+            <Typography
+              sx={{
+                fontSize: 'medium',
+              }}
+            >
               {hiddenAssetCount === 0
                 ? 'Hide tokens'
                 : `${hiddenAssetCount} hidden token${hiddenAssetCount > 1 ? 's' : ''}`}{' '}
diff --git a/src/components/balances/TokenListSelect/index.tsx b/src/components/balances/TokenListSelect/index.tsx
index e300bc4e16..beb7111e54 100644
--- a/src/components/balances/TokenListSelect/index.tsx
+++ b/src/components/balances/TokenListSelect/index.tsx
@@ -35,7 +35,6 @@ const TokenListSelect = () => {
   return (
     <FormControl size="small">
       <InputLabel id="tokenlist-select-label">Token list</InputLabel>
-
       <OnboardingTooltip
         widgetLocalStorageId={LS_TOKENLIST_ONBOARDING}
         text={
@@ -58,7 +57,15 @@ const TokenListSelect = () => {
         >
           <MenuItem value={TOKEN_LISTS.TRUSTED}>
             <Track {...ASSETS_EVENTS.SHOW_DEFAULT_TOKENS}>
-              <Box display="flex" flexDirection="row" gap="4px" alignItems="center" minWidth={155}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  gap: '4px',
+                  alignItems: 'center',
+                  minWidth: 155,
+                }}
+              >
                 {TokenListLabel.TRUSTED}
                 <Tooltip
                   arrow
diff --git a/src/components/balances/TokenMenu/index.tsx b/src/components/balances/TokenMenu/index.tsx
index 10be9fbfd4..3ba13911cd 100644
--- a/src/components/balances/TokenMenu/index.tsx
+++ b/src/components/balances/TokenMenu/index.tsx
@@ -27,11 +27,22 @@ const TokenMenu = ({
       <Box className={css.wrapper}>
         <Box className={css.hideTokensHeader}>
           <VisibilityOffOutlined />
-          <Typography variant="body2" lineHeight="inherit">
+          <Typography
+            variant="body2"
+            sx={{
+              lineHeight: 'inherit',
+            }}
+          >
             {selectedAssetCount} {selectedAssetCount === 1 ? 'token' : 'tokens'} selected
           </Typography>
         </Box>
-        <Box display="flex" flexDirection="row" gap={1}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 1,
+          }}
+        >
           <Track {...ASSETS_EVENTS.CANCEL_HIDE_DIALOG}>
             <Button onClick={cancel} className={css.cancelButton} size="small" variant="outlined">
               Cancel
diff --git a/src/components/batch/BatchIndicator/BatchTooltip.tsx b/src/components/batch/BatchIndicator/BatchTooltip.tsx
index 9f9718886f..042345192e 100644
--- a/src/components/batch/BatchIndicator/BatchTooltip.tsx
+++ b/src/components/batch/BatchIndicator/BatchTooltip.tsx
@@ -25,8 +25,20 @@ const BatchTooltip = ({ children }: { children: ReactElement }) => {
       open={showTooltip}
       onClose={() => setShowTooltip(false)}
       title={
-        <Box display="flex" flexDirection="column" alignItems="center" p={2} gap={2}>
-          <Box fontSize="53px">
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            p: 2,
+            gap: 2,
+          }}
+        >
+          <Box
+            sx={{
+              fontSize: '53px',
+            }}
+          >
             <SvgIcon component={SuccessIcon} inheritViewBox fontSize="inherit" />
           </Box>
           Transaction is added to batch
diff --git a/src/components/batch/BatchSidebar/BatchTxItem.tsx b/src/components/batch/BatchSidebar/BatchTxItem.tsx
index 8ab81c8dc7..88bd965d56 100644
--- a/src/components/batch/BatchSidebar/BatchTxItem.tsx
+++ b/src/components/batch/BatchSidebar/BatchTxItem.tsx
@@ -49,13 +49,25 @@ const BatchTxItem = ({ id, count, timestamp, txDetails, onDelete }: BatchTxItemP
   return (
     <ListItem disablePadding sx={{ gap: 2, alignItems: 'flex-start' }}>
       <div className={css.number}>{count}</div>
-
       <Accordion elevation={0} sx={{ flex: 1 }} onChange={handleExpand}>
         <AccordionSummary expandIcon={<ExpandMoreIcon />} className={css.accordion}>
-          <Box flex={1} display="flex" alignItems="center" gap={2} py={0.4} width="100%">
+          <Box
+            sx={{
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+              py: 0.4,
+              width: '100%',
+            }}
+          >
             <TxType tx={txSummary} />
 
-            <Box flex={1}>
+            <Box
+              sx={{
+                flex: 1,
+              }}
+            >
               <TxInfo info={txDetails.txInfo} />
             </Box>
 
@@ -67,7 +79,12 @@ const BatchTxItem = ({ id, count, timestamp, txDetails, onDelete }: BatchTxItemP
                   <SvgIcon component={DeleteIcon} inheritViewBox fontSize="small" />
                 </ButtonBase>
 
-                <Box className={css.separator} mr={2} />
+                <Box
+                  className={css.separator}
+                  sx={{
+                    mr: 2,
+                  }}
+                />
               </>
             )}
           </Box>
diff --git a/src/components/batch/BatchSidebar/EmptyBatch.tsx b/src/components/batch/BatchSidebar/EmptyBatch.tsx
index ae65fcf4dd..0eac097902 100644
--- a/src/components/batch/BatchSidebar/EmptyBatch.tsx
+++ b/src/components/batch/BatchSidebar/EmptyBatch.tsx
@@ -7,28 +7,66 @@ import SettingsIcon from '@/public/images/sidebar/settings.svg'
 import { Box, SvgIcon, Typography } from '@mui/material'
 
 const EmptyBatch = ({ children }: { children: ReactNode }) => (
-  <Box display="flex" flexWrap="wrap" justifyContent="center" textAlign="center" mt={3} px={4}>
+  <Box
+    sx={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      textAlign: 'center',
+      mt: 3,
+      px: 4,
+    }}
+  >
     <SvgIcon component={EmptyBatchIcon} inheritViewBox sx={{ fontSize: 110 }} />
 
-    <Typography variant="h4" fontWeight={700}>
+    <Typography
+      variant="h4"
+      sx={{
+        fontWeight: 700,
+      }}
+    >
       Add an initial transaction to the batch
     </Typography>
 
-    <Typography variant="body2" mt={2} mb={4} px={8} sx={{ textWrap: 'balance' }}>
+    <Typography
+      variant="body2"
+      sx={{
+        mt: 2,
+        mb: 4,
+        px: 8,
+        textWrap: 'balance',
+      }}
+    >
       Save gas and signatures by adding multiple Safe transactions to a single batch transaction. You can reorder and
       delete individual transactions in a batch.
     </Typography>
 
     {children}
 
-    <Typography variant="body2" color="border.main" mt={8}>
-      <Box mb={1}>
+    <Typography
+      variant="body2"
+      sx={{
+        color: 'border.main',
+        mt: 8,
+      }}
+    >
+      <Box
+        sx={{
+          mb: 1,
+        }}
+      >
         <SvgIcon component={InfoIcon} inheritViewBox />
       </Box>
 
       <b>What type of transactions can you add to the batch?</b>
 
-      <Box display="flex" mt={3} gap={6}>
+      <Box
+        sx={{
+          display: 'flex',
+          mt: 3,
+          gap: 6,
+        }}
+      >
         <div>
           <SvgIcon component={AssetsIcon} inheritViewBox />
           <div>Token and NFT transfers</div>
diff --git a/src/components/batch/BatchSidebar/index.tsx b/src/components/batch/BatchSidebar/index.tsx
index d1f89ac6d2..a1b6a11e02 100644
--- a/src/components/batch/BatchSidebar/index.tsx
+++ b/src/components/batch/BatchSidebar/index.tsx
@@ -62,7 +62,13 @@ const BatchSidebar = ({ isOpen, onToggle }: { isOpen: boolean; onToggle: (open:
   return (
     <Drawer variant="temporary" anchor="right" open={isOpen} onClose={closeSidebar} transitionDuration={100}>
       <aside className={css.aside}>
-        <Typography variant="h4" fontWeight={700} mb={1}>
+        <Typography
+          variant="h4"
+          sx={{
+            fontWeight: 700,
+            mb: 1,
+          }}
+        >
           Batched transactions
         </Typography>
 
diff --git a/src/components/common/AddFunds/index.tsx b/src/components/common/AddFunds/index.tsx
index b9e549f9df..a5742489f5 100644
--- a/src/components/common/AddFunds/index.tsx
+++ b/src/components/common/AddFunds/index.tsx
@@ -17,10 +17,26 @@ const AddFundsCTA = () => {
 
   return (
     <Paper data-testid="add-funds-section">
-      <Grid container gap={3} alignItems="center" justifyContent="center" p={4}>
+      <Grid
+        container
+        sx={{
+          gap: 3,
+          alignItems: 'center',
+          justifyContent: 'center',
+          p: 4,
+        }}
+      >
         <Grid item>
           <div>
-            <Box p={2} border="1px solid" borderColor="border.light" borderRadius={1} display="inline-block">
+            <Box
+              sx={{
+                p: 2,
+                border: '1px solid',
+                borderColor: 'border.light',
+                borderRadius: 1,
+                display: 'inline-block',
+              }}
+            >
               <QRCode value={qrCode} size={195} />
             </Box>
           </div>
@@ -33,8 +49,22 @@ const AddFundsCTA = () => {
           />
         </Grid>
 
-        <Grid item container xs={12} md={6} gap={2} flexDirection="column">
-          <Typography variant="h3" fontWeight="bold">
+        <Grid
+          item
+          container
+          xs={12}
+          md={6}
+          sx={{
+            gap: 2,
+            flexDirection: 'column',
+          }}
+        >
+          <Typography
+            variant="h3"
+            sx={{
+              fontWeight: 'bold',
+            }}
+          >
             Add funds to get started
           </Typography>
 
@@ -42,11 +72,23 @@ const AddFundsCTA = () => {
             Add funds directly from your bank account or copy your address to send tokens from a different account.
           </Typography>
 
-          <Box bgcolor="background.main" p={2} borderRadius="6px" alignSelf="flex-start" fontSize="14px">
+          <Box
+            sx={{
+              bgcolor: 'background.main',
+              p: 2,
+              borderRadius: '6px',
+              alignSelf: 'flex-start',
+              fontSize: '14px',
+            }}
+          >
             <EthHashInfo address={safeAddress} shortAddress={false} showCopyButton hasExplorer avatarSize={24} />
           </Box>
 
-          <Box alignSelf="flex-start">
+          <Box
+            sx={{
+              alignSelf: 'flex-start',
+            }}
+          >
             <BuyCryptoButton />
           </Box>
         </Grid>
diff --git a/src/components/common/AddressInput/index.tsx b/src/components/common/AddressInput/index.tsx
index ebb1fa56a9..ca74bf8d18 100644
--- a/src/components/common/AddressInput/index.tsx
+++ b/src/components/common/AddressInput/index.tsx
@@ -140,7 +140,6 @@ const AddressInput = ({
               ) : (
                 <Skeleton variant="circular" width={32} height={32} animation={false} />
               )}
-
               {!rawValueRef.current.startsWith(`${currentShortName}:`) && <>{currentShortName}:</>}
             </InputAdornment>
           ),
diff --git a/src/components/common/AddressInputReadOnly/index.tsx b/src/components/common/AddressInputReadOnly/index.tsx
index 65f5fa192d..f2505d236c 100644
--- a/src/components/common/AddressInputReadOnly/index.tsx
+++ b/src/components/common/AddressInputReadOnly/index.tsx
@@ -7,7 +7,13 @@ const AddressInputReadOnly = ({ address }: { address: string }): ReactElement =>
   return (
     <div className={css.input} data-testid="address-book-recipient">
       <InputAdornment position="start">
-        <Typography variant="body2" component="div" width={1}>
+        <Typography
+          variant="body2"
+          component="div"
+          sx={{
+            width: 1,
+          }}
+        >
           <EthHashInfo address={address} shortAddress={false} copyAddress={false} />
         </Typography>
       </InputAdornment>
diff --git a/src/components/common/BuyCryptoButton/index.tsx b/src/components/common/BuyCryptoButton/index.tsx
index c843586f39..664ef7341c 100644
--- a/src/components/common/BuyCryptoButton/index.tsx
+++ b/src/components/common/BuyCryptoButton/index.tsx
@@ -37,7 +37,15 @@ const buttonStyles = {
 const BuyCryptoOption = ({ name, children }: { name: string; children: ReactNode }) => {
   return (
     <ButtonBase className={css.button}>
-      <Typography display="flex" alignItems="center" fontWeight="bold" fontSize="18px" gap={1}>
+      <Typography
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          fontWeight: 'bold',
+          fontSize: '18px',
+          gap: 1,
+        }}
+      >
         {children}
         {name}
       </Typography>
@@ -49,7 +57,11 @@ const BuyCryptoOption = ({ name, children }: { name: string; children: ReactNode
 const _BuyCryptoOptions = ({ rampLink }: { rampLink?: LinkProps['href'] }) => {
   if (rampLink) {
     return (
-      <Box position="relative">
+      <Box
+        sx={{
+          position: 'relative',
+        }}
+      >
         <Track {...OVERVIEW_EVENTS.BUY_CRYPTO_BUTTON} label="onboarding">
           <Link href={rampLink} passHref>
             <BuyCryptoOption name="Ramp">
@@ -68,7 +80,7 @@ const _BuyCryptoOptions = ({ rampLink }: { rampLink?: LinkProps['href'] }) => {
   )
 }
 
-const _BuyCryptoButton = ({ href, pagePath }: { href?: LinkProps['href']; pagePath: string }) => {
+const InternalBuyCryptoButton = ({ href, pagePath }: { href?: LinkProps['href']; pagePath: string }) => {
   const theme = useTheme()
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'))
 
@@ -94,7 +106,7 @@ const _BuyCryptoButton = ({ href, pagePath }: { href?: LinkProps['href']; pagePa
   )
 }
 
-const BuyCryptoButton = madProps(_BuyCryptoButton, {
+const BuyCryptoButton = madProps(InternalBuyCryptoButton, {
   href: useBuyCryptoHref,
   pagePath: usePathname,
 })
diff --git a/src/components/common/ChainIndicator/index.tsx b/src/components/common/ChainIndicator/index.tsx
index 57c9fa0a94..4178a3f15f 100644
--- a/src/components/common/ChainIndicator/index.tsx
+++ b/src/components/common/ChainIndicator/index.tsx
@@ -84,7 +84,13 @@ const ChainIndicator = ({
         <Stack>
           <span className={css.name}>{chainConfig.chainName}</span>
           {fiatValue && (
-            <Typography fontWeight={700} textAlign="left" fontSize="14px">
+            <Typography
+              sx={{
+                fontWeight: 700,
+                textAlign: 'left',
+                fontSize: '14px',
+              }}
+            >
               <FiatValue value={fiatValue} />
             </Typography>
           )}
diff --git a/src/components/common/Chip/index.tsx b/src/components/common/Chip/index.tsx
index f87237f242..07fbb82006 100644
--- a/src/components/common/Chip/index.tsx
+++ b/src/components/common/Chip/index.tsx
@@ -17,12 +17,14 @@ export function Chip({ sx, label = 'New' }: Props) {
       label={
         <Typography
           variant="caption"
-          fontWeight="bold"
-          display="flex"
-          alignItems="center"
-          gap={1}
-          letterSpacing="1px"
           component="span"
+          sx={{
+            fontWeight: 'bold',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            letterSpacing: '1px',
+          }}
         >
           {label}
         </Typography>
diff --git a/src/components/common/ChoiceButton/index.tsx b/src/components/common/ChoiceButton/index.tsx
index 9a99c8b178..c9b72e4284 100644
--- a/src/components/common/ChoiceButton/index.tsx
+++ b/src/components/common/ChoiceButton/index.tsx
@@ -28,19 +28,31 @@ const ChoiceButton = ({
       >
         <SvgIcon component={icon} fontSize="small" inheritViewBox color={iconColor} />
       </Box>
-
-      <Box py={0.2}>
-        <Typography fontWeight="bold">{title}</Typography>
+      <Box
+        sx={{
+          py: 0.2,
+        }}
+      >
+        <Typography
+          sx={{
+            fontWeight: 'bold',
+          }}
+        >
+          {title}
+        </Typography>
 
         {description && (
-          <Typography variant="body2" color="primary.light">
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'primary.light',
+            }}
+          >
             {description}
           </Typography>
         )}
       </Box>
-
       <SvgIcon component={ChevronRightRoundedIcon} color="border" sx={{ ml: 'auto' }} />
-
       {chip && <Box className={css.chip}>{chip}</Box>}
     </ButtonBase>
   )
diff --git a/src/components/common/ConnectWallet/AccountCenter.tsx b/src/components/common/ConnectWallet/AccountCenter.tsx
index e38c84434d..985de7d111 100644
--- a/src/components/common/ConnectWallet/AccountCenter.tsx
+++ b/src/components/common/ConnectWallet/AccountCenter.tsx
@@ -35,12 +35,18 @@ export const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
         <Box className={css.buttonContainer}>
           <WalletOverview wallet={wallet} balance={balance} showBalance />
 
-          <Box display="flex" alignItems="center" justifyContent="flex-end" marginLeft="auto">
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              marginLeft: 'auto',
+            }}
+          >
             {open ? <ExpandLessIcon color="border" /> : <ExpandMoreIcon color="border" />}
           </Box>
         </Box>
       </ButtonBase>
-
       <Popover
         id={id}
         open={open}
diff --git a/src/components/common/CookieAndTermBanner/index.tsx b/src/components/common/CookieAndTermBanner/index.tsx
index 3c31806db4..43355279f5 100644
--- a/src/components/common/CookieAndTermBanner/index.tsx
+++ b/src/components/common/CookieAndTermBanner/index.tsx
@@ -77,15 +77,31 @@ export const CookieAndTermBanner = ({
   return (
     <Paper className={classnames(css.container, { [css.inverted]: inverted })}>
       {warning && (
-        <Typography align="center" mb={2} color="warning.background" variant="body2">
+        <Typography
+          align="center"
+          variant="body2"
+          sx={{
+            mb: 2,
+            color: 'warning.background',
+          }}
+        >
           <SvgIcon component={WarningIcon} inheritViewBox fontSize="small" color="error" sx={{ mb: -0.4 }} /> {warning}
         </Typography>
       )}
-
       <form>
-        <Grid container alignItems="center">
+        <Grid
+          container
+          sx={{
+            alignItems: 'center',
+          }}
+        >
           <Grid item xs>
-            <Typography variant="body2" mb={2}>
+            <Typography
+              variant="body2"
+              sx={{
+                mb: 2,
+              }}
+            >
               By browsing this page, you accept our{' '}
               <ExternalLink href={AppRoutes.terms}>Terms & Conditions</ExternalLink> (last updated{' '}
               {metadata.last_update_date}) and the use of necessary cookies. By clicking &quot;Accept all&quot; you
@@ -93,15 +109,29 @@ export const CookieAndTermBanner = ({
               <ExternalLink href={AppRoutes.cookie}>Cookie policy</ExternalLink>
             </Typography>
 
-            <Grid container alignItems="center" gap={4}>
+            <Grid
+              container
+              sx={{
+                alignItems: 'center',
+                gap: 4,
+              }}
+            >
               <Grid item xs={12} sm>
-                <Box mb={2}>
+                <Box
+                  sx={{
+                    mb: 2,
+                  }}
+                >
                   <CookieCheckbox checkboxProps={{ id: 'necessary', disabled: true }} label="Necessary" checked />
                   <br />
                   <Typography variant="body2">Locally stored data for core functionality</Typography>
                 </Box>
 
-                <Box mb={2}>
+                <Box
+                  sx={{
+                    mb: 2,
+                  }}
+                >
                   <CookieCheckbox
                     checkboxProps={{ ...register(CookieAndTermType.UPDATES), id: 'beamer' }}
                     label="Beamer"
@@ -125,7 +155,15 @@ export const CookieAndTermBanner = ({
               </Grid>
             </Grid>
 
-            <Grid container alignItems="center" justifyContent="center" mt={4} gap={2}>
+            <Grid
+              container
+              sx={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                mt: 4,
+                gap: 2,
+              }}
+            >
               <Grid item>
                 <Typography>
                   <Button onClick={handleAccept} variant="text" size="small" color="inherit" disableElevation>
diff --git a/src/components/common/CopyAddressButton/index.tsx b/src/components/common/CopyAddressButton/index.tsx
index 83a378fa73..0b6f8e3efe 100644
--- a/src/components/common/CopyAddressButton/index.tsx
+++ b/src/components/common/CopyAddressButton/index.tsx
@@ -22,7 +22,13 @@ const CopyAddressButton = ({
   const checksummedAddress = checksumAddress(address)
 
   const dialogContent = trusted ? undefined : (
-    <Box display="flex" flexDirection="column" gap={2}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
       <EthHashInfo
         address={checksummedAddress}
         shortAddress={false}
diff --git a/src/components/common/CopyTooltip/ConfirmCopyModal.tsx b/src/components/common/CopyTooltip/ConfirmCopyModal.tsx
index d659346f01..dd21436a0c 100644
--- a/src/components/common/CopyTooltip/ConfirmCopyModal.tsx
+++ b/src/components/common/CopyTooltip/ConfirmCopyModal.tsx
@@ -35,9 +35,22 @@ const ConfirmCopyModal = ({ open, onClose, onCopy, children }: ConfirmCopyModalP
   return (
     <Dialog open={open} onClose={onClose}>
       <DialogTitle>
-        <Box data-testid="untrusted-token-warning" display="flex" flexDirection="row" alignItems="center" gap={1}>
+        <Box
+          data-testid="untrusted-token-warning"
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 1,
+          }}
+        >
           <SvgIcon component={WarningIcon} inheritViewBox color="warning" sx={{ mb: -0.4 }} />
-          <Typography variant="h6" fontWeight={700}>
+          <Typography
+            variant="h6"
+            sx={{
+              fontWeight: 700,
+            }}
+          >
             Before you copy
           </Typography>
           <IconButton aria-label="close" onClick={onClose} sx={{ marginLeft: 'auto' }}>
@@ -49,7 +62,12 @@ const ConfirmCopyModal = ({ open, onClose, onCopy, children }: ConfirmCopyModalP
       <DialogContent>{children}</DialogContent>
       <Divider />
       <DialogActions sx={{ padding: 3 }}>
-        <Box className={css.dialogActions} gap={1}>
+        <Box
+          className={css.dialogActions}
+          sx={{
+            gap: 1,
+          }}
+        >
           <Track {...TX_LIST_EVENTS.COPY_WARNING_PROCEED}>
             <Button size="small" variant="text" color="primary" onClick={onCopy} fullWidth>
               Proceed and copy
diff --git a/src/components/common/Countdown/index.tsx b/src/components/common/Countdown/index.tsx
index de4b9a37ca..67bd8f21cb 100644
--- a/src/components/common/Countdown/index.tsx
+++ b/src/components/common/Countdown/index.tsx
@@ -22,7 +22,12 @@ export function Countdown({ seconds }: { seconds: number }): ReactElement | null
 
   if (seconds <= 60) {
     return (
-      <Typography fontWeight={700} component="span">
+      <Typography
+        component="span"
+        sx={{
+          fontWeight: 700,
+        }}
+      >
         {'< 1 min'}
       </Typography>
     )
@@ -31,7 +36,12 @@ export function Countdown({ seconds }: { seconds: number }): ReactElement | null
   const { days, hours, minutes } = _getCountdown(seconds)
 
   return (
-    <Box display="flex" gap={1}>
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 1,
+      }}
+    >
       <TimeLeft value={days} unit="day" />
       <TimeLeft value={hours} unit="hr" />
       <TimeLeft value={minutes} unit="min" />
@@ -46,10 +56,20 @@ function TimeLeft({ value, unit }: { value: number; unit: string }): ReactElemen
 
   return (
     <div>
-      <Typography fontWeight={700} component="span">
+      <Typography
+        component="span"
+        sx={{
+          fontWeight: 700,
+        }}
+      >
         {value}
       </Typography>{' '}
-      <Typography color="primary.light" component="span">
+      <Typography
+        component="span"
+        sx={{
+          color: 'primary.light',
+        }}
+      >
         {value === 1 ? unit : `${unit}s`}
       </Typography>
     </div>
diff --git a/src/components/common/DatePickerInput/index.tsx b/src/components/common/DatePickerInput/index.tsx
index 1d8ca61372..4ee9be8a31 100644
--- a/src/components/common/DatePickerInput/index.tsx
+++ b/src/components/common/DatePickerInput/index.tsx
@@ -2,7 +2,6 @@ import { useFormContext, Controller } from 'react-hook-form'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { DatePicker } from '@mui/x-date-pickers/DatePicker'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
-import TextField from '@mui/material/TextField'
 import { isFuture, isValid, startOfDay } from 'date-fns'
 
 import inputCss from '@/styles/inputs.module.css'
@@ -50,14 +49,11 @@ const DatePickerInput = ({
           <DatePicker
             className={inputCss.input}
             label={label}
-            inputFormat="dd/MM/yyyy"
+            format="dd/MM/yyyy"
             {...field}
             disableFuture={disableFuture}
-            renderInput={({ label, ...params }) => (
-              <TextField label={fieldState.error?.message || label} {...params} fullWidth error={!!fieldState.error} />
-            )}
-            PaperProps={{
-              elevation: 2,
+            slotProps={{
+              textField: { fullWidth: true, label: fieldState.error?.message || label, error: !!fieldState.error },
             }}
           />
         </LocalizationProvider>
diff --git a/src/components/common/Disclaimer/index.tsx b/src/components/common/Disclaimer/index.tsx
index 1fa869a84c..c2c01d4ed6 100644
--- a/src/components/common/Disclaimer/index.tsx
+++ b/src/components/common/Disclaimer/index.tsx
@@ -20,24 +20,48 @@ export const Disclaimer = ({
     <div className={css.container}>
       <Paper sx={{ maxWidth: '500px' }}>
         <Stack
-          padding="var(--space-3)"
-          gap={2}
-          display="flex"
-          alignItems="center"
-          sx={({ palette }) => ({ borderBottom: `1px solid ${palette.border.light}` })}
+          sx={[
+            {
+              padding: 'var(--space-3)',
+              gap: 2,
+              display: 'flex',
+              alignItems: 'center',
+            },
+            ({ palette }) => ({ borderBottom: `1px solid ${palette.border.light}` }),
+          ]}
         >
-          {subtitle && <Typography color="var(--color-text-secondary)">{subtitle}</Typography>}
+          {subtitle && (
+            <Typography
+              sx={{
+                color: 'var(--color-text-secondary)',
+              }}
+            >
+              {subtitle}
+            </Typography>
+          )}
 
           <Box className={css.iconCircle}>
             <SvgIcon component={InfoIcon} inheritViewBox fontSize="medium" />
           </Box>
-          <Typography variant="h3" fontWeight={700}>
+          <Typography
+            variant="h3"
+            sx={{
+              fontWeight: 700,
+            }}
+          >
             {title}
           </Typography>
           <Typography variant="body2">{content}</Typography>
           <Divider />
         </Stack>
-        <Box display="flex" justifyContent="center" pt={3} pb={2}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            pt: 3,
+            pb: 2,
+          }}
+        >
           <Button variant="contained" size="small" sx={{ px: '16px' }} onClick={onAccept}>
             {buttonText || 'Got it'}
           </Button>
diff --git a/src/components/common/EnhancedTable/index.tsx b/src/components/common/EnhancedTable/index.tsx
index 1be2541188..72086bed01 100644
--- a/src/components/common/EnhancedTable/index.tsx
+++ b/src/components/common/EnhancedTable/index.tsx
@@ -177,7 +177,6 @@ function EnhancedTable({ rows, headCells, mobileVariant }: EnhancedTableProps) {
           </TableBody>
         </Table>
       </TableContainer>
-
       {rows.length > pagedRows.length && (
         <TablePagination
           rowsPerPageOptions={pageSizes}
diff --git a/src/components/common/ErrorBoundary/index.tsx b/src/components/common/ErrorBoundary/index.tsx
index bb410b7c98..8c9238db07 100644
--- a/src/components/common/ErrorBoundary/index.tsx
+++ b/src/components/common/ErrorBoundary/index.tsx
@@ -16,7 +16,12 @@ const ErrorBoundary = ({ error, componentStack }: ErrorBoundaryProps) => {
   return (
     <div className={css.container}>
       <div className={css.wrapper}>
-        <Typography variant="h3" color="text.primary">
+        <Typography
+          variant="h3"
+          sx={{
+            color: 'text.primary',
+          }}
+        >
           Something went wrong,
           <br />
           please try again.
@@ -25,7 +30,11 @@ const ErrorBoundary = ({ error, componentStack }: ErrorBoundaryProps) => {
         <CircularIcon icon={WarningIcon} badgeColor="warning" />
 
         {IS_PRODUCTION ? (
-          <Typography color="text.primary">
+          <Typography
+            sx={{
+              color: 'text.primary',
+            }}
+          >
             In case the problem persists, please reach out to us via our{' '}
             <ExternalLink href={HELP_CENTER_URL}>Help Center</ExternalLink>
           </Typography>
@@ -36,7 +45,13 @@ const ErrorBoundary = ({ error, componentStack }: ErrorBoundaryProps) => {
             <Typography color="error">{componentStack}</Typography>
           </>
         )}
-        <Link href={AppRoutes.welcome.index} color="primary" mt={2}>
+        <Link
+          href={AppRoutes.welcome.index}
+          color="primary"
+          sx={{
+            mt: 2,
+          }}
+        >
           Go home
         </Link>
       </div>
diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
index 39cb29ae58..bd1d15b8c7 100644
--- a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
+++ b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
@@ -81,11 +81,28 @@ const SrcEthHashInfo = ({
           )}
         </div>
       )}
-
-      <Box overflow="hidden" className={onlyName ? css.inline : undefined} gap={0.5}>
+      <Box
+        className={onlyName ? css.inline : undefined}
+        sx={{
+          overflow: 'hidden',
+          gap: 0.5,
+        }}
+      >
         {name && (
-          <Box title={name} display="flex" alignItems="center" gap={0.5}>
-            <Box overflow="hidden" textOverflow="ellipsis">
+          <Box
+            title={name}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+            }}
+          >
+            <Box
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
               {name}
             </Box>
 
@@ -101,7 +118,14 @@ const SrcEthHashInfo = ({
 
         <div className={classnames(css.addressContainer, { [css.inline]: onlyName })}>
           {(!onlyName || !name) && (
-            <Box fontWeight="inherit" fontSize="inherit" overflow="hidden" textOverflow="ellipsis">
+            <Box
+              sx={{
+                fontWeight: 'inherit',
+                fontSize: 'inherit',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
               {copyAddress ? (
                 <CopyAddressButton prefix={prefix} address={address} copyPrefix={shouldCopyPrefix} trusted={trusted}>
                   {addressElement}
@@ -117,7 +141,11 @@ const SrcEthHashInfo = ({
           )}
 
           {hasExplorer && ExplorerButtonProps && (
-            <Box color="border.main">
+            <Box
+              sx={{
+                color: 'border.main',
+              }}
+            >
               <ExplorerButton {...ExplorerButtonProps} onClick={stopPropagation} />
             </Box>
           )}
diff --git a/src/components/common/ExplorerButton/index.tsx b/src/components/common/ExplorerButton/index.tsx
index 4bc6db7373..d14c7e7df1 100644
--- a/src/components/common/ExplorerButton/index.tsx
+++ b/src/components/common/ExplorerButton/index.tsx
@@ -44,8 +44,20 @@ const ExplorerButton = ({
       href={href}
       onClick={onClick}
     >
-      <Box display="flex" alignItems="center">
-        <Typography fontWeight={700} fontSize="small" mr="var(--space-1)" noWrap>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <Typography
+          noWrap
+          sx={{
+            fontWeight: 700,
+            fontSize: 'small',
+            mr: 'var(--space-1)',
+          }}
+        >
           View on explorer
         </Typography>
 
diff --git a/src/components/common/ExternalLink/index.tsx b/src/components/common/ExternalLink/index.tsx
index 30b96958fc..9090c38177 100644
--- a/src/components/common/ExternalLink/index.tsx
+++ b/src/components/common/ExternalLink/index.tsx
@@ -15,7 +15,14 @@ const ExternalLink = ({
 
   return (
     <Link rel="noreferrer noopener" target="_blank" {...props}>
-      <Box display="inline-flex" alignItems="center" gap={0.2} component="span">
+      <Box
+        component="span"
+        sx={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 0.2,
+        }}
+      >
         {children}
         {!noIcon && <OpenInNewRounded fontSize="small" />}
       </Box>
diff --git a/src/components/common/FiatValue/index.tsx b/src/components/common/FiatValue/index.tsx
index d934a7b284..e7fb2daf3b 100644
--- a/src/components/common/FiatValue/index.tsx
+++ b/src/components/common/FiatValue/index.tsx
@@ -38,7 +38,14 @@ const FiatValue = ({
           <>
             {whole}
             {decimals && (
-              <Typography component="span" color="text.secondary" fontSize="inherit" fontWeight="inherit">
+              <Typography
+                component="span"
+                sx={{
+                  color: 'text.secondary',
+                  fontSize: 'inherit',
+                  fontWeight: 'inherit',
+                }}
+              >
                 {decimals}
               </Typography>
             )}
diff --git a/src/components/common/FileUpload/index.tsx b/src/components/common/FileUpload/index.tsx
index 255971f78d..7ccd6315b0 100644
--- a/src/components/common/FileUpload/index.tsx
+++ b/src/components/common/FileUpload/index.tsx
@@ -23,8 +23,22 @@ const ColoredFileIcon = ({ color }: { color: SvgIconTypeMap['props']['color'] })
 
 const UploadSummary = ({ fileInfo, onRemove }: { fileInfo: FileInfo; onRemove: (() => void) | MouseEventHandler }) => {
   return (
-    <Grid container direction="column" gap={1} mt={3}>
-      <Grid container gap={1} display="flex" alignItems="center">
+    <Grid
+      container
+      direction="column"
+      sx={{
+        gap: 1,
+        mt: 3,
+      }}
+    >
+      <Grid
+        container
+        sx={{
+          gap: 1,
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
         <Grid item xs={1}>
           <ColoredFileIcon color="primary" />
         </Grid>
@@ -33,18 +47,40 @@ const UploadSummary = ({ fileInfo, onRemove }: { fileInfo: FileInfo; onRemove: (
           {fileInfo.additionalInfo && ` - ${fileInfo.additionalInfo}`}
         </Grid>
 
-        <Grid item xs display="flex" justifyContent="flex-end">
+        <Grid
+          item
+          xs
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+          }}
+        >
           <IconButton onClick={onRemove} size="small">
             <HighlightOffIcon color="primary" />
           </IconButton>
         </Grid>
       </Grid>
-      <Grid item xs={12} display="flex" justifyContent="flex-start">
+      <Grid
+        item
+        xs={12}
+        sx={{
+          display: 'flex',
+          justifyContent: 'flex-start',
+        }}
+      >
         <div className={css.verticalLine} />
       </Grid>
       <>
         {fileInfo.summary.map((summaryItem, idx) => (
-          <Grid key={`${fileInfo.name}${idx}`} container display="flex" gap={1} alignItems="center">
+          <Grid
+            key={`${fileInfo.name}${idx}`}
+            container
+            sx={{
+              display: 'flex',
+              gap: 1,
+              alignItems: 'center',
+            }}
+          >
             <Grid item xs={1}>
               <ColoredFileIcon color="border" />
             </Grid>
@@ -54,7 +90,14 @@ const UploadSummary = ({ fileInfo, onRemove }: { fileInfo: FileInfo; onRemove: (
           </Grid>
         ))}
         {fileInfo.error && (
-          <Grid container display="flex" gap={1} alignItems="center">
+          <Grid
+            container
+            sx={{
+              display: 'flex',
+              gap: 1,
+              alignItems: 'center',
+            }}
+          >
             <Grid item xs={1}>
               <ColoredFileIcon color="border" />
             </Grid>
@@ -105,8 +148,13 @@ const FileUpload = ({
       }}
     >
       {getInputProps && <input {...getInputProps()} />}
-
-      <Box display="flex" alignItems="center" gap={1}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+        }}
+      >
         <SvgIcon
           component={FileIcon}
           inheritViewBox
diff --git a/src/components/common/LegalDisclaimerContent/index.tsx b/src/components/common/LegalDisclaimerContent/index.tsx
index 956a8a1246..1eb9b8c7cc 100644
--- a/src/components/common/LegalDisclaimerContent/index.tsx
+++ b/src/components/common/LegalDisclaimerContent/index.tsx
@@ -1,7 +1,7 @@
 import ExternalLink from '@/components/common/ExternalLink'
 import { AppRoutes } from '@/config/routes'
 import { Typography } from '@mui/material'
-
+import { type ReactElement } from 'react'
 import css from './styles.module.css'
 
 const LegalDisclaimerContent = ({
@@ -10,21 +10,35 @@ const LegalDisclaimerContent = ({
 }: {
   withTitle?: boolean
   isSafeApps?: boolean
-}): JSX.Element => (
+}): ReactElement => (
   <div className={css.disclaimerContainer}>
     {withTitle && (
-      <Typography variant="h3" fontWeight={700} my={3}>
+      <Typography
+        variant="h3"
+        sx={{
+          fontWeight: 700,
+          my: 3,
+        }}
+      >
         Disclaimer
       </Typography>
     )}
     <div className={css.disclaimerInner}>
-      <Typography mb={4}>
+      <Typography
+        sx={{
+          mb: 4,
+        }}
+      >
         You are now accessing {isSafeApps ? 'third-party apps' : 'a third-party app'}, which we do not own, control,
         maintain or audit. We are not liable for any loss you may suffer in connection with interacting with the{' '}
         {isSafeApps ? 'apps' : 'app'}, which is at your own risk.
       </Typography>
 
-      <Typography mb={4}>
+      <Typography
+        sx={{
+          mb: 4,
+        }}
+      >
         You must read our Terms, which contain more detailed provisions binding on you relating to the{' '}
         {isSafeApps ? 'apps' : 'app'}.
       </Typography>
diff --git a/src/components/common/NetworkSelector/index.tsx b/src/components/common/NetworkSelector/index.tsx
index 0bdc3904d1..be1c268b38 100644
--- a/src/components/common/NetworkSelector/index.tsx
+++ b/src/components/common/NetworkSelector/index.tsx
@@ -133,7 +133,14 @@ const UndeployedNetworkMenuItem = ({
 
 const NetworkSkeleton = () => {
   return (
-    <Stack direction="row" spacing={1} alignItems="center" p="4px 0px">
+    <Stack
+      direction="row"
+      spacing={1}
+      sx={{
+        alignItems: 'center',
+        p: '4px 0px',
+      }}
+    >
       <Skeleton variant="circular" width="24px" height="24px" />
       <Skeleton variant="rounded" sx={{ flexGrow: 1 }} />
     </Stack>
@@ -143,7 +150,12 @@ const NetworkSkeleton = () => {
 const TestnetDivider = () => {
   return (
     <Divider sx={{ m: '0px !important', '& .MuiDivider-wrapper': { p: '0px 16px' } }}>
-      <Typography variant="overline" color="border.main">
+      <Typography
+        variant="overline"
+        sx={{
+          color: 'border.main',
+        }}
+      >
         Testnets
       </Typography>
     </Divider>
@@ -196,7 +208,14 @@ const UndeployedNetworks = ({
 
   if (safeCreationLoading) {
     return (
-      <Box display="flex" alignItems="center" justifyContent="center" my={1}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          my: 1,
+        }}
+      >
         <CircularProgress size={18} />
       </Box>
     )
@@ -204,7 +223,13 @@ const UndeployedNetworks = ({
 
   const errorMessage =
     safeCreationDataError || (safeCreationData && noAvailableNetworks) ? (
-      <Stack direction="row" spacing={1} alignItems="center">
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: 'center',
+        }}
+      >
         {safeCreationDataError?.message && (
           <Tooltip title={safeCreationDataError?.message}>
             <InfoOutlined color="info" fontSize="medium" />
@@ -220,8 +245,19 @@ const UndeployedNetworks = ({
 
   if (errorMessage) {
     return (
-      <Box px={2} py={1}>
-        <Typography color="text.secondary" fontSize="14px" maxWidth={300}>
+      <Box
+        sx={{
+          px: 2,
+          py: 1,
+        }}
+      >
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            fontSize: '14px',
+            maxWidth: 300,
+          }}
+        >
           {errorMessage}
         </Typography>
       </Box>
@@ -241,8 +277,15 @@ const UndeployedNetworks = ({
   return (
     <>
       <ButtonBase className={css.listSubHeader} onClick={onShowAllNetworks} tabIndex={-1}>
-        <Stack direction="row" spacing={1} alignItems="center">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: 'center',
+          }}
+        >
           <div data-testid="show-all-networks">Show all networks</div>
+
           <ExpandMoreIcon
             fontSize="small"
             sx={{
@@ -253,7 +296,11 @@ const UndeployedNetworks = ({
       </ButtonBase>
       <Collapse in={open} timeout="auto" unmountOnExit>
         {!safeCreationData ? (
-          <Box p="0px 16px">
+          <Box
+            sx={{
+              p: '0px 16px',
+            }}
+          >
             <NetworkSkeleton />
             <NetworkSkeleton />
           </Box>
diff --git a/src/components/common/Notifications/index.tsx b/src/components/common/Notifications/index.tsx
index 6cf42948f4..6c90f8691f 100644
--- a/src/components/common/Notifications/index.tsx
+++ b/src/components/common/Notifications/index.tsx
@@ -75,7 +75,12 @@ const Toast = ({
     <Snackbar open onClose={handleClose} sx={toastStyle} autoHideDuration={autoHideDuration}>
       <Alert severity={variant} onClose={handleClose} elevation={3} sx={{ width: '340px' }}>
         {title && (
-          <Typography variant="body2" fontWeight="700">
+          <Typography
+            variant="body2"
+            sx={{
+              fontWeight: '700',
+            }}
+          >
             {title}
           </Typography>
         )}
diff --git a/src/components/common/OnboardingTooltip/index.tsx b/src/components/common/OnboardingTooltip/index.tsx
index c5868791dc..3d2bdf88c9 100644
--- a/src/components/common/OnboardingTooltip/index.tsx
+++ b/src/components/common/OnboardingTooltip/index.tsx
@@ -39,7 +39,14 @@ export const OnboardingTooltip = ({
       placement={placement}
       arrow
       title={
-        <Box display="flex" alignItems="center" gap={1} padding={1}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            padding: 1,
+          }}
+        >
           <SvgIcon component={InfoIcon} inheritViewBox fontSize="small" />
           <div style={{ minWidth: '150px' }}>{text}</div>
           <Button
diff --git a/src/components/common/PageLayout/SideDrawer.tsx b/src/components/common/PageLayout/SideDrawer.tsx
index b96686f19f..77eeda7b74 100644
--- a/src/components/common/PageLayout/SideDrawer.tsx
+++ b/src/components/common/PageLayout/SideDrawer.tsx
@@ -48,6 +48,11 @@ const SideDrawer = ({ isOpen, onToggle }: SideDrawerProps): ReactElement => {
         anchor="left"
         open={isOpen}
         onClose={() => onToggle(false)}
+        sx={{
+          // fixes a bug on small screens where the drawer is not visible,
+          // but it steals all the events from the rest of the page
+          position: 'relative',
+        }}
         className={smDrawerHidden ? css.smDrawerHidden : undefined}
       >
         <aside>
diff --git a/src/components/common/PagePlaceholder/index.tsx b/src/components/common/PagePlaceholder/index.tsx
index 94491bda59..2ab9fb124e 100644
--- a/src/components/common/PagePlaceholder/index.tsx
+++ b/src/components/common/PagePlaceholder/index.tsx
@@ -12,15 +12,19 @@ const PagePlaceholder = ({ img, text, children }: PagePlaceholderProps): ReactEl
   return (
     <div className={css.container}>
       {img}
-
       {typeof text === 'string' ? (
-        <Typography variant="body1" color="primary.light" mt={2}>
+        <Typography
+          variant="body1"
+          sx={{
+            color: 'primary.light',
+            mt: 2,
+          }}
+        >
           {text}
         </Typography>
       ) : (
         text
       )}
-
       {children}
     </div>
   )
diff --git a/src/components/common/PaginatedTxns/index.tsx b/src/components/common/PaginatedTxns/index.tsx
index 9ecf0284e9..d5ba3f0b98 100644
--- a/src/components/common/PaginatedTxns/index.tsx
+++ b/src/components/common/PaginatedTxns/index.tsx
@@ -45,22 +45,30 @@ const TxPage = ({
   return (
     <>
       {isFirstPage && filter && page && (
-        <Box display="flex" flexDirection="column" alignItems="flex-end" pt={[2, 0]} pb={3}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            pt: [2, 0],
+            pb: 3,
+          }}
+        >
           {getFilterResultCount(filter, page)}
         </Box>
       )}
-
       {page && page.results.length > 0 && <TxList items={page.results} />}
-
       {isQueue && page?.results.length === 0 && recoveryQueue.length === 0 && !hasPending && <NoQueuedTxns />}
-
       {error && <ErrorMessage>Error loading transactions</ErrorMessage>}
-
       {/* No skeletons for pending as they are shown above the queue which has them */}
       {loading && !hasPending && <SkeletonTxList />}
-
       {page?.next && onNextPage && (
-        <Box my={4} textAlign="center">
+        <Box
+          sx={{
+            my: 4,
+            textAlign: 'center',
+          }}
+        >
           <InfiniteScroll onLoadMore={() => onNextPage(page.next!)} />
         </Box>
       )}
@@ -84,7 +92,11 @@ const PaginatedTxns = ({ useTxns }: { useTxns: typeof useTxHistory | typeof useT
   }
 
   return (
-    <Box position="relative">
+    <Box
+      sx={{
+        position: 'relative',
+      }}
+    >
       {pages.map((pageUrl, index) => (
         <TxPage
           key={pageUrl}
diff --git a/src/components/common/SafeTokenWidget/__tests__/SafeTokenWidget.test.tsx b/src/components/common/SafeTokenWidget/__tests__/SafeTokenWidget.test.tsx
index 4f7ac6bfdc..b034f73b56 100644
--- a/src/components/common/SafeTokenWidget/__tests__/SafeTokenWidget.test.tsx
+++ b/src/components/common/SafeTokenWidget/__tests__/SafeTokenWidget.test.tsx
@@ -20,7 +20,7 @@ describe('SafeTokenWidget', () => {
       () =>
         ({
           get: () => fakeSafeAddress,
-        } as any),
+        }) as any,
     )
 
     jest.spyOn(safePass, 'useGetOwnGlobalCampaignRankQuery').mockReturnValue({
diff --git a/src/components/common/SafeTokenWidget/index.tsx b/src/components/common/SafeTokenWidget/index.tsx
index 6b527cd726..45ba93721a 100644
--- a/src/components/common/SafeTokenWidget/index.tsx
+++ b/src/components/common/SafeTokenWidget/index.tsx
@@ -73,9 +73,11 @@ const SafeTokenWidget = () => {
                 <Typography
                   component="div"
                   variant="body2"
-                  lineHeight="20px"
                   // Badge does not accept className so must be here
                   className={css.allocationBadge}
+                  sx={{
+                    lineHeight: '20px',
+                  }}
                 >
                   {allocationDataLoading || allocationLoading ? (
                     <Skeleton width="16px" animation="wave" />
@@ -95,9 +97,11 @@ const SafeTokenWidget = () => {
                 <Typography
                   component="div"
                   variant="body2"
-                  lineHeight="20px"
                   // Badge does not accept className so must be here
                   className={css.allocationBadge}
+                  sx={{
+                    lineHeight: '20px',
+                  }}
                 >
                   {ownGlobalRankLoading ? (
                     <Skeleton width="16px" animation="wave" />
diff --git a/src/components/common/SpendingLimitLabel/index.tsx b/src/components/common/SpendingLimitLabel/index.tsx
index eecaba68b7..9a1448a589 100644
--- a/src/components/common/SpendingLimitLabel/index.tsx
+++ b/src/components/common/SpendingLimitLabel/index.tsx
@@ -9,7 +9,17 @@ const SpendingLimitLabel = ({
   ...rest
 }: { label: string | ReactElement; isOneTime?: boolean } & BoxProps) => {
   return (
-    <Box display="flex" alignItems="center" gap="4px" {...rest}>
+    <Box
+      {...rest}
+      sx={[
+        {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '4px',
+        },
+        ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
+      ]}
+    >
       {!isOneTime && <SvgIcon component={SpeedIcon} inheritViewBox color="border" fontSize="medium" />}
       {typeof label === 'string' ? <Typography>{label}</Typography> : label}
     </Box>
diff --git a/src/components/common/Sticky/index.tsx b/src/components/common/Sticky/index.tsx
index 7bc390b4ca..8f8433d5c9 100644
--- a/src/components/common/Sticky/index.tsx
+++ b/src/components/common/Sticky/index.tsx
@@ -3,7 +3,17 @@ import type { ReactElement } from 'react'
 
 const stickyTop = { xs: '103px', md: '111px' }
 export const Sticky = ({ children }: { children: ReactElement }): ReactElement => (
-  <Box position="sticky" zIndex="1" top={stickyTop} py={1} bgcolor="background.main" mt={-1} mb={1}>
+  <Box
+    sx={{
+      position: 'sticky',
+      zIndex: '1',
+      top: stickyTop,
+      py: 1,
+      bgcolor: 'background.main',
+      mt: -1,
+      mb: 1,
+    }}
+  >
     {children}
   </Box>
 )
diff --git a/src/components/common/Table/DataTable.tsx b/src/components/common/Table/DataTable.tsx
index 8d06bfb3f5..33b3781c7b 100644
--- a/src/components/common/Table/DataTable.tsx
+++ b/src/components/common/Table/DataTable.tsx
@@ -9,7 +9,11 @@ type DataTableProps = {
 
 export const DataTable = ({ header, rows }: DataTableProps): ReactElement | null => {
   return (
-    <Stack gap="4px">
+    <Stack
+      sx={{
+        gap: '4px',
+      }}
+    >
       {header && (
         <Typography variant="body1">
           <b>{header}</b>
diff --git a/src/components/common/TokenExplorerLink/index.tsx b/src/components/common/TokenExplorerLink/index.tsx
index b22951d81c..b76c48ec27 100644
--- a/src/components/common/TokenExplorerLink/index.tsx
+++ b/src/components/common/TokenExplorerLink/index.tsx
@@ -11,7 +11,12 @@ const ExplorerLink = ({ address }: { address: string }): ReactElement | null =>
   if (!link) return null
 
   return (
-    <Typography component="span" color="border.main">
+    <Typography
+      component="span"
+      sx={{
+        color: 'border.main',
+      }}
+    >
       <ExplorerButton href={link.href} title={link.title} />
     </Typography>
   )
diff --git a/src/components/common/WalletInfo/index.tsx b/src/components/common/WalletInfo/index.tsx
index 23c1af8cbd..eeea34448e 100644
--- a/src/components/common/WalletInfo/index.tsx
+++ b/src/components/common/WalletInfo/index.tsx
@@ -42,7 +42,12 @@ export const WalletInfo = ({ wallet, balance, currentChainId, onboard, addressBo
 
   return (
     <>
-      <Box display="flex" gap="12px">
+      <Box
+        sx={{
+          display: 'flex',
+          gap: '12px',
+        }}
+      >
         <WalletIdenticon wallet={wallet} size={36} />
 
         <Typography variant="body2" className={css.address} component="div">
@@ -57,25 +62,44 @@ export const WalletInfo = ({ wallet, balance, currentChainId, onboard, addressBo
           />
         </Typography>
       </Box>
-
       <Box className={css.rowContainer}>
         <Box className={css.row}>
-          <Typography variant="body2" color="primary.light">
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'primary.light',
+            }}
+          >
             Wallet
           </Typography>
           <Typography variant="body2">{wallet.label}</Typography>
         </Box>
 
         <Box className={css.row}>
-          <Typography variant="body2" color="primary.light">
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'primary.light',
+            }}
+          >
             Balance
           </Typography>
-          <Typography variant="body2" textAlign="right">
+          <Typography
+            variant="body2"
+            sx={{
+              textAlign: 'right',
+            }}
+          >
             <WalletBalance balance={balance} />
 
             {currentChainId !== chainInfo?.chainId && (
               <>
-                <Typography variant="body2" color="primary.light">
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'primary.light',
+                  }}
+                >
                   ({chainInfo?.chainName || 'Unknown chain'})
                 </Typography>
               </>
@@ -83,8 +107,14 @@ export const WalletInfo = ({ wallet, balance, currentChainId, onboard, addressBo
           </Typography>
         </Box>
       </Box>
-
-      <Box display="flex" flexDirection="column" gap={2} width={1}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          width: 1,
+        }}
+      >
         <ChainSwitcher fullWidth />
 
         <Button variant="contained" size="small" onClick={handleSwitchWallet} fullWidth>
diff --git a/src/components/common/WalletOverview/index.tsx b/src/components/common/WalletOverview/index.tsx
index f60bfc830c..7a6a8887f2 100644
--- a/src/components/common/WalletOverview/index.tsx
+++ b/src/components/common/WalletOverview/index.tsx
@@ -40,7 +40,6 @@ const WalletOverview = ({
   return (
     <Box className={css.container}>
       <WalletIdenticon wallet={wallet} />
-
       <Box className={css.walletDetails}>
         <Typography variant="body2" component="div">
           {wallet.ens ? (
@@ -58,7 +57,14 @@ const WalletOverview = ({
         </Typography>
 
         {showBalance && (
-          <Typography variant="caption" component="div" fontWeight="bold" display={{ xs: 'none', sm: 'block' }}>
+          <Typography
+            variant="caption"
+            component="div"
+            sx={{
+              fontWeight: 'bold',
+              display: { xs: 'none', sm: 'block' },
+            }}
+          >
             <WalletBalance balance={balance} />
           </Typography>
         )}
diff --git a/src/components/common/WidgetDisclaimer/index.tsx b/src/components/common/WidgetDisclaimer/index.tsx
index 3c5969d784..a7cf99e66a 100644
--- a/src/components/common/WidgetDisclaimer/index.tsx
+++ b/src/components/common/WidgetDisclaimer/index.tsx
@@ -11,17 +11,30 @@ const linkSx = {
 const WidgetDisclaimer = ({ widgetName }: { widgetName: string }) => (
   <div className={css.disclaimerContainer}>
     <div className={css.disclaimerInner}>
-      <Typography mb={4} mt={4}>
+      <Typography
+        sx={{
+          mb: 4,
+          mt: 4,
+        }}
+      >
         You are now accessing a third party widget.
       </Typography>
 
-      <Typography mb={4}>
+      <Typography
+        sx={{
+          mb: 4,
+        }}
+      >
         Please note that we do not own, control, maintain or audit the {widgetName}. Use of the widget is subject to
         third party terms & conditions. We are not liable for any loss you may suffer in connection with interacting
         with the widget, which is at your own risk.
       </Typography>
 
-      <Typography mb={4}>
+      <Typography
+        sx={{
+          mb: 4,
+        }}
+      >
         Our{' '}
         <ExternalLink href={AppRoutes.terms} sx={linkSx}>
           terms
diff --git a/src/components/common/icons/CircularIcon/index.tsx b/src/components/common/icons/CircularIcon/index.tsx
index 527f103401..d6f67337d5 100644
--- a/src/components/common/icons/CircularIcon/index.tsx
+++ b/src/components/common/icons/CircularIcon/index.tsx
@@ -24,7 +24,13 @@ const CircularIcon = ({
       }}
       className={css.badge}
     >
-      <Box className={css.circle} width={size} height={size}>
+      <Box
+        className={css.circle}
+        sx={{
+          width: size,
+          height: size,
+        }}
+      >
         <SvgIcon
           component={icon}
           inheritViewBox
diff --git a/src/components/dashboard/Assets/index.tsx b/src/components/dashboard/Assets/index.tsx
index 12aca61614..012765ff6e 100644
--- a/src/components/dashboard/Assets/index.tsx
+++ b/src/components/dashboard/Assets/index.tsx
@@ -29,7 +29,13 @@ const AssetsDummy = () => (
 
 const NoAssets = () => (
   <Paper elevation={0} sx={{ p: 5 }}>
-    <Typography variant="h3" fontWeight="bold" mb={1}>
+    <Typography
+      variant="h3"
+      sx={{
+        fontWeight: 'bold',
+        mb: 1,
+      }}
+    >
       Add funds to get started
     </Typography>
 
@@ -37,7 +43,12 @@ const NoAssets = () => (
       Add funds directly from your bank account or copy your address to send tokens from a different account.
     </Typography>
 
-    <Box display="flex" mt={2}>
+    <Box
+      sx={{
+        display: 'flex',
+        mt: 2,
+      }}
+    >
       <BuyCryptoButton />
     </Box>
   </Paper>
@@ -45,7 +56,11 @@ const NoAssets = () => (
 
 const AssetRow = ({ item, showSwap }: { item: SafeBalanceResponse['items'][number]; showSwap?: boolean }) => (
   <Box className={css.container} key={item.tokenInfo.address}>
-    <Box flex={1}>
+    <Box
+      sx={{
+        flex: 1,
+      }}
+    >
       <TokenAmount
         value={item.balance}
         decimals={item.tokenInfo.decimals}
@@ -54,11 +69,22 @@ const AssetRow = ({ item, showSwap }: { item: SafeBalanceResponse['items'][numbe
       />
     </Box>
 
-    <Box flex={1} display={['none', 'block']} textAlign="right" pr={4}>
+    <Box
+      sx={{
+        flex: 1,
+        display: ['none', 'block'],
+        textAlign: 'right',
+        pr: 4,
+      }}
+    >
       <FiatValue value={item.fiatBalance} />
     </Box>
 
-    <Box my={-0.7}>
+    <Box
+      sx={{
+        my: -0.7,
+      }}
+    >
       {showSwap ? (
         <SwapButton tokenInfo={item.tokenInfo} amount="0" trackingLabel={SWAP_LABELS.dashboard_assets} />
       ) : (
@@ -72,7 +98,13 @@ const AssetList = ({ items }: { items: SafeBalanceResponse['items'] }) => {
   const isSwapFeatureEnabled = useIsSwapFeatureEnabled()
 
   return (
-    <Box display="flex" flexDirection="column" gap={1}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+      }}
+    >
       {items.map((item) => (
         <AssetRow item={item} key={item.tokenInfo.address} showSwap={isSwapFeatureEnabled} />
       ))}
@@ -103,13 +135,19 @@ const AssetsWidget = () => {
   return (
     <WidgetContainer data-testid="assets-widget">
       <div className={css.title}>
-        <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2}>
+        <Typography
+          component="h2"
+          variant="subtitle1"
+          sx={{
+            fontWeight: 700,
+            mb: 2,
+          }}
+        >
           Top assets
         </Typography>
 
         {items.length > 0 && <ViewAllLink url={viewAllUrl} text={`View all (${visibleAssets.length})`} />}
       </div>
-
       <WidgetBody>
         {loading ? <AssetsDummy /> : items.length > 0 ? <AssetList items={items} /> : <NoAssets />}
       </WidgetBody>
diff --git a/src/components/dashboard/FirstSteps/index.tsx b/src/components/dashboard/FirstSteps/index.tsx
index a508a899fc..4d677f6de2 100644
--- a/src/components/dashboard/FirstSteps/index.tsx
+++ b/src/components/dashboard/FirstSteps/index.tsx
@@ -57,10 +57,21 @@ const StatusCard = ({
           <CircleOutlinedIcon color="inherit" fontSize="medium" />
         )}
       </div>
-      <Typography variant="h4" fontWeight="bold" mb={2}>
+      <Typography
+        variant="h4"
+        sx={{
+          fontWeight: 'bold',
+          mb: 2,
+        }}
+      >
         {title}
       </Typography>
-      <Typography variant="body2" color="primary.light">
+      <Typography
+        variant="body2"
+        sx={{
+          color: 'primary.light',
+        }}
+      >
         {content}
       </Typography>
       {children}
@@ -137,7 +148,11 @@ const AddFundsWidget = ({ completed }: { completed: boolean }) => {
     >
       {!completed && (
         <>
-          <Box mt={2}>
+          <Box
+            sx={{
+              mt: 2,
+            }}
+          >
             <Track {...OVERVIEW_EVENTS.ADD_FUNDS}>
               <Button
                 data-testid="add-funds-btn"
@@ -156,10 +171,38 @@ const AddFundsWidget = ({ completed }: { completed: boolean }) => {
             dialogTitle="Add funds to your Safe Account"
             hideChainIndicator
           >
-            <Box px={4} pb={5} pt={4}>
-              <Grid container spacing={2} alignItems="center" justifyContent="center" mb={4}>
-                <Grid data-testid="qr-code" item textAlign="center">
-                  <Box p={1} border={1} borderRadius="6px" borderColor="border.light" display="inline-flex">
+            <Box
+              sx={{
+                px: 4,
+                pb: 5,
+                pt: 4,
+              }}
+            >
+              <Grid
+                container
+                spacing={2}
+                sx={{
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  mb: 4,
+                }}
+              >
+                <Grid
+                  data-testid="qr-code"
+                  item
+                  sx={{
+                    textAlign: 'center',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      p: 1,
+                      border: 1,
+                      borderRadius: '6px',
+                      borderColor: 'border.light',
+                      display: 'inline-flex',
+                    }}
+                  >
                     <QRCode value={qrCode} size={132} />
                   </Box>
                   <Box>
@@ -180,18 +223,24 @@ const AddFundsWidget = ({ completed }: { completed: boolean }) => {
                   </Box>
                 </Grid>
                 <Grid item xs>
-                  <Typography mb={2}>
+                  <Typography
+                    sx={{
+                      mb: 2,
+                    }}
+                  >
                     Add funds directly from your bank account or copy your address to send tokens from a different
                     account.
                   </Typography>
 
                   <Box
                     data-testid="address-info"
-                    bgcolor="background.main"
-                    p={2}
-                    borderRadius="6px"
-                    alignSelf="flex-start"
-                    fontSize="14px"
+                    sx={{
+                      bgcolor: 'background.main',
+                      p: 2,
+                      borderRadius: '6px',
+                      alignSelf: 'flex-start',
+                      fontSize: '14px',
+                    }}
                   >
                     <EthHashInfo
                       address={safeAddress}
@@ -205,12 +254,24 @@ const AddFundsWidget = ({ completed }: { completed: boolean }) => {
                 </Grid>
               </Grid>
 
-              <Box mb={4} position="relative" textAlign="center">
+              <Box
+                sx={{
+                  mb: 4,
+                  position: 'relative',
+                  textAlign: 'center',
+                }}
+              >
                 <Typography className={css.orDivider}>or</Typography>
                 <Divider />
               </Box>
 
-              <Typography mb={2}>Buy crypto with fiat:</Typography>
+              <Typography
+                sx={{
+                  mb: 2,
+                }}
+              >
+                Buy crypto with fiat:
+              </Typography>
               <BuyCryptoOptions />
             </Box>
           </ModalDialog>
@@ -280,7 +341,11 @@ const ActivateSafeWidget = ({ chain }: { chain: ChainInfo | undefined }) => {
         completed={false}
         content={content}
       >
-        <Box mt={2}>
+        <Box
+          sx={{
+            mt: 2,
+          }}
+        >
           <ActivateAccountButton />
         </Box>
       </StatusCard>
@@ -295,7 +360,14 @@ const AccountReadyWidget = () => {
       <div className={classnames(css.checkIcon)}>
         <CheckCircleOutlineRoundedIcon sx={{ width: '60px', height: '60px' }} />
       </div>
-      <Typography variant="h4" fontWeight="bold" mb={2} mt={2}>
+      <Typography
+        variant="h4"
+        sx={{
+          fontWeight: 'bold',
+          mb: 2,
+          mt: 2,
+        }}
+      >
         Safe Account is ready!
       </Typography>
       <Typography>Continue to improve your account security and unlock more features</Typography>
@@ -327,8 +399,22 @@ const FirstSteps = () => {
   return (
     <WidgetContainer>
       <WidgetBody data-testid="activation-section">
-        <Grid container gap={3} mb={2} flexWrap="nowrap" alignItems="center">
-          <Grid item position="relative" display="inline-flex">
+        <Grid
+          container
+          sx={{
+            gap: 3,
+            mb: 2,
+            flexWrap: 'nowrap',
+            alignItems: 'center',
+          }}
+        >
+          <Grid
+            item
+            sx={{
+              position: 'relative',
+              display: 'inline-flex',
+            }}
+          >
             <svg className={css.gradient}>
               <defs>
                 <linearGradient
@@ -355,7 +441,14 @@ const FirstSteps = () => {
             />
           </Grid>
           <Grid item>
-            <Typography component="div" variant="h2" fontWeight={700} mb={1}>
+            <Typography
+              component="div"
+              variant="h2"
+              sx={{
+                fontWeight: 700,
+                mb: 1,
+              }}
+            >
               {isActivating ? 'Account is being activated...' : 'Activate your Safe Account'}
             </Typography>
 
diff --git a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
index 909e75c522..edb8b9f423 100644
--- a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
+++ b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
@@ -24,16 +24,40 @@ import InfiniteScroll from '@/components/common/InfiniteScroll'
 
 // A fallback component when the Safe App fails to load
 const WidgetLoadErrorFallback = () => (
-  <Box display="flex" flexDirection="column" alignItems="center" height="100%">
+  <Box
+    sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      height: '100%',
+    }}
+  >
     <Card className={css.loadErrorCard}>
       <Box className={css.loadErrorMsgContainer}>
-        <Typography variant="h4" color="text.primary" fontWeight="bold">
+        <Typography
+          variant="h4"
+          sx={{
+            color: 'text.primary',
+            fontWeight: 'bold',
+          }}
+        >
           Couldn&apos;t load governance widgets
         </Typography>
         <SvgIcon component={NetworkError} inheritViewBox className={css.loadErroricon} />
-        <Typography variant="body1" color="text.primary">
+        <Typography
+          variant="body1"
+          sx={{
+            color: 'text.primary',
+          }}
+        >
           You can try to reload the page and in case the problem persists, please reach out to us via{' '}
-          <Link target="_blank" href={DISCORD_URL} fontSize="medium">
+          <Link
+            target="_blank"
+            href={DISCORD_URL}
+            sx={{
+              fontSize: 'medium',
+            }}
+          >
             Discord
             <OpenInNew fontSize="small" color="primary" className={css.loadErroricon} />
           </Link>
@@ -91,12 +115,19 @@ const GovernanceSection = () => {
             ) : (
               <Box
                 className={css.widgetWrapper}
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-                textAlign="center"
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  textAlign: 'center',
+                }}
               >
-                <Typography variant="h1" color="text.secondary">
+                <Typography
+                  variant="h1"
+                  sx={{
+                    color: 'text.secondary',
+                  }}
+                >
                   Loading section...
                 </Typography>
               </Box>
@@ -132,14 +163,24 @@ const LazyGovernanceSection = () => {
   return (
     <>
       {hasScrolled && <InfiniteScroll onLoadMore={onVisible} />}
-
-      <Typography component="h2" variant="subtitle1" fontWeight={700}>
+      <Typography
+        component="h2"
+        variant="subtitle1"
+        sx={{
+          fontWeight: 700,
+        }}
+      >
         Governance
       </Typography>
-      <Typography variant="body2" mb={2} color="text.secondary">
+      <Typography
+        variant="body2"
+        sx={{
+          mb: 2,
+          color: 'text.secondary',
+        }}
+      >
         Use your SAFE tokens to vote on important proposals or participate in forum discussions.
       </Typography>
-
       <div className={css.lazyWrapper}>{isVisible && <GovernanceSection />}</div>
     </>
   )
diff --git a/src/components/dashboard/Overview/Overview.tsx b/src/components/dashboard/Overview/Overview.tsx
index 79f9568491..1a44d0306a 100644
--- a/src/components/dashboard/Overview/Overview.tsx
+++ b/src/components/dashboard/Overview/Overview.tsx
@@ -23,14 +23,29 @@ import useIsSwapFeatureEnabled from '@/features/swap/hooks/useIsSwapFeatureEnabl
 
 const SkeletonOverview = (
   <>
-    <Grid container pb={2} mt={3} gap={2} alignItems="flex-end" justifyContent="space-between">
+    <Grid
+      container
+      sx={{
+        pb: 2,
+        mt: 3,
+        gap: 2,
+        alignItems: 'flex-end',
+        justifyContent: 'space-between',
+      }}
+    >
       <Grid item>
         <Skeleton variant="text" width={100} height={30} />
         <Skeleton variant="rounded" width={160} height={40} />
       </Grid>
 
       <Grid item>
-        <Grid container gap={1} flexWrap="wrap">
+        <Grid
+          container
+          sx={{
+            gap: 1,
+            flexWrap: 'wrap',
+          }}
+        >
           <Skeleton variant="rounded" width="115px" height="40px" />
           <Skeleton variant="rounded" width="115px" height="40px" />
         </Grid>
@@ -65,12 +80,34 @@ const Overview = (): ReactElement => {
           SkeletonOverview
         ) : (
           <>
-            <Grid container pb={2} mt={3} gap={2} alignItems="flex-end" justifyContent="space-between">
+            <Grid
+              container
+              sx={{
+                pb: 2,
+                mt: 3,
+                gap: 2,
+                alignItems: 'flex-end',
+                justifyContent: 'space-between',
+              }}
+            >
               <Grid item>
-                <Typography color="primary.light" fontWeight="bold" mb={1}>
+                <Typography
+                  sx={{
+                    color: 'primary.light',
+                    fontWeight: 'bold',
+                    mb: 1,
+                  }}
+                >
                   Total asset value
                 </Typography>
-                <Typography component="div" variant="h1" fontSize={44} lineHeight="40px">
+                <Typography
+                  component="div"
+                  variant="h1"
+                  sx={{
+                    fontSize: 44,
+                    lineHeight: '40px',
+                  }}
+                >
                   {safe.deployed ? (
                     <FiatValue value={balances.fiatTotal} maxLength={20} precise />
                   ) : (
@@ -90,8 +127,10 @@ const Overview = (): ReactElement => {
                   spacing={1}
                   xs={12}
                   sm
-                  justifyContent="flex-end"
-                  flexWrap={{ xs: 'wrap', sm: 'nowrap' }}
+                  sx={{
+                    justifyContent: 'flex-end',
+                    flexWrap: { xs: 'wrap', sm: 'nowrap' },
+                  }}
                 >
                   <Grid item xs={12} sm="auto">
                     <BuyCryptoButton />
diff --git a/src/components/dashboard/PendingTxs/PendingRecoveryListItem.tsx b/src/components/dashboard/PendingTxs/PendingRecoveryListItem.tsx
index d4bb51b60a..b33556ee3e 100644
--- a/src/components/dashboard/PendingTxs/PendingRecoveryListItem.tsx
+++ b/src/components/dashboard/PendingTxs/PendingRecoveryListItem.tsx
@@ -27,8 +27,17 @@ function PendingRecoveryListItem({ transaction }: { transaction: RecoveryQueueIt
 
   return (
     <Link href={url} passHref>
-      <Box className={css.container} minHeight={50}>
-        <Box flex={1}>
+      <Box
+        className={css.container}
+        sx={{
+          minHeight: 50,
+        }}
+      >
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
           <RecoveryType isMalicious={isMalicious} />
         </Box>
 
diff --git a/src/components/dashboard/PendingTxs/PendingTxListItem.tsx b/src/components/dashboard/PendingTxs/PendingTxListItem.tsx
index e48c888421..0089a3b049 100644
--- a/src/components/dashboard/PendingTxs/PendingTxListItem.tsx
+++ b/src/components/dashboard/PendingTxs/PendingTxListItem.tsx
@@ -35,20 +35,41 @@ const PendingTx = ({ transaction }: PendingTxType): ReactElement => {
     <NextLink data-testid="tx-pending-item" href={url} passHref>
       <Box className={css.container}>
         <Box className={css.innerContainer}>
-          <Box minWidth={30}>
+          <Box
+            sx={{
+              minWidth: 30,
+            }}
+          >
             {isMultisigExecutionInfo(transaction.executionInfo) && transaction.executionInfo.nonce}
           </Box>
 
-          <Box minWidth={62}>
+          <Box
+            sx={{
+              minWidth: 62,
+            }}
+          >
             <TxType tx={transaction} />
           </Box>
 
-          <Box minWidth={0} flexGrow={1}>
+          <Box
+            sx={{
+              minWidth: 0,
+              flexGrow: 1,
+            }}
+          >
             <TxInfo info={transaction.txInfo} />
           </Box>
         </Box>
 
-        <Box alignSelf="flex-start" display="flex" flexWrap="nowrap" alignItems="center" gap={1.5}>
+        <Box
+          sx={{
+            alignSelf: 'flex-start',
+            display: 'flex',
+            flexWrap: 'nowrap',
+            alignItems: 'center',
+            gap: 1.5,
+          }}
+        >
           {isMultisigExecutionInfo(transaction.executionInfo) && (
             <TxConfirmations
               submittedConfirmations={transaction.executionInfo.confirmationsSubmitted}
diff --git a/src/components/dashboard/PendingTxs/PendingTxsList.tsx b/src/components/dashboard/PendingTxs/PendingTxsList.tsx
index ce6e96bc1a..23cff330cf 100644
--- a/src/components/dashboard/PendingTxs/PendingTxsList.tsx
+++ b/src/components/dashboard/PendingTxs/PendingTxsList.tsx
@@ -24,10 +24,25 @@ const MAX_TXS = 4
 const EmptyState = () => {
   return (
     <Card>
-      <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center" height="100%" gap={2}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+          gap: 2,
+        }}
+      >
         <NoTransactionsIcon data-testid="no-tx-icon" />
 
-        <Typography data-testid="no-tx-text" variant="body1" color="primary.light">
+        <Typography
+          data-testid="no-tx-text"
+          variant="body1"
+          sx={{
+            color: 'primary.light',
+          }}
+        >
           This Safe Account has no queued transactions
         </Typography>
       </Box>
@@ -105,13 +120,19 @@ const PendingTxsList = (): ReactElement | null => {
   return (
     <WidgetContainer data-testid="pending-tx-widget">
       <div className={css.title}>
-        <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2}>
+        <Typography
+          component="h2"
+          variant="subtitle1"
+          sx={{
+            fontWeight: 700,
+            mb: 2,
+          }}
+        >
           Pending transactions
         </Typography>
 
         {totalTxs > 0 && <ViewAllLink url={queueUrl} />}
       </div>
-
       <WidgetBody>
         {loading ? (
           <LoadingState />
diff --git a/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx b/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx
index 8d297c895a..6cc9c91608 100644
--- a/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx
+++ b/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx
@@ -19,10 +19,16 @@ const SafeAppsDashboardSection = () => {
 
   return (
     <WidgetContainer>
-      <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2}>
+      <Typography
+        component="h2"
+        variant="subtitle1"
+        sx={{
+          fontWeight: 700,
+          mb: 2,
+        }}
+      >
         Safe Apps
       </Typography>
-
       <Grid container spacing={3}>
         {rankedSafeApps.map((rankedSafeApp) => (
           <Grid key={rankedSafeApp.id} item xs={12} sm={6} md={4} xl={4}>
@@ -40,7 +46,6 @@ const SafeAppsDashboardSection = () => {
           <ExploreSafeAppsCard />
         </Grid>
       </Grid>
-
       <SafeAppPreviewDrawer
         isOpen={isPreviewDrawerOpen}
         safeApp={previewDrawerApp}
diff --git a/src/components/dashboard/StakingBanner/index.tsx b/src/components/dashboard/StakingBanner/index.tsx
index 48b8d337be..d7b085ca9f 100644
--- a/src/components/dashboard/StakingBanner/index.tsx
+++ b/src/components/dashboard/StakingBanner/index.tsx
@@ -64,7 +64,13 @@ const StakingBanner = ({
     return (
       <>
         <Card className={`${css.bannerWrapper} ${css.bannerWrapperLarge}`}>
-          <Box sx={{ display: { xs: 'none', sm: 'block' }, position: 'relative' }} mr={{ sm: -8, md: -4, lg: 0 }}>
+          <Box
+            sx={{
+              mr: { sm: -8, md: -4, lg: 0 },
+              display: { xs: 'none', sm: 'block' },
+              position: 'relative',
+            }}
+          >
             <Box className={classNames(css.gradientShadow, { [css.gradientShadowDarkMode]: isDarkMode })} />
             <SvgIcon
               component={isDarkMode ? StakeIllustrationLight : StakeIllustrationDark}
@@ -74,9 +80,21 @@ const StakingBanner = ({
           </Box>
 
           <Grid container rowSpacing={2}>
-            <Grid item xs={12} zIndex={2} mb={1}>
+            <Grid
+              item
+              xs={12}
+              sx={{
+                zIndex: 2,
+                mb: 1,
+              }}
+            >
               <Stack spacing={0.5} direction="row">
-                <Typography variant="overline" color="primary.light">
+                <Typography
+                  variant="overline"
+                  sx={{
+                    color: 'primary.light',
+                  }}
+                >
                   Powered by
                 </Typography>
                 <SvgIcon
@@ -88,17 +106,33 @@ const StakingBanner = ({
               </Stack>
             </Grid>
 
-            <Grid item xs={12} zIndex={2}>
+            <Grid
+              item
+              xs={12}
+              sx={{
+                zIndex: 2,
+              }}
+            >
               <Typography
                 variant="h2"
-                fontWeight={700}
                 className={classNames(css.header, { [css.gradientText]: isDarkMode })}
+                sx={{
+                  fontWeight: 700,
+                }}
               >
                 Stake your ETH and earn rewards
               </Typography>
             </Grid>
 
-            <Grid item xs={12} sm={6} zIndex={2} mb={1}>
+            <Grid
+              item
+              xs={12}
+              sm={6}
+              sx={{
+                zIndex: 2,
+                mb: 1,
+              }}
+            >
               <Typography variant="body1">
                 Lock 32 ETH and become a validator easily with the Kiln widget — faster and more cost-effective. You can
                 also explore Safe Apps or home staking for other options. Staking involves risks like slashing.
@@ -110,7 +144,15 @@ const StakingBanner = ({
               )}
             </Grid>
 
-            <Grid item container xs={12} spacing={2} textAlign="center">
+            <Grid
+              item
+              container
+              xs={12}
+              spacing={2}
+              sx={{
+                textAlign: 'center',
+              }}
+            >
               <Grid item xs={12} md="auto">
                 <NextLink
                   href={AppRoutes.stake && { pathname: AppRoutes.stake, query: { safe: router.query.safe } }}
@@ -143,10 +185,20 @@ const StakingBanner = ({
         <Stack
           direction={{ xs: 'column', md: 'row' }}
           spacing={2}
-          alignItems={{ xs: 'initial', md: 'center' }}
-          justifyContent="space-between"
+          sx={{
+            alignItems: { xs: 'initial', md: 'center' },
+            justifyContent: 'space-between',
+          }}
         >
-          <Stack direction="row" spacing={2} alignItems="center" justifyContent="center" zIndex={1}>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{
+              alignItems: 'center',
+              justifyContent: 'center',
+              zIndex: 1,
+            }}
+          >
             <SvgIcon component={StakeIcon} sx={{ width: '16px', height: '16px' }} inheritViewBox />
 
             <Typography variant="body2">
@@ -171,7 +223,13 @@ const StakingBanner = ({
             </Typography>
           </Stack>
 
-          <Stack direction={{ xs: 'column', md: 'row' }} spacing={2} alignItems={{ xs: 'center', md: 'flex-end' }}>
+          <Stack
+            direction={{ xs: 'column', md: 'row' }}
+            spacing={2}
+            sx={{
+              alignItems: { xs: 'center', md: 'flex-end' },
+            }}
+          >
             <Box>
               <Button variant="text" onClick={onHide} size="small" sx={{ whiteSpace: 'nowrap' }}>
                 Don&apos;t show again
diff --git a/src/components/new-safe/CardStepper/index.tsx b/src/components/new-safe/CardStepper/index.tsx
index c58a781c00..59dca1bc14 100644
--- a/src/components/new-safe/CardStepper/index.tsx
+++ b/src/components/new-safe/CardStepper/index.tsx
@@ -15,7 +15,12 @@ export function CardStepper<StepperData>(props: TxStepperProps<StepperData>) {
 
   return (
     <Card className={css.card}>
-      <Box className={css.progress} color={progressColor}>
+      <Box
+        className={css.progress}
+        sx={{
+          color: progressColor,
+        }}
+      >
         <LinearProgress color="inherit" variant="determinate" value={Math.min(progress, 100)} />
       </Box>
       {currentStep.title && (
diff --git a/src/components/new-safe/OwnerRow/index.tsx b/src/components/new-safe/OwnerRow/index.tsx
index 8f9b75bd1d..c4a9d8773a 100644
--- a/src/components/new-safe/OwnerRow/index.tsx
+++ b/src/components/new-safe/OwnerRow/index.tsx
@@ -72,10 +72,12 @@ export const OwnerRow = ({
     <Grid
       container
       spacing={3}
-      alignItems="center"
-      marginBottom={3}
-      flexWrap={['wrap', undefined, 'nowrap']}
       className={classNames({ [css.helper]: walletIsOwner })}
+      sx={{
+        alignItems: 'center',
+        marginBottom: 3,
+        flexWrap: ['wrap', undefined, 'nowrap'],
+      }}
     >
       <Grid item xs={12} md={readOnly ? 5 : 4}>
         <FormControl fullWidth>
@@ -108,7 +110,17 @@ export const OwnerRow = ({
         )}
       </Grid>
       {!readOnly && (
-        <Grid item ml={-2} xs={1} alignSelf="stretch" display="flex" alignItems="center" flexShrink={0}>
+        <Grid
+          item
+          xs={1}
+          sx={{
+            ml: -2,
+            alignSelf: 'stretch',
+            display: 'flex',
+            alignItems: 'center',
+            flexShrink: 0,
+          }}
+        >
           {removable && (
             <>
               <IconButton data-testid="remove-owner-btn" onClick={() => remove?.(index)} aria-label="Remove signer">
diff --git a/src/components/new-safe/create/AdvancedCreateSafe.tsx b/src/components/new-safe/create/AdvancedCreateSafe.tsx
index 963c8961d3..1cd1a12ff6 100644
--- a/src/components/new-safe/create/AdvancedCreateSafe.tsx
+++ b/src/components/new-safe/create/AdvancedCreateSafe.tsx
@@ -106,13 +106,32 @@ const AdvancedCreateSafe = () => {
 
   return (
     <Container>
-      <Grid container columnSpacing={3} justifyContent="center" mt={[2, null, 7]}>
+      <Grid
+        container
+        columnSpacing={3}
+        sx={{
+          justifyContent: 'center',
+          mt: [2, null, 7],
+        }}
+      >
         <Grid item xs={12}>
-          <Typography variant="h2" pb={2}>
+          <Typography
+            variant="h2"
+            sx={{
+              pb: 2,
+            }}
+          >
             Create new Safe Account
           </Typography>
         </Grid>
-        <Grid item xs={12} md={8} order={[1, null, 0]}>
+        <Grid
+          item
+          xs={12}
+          md={8}
+          sx={{
+            order: [1, null, 0],
+          }}
+        >
           <CardStepper
             initialData={initialData}
             initialStep={initialStep}
@@ -123,7 +142,15 @@ const AdvancedCreateSafe = () => {
           />
         </Grid>
 
-        <Grid item xs={12} md={4} mb={[3, null, 0]} order={[0, null, 1]}>
+        <Grid
+          item
+          xs={12}
+          md={4}
+          sx={{
+            mb: [3, null, 0],
+            order: [0, null, 1],
+          }}
+        >
           <Grid container spacing={3}>
             {activeStep < 2 && <OverviewWidget safeName={safeName} networks={[]} />}
             {wallet?.address && <CreateSafeInfos dynamicHint={dynamicHint} />}
diff --git a/src/components/new-safe/create/CreateSafeInfos/index.tsx b/src/components/new-safe/create/CreateSafeInfos/index.tsx
index 1f5211f6dd..3dc1d690fc 100644
--- a/src/components/new-safe/create/CreateSafeInfos/index.tsx
+++ b/src/components/new-safe/create/CreateSafeInfos/index.tsx
@@ -22,7 +22,13 @@ const CreateSafeInfos = ({
 
   return (
     <Grid item xs={12}>
-      <Grid container direction="column" gap={3}>
+      <Grid
+        container
+        direction="column"
+        sx={{
+          gap: 3,
+        }}
+      >
         {staticHint && (
           <Grid item>
             <InfoWidget title={staticHint.title} variant={staticHint.variant} steps={staticHint.steps} />
diff --git a/src/components/new-safe/create/NetworkWarning/index.tsx b/src/components/new-safe/create/NetworkWarning/index.tsx
index d0a87b5c72..037186abea 100644
--- a/src/components/new-safe/create/NetworkWarning/index.tsx
+++ b/src/components/new-safe/create/NetworkWarning/index.tsx
@@ -11,10 +11,14 @@ const NetworkWarning = ({ action }: { action?: string }) => {
 
   return (
     <Alert severity="warning">
-      <AlertTitle sx={{ fontWeight: 700 }}>Change your wallet network</AlertTitle>
-      You are trying to {action || 'sign or execute a transaction'} on {chain.chainName}. Make sure that your wallet is
-      set to the same network.
-      <Box mt={2}>
+      <AlertTitle sx={{ fontWeight: 700 }}>Change your wallet network</AlertTitle>You are trying to{' '}
+      {action || 'sign or execute a transaction'}on {chain.chainName}. Make sure that your wallet is set to the same
+      network.
+      <Box
+        sx={{
+          mt: 2,
+        }}
+      >
         <ChainSwitcher />
       </Box>
     </Alert>
diff --git a/src/components/new-safe/create/NoWalletConnectedWarning/index.tsx b/src/components/new-safe/create/NoWalletConnectedWarning/index.tsx
index e81293b48c..1475ae8946 100644
--- a/src/components/new-safe/create/NoWalletConnectedWarning/index.tsx
+++ b/src/components/new-safe/create/NoWalletConnectedWarning/index.tsx
@@ -11,9 +11,13 @@ const NoWalletConnectedWarning = () => {
 
   return (
     <Alert severity="warning" sx={{ mt: 3 }}>
-      <AlertTitle sx={{ fontWeight: 700 }}>No wallet connected</AlertTitle>
-      You need to connect a wallet to create a Safe account.
-      <Box mt={2}>
+      <AlertTitle sx={{ fontWeight: 700 }}>No wallet connected</AlertTitle>You need to connect a wallet to create a Safe
+      account.
+      <Box
+        sx={{
+          mt: 2,
+        }}
+      >
         <ConnectWalletButton />
       </Box>
     </Alert>
diff --git a/src/components/new-safe/create/OverviewWidget/index.tsx b/src/components/new-safe/create/OverviewWidget/index.tsx
index a6119321e9..c3f6223c90 100644
--- a/src/components/new-safe/create/OverviewWidget/index.tsx
+++ b/src/components/new-safe/create/OverviewWidget/index.tsx
@@ -41,8 +41,20 @@ const OverviewWidget = ({ safeName, networks }: { safeName: string; networks: Ch
             </div>
           ))
         ) : (
-          <Box p={2}>
-            <Typography variant="body2" color="border.main" textAlign="center" width={1} mb={1}>
+          <Box
+            sx={{
+              p: 2,
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'border.main',
+                textAlign: 'center',
+                width: 1,
+                mb: 1,
+              }}
+            >
               Connect your wallet to continue
             </Typography>
             <ConnectWalletButton />
diff --git a/src/components/new-safe/create/index.tsx b/src/components/new-safe/create/index.tsx
index 53409fb77a..52a29f56ec 100644
--- a/src/components/new-safe/create/index.tsx
+++ b/src/components/new-safe/create/index.tsx
@@ -183,13 +183,32 @@ const CreateSafe = () => {
 
   return (
     <Container>
-      <Grid container columnSpacing={3} justifyContent="center" mt={[2, null, 7]}>
+      <Grid
+        container
+        columnSpacing={3}
+        sx={{
+          justifyContent: 'center',
+          mt: [2, null, 7],
+        }}
+      >
         <Grid item xs={12}>
-          <Typography variant="h2" pb={2}>
+          <Typography
+            variant="h2"
+            sx={{
+              pb: 2,
+            }}
+          >
             Create new Safe Account
           </Typography>
         </Grid>
-        <Grid item xs={12} md={8} order={[1, null, 0]}>
+        <Grid
+          item
+          xs={12}
+          md={8}
+          sx={{
+            order: [1, null, 0],
+          }}
+        >
           <CardStepper
             initialData={initialData}
             initialStep={initialStep}
@@ -200,7 +219,15 @@ const CreateSafe = () => {
           />
         </Grid>
 
-        <Grid item xs={12} md={4} mb={[3, null, 0]} order={[0, null, 1]}>
+        <Grid
+          item
+          xs={12}
+          md={4}
+          sx={{
+            mb: [3, null, 0],
+            order: [0, null, 1],
+          }}
+        >
           <Grid container spacing={3}>
             {activeStep < 2 && <OverviewWidget safeName={safeName} networks={overviewNetworks || []} />}
             {wallet?.address && <CreateSafeInfos staticHint={staticHint} dynamicHint={dynamicHint} />}
diff --git a/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx b/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx
index 46aa38cba9..71314ad37b 100644
--- a/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx
+++ b/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx
@@ -101,7 +101,15 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
       <FormProvider {...formMethods}>
         <Stack spacing={2}>
           <Box className={layoutCss.row}>
-            <Typography variant="h4" fontWeight={700} display="inline-flex" alignItems="center" gap={1}>
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: 700,
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 1,
+              }}
+            >
               Safe version
               <Tooltip
                 title="The threshold of a Safe Account specifies how many signers need to confirm a Safe Account transaction before it can be executed."
@@ -113,7 +121,12 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
                 </span>
               </Tooltip>
             </Typography>
-            <Typography variant="body2" mb={2}>
+            <Typography
+              variant="body2"
+              sx={{
+                mb: 2,
+              }}
+            >
               Changes the used master copy and fallback handler of the Safe.
             </Typography>
             <Controller
@@ -130,7 +143,15 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
 
           <Divider />
           <Box className={layoutCss.row}>
-            <Typography variant="h4" fontWeight={700} display="inline-flex" alignItems="center" gap={1}>
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: 700,
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 1,
+              }}
+            >
               Salt nonce
               <Tooltip
                 title="The salt nonce changes the predicted Safe address. It can be used to re-create a Safe from another chain or to create a specific Safe address"
@@ -142,7 +163,12 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
                 </span>
               </Tooltip>
             </Typography>
-            <Typography variant="body2" mb={2}>
+            <Typography
+              variant="body2"
+              sx={{
+                mb: 2,
+              }}
+            >
               Impacts the derived Safe address
             </Typography>
             <NumberField
@@ -160,14 +186,20 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
               label="Salt nonce"
               error={Boolean(formState.errors[AdvancedOptionsFields.saltNonce]) || Boolean(isDeployed)}
               helperText={
-                formState.errors[AdvancedOptionsFields.saltNonce]?.message ?? Boolean(isDeployed)
+                (formState.errors[AdvancedOptionsFields.saltNonce]?.message ?? Boolean(isDeployed))
                   ? 'The Safe is already deployed. Use a different salt nonce.'
                   : undefined
               }
             />
           </Box>
           <Box className={layoutCss.row}>
-            <Typography variant="h4" fontWeight={700} mb={1}>
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: 700,
+                mb: 1,
+              }}
+            >
               New Safe address
             </Typography>
             {predictedSafeAddress ? (
@@ -178,7 +210,14 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
           </Box>
           <Divider />
           <Box className={layoutCss.row}>
-            <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                gap: 3,
+              }}
+            >
               <Button
                 data-testid="back-btn"
                 variant="outlined"
diff --git a/src/components/new-safe/create/steps/OwnerPolicyStep/index.tsx b/src/components/new-safe/create/steps/OwnerPolicyStep/index.tsx
index 1984ad8d07..ce054a6f73 100644
--- a/src/components/new-safe/create/steps/OwnerPolicyStep/index.tsx
+++ b/src/components/new-safe/create/steps/OwnerPolicyStep/index.tsx
@@ -121,7 +121,15 @@ const OwnerPolicyStep = ({
 
         <Divider />
         <Box className={layoutCss.row}>
-          <Typography variant="h4" fontWeight={700} display="inline-flex" alignItems="center" gap={1}>
+          <Typography
+            variant="h4"
+            sx={{
+              fontWeight: 700,
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 1,
+            }}
+          >
             Threshold
             <Tooltip
               title="The threshold of a Safe Account specifies how many signers need to confirm a Safe Account transaction before it can be executed."
@@ -133,10 +141,23 @@ const OwnerPolicyStep = ({
               </span>
             </Tooltip>
           </Typography>
-          <Typography variant="body2" mb={2}>
+          <Typography
+            variant="body2"
+            sx={{
+              mb: 2,
+            }}
+          >
             Any transaction requires the confirmation of:
           </Typography>
-          <Grid container direction="row" alignItems="center" gap={2} pt={1}>
+          <Grid
+            container
+            direction="row"
+            sx={{
+              alignItems: 'center',
+              gap: 2,
+              pt: 1,
+            }}
+          >
             <Grid item>
               <Controller
                 control={control}
@@ -159,7 +180,14 @@ const OwnerPolicyStep = ({
         </Box>
         <Divider />
         <Box className={layoutCss.row}>
-          <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              gap: 3,
+            }}
+          >
             <Button
               data-testid="back-btn"
               variant="outlined"
diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
index a42540228d..57f1e906a3 100644
--- a/src/components/new-safe/create/steps/ReviewStep/index.tsx
+++ b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -95,7 +95,12 @@ export const SafeSetupOverview = ({
             title={
               <Box>
                 {networks.map((safeItem) => (
-                  <Box p="4px 0px" key={safeItem.chainId}>
+                  <Box
+                    key={safeItem.chainId}
+                    sx={{
+                      p: '4px 0px',
+                    }}
+                  >
                     <ChainIndicator chainId={safeItem.chainId} />
                   </Box>
                 ))}
@@ -103,7 +108,12 @@ export const SafeSetupOverview = ({
             }
             arrow
           >
-            <Box data-testid="network-list" display="inline-block">
+            <Box
+              data-testid="network-list"
+              sx={{
+                display: 'inline-block',
+              }}
+            >
               <NetworkLogosList networks={networks} />
             </Box>
           </Tooltip>
@@ -368,7 +378,6 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
       <Box data-testid="safe-setup-overview" className={layoutCss.row}>
         <SafeSetupOverview name={data.name} owners={data.owners} threshold={data.threshold} networks={data.networks} />
       </Box>
-
       {isCounterfactualEnabled && (
         <>
           <Divider />
@@ -383,7 +392,13 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
 
             {canRelay && payMethod === PayMethod.PayNow && (
               <>
-                <Grid container spacing={3} pt={2}>
+                <Grid
+                  container
+                  spacing={3}
+                  sx={{
+                    pt: 2,
+                  }}
+                >
                   <ReviewRow
                     value={
                       <ExecutionMethodSelector
@@ -405,7 +420,12 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
 
             {payMethod === PayMethod.PayNow && (
               <Grid item>
-                <Typography component="div" mt={2}>
+                <Typography
+                  component="div"
+                  sx={{
+                    mt: 2,
+                  }}
+                >
                   You will have to confirm a transaction and pay an estimated fee of{' '}
                   <NetworkFee totalFee={totalFee} isWaived={willRelay} chain={chain} inline /> with your connected
                   wallet
@@ -415,11 +435,17 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
           </Box>
         </>
       )}
-
       {!isCounterfactualEnabled && (
         <>
           <Divider />
-          <Box className={layoutCss.row} display="flex" flexDirection="column" gap={3}>
+          <Box
+            className={layoutCss.row}
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 3,
+            }}
+          >
             {canRelay && (
               <Grid container spacing={3}>
                 <ReviewRow
@@ -443,7 +469,13 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
                     <NetworkFee totalFee={totalFee} isWaived={willRelay} chain={chain} />
 
                     {!willRelay && (
-                      <Typography variant="body2" color="text.secondary" mt={1}>
+                      <Typography
+                        variant="body2"
+                        sx={{
+                          color: 'text.secondary',
+                          mt: 1,
+                        }}
+                      >
                         You will have to confirm a transaction with your connected wallet.
                       </Typography>
                     )}
@@ -462,12 +494,17 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
           </Box>
         </>
       )}
-
       <Divider />
-
       <Box className={layoutCss.row}>
         {submitError && <ErrorMessage className={css.errorMessage}>{submitError}</ErrorMessage>}
-        <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            gap: 3,
+          }}
+        >
           <Button
             data-testid="back-btn"
             variant="outlined"
diff --git a/src/components/new-safe/create/steps/SetNameStep/index.tsx b/src/components/new-safe/create/steps/SetNameStep/index.tsx
index 88df9c58c7..0611369a43 100644
--- a/src/components/new-safe/create/steps/SetNameStep/index.tsx
+++ b/src/components/new-safe/create/steps/SetNameStep/index.tsx
@@ -130,16 +130,35 @@ function SetNameStep({
             </Grid>
 
             <Grid xs={12} item>
-              <Typography variant="h5" fontWeight={700} display="inline-flex" alignItems="center" gap={1} mt={2}>
+              <Typography
+                variant="h5"
+                sx={{
+                  fontWeight: 700,
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 1,
+                  mt: 2,
+                }}
+              >
                 Select Networks
               </Typography>
-              <Typography variant="body2" mb={2}>
+              <Typography
+                variant="body2"
+                sx={{
+                  mb: 2,
+                }}
+              >
                 Choose which networks you want your account to be active on. You can add more networks later.{' '}
               </Typography>
               <NetworkMultiSelector isAdvancedFlow={isAdvancedFlow} name={SetNameStepFields.networks} />
             </Grid>
           </Grid>
-          <Typography variant="body2" mt={2}>
+          <Typography
+            variant="body2"
+            sx={{
+              mt: 2,
+            }}
+          >
             By continuing, you agree to our{' '}
             <Link href={AppRoutes.terms} passHref legacyBehavior>
               <MUILink>terms of use</MUILink>
@@ -155,7 +174,14 @@ function SetNameStep({
         </Box>
         <Divider />
         <Box className={layoutCss.row}>
-          <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              gap: 3,
+            }}
+          >
             <Button data-testid="cancel-btn" variant="outlined" onClick={onCancel} size="small">
               Cancel
             </Button>
diff --git a/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx b/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx
index 2504c4c0b2..ee8d0eea2c 100644
--- a/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx
+++ b/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx
@@ -63,17 +63,46 @@ const StatusMessage = ({
 
   return (
     <>
-      <Box data-testid="safe-status-info" paddingX={3} mt={3}>
-        <Box width="160px" height="160px" display="flex" margin="auto">
+      <Box
+        data-testid="safe-status-info"
+        sx={{
+          paddingX: 3,
+          mt: 3,
+        }}
+      >
+        <Box
+          sx={{
+            width: '160px',
+            height: '160px',
+            display: 'flex',
+            margin: 'auto',
+          }}
+        >
           {isError ? <FailedIcon /> : <LoadingSpinner status={spinnerStatus} />}
         </Box>
-        <Typography variant="h3" marginTop={2} fontWeight={700}>
+        <Typography
+          variant="h3"
+          sx={{
+            marginTop: 2,
+            fontWeight: 700,
+          }}
+        >
           {stepInfo.description}
         </Typography>
       </Box>
-      <Box maxWidth={390} margin="auto">
+      <Box
+        sx={{
+          maxWidth: 390,
+          margin: 'auto',
+        }}
+      >
         {stepInfo.instruction && (
-          <Typography variant="body2" my={2}>
+          <Typography
+            variant="body2"
+            sx={{
+              my: 2,
+            }}
+          >
             {stepInfo.instruction}
           </Typography>
         )}
diff --git a/src/components/new-safe/create/steps/StatusStep/StatusStep.tsx b/src/components/new-safe/create/steps/StatusStep/StatusStep.tsx
index 56c2df1994..c05b4ca778 100644
--- a/src/components/new-safe/create/steps/StatusStep/StatusStep.tsx
+++ b/src/components/new-safe/create/steps/StatusStep/StatusStep.tsx
@@ -23,13 +23,18 @@ const StatusStep = ({
       icon={<SvgIcon component={Icon} className={css.icon} color={color} fontSize="small" />}
     >
       <Box
-        display="flex"
-        alignItems="center"
-        gap={2}
-        color={color}
-        sx={{ color: ({ palette }) => (isLoading ? palette.border.main : palette.text.primary) }}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 2,
+          color: ({ palette }) => (isLoading ? palette.border.main : palette.text.primary),
+        }}
       >
-        <Box flexShrink={0}>
+        <Box
+          sx={{
+            flexShrink: 0,
+          }}
+        >
           {safeAddress && !isLoading ? (
             <Identicon address={safeAddress} size={32} />
           ) : (
diff --git a/src/components/new-safe/create/steps/StatusStep/index.tsx b/src/components/new-safe/create/steps/StatusStep/index.tsx
index 546ceaa94d..14e8e37ea9 100644
--- a/src/components/new-safe/create/steps/StatusStep/index.tsx
+++ b/src/components/new-safe/create/steps/StatusStep/index.tsx
@@ -101,24 +101,45 @@ export const CreateSafeStatus = ({
         textAlign: 'center',
       }}
     >
-      <Box p={{ xs: 2, sm: 8 }}>
+      <Box
+        sx={{
+          p: { xs: 2, sm: 8 },
+        }}
+      >
         <StatusMessage status={status} isError={isError} pendingSafe={pendingSafe} />
 
         {counter && counter > SPEED_UP_THRESHOLD_IN_SECONDS && !isError && (
           <Alert severity="warning" icon={<SvgIcon component={Rocket} />} sx={{ mt: 5 }}>
             <AlertTitle>
-              <Typography variant="body2" textAlign="left" fontWeight="bold">
+              <Typography
+                variant="body2"
+                sx={{
+                  textAlign: 'left',
+                  fontWeight: 'bold',
+                }}
+              >
                 Transaction is taking too long
               </Typography>
             </AlertTitle>
-            <Typography variant="body2" textAlign="left">
+            <Typography
+              variant="body2"
+              sx={{
+                textAlign: 'left',
+              }}
+            >
               Try to speed it up with better gas parameters in your wallet.
             </Typography>
           </Alert>
         )}
 
         {isError && (
-          <Stack direction="row" justifyContent="center" gap={2}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'center',
+              gap: 2,
+            }}
+          >
             <Link href={AppRoutes.welcome.index} passHref>
               <Button variant="outlined" onClick={onCancel}>
                 Go to homepage
diff --git a/src/components/new-safe/load/index.tsx b/src/components/new-safe/load/index.tsx
index 444d846c75..e0295b7c9b 100644
--- a/src/components/new-safe/load/index.tsx
+++ b/src/components/new-safe/load/index.tsx
@@ -53,13 +53,33 @@ const LoadSafe = ({ initialData }: { initialData?: TxStepperProps<LoadSafeFormDa
 
   return (
     <Container data-testid="load-safe-form">
-      <Grid container columnSpacing={3} mt={[2, null, 7]} justifyContent="center">
+      <Grid
+        container
+        columnSpacing={3}
+        sx={{
+          mt: [2, null, 7],
+          justifyContent: 'center',
+        }}
+      >
         <Grid item xs={12} md={10} lg={8}>
-          <Typography variant="h2" pb={2}>
+          <Typography
+            variant="h2"
+            sx={{
+              pb: 2,
+            }}
+          >
             Add Safe Account to watchlist
           </Typography>
         </Grid>
-        <Grid item xs={12} md={10} lg={8} order={[1, null, 0]}>
+        <Grid
+          item
+          xs={12}
+          md={10}
+          lg={8}
+          sx={{
+            order: [1, null, 0],
+          }}
+        >
           <CardStepper
             // Populate initial data
             key={initialSafe.address}
diff --git a/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx b/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx
index c59bcbb332..a030ba42c2 100644
--- a/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx
+++ b/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx
@@ -74,7 +74,14 @@ const SafeOwnerStep = ({ data, onSubmit, onBack }: StepRenderProps<LoadSafeFormD
         </Box>
         <Divider />
         <Box className={layoutCss.row}>
-          <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              gap: 3,
+            }}
+          >
             <Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>
               Back
             </Button>
diff --git a/src/components/new-safe/load/steps/SafeReviewStep/index.tsx b/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
index 3ebd7ae2d7..e65efc693d 100644
--- a/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
+++ b/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
@@ -126,7 +126,14 @@ const SafeReviewStep = ({ data, onBack }: StepRenderProps<LoadSafeFormData>) =>
       </Box>
       <Divider />
       <Box className={layoutCss.row}>
-        <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            gap: 3,
+          }}
+        >
           <Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>
             Back
           </Button>
diff --git a/src/components/new-safe/load/steps/SetAddressStep/index.tsx b/src/components/new-safe/load/steps/SetAddressStep/index.tsx
index 9b85dfe8f9..47306854d8 100644
--- a/src/components/new-safe/load/steps/SetAddressStep/index.tsx
+++ b/src/components/new-safe/load/steps/SetAddressStep/index.tsx
@@ -101,7 +101,14 @@ const SetAddressStep = ({ data, onSubmit, onBack }: StepRenderProps<LoadSafeForm
     <FormProvider {...formMethods}>
       <form onSubmit={onFormSubmit}>
         <Box className={layoutCss.row}>
-          <Grid container spacing={[3, 1]} mb={3} pr="40px">
+          <Grid
+            container
+            spacing={[3, 1]}
+            sx={{
+              mb: 3,
+              pr: '40px',
+            }}
+          >
             <Grid item xs={12} md>
               <NameInput
                 name={Field.name}
@@ -127,7 +134,12 @@ const SetAddressStep = ({ data, onSubmit, onBack }: StepRenderProps<LoadSafeForm
                 }}
               />
             </Grid>
-            <Grid item order={[-1, 1]}>
+            <Grid
+              item
+              sx={{
+                order: [-1, 1],
+              }}
+            >
               <Box className={css.select}>
                 <NetworkSelector />
               </Box>
@@ -141,7 +153,11 @@ const SetAddressStep = ({ data, onSubmit, onBack }: StepRenderProps<LoadSafeForm
             name={Field.address}
           />
 
-          <Typography mt={4}>
+          <Typography
+            sx={{
+              mt: 4,
+            }}
+          >
             By continuing you consent to the{' '}
             <Link href={AppRoutes.terms} passHref legacyBehavior>
               <MUILink>terms of use</MUILink>
@@ -157,7 +173,14 @@ const SetAddressStep = ({ data, onSubmit, onBack }: StepRenderProps<LoadSafeForm
         <Divider />
 
         <Box className={layoutCss.row}>
-          <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              gap: 3,
+            }}
+          >
             <Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>
               Back
             </Button>
diff --git a/src/components/nfts/NftCollections/index.tsx b/src/components/nfts/NftCollections/index.tsx
index 262691e0f7..02875bcf1a 100644
--- a/src/components/nfts/NftCollections/index.tsx
+++ b/src/components/nfts/NftCollections/index.tsx
@@ -70,7 +70,6 @@ const NftCollections = (): ReactElement => {
         <form onSubmit={onSendSubmit}>
           {/* Batch send form */}
           <NftSendForm selectedNfts={selectedNfts} />
-
           {/* NFTs table */}
           <NftGrid
             nfts={allNfts}
@@ -84,7 +83,6 @@ const NftCollections = (): ReactElement => {
           </NftGrid>
         </form>
       )}
-
       {/* NFT preview */}
       <NftPreviewModal onClose={() => setPreviewNft(undefined)} nft={previewNft} />
     </>
diff --git a/src/components/nfts/NftGrid/index.tsx b/src/components/nfts/NftGrid/index.tsx
index e35662b966..c44fc71bab 100644
--- a/src/components/nfts/NftGrid/index.tsx
+++ b/src/components/nfts/NftGrid/index.tsx
@@ -152,7 +152,14 @@ const NftGrid = ({
                   }}
                 >
                   {headCell.id === 'collection' ? (
-                    <Box display="flex" alignItems="center" alignContent="center" gap={1}>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        alignContent: 'center',
+                        gap: 1,
+                      }}
+                    >
                       <TextField
                         placeholder="Collection"
                         hiddenLabel
@@ -202,13 +209,25 @@ const NftGrid = ({
                 <TableRow data-testid={`nfts-table-row-${index + 1}`} tabIndex={-1} key={`${item.address}-${item.id}`}>
                   {/* Collection name */}
                   <TableCell onClick={onClick} sx={sx}>
-                    <Box display="flex" alignItems="center" gap={2}>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                      }}
+                    >
                       {item.imageUri ? activeNftIcon : inactiveNftIcon}
 
                       <div>
                         <Typography>{item.tokenName || item.tokenSymbol}</Typography>
 
-                        <Typography fontSize="small" color="text.secondary" component="div">
+                        <Typography
+                          component="div"
+                          sx={{
+                            fontSize: 'small',
+                            color: 'text.secondary',
+                          }}
+                        >
                           <EthHashInfo
                             address={item.address}
                             showAvatar={false}
@@ -220,17 +239,22 @@ const NftGrid = ({
                       </div>
                     </Box>
                   </TableCell>
-
                   {/* Token ID */}
                   <TableCell onClick={onClick} sx={sx}>
                     <Typography sx={item.name ? undefined : { wordBreak: 'break-all' }}>
                       {item.name || `${item.tokenSymbol} #${item.id.slice(0, 20)}`}
                     </Typography>
                   </TableCell>
-
                   {/* Links */}
                   <TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }}>
-                    <Box display="flex" alignItems="center" alignContent="center" gap={2.5}>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        alignContent: 'center',
+                        gap: 2.5,
+                      }}
+                    >
                       {linkTemplates?.map(({ title, logo, getUrl }) => (
                         <ExternalLink href={getUrl(item)} key={title} onClick={stopPropagation} noIcon>
                           <img src={logo} width={24} height={24} alt={title} />
@@ -238,7 +262,6 @@ const NftGrid = ({
                       ))}
                     </Box>
                   </TableCell>
-
                   {/* Checkbox */}
                   <TableCell align="right">
                     <Checkbox
@@ -263,7 +286,12 @@ const NftGrid = ({
                       key={headCell.id}
                       sx={headCell.xsHidden ? { display: { xs: 'none', sm: 'table-cell' } } : undefined}
                     >
-                      <Box height="42px" width="42px" />
+                      <Box
+                        sx={{
+                          height: '42px',
+                          width: '42px',
+                        }}
+                      />
                     </TableCell>
                   ))}
                 </TableRow>
diff --git a/src/components/nfts/NftSendForm/index.tsx b/src/components/nfts/NftSendForm/index.tsx
index 9665dcd4e3..92948fd0b5 100644
--- a/src/components/nfts/NftSendForm/index.tsx
+++ b/src/components/nfts/NftSendForm/index.tsx
@@ -15,13 +15,46 @@ const NftSendForm = ({ selectedNfts }: NftSendFormProps): ReactElement => {
 
   return (
     <Sticky>
-      <Grid container spacing={1} justifyContent="flex-end" alignItems="center">
-        <Grid item display={['none', 'block']} flex="1">
-          <Box bgcolor="secondary.background" py={0.75} px={2} flex={1} borderRadius={1} mr={1}>
-            <Box display="flex" alignItems="center" gap={1.5}>
+      <Grid
+        container
+        spacing={1}
+        sx={{
+          justifyContent: 'flex-end',
+          alignItems: 'center',
+        }}
+      >
+        <Grid
+          item
+          sx={{
+            display: ['none', 'block'],
+            flex: '1',
+          }}
+        >
+          <Box
+            sx={{
+              bgcolor: 'secondary.background',
+              py: 0.75,
+              px: 2,
+              flex: 1,
+              borderRadius: 1,
+              mr: 1,
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1.5,
+              }}
+            >
               <SvgIcon component={ArrowIcon} inheritViewBox color="border" sx={{ width: 12, height: 12 }} />
 
-              <Typography variant="body2" lineHeight="inherit">
+              <Typography
+                variant="body2"
+                sx={{
+                  lineHeight: 'inherit',
+                }}
+              >
                 {`${selectedNfts.length} ${nftsText} selected`}
               </Typography>
             </Box>
diff --git a/src/components/notification-center/NotificationCenter/index.tsx b/src/components/notification-center/NotificationCenter/index.tsx
index bd7c47371e..dd28e56d9c 100644
--- a/src/components/notification-center/NotificationCenter/index.tsx
+++ b/src/components/notification-center/NotificationCenter/index.tsx
@@ -108,7 +108,6 @@ const NotificationCenter = (): ReactElement => {
           <SvgIcon component={BellIcon} inheritViewBox fontSize="medium" />
         </UnreadBadge>
       </ButtonBase>
-
       <Popover
         // Clicking the "view transaction" link doesn't remove the popover even though
         // handleClose is called which results in the UI not being clickable anymore
@@ -135,7 +134,13 @@ const NotificationCenter = (): ReactElement => {
         <Paper className={css.popoverContainer}>
           <div className={css.popoverHeader}>
             <div>
-              <Typography variant="h4" component="span" fontWeight={700}>
+              <Typography
+                variant="h4"
+                component="span"
+                sx={{
+                  fontWeight: 700,
+                }}
+              >
                 Notifications
               </Typography>
               {hasUnread && (
diff --git a/src/components/notification-center/NotificationCenterItem/index.tsx b/src/components/notification-center/NotificationCenterItem/index.tsx
index 4af8e6dd02..8fb0e70a78 100644
--- a/src/components/notification-center/NotificationCenterItem/index.tsx
+++ b/src/components/notification-center/NotificationCenterItem/index.tsx
@@ -49,7 +49,15 @@ const NotificationCenterItem = ({
 
   const primaryText = (
     <>
-      {title && <Typography fontWeight="700">{title}</Typography>}
+      {title && (
+        <Typography
+          sx={{
+            fontWeight: '700',
+          }}
+        >
+          {title}
+        </Typography>
+      )}
       <Typography>{message}</Typography>
     </>
   )
diff --git a/src/components/notification-center/NotificationCenterList/index.tsx b/src/components/notification-center/NotificationCenterList/index.tsx
index 8be6e28e82..a1f5875a30 100644
--- a/src/components/notification-center/NotificationCenterList/index.tsx
+++ b/src/components/notification-center/NotificationCenterList/index.tsx
@@ -19,7 +19,13 @@ const NotificationCenterList = ({ notifications, handleClose }: NotificationCent
     return (
       <div className={css.wrapper}>
         <NoNotificationsIcon alt="No notifications" />
-        <Typography paddingTop="8px">No notifications</Typography>
+        <Typography
+          sx={{
+            paddingTop: '8px',
+          }}
+        >
+          No notifications
+        </Typography>
       </div>
     )
   }
diff --git a/src/components/safe-apps/AddCustomAppModal/CustomApp.tsx b/src/components/safe-apps/AddCustomAppModal/CustomApp.tsx
index 6247f0f3b7..fddf7cb567 100644
--- a/src/components/safe-apps/AddCustomAppModal/CustomApp.tsx
+++ b/src/components/safe-apps/AddCustomAppModal/CustomApp.tsx
@@ -22,15 +22,25 @@ const CustomApp = ({ safeApp, shareUrl }: CustomAppProps) => {
   return (
     <div className={css.customAppContainer}>
       <SafeAppIconCard src={safeApp.iconUrl} alt={safeApp.name} width={48} height={48} />
-
-      <Typography component="h2" mt={2} color="text.primary" fontWeight={700}>
+      <Typography
+        component="h2"
+        sx={{
+          mt: 2,
+          color: 'text.primary',
+          fontWeight: 700,
+        }}
+      >
         {safeApp.name}
       </Typography>
-
-      <Typography variant="body2" mt={1} color="text.secondary">
+      <Typography
+        variant="body2"
+        sx={{
+          mt: 1,
+          color: 'text.secondary',
+        }}
+      >
         {safeApp.description}
       </Typography>
-
       {shareUrl ? (
         <CopyButton
           className={css.customAppCheckIcon}
diff --git a/src/components/safe-apps/AddCustomAppModal/index.tsx b/src/components/safe-apps/AddCustomAppModal/index.tsx
index 616aecf388..635f30c805 100644
--- a/src/components/safe-apps/AddCustomAppModal/index.tsx
+++ b/src/components/safe-apps/AddCustomAppModal/index.tsx
@@ -112,14 +112,30 @@ export const AddCustomAppModal = ({ open, onClose, onSave, safeAppsList }: Props
                 },
               })}
             />
-            <Box mt={2}>
+            <Box
+              sx={{
+                mt: 2,
+              }}
+            >
               {safeApp ? (
                 <>
                   <CustomApp safeApp={safeApp} shareUrl={isCustomAppInTheDefaultList ? shareSafeAppUrl : ''} />
                   {isCustomAppInTheDefaultList ? (
-                    <Box display="flex" mt={2} alignItems="center">
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        mt: 2,
+                        alignItems: 'center',
+                      }}
+                    >
                       <CheckIcon color="success" />
-                      <Typography ml={1}>This Safe App is already registered</Typography>
+                      <Typography
+                        sx={{
+                          ml: 1,
+                        }}
+                      >
+                        This Safe App is already registered
+                      </Typography>
                     </Box>
                   ) : (
                     <>
@@ -150,7 +166,13 @@ export const AddCustomAppModal = ({ open, onClose, onSave, safeAppsList }: Props
 
           <div className={css.addCustomAppHelp}>
             <InfoOutlinedIcon className={css.addCustomAppHelpIcon} />
-            <Typography ml={0.5}>Learn more about building</Typography>
+            <Typography
+              sx={{
+                ml: 0.5,
+              }}
+            >
+              Learn more about building
+            </Typography>
             <ExternalLink className={css.addCustomAppHelpLink} href={HELP_LINK} fontWeight={700}>
               Safe Apps
             </ExternalLink>
diff --git a/src/components/safe-apps/AddCustomSafeAppCard/index.tsx b/src/components/safe-apps/AddCustomSafeAppCard/index.tsx
index aaf1cef170..77455963f5 100644
--- a/src/components/safe-apps/AddCustomSafeAppCard/index.tsx
+++ b/src/components/safe-apps/AddCustomSafeAppCard/index.tsx
@@ -15,7 +15,14 @@ const AddCustomSafeAppCard = ({ onSave, safeAppList }: Props) => {
   return (
     <>
       <Card>
-        <Box padding="48px 12px" display="flex" flexDirection="column" alignItems="center">
+        <Box
+          sx={{
+            padding: '48px 12px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
           {/* Add Custom Safe App Icon */}
           <AddCustomAppIcon alt="Add Custom Safe App card" />
 
@@ -32,7 +39,6 @@ const AddCustomSafeAppCard = ({ onSave, safeAppList }: Props) => {
           </Button>
         </Box>
       </Card>
-
       {/*  Add Custom Safe App Modal */}
       <AddCustomAppModal
         open={addCustomAppModalOpen}
diff --git a/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx b/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx
index 25e1b3bc57..579be937a3 100644
--- a/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx
+++ b/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx
@@ -61,7 +61,14 @@ const TransactionQueueBar = ({
             <AccordionSummary
               sx={{ '.MuiAccordionSummary-content': { alignItems: 'center' }, height: TRANSACTION_BAR_HEIGHT }}
             >
-              <Typography variant="body1" color="primary.main" fontWeight={700} sx={{ mr: 'auto' }}>
+              <Typography
+                variant="body1"
+                sx={{
+                  color: 'primary.main',
+                  fontWeight: 700,
+                  mr: 'auto',
+                }}
+              >
                 {barTitle}
               </Typography>
 
@@ -81,7 +88,13 @@ const TransactionQueueBar = ({
             </AccordionSummary>
             <AccordionDetails>
               <BatchExecuteHoverProvider>
-                <Box display="flex" flexDirection="column" alignItems="flex-end">
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-end',
+                  }}
+                >
                   <BatchExecuteButton />
                 </Box>
                 <PaginatedTxns useTxns={useTxQueue} />
diff --git a/src/components/safe-apps/AppFrame/index.tsx b/src/components/safe-apps/AppFrame/index.tsx
index 1d429f5776..381c226f73 100644
--- a/src/components/safe-apps/AppFrame/index.tsx
+++ b/src/components/safe-apps/AppFrame/index.tsx
@@ -131,7 +131,11 @@ const AppFrame = ({ appUrl, allowedFeaturesList, safeAppFromManifest, isNativeEm
         <Head>
           <title>{`Safe Apps - Viewer - ${remoteApp ? remoteApp.name : UNKNOWN_APP_NAME}`}</title>
         </Head>
-        <Box p={2}>
+        <Box
+          sx={{
+            p: 2,
+          }}
+        >
           <BlockedAddress address={sanctionedAddress} featureTitle="Safe{Pass} Safe app" />
         </Box>
       </>
diff --git a/src/components/safe-apps/AppFrame/useAppIsLoading.ts b/src/components/safe-apps/AppFrame/useAppIsLoading.ts
index ab1d74c94b..3fd8c2163c 100644
--- a/src/components/safe-apps/AppFrame/useAppIsLoading.ts
+++ b/src/components/safe-apps/AppFrame/useAppIsLoading.ts
@@ -5,7 +5,7 @@ const APP_SLOW_LOADING_WARNING_TIMEOUT = 15_000
 const APP_LOAD_ERROR = 'There was an error loading the Safe App. There might be a problem with the Safe App provider.'
 
 type UseAppIsLoadingReturnType = {
-  iframeRef: React.RefObject<HTMLIFrameElement>
+  iframeRef: React.RefObject<HTMLIFrameElement | null>
   appIsLoading: boolean
   setAppIsLoading: (appIsLoading: boolean) => void
   isLoadingSlow: boolean
@@ -16,9 +16,9 @@ const useAppIsLoading = (): UseAppIsLoadingReturnType => {
   const [isLoadingSlow, setIsLoadingSlow] = useState<boolean>(false)
   const [, setAppLoadError] = useState<boolean>(false)
 
-  const iframeRef = useRef<HTMLIFrameElement>(null)
-  const timer = useRef<number>()
-  const errorTimer = useRef<number>()
+  const iframeRef = useRef<HTMLIFrameElement | null>(null)
+  const timer = useRef<number>(0)
+  const errorTimer = useRef<number>(0)
 
   useEffect(() => {
     const clearTimeouts = () => {
diff --git a/src/components/safe-apps/AppFrame/useFromAppAnalytics.ts b/src/components/safe-apps/AppFrame/useFromAppAnalytics.ts
index 82f0c44676..12d3795ec8 100644
--- a/src/components/safe-apps/AppFrame/useFromAppAnalytics.ts
+++ b/src/components/safe-apps/AppFrame/useFromAppAnalytics.ts
@@ -16,7 +16,7 @@ const ALLOWED_DOMAINS: RegExp[] = [
   /^https:\/\/safe-dao-governance\.dev\.5afe\.dev$/,
 ]
 
-const useAnalyticsFromSafeApp = (iframeRef: RefObject<HTMLIFrameElement | undefined>): void => {
+const useAnalyticsFromSafeApp = (iframeRef: RefObject<HTMLIFrameElement | null>): void => {
   const isValidMessage = useCallback(
     (msg: MessageEvent<AnalyticsEvent>) => {
       if (!msg.data) return false
diff --git a/src/components/safe-apps/AppFrame/useThirdPartyCookies.ts b/src/components/safe-apps/AppFrame/useThirdPartyCookies.ts
index 2722f34e0b..b94c41dac8 100644
--- a/src/components/safe-apps/AppFrame/useThirdPartyCookies.ts
+++ b/src/components/safe-apps/AppFrame/useThirdPartyCookies.ts
@@ -24,7 +24,7 @@ type ThirdPartyCookiesType = {
 }
 
 const useThirdPartyCookies = (): ThirdPartyCookiesType => {
-  const iframeRef = useRef<HTMLIFrameElement>()
+  const iframeRef = useRef<HTMLIFrameElement>(null)
   const [thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled] = useState<boolean>(false)
 
   const messageHandler = useCallback((event: MessageEvent) => {
diff --git a/src/components/safe-apps/NativeSwapsCard/index.tsx b/src/components/safe-apps/NativeSwapsCard/index.tsx
index b95e687b72..5eecc9758e 100644
--- a/src/components/safe-apps/NativeSwapsCard/index.tsx
+++ b/src/components/safe-apps/NativeSwapsCard/index.tsx
@@ -30,17 +30,28 @@ const NativeSwapsCard = () => {
           </div>
         }
       />
-
       <CardContent className={css.content}>
         <Typography className={css.title} variant="h5">
           Native swaps are here!
         </Typography>
 
-        <Typography className={css.description} variant="body2" color="text.secondary">
+        <Typography
+          className={css.description}
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+          }}
+        >
           Experience seamless trading with better decoding and security in native swaps.
         </Typography>
 
-        <Stack direction="row" gap={2} className={css.buttons}>
+        <Stack
+          direction="row"
+          className={css.buttons}
+          sx={{
+            gap: 2,
+          }}
+        >
           <Track {...SWAP_EVENTS.OPEN_SWAPS} label={SWAP_LABELS.safeAppsPromoWidget}>
             <Link href={{ pathname: AppRoutes.swap, query: { safe: router.query.safe } }} passHref legacyBehavior>
               <Button variant="contained" size="small">
diff --git a/src/components/safe-apps/PermissionsPrompt.tsx b/src/components/safe-apps/PermissionsPrompt.tsx
index 117476d8de..468e2bfe23 100644
--- a/src/components/safe-apps/PermissionsPrompt.tsx
+++ b/src/components/safe-apps/PermissionsPrompt.tsx
@@ -25,7 +25,12 @@ const PermissionsPrompt = ({
   return (
     <Dialog open={isOpen}>
       <ModalDialogTitle onClose={() => onReject()}>
-        <Typography variant="body1" fontWeight={700}>
+        <Typography
+          variant="body1"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
           Permissions Request
         </Typography>
       </ModalDialogTitle>
diff --git a/src/components/safe-apps/RemoveCustomAppModal.tsx b/src/components/safe-apps/RemoveCustomAppModal.tsx
index 74c8356396..35c87d5f43 100644
--- a/src/components/safe-apps/RemoveCustomAppModal.tsx
+++ b/src/components/safe-apps/RemoveCustomAppModal.tsx
@@ -13,7 +13,12 @@ type Props = {
 const RemoveCustomAppModal = ({ open, onClose, onConfirm, app }: Props) => (
   <ModalDialog open={open} onClose={onClose} dialogTitle="Confirm Safe App removal">
     <DialogContent>
-      <Typography variant="h6" pt={3}>
+      <Typography
+        variant="h6"
+        sx={{
+          pt: 3,
+        }}
+      >
         Are you sure you want to remove the <b>{app.name}</b> app?
       </Typography>
     </DialogContent>
diff --git a/src/components/safe-apps/SafeAppActionButtons/index.tsx b/src/components/safe-apps/SafeAppActionButtons/index.tsx
index 40fd557ec5..190105f42b 100644
--- a/src/components/safe-apps/SafeAppActionButtons/index.tsx
+++ b/src/components/safe-apps/SafeAppActionButtons/index.tsx
@@ -37,7 +37,13 @@ const SafeAppActionButtons = ({
   }
 
   return (
-    <Box display="flex" gap={1} alignItems="center">
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 1,
+        alignItems: 'center',
+      }}
+    >
       {/* Open the preview drawer */}
       {openPreviewDrawer && (
         <IconButton
@@ -51,7 +57,6 @@ const SafeAppActionButtons = ({
           <SvgIcon component={InfoIcon} inheritViewBox color="border" fontSize="small" />
         </IconButton>
       )}
-
       {/* Copy share Safe App url button */}
       <CopyButton
         initialToolTipText={`Copy share URL for ${safeApp.name}`}
@@ -62,7 +67,6 @@ const SafeAppActionButtons = ({
           <SvgIcon component={ShareIcon} inheritViewBox color="border" fontSize="small" />
         </IconButton>
       </CopyButton>
-
       {/* Bookmark Safe App button */}
       {onBookmarkSafeApp && (
         <Tooltip title={`${isBookmarked ? 'Unpin' : 'Pin'} ${safeApp.name}`} placement="top">
@@ -83,7 +87,6 @@ const SafeAppActionButtons = ({
           </IconButton>
         </Tooltip>
       )}
-
       {/* Remove Custom Safe App button */}
       {removeCustomApp && (
         <Tooltip title={`Delete ${safeApp.name}`} placement="top">
diff --git a/src/components/safe-apps/SafeAppCard/index.tsx b/src/components/safe-apps/SafeAppCard/index.tsx
index 64b4cc6f61..bc5fd0d51f 100644
--- a/src/components/safe-apps/SafeAppCard/index.tsx
+++ b/src/components/safe-apps/SafeAppCard/index.tsx
@@ -112,7 +112,6 @@ const SafeAppCardGridView = ({
           </>
         }
       />
-
       <CardContent className={css.safeAppContent}>
         {/* Safe App Title */}
         <Typography className={css.safeAppTitle} gutterBottom variant="h5">
@@ -120,7 +119,13 @@ const SafeAppCardGridView = ({
         </Typography>
 
         {/* Safe App Description */}
-        <Typography className={css.safeAppDescription} variant="body2" color="text.secondary">
+        <Typography
+          className={css.safeAppDescription}
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+          }}
+        >
           {safeApp.description}
         </Typography>
 
diff --git a/src/components/safe-apps/SafeAppLandingPage/AppActions.tsx b/src/components/safe-apps/SafeAppLandingPage/AppActions.tsx
index 60879f5581..a4b30e5baa 100644
--- a/src/components/safe-apps/SafeAppLandingPage/AppActions.tsx
+++ b/src/components/safe-apps/SafeAppLandingPage/AppActions.tsx
@@ -111,7 +111,13 @@ const AppActions = ({ wallet, onConnectWallet, chain, appUrl, app }: Props): Rea
         >
           {compatibleSafes.map(({ address, chainId, shortName }) => (
             <MenuItem key={`${chainId}:${address}`} value={address}>
-              <Grid container alignItems="center" gap={1}>
+              <Grid
+                container
+                sx={{
+                  alignItems: 'center',
+                  gap: 1,
+                }}
+              >
                 <SafeIcon address={address} />
 
                 <Grid item xs>
@@ -131,14 +137,21 @@ const AppActions = ({ wallet, onConnectWallet, chain, appUrl, app }: Props): Rea
 
   return (
     <Box
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      justifyContent="space-between"
-      fontWeight={700}
-      height={CTA_HEIGHT}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        fontWeight: 700,
+        height: CTA_HEIGHT,
+      }}
     >
-      <Typography variant="h5" fontWeight={700}>
+      <Typography
+        variant="h5"
+        sx={{
+          fontWeight: 700,
+        }}
+      >
         Use the App with your Safe Account
       </Typography>
       {body}
diff --git a/src/components/safe-apps/SafeAppLandingPage/SafeAppDetails.tsx b/src/components/safe-apps/SafeAppLandingPage/SafeAppDetails.tsx
index aaa6ce86cf..3e4b8320f9 100644
--- a/src/components/safe-apps/SafeAppLandingPage/SafeAppDetails.tsx
+++ b/src/components/safe-apps/SafeAppLandingPage/SafeAppDetails.tsx
@@ -18,10 +18,20 @@ const SafeAppDetails = ({ app, showDefaultListWarning }: DetailsProps) => (
       <SafeAppIconCard src={app.iconUrl} alt={app.name} width={90} height={90} />
 
       <Box sx={{ ml: 8 }}>
-        <Typography variant="h3" fontWeight={700}>
+        <Typography
+          variant="h3"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
           {app.name}
         </Typography>
-        <Typography variant="body2" mt={1}>
+        <Typography
+          variant="body2"
+          sx={{
+            mt: 1,
+          }}
+        >
           {app.description}
         </Typography>
       </Box>
@@ -31,14 +41,18 @@ const SafeAppDetails = ({ app, showDefaultListWarning }: DetailsProps) => (
       <Typography variant="body1">Safe App URL</Typography>
       <Typography
         variant="body2"
-        sx={({ palette, shape }) => ({
-          mt: 1,
-          p: 1,
-          backgroundColor: palette.primary.background,
-          display: 'inline-block',
-          borderRadius: shape.borderRadius,
-        })}
-        fontWeight={700}
+        sx={[
+          {
+            fontWeight: 700,
+          },
+          ({ palette, shape }) => ({
+            mt: 1,
+            p: 1,
+            backgroundColor: palette.primary.background,
+            display: 'inline-block',
+            borderRadius: shape.borderRadius,
+          }),
+        ]}
       >
         {app.url}
       </Typography>
@@ -63,10 +77,23 @@ const SafeAppDetails = ({ app, showDefaultListWarning }: DetailsProps) => (
               Warning
             </Typography>
           </Box>
-          <Typography variant="body1" mt={1} sx={({ palette }) => ({ color: palette.warning.dark })}>
+          <Typography
+            variant="body1"
+            sx={[
+              {
+                mt: 1,
+              },
+              ({ palette }) => ({ color: palette.warning.dark }),
+            ]}
+          >
             The application is not in the default Safe App list
           </Typography>
-          <Typography variant="body2" mt={2}>
+          <Typography
+            variant="body2"
+            sx={{
+              mt: 2,
+            }}
+          >
             Check the app link and ensure it comes from a trusted source
           </Typography>
         </Box>
diff --git a/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx b/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx
index 3266a4237c..755aee5552 100644
--- a/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx
+++ b/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx
@@ -10,8 +10,21 @@ type Props = {
 }
 
 const TryDemo = ({ demoUrl, onClick }: Props) => (
-  <Box display="flex" flexDirection="column" alignItems="center" justifyContent="space-between" height={CTA_HEIGHT}>
-    <Typography variant="h5" fontWeight={700}>
+  <Box
+    sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: CTA_HEIGHT,
+    }}
+  >
+    <Typography
+      variant="h5"
+      sx={{
+        fontWeight: 700,
+      }}
+    >
       Try the Safe App before using it
     </Typography>
     <DemoAppSVG alt="An icon of a internet browser" />
diff --git a/src/components/safe-apps/SafeAppLandingPage/index.tsx b/src/components/safe-apps/SafeAppLandingPage/index.tsx
index 10dcfeda5d..76f21c0e6c 100644
--- a/src/components/safe-apps/SafeAppLandingPage/index.tsx
+++ b/src/components/safe-apps/SafeAppLandingPage/index.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
-import { Box, CircularProgress, Paper } from '@mui/material'
-import Grid from '@mui/material/Unstable_Grid2'
+import { Box, CircularProgress, Paper, Grid2 as Grid } from '@mui/material'
 import { OVERVIEW_EVENTS, SAFE_APPS_EVENTS, trackEvent, trackSafeAppEvent } from '@/services/analytics'
 import { useSafeAppFromBackend } from '@/hooks/safe-apps/useSafeAppFromBackend'
 import { useSafeAppFromManifest } from '@/hooks/safe-apps/useSafeAppFromManifest'
@@ -51,7 +50,12 @@ const SafeAppLanding = ({ appUrl, chain }: Props) => {
 
   if (isLoading || backendAppLoading) {
     return (
-      <Box py={4} textAlign="center">
+      <Box
+        sx={{
+          py: 4,
+          textAlign: 'center',
+        }}
+      >
         <CircularProgress size={40} />
       </Box>
     )
@@ -59,11 +63,11 @@ const SafeAppLanding = ({ appUrl, chain }: Props) => {
 
   return (
     <Grid container>
-      <Grid sm={12} md={12} lg={8} lgOffset={2} xl={6} xlOffset={3}>
+      <Grid size={{ sm: 12, md: 12, lg: 8, xl: 6 }} offset={{ lg: 2, xl: 3 }}>
         <Paper sx={{ p: 6 }}>
           <SafeAppDetails app={backendApp || safeApp} showDefaultListWarning={!backendApp} />
           <Grid container sx={{ mt: 4 }} rowSpacing={{ xs: 2, sm: 2 }}>
-            <Grid xs={12} sm={12} md={showDemo ? 6 : 12}>
+            <Grid size={{ xs: 12, sm: 12, md: showDemo ? 6 : 12 }}>
               <AppActions
                 appUrl={appUrl}
                 wallet={wallet}
@@ -73,7 +77,7 @@ const SafeAppLanding = ({ appUrl, chain }: Props) => {
               />
             </Grid>
             {showDemo && (
-              <Grid xs={12} sm={12} md={6}>
+              <Grid size={{ xs: 12, sm: 12, md: 6 }}>
                 <TryDemo
                   demoUrl={{
                     pathname: AppRoutes.apps.open,
diff --git a/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx b/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
index f1e63e4b17..f295558ed4 100644
--- a/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
+++ b/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
@@ -44,7 +44,12 @@ const SafeAppPreviewDrawer = ({ isOpen, safeApp, isBookmarked, onClose, onBookma
         {/* Toolbar */}
 
         {safeApp && (
-          <Box display="flex" justifyContent="right">
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'right',
+            }}
+          >
             <SafeAppActionButtons safeApp={safeApp} isBookmarked={isBookmarked} onBookmarkSafeApp={onBookmark} />
             <Tooltip title={`Close ${safeApp.name} preview`} placement="top">
               <IconButton
@@ -66,11 +71,23 @@ const SafeAppPreviewDrawer = ({ isOpen, safeApp, isBookmarked, onClose, onBookma
           <SafeAppIconCard src={safeApp?.iconUrl || ''} alt={`${safeApp?.name} logo`} width={90} height={90} />
         </Box>
 
-        <Typography variant="h4" fontWeight={700} sx={{ mt: 2 }}>
+        <Typography
+          variant="h4"
+          sx={{
+            fontWeight: 700,
+            mt: 2,
+          }}
+        >
           {safeApp?.name}
         </Typography>
 
-        <Typography variant="body2" color="primary.light" sx={{ mt: 2 }}>
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'primary.light',
+            mt: 2,
+          }}
+        >
           {safeApp?.description}
         </Typography>
 
@@ -78,7 +95,13 @@ const SafeAppPreviewDrawer = ({ isOpen, safeApp, isBookmarked, onClose, onBookma
         <SafeAppTags tags={safeApp?.tags || []} />
 
         {/* Networks */}
-        <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+            mt: 2,
+          }}
+        >
           Available networks
         </Typography>
 
diff --git a/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx b/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx
index 7cdd885acc..63aaf89e9c 100644
--- a/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx
+++ b/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx
@@ -33,30 +33,64 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
 
   return (
     <Card className={css.container}>
-      <Box display="flex" alignItems="center" gap={1} component="a">
+      <Box
+        component="a"
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+        }}
+      >
         {/* Team Link section */}
         <div className={css.questionMarkIcon}>
           <HelpOutlineRoundedIcon color="info" />
         </div>
         <div>
-          <Typography fontWeight="bold" variant="subtitle1">
+          <Typography
+            variant="subtitle1"
+            sx={{
+              fontWeight: 'bold',
+            }}
+          >
             Something wrong with the Safe App?
           </Typography>
-          <Typography color="primary.light" variant="body2">
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'primary.light',
+            }}
+          >
             Get in touch with the team
           </Typography>
         </div>
       </Box>
-
-      <Box className={css.socialLinksSectionContainer} display="flex" gap={4}>
+      <Box
+        className={css.socialLinksSectionContainer}
+        sx={{
+          display: 'flex',
+          gap: 4,
+        }}
+      >
         {/* Social links section */}
         {hasSocialLinks && (
           <div>
-            <Typography color="border.main" variant="body2" paddingLeft={1}>
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'border.main',
+                paddingLeft: 1,
+              }}
+            >
               Social Media
             </Typography>
 
-            <Box display="flex" mt={0.2} minHeight="40px">
+            <Box
+              sx={{
+                display: 'flex',
+                mt: 0.2,
+                minHeight: '40px',
+              }}
+            >
               {discordSocialLink && (
                 <IconButton aria-label="Discord link" component="a" target="_blank" href={discordSocialLink.url}>
                   <DiscordIcon />
@@ -90,8 +124,18 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
 
         {/* Developer website section */}
         {developerWebsite && (
-          <Box display="flex" flexDirection="column">
-            <Typography color="border.main" variant="body2">
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'border.main',
+              }}
+            >
               Website
             </Typography>
 
diff --git a/src/components/safe-apps/SafeAppTags/index.tsx b/src/components/safe-apps/SafeAppTags/index.tsx
index 50de828259..1f264677e6 100644
--- a/src/components/safe-apps/SafeAppTags/index.tsx
+++ b/src/components/safe-apps/SafeAppTags/index.tsx
@@ -12,7 +12,14 @@ const SafeAppTags = ({ tags = [] }: SafeAppTagsProps) => {
   const displayedTags = filterInternalCategories(tags)
 
   return (
-    <Stack className={css.safeAppTagContainer} flexDirection="row" gap={1} flexWrap="wrap">
+    <Stack
+      className={css.safeAppTagContainer}
+      sx={{
+        flexDirection: 'row',
+        gap: 1,
+        flexWrap: 'wrap',
+      }}
+    >
       {displayedTags.map((tag) => (
         <Chip className={css.safeAppTagLabel} key={tag} label={tag} />
       ))}
diff --git a/src/components/safe-apps/SafeAppsFilters/index.tsx b/src/components/safe-apps/SafeAppsFilters/index.tsx
index eec8c8b492..57fdf4e379 100644
--- a/src/components/safe-apps/SafeAppsFilters/index.tsx
+++ b/src/components/safe-apps/SafeAppsFilters/index.tsx
@@ -73,7 +73,6 @@ const SafeAppsFilters = ({
           }}
         />
       </Grid>
-
       {/* Select Category */}
       <Grid item xs={12} sm={6} md={3} lg={3}>
         <FormControl fullWidth>
@@ -143,7 +142,6 @@ const SafeAppsFilters = ({
           )}
         </FormControl>
       </Grid>
-
       {/* Optimized with Batch Transaction */}
       <Grid item xs={12} sm={6} md={3} lg={3}>
         <Tooltip
@@ -161,7 +159,13 @@ const SafeAppsFilters = ({
                 onChangeOptimizedWithBatch(value)
               }}
               label={
-                <Box display="flex" alignItems="center" gap={1}>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                  }}
+                >
                   <span>Batch transactions</span> <BatchIcon />
                 </Box>
               }
diff --git a/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx b/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx
index 5896697320..15f8eaa5a9 100644
--- a/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx
+++ b/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx
@@ -19,22 +19,33 @@ const AllowedFeaturesList: React.FC<SafeAppsInfoAllowedFeaturesProps> = ({
   return (
     <>
       <SvgIcon component={ShieldIcon} inheritViewBox color="primary" />
-
       <Typography
         variant="body2"
-        color="text.secondary"
         sx={{
+          color: 'text.secondary',
           textAlign: 'center',
           margin: '0 75px',
         }}
       >
         Manage the features Safe Apps can use
       </Typography>
-
-      <Box mx={1} my={3} textAlign="left">
+      <Box
+        sx={{
+          mx: 1,
+          my: 3,
+          textAlign: 'left',
+        }}
+      >
         <Typography>This Safe App is requesting permission to use:</Typography>
 
-        <Box display="flex" flexDirection="column" ml={2} mt={1}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            ml: 2,
+            mt: 1,
+          }}
+        >
           {features
             .filter(({ feature }) => isBrowserFeature(feature))
             .map(({ feature, checked }, index) => (
diff --git a/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx b/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx
index d94d9b818f..baa7284092 100644
--- a/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx
+++ b/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx
@@ -68,7 +68,13 @@ const Slider: React.FC<SliderProps> = ({ onSlideChange, children, initialStep })
           ))}
         </div>
       </div>
-      <Box display="flex" justifyContent="center" width="100%">
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          width: '100%',
+        }}
+      >
         <Button color="primary" variant="outlined" size="small" fullWidth onClick={prevSlide}>
           {isFirstStep ? 'Cancel' : 'Back'}
         </Button>
diff --git a/src/components/safe-apps/SafeAppsInfoModal/index.tsx b/src/components/safe-apps/SafeAppsInfoModal/index.tsx
index 33b448aedd..16c76e02fa 100644
--- a/src/components/safe-apps/SafeAppsInfoModal/index.tsx
+++ b/src/components/safe-apps/SafeAppsInfoModal/index.tsx
@@ -1,4 +1,4 @@
-import { memo, useMemo, useState } from 'react'
+import { memo, type ReactElement, useMemo, useState } from 'react'
 import { alpha, Box } from '@mui/system'
 import { Grid, LinearProgress } from '@mui/material'
 
@@ -31,7 +31,7 @@ const SafeAppsInfoModal = ({
   isPermissionsReviewCompleted,
   isSafeAppInDefaultList,
   isFirstTimeAccessingApp,
-}: SafeAppsInfoModalProps): JSX.Element => {
+}: SafeAppsInfoModalProps): ReactElement => {
   const [hideWarning, setHideWarning] = useState(false)
   const [selectedFeatures, setSelectedFeatures] = useState<AllowedFeatureSelection[]>(
     features.map((feature) => {
@@ -110,7 +110,15 @@ const SafeAppsInfoModal = ({
   const origin = useMemo(() => getOrigin(appUrl), [appUrl])
 
   return (
-    <Box display="flex" alignItems="center" justifyContent="center" flexDirection="column" height="calc(100vh - 52px)">
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        height: 'calc(100vh - 52px)',
+      }}
+    >
       <Box
         data-testid="app-info-modal"
         sx={({ palette }) => ({
@@ -133,7 +141,16 @@ const SafeAppsInfoModal = ({
             },
           })}
         />
-        <Grid container justifyContent="center" alignItems="center" direction="column" textAlign="center" p={3}>
+        <Grid
+          container
+          direction="column"
+          sx={{
+            justifyContent: 'center',
+            alignItems: 'center',
+            textAlign: 'center',
+            p: 3,
+          }}
+        >
           <Slider onSlideChange={handleSlideChange}>
             {!isConsentAccepted && <LegalDisclaimerContent />}
 
diff --git a/src/components/safe-apps/SafeAppsListHeader/index.tsx b/src/components/safe-apps/SafeAppsListHeader/index.tsx
index 3257c51fa9..04e295a447 100644
--- a/src/components/safe-apps/SafeAppsListHeader/index.tsx
+++ b/src/components/safe-apps/SafeAppsListHeader/index.tsx
@@ -7,7 +7,14 @@ type SafeAppsListHeaderProps = {
 
 const SafeAppsListHeader = ({ title, amount }: SafeAppsListHeaderProps) => {
   return (
-    <Typography variant="body2" color="primary.light" fontWeight="bold" mt={3}>
+    <Typography
+      variant="body2"
+      sx={{
+        color: 'primary.light',
+        fontWeight: 'bold',
+        mt: 3,
+      }}
+    >
       {title} ({amount || 0})
     </Typography>
   )
diff --git a/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx b/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
index bd3b411c78..43d453ba8b 100644
--- a/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
+++ b/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
@@ -7,7 +7,14 @@ const SafeAppsZeroResultsPlaceholder = ({ searchQuery }: { searchQuery: string }
     <PagePlaceholder
       img={<AddCustomAppIcon />}
       text={
-        <Typography variant="body1" color="primary.light" m={2} maxWidth="600px">
+        <Typography
+          variant="body1"
+          sx={{
+            color: 'primary.light',
+            m: 2,
+            maxWidth: '600px',
+          }}
+        >
           No Safe Apps found matching <strong>{searchQuery}</strong>. Connect to dApps that haven&apos;t yet been
           integrated with the {'Safe{Wallet}'} using WalletConnect.
         </Typography>
diff --git a/src/components/safe-messages/DecodedMsg/index.tsx b/src/components/safe-messages/DecodedMsg/index.tsx
index 88c79f8ebb..4c5afe437f 100644
--- a/src/components/safe-messages/DecodedMsg/index.tsx
+++ b/src/components/safe-messages/DecodedMsg/index.tsx
@@ -19,14 +19,17 @@ const DecodedTypedObject = ({ displayedType, eip712Msg }: { displayedType: strin
   return (
     <Box>
       <Typography
-        textTransform="uppercase"
-        fontWeight={700}
         variant="caption"
-        sx={({ palette }) => ({ color: `${palette.border.main}` })}
+        sx={[
+          {
+            textTransform: 'uppercase',
+            fontWeight: 700,
+          },
+          ({ palette }) => ({ color: `${palette.border.main}` }),
+        ]}
       >
         {displayedType}
       </Typography>
-
       {Object.entries(displayedType === EIP712_DOMAIN_TYPE ? domain : msg).map((param, index) => {
         const [paramName, paramValue] = param
         const type = findType(paramName) || 'string'
diff --git a/src/components/safe-messages/InfoBox/index.tsx b/src/components/safe-messages/InfoBox/index.tsx
index 34bdff369f..4360710192 100644
--- a/src/components/safe-messages/InfoBox/index.tsx
+++ b/src/components/safe-messages/InfoBox/index.tsx
@@ -20,7 +20,12 @@ const InfoBox = ({
       <div className={css.message}>
         <SvgIcon component={icon} color="info" inheritViewBox fontSize="medium" />
         <div>
-          <Typography variant="subtitle1" fontWeight="bold">
+          <Typography
+            variant="subtitle1"
+            sx={{
+              fontWeight: 'bold',
+            }}
+          >
             {title}
           </Typography>
           <Typography variant="body2">{message}</Typography>
diff --git a/src/components/safe-messages/MsgDetails/index.tsx b/src/components/safe-messages/MsgDetails/index.tsx
index fa2b1c7a78..784862daea 100644
--- a/src/components/safe-messages/MsgDetails/index.tsx
+++ b/src/components/safe-messages/MsgDetails/index.tsx
@@ -118,7 +118,15 @@ const MsgDetails = ({ msg }: { msg: SafeMessage }): ReactElement => {
       <div className={txDetailsCss.txSigners}>
         <MsgSigners msg={msg} />
         {wallet && !isConfirmed && (
-          <Box display="flex" alignItems="center" justifyContent="center" gap={1} mt={2}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 1,
+              mt: 2,
+            }}
+          >
             <SignMsgButton msg={msg} />
           </Box>
         )}
diff --git a/src/components/safe-messages/MsgSigners/index.tsx b/src/components/safe-messages/MsgSigners/index.tsx
index a24c084ce4..96f64fd05d 100644
--- a/src/components/safe-messages/MsgSigners/index.tsx
+++ b/src/components/safe-messages/MsgSigners/index.tsx
@@ -106,7 +106,13 @@ export const MsgSigners = ({
             <Dot />
           </ListItemIcon>
           <ListItemText>
-            <Link component="button" onClick={toggleHide} fontSize="medium">
+            <Link
+              component="button"
+              onClick={toggleHide}
+              sx={{
+                fontSize: 'medium',
+              }}
+            >
               {hideConfirmations ? 'Show all' : 'Hide all'}
             </Link>
           </ListItemText>
@@ -119,9 +125,21 @@ export const MsgSigners = ({
               <SvgIcon component={CircleOutlinedIcon} className={css.dot} color="border" fontSize="small" />
             </ListItemIcon>
             <ListItemText>
-              <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 1,
+                }}
+              >
                 <Skeleton variant="circular" width={36} height={36} />
-                <Typography variant="body2" color="text.secondary">
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.secondary',
+                  }}
+                >
                   Confirmation #{idx + 1 + confirmationsSubmitted}
                 </Typography>
               </Box>
diff --git a/src/components/safe-messages/MsgSummary/index.tsx b/src/components/safe-messages/MsgSummary/index.tsx
index 7c8814263c..a8e1057cf1 100644
--- a/src/components/safe-messages/MsgSummary/index.tsx
+++ b/src/components/safe-messages/MsgSummary/index.tsx
@@ -63,7 +63,7 @@ const MsgSummary = ({ msg }: { msg: SafeMessage }): ReactElement => {
             display="flex"
             alignItems="center"
             gap={1}
-            color={({ palette }) => getStatusColor(msg.status, palette)}
+            sx={{ color: ({ palette }) => getStatusColor(msg.status, palette) }}
           >
             {isPending && <CircularProgress size={14} color="inherit" />}
 
diff --git a/src/components/safe-messages/PaginatedMsgs/index.tsx b/src/components/safe-messages/PaginatedMsgs/index.tsx
index b572223094..d140c9b876 100644
--- a/src/components/safe-messages/PaginatedMsgs/index.tsx
+++ b/src/components/safe-messages/PaginatedMsgs/index.tsx
@@ -19,13 +19,27 @@ const NoMessages = (): ReactElement => {
     <PagePlaceholder
       img={<NoMessagesIcon />}
       text={
-        <Typography variant="body1" color="primary.light" m={2} maxWidth="600px">
+        <Typography
+          variant="body1"
+          sx={{
+            color: 'primary.light',
+            m: 2,
+            maxWidth: '600px',
+          }}
+        >
           Some applications allow you to interact with them via off-chain contract signatures (&ldquo;messages&ldquo;)
           that you can generate with your Safe Account.
         </Typography>
       }
     >
-      <Link rel="noopener noreferrer" target="_blank" href={HelpCenterArticle.SIGNED_MESSAGES} fontWeight={700}>
+      <Link
+        rel="noopener noreferrer"
+        target="_blank"
+        href={HelpCenterArticle.SIGNED_MESSAGES}
+        sx={{
+          fontWeight: 700,
+        }}
+      >
         Learn more about off-chain messages{' '}
         <SvgIcon component={LinkIcon} inheritViewBox fontSize="small" sx={{ verticalAlign: 'middle', ml: 0.5 }} />
       </Link>
@@ -45,15 +59,16 @@ const MsgPage = ({
   return (
     <>
       {page && page.results.length > 0 && <MsgList items={page.results} />}
-
       {page?.results.length === 0 && <NoMessages />}
-
       {error && <ErrorMessage>Error loading messages</ErrorMessage>}
-
       {loading && <SkeletonTxList />}
-
       {page?.next && onNextPage && (
-        <Box my={4} textAlign="center">
+        <Box
+          sx={{
+            my: 4,
+            textAlign: 'center',
+          }}
+        >
           <InfiniteScroll onLoadMore={() => onNextPage(page.next!)} />
         </Box>
       )}
@@ -76,7 +91,12 @@ const PaginatedMsgs = (): ReactElement => {
   }, [safe.chainId, safeAddress])
 
   return (
-    <Box mb={4} position="relative">
+    <Box
+      sx={{
+        mb: 4,
+        position: 'relative',
+      }}
+    >
       {pages.map((pageUrl, index) => (
         <MsgPage key={pageUrl} pageUrl={pageUrl} onNextPage={index === pages.length - 1 ? onNextPage : undefined} />
       ))}
diff --git a/src/components/settings/ContractVersion/index.tsx b/src/components/settings/ContractVersion/index.tsx
index 151548f3dc..935192a9bd 100644
--- a/src/components/settings/ContractVersion/index.tsx
+++ b/src/components/settings/ContractVersion/index.tsx
@@ -33,11 +33,23 @@ export const ContractVersion = () => {
 
   return (
     <>
-      <Typography variant="h4" fontWeight={700} marginBottom={1}>
+      <Typography
+        variant="h4"
+        sx={{
+          fontWeight: 700,
+          marginBottom: 1,
+        }}
+      >
         Contract version
       </Typography>
-
-      <Typography variant="body1" fontWeight={400} display="flex" alignItems="center">
+      <Typography
+        variant="body1"
+        sx={{
+          fontWeight: 400,
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
         {safeLoaded ? (
           <>
             {safe.version ?? 'Unsupported contract'}
@@ -51,7 +63,6 @@ export const ContractVersion = () => {
           <Skeleton width="60px" />
         )}
       </Typography>
-
       {safeLoaded && safe.version && showUpdateDialog && (
         <Alert
           sx={{ mt: 2, borderRadius: '2px', borderColor: '#B0FFC9' }}
@@ -59,7 +70,11 @@ export const ContractVersion = () => {
         >
           <AlertTitle sx={{ fontWeight: 700 }}>New version is available: {latestSafeVersion}</AlertTitle>
 
-          <Typography mb={3}>
+          <Typography
+            sx={{
+              mb: 3,
+            }}
+          >
             Update now to take advantage of new features and the highest security standards available. You will need to
             confirm this update just like any other transaction.{' '}
             <ExternalLink href={safeMasterCopy?.deployerRepoUrl}>GitHub</ExternalLink>
diff --git a/src/components/settings/DataManagement/ImportDialog.tsx b/src/components/settings/DataManagement/ImportDialog.tsx
index b6668e5c71..5b4f0ed385 100644
--- a/src/components/settings/DataManagement/ImportDialog.tsx
+++ b/src/components/settings/DataManagement/ImportDialog.tsx
@@ -88,7 +88,11 @@ export const ImportDialog = ({
     <ModalDialog open onClose={handleClose} dialogTitle="Data import" hideChainIndicator>
       <DialogContent>
         {!jsonData || !fileName ? (
-          <Box mt={2}>
+          <Box
+            sx={{
+              mt: 2,
+            }}
+          >
             <ImportFileUpload setFileName={setFileName} setJsonData={setJsonData} />
           </Box>
         ) : (
diff --git a/src/components/settings/DataManagement/index.tsx b/src/components/settings/DataManagement/index.tsx
index f753c119b2..a5c8b2bd1e 100644
--- a/src/components/settings/DataManagement/index.tsx
+++ b/src/components/settings/DataManagement/index.tsx
@@ -74,7 +74,12 @@ const DataManagement = () => {
       <Paper sx={{ p: 4, mb: 2 }}>
         <Grid container spacing={3}>
           <Grid item sm={4} xs={12}>
-            <Typography variant="h4" fontWeight={700}>
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: 700,
+              }}
+            >
               Data export
             </Typography>
           </Grid>
@@ -105,11 +110,15 @@ const DataManagement = () => {
           </Grid>
         </Grid>
       </Paper>
-
       <Paper sx={{ p: 4 }}>
         <Grid container spacing={3}>
           <Grid item sm={4} xs={12}>
-            <Typography variant="h4" fontWeight={700}>
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: 700,
+              }}
+            >
               Data import
             </Typography>
           </Grid>
diff --git a/src/components/settings/EnvironmentVariables/index.tsx b/src/components/settings/EnvironmentVariables/index.tsx
index d2b45729ae..479da4ce10 100644
--- a/src/components/settings/EnvironmentVariables/index.tsx
+++ b/src/components/settings/EnvironmentVariables/index.tsx
@@ -70,21 +70,44 @@ const EnvironmentVariables = () => {
 
   return (
     <Paper sx={{ padding: 4 }}>
-      <Grid container direction="row" justifyContent="space-between" spacing={3} mb={2}>
+      <Grid
+        container
+        direction="row"
+        spacing={3}
+        sx={{
+          justifyContent: 'space-between',
+          mb: 2,
+        }}
+      >
         <Grid item lg={4} xs={12}>
-          <Typography variant="h4" fontWeight={700}>
+          <Typography
+            variant="h4"
+            sx={{
+              fontWeight: 700,
+            }}
+          >
             Environment variables
           </Typography>
         </Grid>
 
         <Grid item xs>
-          <Typography mb={3}>
+          <Typography
+            sx={{
+              mb: 3,
+            }}
+          >
             You can override some of our default APIs here in case you need to. Proceed at your own risk.
           </Typography>
 
           <FormProvider {...formMethods}>
             <form onSubmit={onSubmit}>
-              <Typography fontWeight={700} mb={2} mt={3}>
+              <Typography
+                sx={{
+                  fontWeight: 700,
+                  mb: 2,
+                  mt: 3,
+                }}
+              >
                 RPC provider
                 <Tooltip
                   placement="top"
@@ -122,7 +145,13 @@ const EnvironmentVariables = () => {
                 fullWidth
               />
 
-              <Typography fontWeight={700} mb={2} mt={3}>
+              <Typography
+                sx={{
+                  fontWeight: 700,
+                  mb: 2,
+                  mt: 3,
+                }}
+              >
                 Tenderly
                 <Tooltip
                   placement="top"
diff --git a/src/components/settings/FallbackHandler/__tests__/index.test.tsx b/src/components/settings/FallbackHandler/__tests__/index.test.tsx
index 4e5d144a6d..36991a1535 100644
--- a/src/components/settings/FallbackHandler/__tests__/index.test.tsx
+++ b/src/components/settings/FallbackHandler/__tests__/index.test.tsx
@@ -34,7 +34,7 @@ describe('FallbackHandler', () => {
               name: 'FallbackHandlerName',
             },
           },
-        } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+        }) as unknown as ReturnType<typeof useSafeInfoHook.default>,
     )
 
     const fbHandler = render(<FallbackHandler />, {
@@ -71,7 +71,7 @@ describe('FallbackHandler', () => {
               name: 'FallbackHandlerName',
             },
           },
-        } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+        }) as unknown as ReturnType<typeof useSafeInfoHook.default>,
     )
 
     const fbHandler = render(<FallbackHandler />, {
@@ -104,7 +104,7 @@ describe('FallbackHandler', () => {
               value: GOERLI_FALLBACK_HANDLER,
             },
           },
-        } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+        }) as unknown as ReturnType<typeof useSafeInfoHook.default>,
     )
 
     const fbHandler = render(<FallbackHandler />, {
@@ -125,7 +125,7 @@ describe('FallbackHandler', () => {
               version: '1.3.0',
               chainId: '5',
             },
-          } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+          }) as unknown as ReturnType<typeof useSafeInfoHook.default>,
       )
 
       const fbHandler = render(<FallbackHandler />)
@@ -150,7 +150,7 @@ describe('FallbackHandler', () => {
               version: '1.3.0',
               chainId: '5',
             },
-          } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+          }) as unknown as ReturnType<typeof useSafeInfoHook.default>,
       )
 
       const fbHandler = render(<FallbackHandler />)
@@ -178,7 +178,7 @@ describe('FallbackHandler', () => {
                 value: '0x123',
               },
             },
-          } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+          }) as unknown as ReturnType<typeof useSafeInfoHook.default>,
       )
 
       const fbHandler = render(<FallbackHandler />)
@@ -212,7 +212,7 @@ describe('FallbackHandler', () => {
                 value: '0x123',
               },
             },
-          } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+          }) as unknown as ReturnType<typeof useSafeInfoHook.default>,
       )
 
       const fbHandler = render(<FallbackHandler />)
@@ -232,7 +232,7 @@ describe('FallbackHandler', () => {
             version: '1.0.0',
             chainId: '5',
           },
-        } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+        }) as unknown as ReturnType<typeof useSafeInfoHook.default>,
     )
 
     const fbHandler = render(<FallbackHandler />)
@@ -251,7 +251,7 @@ describe('FallbackHandler', () => {
               value: TWAP_FALLBACK_HANDLER,
             },
           },
-        } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+        }) as unknown as ReturnType<typeof useSafeInfoHook.default>,
     )
 
     const { getByText } = render(<FallbackHandler />)
@@ -274,7 +274,7 @@ describe('FallbackHandler', () => {
               value: TWAP_FALLBACK_HANDLER,
             },
           },
-        } as unknown as ReturnType<typeof useSafeInfoHook.default>),
+        }) as unknown as ReturnType<typeof useSafeInfoHook.default>,
     )
 
     const { queryByText } = render(<FallbackHandler />)
diff --git a/src/components/settings/FallbackHandler/index.tsx b/src/components/settings/FallbackHandler/index.tsx
index 3bdd6f8ff2..1fa5e4f582 100644
--- a/src/components/settings/FallbackHandler/index.tsx
+++ b/src/components/settings/FallbackHandler/index.tsx
@@ -75,9 +75,21 @@ export const FallbackHandler = (): ReactElement | null => {
 
   return (
     <Paper sx={{ padding: 4 }}>
-      <Grid container direction="row" justifyContent="space-between" spacing={3}>
+      <Grid
+        container
+        direction="row"
+        spacing={3}
+        sx={{
+          justifyContent: 'space-between',
+        }}
+      >
         <Grid item lg={4} xs={12}>
-          <Typography variant="h4" fontWeight={700}>
+          <Typography
+            variant="h4"
+            sx={{
+              fontWeight: 700,
+            }}
+          >
             Fallback handler
           </Typography>
         </Grid>
@@ -96,7 +108,12 @@ export const FallbackHandler = (): ReactElement | null => {
               sx={{ mt: 2 }}
             >
               {warning && (
-                <Typography mb={hasFallbackHandler ? 1 : 0} variant="body2">
+                <Typography
+                  variant="body2"
+                  sx={{
+                    mb: hasFallbackHandler ? 1 : 0,
+                  }}
+                >
                   {warning}
                 </Typography>
               )}
diff --git a/src/components/settings/PushNotifications/GlobalPushNotifications.tsx b/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
index c0374ddb51..e50ee1e350 100644
--- a/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
+++ b/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
@@ -374,7 +374,7 @@ export const GlobalPushNotifications = (): ReactElement | null => {
 
   if (totalNotifiableSafes === 0) {
     return (
-      <Typography color={({ palette }) => palette.primary.light}>
+      <Typography sx={{ color: ({ palette }) => palette.primary.light }}>
         {address ? 'No owned Safes' : 'No wallet connected'}
       </Typography>
     )
diff --git a/src/components/settings/PushNotifications/hooks/__tests__/useNotificationRegistrations.test.ts b/src/components/settings/PushNotifications/hooks/__tests__/useNotificationRegistrations.test.ts
index c0a6cb1068..5be1b4c375 100644
--- a/src/components/settings/PushNotifications/hooks/__tests__/useNotificationRegistrations.test.ts
+++ b/src/components/settings/PushNotifications/hooks/__tests__/useNotificationRegistrations.test.ts
@@ -35,7 +35,7 @@ describe('useNotificationRegistrations', () => {
         () =>
           ({
             label: 'MetaMask',
-          } as ConnectedWallet),
+          }) as ConnectedWallet,
       )
     })
 
@@ -75,7 +75,7 @@ describe('useNotificationRegistrations', () => {
         () =>
           ({
             uuid: undefined,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const { result } = renderHook(() => useNotificationRegistrations())
@@ -105,7 +105,7 @@ describe('useNotificationRegistrations', () => {
           ({
             uuid: self.crypto.randomUUID(),
             createPreferences: createPreferencesMock,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const { result } = renderHook(() => useNotificationRegistrations())
@@ -137,7 +137,7 @@ describe('useNotificationRegistrations', () => {
           ({
             uuid: self.crypto.randomUUID(),
             createPreferences: createPreferencesMock,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const { result } = renderHook(() => useNotificationRegistrations())
@@ -168,7 +168,7 @@ describe('useNotificationRegistrations', () => {
           ({
             uuid: self.crypto.randomUUID(),
             createPreferences: createPreferencesMock,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const showNotificationSpy = jest.spyOn(notificationsSlice, 'showNotification')
@@ -197,7 +197,7 @@ describe('useNotificationRegistrations', () => {
         () =>
           ({
             uuid: undefined,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const { result } = renderHook(() => useNotificationRegistrations())
@@ -219,7 +219,7 @@ describe('useNotificationRegistrations', () => {
           ({
             uuid,
             deletePreferences: deletePreferencesMock,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const { result } = renderHook(() => useNotificationRegistrations())
@@ -245,7 +245,7 @@ describe('useNotificationRegistrations', () => {
           ({
             uuid,
             deletePreferences: deletePreferencesMock,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const { result } = renderHook(() => useNotificationRegistrations())
@@ -271,7 +271,7 @@ describe('useNotificationRegistrations', () => {
           ({
             uuid,
             deletePreferences: deletePreferencesMock,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const { result } = renderHook(() => useNotificationRegistrations())
@@ -295,7 +295,7 @@ describe('useNotificationRegistrations', () => {
         () =>
           ({
             uuid: undefined,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const { result } = renderHook(() => useNotificationRegistrations())
@@ -317,7 +317,7 @@ describe('useNotificationRegistrations', () => {
           ({
             uuid,
             deleteAllChainPreferences: deleteAllChainPreferencesMock,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const { result } = renderHook(() => useNotificationRegistrations())
@@ -340,7 +340,7 @@ describe('useNotificationRegistrations', () => {
           ({
             uuid,
             deleteAllChainPreferences: deleteAllChainPreferencesMock,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const { result } = renderHook(() => useNotificationRegistrations())
@@ -363,7 +363,7 @@ describe('useNotificationRegistrations', () => {
           ({
             uuid,
             deleteAllChainPreferences: deleteAllChainPreferencesMock,
-          } as unknown as ReturnType<typeof preferences.useNotificationPreferences>),
+          }) as unknown as ReturnType<typeof preferences.useNotificationPreferences>,
       )
 
       const { result } = renderHook(() => useNotificationRegistrations())
diff --git a/src/components/settings/PushNotifications/index.tsx b/src/components/settings/PushNotifications/index.tsx
index a03d43453f..4e8b50283e 100644
--- a/src/components/settings/PushNotifications/index.tsx
+++ b/src/components/settings/PushNotifications/index.tsx
@@ -90,13 +90,24 @@ export const PushNotifications = (): ReactElement => {
       <Paper sx={{ p: 4, mb: 2 }}>
         <Grid container spacing={3}>
           <Grid item sm={4} xs={12}>
-            <Typography variant="h4" fontWeight={700}>
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: 700,
+              }}
+            >
               Push notifications
             </Typography>
           </Grid>
 
           <Grid item xs>
-            <Grid container gap={2.5} flexDirection="column">
+            <Grid
+              container
+              sx={{
+                gap: 2.5,
+                flexDirection: 'column',
+              }}
+            >
               <Typography>
                 Enable push notifications for {safeLoaded ? 'this Safe Account' : 'your Safe Accounts'} in your browser
                 with your signature. You will need to enable them again if you clear your browser cache. Learn more
@@ -105,7 +116,13 @@ export const PushNotifications = (): ReactElement => {
 
               {shouldShowMacHelper && (
                 <Alert severity="info" className={css.macOsInfo}>
-                  <Typography fontWeight={700} variant="body2" mb={1}>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      fontWeight: 700,
+                      mb: 1,
+                    }}
+                  >
                     For macOS users
                   </Typography>
                   <Typography variant="body2">
@@ -161,7 +178,12 @@ export const PushNotifications = (): ReactElement => {
         <Paper sx={{ p: 4 }}>
           <Grid container spacing={3}>
             <Grid item sm={4} xs={12}>
-              <Typography variant="h4" fontWeight={700}>
+              <Typography
+                variant="h4"
+                sx={{
+                  fontWeight: 700,
+                }}
+              >
                 Notification
               </Typography>
             </Grid>
@@ -244,7 +266,12 @@ export const PushNotifications = (): ReactElement => {
                     <>
                       <Typography>Confirmation requests</Typography>
                       {!preferences[WebhookType.CONFIRMATION_REQUEST] && (
-                        <Typography color="text.secondary" variant="body2">
+                        <Typography
+                          variant="body2"
+                          sx={{
+                            color: 'text.secondary',
+                          }}
+                        >
                           {isOwner ? 'Requires your signature' : 'Only signers'}
                         </Typography>
                       )}
diff --git a/src/components/settings/RequiredConfirmations/index.tsx b/src/components/settings/RequiredConfirmations/index.tsx
index 9b6df6aa5a..3701aafa2f 100644
--- a/src/components/settings/RequiredConfirmations/index.tsx
+++ b/src/components/settings/RequiredConfirmations/index.tsx
@@ -10,18 +10,39 @@ export const RequiredConfirmation = ({ threshold, owners }: { threshold: number;
   const { setTxFlow } = useContext(TxModalContext)
 
   return (
-    <Box marginTop={6}>
+    <Box
+      sx={{
+        marginTop: 6,
+      }}
+    >
       <Grid container spacing={3}>
         <Grid item lg={4} xs={12}>
-          <Typography variant="h4" fontWeight={700}>
+          <Typography
+            variant="h4"
+            sx={{
+              fontWeight: 700,
+            }}
+          >
             Required confirmations
           </Typography>
         </Grid>
 
         <Grid item xs>
-          <Typography pb={2}>Any transaction requires the confirmation of:</Typography>
+          <Typography
+            sx={{
+              pb: 2,
+            }}
+          >
+            Any transaction requires the confirmation of:
+          </Typography>
 
-          <Typography pt={3} pr={2} component="span">
+          <Typography
+            component="span"
+            sx={{
+              pt: 3,
+              pr: 2,
+            }}
+          >
             <b>{threshold}</b> out of <b>{owners}</b> signers.
           </Typography>
 
diff --git a/src/components/settings/SafeAppsPermissions/index.tsx b/src/components/settings/SafeAppsPermissions/index.tsx
index f4c8d8fff7..efd312270d 100644
--- a/src/components/settings/SafeAppsPermissions/index.tsx
+++ b/src/components/settings/SafeAppsPermissions/index.tsx
@@ -101,7 +101,7 @@ const SafeAppsPermissions = (): ReactElement => {
       </Typography>
       <br />
       {!domains.length && (
-        <Typography variant="body1" color={({ palette }) => palette.primary.light}>
+        <Typography variant="body1" sx={{ color: ({ palette }) => palette.primary.light }}>
           There are no Safe Apps using permissions.
         </Typography>
       )}
diff --git a/src/components/settings/SafeAppsSigningMethod/index.tsx b/src/components/settings/SafeAppsSigningMethod/index.tsx
index 4d900a6f6e..21e21f880b 100644
--- a/src/components/settings/SafeAppsSigningMethod/index.tsx
+++ b/src/components/settings/SafeAppsSigningMethod/index.tsx
@@ -19,13 +19,23 @@ export const SafeAppsSigningMethod = () => {
     <Paper sx={{ padding: 4, mt: 2 }}>
       <Grid container spacing={3}>
         <Grid item lg={4} xs={12}>
-          <Typography variant="h4" fontWeight="bold" mb={1}>
+          <Typography
+            variant="h4"
+            sx={{
+              fontWeight: 'bold',
+              mb: 1,
+            }}
+          >
             Signing method
           </Typography>
         </Grid>
 
         <Grid item xs>
-          <Typography mb={2}>
+          <Typography
+            sx={{
+              mb: 2,
+            }}
+          >
             This setting determines how the {'Safe{Wallet}'} will sign message requests from Safe Apps. Gasless,
             off-chain signing is used by default. Learn more about message signing{' '}
             <ExternalLink href={HelpCenterArticle.SIGNED_MESSAGES}>here</ExternalLink>.
diff --git a/src/components/settings/SafeModules/index.tsx b/src/components/settings/SafeModules/index.tsx
index b53a933867..443894826f 100644
--- a/src/components/settings/SafeModules/index.tsx
+++ b/src/components/settings/SafeModules/index.tsx
@@ -16,7 +16,7 @@ import css from '../TransactionGuards/styles.module.css'
 
 const NoModules = () => {
   return (
-    <Typography mt={2} color={({ palette }) => palette.primary.light}>
+    <Typography mt={2} sx={{ color: ({ palette }) => palette.primary.light }}>
       No modules enabled
     </Typography>
   )
diff --git a/src/components/settings/SecurityLogin/index.tsx b/src/components/settings/SecurityLogin/index.tsx
index d2ba01e986..1ba2421e76 100644
--- a/src/components/settings/SecurityLogin/index.tsx
+++ b/src/components/settings/SecurityLogin/index.tsx
@@ -11,9 +11,14 @@ const SecurityLogin = () => {
   const router = useRouter()
 
   return (
-    <Box display="flex" flexDirection="column" gap={2}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
       {isRecoverySupported && router.query.safe ? <RecoverySettings /> : null}
-
       <SecuritySettings />
     </Box>
   )
diff --git a/src/components/settings/SecuritySettings/index.tsx b/src/components/settings/SecuritySettings/index.tsx
index 44759ba3f4..244dc212a2 100644
--- a/src/components/settings/SecuritySettings/index.tsx
+++ b/src/components/settings/SecuritySettings/index.tsx
@@ -10,13 +10,23 @@ const SecuritySettings = () => {
     <Paper sx={{ padding: 4 }}>
       <Grid container spacing={3}>
         <Grid item lg={4} xs={12}>
-          <Typography variant="h4" fontWeight="bold" mb={1}>
+          <Typography
+            variant="h4"
+            sx={{
+              fontWeight: 'bold',
+              mb: 1,
+            }}
+          >
             Security
           </Typography>
         </Grid>
 
         <Grid item xs>
-          <Typography mb={2}>
+          <Typography
+            sx={{
+              mb: 2,
+            }}
+          >
             Enabling this setting allows the signing of unreadable signature requests. Signing these messages can lead
             to unpredictable consequences, including the potential loss of funds or control over your account.
           </Typography>
diff --git a/src/components/settings/SpendingLimits/NoSpendingLimits.tsx b/src/components/settings/SpendingLimits/NoSpendingLimits.tsx
index 41f37fb545..e67ac8ea79 100644
--- a/src/components/settings/SpendingLimits/NoSpendingLimits.tsx
+++ b/src/components/settings/SpendingLimits/NoSpendingLimits.tsx
@@ -6,7 +6,15 @@ import TimeIcon from '@/public/images/settings/spending-limit/time.svg'
 
 export const NoSpendingLimits = () => {
   return (
-    <Grid mt={2} container direction="row" justifyContent="space-between" spacing={2}>
+    <Grid
+      container
+      direction="row"
+      spacing={2}
+      sx={{
+        mt: 2,
+        justifyContent: 'space-between',
+      }}
+    >
       <Grid item sm={2}>
         <BeneficiaryIcon data-testid="beneficiary-icon" />
       </Grid>
@@ -19,7 +27,6 @@ export const NoSpendingLimits = () => {
           Safe Account
         </Typography>
       </Grid>
-
       <Grid item sm={2}>
         <AssetAmountIcon data-testid="asset-icon" />
       </Grid>
@@ -29,7 +36,6 @@ export const NoSpendingLimits = () => {
         </Typography>
         <Typography>You can set allowances for any asset stored in your Safe Account</Typography>
       </Grid>
-
       <Grid item sm={2}>
         <TimeIcon data-testid="time-icon" />
       </Grid>
diff --git a/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx b/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx
index d9f18a3b47..8d2d0307b6 100644
--- a/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx
+++ b/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx
@@ -20,7 +20,14 @@ const SKELETON_ROWS = new Array(3).fill('').map(() => {
       beneficiary: {
         rawValue: '0x',
         content: (
-          <Box display="flex" flexDirection="row" gap={1} alignItems="center">
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              gap: 1,
+              alignItems: 'center',
+            }}
+          >
             <Skeleton variant="circular" width={26} height={26} />
             <div>
               <Typography>
@@ -36,7 +43,14 @@ const SKELETON_ROWS = new Array(3).fill('').map(() => {
       spent: {
         rawValue: '0',
         content: (
-          <Box display="flex" flexDirection="row" gap={1} alignItems="center">
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              gap: 1,
+              alignItems: 'center',
+            }}
+          >
             <Skeleton variant="circular" width={26} height={26} />
             <Typography>
               <Skeleton width={100} />
@@ -97,7 +111,14 @@ export const SpendingLimitsTable = ({
                 spent: {
                   rawValue: spendingLimit.spent,
                   content: (
-                    <Box data-testid="spent-amount" display="flex" alignItems="center" gap={1}>
+                    <Box
+                      data-testid="spent-amount"
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 1,
+                      }}
+                    >
                       <TokenIcon logoUri={spendingLimit.token.logoUri} tokenSymbol={spendingLimit.token.symbol} />
                       {`${formattedSpent} of ${formattedAmount} ${spendingLimit.token.symbol}`}
                     </Box>
diff --git a/src/components/settings/SpendingLimits/index.tsx b/src/components/settings/SpendingLimits/index.tsx
index 77c779a2d7..9f26cd8b61 100644
--- a/src/components/settings/SpendingLimits/index.tsx
+++ b/src/components/settings/SpendingLimits/index.tsx
@@ -20,9 +20,22 @@ const SpendingLimits = () => {
 
   return (
     <Paper data-testid="spending-limit-section" sx={{ padding: 4 }}>
-      <Grid container direction="row" justifyContent="space-between" spacing={3} mb={2}>
+      <Grid
+        container
+        direction="row"
+        spacing={3}
+        sx={{
+          justifyContent: 'space-between',
+          mb: 2,
+        }}
+      >
         <Grid item lg={4} xs={12}>
-          <Typography variant="h4" fontWeight={700}>
+          <Typography
+            variant="h4"
+            sx={{
+              fontWeight: 700,
+            }}
+          >
             Spending limits
           </Typography>
         </Grid>
diff --git a/src/components/settings/TransactionGuards/index.tsx b/src/components/settings/TransactionGuards/index.tsx
index 470c7f4fc7..4fe1c357fb 100644
--- a/src/components/settings/TransactionGuards/index.tsx
+++ b/src/components/settings/TransactionGuards/index.tsx
@@ -15,7 +15,7 @@ import { RemoveGuardFlow } from '@/components/tx-flow/flows'
 
 const NoTransactionGuard = () => {
   return (
-    <Typography mt={2} color={({ palette }) => palette.primary.light}>
+    <Typography mt={2} sx={{ color: ({ palette }) => palette.primary.light }}>
       No transaction guard set
     </Typography>
   )
diff --git a/src/components/settings/owner/EditOwnerDialog/index.tsx b/src/components/settings/owner/EditOwnerDialog/index.tsx
index b12aab771d..9a31183dff 100644
--- a/src/components/settings/owner/EditOwnerDialog/index.tsx
+++ b/src/components/settings/owner/EditOwnerDialog/index.tsx
@@ -58,16 +58,23 @@ export const EditOwnerDialog = ({ chainId, address, name }: { chainId: string; a
           </span>
         </Tooltip>
       </Track>
-
       <ModalDialog open={open} onClose={handleClose} dialogTitle="Edit signer name">
         <FormProvider {...formMethods}>
           <form onSubmit={handleSubmit(onSubmit)}>
             <DialogContent>
-              <Box py={2}>
+              <Box
+                sx={{
+                  py: 2,
+                }}
+              >
                 <NameInput label="Signer name" name="name" required />
               </Box>
 
-              <Box py={2}>
+              <Box
+                sx={{
+                  py: 2,
+                }}
+              >
                 <EthHashInfo address={address} showCopyButton shortAddress={false} />
               </Box>
             </DialogContent>
diff --git a/src/components/settings/owner/OwnerList/index.tsx b/src/components/settings/owner/OwnerList/index.tsx
index d7c4871506..513cae19dc 100644
--- a/src/components/settings/owner/OwnerList/index.tsx
+++ b/src/components/settings/owner/OwnerList/index.tsx
@@ -90,16 +90,32 @@ export const OwnerList = () => {
   }, [safe.owners, safe.chainId, addressBook, setTxFlow])
 
   return (
-    <Box display="flex" flexDirection="column" gap={2}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
       <Grid container spacing={3}>
         <Grid item lg={4} xs={12}>
-          <Typography variant="h4" fontWeight={700}>
+          <Typography
+            variant="h4"
+            sx={{
+              fontWeight: 700,
+            }}
+          >
             Members
           </Typography>
         </Grid>
 
         <Grid item xs>
-          <Typography fontWeight="bold" mb={2}>
+          <Typography
+            fontWeight="bold"
+            sx={{
+              mb: 2,
+            }}
+          >
             Signers
           </Typography>
           <Typography mb={2}>
@@ -107,7 +123,13 @@ export const OwnerList = () => {
             reject them.
           </Typography>
 
-          <Box my={2} display="flex" justifyContent="space-between">
+          <Box
+            sx={{
+              pt: 2,
+              display: 'flex',
+              justifyContent: 'space-between',
+            }}
+          >
             <CheckWallet>
               {(isOk) => (
                 <Track {...SETTINGS_EVENTS.SETUP.ADD_OWNER}>
diff --git a/src/components/sidebar/DebugToggle/index.tsx b/src/components/sidebar/DebugToggle/index.tsx
index eb12300296..9bb058b8c1 100644
--- a/src/components/sidebar/DebugToggle/index.tsx
+++ b/src/components/sidebar/DebugToggle/index.tsx
@@ -25,7 +25,12 @@ const DebugToggle = (): ReactElement => {
   }
 
   return (
-    <Box py={2} ml={2}>
+    <Box
+      sx={{
+        py: 2,
+        ml: 2,
+      }}
+    >
       <FormControlLabel
         control={<Switch checked={isDarkMode} onChange={(_, checked) => dispatch(setDarkMode(checked))} />}
         label="Dark mode"
diff --git a/src/components/sidebar/QrCodeButton/QrModal.tsx b/src/components/sidebar/QrCodeButton/QrModal.tsx
index 04ec8df5ba..b7357fe073 100644
--- a/src/components/sidebar/QrCodeButton/QrModal.tsx
+++ b/src/components/sidebar/QrCodeButton/QrModal.tsx
@@ -21,17 +21,47 @@ const QrModal = ({ onClose }: { onClose: () => void }): ReactElement => {
   return (
     <ModalDialog open dialogTitle="Receive assets" onClose={onClose} hideChainIndicator>
       <DialogContent>
-        <Box bgcolor={chain?.theme.backgroundColor} color={chain?.theme.textColor} px={3} py={2} mx={-3}>
+        <Box
+          sx={{
+            bgcolor: chain?.theme.backgroundColor,
+            color: chain?.theme.textColor,
+            px: 3,
+            py: 2,
+            mx: -3,
+          }}
+        >
           {chainName} network &mdash; only send {chainName} assets to this Safe Account.
         </Box>
 
-        <Typography my={2}>
+        <Typography
+          sx={{
+            my: 2,
+          }}
+        >
           This is the address of your Safe Account. Deposit funds by scanning the QR code or copying the address below.
           Only send {nativeToken} and tokens (e.g. ERC20, ERC721) to this address.
         </Typography>
 
-        <Box display="flex" flexDirection="column" flexWrap="wrap" justifyContent="center" alignItems="center" my={2}>
-          <Box mt={1} mb={1} p={1} border="1px solid" borderColor="border.main" borderRadius={1}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignItems: 'center',
+            my: 2,
+          }}
+        >
+          <Box
+            sx={{
+              mt: 1,
+              mb: 1,
+              p: 1,
+              border: '1px solid',
+              borderColor: 'border.main',
+              borderRadius: 1,
+            }}
+          >
             <QRCode value={qrCode} size={164} />
           </Box>
 
@@ -46,7 +76,11 @@ const QrModal = ({ onClose }: { onClose: () => void }): ReactElement => {
             }
           />
 
-          <Box mt={2}>
+          <Box
+            sx={{
+              mt: 2,
+            }}
+          >
             <EthHashInfo
               address={safeAddress}
               shortAddress={false}
diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
index 134acf0e33..b845cec463 100644
--- a/src/components/sidebar/Sidebar/index.tsx
+++ b/src/components/sidebar/Sidebar/index.tsx
@@ -43,7 +43,11 @@ const Sidebar = (): ReactElement => {
         {/* Nav menu */}
         <SidebarNavigation />
 
-        <Box flex={1} />
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        />
 
         <Divider flexItem />
 
@@ -54,7 +58,6 @@ const Sidebar = (): ReactElement => {
 
         <IndexingStatus />
       </div>
-
       <Drawer variant="temporary" anchor="left" open={isDrawerOpen} onClose={onDrawerToggle}>
         <div className={css.drawer}>
           <MyAccounts onLinkClick={closeDrawer}></MyAccounts>
diff --git a/src/components/sidebar/SidebarHeader/index.tsx b/src/components/sidebar/SidebarHeader/index.tsx
index 869733670e..11407a4c98 100644
--- a/src/components/sidebar/SidebarHeader/index.tsx
+++ b/src/components/sidebar/SidebarHeader/index.tsx
@@ -67,7 +67,13 @@ const SafeHeader = (): ReactElement => {
               </Typography>
             )}
 
-            <Typography data-testid="currency-section" variant="body2" fontWeight={700}>
+            <Typography
+              data-testid="currency-section"
+              variant="body2"
+              sx={{
+                fontWeight: 700,
+              }}
+            >
               {safe.deployed ? (
                 balances.fiatTotal ? (
                   <FiatValue value={balances.fiatTotal} />
@@ -113,7 +119,6 @@ const SafeHeader = (): ReactElement => {
           <EnvHintButton />
         </div>
       </div>
-
       <NewTxButton />
     </div>
   )
diff --git a/src/components/sidebar/SidebarNavigation/index.tsx b/src/components/sidebar/SidebarNavigation/index.tsx
index 0c77c43cf6..a14541f566 100644
--- a/src/components/sidebar/SidebarNavigation/index.tsx
+++ b/src/components/sidebar/SidebarNavigation/index.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useMemo, type ReactElement } from 'react'
 import { useRouter } from 'next/router'
-import ListItem from '@mui/material/ListItem'
+import { ListItemButton } from '@mui/material'
 import { ImplementationVersionState } from '@safe-global/safe-gateway-typescript-sdk'
 
 import {
@@ -99,27 +99,30 @@ const Navigation = (): ReactElement => {
             key={item.href}
             arrow
           >
-            <ListItem
-              disablePadding
-              disabled={isDisabled}
-              selected={isSelected}
-              onClick={isDisabled ? undefined : () => handleNavigationClick(item.href)}
-              key={item.href}
-            >
-              <SidebarListItemButton
-                selected={isSelected}
-                href={item.href && { pathname: getRoute(item.href), query: { safe: router.query.safe } }}
+            <div>
+              <ListItemButton
+                // disablePadding
+                sx={{ padding: 0 }}
                 disabled={isDisabled}
+                selected={isSelected}
+                onClick={isDisabled ? undefined : () => handleNavigationClick(item.href)}
+                key={item.href}
               >
-                {item.icon && <SidebarListItemIcon badge={getBadge(item)}>{item.icon}</SidebarListItemIcon>}
-
-                <SidebarListItemText data-testid="sidebar-list-item" bold>
-                  {item.label}
-
-                  {ItemTag}
-                </SidebarListItemText>
-              </SidebarListItemButton>
-            </ListItem>
+                <SidebarListItemButton
+                  selected={isSelected}
+                  href={item.href && { pathname: getRoute(item.href), query: { safe: router.query.safe } }}
+                  disabled={isDisabled}
+                >
+                  {item.icon && <SidebarListItemIcon badge={getBadge(item)}>{item.icon}</SidebarListItemIcon>}
+
+                  <SidebarListItemText data-testid="sidebar-list-item" bold>
+                    {item.label}
+
+                    {ItemTag}
+                  </SidebarListItemText>
+                </SidebarListItemButton>
+              </ListItemButton>
+            </div>
           </Tooltip>
         )
       })}
diff --git a/src/components/transactions/BulkTxListGroup/index.tsx b/src/components/transactions/BulkTxListGroup/index.tsx
index 935c2254c2..f20be867e2 100644
--- a/src/components/transactions/BulkTxListGroup/index.tsx
+++ b/src/components/transactions/BulkTxListGroup/index.tsx
@@ -39,22 +39,39 @@ const GroupedTxListItems = ({
   }
   return (
     <Paper data-testid="grouped-items" className={css.container}>
-      <Box gridArea="icon">
+      <Box
+        sx={{
+          gridArea: 'icon',
+        }}
+      >
         <SvgIcon className={css.icon} component={BatchIcon} inheritViewBox fontSize="medium" />
       </Box>
-      <Box gridArea="info">
+      <Box
+        sx={{
+          gridArea: 'info',
+        }}
+      >
         <Typography noWrap>{title}</Typography>
       </Box>
       <Box className={css.action}>{groupedListItems.length} transactions</Box>
       <Box className={css.hash}>
         <ExplorerButton href={explorerLink} isCompact={false} />
       </Box>
-
-      <Box gridArea="items" className={css.txItems}>
+      <Box
+        className={css.txItems}
+        sx={{
+          gridArea: 'items',
+        }}
+      >
         {groupedListItems.map((tx) => {
           const nonce = isMultisigExecutionInfo(tx.transaction.executionInfo) ? tx.transaction.executionInfo.nonce : ''
           return (
-            <Box position="relative" key={tx.transaction.id}>
+            <Box
+              key={tx.transaction.id}
+              sx={{
+                position: 'relative',
+              }}
+            >
               <Box className={css.nonce}>
                 <Typography className={css.nonce}>{nonce}</Typography>
               </Box>
diff --git a/src/components/transactions/GroupedTxListItems/index.tsx b/src/components/transactions/GroupedTxListItems/index.tsx
index 424bcdcc89..a58334385a 100644
--- a/src/components/transactions/GroupedTxListItems/index.tsx
+++ b/src/components/transactions/GroupedTxListItems/index.tsx
@@ -31,15 +31,33 @@ const TxGroup = ({ groupedListItems }: { groupedListItems: Transaction[] }): Rea
 
   return (
     <Paper className={css.container}>
-      <Typography gridArea="nonce">{nonce}</Typography>
-
-      <Box gridArea="warning" className={css.disclaimerContainer}>
+      <Typography
+        sx={{
+          gridArea: 'nonce',
+        }}
+      >
+        {nonce}
+      </Typography>
+      <Box
+        className={css.disclaimerContainer}
+        sx={{
+          gridArea: 'warning',
+        }}
+      >
         <Disclaimer />
       </Box>
-
-      <Box gridArea="line" className={css.line} />
-
-      <Box gridArea="items" className={css.txItems}>
+      <Box
+        className={css.line}
+        sx={{
+          gridArea: 'line',
+        }}
+      />
+      <Box
+        className={css.txItems}
+        sx={{
+          gridArea: 'items',
+        }}
+      >
         {groupedListItems.map((tx) => (
           <div
             key={tx.transaction.id}
diff --git a/src/components/transactions/HexEncodedData/__snapshots__/HexEncodedData.test.tsx.snap b/src/components/transactions/HexEncodedData/__snapshots__/HexEncodedData.test.tsx.snap
index 807c285882..0cb3f80cdf 100644
--- a/src/components/transactions/HexEncodedData/__snapshots__/HexEncodedData.test.tsx.snap
+++ b/src/components/transactions/HexEncodedData/__snapshots__/HexEncodedData.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`HexEncodedData should not cut the text in case the limit option is higher than the provided hexData 1`] = `
 <div>
   <div
-    class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+    class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
   >
     <div
       class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -11,7 +11,7 @@ exports[`HexEncodedData should not cut the text in case the limit option is high
       style="word-break: break-word;"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
       >
         Data (hex-encoded)
       </p>
@@ -32,19 +32,16 @@ exports[`HexEncodedData should not cut the text in case the limit option is high
         >
           <button
             aria-label="Copy to clipboard"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
             <mock-icon
-              aria-hidden="true"
-              classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+              aria-hidden=""
+              class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
               data-testid="copy-btn-icon"
               focusable="false"
             />
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
         </span>
         <b
@@ -65,7 +62,7 @@ exports[`HexEncodedData should not cut the text in case the limit option is high
 exports[`HexEncodedData should not highlight the data if highlight option is false 1`] = `
 <div>
   <div
-    class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+    class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
   >
     <div
       class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -73,7 +70,7 @@ exports[`HexEncodedData should not highlight the data if highlight option is fal
       style="word-break: break-word;"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
       >
         Some arbitrary data
       </p>
@@ -94,25 +91,22 @@ exports[`HexEncodedData should not highlight the data if highlight option is fal
         >
           <button
             aria-label="Copy to clipboard"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
             <mock-icon
-              aria-hidden="true"
-              classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+              aria-hidden=""
+              class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
               data-testid="copy-btn-icon"
               focusable="false"
             />
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
         </span>
         0x10238476...
          
         <button
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiLink-button css-fl9gtn-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiLink-button css-5r1yio-MuiTypography-root-MuiLink-root"
           data-testid="show-more"
           type="button"
         >
@@ -128,7 +122,7 @@ exports[`HexEncodedData should not highlight the data if highlight option is fal
 exports[`HexEncodedData should render the default component markup 1`] = `
 <div>
   <div
-    class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+    class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
   >
     <div
       class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -136,7 +130,7 @@ exports[`HexEncodedData should render the default component markup 1`] = `
       style="word-break: break-word;"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
       >
         Data (hex-encoded)
       </p>
@@ -157,19 +151,16 @@ exports[`HexEncodedData should render the default component markup 1`] = `
         >
           <button
             aria-label="Copy to clipboard"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
             <mock-icon
-              aria-hidden="true"
-              classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+              aria-hidden=""
+              class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
               data-testid="copy-btn-icon"
               focusable="false"
             />
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
         </span>
         <b
@@ -182,7 +173,7 @@ exports[`HexEncodedData should render the default component markup 1`] = `
         d00088fc64...
          
         <button
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiLink-button css-fl9gtn-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiLink-button css-5r1yio-MuiTypography-root-MuiLink-root"
           data-testid="show-more"
           type="button"
         >
diff --git a/src/components/transactions/MaliciousTxWarning/index.tsx b/src/components/transactions/MaliciousTxWarning/index.tsx
index a77b14d725..b714e5b44b 100644
--- a/src/components/transactions/MaliciousTxWarning/index.tsx
+++ b/src/components/transactions/MaliciousTxWarning/index.tsx
@@ -4,12 +4,20 @@ import WarningIcon from '@/public/images/notifications/warning.svg'
 const MaliciousTxWarning = ({ withTooltip = true }: { withTooltip?: boolean }) => {
   return withTooltip ? (
     <Tooltip title="This token isn’t verified on major token lists and may pose risks when interacting with it or involved addresses">
-      <Box lineHeight="16px">
+      <Box
+        sx={{
+          lineHeight: '16px',
+        }}
+      >
         <SvgIcon component={WarningIcon} fontSize="small" inheritViewBox color="warning" />
       </Box>
     </Tooltip>
   ) : (
-    <Box lineHeight="16px">
+    <Box
+      sx={{
+        lineHeight: '16px',
+      }}
+    >
       <SvgIcon component={WarningIcon} fontSize="small" inheritViewBox color="warning" />
     </Box>
   )
diff --git a/src/components/transactions/SignedMessagesHelpLink/index.tsx b/src/components/transactions/SignedMessagesHelpLink/index.tsx
index 6c3cfafe14..3f0d7f94b8 100644
--- a/src/components/transactions/SignedMessagesHelpLink/index.tsx
+++ b/src/components/transactions/SignedMessagesHelpLink/index.tsx
@@ -14,10 +14,21 @@ const SignedMessagesHelpLink = () => {
   }
 
   return (
-    <Box display="flex" alignItems="center" gap={1}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+      }}
+    >
       <SvgIcon component={InfoIcon} inheritViewBox color="border" fontSize="small" />
       <ExternalLink noIcon href={HelpCenterArticle.SIGNED_MESSAGES}>
-        <Typography variant="body2" fontWeight={700}>
+        <Typography
+          variant="body2"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
           What are signed messages?
         </Typography>
       </ExternalLink>
diff --git a/src/components/transactions/TxConfirmations/index.tsx b/src/components/transactions/TxConfirmations/index.tsx
index e8a843f14e..7eb7825276 100644
--- a/src/components/transactions/TxConfirmations/index.tsx
+++ b/src/components/transactions/TxConfirmations/index.tsx
@@ -17,8 +17,12 @@ const TxConfirmations = ({
   return (
     <TxStatusChip color={color}>
       <SvgIcon component={isConfirmed ? CheckIcon : OwnersIcon} inheritViewBox fontSize="small" />
-
-      <Typography variant="caption" fontWeight="bold">
+      <Typography
+        variant="caption"
+        sx={{
+          fontWeight: 'bold',
+        }}
+      >
         {submittedConfirmations} out of {requiredConfirmations}
       </Typography>
     </TxStatusChip>
diff --git a/src/components/transactions/TxDetails/SafeTxGasForm.tsx b/src/components/transactions/TxDetails/SafeTxGasForm.tsx
index 67b4e7854b..319d4fb34f 100644
--- a/src/components/transactions/TxDetails/SafeTxGasForm.tsx
+++ b/src/components/transactions/TxDetails/SafeTxGasForm.tsx
@@ -62,15 +62,26 @@ const SafeTxGasForm = () => {
   const [editing, setEditing] = useState(false)
 
   return (
-    <Box display="flex" alignItems="center" gap={1} position="relative">
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        position: 'relative',
+      }}
+    >
       {safeTxGas}
-
       {isEditable && (
-        <Link component="button" onClick={() => setEditing(true)} fontSize="small">
+        <Link
+          component="button"
+          onClick={() => setEditing(true)}
+          sx={{
+            fontSize: 'small',
+          }}
+        >
           Edit
         </Link>
       )}
-
       {editing && <Form onSubmit={() => setEditing(false)} />}
     </Box>
   )
diff --git a/src/components/transactions/TxDetails/Summary/TxDataRow/index.tsx b/src/components/transactions/TxDetails/Summary/TxDataRow/index.tsx
index f0b68a02b2..d8a93de5da 100644
--- a/src/components/transactions/TxDetails/Summary/TxDataRow/index.tsx
+++ b/src/components/transactions/TxDetails/Summary/TxDataRow/index.tsx
@@ -34,7 +34,13 @@ export const generateDataRowValue = (
       )
     case 'rawData':
       return (
-        <Box data-testid="tx-data-row" display="flex" alignItems="center">
+        <Box
+          data-testid="tx-data-row"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
           <div>{value ? dataLength(value) : 0} bytes</div>
           <CopyButton text={value} />
         </Box>
diff --git a/src/components/transactions/TxDetails/Summary/index.tsx b/src/components/transactions/TxDetails/Summary/index.tsx
index 7f1532e2b0..32bd2c1132 100644
--- a/src/components/transactions/TxDetails/Summary/index.tsx
+++ b/src/components/transactions/TxDetails/Summary/index.tsx
@@ -66,13 +66,11 @@ const Summary = ({ txDetails, defaultExpanded = false, hideDecodedData = false }
       <TxDataRow datatestid="tx-created-at" title="Created:">
         {submittedAt ? dateString(submittedAt) : null}
       </TxDataRow>
-
       {executedAt && (
         <TxDataRow datatestid="tx-executed-at" title="Executed:">
           {dateString(executedAt)}
         </TxDataRow>
       )}
-
       {/* Advanced TxData */}
       {txData && (
         <>
@@ -89,9 +87,22 @@ const Summary = ({ txDetails, defaultExpanded = false, hideDecodedData = false }
           )}
 
           {expanded && (
-            <Box mt={1}>
+            <Box
+              sx={{
+                mt: 1,
+              }}
+            >
               {!isCustom && !hideDecodedData && (
-                <Box borderBottom="1px solid" borderColor="border.light" p={2} mt={1} mb={2} mx={-2}>
+                <Box
+                  sx={{
+                    borderBottom: '1px solid',
+                    borderColor: 'border.light',
+                    p: 2,
+                    mt: 1,
+                    mb: 2,
+                    mx: -2,
+                  }}
+                >
                   <DecodedData txData={txDetails.txData} toInfo={txDetails.txData?.to} />
                 </Box>
               )}
diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/MethodCall.tsx b/src/components/transactions/TxDetails/TxData/DecodedData/MethodCall.tsx
index 7d78a51b9b..0ff9af87ac 100644
--- a/src/components/transactions/TxDetails/TxData/DecodedData/MethodCall.tsx
+++ b/src/components/transactions/TxDetails/TxData/DecodedData/MethodCall.tsx
@@ -16,12 +16,14 @@ const MethodCall = ({
   return (
     <>
       <Typography
-        fontWeight="bold"
-        display="flex"
-        flexWrap={['wrap', 'wrap', 'nowrap']}
-        alignItems="center"
-        gap=".5em"
         component="div"
+        sx={{
+          fontWeight: 'bold',
+          display: 'flex',
+          flexWrap: ['wrap', 'wrap', 'nowrap'],
+          alignItems: 'center',
+          gap: '.5em',
+        }}
       >
         Call
         <Typography
@@ -50,7 +52,6 @@ const MethodCall = ({
           avatarSize={24}
         />
       </Typography>
-
       <Divider />
     </>
   )
diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/MethodDetails/index.tsx b/src/components/transactions/TxDetails/TxData/DecodedData/MethodDetails/index.tsx
index 1818c49a51..232151beaa 100644
--- a/src/components/transactions/TxDetails/TxData/DecodedData/MethodDetails/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/DecodedData/MethodDetails/index.tsx
@@ -14,15 +14,27 @@ type MethodDetailsProps = {
 
 export const MethodDetails = ({ data, addressInfoIndex }: MethodDetailsProps): ReactElement => {
   if (!data.parameters?.length) {
-    return <Typography color="text.secondary">No parameters</Typography>
+    return (
+      <Typography
+        sx={{
+          color: 'text.secondary',
+        }}
+      >
+        No parameters
+      </Typography>
+    )
   }
 
   return (
     <Box>
-      <Typography fontWeight="bold" pb={1}>
+      <Typography
+        sx={{
+          fontWeight: 'bold',
+          pb: 1,
+        }}
+      >
         Parameters
       </Typography>
-
       {data.parameters?.map((param, index) => {
         const isArrayValueParam = isArrayParameter(param.type) || Array.isArray(param.value)
         const inlineType = isAddress(param.type) ? 'address' : isByte(param.type) ? 'bytes' : undefined
@@ -31,7 +43,12 @@ export const MethodDetails = ({ data, addressInfoIndex }: MethodDetailsProps): R
         const title = (
           <>
             <Typography component="span">{param.name}</Typography>{' '}
-            <Typography component="span" color="text.secondary">
+            <Typography
+              component="span"
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
               {param.type}
             </Typography>
           </>
diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx b/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
index dfe3114835..c09a20cf70 100644
--- a/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
@@ -47,13 +47,16 @@ export const SingleTxDecoded = ({ tx, txData, actionTitle, variant, expanded, on
         <div className={css.summary}>
           <CodeIcon color="border" fontSize="small" />
           <Typography>{actionTitle}</Typography>
-          <Typography ml="8px">
+          <Typography
+            sx={{
+              ml: '8px',
+            }}
+          >
             {name ? name + ': ' : ''}
             <b>{method}</b>
           </Typography>
         </div>
       </AccordionSummary>
-
       <AccordionDetails>
         <Stack spacing={1}>
           <DecodedData txData={singleTxData} toInfo={{ value: tx.to }} />
diff --git a/src/components/transactions/TxDetails/TxData/Rejection/index.tsx b/src/components/transactions/TxDetails/TxData/Rejection/index.tsx
index f1c8f66036..748996e993 100644
--- a/src/components/transactions/TxDetails/TxData/Rejection/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/Rejection/index.tsx
@@ -22,11 +22,21 @@ const RejectionTxInfo = ({ nonce, isTxExecuted }: Props) => {
 
   return (
     <>
-      <Typography data-testid="onchain-rejection" mr={2}>
+      <Typography
+        data-testid="onchain-rejection"
+        sx={{
+          mr: 2,
+        }}
+      >
         {message}
       </Typography>
       {!isTxExecuted && (
-        <Box mt={2} sx={{ width: 'fit-content' }}>
+        <Box
+          sx={{
+            mt: 2,
+            width: 'fit-content',
+          }}
+        >
           <ExternalLink href={HelpCenterArticle.CANCELLING_TRANSACTIONS} title={title}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
               <Typography sx={{ textDecoration: 'underline' }}>{title}</Typography>
diff --git a/src/components/transactions/TxDetails/TxData/Transfer/TransferActions.tsx b/src/components/transactions/TxDetails/TxData/Transfer/TransferActions.tsx
index 3dac032a8b..dd16a19430 100644
--- a/src/components/transactions/TxDetails/TxData/Transfer/TransferActions.tsx
+++ b/src/components/transactions/TxDetails/TxData/Transfer/TransferActions.tsx
@@ -68,8 +68,8 @@ const TransferActions = ({
   const amount = isNativeTokenTransfer(txInfo.transferInfo)
     ? safeFormatUnits(txInfo.transferInfo.value, ETHER)
     : isERC20Transfer(txInfo.transferInfo)
-    ? safeFormatUnits(txInfo.transferInfo.value, txInfo.transferInfo.decimals)
-    : undefined
+      ? safeFormatUnits(txInfo.transferInfo.value, txInfo.transferInfo.decimals)
+      : undefined
 
   const isOutgoingTx = isOutgoingTransfer(txInfo)
   const canSendAgain =
diff --git a/src/components/transactions/TxDetails/TxData/Transfer/index.tsx b/src/components/transactions/TxDetails/TxData/Transfer/index.tsx
index 9971388af1..34d6a98664 100644
--- a/src/components/transactions/TxDetails/TxData/Transfer/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/Transfer/index.tsx
@@ -21,7 +21,14 @@ const TransferTxInfoMain = ({ txInfo, txStatus, trusted, imitation }: TransferTx
   const { direction } = txInfo
 
   return (
-    <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 1,
+      }}
+    >
       <Typography>
         {direction === TransferDirection.INCOMING ? 'Received' : isTxQueued(txStatus) ? 'Send' : 'Sent'}{' '}
         <b>
@@ -38,10 +45,21 @@ const TransferTxInfo = ({ txInfo, txStatus, trusted, imitation }: TransferTxInfo
   const address = txInfo.direction.toUpperCase() === TransferDirection.INCOMING ? txInfo.sender : txInfo.recipient
 
   return (
-    <Box display="flex" flexDirection="column" gap={1}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+      }}
+    >
       <TransferTxInfoMain txInfo={txInfo} txStatus={txStatus} trusted={trusted} imitation={imitation} />
-
-      <Box display="flex" alignItems="center" width="100%">
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+        }}
+      >
         <EthHashInfo
           address={address.value}
           name={address.name}
diff --git a/src/components/transactions/TxDetails/index.tsx b/src/components/transactions/TxDetails/index.tsx
index 6bb4b92ae6..eb7d2bb9ba 100644
--- a/src/components/transactions/TxDetails/index.tsx
+++ b/src/components/transactions/TxDetails/index.tsx
@@ -121,7 +121,6 @@ const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement
           </div>
         )}
       </div>
-
       {/* Signers */}
       {(!isUnsigned || isTxFromProposer) && (
         <div className={css.txSigners}>
@@ -140,7 +139,12 @@ const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement
           )}
 
           {isQueue && expiredSwap && (
-            <Typography color="text.secondary" mt={2}>
+            <Typography
+              sx={{
+                color: 'text.secondary',
+                mt: 2,
+              }}
+            >
               This order has expired. Reject this transaction and try again.
             </Typography>
           )}
diff --git a/src/components/transactions/TxFilterForm/TxFilterForm.test.tsx b/src/components/transactions/TxFilterForm/TxFilterForm.test.tsx
index fc9a83e9ae..32ce96e689 100644
--- a/src/components/transactions/TxFilterForm/TxFilterForm.test.tsx
+++ b/src/components/transactions/TxFilterForm/TxFilterForm.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { screen, fireEvent } from '@testing-library/react'
 import { act, render } from '@/tests/test-utils'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import TxFilterForm from './index'
 import { useRouter } from 'next/router'
 
@@ -19,7 +19,7 @@ const toggleFilter = jest.fn()
 
 const fromDate = '20/01/2021'
 const toDate = '20/01/2020'
-const placeholder = 'dd/mm/yyyy'
+const placeholder = 'DD/MM/YYYY'
 const errorMsgFormat = 'Invalid address format'
 
 describe('TxFilterForm Component Tests', () => {
diff --git a/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx b/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx
index f94fb2b358..04e40ecd67 100644
--- a/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx
+++ b/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx
@@ -74,7 +74,12 @@ export const ExpandableTransactionItem = ({
 
 export const TransactionSkeleton = () => (
   <>
-    <Box pt="20px" pb="4px">
+    <Box
+      sx={{
+        pt: '20px',
+        pb: '4px',
+      }}
+    >
       <Skeleton variant="text" width="35px" />
     </Box>
 
diff --git a/src/components/transactions/TxSigners/index.tsx b/src/components/transactions/TxSigners/index.tsx
index 27d03c7bf3..da3ad2705a 100644
--- a/src/components/transactions/TxSigners/index.tsx
+++ b/src/components/transactions/TxSigners/index.tsx
@@ -65,7 +65,7 @@ enum StepState {
 }
 
 const getStepColor = (state: StepState, palette: Palette): string => {
-  const colors: { [key in StepState]: string } = {
+  const colors: { [_key in StepState]: string } = {
     [StepState.CONFIRMED]: palette.primary.main,
     [StepState.ACTIVE]: palette.warning.dark,
     [StepState.DISABLED]: palette.border.main,
@@ -202,7 +202,14 @@ export const TxSigners = ({
               <Dot />
             </StyledListItemIcon>
             <ListItemText>
-              <Link data-testid="confirmation-visibility-btn" component="button" onClick={toggleHide} fontSize="medium">
+              <Link
+                data-testid="confirmation-visibility-btn"
+                component="button"
+                onClick={toggleHide}
+                sx={{
+                  fontSize: 'medium',
+                }}
+              >
                 {hideConfirmations ? 'Show all' : 'Hide all'}
               </Link>
             </ListItemText>
diff --git a/src/components/transactions/TxStatusChip/index.tsx b/src/components/transactions/TxStatusChip/index.tsx
index 339236fb75..2bffe6019a 100644
--- a/src/components/transactions/TxStatusChip/index.tsx
+++ b/src/components/transactions/TxStatusChip/index.tsx
@@ -17,11 +17,13 @@ const TxStatusChip = ({ children, color }: TxStatusChipProps): ReactElement => {
       label={
         <Typography
           variant="caption"
-          fontWeight="bold"
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          gap={0.7}
+          sx={{
+            fontWeight: 'bold',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 0.7,
+          }}
         >
           {children}
         </Typography>
diff --git a/src/components/transactions/TxStatusLabel/index.tsx b/src/components/transactions/TxStatusLabel/index.tsx
index adb4abbda4..f284b162b3 100644
--- a/src/components/transactions/TxStatusLabel/index.tsx
+++ b/src/components/transactions/TxStatusLabel/index.tsx
@@ -34,7 +34,7 @@ const TxStatusLabel = ({ tx }: { tx: TransactionSummary }) => {
       display="flex"
       alignItems="center"
       gap={1}
-      color={({ palette }) => getStatusColor(tx, palette)}
+      sx={{ color: ({ palette }) => getStatusColor(tx, palette) }}
       data-testid="tx-status-label"
     >
       {isPending && <CircularProgress size={14} color="inherit" />}
diff --git a/src/components/transactions/TxSummary/QueueActions.tsx b/src/components/transactions/TxSummary/QueueActions.tsx
index df6075a6c0..c0726ad3b4 100644
--- a/src/components/transactions/TxSummary/QueueActions.tsx
+++ b/src/components/transactions/TxSummary/QueueActions.tsx
@@ -20,7 +20,14 @@ const QueueActions = ({ tx }: { tx: TransactionSummary }) => {
   }
 
   return (
-    <Box data-testid="tx-actions" mr={2} display="flex" justifyContent="center">
+    <Box
+      data-testid="tx-actions"
+      sx={{
+        mr: 2,
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+    >
       {ExecutionComponent}
       {pendingTx && pendingTx.status === PendingStatus.PROCESSING && (
         <SpeedUpMonitor txId={tx.id} pendingTx={pendingTx} modalTrigger="alertButton" />
diff --git a/src/components/transactions/TxSummary/index.tsx b/src/components/transactions/TxSummary/index.tsx
index af455a3878..a29e92db02 100644
--- a/src/components/transactions/TxSummary/index.tsx
+++ b/src/components/transactions/TxSummary/index.tsx
@@ -50,31 +50,57 @@ const TxSummary = ({ item, isConflictGroup, isBulkGroup }: TxSummaryProps): Reac
       id={tx.id}
     >
       {nonce !== undefined && !isConflictGroup && !isBulkGroup && (
-        <Box gridArea="nonce" data-testid="nonce" className={css.nonce}>
+        <Box
+          data-testid="nonce"
+          className={css.nonce}
+          sx={{
+            gridArea: 'nonce',
+          }}
+        >
           {nonce}
         </Box>
       )}
-
       {(isImitationTransaction || !isTrusted) && (
-        <Box data-testid="warning" gridArea="nonce">
+        <Box
+          data-testid="warning"
+          sx={{
+            gridArea: 'nonce',
+          }}
+        >
           <MaliciousTxWarning withTooltip={!isImitationTransaction} />
         </Box>
       )}
-
-      <Box gridArea="type" data-testid="tx-type">
+      <Box
+        data-testid="tx-type"
+        sx={{
+          gridArea: 'type',
+        }}
+      >
         <TxType tx={tx} />
       </Box>
-
-      <Box gridArea="info" data-testid="tx-info">
+      <Box
+        data-testid="tx-info"
+        sx={{
+          gridArea: 'info',
+        }}
+      >
         <TxInfo info={tx.txInfo} />
       </Box>
-
-      <Box gridArea="date" data-testid="tx-date" className={css.date}>
+      <Box
+        data-testid="tx-date"
+        className={css.date}
+        sx={{
+          gridArea: 'date',
+        }}
+      >
         <DateTime value={tx.timestamp} />
       </Box>
-
       {isQueue && executionInfo && (
-        <Box gridArea="confirmations">
+        <Box
+          sx={{
+            gridArea: 'confirmations',
+          }}
+        >
           {executionInfo.confirmationsSubmitted > 0 || isPending ? (
             <TxConfirmations
               submittedConfirmations={executionInfo.confirmationsSubmitted}
@@ -85,21 +111,37 @@ const TxSummary = ({ item, isConflictGroup, isBulkGroup }: TxSummaryProps): Reac
           )}
         </Box>
       )}
-
       {isQueue && expiredSwap ? (
-        <Box gridArea="status" justifyContent="flex-end" display="flex" className={css.status}>
+        <Box
+          className={css.status}
+          sx={{
+            gridArea: 'status',
+            justifyContent: 'flex-end',
+            display: 'flex',
+          }}
+        >
           <StatusLabel status="expired" />
         </Box>
       ) : !isQueue || isPending ? (
-        <Box gridArea="status" justifyContent="flex-end" display="flex" className={css.status}>
+        <Box
+          className={css.status}
+          sx={{
+            gridArea: 'status',
+            justifyContent: 'flex-end',
+            display: 'flex',
+          }}
+        >
           <TxStatusLabel tx={tx} />
         </Box>
       ) : (
         ''
       )}
-
       {isQueue && !expiredSwap && (
-        <Box gridArea="actions">
+        <Box
+          sx={{
+            gridArea: 'actions',
+          }}
+        >
           <QueueActions tx={tx} />
         </Box>
       )}
diff --git a/src/components/tx-flow/SafeTxProvider.tsx b/src/components/tx-flow/SafeTxProvider.tsx
index f83c86663a..31e2070403 100644
--- a/src/components/tx-flow/SafeTxProvider.tsx
+++ b/src/components/tx-flow/SafeTxProvider.tsx
@@ -74,8 +74,10 @@ const SafeTxProvider = ({ children }: { children: ReactNode }): ReactElement =>
   const recommendedSafeTxGas = useSafeTxGas(safeTx)
 
   // Priority to external nonce, then to the recommended one
-  const finalNonce = isSigned ? safeTx?.data.nonce : nonce ?? recommendedNonce ?? safeTx?.data.nonce
-  const finalSafeTxGas = isSigned ? safeTx?.data.safeTxGas : safeTxGas ?? recommendedSafeTxGas ?? safeTx?.data.safeTxGas
+  const finalNonce = isSigned ? safeTx?.data.nonce : (nonce ?? recommendedNonce ?? safeTx?.data.nonce)
+  const finalSafeTxGas = isSigned
+    ? safeTx?.data.safeTxGas
+    : (safeTxGas ?? recommendedSafeTxGas ?? safeTx?.data.safeTxGas)
 
   // Update the tx when the nonce or safeTxGas change
   useEffect(() => {
diff --git a/src/components/tx-flow/TxInfoProvider.tsx b/src/components/tx-flow/TxInfoProvider.tsx
index 567087c5c4..6187942349 100644
--- a/src/components/tx-flow/TxInfoProvider.tsx
+++ b/src/components/tx-flow/TxInfoProvider.tsx
@@ -1,4 +1,4 @@
-import { createContext } from 'react'
+import { createContext, type ReactElement } from 'react'
 
 import { useSimulation, type UseSimulationReturn } from '@/components/tx/security/tenderly/useSimulation'
 import { FETCH_STATUS, type TenderlySimulation } from '@/components/tx/security/tenderly/types'
@@ -40,7 +40,7 @@ export const TxInfoContext = createContext<{
   },
 })
 
-export const TxInfoProvider = ({ children }: { children: JSX.Element }) => {
+export const TxInfoProvider = ({ children }: { children: ReactElement }) => {
   const simulation = useSimulation()
 
   const isLoading = simulation._simulationRequestStatus === FETCH_STATUS.LOADING
diff --git a/src/components/tx-flow/common/OwnerList/index.tsx b/src/components/tx-flow/common/OwnerList/index.tsx
index 9592d70588..5dfd23f363 100644
--- a/src/components/tx-flow/common/OwnerList/index.tsx
+++ b/src/components/tx-flow/common/OwnerList/index.tsx
@@ -19,7 +19,13 @@ export function OwnerList({
 }): ReactElement {
   return (
     <Paper className={css.container} sx={sx}>
-      <Typography color="text.secondary" display="flex" alignItems="center">
+      <Typography
+        sx={{
+          color: 'text.secondary',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
         <SvgIcon component={PlusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
         {title ?? `New signer${owners.length > 1 ? 's' : ''}`}
       </Typography>
diff --git a/src/components/tx-flow/common/TxLayout/index.tsx b/src/components/tx-flow/common/TxLayout/index.tsx
index 02d77dcee3..72a1e2afe8 100644
--- a/src/components/tx-flow/common/TxLayout/index.tsx
+++ b/src/components/tx-flow/common/TxLayout/index.tsx
@@ -32,18 +32,28 @@ const TxLayoutHeader = ({
 
   return (
     <Box className={css.headerInner}>
-      <Box display="flex" alignItems="center">
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
         {icon && (
           <div className={css.icon}>
             <SvgIcon component={icon} inheritViewBox />
           </div>
         )}
 
-        <Typography variant="h4" component="div" fontWeight="bold">
+        <Typography
+          variant="h4"
+          component="div"
+          sx={{
+            fontWeight: 'bold',
+          }}
+        >
           {subtitle}
         </Typography>
       </Box>
-
       {!hideNonce && safe.deployed && nonceNeeded && <TxNonce />}
     </Box>
   )
@@ -113,7 +123,13 @@ const TxLayout = ({
             )}
 
             <Container className={css.container}>
-              <Grid container gap={3} justifyContent="center">
+              <Grid
+                container
+                sx={{
+                  gap: 3,
+                  justifyContent: 'center',
+                }}
+              >
                 {/* Main content */}
                 <Grid item xs={12} md={7}>
                   <div className={css.titleWrapper}>
@@ -121,8 +137,10 @@ const TxLayout = ({
                       data-testid="modal-title"
                       variant="h3"
                       component="div"
-                      fontWeight="700"
                       className={css.title}
+                      sx={{
+                        fontWeight: '700',
+                      }}
                     >
                       {title}
                     </Typography>
diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
index 5d3f243e39..154e5f3a73 100644
--- a/src/components/tx-flow/common/TxNonce/index.tsx
+++ b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -42,7 +42,13 @@ const CustomPopper = function ({
 const NonceFormHeader = memo(function NonceFormSubheader({ children, ...props }: ListSubheaderProps) {
   return (
     <ListSubheader {...props} disableSticky>
-      <Typography variant="caption" fontWeight={700} color="text.secondary">
+      <Typography
+        variant="caption"
+        sx={{
+          fontWeight: 700,
+          color: 'text.secondary',
+        }}
+      >
         {children}
       </Typography>
     </ListSubheader>
@@ -179,7 +185,13 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
       render={({ field, fieldState }) => {
         if (readOnly) {
           return (
-            <Typography variant="body2" fontWeight={700} ml={-1}>
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: 700,
+                ml: -1,
+              }}
+            >
               {nonce}
             </Typography>
           )
@@ -277,9 +289,21 @@ const TxNonce = () => {
   const { nonce, recommendedNonce } = useContext(SafeTxContext)
 
   return (
-    <Box data-testid="nonce-fld" display="flex" alignItems="center" gap={1}>
+    <Box
+      data-testid="nonce-fld"
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+      }}
+    >
       Nonce{' '}
-      <Typography component="span" fontWeight={700}>
+      <Typography
+        component="span"
+        sx={{
+          fontWeight: 700,
+        }}
+      >
         #
       </Typography>
       {nonce === undefined || recommendedNonce === undefined ? (
diff --git a/src/components/tx-flow/common/TxStatusWidget/index.tsx b/src/components/tx-flow/common/TxStatusWidget/index.tsx
index 11847b6ee9..ce16000d6e 100644
--- a/src/components/tx-flow/common/TxStatusWidget/index.tsx
+++ b/src/components/tx-flow/common/TxStatusWidget/index.tsx
@@ -47,7 +47,14 @@ const TxStatusWidget = ({
   return (
     <Paper>
       <div className={css.header}>
-        <Typography fontWeight="700" display="flex" alignItems="center" gap={1}>
+        <Typography
+          sx={{
+            fontWeight: '700',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+          }}
+        >
           <SafeLogo width={16} height={16} className={css.logo} />
           {isMessage ? 'Message' : 'Transaction'} status
         </Typography>
@@ -56,9 +63,7 @@ const TxStatusWidget = ({
           <CloseIcon />
         </IconButton>
       </div>
-
       <Divider />
-
       <div className={css.content}>
         <List className={css.status}>
           <ListItem>
diff --git a/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx b/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx
index 2fa4aa625c..51c8e67486 100644
--- a/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx
+++ b/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx
@@ -83,12 +83,27 @@ export const ChooseOwner = ({
         <form onSubmit={onFormSubmit} className={commonCss.form}>
           {params.removedOwner && (
             <>
-              <Typography variant="body2" mb={1}>
+              <Typography
+                variant="body2"
+                sx={{
+                  mb: 1,
+                }}
+              >
                 {params.removedOwner &&
                   'Review the signer you want to replace in the active Safe Account, then specify the new signer you want to replace it with:'}
               </Typography>
-              <Box my={3}>
-                <Typography variant="body2" color="text.secondary" mb={1}>
+              <Box
+                sx={{
+                  my: 3,
+                }}
+              >
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.secondary',
+                    mb: 1,
+                  }}
+                >
                   Current signer
                 </Typography>
                 <EthHashInfo address={params.removedOwner.address} showCopyButton shortAddress={false} hasExplorer />
@@ -125,7 +140,13 @@ export const ChooseOwner = ({
 
           {mode === ChooseOwnerMode.ADD && (
             <FormControl fullWidth>
-              <Typography variant="h6" fontWeight={700} mt={3}>
+              <Typography
+                variant="h6"
+                sx={{
+                  fontWeight: 700,
+                  mt: 3,
+                }}
+              >
                 Threshold
                 <Tooltip title={TOOLTIP_TITLES.THRESHOLD} arrow placement="top">
                   <span>
@@ -143,11 +164,24 @@ export const ChooseOwner = ({
                 </Tooltip>
               </Typography>
 
-              <Typography variant="body2" mb={1}>
+              <Typography
+                variant="body2"
+                sx={{
+                  mb: 1,
+                }}
+              >
                 Any transaction requires the confirmation of:
               </Typography>
 
-              <Grid container direction="row" alignItems="center" gap={2} pt={1}>
+              <Grid
+                container
+                direction="row"
+                sx={{
+                  alignItems: 'center',
+                  gap: 2,
+                  pt: 1,
+                }}
+              >
                 <Grid item>
                   <Controller
                     control={control}
diff --git a/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryFlowReview.tsx b/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryFlowReview.tsx
index 578f308e37..44cfabd742 100644
--- a/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryFlowReview.tsx
+++ b/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryFlowReview.tsx
@@ -31,11 +31,14 @@ export function CancelRecoveryFlowReview({ recovery }: { recovery: RecoveryQueue
 
   return (
     <SignOrExecuteForm onSubmit={onSubmit} isBatchable={false}>
-      <Typography mb={1}>
+      <Typography
+        sx={{
+          mb: 1,
+        }}
+      >
         All actions initiated by the Recoverer will be cancelled. The current signers will remain the signers of the
         Safe Account.
       </Typography>
-
       <ErrorMessage level="info">
         This transaction will initiate the cancellation of the{' '}
         {recovery.isMalicious ? 'malicious transaction' : 'recovery proposal'}. It requires other signer signatures in
diff --git a/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx b/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx
index 8e128c2871..3c882e5558 100644
--- a/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx
+++ b/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx
@@ -20,20 +20,48 @@ export function CancelRecoveryOverview({ onSubmit }: { onSubmit: () => void }):
 
   return (
     <TxCard>
-      <Box display="flex" flexDirection="column" alignItems="center" p={{ md: 5 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          p: { md: 5 },
+        }}
+      >
         {/* TODO: Replace with correct icon when provided */}
         <ReplaceTxIcon />
 
-        <Typography mb={1} variant="h4" mt={5} fontWeight={700} textAlign="center">
+        <Typography
+          variant="h4"
+          sx={{
+            mb: 1,
+            mt: 5,
+            fontWeight: 700,
+            textAlign: 'center',
+          }}
+        >
           Do you want to cancel the Account recovery?
         </Typography>
 
-        <Typography variant="body2" mb={3} textAlign="center">
+        <Typography
+          variant="body2"
+          sx={{
+            mb: 3,
+            textAlign: 'center',
+          }}
+        >
           If it is an unwanted recovery proposal or you&apos;ve noticed something suspicious, you can cancel it at any
           time.
         </Typography>
 
-        <Box display="flex" columnGap={3} rowGap={1} flexWrap="wrap">
+        <Box
+          sx={{
+            display: 'flex',
+            columnGap: 3,
+            rowGap: 1,
+            flexWrap: 'wrap',
+          }}
+        >
           <Button variant="outlined" onClick={onClose} className={css.button} size="small">
             Go back
           </Button>
diff --git a/src/components/tx-flow/flows/ChangeThreshold/ChooseThreshold.tsx b/src/components/tx-flow/flows/ChangeThreshold/ChooseThreshold.tsx
index 6d289b93ac..3daf2e9d25 100644
--- a/src/components/tx-flow/flows/ChangeThreshold/ChooseThreshold.tsx
+++ b/src/components/tx-flow/flows/ChangeThreshold/ChooseThreshold.tsx
@@ -41,7 +41,12 @@ export const ChooseThreshold = ({
   return (
     <TxCard>
       <div>
-        <Typography variant="h3" fontWeight={700}>
+        <Typography
+          variant="h3"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
           Threshold
           <Tooltip title={TOOLTIP_TITLES.THRESHOLD} arrow placement="top">
             <span>
@@ -61,9 +66,12 @@ export const ChooseThreshold = ({
 
         <Typography>Any transaction will require the confirmation of:</Typography>
       </div>
-
       <form onSubmit={formMethods.handleSubmit(onSubmit)}>
-        <Box mb={2}>
+        <Box
+          sx={{
+            mb: 2,
+          }}
+        >
           <Controller
             control={formMethods.control}
             rules={{
@@ -78,7 +86,14 @@ export const ChooseThreshold = ({
               const isError = !!fieldState.error
 
               return (
-                <Grid container direction="row" gap={2} alignItems="center">
+                <Grid
+                  container
+                  direction="row"
+                  sx={{
+                    gap: 2,
+                    alignItems: 'center',
+                  }}
+                >
                   <Grid item>
                     <TextField select {...field} error={isError}>
                       {safe.owners.map((_, idx) => (
@@ -88,18 +103,25 @@ export const ChooseThreshold = ({
                       ))}
                     </TextField>
                   </Grid>
-
                   <Grid item>
                     <Typography>out of {safe.owners.length} signer(s)</Typography>
                   </Grid>
-
                   <Grid item xs={12}>
                     {isError ? (
-                      <Typography color="error" mb={2}>
+                      <Typography
+                        color="error"
+                        sx={{
+                          mb: 2,
+                        }}
+                      >
                         {fieldState.error?.message}
                       </Typography>
                     ) : (
-                      <Typography mb={2}>
+                      <Typography
+                        sx={{
+                          mb: 2,
+                        }}
+                      >
                         {fieldState.isDirty ? 'Previous policy was ' : 'Current policy is '}
                         <b>
                           {safe.threshold} out of {safe.owners.length}
diff --git a/src/components/tx-flow/flows/ConfirmTx/ConfirmProposedTx.tsx b/src/components/tx-flow/flows/ConfirmTx/ConfirmProposedTx.tsx
index c62c776a3b..9451036981 100644
--- a/src/components/tx-flow/flows/ConfirmTx/ConfirmProposedTx.tsx
+++ b/src/components/tx-flow/flows/ConfirmTx/ConfirmProposedTx.tsx
@@ -40,7 +40,13 @@ const ConfirmProposedTx = ({ txSummary }: ConfirmProposedTxProps): ReactElement
 
   return (
     <SignOrExecuteForm txId={txId} isExecutable={canExecute} onlyExecute={!canSign} showMethodCall>
-      <Typography mb={1}>{text}</Typography>
+      <Typography
+        sx={{
+          mb: 1,
+        }}
+      >
+        {text}
+      </Typography>
     </SignOrExecuteForm>
   )
 }
diff --git a/src/components/tx-flow/flows/NewSpendingLimit/CreateSpendingLimit.tsx b/src/components/tx-flow/flows/NewSpendingLimit/CreateSpendingLimit.tsx
index 4d99ecfa03..0646c6197c 100644
--- a/src/components/tx-flow/flows/NewSpendingLimit/CreateSpendingLimit.tsx
+++ b/src/components/tx-flow/flows/NewSpendingLimit/CreateSpendingLimit.tsx
@@ -74,7 +74,13 @@ export const CreateSpendingLimit = ({
 
           <TokenAmountInput balances={balances.items} selectedToken={selectedToken} validate={validateSpendingLimit} />
 
-          <Typography variant="h4" fontWeight={700} mt={3}>
+          <Typography
+            variant="h4"
+            sx={{
+              fontWeight: 700,
+              mt: 3,
+            }}
+          >
             Reset Timer
           </Typography>
           <Typography>
diff --git a/src/components/tx-flow/flows/NewSpendingLimit/ReviewSpendingLimit.tsx b/src/components/tx-flow/flows/NewSpendingLimit/ReviewSpendingLimit.tsx
index e76464fca6..33c2a98580 100644
--- a/src/components/tx-flow/flows/NewSpendingLimit/ReviewSpendingLimit.tsx
+++ b/src/components/tx-flow/flows/NewSpendingLimit/ReviewSpendingLimit.tsx
@@ -97,10 +97,20 @@ export const ReviewSpendingLimit = ({ params }: { params: NewSpendingLimitFlowPr
           )}
         </SendAmountBlock>
       )}
-
-      <Grid container gap={1} alignItems="center">
+      <Grid
+        container
+        sx={{
+          gap: 1,
+          alignItems: 'center',
+        }}
+      >
         <Grid item md>
-          <Typography variant="body2" color="text.secondary">
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+            }}
+          >
             Beneficiary
           </Typography>
         </Grid>
@@ -115,10 +125,20 @@ export const ReviewSpendingLimit = ({ params }: { params: NewSpendingLimitFlowPr
           />
         </Grid>
       </Grid>
-
-      <Grid container gap={1} alignItems="center">
+      <Grid
+        container
+        sx={{
+          gap: 1,
+          alignItems: 'center',
+        }}
+      >
         <Grid item md>
-          <Typography variant="body2" color="text.secondary">
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+            }}
+          >
             Reset time
           </Typography>
         </Grid>
@@ -133,16 +153,23 @@ export const ReviewSpendingLimit = ({ params }: { params: NewSpendingLimitFlowPr
                         <Typography
                           data-testid="old-reset-time"
                           color="error"
-                          sx={{ textDecoration: 'line-through' }}
-                          display="inline"
                           component="span"
+                          sx={{
+                            display: 'inline',
+                            textDecoration: 'line-through',
+                          }}
                         >
                           {oldResetTime}
                         </Typography>
                         {' → '}
                       </>
                     )}
-                    <Typography display="inline" component="span">
+                    <Typography
+                      component="span"
+                      sx={{
+                        display: 'inline',
+                      }}
+                    >
                       {resetTime}
                     </Typography>
                   </>
@@ -161,7 +188,12 @@ export const ReviewSpendingLimit = ({ params }: { params: NewSpendingLimitFlowPr
       </Grid>
       {existingSpendingLimit && (
         <Alert severity="warning" sx={{ border: 'unset' }}>
-          <Typography data-testid="limit-replacement-warning" fontWeight={700}>
+          <Typography
+            data-testid="limit-replacement-warning"
+            sx={{
+              fontWeight: 700,
+            }}
+          >
             You are about to replace an existing spending limit
           </Typography>
         </Alert>
diff --git a/src/components/tx-flow/flows/NewTx/index.tsx b/src/components/tx-flow/flows/NewTx/index.tsx
index b480243925..f6a79fafd8 100644
--- a/src/components/tx-flow/flows/NewTx/index.tsx
+++ b/src/components/tx-flow/flows/NewTx/index.tsx
@@ -22,16 +22,37 @@ const NewTxFlow = () => {
 
   return (
     <Container className={css.container}>
-      <Grid container justifyContent="center">
+      <Grid
+        container
+        sx={{
+          justifyContent: 'center',
+        }}
+      >
         {/* Alignment of `TxLayout` */}
-        <Grid item xs={12} md={11} display="flex" flexDirection="column">
+        <Grid
+          item
+          xs={12}
+          md={11}
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
           <ChainIndicator inline className={css.chain} />
 
           <Grid container component={Paper}>
             <Grid item xs={12} className={css.progressBar}>
               <ProgressBar value={progress} />
             </Grid>
-            <Grid item xs={12} md={6} className={css.pane} gap={3}>
+            <Grid
+              item
+              xs={12}
+              md={6}
+              className={css.pane}
+              sx={{
+                gap: 3,
+              }}
+            >
               <div className={css.globs}>
                 <NewTxIcon />
               </div>
@@ -41,7 +62,15 @@ const NewTxFlow = () => {
               </Typography>
             </Grid>
 
-            <Grid item xs={12} md={5} className={css.pane} gap={2}>
+            <Grid
+              item
+              xs={12}
+              md={5}
+              className={css.pane}
+              sx={{
+                gap: 2,
+              }}
+            >
               <Typography variant="h4" className={css.type}>
                 Manage assets
               </Typography>
@@ -51,7 +80,13 @@ const NewTxFlow = () => {
 
               {txBuilder?.app && (
                 <>
-                  <Typography variant="h4" className={css.type} mt={3}>
+                  <Typography
+                    variant="h4"
+                    className={css.type}
+                    sx={{
+                      mt: 3,
+                    }}
+                  >
                     Interact with contracts
                   </Typography>
 
diff --git a/src/components/tx-flow/flows/NftTransfer/ReviewNftBatch.tsx b/src/components/tx-flow/flows/NftTransfer/ReviewNftBatch.tsx
index 74ac050502..e62924459b 100644
--- a/src/components/tx-flow/flows/NftTransfer/ReviewNftBatch.tsx
+++ b/src/components/tx-flow/flows/NftTransfer/ReviewNftBatch.tsx
@@ -40,9 +40,20 @@ const ReviewNftBatch = ({ params, onSubmit, txNonce }: ReviewNftBatchProps): Rea
 
   return (
     <SignOrExecuteForm onSubmit={onSubmit}>
-      <Grid container gap={1} mb={2}>
+      <Grid
+        container
+        sx={{
+          gap: 1,
+          mb: 2,
+        }}
+      >
         <Grid item md>
-          <Typography variant="body2" color="text.secondary">
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+            }}
+          >
             Send
           </Typography>
         </Grid>
@@ -51,7 +62,6 @@ const ReviewNftBatch = ({ params, onSubmit, txNonce }: ReviewNftBatchProps): Rea
           <NftItems tokens={tokens} />
         </Grid>
       </Grid>
-
       <SendToBlock address={params.recipient} />
     </SignOrExecuteForm>
   )
diff --git a/src/components/tx-flow/flows/NftTransfer/SendNftBatch.tsx b/src/components/tx-flow/flows/NftTransfer/SendNftBatch.tsx
index 9f2bb7977c..ab04d6f907 100644
--- a/src/components/tx-flow/flows/NftTransfer/SendNftBatch.tsx
+++ b/src/components/tx-flow/flows/NftTransfer/SendNftBatch.tsx
@@ -20,9 +20,21 @@ type SendNftBatchProps = {
 }
 
 const NftItem = ({ image, name, description }: { image: string; name: string; description?: string }) => (
-  <Grid container gap={2} alignItems="center" wrap="nowrap">
+  <Grid
+    container
+    wrap="nowrap"
+    sx={{
+      gap: 2,
+      alignItems: 'center',
+    }}
+  >
     <Grid item>
-      <Box width={40} height={40}>
+      <Box
+        sx={{
+          width: 40,
+          height: 40,
+        }}
+      >
         <ImageFallback
           src={image}
           fallbackSrc=""
@@ -33,14 +45,21 @@ const NftItem = ({ image, name, description }: { image: string; name: string; de
       </Box>
     </Grid>
 
-    <Grid item overflow="hidden">
+    <Grid
+      item
+      sx={{
+        overflow: 'hidden',
+      }}
+    >
       <Typography
         data-testid="nft-item-name"
         variant="body2"
-        fontWeight={700}
-        whiteSpace="nowrap"
-        overflow="hidden"
-        textOverflow="ellipsis"
+        sx={{
+          fontWeight: 700,
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}
       >
         {name}
       </Typography>
@@ -48,11 +67,13 @@ const NftItem = ({ image, name, description }: { image: string; name: string; de
       {description && (
         <Typography
           variant="body2"
-          color="text.secondary"
-          whiteSpace="nowrap"
-          display="block"
-          overflow="hidden"
-          textOverflow="ellipsis"
+          sx={{
+            color: 'text.secondary',
+            whiteSpace: 'nowrap',
+            display: 'block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
         >
           {description}
         </Typography>
@@ -65,12 +86,14 @@ export const NftItems = ({ tokens }: { tokens: SafeCollectibleResponse[] }) => {
   return (
     <Box
       data-testid="nft-item-list"
-      display="flex"
-      flexDirection="column"
-      gap={2}
-      overflow="auto"
-      maxHeight="20vh"
-      minHeight="40px"
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        overflow: 'auto',
+        maxHeight: '20vh',
+        minHeight: '40px',
+      }}
     >
       {tokens.map((token) => (
         <NftItem
@@ -116,7 +139,14 @@ const SendNftBatch = ({ params, onSubmit }: SendNftBatchProps) => {
             <AddressBookInput name={Field.recipient} canAdd={isAddressValid} />
           </FormControl>
 
-          <Typography data-testid="selected-nfts" variant="body2" color="text.secondary" mb={2}>
+          <Typography
+            data-testid="selected-nfts"
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+              mb: 2,
+            }}
+          >
             Selected NFTs
           </Typography>
 
diff --git a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx
index 71db742fce..2da5365824 100644
--- a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx
+++ b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx
@@ -111,7 +111,11 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
   return (
     <>
       <TxCard>
-        <Typography mb={1}>
+        <Typography
+          sx={{
+            mb: 1,
+          }}
+        >
           This transaction will reset the Account setup, changing the signers
           {newThreshold !== safe.threshold ? ' and threshold' : ''}.
         </Typography>
@@ -120,8 +124,18 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
 
         <Divider className={commonCss.nestedDivider} sx={{ mt: 'var(--space-2) !important' }} />
 
-        <Box my={1}>
-          <Typography variant="body2" color="text.secondary" gutterBottom>
+        <Box
+          sx={{
+            my: 1,
+          }}
+        >
+          <Typography
+            variant="body2"
+            gutterBottom
+            sx={{
+              color: 'text.secondary',
+            }}
+          >
             After recovery, Safe Account transactions will require:
           </Typography>
           <Typography>
@@ -135,9 +149,7 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
 
         <BlockaidBalanceChanges />
       </TxCard>
-
       <TxChecks executionOwner={safe.owners[0].value} />
-
       <TxCard>
         <>
           <ConfirmationTitle variant={ConfirmationTitleTypes.execute} />
diff --git a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowSetup.tsx b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowSetup.tsx
index babd3d4a0a..7514b3f512 100644
--- a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowSetup.tsx
+++ b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowSetup.tsx
@@ -87,11 +87,22 @@ export function RecoverAccountFlowSetup({
       <form onSubmit={formMethods.handleSubmit(onSubmit)} className={commonCss.form}>
         <TxCard>
           <div>
-            <Typography variant="h6" fontWeight={700} gutterBottom>
+            <Typography
+              variant="h6"
+              gutterBottom
+              sx={{
+                fontWeight: 700,
+              }}
+            >
               Add signer(s)
             </Typography>
 
-            <Typography variant="body2" mb={1}>
+            <Typography
+              variant="body2"
+              sx={{
+                mb: 1,
+              }}
+            >
               Set the new signer wallet(s) of this Safe Account and how many need to confirm a transaction before it can
               be executed.
             </Typography>
@@ -120,7 +131,15 @@ export function RecoverAccountFlowSetup({
                   />
                 </Grid>
 
-                <Grid item xs={1} display="flex" alignItems="center" justifyContent="center">
+                <Grid
+                  item
+                  xs={1}
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
                   {index > 0 && (
                     <IconButton onClick={() => remove(index)}>
                       <SvgIcon component={DeleteIcon} inheritViewBox />
@@ -143,7 +162,13 @@ export function RecoverAccountFlowSetup({
           <Divider className={commonCss.nestedDivider} />
 
           <div>
-            <Typography variant="h6" fontWeight={700} gutterBottom>
+            <Typography
+              variant="h6"
+              gutterBottom
+              sx={{
+                fontWeight: 700,
+              }}
+            >
               Threshold
               <Tooltip title={TOOLTIP_TITLES.THRESHOLD} arrow placement="top">
                 <span>
@@ -161,12 +186,25 @@ export function RecoverAccountFlowSetup({
               </Tooltip>
             </Typography>
 
-            <Typography variant="body2" mb={1}>
+            <Typography
+              variant="body2"
+              sx={{
+                mb: 1,
+              }}
+            >
               After recovery, Safe Account transactions will require:
             </Typography>
           </div>
 
-          <Grid container direction="row" alignItems="center" gap={2} mb={1}>
+          <Grid
+            container
+            direction="row"
+            sx={{
+              alignItems: 'center',
+              gap: 2,
+              mb: 1,
+            }}
+          >
             <Grid item>
               <Controller
                 control={formMethods.control}
diff --git a/src/components/tx-flow/flows/RecoveryAttempt/RecoveryAttemptReview.tsx b/src/components/tx-flow/flows/RecoveryAttempt/RecoveryAttemptReview.tsx
index 7749da18a4..c684229203 100644
--- a/src/components/tx-flow/flows/RecoveryAttempt/RecoveryAttemptReview.tsx
+++ b/src/components/tx-flow/flows/RecoveryAttempt/RecoveryAttemptReview.tsx
@@ -57,7 +57,12 @@ const RecoveryAttemptReview = ({ item }: RecoveryAttemptReviewProps) => {
   return (
     <TxCard>
       <form onSubmit={onFormSubmit}>
-        <Stack gap={3} mb={2}>
+        <Stack
+          sx={{
+            gap: 3,
+            mb: 2,
+          }}
+        >
           <Typography>Execute this transaction to finalize the recovery.</Typography>
 
           <FieldsGrid title="Initiator">
diff --git a/src/components/tx-flow/flows/RejectTx/RejectTx.tsx b/src/components/tx-flow/flows/RejectTx/RejectTx.tsx
index 5e47cc5b50..1bbd9eb96e 100644
--- a/src/components/tx-flow/flows/RejectTx/RejectTx.tsx
+++ b/src/components/tx-flow/flows/RejectTx/RejectTx.tsx
@@ -20,15 +20,25 @@ const RejectTx = ({ txNonce }: RejectTxProps): ReactElement => {
 
   return (
     <SignOrExecuteForm isBatchable={false} isRejection>
-      <Typography mb={2}>
+      <Typography
+        sx={{
+          mb: 2,
+        }}
+      >
         To reject the transaction, a separate rejection transaction will be created to replace the original one.
       </Typography>
-
-      <Typography mb={2}>
+      <Typography
+        sx={{
+          mb: 2,
+        }}
+      >
         Transaction nonce: <b>{txNonce}</b>
       </Typography>
-
-      <Typography mb={2}>
+      <Typography
+        sx={{
+          mb: 2,
+        }}
+      >
         You will need to confirm the rejection transaction with your currently connected wallet.
       </Typography>
     </SignOrExecuteForm>
diff --git a/src/components/tx-flow/flows/RemoveGuard/ReviewRemoveGuard.tsx b/src/components/tx-flow/flows/RemoveGuard/ReviewRemoveGuard.tsx
index 2b61d25a07..04b89061b4 100644
--- a/src/components/tx-flow/flows/RemoveGuard/ReviewRemoveGuard.tsx
+++ b/src/components/tx-flow/flows/RemoveGuard/ReviewRemoveGuard.tsx
@@ -28,10 +28,12 @@ export const ReviewRemoveGuard = ({ params }: { params: RemoveGuardFlowProps })
   return (
     <SignOrExecuteForm onSubmit={onFormSubmit}>
       <Typography sx={({ palette }) => ({ color: palette.primary.light })}>Transaction guard</Typography>
-
       <EthHashInfo address={params.address} showCopyButton hasExplorer shortAddress={false} />
-
-      <Typography my={2}>
+      <Typography
+        sx={{
+          my: 2,
+        }}
+      >
         Once the transaction guard has been removed, checks by the transaction guard will not be conducted before or
         after any subsequent transactions.
       </Typography>
diff --git a/src/components/tx-flow/flows/RemoveModule/ReviewRemoveModule.tsx b/src/components/tx-flow/flows/RemoveModule/ReviewRemoveModule.tsx
index 9df4ced258..e45e50994d 100644
--- a/src/components/tx-flow/flows/RemoveModule/ReviewRemoveModule.tsx
+++ b/src/components/tx-flow/flows/RemoveModule/ReviewRemoveModule.tsx
@@ -27,7 +27,13 @@ export const ReviewRemoveModule = ({ params }: { params: RemoveModuleFlowProps }
 
   return (
     <SignOrExecuteForm onSubmit={onFormSubmit}>
-      <Grid container gap={1} alignItems="center">
+      <Grid
+        container
+        sx={{
+          gap: 1,
+          alignItems: 'center',
+        }}
+      >
         <Grid item xs={2}>
           Module
         </Grid>
@@ -35,7 +41,11 @@ export const ReviewRemoveModule = ({ params }: { params: RemoveModuleFlowProps }
           <EthHashInfo address={params.address} shortAddress={false} hasExplorer showCopyButton />
         </Typography>
       </Grid>
-      <Typography my={2}>
+      <Typography
+        sx={{
+          my: 2,
+        }}
+      >
         After removing this module, any feature or app that uses this module might no longer work. If this Safe Account
         requires more then one signature, the module removal will have to be confirmed by other signers as well.
       </Typography>
diff --git a/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx b/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
index 4b15885928..2e13a1fa2e 100644
--- a/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
+++ b/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
@@ -35,7 +35,14 @@ export const ReviewRemoveOwner = ({ params }: { params: RemoveOwnerFlowProps }):
   return (
     <SignOrExecuteForm onSubmit={onFormSubmit}>
       <Paper sx={{ backgroundColor: ({ palette }) => palette.warning.background, p: 2 }}>
-        <Typography color="text.secondary" mb={2} display="flex" alignItems="center">
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            mb: 2,
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
           <SvgIcon component={MinusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
           Selected signer
         </Typography>
@@ -48,10 +55,19 @@ export const ReviewRemoveOwner = ({ params }: { params: RemoveOwnerFlowProps }):
         />
       </Paper>
       <ChangeSignerSetupWarning />
-
       <Divider className={commonCss.nestedDivider} />
-      <Box m={1}>
-        <Typography variant="body2" color="text.secondary" mb={0.5}>
+      <Box
+        sx={{
+          m: 1,
+        }}
+      >
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+            mb: 0.5,
+          }}
+        >
           Any transaction requires the confirmation of:
         </Typography>
         <Typography>
diff --git a/src/components/tx-flow/flows/RemoveOwner/SetThreshold.tsx b/src/components/tx-flow/flows/RemoveOwner/SetThreshold.tsx
index f29129a3af..389d495a9e 100644
--- a/src/components/tx-flow/flows/RemoveOwner/SetThreshold.tsx
+++ b/src/components/tx-flow/flows/RemoveOwner/SetThreshold.tsx
@@ -36,16 +36,35 @@ export const SetThreshold = ({
   return (
     <TxCard>
       <form onSubmit={onSubmitHandler}>
-        <Box mb={3}>
-          <Typography mb={2}>Review the signer you want to remove from the active Safe Account:</Typography>
+        <Box
+          sx={{
+            mb: 3,
+          }}
+        >
+          <Typography
+            sx={{
+              mb: 2,
+            }}
+          >
+            Review the signer you want to remove from the active Safe Account:
+          </Typography>
           {/* TODO: Update the EthHashInfo style from the replace owner PR */}
           <EthHashInfo address={params.removedOwner.address} shortAddress={false} showCopyButton hasExplorer />
         </Box>
 
         <Divider className={commonCss.nestedDivider} />
 
-        <Box my={3}>
-          <Typography variant="h4" fontWeight={700}>
+        <Box
+          sx={{
+            my: 3,
+          }}
+        >
+          <Typography
+            variant="h4"
+            sx={{
+              fontWeight: 700,
+            }}
+          >
             Threshold
             <Tooltip title={TOOLTIP_TITLES.THRESHOLD} arrow placement="top">
               <span>
@@ -63,7 +82,15 @@ export const SetThreshold = ({
             </Tooltip>
           </Typography>
           <Typography>Any transaction requires the confirmation of:</Typography>
-          <Grid container direction="row" alignItems="center" gap={1} mt={2}>
+          <Grid
+            container
+            direction="row"
+            sx={{
+              alignItems: 'center',
+              gap: 1,
+              mt: 2,
+            }}
+          >
             <Grid item xs={1.5}>
               <Select data-testid="threshold-selector" value={selectedThreshold} onChange={handleChange} fullWidth>
                 {safe.owners.slice(1).map((_, idx) => (
diff --git a/src/components/tx-flow/flows/RemoveRecovery/RemoveRecoveryFlowOverview.tsx b/src/components/tx-flow/flows/RemoveRecovery/RemoveRecoveryFlowOverview.tsx
index 94dd3951b4..5fc67f9028 100644
--- a/src/components/tx-flow/flows/RemoveRecovery/RemoveRecoveryFlowOverview.tsx
+++ b/src/components/tx-flow/flows/RemoveRecovery/RemoveRecoveryFlowOverview.tsx
@@ -17,13 +17,17 @@ export function RemoveRecoveryFlowOverview({
         This transaction will remove the recovery module from your Safe Account. You will no longer be able to recover
         your Safe Account.
       </Typography>
-
       <Typography variant="body2">
         This Recoverer will not be able to initiate the recovery process once this transaction is executed.
       </Typography>
-
       <div data-testid="remove-recoverer-section">
-        <Typography variant="body2" color="text.secondary" mb={1}>
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+            mb: 1,
+          }}
+        >
           Removing Recoverer
         </Typography>
 
@@ -38,9 +42,7 @@ export function RemoveRecoveryFlowOverview({
           />
         ))}
       </div>
-
       <Divider className={commonCss.nestedDivider} />
-
       <CardActions sx={{ mt: '0 !important' }}>
         <Button data-testid="next-btn" variant="contained" onClick={onSubmit}>
           Next
diff --git a/src/components/tx-flow/flows/RemoveSpendingLimit/RemoveSpendingLimit.tsx b/src/components/tx-flow/flows/RemoveSpendingLimit/RemoveSpendingLimit.tsx
index 4889c4c475..d12c0a9f44 100644
--- a/src/components/tx-flow/flows/RemoveSpendingLimit/RemoveSpendingLimit.tsx
+++ b/src/components/tx-flow/flows/RemoveSpendingLimit/RemoveSpendingLimit.tsx
@@ -50,10 +50,20 @@ export const RemoveSpendingLimit = ({ params }: { params: SpendingLimitState })
   return (
     <SignOrExecuteForm onSubmit={onFormSubmit}>
       {token && <SendAmountBlock amountInWei={amountInWei} tokenInfo={token.tokenInfo} title="Amount" />}
-
-      <Grid container gap={1} alignItems="center">
+      <Grid
+        container
+        sx={{
+          gap: 1,
+          alignItems: 'center',
+        }}
+      >
         <Grid item md>
-          <Typography variant="body2" color="text.secondary">
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+            }}
+          >
             Beneficiary
           </Typography>
         </Grid>
@@ -67,10 +77,20 @@ export const RemoveSpendingLimit = ({ params }: { params: SpendingLimitState })
           />
         </Grid>
       </Grid>
-
-      <Grid container gap={1} alignItems="center">
+      <Grid
+        container
+        sx={{
+          gap: 1,
+          alignItems: 'center',
+        }}
+      >
         <Grid item md>
-          <Typography variant="body2" color="text.secondary">
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+            }}
+          >
             Reset time
           </Typography>
         </Grid>
diff --git a/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx b/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
index 0bfa985221..5c35127192 100644
--- a/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
+++ b/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
@@ -37,7 +37,14 @@ type DeleteTxModalProps = {
   safeAddress: ReturnType<typeof useSafeAddress>
 }
 
-const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, wallet, safeAddress, chainId }: DeleteTxModalProps) => {
+const InternalDeleteTxModal = ({
+  safeTxHash,
+  onSuccess,
+  onClose,
+  wallet,
+  safeAddress,
+  chainId,
+}: DeleteTxModalProps) => {
   const [error, setError] = useState<Error>()
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
@@ -83,13 +90,31 @@ const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, wallet, safeAddress, c
   return (
     <Dialog open onClose={onClose}>
       <DialogTitle>
-        <Box data-testid="untrusted-token-warning" display="flex" alignItems="center">
-          <Typography variant="h6" fontWeight={700} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Box
+          data-testid="untrusted-token-warning"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <Typography
+            variant="h6"
+            sx={{
+              fontWeight: 700,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+            }}
+          >
             <SvgIcon component={InfoIcon} inheritViewBox color="error" />
             Delete this transaction?
           </Typography>
 
-          <Box flexGrow={1} />
+          <Box
+            sx={{
+              flexGrow: 1,
+            }}
+          />
 
           <ChainIndicator chainId={chainId} />
 
@@ -98,16 +123,18 @@ const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, wallet, safeAddress, c
           </IconButton>
         </Box>
       </DialogTitle>
-
       <Divider />
-
       <DialogContent>
         <Box>
           Are you sure you want to delete this transaction? This will permanently remove it from the queue but the
           already given signatures will remain valid.
         </Box>
 
-        <Box mt={2}>
+        <Box
+          sx={{
+            mt: 2,
+          }}
+        >
           Make sure that you are aware of the{' '}
           <ExternalLink href="https://help.safe.global/en/articles/40836-why-do-i-need-to-pay-for-cancelling-a-transaction">
             potential risks
@@ -116,14 +143,16 @@ const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, wallet, safeAddress, c
         </Box>
 
         {error && (
-          <Box mt={2}>
+          <Box
+            sx={{
+              mt: 2,
+            }}
+          >
             <ErrorMessage error={error}>Error deleting transaction</ErrorMessage>
           </Box>
         )}
       </DialogContent>
-
       <Divider />
-
       <DialogActions sx={{ padding: 3, justifyContent: 'space-between' }}>
         <Button size="small" variant="text" onClick={onCancel}>
           Keep it
@@ -145,7 +174,7 @@ const _DeleteTxModal = ({ safeTxHash, onSuccess, onClose, wallet, safeAddress, c
   )
 }
 
-const DeleteTxModal = madProps(_DeleteTxModal, {
+const DeleteTxModal = madProps(InternalDeleteTxModal, {
   wallet: useWallet,
   chainId: useChainId,
   safeAddress: useSafeAddress,
diff --git a/src/components/tx-flow/flows/ReplaceTx/index.tsx b/src/components/tx-flow/flows/ReplaceTx/index.tsx
index 469dc6304b..8f3978cda0 100644
--- a/src/components/tx-flow/flows/ReplaceTx/index.tsx
+++ b/src/components/tx-flow/flows/ReplaceTx/index.tsx
@@ -71,11 +71,14 @@ const DeleteTxButton = ({
       <Typography variant="overline" className={css.or}>
         or
       </Typography>
-
-      <Typography variant="body2" mb={0.5}>
+      <Typography
+        variant="body2"
+        sx={{
+          mb: 0.5,
+        }}
+      >
         Don’t want to have this transaction anymore? Remove it permanently from the queue.
       </Typography>
-
       <Tooltip
         arrow
         placement="top"
@@ -94,7 +97,6 @@ const DeleteTxButton = ({
           </Track>
         </span>
       </Tooltip>
-
       {safeTxHash && isDeleting && (
         <DeleteTxModal onSuccess={onDeleteSuccess} onClose={onDeleteClose} safeTxHash={safeTxHash} />
       )}
@@ -124,11 +126,22 @@ const ReplaceTxMenu = ({
   return (
     <TxLayout title={`Reject transaction #${txNonce}`} step={0} hideNonce isReplacement>
       <TxCard>
-        <Box mt={2} textAlign="center">
+        <Box
+          sx={{
+            mt: 2,
+            textAlign: 'center',
+          }}
+        >
           <ReplaceTxIcon />
         </Box>
 
-        <Typography variant="body2" mt={-1} mb={1}>
+        <Typography
+          variant="body2"
+          sx={{
+            mt: -1,
+            mb: 1,
+          }}
+        >
           You can replace or reject this transaction on-chain. It requires gas fees and your signature.{' '}
           <Track {...REJECT_TX_EVENTS.READ_MORE}>
             <ExternalLink href="https://help.safe.global/en/articles/40836-why-do-i-need-to-pay-for-cancelling-a-transaction">
@@ -137,7 +150,13 @@ const ReplaceTxMenu = ({
           </Track>
         </Typography>
 
-        <Box display="flex" flexDirection="column" gap={2}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+          }}
+        >
           <Track {...REJECT_TX_EVENTS.REPLACE_TX_BUTTON} as="div">
             <ChoiceButton
               icon={CachedIcon}
diff --git a/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx b/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx
index 0699137ea8..5139f253e6 100644
--- a/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx
+++ b/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx
@@ -394,7 +394,7 @@ describe('SignMessage', () => {
       () =>
         ({
           address: zeroPadValue('0x07', 20),
-        } as ConnectedWallet),
+        }) as ConnectedWallet,
     )
     jest.spyOn(useIsSafeOwnerHook, 'default').mockImplementation(() => false)
     jest.spyOn(useSafeMessage, 'default').mockImplementation(() => [undefined, jest.fn(), undefined])
@@ -423,7 +423,7 @@ describe('SignMessage', () => {
       () =>
         ({
           address: zeroPadValue('0x02', 20),
-        } as ConnectedWallet),
+        }) as ConnectedWallet,
     )
     const messageText = 'Hello world!'
     const messageHash = generateSafeMessageHash(
@@ -469,7 +469,7 @@ describe('SignMessage', () => {
       () =>
         ({
           address: zeroPadValue('0x03', 20),
-        } as ConnectedWallet),
+        }) as ConnectedWallet,
     )
 
     jest.spyOn(useSafeMessage, 'default').mockReturnValue([undefined, jest.fn(), undefined])
@@ -511,7 +511,7 @@ describe('SignMessage', () => {
       () =>
         ({
           address: zeroPadValue('0x03', 20),
-        } as ConnectedWallet),
+        }) as ConnectedWallet,
     )
 
     const messageText = 'Hello world!'
@@ -575,7 +575,7 @@ describe('SignMessage', () => {
       () =>
         ({
           address: zeroPadValue('0x03', 20),
-        } as ConnectedWallet),
+        }) as ConnectedWallet,
     )
 
     const messageText = 'Hello world!'
diff --git a/src/components/tx-flow/flows/SignMessage/SignMessage.tsx b/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
index a976e23a7b..6cabafcd38 100644
--- a/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
+++ b/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
@@ -79,7 +79,13 @@ const createSkeletonMessage = (confirmationsRequired: number): SafeMessage => {
 
 const MessageHashField = ({ label, hashValue }: { label: string; hashValue: string }) => (
   <>
-    <Typography variant="body2" fontWeight={700} mt={2}>
+    <Typography
+      variant="body2"
+      sx={{
+        fontWeight: 700,
+        mt: 2,
+      }}
+    >
       {label}:
     </Typography>
     <Typography data-testid="message-hash" variant="body2" component="div">
@@ -90,14 +96,31 @@ const MessageHashField = ({ label, hashValue }: { label: string; hashValue: stri
 
 const DialogHeader = ({ threshold }: { threshold: number }) => (
   <>
-    <Box textAlign="center" mb={2}>
+    <Box
+      sx={{
+        textAlign: 'center',
+        mb: 2,
+      }}
+    >
       <SvgIcon component={RequiredIcon} viewBox="0 0 32 32" fontSize="large" />
     </Box>
-    <Typography variant="h4" textAlign="center" gutterBottom>
+    <Typography
+      variant="h4"
+      gutterBottom
+      sx={{
+        textAlign: 'center',
+      }}
+    >
       Confirm message
     </Typography>
     {threshold > 1 && (
-      <Typography variant="body1" textAlign="center" mb={2}>
+      <Typography
+        variant="body1"
+        sx={{
+          textAlign: 'center',
+          mb: 2,
+        }}
+      >
         To sign this message, collect signatures from <b>{threshold} signers</b> of your Safe Account.
       </Typography>
     )}
@@ -112,12 +135,12 @@ const MessageDialogError = ({ isOwner, submitError }: { isOwner: boolean; submit
     !wallet || !onboard
       ? 'No wallet is connected.'
       : !isOwner
-      ? "You are currently not a signer of this Safe Account and won't be able to confirm this message."
-      : submitError && isWalletRejection(submitError)
-      ? 'User rejected signing.'
-      : submitError
-      ? 'Error confirming the message. Please try again.'
-      : null
+        ? "You are currently not a signer of this Safe Account and won't be able to confirm this message."
+        : submitError && isWalletRejection(submitError)
+          ? 'User rejected signing.'
+          : submitError
+            ? 'Error confirming the message. Please try again.'
+            : null
 
   if (errorMessage) {
     return <ErrorMessage>{errorMessage}</ErrorMessage>
@@ -138,7 +161,13 @@ const AlreadySignedByOwnerMessage = ({ hasSigned }: { hasSigned: boolean }) => {
   }
   return (
     <SuccessMessage>
-      <Grid container direction="row" justifyContent="space-between">
+      <Grid
+        container
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+        }}
+      >
         <Grid item xs={7}>
           Your connected wallet has already signed this message.
         </Grid>
@@ -192,10 +221,15 @@ const BlindSigningWarning = ({
 const SuccessCard = ({ safeMessage, onContinue }: { safeMessage: SafeMessage; onContinue: () => void }) => {
   return (
     <TxCard>
-      <Typography variant="h4" textAlign="center" gutterBottom>
+      <Typography
+        variant="h4"
+        gutterBottom
+        sx={{
+          textAlign: 'center',
+        }}
+      >
         Message successfully signed
       </Typography>
-
       <MsgSigners msg={safeMessage} showOnlyConfirmations showMissingSignatures />
       <CardActions>
         <Button variant="contained" color="primary" onClick={onContinue} disabled={!safeMessage.preparedSignature}>
@@ -301,7 +335,13 @@ const SignMessage = ({ message, safeAppId, requestId }: ProposeProps | ConfirmPr
             isBlindSigningPayload={isBlindSigningRequest}
           />
 
-          <Typography fontWeight={700} mt={2} mb={1}>
+          <Typography
+            sx={{
+              fontWeight: 700,
+              mt: 2,
+              mb: 1,
+            }}
+          >
             Message: <CopyButton text={decodedMessageAsString} />
           </Typography>
           <DecodedMsg message={decodedMessage} isInModal />
@@ -321,7 +361,6 @@ const SignMessage = ({ message, safeAppId, requestId }: ProposeProps | ConfirmPr
           </Box>
         </CardContent>
       </TxCard>
-
       {isFullySigned ? (
         <SuccessCard onContinue={onContinue} safeMessage={safeMessage} />
       ) : (
@@ -350,7 +389,11 @@ const SignMessage = ({ message, safeAppId, requestId }: ProposeProps | ConfirmPr
                 title="Share the link with other owners"
                 message={
                   <>
-                    <Typography mb={2}>
+                    <Typography
+                      sx={{
+                        mb: 2,
+                      }}
+                    >
                       The owners will receive a notification about signing the message. You can also share the link with
                       them to speed up the process.
                     </Typography>
diff --git a/src/components/tx-flow/flows/SignMessage/index.tsx b/src/components/tx-flow/flows/SignMessage/index.tsx
index 6c608ba339..b30c6d2063 100644
--- a/src/components/tx-flow/flows/SignMessage/index.tsx
+++ b/src/components/tx-flow/flows/SignMessage/index.tsx
@@ -38,9 +38,20 @@ export const AppTitle = ({
   }
 
   return (
-    <Box display="flex" alignItems="center">
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
       <SafeAppIconCard src={appLogo} alt={name || 'The icon of the application'} width={32} height={32} />
-      <Typography variant="h4" pl={2} fontWeight="bold">
+      <Typography
+        variant="h4"
+        sx={{
+          pl: 2,
+          fontWeight: 'bold',
+        }}
+      >
         {title}
       </Typography>
     </Box>
diff --git a/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.test.tsx b/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.test.tsx
index a874915640..13101e0591 100644
--- a/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.test.tsx
+++ b/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.test.tsx
@@ -7,7 +7,7 @@ import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sd
 import { SafeAppAccessPolicyTypes } from '@safe-global/safe-gateway-typescript-sdk'
 import ReviewSignMessageOnChain from '@/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain'
 import { JsonRpcProvider, zeroPadValue } from 'ethers'
-import { act } from '@testing-library/react'
+import { act } from 'react'
 import type { SafeTxContextParams } from '../../SafeTxProvider'
 import { SafeTxContext } from '../../SafeTxProvider'
 import { createSafeTx } from '@/tests/builders/safeTx'
@@ -33,7 +33,7 @@ describe('ReviewSignMessageOnChain', () => {
             },
             version: '1.3.0',
           } as ReturnType<typeof useSafeInfo.default>['safe'],
-        } as ReturnType<typeof useSafeInfo.default>),
+        }) as ReturnType<typeof useSafeInfo.default>,
     )
 
     await act(async () => {
diff --git a/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx b/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx
index 1cc055aa17..4ec58b07a3 100644
--- a/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx
+++ b/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx
@@ -120,35 +120,51 @@ const ReviewSignMessageOnChain = ({ message, method, requestId }: SignMessageOnC
   return (
     <SignOrExecuteForm onSubmit={handleSubmit}>
       <SendFromBlock />
-
       <InfoDetails title="Interact with SignMessageLib">
         <EthHashInfo address={signMessageAddress} shortAddress={false} showCopyButton hasExplorer />
       </InfoDetails>
-
       {isEIP712TypedData(decodedMessage) && (
         <ErrorBoundary fallback={<div>Error parsing data</div>}>
           <ApprovalEditor safeMessage={decodedMessage} />
         </ErrorBoundary>
       )}
-
       {safeTx && (
-        <Box pb={1}>
+        <Box
+          sx={{
+            pb: 1,
+          }}
+        >
           <HexEncodedData title="Data (hex-encoded)" hexData={safeTx.data.data} />
         </Box>
       )}
-
-      <Typography my={1}>
+      <Typography
+        sx={{
+          my: 1,
+        }}
+      >
         <b>Signing method:</b> <code>{method}</code>
       </Typography>
-
-      <Typography my={2}>
+      <Typography
+        sx={{
+          my: 2,
+        }}
+      >
         <b>Signing message:</b> {readableMessage && <CopyButton text={readableMessage} />}
       </Typography>
       <DecodedMsg message={decodedMessage} isInModal />
-
-      <Box display="flex" alignItems="center" my={2}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          my: 2,
+        }}
+      >
         <SvgIcon component={WarningIcon} inheritViewBox color="warning" />
-        <Typography ml={1}>
+        <Typography
+          sx={{
+            ml: 1,
+          }}
+        >
           Signing a message with your Safe Account requires a transaction on the blockchain
         </Typography>
       </Box>
diff --git a/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx b/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx
index e53e1f7a56..c3c8f9c5bd 100644
--- a/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx
@@ -37,9 +37,21 @@ const StatusMessage = ({ status, error }: { status: PendingStatus; error?: Error
 
   return (
     <>
-      <Box paddingX={3} mt={3}>
+      <Box
+        sx={{
+          paddingX: 3,
+          mt: 3,
+        }}
+      >
         <LoadingSpinner status={spinnerStatus} />
-        <Typography data-testid="transaction-status" variant="h6" marginTop={2} fontWeight={700}>
+        <Typography
+          data-testid="transaction-status"
+          variant="h6"
+          sx={{
+            marginTop: 2,
+            fontWeight: 700,
+          }}
+        >
           {stepInfo.description}
         </Typography>
       </Box>
diff --git a/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx b/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx
index 6952955195..f6196b7962 100644
--- a/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx
@@ -17,7 +17,12 @@ const StatusStepper = ({ status, txHash }: { status?: PendingStatus; txHash?: st
       <Step>
         <StatusStep isLoading={!isProcessing} safeAddress={safeAddress}>
           <Box>
-            <Typography variant="body2" fontWeight="700">
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: '700',
+              }}
+            >
               Your transaction
             </Typography>
             {txHash && (
@@ -36,7 +41,12 @@ const StatusStepper = ({ status, txHash }: { status?: PendingStatus; txHash?: st
       <Step>
         <StatusStep isLoading={!isProcessed} safeAddress={safeAddress}>
           <Box>
-            <Typography variant="body2" fontWeight="700">
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: '700',
+              }}
+            >
               {isProcessed ? 'Processed' : 'Processing'}
             </Typography>
           </Box>
@@ -44,14 +54,24 @@ const StatusStepper = ({ status, txHash }: { status?: PendingStatus; txHash?: st
       </Step>
       <Step>
         <StatusStep isLoading={!isSuccess} safeAddress={safeAddress}>
-          <Typography variant="body2" fontWeight="700">
+          <Typography
+            variant="body2"
+            sx={{
+              fontWeight: '700',
+            }}
+          >
             {isSuccess ? 'Indexed' : 'Indexing'}
           </Typography>
         </StatusStep>
       </Step>
       <Step>
         <StatusStep isLoading={!isSuccess} safeAddress={safeAddress}>
-          <Typography variant="body2" fontWeight="700">
+          <Typography
+            variant="body2"
+            sx={{
+              fontWeight: '700',
+            }}
+          >
             Transaction is executed
           </Typography>
         </StatusStep>
diff --git a/src/components/tx-flow/flows/SuccessScreen/statuses/DefaultStatus.tsx b/src/components/tx-flow/flows/SuccessScreen/statuses/DefaultStatus.tsx
index 45fae9fda9..f0c47c9fd3 100644
--- a/src/components/tx-flow/flows/SuccessScreen/statuses/DefaultStatus.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/statuses/DefaultStatus.tsx
@@ -10,8 +10,20 @@ type Props = {
   error: undefined | Error
 }
 export const DefaultStatus = ({ error }: Props) => (
-  <Box paddingX={3} mt={3}>
-    <Typography data-testid="transaction-status" variant="h6" marginTop={2} fontWeight={700}>
+  <Box
+    sx={{
+      paddingX: 3,
+      mt: 3,
+    }}
+  >
+    <Typography
+      data-testid="transaction-status"
+      variant="h6"
+      sx={{
+        marginTop: 2,
+        fontWeight: 700,
+      }}
+    >
       {error ? TRANSACTION_FAILED : TRANSACTION_SUCCESSFUL}
     </Typography>
     {error && (
diff --git a/src/components/tx-flow/flows/SuccessScreen/statuses/IndexingStatus.tsx b/src/components/tx-flow/flows/SuccessScreen/statuses/IndexingStatus.tsx
index 088f7cf31c..36e195a0de 100644
--- a/src/components/tx-flow/flows/SuccessScreen/statuses/IndexingStatus.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/statuses/IndexingStatus.tsx
@@ -3,8 +3,20 @@ import classNames from 'classnames'
 import css from '@/components/tx-flow/flows/SuccessScreen/styles.module.css'
 
 export const IndexingStatus = () => (
-  <Box paddingX={3} mt={3}>
-    <Typography data-testid="transaction-status" variant="h6" marginTop={2} fontWeight={700}>
+  <Box
+    sx={{
+      paddingX: 3,
+      mt: 3,
+    }}
+  >
+    <Typography
+      data-testid="transaction-status"
+      variant="h6"
+      sx={{
+        marginTop: 2,
+        fontWeight: 700,
+      }}
+    >
       Transaction was processed
     </Typography>
     <Box className={classNames(css.instructions, css.infoBg)}>
diff --git a/src/components/tx-flow/flows/SuccessScreen/statuses/ProcessingStatus.tsx b/src/components/tx-flow/flows/SuccessScreen/statuses/ProcessingStatus.tsx
index 5c94c74f81..86c97c8918 100644
--- a/src/components/tx-flow/flows/SuccessScreen/statuses/ProcessingStatus.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/statuses/ProcessingStatus.tsx
@@ -8,11 +8,28 @@ type Props = {
   pendingTx: PendingTx
 }
 export const ProcessingStatus = ({ txId, pendingTx }: Props) => (
-  <Box paddingX={3} mt={3}>
-    <Typography data-testid="transaction-status" variant="h6" marginTop={2} fontWeight={700}>
+  <Box
+    sx={{
+      paddingX: 3,
+      mt: 3,
+    }}
+  >
+    <Typography
+      data-testid="transaction-status"
+      variant="h6"
+      sx={{
+        marginTop: 2,
+        fontWeight: 700,
+      }}
+    >
       Transaction is now processing
     </Typography>
-    <Typography variant="body2" mb={3}>
+    <Typography
+      variant="body2"
+      sx={{
+        mb: 3,
+      }}
+    >
       The transaction was confirmed and is now being processed.
     </Typography>
     <Box>
diff --git a/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx b/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
index 4b5c18b3f0..14b8c4eeb8 100644
--- a/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
+++ b/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
@@ -15,11 +15,22 @@ import TokenAmountInput from '@/components/common/TokenAmountInput'
 import { SafeTxContext } from '@/components/tx-flow/SafeTxProvider'
 
 export const AutocompleteItem = (item: { tokenInfo: TokenInfo; balance: string }): ReactElement => (
-  <Grid container alignItems="center" gap={1}>
+  <Grid
+    container
+    sx={{
+      alignItems: 'center',
+      gap: 1,
+    }}
+  >
     <TokenIcon logoUri={item.tokenInfo.logoUri} key={item.tokenInfo.address} tokenSymbol={item.tokenInfo.symbol} />
 
     <Grid item xs>
-      <Typography variant="body2" whiteSpace="normal">
+      <Typography
+        variant="body2"
+        sx={{
+          whiteSpace: 'normal',
+        }}
+      >
         {item.tokenInfo.name}
       </Typography>
 
@@ -56,8 +67,8 @@ export const CreateTokenTransfer = ({
       [TokenTransferFields.type]: disableSpendingLimit
         ? TokenTransferType.multiSig
         : isOnlySpendingLimitBeneficiary
-        ? TokenTransferType.spendingLimit
-        : params.type,
+          ? TokenTransferType.spendingLimit
+          : params.type,
       [TokenTransferFields.tokenAddress]: isOnlySpendingLimitBeneficiary
         ? balancesItems[0]?.tokenInfo.address
         : params.tokenAddress,
diff --git a/src/components/tx-flow/flows/TokenTransfer/ReviewSpendingLimitTx.tsx b/src/components/tx-flow/flows/TokenTransfer/ReviewSpendingLimitTx.tsx
index 80f51861f4..7551b40aa7 100644
--- a/src/components/tx-flow/flows/TokenTransfer/ReviewSpendingLimitTx.tsx
+++ b/src/components/tx-flow/flows/TokenTransfer/ReviewSpendingLimitTx.tsx
@@ -147,7 +147,13 @@ const ReviewSpendingLimitTx = ({
 
         {isRejectedByUser && <WalletRejectionError />}
 
-        <Typography variant="body2" color="primary.light" textAlign="center">
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'primary.light',
+            textAlign: 'center',
+          }}
+        >
           You&apos;re about to create a transaction and will need to confirm it with your currently connected wallet.
         </Typography>
 
diff --git a/src/components/tx-flow/flows/TokenTransfer/SendAmountBlock.tsx b/src/components/tx-flow/flows/TokenTransfer/SendAmountBlock.tsx
index 4e1e0171b6..6cc22ea22b 100644
--- a/src/components/tx-flow/flows/TokenTransfer/SendAmountBlock.tsx
+++ b/src/components/tx-flow/flows/TokenTransfer/SendAmountBlock.tsx
@@ -19,10 +19,22 @@ const SendAmountBlock = ({
 }) => {
   return (
     <FieldsGrid title={title}>
-      <Box display="flex" alignItems="center" gap={1}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+        }}
+      >
         <TokenIcon logoUri={tokenInfo.logoUri} tokenSymbol={tokenInfo.symbol} />
 
-        <Typography fontWeight="bold">{tokenInfo.symbol}</Typography>
+        <Typography
+          sx={{
+            fontWeight: 'bold',
+          }}
+        >
+          {tokenInfo.symbol}
+        </Typography>
 
         {children}
 
diff --git a/src/components/tx-flow/flows/UpdateSafe/UpdateSafeReview.tsx b/src/components/tx-flow/flows/UpdateSafe/UpdateSafeReview.tsx
index 4fe31a6fda..fa383af145 100644
--- a/src/components/tx-flow/flows/UpdateSafe/UpdateSafeReview.tsx
+++ b/src/components/tx-flow/flows/UpdateSafe/UpdateSafeReview.tsx
@@ -29,23 +29,36 @@ export const UpdateSafeReview = () => {
 
   return (
     <SignOrExecuteForm>
-      <Typography mb={2}>
+      <Typography
+        sx={{
+          mb: 2,
+        }}
+      >
         Update now to take advantage of new features and the highest security standards available.
       </Typography>
-
-      <Typography mb={2}>
+      <Typography
+        sx={{
+          mb: 2,
+        }}
+      >
         To check details about updates added by this smart contract version please visit{' '}
         <ExternalLink href={`https://github.com/safe-global/safe-contracts/releases/tag/v${latestSafeVersion}`}>
           latest Safe Account contracts changelog
         </ExternalLink>
       </Typography>
-
-      <Typography mb={2}>
+      <Typography
+        sx={{
+          mb: 2,
+        }}
+      >
         You will need to confirm this update just like any other transaction. This means other signers will have to
         confirm the update in case more than one confirmation is required for this Safe Account.
       </Typography>
-
-      <Typography mb={2}>
+      <Typography
+        sx={{
+          mb: 2,
+        }}
+      >
         <b>Warning:</b> this upgrade will invalidate all unexecuted transactions. This means you will be unable to
         access or execute them after the upgrade. Please make sure to execute any remaining transactions before
         upgrading.
diff --git a/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowIntro.tsx b/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowIntro.tsx
index 0b23515ff1..0871cd5839 100644
--- a/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowIntro.tsx
+++ b/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowIntro.tsx
@@ -38,15 +38,33 @@ const RecoverySteps = [
 export function UpsertRecoveryFlowIntro({ onSubmit }: { onSubmit: () => void }): ReactElement {
   return (
     <TxCard>
-      <Grid container display="flex" gap={4} className={css.connector}>
+      <Grid
+        container
+        className={css.connector}
+        sx={{
+          display: 'flex',
+          gap: 4,
+        }}
+      >
         {RecoverySteps.map(({ Icon, title, subtitle }, index) => (
           <Grid item xs={12} key={index}>
-            <Grid container display="flex" gap={3}>
+            <Grid
+              container
+              sx={{
+                display: 'flex',
+                gap: 3,
+              }}
+            >
               <Grid item className={css.icon}>
                 <Icon />
               </Grid>
               <Grid item xs>
-                <Typography variant="h5" mb={0.5}>
+                <Typography
+                  variant="h5"
+                  sx={{
+                    mb: 0.5,
+                  }}
+                >
                   {title}
                 </Typography>
                 <Typography variant="body2">{subtitle}</Typography>
@@ -55,9 +73,7 @@ export function UpsertRecoveryFlowIntro({ onSubmit }: { onSubmit: () => void }):
           </Grid>
         ))}
       </Grid>
-
       <Divider className={commonCss.nestedDivider} />
-
       <CardActions sx={{ mt: 'var(--space-1) !important' }}>
         <Button data-testid="next-btn" variant="contained" onClick={onSubmit}>
           Next
diff --git a/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx b/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx
index 62a549bf58..430e996b83 100644
--- a/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx
+++ b/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx
@@ -154,7 +154,12 @@ export function UpsertRecoveryFlowSettings({
                 recovery proposal when it is not needed or wanted during this period.
               </Typography>
             </div>
-            <Box display="flex" gap={2}>
+            <Box
+              sx={{
+                display: 'flex',
+                gap: 2,
+              }}
+            >
               <Controller
                 control={formMethods.control}
                 name={UpsertRecoveryFlowFields.selectedDelay}
@@ -175,7 +180,15 @@ export function UpsertRecoveryFlowSettings({
                   </TextField>
                 )}
               />
-              <Box display="flex" flex="1" gap={2} sx={{ maxWidth: '180px', minWidth: '140px' }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flex: '1',
+                  gap: 2,
+                  maxWidth: '180px',
+                  minWidth: '140px',
+                }}
+              >
                 {isCustomDelaySelected(selectedDelay) && (
                   <>
                     <Controller
@@ -193,7 +206,13 @@ export function UpsertRecoveryFlowSettings({
                         />
                       )}
                     />
-                    <Typography my="auto">days.</Typography>
+                    <Typography
+                      sx={{
+                        my: 'auto',
+                      }}
+                    >
+                      days.
+                    </Typography>
                   </>
                 )}
               </Box>
@@ -224,7 +243,12 @@ export function UpsertRecoveryFlowSettings({
                   </Tooltip>
                 </Typography>
 
-                <Typography variant="body2" mb={2}>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    mb: 2,
+                  }}
+                >
                   Set a period of time after which the recovery proposal will expire and can no longer be executed.
                 </Typography>
               </div>
diff --git a/src/components/tx-flow/flows/UpsertRecovery/useRecoveryPeriods.ts b/src/components/tx-flow/flows/UpsertRecovery/useRecoveryPeriods.ts
index dd7fcc026f..87dabc62d5 100644
--- a/src/components/tx-flow/flows/UpsertRecovery/useRecoveryPeriods.ts
+++ b/src/components/tx-flow/flows/UpsertRecovery/useRecoveryPeriods.ts
@@ -82,7 +82,7 @@ export function useRecoveryPeriods(): { delay: Periods; expiration: Periods } {
   const isTestChain = chain && [chains.gor, chains.sep].includes(chain.chainId)
 
   // TODO: Remove constant before release
-  // eslint-disable-next-line no-constant-condition
+
   if (isTestChain) {
     return {
       delay: TestRecoveryDelayPeriods,
diff --git a/src/components/tx-flow/index.tsx b/src/components/tx-flow/index.tsx
index 5927f3796e..f1895a350a 100644
--- a/src/components/tx-flow/index.tsx
+++ b/src/components/tx-flow/index.tsx
@@ -8,7 +8,7 @@ import useChainId from '@/hooks/useChainId'
 const noop = () => {}
 
 export type TxModalContextType = {
-  txFlow: JSX.Element | undefined
+  txFlow: ReactElement | undefined
   setTxFlow: (txFlow: TxModalContextType['txFlow'], onClose?: () => void, shouldWarn?: boolean) => void
   setFullWidth: (fullWidth: boolean) => void
 }
diff --git a/src/components/tx/AdvancedParams/AdvancedParamsForm.tsx b/src/components/tx/AdvancedParams/AdvancedParamsForm.tsx
index a01ea2c64a..1f341649a7 100644
--- a/src/components/tx/AdvancedParams/AdvancedParamsForm.tsx
+++ b/src/components/tx/AdvancedParams/AdvancedParamsForm.tsx
@@ -4,7 +4,7 @@ import { FormProvider, useForm } from 'react-hook-form'
 import { safeFormatUnits, safeParseUnits } from '@/utils/formatters'
 import { FLOAT_REGEX } from '@/utils/validation'
 import ModalDialog from '@/components/common/ModalDialog'
-import { AdvancedField, type AdvancedParameters } from './types.d'
+import { AdvancedField, type AdvancedParameters } from './types'
 import GasLimitInput from './GasLimitInput'
 import ExternalLink from '@/components/common/ExternalLink'
 import NumberField from '@/components/common/NumberField'
@@ -73,7 +73,12 @@ const AdvancedParamsForm = ({ params, ...props }: AdvancedParamsFormProps) => {
           <DialogContent>
             <Grid container spacing={2}>
               <Grid item xs={12}>
-                <Typography variant="body1" fontWeight={700}>
+                <Typography
+                  variant="body1"
+                  sx={{
+                    fontWeight: 700,
+                  }}
+                >
                   Execution parameters
                 </Typography>
               </Grid>
@@ -128,7 +133,11 @@ const AdvancedParamsForm = ({ params, ...props }: AdvancedParamsFormProps) => {
             </Grid>
 
             {/* Help link */}
-            <Typography mt={2}>
+            <Typography
+              sx={{
+                mt: 2,
+              }}
+            >
               <ExternalLink href={HelpCenterArticle.ADVANCED_PARAMS}>
                 How can I configure these parameters manually?
               </ExternalLink>
diff --git a/src/components/tx/AdvancedParams/GasLimitInput.tsx b/src/components/tx/AdvancedParams/GasLimitInput.tsx
index a1ae14fac2..56f35ab020 100644
--- a/src/components/tx/AdvancedParams/GasLimitInput.tsx
+++ b/src/components/tx/AdvancedParams/GasLimitInput.tsx
@@ -3,7 +3,7 @@ import { FormControl, IconButton, Tooltip } from '@mui/material'
 import RotateLeftIcon from '@mui/icons-material/RotateLeft'
 import { useFormContext } from 'react-hook-form'
 import { BASE_TX_GAS } from '@/config/constants'
-import { AdvancedField } from './types.d'
+import { AdvancedField } from './types'
 import NumberField from '@/components/common/NumberField'
 
 const GasLimitInput = ({ recommendedGasLimit }: { recommendedGasLimit?: string }) => {
diff --git a/src/components/tx/AdvancedParams/index.tsx b/src/components/tx/AdvancedParams/index.tsx
index f50ef914da..c5d60f46f1 100644
--- a/src/components/tx/AdvancedParams/index.tsx
+++ b/src/components/tx/AdvancedParams/index.tsx
@@ -61,4 +61,4 @@ export default AdvancedParams
 
 export * from './useAdvancedParams'
 
-export * from './types.d'
+export * from './types'
diff --git a/src/components/tx/AdvancedParams/types.d.ts b/src/components/tx/AdvancedParams/types.ts
similarity index 57%
rename from src/components/tx/AdvancedParams/types.d.ts
rename to src/components/tx/AdvancedParams/types.ts
index bb1a68248b..bea205e4fc 100644
--- a/src/components/tx/AdvancedParams/types.d.ts
+++ b/src/components/tx/AdvancedParams/types.ts
@@ -1,3 +1,6 @@
+// import type {BigNumberish, BigNumber}    from 'ethers'
+// import { type BigNumber } from '@ethersproject/bignumber'
+
 export enum AdvancedField {
   nonce = 'nonce',
   userNonce = 'userNonce',
@@ -10,8 +13,8 @@ export enum AdvancedField {
 export type AdvancedParameters = Partial<{
   [AdvancedField.nonce]: number
   [AdvancedField.userNonce]: number
-  [AdvancedField.gasLimit]: BigNumber
-  [AdvancedField.maxFeePerGas]: BigNumber
-  [AdvancedField.maxPriorityFeePerGas]: BigNumber
+  [AdvancedField.gasLimit]: bigint | null
+  [AdvancedField.maxFeePerGas]: bigint | null
+  [AdvancedField.maxPriorityFeePerGas]: bigint | null
   [AdvancedField.safeTxGas]: number
 }>
diff --git a/src/components/tx/ApprovalEditor/ApprovalEditorForm.tsx b/src/components/tx/ApprovalEditor/ApprovalEditorForm.tsx
index 3db81b91d2..0e2666258d 100644
--- a/src/components/tx/ApprovalEditor/ApprovalEditorForm.tsx
+++ b/src/components/tx/ApprovalEditor/ApprovalEditorForm.tsx
@@ -45,7 +45,11 @@ export const ApprovalEditorForm = ({
       <List className={css.approvalsList}>
         {Object.entries(groupedApprovals).map(([spender, approvals], spenderIdx) => (
           <Box key={spender}>
-            <Stack gap={2}>
+            <Stack
+              sx={{
+                gap: 2,
+              }}
+            >
               {approvals.map((tx) => (
                 <ListItem
                   key={tx.tokenAddress + tx.spender}
diff --git a/src/components/tx/ApprovalEditor/ApprovalItem.tsx b/src/components/tx/ApprovalEditor/ApprovalItem.tsx
index 1464668492..c11f6c0a73 100644
--- a/src/components/tx/ApprovalEditor/ApprovalItem.tsx
+++ b/src/components/tx/ApprovalEditor/ApprovalItem.tsx
@@ -27,10 +27,22 @@ const ApprovalItem = ({
   method: Approval['method']
 }) => {
   return (
-    <Stack direction="row" alignItems="center" gap={2} className={css.approvalField}>
+    <Stack
+      direction="row"
+      className={css.approvalField}
+      sx={{
+        alignItems: 'center',
+        gap: 2,
+      }}
+    >
       <TokenIcon size={32} logoUri={tokenInfo?.logoUri} tokenSymbol={tokenInfo?.symbol} />
       <Box sx={{ overflowX: 'auto' }}>
-        <Typography variant="body2" color="text.secondary">
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+          }}
+        >
           {approvalMethodDescription[method](tokenInfo.symbol ?? '', tokenInfo.type)}
         </Typography>
         {amount === PSEUDO_APPROVAL_VALUES.UNLIMITED ? (
diff --git a/src/components/tx/ApprovalEditor/Approvals.tsx b/src/components/tx/ApprovalEditor/Approvals.tsx
index d10cd49c62..1f4fea25d6 100644
--- a/src/components/tx/ApprovalEditor/Approvals.tsx
+++ b/src/components/tx/ApprovalEditor/Approvals.tsx
@@ -13,7 +13,12 @@ const Approvals = ({ approvalInfos }: { approvalInfos: ApprovalInfo[] }) => {
   return (
     <List className={css.approvalsList}>
       {Object.entries(groupedApprovals).map(([spender, approvals]) => (
-        <Stack key={spender} gap={2}>
+        <Stack
+          key={spender}
+          sx={{
+            gap: 2,
+          }}
+        >
           <SpenderField address={spender} />
           {approvals.map((tx) => {
             if (!tx.tokenInfo) return <></>
diff --git a/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx b/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
index 8208fcc1a3..f9492c44fa 100644
--- a/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
+++ b/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
@@ -43,17 +43,24 @@ const EditableApprovalItem = ({
   return (
     <Stack
       direction="row"
-      alignItems="center"
-      gap={2}
       className={css.approvalField}
       onClick={readOnly ? handleEditMode : undefined}
+      sx={{
+        alignItems: 'center',
+        gap: 2,
+      }}
     >
-      <Box display="flex" flexDirection="row" alignItems="center" gap="4px">
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: '4px',
+        }}
+      >
         <TokenIcon size={32} logoUri={approval.tokenInfo?.logoUri} tokenSymbol={approval.tokenInfo?.symbol} />
       </Box>
-
       <ApprovalValueField name={name} tx={approval} readOnly={readOnly} />
-
       <Track {...MODALS_EVENTS.EDIT_APPROVALS} label={readOnly ? 'edit' : 'save'}>
         {readOnly ? (
           <IconButton color="border" onClick={handleEditMode} title="Edit">
diff --git a/src/components/tx/ApprovalEditor/SpenderField.tsx b/src/components/tx/ApprovalEditor/SpenderField.tsx
index 1a73202647..fe6e6901be 100644
--- a/src/components/tx/ApprovalEditor/SpenderField.tsx
+++ b/src/components/tx/ApprovalEditor/SpenderField.tsx
@@ -13,8 +13,21 @@ export const SpenderField = ({ address }: { address: string }) => {
   const isSmallScreen = useMediaQuery(breakpoints.down('md'))
 
   return (
-    <Stack direction="row" justifyContent="space-between" alignItems="center" gap={2} className={css.approvalField}>
-      <Typography variant="body2" color="text.secondary">
+    <Stack
+      direction="row"
+      className={css.approvalField}
+      sx={{
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 2,
+      }}
+    >
+      <Typography
+        variant="body2"
+        sx={{
+          color: 'text.secondary',
+        }}
+      >
         Spender
       </Typography>
       <div>
diff --git a/src/components/tx/ApprovalEditor/index.tsx b/src/components/tx/ApprovalEditor/index.tsx
index 41bc1ae2db..4db1b58768 100644
--- a/src/components/tx/ApprovalEditor/index.tsx
+++ b/src/components/tx/ApprovalEditor/index.tsx
@@ -19,7 +19,13 @@ const Title = ({ isErc721 }: { isErc721: boolean }) => {
 
   return (
     <div>
-      <Typography fontWeight={700}>{title}</Typography>
+      <Typography
+        sx={{
+          fontWeight: 700,
+        }}
+      >
+        {title}
+      </Typography>
       <Typography variant="body2">{subtitle}</Typography>
     </div>
   )
@@ -62,9 +68,16 @@ export const ApprovalEditor = ({
     (safeTransaction && safeTransaction.signatures.size > 0) || safeMessage !== undefined || isErc721Approval
 
   return (
-    <Box display="flex" flexDirection="column" gap={2} className={css.container} mb={1}>
+    <Box
+      className={css.container}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        mb: 1,
+      }}
+    >
       <Title isErc721={isErc721Approval} />
-
       {error ? (
         <Alert severity="error">Error while decoding approval transactions.</Alert>
       ) : loading || !readableApprovals ? (
diff --git a/src/components/tx/BalanceInfo/index.tsx b/src/components/tx/BalanceInfo/index.tsx
index 5b600d56d8..cb7e4a2212 100644
--- a/src/components/tx/BalanceInfo/index.tsx
+++ b/src/components/tx/BalanceInfo/index.tsx
@@ -9,7 +9,12 @@ const BalanceInfo = () => {
 
   return (
     <div className={css.container}>
-      <Typography variant="body2" color="primary.light">
+      <Typography
+        variant="body2"
+        sx={{
+          color: 'primary.light',
+        }}
+      >
         <b>Wallet balance:</b> <WalletBalance balance={balance} />
       </Typography>
     </div>
diff --git a/src/components/tx/ConfirmationOrder/ConfirmationOrderHeader.tsx b/src/components/tx/ConfirmationOrder/ConfirmationOrderHeader.tsx
index 89b09f0fd3..9b003220fe 100644
--- a/src/components/tx/ConfirmationOrder/ConfirmationOrderHeader.tsx
+++ b/src/components/tx/ConfirmationOrder/ConfirmationOrderHeader.tsx
@@ -20,27 +20,49 @@ const ConfirmationOrderHeader = ({ blocks, showArrow }: { blocks: [InfoBlock, In
         <Stack
           key={index}
           direction="row"
-          flexWrap="wrap"
-          alignItems="center"
-          width="50%"
-          bgcolor="border.background"
-          position="relative"
-          borderRadius={1}
-          py={2}
-          px={3}
+          sx={{
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            width: '50%',
+            bgcolor: 'border.background',
+            position: 'relative',
+            borderRadius: 1,
+            py: 2,
+            px: 3,
+          }}
         >
           {block.tokenInfo && (
-            <Box width={40} mr={2}>
+            <Box
+              sx={{
+                width: 40,
+                mr: 2,
+              }}
+            >
               <TokenIcon size={40} logoUri={block.tokenInfo.logoUri || ''} tokenSymbol={block.tokenInfo.symbol} />
             </Box>
           )}
 
-          <Box flex={1}>
-            <Typography variant="body2" color="primary.light">
+          <Box
+            sx={{
+              flex: 1,
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'primary.light',
+              }}
+            >
               {block.label}
             </Typography>
 
-            <Typography variant="h4" fontWeight="bold" component="div">
+            <Typography
+              variant="h4"
+              component="div"
+              sx={{
+                fontWeight: 'bold',
+              }}
+            >
               {block.tokenInfo ? (
                 <TokenAmount
                   tokenSymbol={block.tokenInfo.symbol}
@@ -55,15 +77,21 @@ const ConfirmationOrderHeader = ({ blocks, showArrow }: { blocks: [InfoBlock, In
 
           {showArrow && index === 0 && (
             <Box
-              bgcolor="background.paper"
-              width={40}
-              height={40}
-              p={1}
-              borderRadius="100%"
-              display="flex"
-              alignItems="center"
-              justifyContent="center"
-              sx={{ position: 'absolute', right: -20, top: '50%', transform: 'translateY(-50%)', zIndex: 2 }}
+              sx={{
+                bgcolor: 'background.paper',
+                width: 40,
+                height: 40,
+                p: 1,
+                borderRadius: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                position: 'absolute',
+                right: -20,
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 2,
+              }}
             >
               <SvgIcon component={EastRoundedIcon} inheritViewBox fontSize="small" />
             </Box>
diff --git a/src/components/tx/DecodedTx/index.tsx b/src/components/tx/DecodedTx/index.tsx
index 38934244d7..9841f48a62 100644
--- a/src/components/tx/DecodedTx/index.tsx
+++ b/src/components/tx/DecodedTx/index.tsx
@@ -29,10 +29,12 @@ type DecodedTxProps = {
 
 export const Divider = () => (
   <Box
-    borderBottom="1px solid var(--color-border-light)"
-    width="calc(100% + 32px)"
-    my={2}
-    sx={{ ml: '-16px !important' }}
+    sx={{
+      borderBottom: '1px solid var(--color-border-light)',
+      width: 'calc(100% + 32px)',
+      my: 2,
+      ml: '-16px !important',
+    }}
   />
 )
 
@@ -80,11 +82,16 @@ const DecodedTx = ({
   return (
     <Stack spacing={2}>
       {!isMethodCallInAdvanced && (
-        <Box border="1px solid var(--color-border-light)" borderRadius={1} p={2}>
+        <Box
+          sx={{
+            border: '1px solid var(--color-border-light)',
+            borderRadius: 1,
+            p: 2,
+          }}
+        >
           {decodedDataBlock}
         </Box>
       )}
-
       {isMultisend && showMultisend && <Multisend txData={txDetails?.txData || txData} compact />}
 
       {showAdvancedDetails && (
@@ -97,7 +104,11 @@ const DecodedTx = ({
             >
               Advanced details
               <HelpToolTip />
-              <Box flexGrow={1} />
+              <Box
+                sx={{
+                  flexGrow: 1,
+                }}
+              />
               {isMethodCallInAdvanced && decodedData?.method}
               {txDetails &&
                 isTransferTxInfo(txDetails.txInfo) &&
diff --git a/src/components/tx/ErrorMessage/index.tsx b/src/components/tx/ErrorMessage/index.tsx
index d272d1d11e..0c34222e48 100644
--- a/src/components/tx/ErrorMessage/index.tsx
+++ b/src/components/tx/ErrorMessage/index.tsx
@@ -41,7 +41,12 @@ const ErrorMessage = ({
           <Typography variant="body2" component="span">
             {title && (
               <AlertTitle>
-                <Typography fontWeight={700} variant="subtitle1">
+                <Typography
+                  variant="subtitle1"
+                  sx={{
+                    fontWeight: 700,
+                  }}
+                >
                   {title}
                 </Typography>
               </AlertTitle>
@@ -49,7 +54,13 @@ const ErrorMessage = ({
             {children}
 
             {error && (
-              <Link component="button" onClick={onDetailsToggle} display="block">
+              <Link
+                component="button"
+                onClick={onDetailsToggle}
+                sx={{
+                  display: 'block',
+                }}
+              >
                 Details
               </Link>
             )}
diff --git a/src/components/tx/ExecutionMethodSelector/index.tsx b/src/components/tx/ExecutionMethodSelector/index.tsx
index 3e78e6fd0e..c10c180c98 100644
--- a/src/components/tx/ExecutionMethodSelector/index.tsx
+++ b/src/components/tx/ExecutionMethodSelector/index.tsx
@@ -57,7 +57,12 @@ const _ExecutionMethodSelector = ({
               sx={{ flex: 1 }}
               value={ExecutionMethod.RELAY}
               label={
-                <Typography className={css.radioLabel} whiteSpace="nowrap">
+                <Typography
+                  className={css.radioLabel}
+                  sx={{
+                    whiteSpace: 'nowrap',
+                  }}
+                >
                   Sponsored by
                   <SponsoredBy chainId={chain?.chainId ?? ''} />
                 </Typography>
@@ -80,7 +85,6 @@ const _ExecutionMethodSelector = ({
           </RadioGroup>
         </FormControl>
       </div>
-
       {shouldRelay && relays ? <RemainingRelays relays={relays} tooltip={tooltip} /> : wallet ? <BalanceInfo /> : null}
     </Box>
   )
diff --git a/src/components/tx/FieldsGrid/index.tsx b/src/components/tx/FieldsGrid/index.tsx
index 1c58c8325e..1627736779 100644
--- a/src/components/tx/FieldsGrid/index.tsx
+++ b/src/components/tx/FieldsGrid/index.tsx
@@ -7,11 +7,33 @@ const wrap = { flexWrap: { xl: 'nowrap' } }
 
 const FieldsGrid = ({ title, children }: { title: string | ReactNode; children: ReactNode }) => {
   return (
-    <Grid container alignItems="center" gap={1} sx={wrap}>
-      <Grid item data-testid="tx-row-title" width={width} minWidth={minWidth} style={{ wordBreak: 'break-word' }}>
-        <Typography color="primary.light">{title}</Typography>
+    <Grid
+      container
+      sx={[
+        {
+          alignItems: 'center',
+          gap: 1,
+        },
+        ...(Array.isArray(wrap) ? wrap : [wrap]),
+      ]}
+    >
+      <Grid
+        item
+        data-testid="tx-row-title"
+        style={{ wordBreak: 'break-word' }}
+        sx={{
+          width,
+          minWidth,
+        }}
+      >
+        <Typography
+          sx={{
+            color: 'primary.light',
+          }}
+        >
+          {title}
+        </Typography>
       </Grid>
-
       <Grid item xs data-testid="tx-data-row">
         {children}
       </Grid>
diff --git a/src/components/tx/GasParams/index.tsx b/src/components/tx/GasParams/index.tsx
index 3510cb1d88..28cdbd1445 100644
--- a/src/components/tx/GasParams/index.tsx
+++ b/src/components/tx/GasParams/index.tsx
@@ -70,7 +70,14 @@ export const _GasParams = ({
   const EditComponent = (
     <>
       {gasLimitError || !isExecution || (isExecution && !isLoading) ? (
-        <Link component="button" onClick={onEditClick} sx={{ mt: 2 }} fontSize="medium">
+        <Link
+          component="button"
+          onClick={onEditClick}
+          sx={{
+            fontSize: 'medium',
+            mt: 2,
+          }}
+        >
           Edit
         </Link>
       ) : (
@@ -88,7 +95,13 @@ export const _GasParams = ({
       >
         <AccordionSummary expandIcon={<ExpandMoreIcon />} className={accordionCss.accordion}>
           {isExecution ? (
-            <Typography display="flex" alignItems="center" width={1}>
+            <Typography
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                width: 1,
+              }}
+            >
               <span style={{ flex: '1' }}>Estimated fee </span>
               {gasLimitError ? (
                 <>
diff --git a/src/components/tx/RemainingRelays/index.tsx b/src/components/tx/RemainingRelays/index.tsx
index 41a3b60b05..117accdeb4 100644
--- a/src/components/tx/RemainingRelays/index.tsx
+++ b/src/components/tx/RemainingRelays/index.tsx
@@ -11,7 +11,15 @@ const RemainingRelays = ({ relays, tooltip }: { relays?: RelayCountResponse; too
 
   return (
     <div className={css.container}>
-      <Typography variant="body2" color="primary.light" display="flex" alignItems="center" gap={0.5}>
+      <Typography
+        variant="body2"
+        sx={{
+          color: 'primary.light',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+        }}
+      >
         <b>{relays?.remaining ?? MAX_DAY_RELAYS}</b> free transactions left today
         <Tooltip title={tooltip} placement="top" arrow>
           <span style={{ lineHeight: 0 }}>
diff --git a/src/components/tx/SendFromBlock/index.tsx b/src/components/tx/SendFromBlock/index.tsx
index 5c1dc7f57b..300da34b4b 100644
--- a/src/components/tx/SendFromBlock/index.tsx
+++ b/src/components/tx/SendFromBlock/index.tsx
@@ -10,15 +10,24 @@ const SendFromBlock = ({ title }: { title?: string }): ReactElement => {
   const address = useSafeAddress()
 
   return (
-    <Box className={css.container} pb={2} mb={2}>
-      <Typography color="text.secondary" pb={1}>
+    <Box
+      className={css.container}
+      sx={{
+        pb: 2,
+        mb: 2,
+      }}
+    >
+      <Typography
+        sx={{
+          color: 'text.secondary',
+          pb: 1,
+        }}
+      >
         {title || 'Sending from'}
       </Typography>
-
       <Typography variant="body2" component="div">
         <EthHashInfo address={address} shortAddress={false} hasExplorer showCopyButton />
       </Typography>
-
       <SouthIcon className={css.arrow} />
     </Box>
   )
diff --git a/src/components/tx/SignOrExecuteForm/BatchButton.tsx b/src/components/tx/SignOrExecuteForm/BatchButton.tsx
index a85893827e..2baeb91613 100644
--- a/src/components/tx/SignOrExecuteForm/BatchButton.tsx
+++ b/src/components/tx/SignOrExecuteForm/BatchButton.tsx
@@ -29,7 +29,14 @@ const BatchButton = ({
         </Track>
       </span>
     </Tooltip>
-    <Box display={['none', 'flex']} flexDirection="column" justifyContent="center" color="border.main">
+    <Box
+      sx={{
+        display: ['none', 'flex'],
+        flexDirection: 'column',
+        justifyContent: 'center',
+        color: 'border.main',
+      }}
+    >
       {' '}
       <Divider
         sx={{
diff --git a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
index 398614fdf9..55d67a6b05 100644
--- a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
@@ -77,7 +77,10 @@ export const ExecuteForm = ({
   const [advancedParams, setAdvancedParams] = useAdvancedParams(gasLimit)
 
   // Check if transaction will fail
-  const { executionValidationError } = useIsValidExecution(safeTx, advancedParams.gasLimit)
+  const { executionValidationError } = useIsValidExecution(
+    safeTx,
+    advancedParams.gasLimit ? advancedParams.gasLimit : undefined,
+  )
 
   // On modal submit
   const handleSubmit = async (e: SyntheticEvent) => {
@@ -173,13 +176,21 @@ export const ExecuteForm = ({
         )}
 
         {submitError && (
-          <Box mt={1}>
+          <Box
+            sx={{
+              mt: 1,
+            }}
+          >
             <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
           </Box>
         )}
 
         {isRejectedByUser && (
-          <Box mt={1}>
+          <Box
+            sx={{
+              mt: 1,
+            }}
+          >
             <WalletRejectionError />
           </Box>
         )}
diff --git a/src/components/tx/SignOrExecuteForm/ExecuteThroughRoleForm/index.tsx b/src/components/tx/SignOrExecuteForm/ExecuteThroughRoleForm/index.tsx
index b8fcc7a600..091c86c7e5 100644
--- a/src/components/tx/SignOrExecuteForm/ExecuteThroughRoleForm/index.tsx
+++ b/src/components/tx/SignOrExecuteForm/ExecuteThroughRoleForm/index.tsx
@@ -143,7 +143,6 @@ export const ExecuteThroughRoleForm = ({
   return (
     <>
       <Divider className={commonCss.nestedDivider} sx={{ pt: 1 }} />
-
       <form onSubmit={handleSubmit}>
         {!permissionsError && (
           <>
@@ -165,7 +164,11 @@ export const ExecuteThroughRoleForm = ({
         )}
 
         {permissionsError && (
-          <Box mb={2}>
+          <Box
+            sx={{
+              mb: 2,
+            }}
+          >
             <Typography sx={{ mb: 2 }}>
               You are a member of the <Role>{role.roleKey}</Role> role but it does not allow this transaction.
             </Typography>
@@ -174,14 +177,26 @@ export const ExecuteThroughRoleForm = ({
           </Box>
         )}
 
-        <Typography variant="caption" display="flex" gap="2px" color="text.secondary" sx={{ mb: 2 }}>
+        <Typography
+          variant="caption"
+          sx={{
+            display: 'flex',
+            gap: '2px',
+            color: 'text.secondary',
+            mb: 2,
+          }}
+        >
           Powered by
           <img src="/images/transactions/zodiac-roles.svg" width={16} height={16} alt="Zodiac Roles" />
           <span className={css.zodiac}>Zodiac</span>
         </Typography>
 
         {multiSendImpossible && (
-          <Box mt={1}>
+          <Box
+            sx={{
+              mt: 1,
+            }}
+          >
             <ErrorMessage>
               The current configuration of the Zodiac Roles module does not allow executing multiple transactions in
               batch.
@@ -190,14 +205,22 @@ export const ExecuteThroughRoleForm = ({
         )}
 
         {!walletCanPay ? (
-          <Box mt={1}>
+          <Box
+            sx={{
+              mt: 1,
+            }}
+          >
             <ErrorMessage level="info">
               Your connected wallet doesn&apos;t have enough funds to execute this transaction.
             </ErrorMessage>
           </Box>
         ) : (
           gasLimitError && (
-            <Box mt={1}>
+            <Box
+              sx={{
+                mt: 1,
+              }}
+            >
               <ErrorMessage error={gasLimitError}>
                 This transaction will most likely fail. To save gas costs, avoid creating this transaction.
               </ErrorMessage>
@@ -206,18 +229,30 @@ export const ExecuteThroughRoleForm = ({
         )}
 
         {submitError && (
-          <Box mt={1}>
+          <Box
+            sx={{
+              mt: 1,
+            }}
+          >
             <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
           </Box>
         )}
 
         {isRejectedByUser && (
-          <Box mt={1}>
+          <Box
+            sx={{
+              mt: 1,
+            }}
+          >
             <WalletRejectionError />
           </Box>
         )}
 
-        <Box mt={3}>
+        <Box
+          sx={{
+            mt: 3,
+          }}
+        >
           <Divider className={commonCss.nestedDivider} />
         </Box>
 
diff --git a/src/components/tx/SignOrExecuteForm/MigrateToL2Information.tsx b/src/components/tx/SignOrExecuteForm/MigrateToL2Information.tsx
index 6240d7b4de..a6ff0617c2 100644
--- a/src/components/tx/SignOrExecuteForm/MigrateToL2Information.tsx
+++ b/src/components/tx/SignOrExecuteForm/MigrateToL2Information.tsx
@@ -13,7 +13,12 @@ export const MigrateToL2Information = ({
     <Box>
       <Alert severity="info" icon={<SvgIcon component={InfoOutlinedIcon} color="info" />}>
         <AlertTitle>
-          <Typography variant="h5" fontWeight={700}>
+          <Typography
+            variant="h5"
+            sx={{
+              fontWeight: 700,
+            }}
+          >
             Migration to compatible base contract
           </Typography>
         </AlertTitle>
@@ -24,8 +29,18 @@ export const MigrateToL2Information = ({
         </Typography>
 
         {newMasterCopy && (
-          <Box mt={2}>
-            <Typography variant="overline" color="text.secondary" fontWeight={700}>
+          <Box
+            sx={{
+              mt: 2,
+            }}
+          >
+            <Typography
+              variant="overline"
+              sx={{
+                color: 'text.secondary',
+                fontWeight: 700,
+              }}
+            >
               New contract
             </Typography>
             <NamedAddressInfo address={newMasterCopy} shortAddress={false} showCopyButton hasExplorer />
diff --git a/src/components/tx/SignOrExecuteForm/SignForm.tsx b/src/components/tx/SignOrExecuteForm/SignForm.tsx
index 3e16bc37fe..6e45dd7a29 100644
--- a/src/components/tx/SignOrExecuteForm/SignForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/SignForm.tsx
@@ -97,7 +97,6 @@ export const SignForm = ({
   return (
     <form onSubmit={handleSubmit}>
       {hasSigned && <ErrorMessage level="warning">You have already signed this transaction.</ErrorMessage>}
-
       {cannotPropose ? (
         <NonOwnerError />
       ) : (
@@ -105,15 +104,16 @@ export const SignForm = ({
           <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
         )
       )}
-
       {isRejectedByUser && (
-        <Box mt={1}>
+        <Box
+          sx={{
+            mt: 1,
+          }}
+        >
           <WalletRejectionError />
         </Box>
       )}
-
       <Divider className={commonCss.nestedDivider} sx={{ pt: 3 }} />
-
       <CardActions>
         <Stack
           sx={{
diff --git a/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx
index 6cceedf7f7..1627da354c 100644
--- a/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx
@@ -65,8 +65,8 @@ const trackTxEvents = (
   const creationEvent = isRoleExecution
     ? TX_EVENTS.CREATE_VIA_ROLE
     : isProposerCreation
-    ? TX_EVENTS.CREATE_VIA_PROPOSER
-    : TX_EVENTS.CREATE
+      ? TX_EVENTS.CREATE_VIA_PROPOSER
+      : TX_EVENTS.CREATE
   const executionEvent = isRoleExecution ? TX_EVENTS.EXECUTE_VIA_ROLE : TX_EVENTS.EXECUTE
   const event = isCreation ? creationEvent : isExecuted ? executionEvent : TX_EVENTS.CONFIRM
   const txType = getTransactionTrackingType(details)
@@ -177,8 +177,8 @@ export const SignOrExecuteForm = ({
             isProposing
               ? ConfirmationTitleTypes.propose
               : willExecute
-              ? ConfirmationTitleTypes.execute
-              : ConfirmationTitleTypes.sign
+                ? ConfirmationTitleTypes.execute
+                : ConfirmationTitleTypes.sign
           }
           isCreation={isCreation}
         />
diff --git a/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx b/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx
index d6c6c20f71..7514315a86 100644
--- a/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx
+++ b/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx
@@ -4,7 +4,15 @@ import { Box } from '@mui/material'
 
 const SignOrExecuteSkeleton = () => (
   <TxCard>
-    <Box minHeight="38svh" display="flex" alignItems="center" justifyContent="center" mb={5}>
+    <Box
+      sx={{
+        minHeight: '38svh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        mb: 5,
+      }}
+    >
       <LoadingSpinner status={SpinnerStatus.PROCESSING} />
     </Box>
   </TxCard>
diff --git a/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap b/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap
index 87e0722b7b..ce43a32472 100644
--- a/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap
+++ b/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap
@@ -3,10 +3,11 @@
 exports[`SignOrExecute should display a confirmation screen 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-118bpkk-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1w4z6qv-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   >
     <div
-      class="MuiCardContent-root cardContent css-46bh2p-MuiCardContent-root"
+      class="MuiCardContent-root cardContent css-1lt5qva-MuiCardContent-root"
     >
       <div
         class="MuiStack-root css-1sazv7p-MuiStack-root"
@@ -15,65 +16,70 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
           class="MuiBox-root css-0"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1x8l8fd-MuiPaper-root-MuiAccordion-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1befnxe-MuiPaper-root-MuiAccordion-root"
+            style="--Paper-shadow: none;"
           >
-            <div
-              aria-expanded="false"
-              class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-knbc2d-MuiButtonBase-root-MuiAccordionSummary-root"
-              data-testid="decoded-tx-summary"
-              role="button"
-              tabindex="0"
+            <h3
+              class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
             >
               <div
-                class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-6nefnh-MuiAccordionSummary-content"
+                aria-expanded="false"
+                class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-66oagt-MuiButtonBase-root-MuiAccordionSummary-root"
+                data-testid="decoded-tx-summary"
+                role="button"
+                tabindex="0"
               >
-                Advanced details
-                <span
-                  class=""
-                  data-mui-internal-clone-element="true"
+                <div
+                  class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-1pnrdlh-MuiAccordionSummary-content"
                 >
-                  <mock-icon
-                    aria-hidden="true"
-                    classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-i8sqcg-MuiSvgIcon-root"
-                    focusable="false"
+                  Advanced details
+                  <span
+                    class=""
+                    data-mui-internal-clone-element="true"
+                  >
+                    <mock-icon
+                      aria-hidden=""
+                      class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-17ibv3e-MuiSvgIcon-root"
+                      focusable="false"
+                    />
+                  </span>
+                  <div
+                    class="MuiBox-root css-i9gxme"
                   />
-                </span>
+                </div>
                 <div
-                  class="MuiBox-root css-i9gxme"
-                />
-              </div>
-              <div
-                class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17ceore-MuiSvgIcon-root"
-                  data-testid="ExpandMoreIcon"
-                  focusable="false"
-                  viewBox="0 0 24 24"
+                  class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
                 >
-                  <path
-                    d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dhtbeh-MuiSvgIcon-root"
+                    data-testid="ExpandMoreIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                    />
+                  </svg>
+                </div>
               </div>
-            </div>
+            </h3>
             <div
-              class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+              class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
               style="min-height: 0px;"
             >
               <div
-                class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+                class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
               >
                 <div
-                  class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+                  class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
                 >
                   <div
                     class="MuiAccordion-region"
                     role="region"
                   >
                     <div
-                      class="MuiAccordionDetails-root css-7wcoc8-MuiAccordionDetails-root"
+                      class="MuiAccordionDetails-root css-w74p4c-MuiAccordionDetails-root"
                       data-testid="decoded-tx-details"
                     />
                   </div>
@@ -86,10 +92,11 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-118bpkk-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1w4z6qv-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   >
     <div
-      class="MuiCardContent-root cardContent css-46bh2p-MuiCardContent-root"
+      class="MuiCardContent-root cardContent css-1lt5qva-MuiCardContent-root"
     >
       <div
         class="wrapper"
@@ -98,19 +105,19 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
           class="icon sign"
         >
           <mock-icon
-            aria-hidden="true"
-            classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
+            aria-hidden=""
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
             focusable="false"
           />
         </div>
         <div>
           <h5
-            class="MuiTypography-root MuiTypography-h5 css-kmqua7-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5 css-1mp5g96-MuiTypography-root"
           >
             confirm
           </h5>
           <p
-            class="MuiTypography-root MuiTypography-body2 css-ceebrx-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-17vdyq3-MuiTypography-root"
           >
             You're about to 
             create and 
@@ -121,10 +128,10 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
       </div>
       <form>
         <hr
-          class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-1cvjk81-MuiDivider-root"
+          class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-1jpvyob-MuiDivider-root"
         />
         <div
-          class="MuiCardActions-root MuiCardActions-spacing css-dnrpxu-MuiCardActions-root"
+          class="MuiCardActions-root MuiCardActions-spacing css-1q4nm6f-MuiCardActions-root"
         >
           <div
             class="MuiStack-root css-irtfmw-MuiStack-root"
@@ -137,19 +144,16 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
                 data-track="batching: Add to batch"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-fj99we-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-16be8yl-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
                   <mock-icon
-                    aria-hidden="true"
-                    classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-gxmw0o-MuiSvgIcon-root"
+                    aria-hidden=""
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1hr8a3z-MuiSvgIcon-root"
                     focusable="false"
                   />
                   Add to batch
-                  <span
-                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                  />
                 </button>
               </span>
             </span>
@@ -158,11 +162,12 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
             >
                
               <div
-                class="MuiDivider-root MuiDivider-fullWidth MuiDivider-withChildren css-crkpmc-MuiDivider-root"
+                aria-orientation="horizontal"
+                class="MuiDivider-root MuiDivider-fullWidth MuiDivider-withChildren css-1lftdsp-MuiDivider-root"
                 role="separator"
               >
                 <span
-                  class="MuiDivider-wrapper css-165zycj-MuiDivider-wrapper"
+                  class="MuiDivider-wrapper css-tuok6n-MuiDivider-wrapper"
                 >
                   or
                 </span>
@@ -174,7 +179,7 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
               data-mui-internal-clone-element="true"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1mhjei7-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1hp2ejb-MuiButtonBase-root-MuiButton-root"
                 data-testid="sign-btn"
                 disabled=""
                 tabindex="-1"
@@ -194,10 +199,11 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
 exports[`SignOrExecute should display a loading component 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-118bpkk-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1w4z6qv-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   >
     <div
-      class="MuiCardContent-root cardContent css-46bh2p-MuiCardContent-root"
+      class="MuiCardContent-root cardContent css-1lt5qva-MuiCardContent-root"
     >
       <div
         class="MuiBox-root css-17luq05"
@@ -257,10 +263,11 @@ exports[`SignOrExecute should display a loading component 1`] = `
 exports[`SignOrExecute should display an error screen 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-118bpkk-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1w4z6qv-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   >
     <div
-      class="MuiCardContent-root cardContent css-46bh2p-MuiCardContent-root"
+      class="MuiCardContent-root cardContent css-1lt5qva-MuiCardContent-root"
     >
       <div
         class="MuiStack-root css-1sazv7p-MuiStack-root"
@@ -269,69 +276,74 @@ exports[`SignOrExecute should display an error screen 1`] = `
           class="MuiBox-root css-0"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1x8l8fd-MuiPaper-root-MuiAccordion-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1befnxe-MuiPaper-root-MuiAccordion-root"
+            style="--Paper-shadow: none;"
           >
-            <div
-              aria-expanded="false"
-              class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-knbc2d-MuiButtonBase-root-MuiAccordionSummary-root"
-              data-testid="decoded-tx-summary"
-              role="button"
-              tabindex="0"
+            <h3
+              class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
             >
               <div
-                class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-6nefnh-MuiAccordionSummary-content"
+                aria-expanded="false"
+                class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-66oagt-MuiButtonBase-root-MuiAccordionSummary-root"
+                data-testid="decoded-tx-summary"
+                role="button"
+                tabindex="0"
               >
-                Advanced details
-                <span
-                  class=""
-                  data-mui-internal-clone-element="true"
+                <div
+                  class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-1pnrdlh-MuiAccordionSummary-content"
                 >
-                  <mock-icon
-                    aria-hidden="true"
-                    classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-i8sqcg-MuiSvgIcon-root"
-                    focusable="false"
+                  Advanced details
+                  <span
+                    class=""
+                    data-mui-internal-clone-element="true"
+                  >
+                    <mock-icon
+                      aria-hidden=""
+                      class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-17ibv3e-MuiSvgIcon-root"
+                      focusable="false"
+                    />
+                  </span>
+                  <div
+                    class="MuiBox-root css-i9gxme"
                   />
-                </span>
+                </div>
                 <div
-                  class="MuiBox-root css-i9gxme"
-                />
-              </div>
-              <div
-                class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17ceore-MuiSvgIcon-root"
-                  data-testid="ExpandMoreIcon"
-                  focusable="false"
-                  viewBox="0 0 24 24"
+                  class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
                 >
-                  <path
-                    d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dhtbeh-MuiSvgIcon-root"
+                    data-testid="ExpandMoreIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                    />
+                  </svg>
+                </div>
               </div>
-            </div>
+            </h3>
             <div
-              class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+              class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
               style="min-height: 0px;"
             >
               <div
-                class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+                class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
               >
                 <div
-                  class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+                  class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
                 >
                   <div
                     class="MuiAccordion-region"
                     role="region"
                   >
                     <div
-                      class="MuiAccordionDetails-root css-7wcoc8-MuiAccordionDetails-root"
+                      class="MuiAccordionDetails-root css-w74p4c-MuiAccordionDetails-root"
                       data-testid="decoded-tx-details"
                     >
                       <div
-                        class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+                        class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                       >
                         <div
                           class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -339,7 +351,7 @@ exports[`SignOrExecute should display an error screen 1`] = `
                           style="word-break: break-word;"
                         >
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
                           >
                             safeTxGas:
                           </p>
@@ -356,7 +368,7 @@ exports[`SignOrExecute should display an error screen 1`] = `
                         </div>
                       </div>
                       <div
-                        class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+                        class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                       >
                         <div
                           class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -364,7 +376,7 @@ exports[`SignOrExecute should display an error screen 1`] = `
                           style="word-break: break-word;"
                         >
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+                            class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
                           >
                             Raw data:
                           </p>
@@ -389,19 +401,16 @@ exports[`SignOrExecute should display an error screen 1`] = `
                             >
                               <button
                                 aria-label="Copy to clipboard"
-                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
                                 tabindex="0"
                                 type="button"
                               >
                                 <mock-icon
-                                  aria-hidden="true"
-                                  classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+                                  aria-hidden=""
+                                  class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
                                   data-testid="copy-btn-icon"
                                   focusable="false"
                                 />
-                                <span
-                                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                                />
                               </button>
                             </span>
                           </div>
@@ -418,10 +427,11 @@ exports[`SignOrExecute should display an error screen 1`] = `
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-118bpkk-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1w4z6qv-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   >
     <div
-      class="MuiCardContent-root cardContent css-46bh2p-MuiCardContent-root"
+      class="MuiCardContent-root cardContent css-1lt5qva-MuiCardContent-root"
     >
       <div
         class="wrapper"
@@ -430,19 +440,19 @@ exports[`SignOrExecute should display an error screen 1`] = `
           class="icon sign"
         >
           <mock-icon
-            aria-hidden="true"
-            classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
+            aria-hidden=""
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
             focusable="false"
           />
         </div>
         <div>
           <h5
-            class="MuiTypography-root MuiTypography-h5 css-kmqua7-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5 css-1mp5g96-MuiTypography-root"
           >
             confirm
           </h5>
           <p
-            class="MuiTypography-root MuiTypography-body2 css-ceebrx-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-17vdyq3-MuiTypography-root"
           >
             You're about to 
             create and 
@@ -453,10 +463,10 @@ exports[`SignOrExecute should display an error screen 1`] = `
       </div>
       <form>
         <hr
-          class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-1cvjk81-MuiDivider-root"
+          class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-1jpvyob-MuiDivider-root"
         />
         <div
-          class="MuiCardActions-root MuiCardActions-spacing css-dnrpxu-MuiCardActions-root"
+          class="MuiCardActions-root MuiCardActions-spacing css-1q4nm6f-MuiCardActions-root"
         >
           <div
             class="MuiStack-root css-irtfmw-MuiStack-root"
@@ -469,19 +479,16 @@ exports[`SignOrExecute should display an error screen 1`] = `
                 data-track="batching: Add to batch"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-fj99we-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-16be8yl-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
                   <mock-icon
-                    aria-hidden="true"
-                    classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-gxmw0o-MuiSvgIcon-root"
+                    aria-hidden=""
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1hr8a3z-MuiSvgIcon-root"
                     focusable="false"
                   />
                   Add to batch
-                  <span
-                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                  />
                 </button>
               </span>
             </span>
@@ -490,11 +497,12 @@ exports[`SignOrExecute should display an error screen 1`] = `
             >
                
               <div
-                class="MuiDivider-root MuiDivider-fullWidth MuiDivider-withChildren css-crkpmc-MuiDivider-root"
+                aria-orientation="horizontal"
+                class="MuiDivider-root MuiDivider-fullWidth MuiDivider-withChildren css-1lftdsp-MuiDivider-root"
                 role="separator"
               >
                 <span
-                  class="MuiDivider-wrapper css-165zycj-MuiDivider-wrapper"
+                  class="MuiDivider-wrapper css-tuok6n-MuiDivider-wrapper"
                 >
                   or
                 </span>
@@ -506,7 +514,7 @@ exports[`SignOrExecute should display an error screen 1`] = `
               data-mui-internal-clone-element="true"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1mhjei7-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1hp2ejb-MuiButtonBase-root-MuiButton-root"
                 data-testid="sign-btn"
                 disabled=""
                 tabindex="-1"
diff --git a/src/components/tx/SuccessMessage/index.tsx b/src/components/tx/SuccessMessage/index.tsx
index 9f3ce22916..e7df90bba0 100644
--- a/src/components/tx/SuccessMessage/index.tsx
+++ b/src/components/tx/SuccessMessage/index.tsx
@@ -10,7 +10,12 @@ const SuccessMessage = ({ children, className }: { children: ReactNode; classNam
       <div className={css.message}>
         <SvgIcon component={CheckIcon} color="success" inheritViewBox fontSize="small" />
 
-        <Typography variant="body2" width="100%">
+        <Typography
+          variant="body2"
+          sx={{
+            width: '100%',
+          }}
+        >
           {children}
         </Typography>
       </div>
diff --git a/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap b/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap
index 516101446f..f20bc6d87b 100644
--- a/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap
+++ b/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`BatchTransactions should render a list of batch transactions 1`] = `
 <div>
   <ul
-    class="MuiList-root MuiList-padding css-lcvy9m-MuiList-root"
+    class="MuiList-root MuiList-padding css-8g50lk-MuiList-root"
   >
     <li
-      class="MuiListItem-root MuiListItem-gutters css-1ukg6v4-MuiListItem-root"
+      class="MuiListItem-root MuiListItem-gutters css-rqnn2j-MuiListItem-root"
     >
       <div
         class="number"
@@ -14,84 +14,89 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
         1
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1b8drg8-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1bkyy70-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: none;"
       >
-        <div
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-knbc2d-MuiButtonBase-root-MuiAccordionSummary-root"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
           <div
-            class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-6nefnh-MuiAccordionSummary-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-66oagt-MuiButtonBase-root-MuiAccordionSummary-root"
+            role="button"
+            tabindex="0"
           >
             <div
-              class="MuiBox-root css-mvjamn"
+              class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-1pnrdlh-MuiAccordionSummary-content"
             >
               <div
-                class="txType MuiBox-root css-0"
+                class="MuiBox-root css-mvjamn"
               >
-                <img
-                  alt="Send"
-                  height="16"
-                  src="/images/transactions/outgoing.svg"
-                  width="16"
-                />
-                <span
-                  class="txTypeText"
+                <div
+                  class="txType MuiBox-root css-0"
                 >
-                  Send
-                </span>
-              </div>
-              <div
-                class="MuiBox-root css-1rr4qq7"
-              >
-                <span
-                  aria-label="1000000000000"
-                  class="container"
-                  data-mui-internal-clone-element="true"
+                  <img
+                    alt="Send"
+                    height="16"
+                    src="/images/transactions/outgoing.svg"
+                    width="16"
+                  />
+                  <span
+                    class="txTypeText"
+                  >
+                    Send
+                  </span>
+                </div>
+                <div
+                  class="MuiBox-root css-1rr4qq7"
                 >
-                  <b>
-                    -
-                    1000000000000
-                     
-                  </b>
-                </span>
+                  <span
+                    aria-label="1000000000000"
+                    class="container"
+                    data-mui-internal-clone-element="true"
+                  >
+                    <b>
+                      -
+                      1000000000000
+                       
+                    </b>
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17ceore-MuiSvgIcon-root"
-              data-testid="ExpandMoreIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
+            <div
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
             >
-              <path
-                d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dhtbeh-MuiSvgIcon-root"
+                data-testid="ExpandMoreIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 class="MuiAccordion-region"
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-7wcoc8-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-w74p4c-MuiAccordionDetails-root"
                 >
                   <div
                     class="details"
@@ -103,7 +108,7 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
                         class="MuiBox-root css-8v90jo"
                       >
                         <p
-                          class="MuiTypography-root MuiTypography-body1 css-1pqjor9-MuiTypography-root"
+                          class="MuiTypography-root MuiTypography-body1 css-v6lhhw-MuiTypography-root"
                         >
                           Send
                            
@@ -175,19 +180,16 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
                               >
                                 <button
                                   aria-label="Copy to clipboard"
-                                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+                                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
                                   tabindex="0"
                                   type="button"
                                 >
                                   <mock-icon
-                                    aria-hidden="true"
-                                    classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+                                    aria-hidden=""
+                                    class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
                                     data-testid="copy-btn-icon"
                                     focusable="false"
                                   />
-                                  <span
-                                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                                  />
                                 </button>
                               </span>
                               <div
@@ -195,44 +197,37 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
                               >
                                 <button
                                   aria-label=""
-                                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
+                                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1vbp2rr-MuiButtonBase-root-MuiIconButton-root"
                                   data-mui-internal-clone-element="true"
                                   data-testid="explorer-btn"
-                                  href=""
                                   rel="noreferrer"
                                   tabindex="0"
                                   target="_blank"
                                   type="button"
                                 >
                                   <mock-icon
-                                    aria-hidden="true"
-                                    classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
+                                    aria-hidden=""
+                                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                                     focusable="false"
                                   />
-                                  <span
-                                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                                  />
                                 </button>
                               </div>
                               <button
-                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeSmall css-sl0yvu-MuiButtonBase-root-MuiIconButton-root"
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeSmall css-1bg1tw1-MuiButtonBase-root-MuiIconButton-root"
                                 tabindex="0"
                                 type="button"
                               >
                                 <svg
                                   aria-hidden="true"
-                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1pay1n0-MuiSvgIcon-root"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1ktsa7m-MuiSvgIcon-root"
                                   data-testid="MoreHorizIcon"
                                   focusable="false"
                                   viewBox="0 0 24 24"
                                 >
                                   <path
-                                    d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                                    d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
                                   />
                                 </svg>
-                                <span
-                                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                                />
                               </button>
                             </div>
                           </div>
@@ -240,7 +235,7 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
                       </div>
                     </div>
                     <div
-                      class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+                      class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                     >
                       <div
                         class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -248,7 +243,7 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
                         style="word-break: break-word;"
                       >
                         <p
-                          class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+                          class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
                         >
                           Created:
                         </p>
diff --git a/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap b/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap
index 34ba41b75c..9c91c0378c 100644
--- a/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap
+++ b/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap
@@ -4,13 +4,13 @@ exports[`ChangeThreshold should display the ChangeThreshold component with the n
 <div>
   <div>
     <p
-      class="MuiTypography-root MuiTypography-body2 css-1bcmoup-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-ugmpf3-MuiTypography-root"
     >
       Any transaction will require the confirmation of:
     </p>
     <p
       aria-label="threshold"
-      class="MuiTypography-root MuiTypography-body1 css-1pqjor9-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-v6lhhw-MuiTypography-root"
     >
       <b>
         3
@@ -26,7 +26,7 @@ exports[`ChangeThreshold should display the ChangeThreshold component with the n
     class="MuiBox-root css-1xlzx9v"
   >
     <hr
-      class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-da8pia-MuiDivider-root"
+      class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-1facvfi-MuiDivider-root"
     />
   </div>
 </div>
diff --git a/src/components/tx/confirmation-views/ChangeThreshold/index.tsx b/src/components/tx/confirmation-views/ChangeThreshold/index.tsx
index 3d4c7ca7a3..0b52e50e31 100644
--- a/src/components/tx/confirmation-views/ChangeThreshold/index.tsx
+++ b/src/components/tx/confirmation-views/ChangeThreshold/index.tsx
@@ -20,9 +20,14 @@ function ChangeThreshold({ txDetails }: ChangeThresholdProps) {
   return (
     <>
       <ChangeSignerSetupWarning />
-
       <div>
-        <Typography variant="body2" color="text.secondary" mb={0.5}>
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+            mb: 0.5,
+          }}
+        >
           Any transaction will require the confirmation of:
         </Typography>
 
@@ -30,7 +35,11 @@ function ChangeThreshold({ txDetails }: ChangeThresholdProps) {
           <b>{newThreshold || threshold}</b> out of <b>{safe.owners.length} signer(s)</b>
         </Typography>
       </div>
-      <Box my={1}>
+      <Box
+        sx={{
+          my: 1,
+        }}
+      >
         <Divider className={commonCss.nestedDivider} />
       </Box>
     </>
diff --git a/src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap b/src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap
index ed0525fc33..f83c827e1f 100644
--- a/src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap
+++ b/src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap
@@ -3,14 +3,15 @@
 exports[`SettingsChange should display the SettingsChange component with newOwner details 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-1f23gi7-MuiPaper-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-1nt2i3f-MuiPaper-root"
+    style="--Paper-shadow: none;"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-ya5m4n-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-k1tjez-MuiTypography-root"
     >
       <mock-icon
-        aria-hidden="true"
-        classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-gxmw0o-MuiSvgIcon-root"
+        aria-hidden=""
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1hr8a3z-MuiSvgIcon-root"
         focusable="false"
       />
       Previous signer
@@ -65,19 +66,16 @@ exports[`SettingsChange should display the SettingsChange component with newOwne
           >
             <button
               aria-label="Copy to clipboard"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
               tabindex="0"
               type="button"
             >
               <mock-icon
-                aria-hidden="true"
-                classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+                aria-hidden=""
+                class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
                 data-testid="copy-btn-icon"
                 focusable="false"
               />
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </span>
           <div
@@ -85,23 +83,19 @@ exports[`SettingsChange should display the SettingsChange component with newOwne
           >
             <button
               aria-label=""
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1vbp2rr-MuiButtonBase-root-MuiIconButton-root"
               data-mui-internal-clone-element="true"
               data-testid="explorer-btn"
-              href=""
               rel="noreferrer"
               tabindex="0"
               target="_blank"
               type="button"
             >
               <mock-icon
-                aria-hidden="true"
-                classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
+                aria-hidden=""
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                 focusable="false"
               />
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </div>
         </div>
@@ -109,14 +103,15 @@ exports[`SettingsChange should display the SettingsChange component with newOwne
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 container css-1bq3jbz-MuiPaper-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 container css-zpxm0u-MuiPaper-root"
+    style="--Paper-shadow: none;"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1ab5q2h-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-14yu9oo-MuiTypography-root"
     >
       <mock-icon
-        aria-hidden="true"
-        classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-gxmw0o-MuiSvgIcon-root"
+        aria-hidden=""
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1hr8a3z-MuiSvgIcon-root"
         focusable="false"
       />
       New signer
@@ -129,7 +124,7 @@ exports[`SettingsChange should display the SettingsChange component with newOwne
         style="width: 32px; height: 32px;"
       >
         <span
-          class="MuiSkeleton-root MuiSkeleton-circular MuiSkeleton-pulse css-1sj56zx-MuiSkeleton-root"
+          class="MuiSkeleton-root MuiSkeleton-circular MuiSkeleton-pulse css-143xw5x-MuiSkeleton-root"
           style="width: 32px; height: 32px;"
         />
       </div>
@@ -171,19 +166,16 @@ exports[`SettingsChange should display the SettingsChange component with newOwne
           >
             <button
               aria-label="Copy to clipboard"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
               tabindex="0"
               type="button"
             >
               <mock-icon
-                aria-hidden="true"
-                classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+                aria-hidden=""
+                class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
                 data-testid="copy-btn-icon"
                 focusable="false"
               />
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </span>
           <div
@@ -191,23 +183,19 @@ exports[`SettingsChange should display the SettingsChange component with newOwne
           >
             <button
               aria-label=""
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1vbp2rr-MuiButtonBase-root-MuiIconButton-root"
               data-mui-internal-clone-element="true"
               data-testid="explorer-btn"
-              href=""
               rel="noreferrer"
               tabindex="0"
               target="_blank"
               type="button"
             >
               <mock-icon
-                aria-hidden="true"
-                classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
+                aria-hidden=""
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                 focusable="false"
               />
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </div>
         </div>
@@ -215,7 +203,7 @@ exports[`SettingsChange should display the SettingsChange component with newOwne
     </div>
   </div>
   <hr
-    class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-da8pia-MuiDivider-root"
+    class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-1facvfi-MuiDivider-root"
   />
 </div>
 `;
@@ -223,14 +211,15 @@ exports[`SettingsChange should display the SettingsChange component with newOwne
 exports[`SettingsChange should display the SettingsChange component with owner details 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 container css-1bq3jbz-MuiPaper-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 container css-zpxm0u-MuiPaper-root"
+    style="--Paper-shadow: none;"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1ab5q2h-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-14yu9oo-MuiTypography-root"
     >
       <mock-icon
-        aria-hidden="true"
-        classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-gxmw0o-MuiSvgIcon-root"
+        aria-hidden=""
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1hr8a3z-MuiSvgIcon-root"
         focusable="false"
       />
       New signer
@@ -285,19 +274,16 @@ exports[`SettingsChange should display the SettingsChange component with owner d
           >
             <button
               aria-label="Copy to clipboard"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
               tabindex="0"
               type="button"
             >
               <mock-icon
-                aria-hidden="true"
-                classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+                aria-hidden=""
+                class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
                 data-testid="copy-btn-icon"
                 focusable="false"
               />
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </span>
           <div
@@ -305,23 +291,19 @@ exports[`SettingsChange should display the SettingsChange component with owner d
           >
             <button
               aria-label=""
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1vbp2rr-MuiButtonBase-root-MuiIconButton-root"
               data-mui-internal-clone-element="true"
               data-testid="explorer-btn"
-              href=""
               rel="noreferrer"
               tabindex="0"
               target="_blank"
               type="button"
             >
               <mock-icon
-                aria-hidden="true"
-                classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
+                aria-hidden=""
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                 focusable="false"
               />
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </div>
         </div>
@@ -329,18 +311,18 @@ exports[`SettingsChange should display the SettingsChange component with owner d
     </div>
   </div>
   <hr
-    class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-da8pia-MuiDivider-root"
+    class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-1facvfi-MuiDivider-root"
   />
   <div
     class="MuiBox-root css-0"
   >
     <p
-      class="MuiTypography-root MuiTypography-body2 css-ceebrx-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-17vdyq3-MuiTypography-root"
     >
       Any transaction requires the confirmation of:
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1pqjor9-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-v6lhhw-MuiTypography-root"
     >
       <b>
         1
@@ -354,7 +336,7 @@ exports[`SettingsChange should display the SettingsChange component with owner d
     </p>
   </div>
   <hr
-    class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-da8pia-MuiDivider-root"
+    class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-1facvfi-MuiDivider-root"
   />
 </div>
 `;
diff --git a/src/components/tx/confirmation-views/SettingsChange/index.tsx b/src/components/tx/confirmation-views/SettingsChange/index.tsx
index 425d27a8d8..8037c7654d 100644
--- a/src/components/tx/confirmation-views/SettingsChange/index.tsx
+++ b/src/components/tx/confirmation-views/SettingsChange/index.tsx
@@ -27,7 +27,14 @@ const SettingsChange: React.FC<SettingsChangeProps> = ({ txInfo: { settingsInfo
     <>
       {'oldOwner' in settingsInfo && (
         <Paper sx={{ backgroundColor: ({ palette }) => palette.warning.background, p: 2 }}>
-          <Typography color="text.secondary" mb={2} display="flex" alignItems="center">
+          <Typography
+            sx={{
+              color: 'text.secondary',
+              mb: 2,
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
             <SvgIcon component={MinusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
             Previous signer
           </Typography>
@@ -40,12 +47,9 @@ const SettingsChange: React.FC<SettingsChangeProps> = ({ txInfo: { settingsInfo
           />
         </Paper>
       )}
-
       {'owner' in settingsInfo && !hasNewOwner && <OwnerList owners={[settingsInfo.owner]} />}
       {hasNewOwner && <OwnerList owners={[{ name: params.newOwner.name, value: params.newOwner.address }]} />}
-
       {shouldShowChangeSigner && <ChangeSignerSetupWarning />}
-
       {'threshold' in settingsInfo && (
         <>
           <Divider className={commonCss.nestedDivider} />
diff --git a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap b/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
index fe0820a949..699e1afa25 100644
--- a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
+++ b/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
@@ -3,14 +3,15 @@
 exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CHANGE transaction 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 container css-1bq3jbz-MuiPaper-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 container css-zpxm0u-MuiPaper-root"
+    style="--Paper-shadow: none;"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1ab5q2h-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-14yu9oo-MuiTypography-root"
     >
       <mock-icon
-        aria-hidden="true"
-        classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-gxmw0o-MuiSvgIcon-root"
+        aria-hidden=""
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1hr8a3z-MuiSvgIcon-root"
         focusable="false"
       />
       New signer
@@ -65,19 +66,16 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
           >
             <button
               aria-label="Copy to clipboard"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
               tabindex="0"
               type="button"
             >
               <mock-icon
-                aria-hidden="true"
-                classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+                aria-hidden=""
+                class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
                 data-testid="copy-btn-icon"
                 focusable="false"
               />
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </span>
           <div
@@ -85,23 +83,19 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
           >
             <button
               aria-label=""
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1vbp2rr-MuiButtonBase-root-MuiIconButton-root"
               data-mui-internal-clone-element="true"
               data-testid="explorer-btn"
-              href=""
               rel="noreferrer"
               tabindex="0"
               target="_blank"
               type="button"
             >
               <mock-icon
-                aria-hidden="true"
-                classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
+                aria-hidden=""
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                 focusable="false"
               />
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </div>
         </div>
@@ -109,18 +103,18 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
     </div>
   </div>
   <hr
-    class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-da8pia-MuiDivider-root"
+    class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-1facvfi-MuiDivider-root"
   />
   <div
     class="MuiBox-root css-0"
   >
     <p
-      class="MuiTypography-root MuiTypography-body2 css-ceebrx-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-17vdyq3-MuiTypography-root"
     >
       Any transaction requires the confirmation of:
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1pqjor9-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-v6lhhw-MuiTypography-root"
     >
       <b>
         1
@@ -134,7 +128,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
     </p>
   </div>
   <hr
-    class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-da8pia-MuiDivider-root"
+    class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-1facvfi-MuiDivider-root"
   />
   <div
     class="MuiStack-root css-1sazv7p-MuiStack-root"
@@ -143,69 +137,74 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
       class="MuiBox-root css-0"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1x8l8fd-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1befnxe-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: none;"
       >
-        <div
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-knbc2d-MuiButtonBase-root-MuiAccordionSummary-root"
-          data-testid="decoded-tx-summary"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
           <div
-            class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-6nefnh-MuiAccordionSummary-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-66oagt-MuiButtonBase-root-MuiAccordionSummary-root"
+            data-testid="decoded-tx-summary"
+            role="button"
+            tabindex="0"
           >
-            Advanced details
-            <span
-              class=""
-              data-mui-internal-clone-element="true"
+            <div
+              class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-1pnrdlh-MuiAccordionSummary-content"
             >
-              <mock-icon
-                aria-hidden="true"
-                classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-i8sqcg-MuiSvgIcon-root"
-                focusable="false"
+              Advanced details
+              <span
+                class=""
+                data-mui-internal-clone-element="true"
+              >
+                <mock-icon
+                  aria-hidden=""
+                  class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-17ibv3e-MuiSvgIcon-root"
+                  focusable="false"
+                />
+              </span>
+              <div
+                class="MuiBox-root css-i9gxme"
               />
-            </span>
+            </div>
             <div
-              class="MuiBox-root css-i9gxme"
-            />
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17ceore-MuiSvgIcon-root"
-              data-testid="ExpandMoreIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
             >
-              <path
-                d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dhtbeh-MuiSvgIcon-root"
+                data-testid="ExpandMoreIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 class="MuiAccordion-region"
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-7wcoc8-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-w74p4c-MuiAccordionDetails-root"
                   data-testid="decoded-tx-details"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                   >
                     <div
                       class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -213,7 +212,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                       style="word-break: break-word;"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
                       >
                         safeTxGas:
                       </p>
@@ -230,7 +229,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                     </div>
                   </div>
                   <div
-                    class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                   >
                     <div
                       class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -238,7 +237,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                       style="word-break: break-word;"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
                       >
                         baseGas:
                       </p>
@@ -251,7 +250,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                     </div>
                   </div>
                   <div
-                    class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                   >
                     <div
                       class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -259,7 +258,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                       style="word-break: break-word;"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
                       >
                         refundReceiver:
                       </p>
@@ -299,19 +298,16 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                             >
                               <button
                                 aria-label="Copy to clipboard"
-                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
                                 tabindex="0"
                                 type="button"
                               >
                                 <mock-icon
-                                  aria-hidden="true"
-                                  classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+                                  aria-hidden=""
+                                  class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
                                   data-testid="copy-btn-icon"
                                   focusable="false"
                                 />
-                                <span
-                                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                                />
                               </button>
                             </span>
                             <div
@@ -319,23 +315,19 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                             >
                               <button
                                 aria-label=""
-                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1vbp2rr-MuiButtonBase-root-MuiIconButton-root"
                                 data-mui-internal-clone-element="true"
                                 data-testid="explorer-btn"
-                                href=""
                                 rel="noreferrer"
                                 tabindex="0"
                                 target="_blank"
                                 type="button"
                               >
                                 <mock-icon
-                                  aria-hidden="true"
-                                  classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
+                                  aria-hidden=""
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                                   focusable="false"
                                 />
-                                <span
-                                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                                />
                               </button>
                             </div>
                           </div>
@@ -344,7 +336,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                     </div>
                   </div>
                   <div
-                    class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                   >
                     <div
                       class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -352,7 +344,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                       style="word-break: break-word;"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
                       >
                         Raw data:
                       </p>
@@ -377,19 +369,16 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                         >
                           <button
                             aria-label="Copy to clipboard"
-                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
                             tabindex="0"
                             type="button"
                           >
                             <mock-icon
-                              aria-hidden="true"
-                              classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+                              aria-hidden=""
+                              class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
                               data-testid="copy-btn-icon"
                               focusable="false"
                             />
-                            <span
-                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                            />
                           </button>
                         </span>
                       </div>
@@ -415,69 +404,74 @@ exports[`ConfirmationView should display a confirmation with method call when th
       class="MuiBox-root css-0"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1x8l8fd-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1befnxe-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: none;"
       >
-        <div
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-knbc2d-MuiButtonBase-root-MuiAccordionSummary-root"
-          data-testid="decoded-tx-summary"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
           <div
-            class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-6nefnh-MuiAccordionSummary-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-66oagt-MuiButtonBase-root-MuiAccordionSummary-root"
+            data-testid="decoded-tx-summary"
+            role="button"
+            tabindex="0"
           >
-            Advanced details
-            <span
-              class=""
-              data-mui-internal-clone-element="true"
+            <div
+              class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-1pnrdlh-MuiAccordionSummary-content"
             >
-              <mock-icon
-                aria-hidden="true"
-                classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-i8sqcg-MuiSvgIcon-root"
-                focusable="false"
+              Advanced details
+              <span
+                class=""
+                data-mui-internal-clone-element="true"
+              >
+                <mock-icon
+                  aria-hidden=""
+                  class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-17ibv3e-MuiSvgIcon-root"
+                  focusable="false"
+                />
+              </span>
+              <div
+                class="MuiBox-root css-i9gxme"
               />
-            </span>
+            </div>
             <div
-              class="MuiBox-root css-i9gxme"
-            />
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17ceore-MuiSvgIcon-root"
-              data-testid="ExpandMoreIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
             >
-              <path
-                d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dhtbeh-MuiSvgIcon-root"
+                data-testid="ExpandMoreIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 class="MuiAccordion-region"
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-7wcoc8-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-w74p4c-MuiAccordionDetails-root"
                   data-testid="decoded-tx-details"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                   >
                     <div
                       class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -485,7 +479,7 @@ exports[`ConfirmationView should display a confirmation with method call when th
                       style="word-break: break-word;"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
                       >
                         safeTxGas:
                       </p>
@@ -502,7 +496,7 @@ exports[`ConfirmationView should display a confirmation with method call when th
                     </div>
                   </div>
                   <div
-                    class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                   >
                     <div
                       class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -510,7 +504,7 @@ exports[`ConfirmationView should display a confirmation with method call when th
                       style="word-break: break-word;"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
                       >
                         baseGas:
                       </p>
@@ -523,7 +517,7 @@ exports[`ConfirmationView should display a confirmation with method call when th
                     </div>
                   </div>
                   <div
-                    class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                   >
                     <div
                       class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -531,7 +525,7 @@ exports[`ConfirmationView should display a confirmation with method call when th
                       style="word-break: break-word;"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
                       >
                         refundReceiver:
                       </p>
@@ -571,19 +565,16 @@ exports[`ConfirmationView should display a confirmation with method call when th
                             >
                               <button
                                 aria-label="Copy to clipboard"
-                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
                                 tabindex="0"
                                 type="button"
                               >
                                 <mock-icon
-                                  aria-hidden="true"
-                                  classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+                                  aria-hidden=""
+                                  class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
                                   data-testid="copy-btn-icon"
                                   focusable="false"
                                 />
-                                <span
-                                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                                />
                               </button>
                             </span>
                             <div
@@ -591,23 +582,19 @@ exports[`ConfirmationView should display a confirmation with method call when th
                             >
                               <button
                                 aria-label=""
-                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1vbp2rr-MuiButtonBase-root-MuiIconButton-root"
                                 data-mui-internal-clone-element="true"
                                 data-testid="explorer-btn"
-                                href=""
                                 rel="noreferrer"
                                 tabindex="0"
                                 target="_blank"
                                 type="button"
                               >
                                 <mock-icon
-                                  aria-hidden="true"
-                                  classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
+                                  aria-hidden=""
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                                   focusable="false"
                                 />
-                                <span
-                                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                                />
                               </button>
                             </div>
                           </div>
@@ -616,7 +603,7 @@ exports[`ConfirmationView should display a confirmation with method call when th
                     </div>
                   </div>
                   <div
-                    class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                   >
                     <div
                       class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
@@ -624,7 +611,7 @@ exports[`ConfirmationView should display a confirmation with method call when th
                       style="word-break: break-word;"
                     >
                       <p
-                        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
                       >
                         Raw data:
                       </p>
@@ -649,19 +636,16 @@ exports[`ConfirmationView should display a confirmation with method call when th
                         >
                           <button
                             aria-label="Copy to clipboard"
-                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
                             tabindex="0"
                             type="button"
                           >
                             <mock-icon
-                              aria-hidden="true"
-                              classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
+                              aria-hidden=""
+                              class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
                               data-testid="copy-btn-icon"
                               focusable="false"
                             />
-                            <span
-                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                            />
                           </button>
                         </span>
                       </div>
diff --git a/src/components/tx/confirmation-views/index.tsx b/src/components/tx/confirmation-views/index.tsx
index fe79c010f4..39f99518d7 100644
--- a/src/components/tx/confirmation-views/index.tsx
+++ b/src/components/tx/confirmation-views/index.tsx
@@ -21,6 +21,7 @@ import { TxModalContext } from '@/components/tx-flow'
 import { isSettingsChangeView, isChangeThresholdView, isConfirmBatchView } from './utils'
 import { OnChainConfirmation } from '@/components/transactions/TxDetails/TxData/NestedTransaction/OnChainConfirmation'
 import { ExecTransaction } from '@/components/transactions/TxDetails/TxData/NestedTransaction/ExecTransaction'
+import { type ReactElement } from 'react'
 
 type ConfirmationViewProps = {
   txDetails?: TransactionDetails
@@ -38,7 +39,7 @@ const getConfirmationViewComponent = ({
   txDetails,
   txInfo,
   txFlow,
-}: NarrowConfirmationViewProps & { txFlow?: JSX.Element }) => {
+}: NarrowConfirmationViewProps & { txFlow?: ReactElement }) => {
   if (isChangeThresholdView(txInfo)) return <ChangeThreshold txDetails={txDetails} />
 
   if (isConfirmBatchView(txFlow)) return <BatchTransactions />
diff --git a/src/components/tx/confirmation-views/utils.ts b/src/components/tx/confirmation-views/utils.ts
index 4e7e395221..5aedd30658 100644
--- a/src/components/tx/confirmation-views/utils.ts
+++ b/src/components/tx/confirmation-views/utils.ts
@@ -1,10 +1,11 @@
 import type { ChangeThreshold, SettingsChange, TransactionInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { SettingsInfoType, TransactionInfoType } from '@safe-global/safe-gateway-typescript-sdk'
 import { ConfirmBatchFlow } from '@/components/tx-flow/flows'
+import { type ReactElement } from 'react'
 
 export const isSettingsChangeView = (txInfo: TransactionInfo) => txInfo.type === TransactionInfoType.SETTINGS_CHANGE
 
-export const isConfirmBatchView = (txFlow?: JSX.Element) => txFlow?.type === ConfirmBatchFlow
+export const isConfirmBatchView = (txFlow?: ReactElement) => txFlow?.type === ConfirmBatchFlow
 
 export const isChangeThresholdView = (
   txInfo: TransactionInfo,
diff --git a/src/components/tx/security/blockaid/BlockaidBalanceChange.tsx b/src/components/tx/security/blockaid/BlockaidBalanceChange.tsx
index 71bce871cb..20433ffd18 100644
--- a/src/components/tx/security/blockaid/BlockaidBalanceChange.tsx
+++ b/src/components/tx/security/blockaid/BlockaidBalanceChange.tsx
@@ -41,11 +41,23 @@ const FungibleBalanceChange = ({ change, asset }: { asset: AssetDiff['asset']; c
 
   return (
     <>
-      <Typography variant="body2" mx={1}>
+      <Typography
+        variant="body2"
+        sx={{
+          mx: 1,
+        }}
+      >
         {change.value ? formatAmount(change.value) : 'unknown'}
       </Typography>
       <TokenIcon size={16} logoUri={logoUri} tokenSymbol={asset.symbol} />
-      <Typography variant="body2" fontWeight={700} display="inline" ml={0.5}>
+      <Typography
+        variant="body2"
+        sx={{
+          fontWeight: 700,
+          display: 'inline',
+          ml: 0.5,
+        }}
+      >
         {asset.symbol}
       </Typography>
       <span style={{ margin: 'auto' }} />
@@ -66,11 +78,23 @@ const NFTBalanceChange = ({
   return (
     <>
       {asset.symbol ? (
-        <Typography variant="body2" fontWeight={700} display="inline" ml={1}>
+        <Typography
+          variant="body2"
+          sx={{
+            fontWeight: 700,
+            display: 'inline',
+            ml: 1,
+          }}
+        >
           {asset.symbol}
         </Typography>
       ) : (
-        <Typography variant="body2" ml={1}>
+        <Typography
+          variant="body2"
+          sx={{
+            ml: 1,
+          }}
+        >
           <EthHashInfo
             address={asset.address}
             chainId={chainId}
@@ -84,7 +108,13 @@ const NFTBalanceChange = ({
           />
         </Typography>
       )}
-      <Typography variant="subtitle2" className={css.nftId} ml={1}>
+      <Typography
+        variant="subtitle2"
+        className={css.nftId}
+        sx={{
+          ml: 1,
+        }}
+      >
         #{Number(change.token_id)}
       </Typography>
       <span style={{ margin: 'auto' }} />
@@ -132,7 +162,12 @@ const BalanceChanges = () => {
             color: ({ palette }) => palette.text.secondary,
           }}
         />
-        <Typography variant="body2" color="text.secondary">
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+          }}
+        >
           Calculating...
         </Typography>
       </div>
@@ -140,14 +175,26 @@ const BalanceChanges = () => {
   }
   if (error) {
     return (
-      <Typography variant="body2" color="text.secondary" justifySelf="flex-end">
+      <Typography
+        variant="body2"
+        sx={{
+          color: 'text.secondary',
+          justifySelf: 'flex-end',
+        }}
+      >
         Could not calculate balance changes.
       </Typography>
     )
   }
   if (totalBalanceChanges === 0) {
     return (
-      <Typography variant="body2" color="text.secondary" justifySelf="flex-end">
+      <Typography
+        variant="body2"
+        sx={{
+          color: 'text.secondary',
+          justifySelf: 'flex-end',
+        }}
+      >
         No balance change detected
       </Typography>
     )
@@ -180,7 +227,13 @@ export const BlockaidBalanceChanges = () => {
 
   return (
     <div className={css.box}>
-      <Typography variant="subtitle2" fontWeight={700} flexShrink={0}>
+      <Typography
+        variant="subtitle2"
+        sx={{
+          fontWeight: 700,
+          flexShrink: 0,
+        }}
+      >
         Balance change
         <Tooltip
           title={
diff --git a/src/components/tx/security/blockaid/index.tsx b/src/components/tx/security/blockaid/index.tsx
index 2eb26c6f0f..3a61000bd8 100644
--- a/src/components/tx/security/blockaid/index.tsx
+++ b/src/components/tx/security/blockaid/index.tsx
@@ -84,7 +84,12 @@ const BlockaidResultWarning = ({
             <BlockaidMessage />
           </Alert>
           {needsRiskConfirmation && (
-            <Box pl={2} className={css.riskConfirmationBlock}>
+            <Box
+              className={css.riskConfirmationBlock}
+              sx={{
+                pl: 2,
+              }}
+            >
               <Track {...MODALS_EVENTS.ACCEPT_RISK}>
                 <FormControlLabel
                   label={
@@ -97,8 +102,20 @@ const BlockaidResultWarning = ({
               </Track>
             </Box>
           )}
-          <Stack direction="row" alignItems="center" spacing={0.5} mt={1}>
-            <Typography variant="caption" color="text.secondary">
+          <Stack
+            direction="row"
+            spacing={0.5}
+            sx={{
+              alignItems: 'center',
+              mt: 1,
+            }}
+          >
+            <Typography
+              variant="caption"
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
               Powered by
             </Typography>
             <BlockaidIcon />
@@ -126,7 +143,13 @@ const ResultDescription = ({
   }
 
   return (
-    <Typography fontWeight={700} variant="subtitle1" lineHeight="20px">
+    <Typography
+      variant="subtitle1"
+      sx={{
+        fontWeight: 700,
+        lineHeight: '20px',
+      }}
+    >
       {text ?? 'The transaction is malicious.'}
     </Typography>
   )
@@ -136,7 +159,12 @@ const BlockaidError = () => {
   return (
     <Alert severity="warning" className={css.customAlert}>
       <AlertTitle>
-        <Typography fontWeight={700} variant="subtitle1">
+        <Typography
+          variant="subtitle1"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
           Proceed with caution
         </Typography>
       </AlertTitle>
@@ -212,7 +240,13 @@ export const BlockaidMessage = () => {
   if (sortedSeverities.length === 0) return null
 
   return (
-    <Box display="flex" flexDirection="column" gap={1}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+      }}
+    >
       {sortedSeverities.map((key) => (
         <BlockaidHint key={key} warnings={groupedShownWarnings[key].map((warning) => warning.description)} />
       ))}
diff --git a/src/components/tx/security/blockaid/useBlockaid.ts b/src/components/tx/security/blockaid/useBlockaid.ts
index 5ea657de25..c328e97a92 100644
--- a/src/components/tx/security/blockaid/useBlockaid.ts
+++ b/src/components/tx/security/blockaid/useBlockaid.ts
@@ -36,7 +36,7 @@ export const useBlockaid = (
         threshold: safe.threshold,
       })
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
     [safe.chainId, safe.threshold, safeAddress, data, wallet?.address, isFeatureEnabled],
     false,
   )
diff --git a/src/components/tx/security/shared/TxSecurityContext.tsx b/src/components/tx/security/shared/TxSecurityContext.tsx
index edcaa570ae..13cb6c0676 100644
--- a/src/components/tx/security/shared/TxSecurityContext.tsx
+++ b/src/components/tx/security/shared/TxSecurityContext.tsx
@@ -1,6 +1,14 @@
 import { SecuritySeverity } from '@/services/security/modules/types'
 import { SafeTxContext } from '@/components/tx-flow/SafeTxProvider'
-import { createContext, type Dispatch, type SetStateAction, useContext, useMemo, useState } from 'react'
+import {
+  createContext,
+  type Dispatch,
+  type SetStateAction,
+  useContext,
+  useMemo,
+  useState,
+  type ReactElement,
+} from 'react'
 import type { BlockaidModuleResponse } from '@/services/security/modules/BlockaidModule'
 import { useBlockaid } from '../blockaid/useBlockaid'
 
@@ -44,7 +52,7 @@ export type TxSecurityContextProps = {
 
 export const TxSecurityContext = createContext<TxSecurityContextProps>(defaultSecurityContextValues)
 
-export const TxSecurityProvider = ({ children }: { children: JSX.Element }) => {
+export const TxSecurityProvider = ({ children }: { children: ReactElement }) => {
   const { safeTx, safeMessage } = useContext(SafeTxContext)
   const [blockaidResponse, blockaidError, blockaidLoading] = useBlockaid(safeTx ?? safeMessage)
 
diff --git a/src/components/tx/security/tenderly/__tests__/utils.test.ts b/src/components/tx/security/tenderly/__tests__/utils.test.ts
index 3005c06a73..a18f94562e 100644
--- a/src/components/tx/security/tenderly/__tests__/utils.test.ts
+++ b/src/components/tx/security/tenderly/__tests__/utils.test.ts
@@ -47,7 +47,7 @@ describe('simulation utils', () => {
             Promise.resolve({
               gasLimit: BigInt(30_000_000),
             }),
-        } as any),
+        }) as any,
     )
   })
   describe('getSimulationPayload', () => {
diff --git a/src/components/tx/security/tenderly/index.tsx b/src/components/tx/security/tenderly/index.tsx
index 6a2285587f..32190ca14a 100644
--- a/src/components/tx/security/tenderly/index.tsx
+++ b/src/components/tx/security/tenderly/index.tsx
@@ -51,7 +51,7 @@ const TxSimulationBlock = ({ transactions, disabled, gasLimit, executionOwner }:
     simulateTransaction({
       safe,
       // fall back to the first owner of the safe in case the transaction is created by a proposer
-      executionOwner: executionOwner ?? isSafeOwner ? wallet.address : safe.owners[0].value,
+      executionOwner: (executionOwner ?? isSafeOwner) ? wallet.address : safe.owners[0].value,
       transactions,
       gasLimit,
     } as SimulationTxParams)
@@ -65,7 +65,12 @@ const TxSimulationBlock = ({ transactions, disabled, gasLimit, executionOwner }:
   return (
     <Paper variant="outlined" className={sharedCss.wrapper}>
       <div className={css.wrapper}>
-        <Typography variant="body2" fontWeight={700}>
+        <Typography
+          variant="body2"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
           Run a simulation
           <Tooltip
             title="This transaction can be simulated before execution to ensure that it will be succeed, generating a detailed report of the transaction execution."
@@ -96,7 +101,6 @@ const TxSimulationBlock = ({ transactions, disabled, gasLimit, executionOwner }:
           />
         </Typography>
       </div>
-
       <div className={sharedCss.result}>
         {isLoading ? (
           <CircularProgress
@@ -107,12 +111,24 @@ const TxSimulationBlock = ({ transactions, disabled, gasLimit, executionOwner }:
           />
         ) : isFinished ? (
           !isSuccess || isError || isCallTraceError ? (
-            <Typography variant="body2" color="error.main" className={sharedCss.result}>
+            <Typography
+              variant="body2"
+              className={sharedCss.result}
+              sx={{
+                color: 'error.main',
+              }}
+            >
               <SvgIcon component={CloseIcon} inheritViewBox fontSize="small" sx={{ verticalAlign: 'middle', mr: 1 }} />
               Error
             </Typography>
           ) : (
-            <Typography variant="body2" color="success.main" className={sharedCss.result}>
+            <Typography
+              variant="body2"
+              className={sharedCss.result}
+              sx={{
+                color: 'success.main',
+              }}
+            >
               <SvgIcon component={CheckIcon} inheritViewBox fontSize="small" sx={{ verticalAlign: 'middle', mr: 1 }} />
               Success
             </Typography>
@@ -159,7 +175,12 @@ export const TxSimulationMessage = () => {
   if (!isSuccess || isError || isCallTraceError) {
     return (
       <Alert severity="error" sx={{ border: 'unset' }}>
-        <Typography variant="body2" fontWeight={700}>
+        <Typography
+          variant="body2"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
           Simulation failed
         </Typography>
         {requestError ? (
@@ -186,7 +207,12 @@ export const TxSimulationMessage = () => {
 
   return (
     <Alert severity="info" sx={{ border: 'unset' }}>
-      <Typography variant="body2" fontWeight={700}>
+      <Typography
+        variant="body2"
+        sx={{
+          fontWeight: 700,
+        }}
+      >
         Simulation successful
       </Typography>
       Full simulation report is available <ExternalLink href={simulationLink}>on Tenderly</ExternalLink>.
diff --git a/src/components/welcome/MyAccounts/AccountItem.tsx b/src/components/welcome/MyAccounts/AccountItem.tsx
index c2dda30b86..2d25ddba2d 100644
--- a/src/components/welcome/MyAccounts/AccountItem.tsx
+++ b/src/components/welcome/MyAccounts/AccountItem.tsx
@@ -87,7 +87,11 @@ const AccountItem = ({ onLinkClick, safeItem }: AccountItemProps) => {
     >
       <Track {...OVERVIEW_EVENTS.OPEN_SAFE} label={trackingLabel}>
         <Link onClick={onLinkClick} href={href} className={css.safeLink}>
-          <Box pr={2.5}>
+          <Box
+            sx={{
+              pr: 2.5,
+            }}
+          >
             <SafeIcon
               address={address}
               owners={safeOverview?.owners.length ?? counterfactualSetup?.owners.length}
@@ -98,12 +102,25 @@ const AccountItem = ({ onLinkClick, safeItem }: AccountItemProps) => {
 
           <Typography variant="body2" component="div" className={css.safeAddress}>
             {name && (
-              <Typography variant="subtitle2" component="p" fontWeight="bold" className={css.safeName}>
+              <Typography
+                variant="subtitle2"
+                component="p"
+                className={css.safeName}
+                sx={{
+                  fontWeight: 'bold',
+                }}
+              >
                 {name}
               </Typography>
             )}
             {chain?.shortName}:
-            <Typography color="var(--color-primary-light)" fontSize="inherit" component="span">
+            <Typography
+              component="span"
+              sx={{
+                color: 'var(--color-primary-light)',
+                fontSize: 'inherit',
+              }}
+            >
               {shortenAddress(address)}
             </Typography>
             {undeployedSafe && (
@@ -128,7 +145,14 @@ const AccountItem = ({ onLinkClick, safeItem }: AccountItemProps) => {
 
           <ChainIndicator chainId={chainId} responsive onlyLogo className={css.chainIndicator} />
 
-          <Typography variant="body2" fontWeight="bold" textAlign="right" pl={2}>
+          <Typography
+            variant="body2"
+            sx={{
+              fontWeight: 'bold',
+              textAlign: 'right',
+              pl: 2,
+            }}
+          >
             {safeOverview ? (
               <FiatValue value={safeOverview.fiatTotal} />
             ) : undeployedSafe ? null : (
@@ -137,9 +161,7 @@ const AccountItem = ({ onLinkClick, safeItem }: AccountItemProps) => {
           </Typography>
         </Link>
       </Track>
-
       <SafeListContextMenu name={name} address={address} chainId={chainId} addNetwork={isReplayable} rename />
-
       <QueueActions
         queued={safeOverview?.queued || 0}
         awaitingConfirmation={safeOverview?.awaitingConfirmation || 0}
diff --git a/src/components/welcome/MyAccounts/MultiAccountItem.tsx b/src/components/welcome/MyAccounts/MultiAccountItem.tsx
index 9b2279b2f9..7e00f2e083 100644
--- a/src/components/welcome/MyAccounts/MultiAccountItem.tsx
+++ b/src/components/welcome/MyAccounts/MultiAccountItem.tsx
@@ -49,9 +49,20 @@ const MultichainIndicator = ({ safes }: { safes: SafeItem[] }) => {
     <Tooltip
       title={
         <Box data-testid="multichain-tooltip">
-          <Typography fontSize="14px">Multichain account on:</Typography>
+          <Typography
+            sx={{
+              fontSize: '14px',
+            }}
+          >
+            Multichain account on:
+          </Typography>
           {safes.map((safeItem) => (
-            <Box p="4px 0px" key={safeItem.chainId}>
+            <Box
+              key={safeItem.chainId}
+              sx={{
+                p: '4px 0px',
+              }}
+            >
               <ChainIndicator chainId={safeItem.chainId} />
             </Box>
           ))}
@@ -152,27 +163,54 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
             '&.Mui-expanded': { backgroundColor: 'transparent !important' },
           }}
         >
-          <Box className={css.safeLink} width="100%">
-            <Box pr={2.5} data-testid="group-safe-icon">
+          <Box
+            className={css.safeLink}
+            sx={{
+              width: '100%',
+            }}
+          >
+            <Box
+              sx={{
+                pr: 2.5,
+              }}
+              data-testid="group-safe-icon"
+            >
               <SafeIcon address={address} owners={sharedSetup?.owners.length} threshold={sharedSetup?.threshold} />
             </Box>
             <Typography variant="body2" component="div" className={css.safeAddress}>
               {name && (
-                <Typography variant="subtitle2" component="p" fontWeight="bold" className={css.safeName}>
+                <Typography
+                  variant="subtitle2"
+                  component="p"
+                  className={css.safeName}
+                  sx={{
+                    fontWeight: 'bold',
+                  }}
+                >
                   {name}
                 </Typography>
               )}
               <Typography
                 data-testid="group-address"
-                color="var(--color-primary-light)"
-                fontSize="inherit"
                 component="span"
+                sx={{
+                  color: 'var(--color-primary-light)',
+                  fontSize: 'inherit',
+                }}
               >
                 {shortenAddress(address)}
               </Typography>
             </Typography>
             <MultichainIndicator safes={safes} />
-            <Typography data-testid="group-balance" variant="body2" fontWeight="bold" textAlign="right" pl={2}>
+            <Typography
+              data-testid="group-balance"
+              variant="body2"
+              sx={{
+                fontWeight: 'bold',
+                textAlign: 'right',
+                pl: 2,
+              }}
+            >
               {totalFiatValue !== undefined ? (
                 <FiatValue value={totalFiatValue} />
               ) : (
@@ -201,7 +239,15 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
           {!isWatchlist && hasReplayableSafe && (
             <>
               <Divider sx={{ ml: '-12px', mr: '-12px' }} />
-              <Box display="flex" alignItems="center" justifyContent="center" sx={{ ml: '-12px', mr: '-12px' }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  ml: '-12px',
+                  mr: '-12px',
+                }}
+              >
                 <AddNetworkButton
                   currentName={name}
                   safeAddress={address}
diff --git a/src/components/welcome/MyAccounts/PaginatedSafeList.tsx b/src/components/welcome/MyAccounts/PaginatedSafeList.tsx
index a45afcf35a..ef621e51e4 100644
--- a/src/components/welcome/MyAccounts/PaginatedSafeList.tsx
+++ b/src/components/welcome/MyAccounts/PaginatedSafeList.tsx
@@ -81,11 +81,25 @@ const PaginatedSafeList = ({ safes, title, action, noSafesMessage, onLinkClick }
   return (
     <Paper className={css.safeList}>
       <div className={css.listHeader}>
-        <Typography variant="h5" fontWeight={700} mb={2} className={css.listTitle}>
+        <Typography
+          variant="h5"
+          className={css.listTitle}
+          sx={{
+            fontWeight: 700,
+            mb: 2,
+          }}
+        >
           {title}
 
           {safes && safes.length > 0 && (
-            <Typography component="span" color="var(--color-primary-light)" fontSize="inherit" fontWeight="normal">
+            <Typography
+              component="span"
+              sx={{
+                color: 'var(--color-primary-light)',
+                fontSize: 'inherit',
+                fontWeight: 'normal',
+              }}
+            >
               {' '}
               ({safes.length})
             </Typography>
@@ -94,7 +108,6 @@ const PaginatedSafeList = ({ safes, title, action, noSafesMessage, onLinkClick }
 
         {action}
       </div>
-
       {totalSafes > 0 ? (
         <>
           {multiChainSafes && multiChainSafes.length > 0 && (
@@ -108,11 +121,13 @@ const PaginatedSafeList = ({ safes, title, action, noSafesMessage, onLinkClick }
         <Typography
           component="div"
           variant="body2"
-          color="text.secondary"
-          textAlign="center"
-          py={3}
-          mx="auto"
-          width={250}
+          sx={{
+            color: 'text.secondary',
+            textAlign: 'center',
+            py: 3,
+            mx: 'auto',
+            width: 250,
+          }}
         >
           {noSafesMessage}
         </Typography>
diff --git a/src/components/welcome/MyAccounts/QueueActions.tsx b/src/components/welcome/MyAccounts/QueueActions.tsx
index f7a7169546..cacdd5a3f1 100644
--- a/src/components/welcome/MyAccounts/QueueActions.tsx
+++ b/src/components/welcome/MyAccounts/QueueActions.tsx
@@ -13,7 +13,14 @@ const ChipLink = ({ children, color }: { children: ReactNode; color?: string })
     size="small"
     sx={{ backgroundColor: `${color}.background` }}
     label={
-      <Typography variant="caption" display="flex" alignItems="center" gap={0.5}>
+      <Typography
+        variant="caption"
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+        }}
+      >
         {children}
       </Typography>
     }
@@ -44,10 +51,22 @@ const QueueActions = ({
   }
 
   return (
-    <Box width="100%">
+    <Box
+      sx={{
+        width: '100%',
+      }}
+    >
       <Track {...OVERVIEW_EVENTS.OPEN_MISSING_SIGNATURES}>
         <NextLink href={queueLink}>
-          <Box px={2} pb={2} display="flex" gap={1} alignItems="center">
+          <Box
+            sx={{
+              px: 2,
+              pb: 2,
+              display: 'flex',
+              gap: 1,
+              alignItems: 'center',
+            }}
+          >
             {queued > 0 && (
               <ChipLink>
                 <SvgIcon component={TransactionsIcon} inheritViewBox fontSize="small" />
diff --git a/src/components/welcome/MyAccounts/SubAccountItem.tsx b/src/components/welcome/MyAccounts/SubAccountItem.tsx
index de8d1724e0..53dbc90f0d 100644
--- a/src/components/welcome/MyAccounts/SubAccountItem.tsx
+++ b/src/components/welcome/MyAccounts/SubAccountItem.tsx
@@ -63,7 +63,11 @@ const SubAccountItem = ({ onLinkClick, safeItem, safeOverview }: SubAccountItem)
     >
       <Track {...OVERVIEW_EVENTS.OPEN_SAFE} label={trackingLabel}>
         <Link onClick={onLinkClick} href={href} className={css.safeSubLink}>
-          <Box pr={2.5}>
+          <Box
+            sx={{
+              pr: 2.5,
+            }}
+          >
             <SafeIcon
               address={address}
               owners={safeOverview?.owners.length ?? cfSafeSetup?.owners.length}
@@ -75,11 +79,24 @@ const SubAccountItem = ({ onLinkClick, safeItem, safeOverview }: SubAccountItem)
 
           <Typography variant="body2" component="div" className={css.safeAddress}>
             {name && (
-              <Typography variant="subtitle2" component="p" fontWeight="bold" className={css.safeName}>
+              <Typography
+                variant="subtitle2"
+                component="p"
+                className={css.safeName}
+                sx={{
+                  fontWeight: 'bold',
+                }}
+              >
                 {name}
               </Typography>
             )}
-            <Typography color="var(--color-primary-light)" fontSize="inherit" component="span">
+            <Typography
+              component="span"
+              sx={{
+                color: 'var(--color-primary-light)',
+                fontSize: 'inherit',
+              }}
+            >
               {chain?.chainName}
             </Typography>
             {undeployedSafe && (
@@ -102,7 +119,14 @@ const SubAccountItem = ({ onLinkClick, safeItem, safeOverview }: SubAccountItem)
             )}
           </Typography>
 
-          <Typography variant="body2" fontWeight="bold" textAlign="right" pr={5}>
+          <Typography
+            variant="body2"
+            sx={{
+              fontWeight: 'bold',
+              textAlign: 'right',
+              pr: 5,
+            }}
+          >
             {safeOverview ? (
               <FiatValue value={safeOverview.fiatTotal} />
             ) : undeployedSafe ? null : (
@@ -111,11 +135,9 @@ const SubAccountItem = ({ onLinkClick, safeItem, safeOverview }: SubAccountItem)
           </Typography>
         </Link>
       </Track>
-
       {undeployedSafe && (
         <SafeListContextMenu name={name} address={address} chainId={chainId} addNetwork={false} rename={false} />
       )}
-
       <QueueActions
         queued={safeOverview?.queued || 0}
         awaitingConfirmation={safeOverview?.awaitingConfirmation || 0}
diff --git a/src/components/welcome/MyAccounts/index.tsx b/src/components/welcome/MyAccounts/index.tsx
index 8eb8491f3a..e21f679806 100644
--- a/src/components/welcome/MyAccounts/index.tsx
+++ b/src/components/welcome/MyAccounts/index.tsx
@@ -61,7 +61,13 @@ const AccountsList = ({ safes, onLinkClick }: AccountsListProps) => {
     <Box data-testid="sidebar-safe-container" className={css.container}>
       <Box className={css.myAccounts}>
         <Box className={css.header}>
-          <Typography variant="h1" fontWeight={700} className={css.title}>
+          <Typography
+            variant="h1"
+            className={css.title}
+            sx={{
+              fontWeight: 700,
+            }}
+          >
             Safe accounts
           </Typography>
           <Track {...OVERVIEW_EVENTS.CREATE_NEW_SAFE} label={trackingLabel}>
@@ -78,7 +84,13 @@ const AccountsList = ({ safes, onLinkClick }: AccountsListProps) => {
               NO_SAFES_MESSAGE
             ) : (
               <>
-                <Box mb={2}>Connect a wallet to view your Safe Accounts or to create a new one</Box>
+                <Box
+                  sx={{
+                    mb: 2,
+                  }}
+                >
+                  Connect a wallet to view your Safe Accounts or to create a new one
+                </Box>
                 <Track {...OVERVIEW_EVENTS.OPEN_ONBOARD} label={trackingLabel}>
                   <ConnectWalletButton text="Connect a wallet" contained />
                 </Track>
diff --git a/src/components/welcome/NewSafe.tsx b/src/components/welcome/NewSafe.tsx
index bd37e1943c..ac932b260c 100644
--- a/src/components/welcome/NewSafe.tsx
+++ b/src/components/welcome/NewSafe.tsx
@@ -8,7 +8,12 @@ import WelcomeLogin from './WelcomeLogin'
 const BulletListItem = ({ text }: { text: string }) => (
   <li>
     <SvgIcon className={css.checkIcon} component={CheckFilled} inheritViewBox />
-    <Typography color="static.main" fontWeight={700}>
+    <Typography
+      sx={{
+        color: 'static.main',
+        fontWeight: 700,
+      }}
+    >
       {text}
     </Typography>
   </li>
@@ -17,17 +22,46 @@ const BulletListItem = ({ text }: { text: string }) => (
 const NewSafe = () => {
   return (
     <>
-      <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
+      <Grid
+        container
+        spacing={3}
+        direction="row-reverse"
+        sx={{
+          p: 3,
+          pb: 0,
+          flex: 1,
+        }}
+      >
         <Grid item xs={12} lg={6}>
           <WelcomeLogin />
         </Grid>
-        <Grid item xs={12} lg={6} flex={1}>
+        <Grid
+          item
+          xs={12}
+          lg={6}
+          sx={{
+            flex: 1,
+          }}
+        >
           <div className={css.content}>
-            <Typography variant="h1" fontSize={[44, null, 52]} lineHeight={1} letterSpacing={-1.5} color="static.main">
+            <Typography
+              variant="h1"
+              sx={{
+                fontSize: [44, null, 52],
+                lineHeight: 1,
+                letterSpacing: -1.5,
+                color: 'static.main',
+              }}
+            >
               Unlock a new way of ownership
             </Typography>
 
-            <Typography mb={1} color="static.main">
+            <Typography
+              sx={{
+                mb: 1,
+                color: 'static.main',
+              }}
+            >
               The most trusted decentralized custody protocol and collective asset management platform.
             </Typography>
 
diff --git a/src/components/welcome/WelcomeLogin/WalletLogin.tsx b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
index 9486b34edf..a2d137faf8 100644
--- a/src/components/welcome/WelcomeLogin/WalletLogin.tsx
+++ b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
@@ -18,15 +18,28 @@ const WalletLogin = ({ onLogin, onContinue }: { onLogin: () => void; onContinue:
       <Box sx={{ width: '100%' }}>
         <Button variant="contained" sx={{ padding: '8px 16px' }} fullWidth onClick={onContinue}>
           <Box
-            width="100%"
-            justifyContent="space-between"
-            display="flex"
-            flexDirection="row"
-            alignItems="center"
-            gap={1}
+            sx={{
+              width: '100%',
+              justifyContent: 'space-between',
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 1,
+            }}
           >
-            <Box display="flex" flexDirection="column" alignItems="flex-start">
-              <Typography variant="subtitle2" fontWeight={700}>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+              }}
+            >
+              <Typography
+                variant="subtitle2"
+                sx={{
+                  fontWeight: 700,
+                }}
+              >
                 Continue with {wallet.label}
               </Typography>
               {wallet.address && (
diff --git a/src/components/welcome/WelcomeLogin/index.tsx b/src/components/welcome/WelcomeLogin/index.tsx
index 1b7fe98643..3d7ee16d80 100644
--- a/src/components/welcome/WelcomeLogin/index.tsx
+++ b/src/components/welcome/WelcomeLogin/index.tsx
@@ -42,11 +42,22 @@ const WelcomeLogin = () => {
       <Box className={css.loginContent}>
         <SvgIcon component={SafeLogo} inheritViewBox sx={{ height: '24px', width: '80px', ml: '-8px' }} />
 
-        <Typography variant="h6" mt={6} fontWeight={700}>
+        <Typography
+          variant="h6"
+          sx={{
+            mt: 6,
+            fontWeight: 700,
+          }}
+        >
           Get started
         </Typography>
 
-        <Typography mb={2} textAlign="center">
+        <Typography
+          sx={{
+            mb: 2,
+            textAlign: 'center',
+          }}
+        >
           {wallet
             ? 'Open your existing Safe Accounts or create a new one'
             : 'Connect your wallet to create a new Safe Account or open an existing one'}
@@ -59,7 +70,13 @@ const WelcomeLogin = () => {
         {!wallet && (
           <>
             <Divider sx={{ mt: 2, mb: 2, width: '100%' }}>
-              <Typography color="text.secondary" fontWeight={700} variant="overline">
+              <Typography
+                variant="overline"
+                sx={{
+                  color: 'text.secondary',
+                  fontWeight: 700,
+                }}
+              >
                 or
               </Typography>
             </Divider>
diff --git a/src/features/counterfactual/ActivateAccountButton.tsx b/src/features/counterfactual/ActivateAccountButton.tsx
index c6cd0e3b7e..a67719c663 100644
--- a/src/features/counterfactual/ActivateAccountButton.tsx
+++ b/src/features/counterfactual/ActivateAccountButton.tsx
@@ -38,7 +38,13 @@ const ActivateAccountButton = () => {
             >
               {isProcessing ? (
                 <>
-                  <Typography variant="body2" component="span" mr={1}>
+                  <Typography
+                    variant="body2"
+                    component="span"
+                    sx={{
+                      mr: 1,
+                    }}
+                  >
                     Processing
                   </Typography>
                   <CircularProgress size={16} />
diff --git a/src/features/counterfactual/ActivateAccountFlow.tsx b/src/features/counterfactual/ActivateAccountFlow.tsx
index bf9cf65f67..f81fe272fe 100644
--- a/src/features/counterfactual/ActivateAccountFlow.tsx
+++ b/src/features/counterfactual/ActivateAccountFlow.tsx
@@ -163,7 +163,13 @@ const ActivateAccountFlow = () => {
         />
 
         <Divider sx={{ mx: -3, mt: 2, mb: 1 }} />
-        <Box display="flex" flexDirection="column" gap={3}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 3,
+          }}
+        >
           {canRelay && (
             <Grid container spacing={3}>
               <ReviewRow
@@ -187,7 +193,13 @@ const ActivateAccountFlow = () => {
                   <NetworkFee totalFee={totalFee} isWaived={willRelay || isWrongChain} chain={chain} />
 
                   {!willRelay && (
-                    <Typography variant="body2" color="text.secondary" mt={1}>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        color: 'text.secondary',
+                        mt: 1,
+                      }}
+                    >
                       {isWrongChain
                         ? `Switch your connected wallet to ${chain?.chainName} to see the correct estimated network fee`
                         : 'You will have to confirm a transaction with your connected wallet.'}
@@ -199,7 +211,11 @@ const ActivateAccountFlow = () => {
           </Grid>
 
           {submitError && (
-            <Box mt={1}>
+            <Box
+              sx={{
+                mt: 1,
+              }}
+            >
               <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
             </Box>
           )}
@@ -213,7 +229,14 @@ const ActivateAccountFlow = () => {
 
         <Divider sx={{ mx: -3, mt: 2, mb: 1 }} />
 
-        <Box display="flex" flexDirection="row" justifyContent="flex-end" gap={3}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            gap: 3,
+          }}
+        >
           <CheckWallet checkNetwork={!submitDisabled} allowNonOwner allowUndeployedSafe>
             {(isOk) => (
               <Button
diff --git a/src/features/counterfactual/CheckBalance.tsx b/src/features/counterfactual/CheckBalance.tsx
index 6424ea57ee..214ffc4c4e 100644
--- a/src/features/counterfactual/CheckBalance.tsx
+++ b/src/features/counterfactual/CheckBalance.tsx
@@ -22,10 +22,20 @@ const CheckBalance = () => {
       severity="info"
       sx={{ display: 'flex', maxWidth: '600px', mt: 3, px: 3, py: 2, mx: 'auto' }}
     >
-      <Typography fontWeight="bold" mb={1}>
+      <Typography
+        sx={{
+          fontWeight: 'bold',
+          mb: 1,
+        }}
+      >
         Don&apos;t see your tokens?
       </Typography>
-      <Typography variant="body2" mb={2}>
+      <Typography
+        variant="body2"
+        sx={{
+          mb: 2,
+        }}
+      >
         Your Safe Account is not activated yet so we can only display your native balance. Non-native tokens may not
         show up immediately after the Safe is deployed. Finish the onboarding to deploy your account onchain and unlock
         all features.{' '}
@@ -38,7 +48,6 @@ const CheckBalance = () => {
           </>
         )}
       </Typography>
-
       <ActivateAccountButton />
     </Alert>
   )
diff --git a/src/features/counterfactual/CounterfactualForm.tsx b/src/features/counterfactual/CounterfactualForm.tsx
index e91a6199cf..baa3937183 100644
--- a/src/features/counterfactual/CounterfactualForm.tsx
+++ b/src/features/counterfactual/CounterfactualForm.tsx
@@ -164,7 +164,11 @@ export const CounterfactualForm = ({
         )}
 
         {submitError && (
-          <Box mt={1}>
+          <Box
+            sx={{
+              mt: 1,
+            }}
+          >
             <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
           </Box>
         )}
diff --git a/src/features/counterfactual/CounterfactualSuccessScreen.tsx b/src/features/counterfactual/CounterfactualSuccessScreen.tsx
index 3d365ed253..8b482621c6 100644
--- a/src/features/counterfactual/CounterfactualSuccessScreen.tsx
+++ b/src/features/counterfactual/CounterfactualSuccessScreen.tsx
@@ -79,8 +79,20 @@ const CounterfactualSuccessScreen = () => {
           <CheckRoundedIcon sx={{ width: 50, height: 50 }} color="success" />
         </Box>
 
-        <Box data-testid="safe-activation-message" textAlign="center">
-          <Typography data-testid="account-success-message" variant="h3" fontWeight="bold" mb={1}>
+        <Box
+          data-testid="safe-activation-message"
+          sx={{
+            textAlign: 'center',
+          }}
+        >
+          <Typography
+            data-testid="account-success-message"
+            variant="h3"
+            sx={{
+              fontWeight: 'bold',
+              mb: 1,
+            }}
+          >
             {isCFCreation ? 'Your account is almost set!' : 'Your account is all set!'}
           </Typography>
           <Typography variant="body2">
@@ -98,9 +110,22 @@ const CounterfactualSuccessScreen = () => {
         </Box>
 
         {safeAddress && (
-          <Box data-testid="safe-info" p={2} bgcolor="background.main" borderRadius={1} fontSize={14}>
+          <Box
+            data-testid="safe-info"
+            sx={{
+              p: 2,
+              bgcolor: 'background.main',
+              borderRadius: 1,
+              fontSize: 14,
+            }}
+          >
             <NetworkLogosList networks={networks.length > 0 ? networks : chain ? [chain] : []} />
-            <Typography variant="h5" mt={2}>
+            <Typography
+              variant="h5"
+              sx={{
+                mt: 2,
+              }}
+            >
               {safeName}
             </Typography>
             <EthHashInfo
diff --git a/src/features/counterfactual/FirstTxFlow.tsx b/src/features/counterfactual/FirstTxFlow.tsx
index a30fa14218..9254f615d8 100644
--- a/src/features/counterfactual/FirstTxFlow.tsx
+++ b/src/features/counterfactual/FirstTxFlow.tsx
@@ -73,7 +73,15 @@ const FirstTxFlow = ({ open, onClose }: { open: boolean; onClose: () => void })
 
   return (
     <ModalDialog open={open} dialogTitle="Create new transaction" hideChainIndicator onClose={onClose}>
-      <Grid container justifyContent="center" flexDirection="column" p={3} spacing={2}>
+      <Grid
+        container
+        spacing={2}
+        sx={{
+          justifyContent: 'center',
+          flexDirection: 'column',
+          p: 3,
+        }}
+      >
         <Grid item>
           <ChoiceButton
             title="Activate Safe now"
diff --git a/src/features/counterfactual/PayNowPayLater.tsx b/src/features/counterfactual/PayNowPayLater.tsx
index 4232427dc9..138f00d215 100644
--- a/src/features/counterfactual/PayNowPayLater.tsx
+++ b/src/features/counterfactual/PayNowPayLater.tsx
@@ -42,7 +42,12 @@ const PayNowPayLater = ({
 
   return (
     <>
-      <Typography variant="h4" fontWeight="bold">
+      <Typography
+        variant="h4"
+        sx={{
+          fontWeight: 'bold',
+        }}
+      >
         Before we continue...
       </Typography>
       {isMultiChain && (
@@ -96,7 +101,13 @@ const PayNowPayLater = ({
               label={
                 <>
                   <Typography className={css.radioTitle}>Pay now</Typography>
-                  <Typography className={css.radioSubtitle} variant="body2" color="text.secondary">
+                  <Typography
+                    className={css.radioSubtitle}
+                    variant="body2"
+                    sx={{
+                      color: 'text.secondary',
+                    }}
+                  >
                     {canRelay ? (
                       'Sponsored free transaction'
                     ) : (
@@ -118,7 +129,13 @@ const PayNowPayLater = ({
               label={
                 <>
                   <Typography className={css.radioTitle}>Pay later</Typography>
-                  <Typography className={css.radioSubtitle} variant="body2" color="text.secondary">
+                  <Typography
+                    className={css.radioSubtitle}
+                    variant="body2"
+                    sx={{
+                      color: 'text.secondary',
+                    }}
+                  >
                     with the first transaction
                   </Typography>
                 </>
diff --git a/src/features/counterfactual/__tests__/useDeployGasLimit.test.ts b/src/features/counterfactual/__tests__/useDeployGasLimit.test.ts
index c5ef2d8184..24e4f42fbb 100644
--- a/src/features/counterfactual/__tests__/useDeployGasLimit.test.ts
+++ b/src/features/counterfactual/__tests__/useDeployGasLimit.test.ts
@@ -87,7 +87,7 @@ describe('useDeployGasLimit hook', () => {
       getContractManager: () =>
         ({
           contractNetworks: {},
-        } as any),
+        }) as any,
       getContractVersion: () => Promise.resolve('1.3.0'),
       createSafeDeploymentTransaction: () =>
         Promise.resolve({
diff --git a/src/features/counterfactual/utils.ts b/src/features/counterfactual/utils.ts
index e04772b29b..37ad4c3fbd 100644
--- a/src/features/counterfactual/utils.ts
+++ b/src/features/counterfactual/utils.ts
@@ -122,7 +122,7 @@ export const getCounterfactualBalance = async (
   } else {
     const cachedBalance = getNativeBalance()
     const useCache = cachedBalance !== undefined && cachedBalance > 0n && !ignoreCache
-    balance = useCache ? cachedBalance : (await getWeb3ReadOnly()?.getBalance(safeAddress)) ?? 0n
+    balance = useCache ? cachedBalance : ((await getWeb3ReadOnly()?.getBalance(safeAddress)) ?? 0n)
     setNativeBalance(balance)
   }
 
diff --git a/src/features/multichain/components/CreateSafeOnNewChain/index.tsx b/src/features/multichain/components/CreateSafeOnNewChain/index.tsx
index 01a21e002e..df7185c268 100644
--- a/src/features/multichain/components/CreateSafeOnNewChain/index.tsx
+++ b/src/features/multichain/components/CreateSafeOnNewChain/index.tsx
@@ -171,7 +171,14 @@ const ReplaySafeDialog = ({
               <Typography>Add this Safe to another network with the same address.</Typography>
 
               {chain && (
-                <Box data-testid="added-network" p={2} sx={{ backgroundColor: 'background.main', borderRadius: '6px' }}>
+                <Box
+                  data-testid="added-network"
+                  sx={{
+                    p: 2,
+                    backgroundColor: 'background.main',
+                    borderRadius: '6px',
+                  }}
+                >
                   <ChainIndicator chainId={chain.chainId} />
                 </Box>
               )}
@@ -182,7 +189,13 @@ const ReplaySafeDialog = ({
               </ErrorMessage>
 
               {safeCreationDataLoading ? (
-                <Stack direction="column" alignItems="center" gap={1}>
+                <Stack
+                  direction="column"
+                  sx={{
+                    alignItems: 'center',
+                    gap: 1,
+                  }}
+                >
                   <CircularProgress />
                   <Typography variant="body2">Loading Safe data</Typography>
                 </Stack>
@@ -210,7 +223,14 @@ const ReplaySafeDialog = ({
         </DialogContent>
         <DialogActions>
           {isUnsupportedSafeCreationVersion ? (
-            <Box display="flex" width="100%" alignItems="center" justifyContent="space-between">
+            <Box
+              sx={{
+                display: 'flex',
+                width: '100%',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}
+            >
               <ExternalLink sx={{ flexGrow: 1 }} href={MULTICHAIN_HELP_ARTICLE}>
                 Read more
               </ExternalLink>
diff --git a/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx b/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx
index 33a5417525..e1e3f83532 100644
--- a/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx
+++ b/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx
@@ -19,9 +19,23 @@ const ChainIndicatorList = ({ chainIds }: { chainIds: string[] }) => {
       {chainIds.map((chainId, index) => {
         const chain = configs.find((chain) => chain.chainId === chainId)
         return (
-          <Box key={chainId} display="inline-flex" flexWrap="wrap" position="relative" top={5}>
+          <Box
+            key={chainId}
+            sx={{
+              display: 'inline-flex',
+              flexWrap: 'wrap',
+              position: 'relative',
+              top: 5,
+            }}
+          >
             <ChainIndicator key={chainId} chainId={chainId} showUnknown={false} onlyLogo={true} />
-            <Typography position="relative" top={2} mx={0.5}>
+            <Typography
+              sx={{
+                position: 'relative',
+                top: 2,
+                mx: 0.5,
+              }}
+            >
               {chain && chain.chainName}
               {index === chainIds.length - 1 ? '.' : ','}
             </Typography>
@@ -61,11 +75,20 @@ export const InconsistentSignerSetupWarning = () => {
 
   return (
     <ErrorMessage level="warning" title="Signers are not consistent">
-      <Typography display="inline" mr={1}>
+      <Typography
+        sx={{
+          display: 'inline',
+          mr: 1,
+        }}
+      >
         Signers are different on these networks of this account:
       </Typography>
       <ChainIndicatorList chainIds={deviatingChainIds} />
-      <Typography display="inline">
+      <Typography
+        sx={{
+          display: 'inline',
+        }}
+      >
         To manage your account easier and to prevent lose of funds, we recommend keeping the same signers.
       </Typography>
     </ErrorMessage>
diff --git a/src/features/proposers/components/DeleteProposerDialog.tsx b/src/features/proposers/components/DeleteProposerDialog.tsx
index ac79ae1aec..d7e69e571e 100644
--- a/src/features/proposers/components/DeleteProposerDialog.tsx
+++ b/src/features/proposers/components/DeleteProposerDialog.tsx
@@ -40,7 +40,7 @@ type DeleteProposerProps = {
   proposer: Delegate
 }
 
-const _DeleteProposer = ({ wallet, safeAddress, chainId, proposer }: DeleteProposerProps) => {
+const InternalDeleteProposer = ({ wallet, safeAddress, chainId, proposer }: DeleteProposerProps) => {
   const [open, setOpen] = useState<boolean>(false)
   const [error, setError] = useState<Error>()
   const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -112,8 +112,8 @@ const _DeleteProposer = ({ wallet, safeAddress, chainId, proposer }: DeletePropo
                 isOk && canDelete
                   ? 'Delete proposer'
                   : isOk && !canDelete
-                  ? 'Only the owner of this proposer or the proposer itself can delete them'
-                  : undefined
+                    ? 'Only the owner of this proposer or the proposer itself can delete them'
+                    : undefined
               }
             >
               <span>
@@ -198,7 +198,7 @@ const _DeleteProposer = ({ wallet, safeAddress, chainId, proposer }: DeletePropo
   )
 }
 
-const DeleteProposerDialog = madProps(_DeleteProposer, {
+const DeleteProposerDialog = madProps(InternalDeleteProposer, {
   wallet: useWallet,
   chainId: useChainId,
   safeAddress: useSafeAddress,
diff --git a/src/features/proposers/components/EditProposerDialog.tsx b/src/features/proposers/components/EditProposerDialog.tsx
index 9450125237..d42eb4f51c 100644
--- a/src/features/proposers/components/EditProposerDialog.tsx
+++ b/src/features/proposers/components/EditProposerDialog.tsx
@@ -24,8 +24,8 @@ const EditProposerDialog = ({ proposer }: { proposer: Delegate }) => {
                 isOk && canEdit
                   ? 'Edit proposer'
                   : isOk && !canEdit
-                  ? 'Only the owner of this proposer can edit them'
-                  : undefined
+                    ? 'Only the owner of this proposer can edit them'
+                    : undefined
               }
             >
               <span>
diff --git a/src/features/recovery/components/ExecuteRecoveryButton/index.tsx b/src/features/recovery/components/ExecuteRecoveryButton/index.tsx
index c71ef9ffc7..3a5da0627e 100644
--- a/src/features/recovery/components/ExecuteRecoveryButton/index.tsx
+++ b/src/features/recovery/components/ExecuteRecoveryButton/index.tsx
@@ -40,8 +40,8 @@ export function ExecuteRecoveryButton({
                 ? isWrongChain
                   ? `Switch your wallet network to ${chain?.chainName} to execute this transaction`
                   : isNext
-                  ? 'You can execute the recovery after the specified review window'
-                  : 'Previous recovery proposals must be executed or cancelled first'
+                    ? 'You can execute the recovery after the specified review window'
+                    : 'Previous recovery proposals must be executed or cancelled first'
                 : null
             }
           >
diff --git a/src/features/recovery/components/GroupedRecoveryListItems/index.tsx b/src/features/recovery/components/GroupedRecoveryListItems/index.tsx
index 7cccaad24f..2159b7cdb9 100644
--- a/src/features/recovery/components/GroupedRecoveryListItems/index.tsx
+++ b/src/features/recovery/components/GroupedRecoveryListItems/index.tsx
@@ -22,7 +22,12 @@ function Disclaimer({ isMalicious }: { isMalicious: boolean }): ReactElement {
       sx={{ bgcolor: ({ palette }) => `${palette.warning.background} !important` }}
     >
       <Typography>
-        <Typography component="span" fontWeight={700}>
+        <Typography
+          component="span"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
           Cancelling {isMalicious ? 'malicious transaction' : 'Account recovery'}.
         </Typography>{' '}
         You will need to execute the cancellation.{' '}
@@ -44,13 +49,26 @@ export function GroupedRecoveryListItems({ items }: { items: Array<Transaction |
 
   return (
     <Paper className={[css.container, customCss.recoveryGroupContainer].join(' ')}>
-      <Box gridArea="warning" className={css.disclaimerContainer}>
+      <Box
+        className={css.disclaimerContainer}
+        sx={{
+          gridArea: 'warning',
+        }}
+      >
         <Disclaimer isMalicious={isMalicious} />
       </Box>
-
-      <Box gridArea="line" className={css.line} />
-
-      <Box gridArea="items" className={css.txItems}>
+      <Box
+        className={css.line}
+        sx={{
+          gridArea: 'line',
+        }}
+      />
+      <Box
+        className={css.txItems}
+        sx={{
+          gridArea: 'items',
+        }}
+      >
         {cancellations.map((tx) => (
           <div key={tx.transaction.id}>
             <ExpandableTransactionItem item={tx} />
diff --git a/src/features/recovery/components/RecoveryCards/RecoveryInProgressCard.tsx b/src/features/recovery/components/RecoveryCards/RecoveryInProgressCard.tsx
index d4d81ebafb..53d55615e6 100644
--- a/src/features/recovery/components/RecoveryCards/RecoveryInProgressCard.tsx
+++ b/src/features/recovery/components/RecoveryCards/RecoveryInProgressCard.tsx
@@ -42,13 +42,13 @@ export function RecoveryInProgressCard({ orientation = 'vertical', onClose, reco
   const title = isExecutable
     ? 'Account can be recovered'
     : isExpired
-    ? 'Account recovery expired'
-    : 'Account recovery in progress'
+      ? 'Account recovery expired'
+      : 'Account recovery in progress'
   const desc = isExecutable
     ? 'The review window has passed and it is now possible to execute the recovery proposal.'
     : isExpired
-    ? 'The pending recovery proposal has expired and needs to be cancelled before a new one can be created.'
-    : 'The recovery process has started. This Account will be ready to recover in:'
+      ? 'The pending recovery proposal has expired and needs to be cancelled before a new one can be created.'
+      : 'The recovery process has started. This Account will be ready to recover in:'
 
   const link = (
     <Track {...RECOVERY_EVENTS.LEARN_MORE} label="in-progress-card">
@@ -63,19 +63,32 @@ export function RecoveryInProgressCard({ orientation = 'vertical', onClose, reco
       <Card sx={{ py: 3, px: 4 }}>
         <Grid
           container
-          display="flex"
-          alignItems={{ xs: 'flex-start', md: 'center' }}
-          gap={3}
-          flexDirection={{ xs: 'column', md: 'row' }}
+          sx={{
+            display: 'flex',
+            alignItems: { xs: 'flex-start', md: 'center' },
+            gap: 3,
+            flexDirection: { xs: 'column', md: 'row' },
+          }}
         >
           <Grid item>{icon}</Grid>
 
           <Grid item xs>
-            <Typography variant="h6" fontWeight={700} mb={1}>
+            <Typography
+              variant="h6"
+              sx={{
+                fontWeight: 700,
+                mb: 1,
+              }}
+            >
               {title}
             </Typography>
 
-            <Typography color="primary.light" mb={1}>
+            <Typography
+              sx={{
+                color: 'primary.light',
+                mb: 1,
+              }}
+            >
               {desc}
             </Typography>
 
@@ -90,19 +103,45 @@ export function RecoveryInProgressCard({ orientation = 'vertical', onClose, reco
 
   return (
     <Card elevation={0} className={css.card}>
-      <Grid container display="flex" flexDirection="column" gap={4}>
-        <Grid item xs={12} display="flex" justifyContent="space-between">
+      <Grid
+        container
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 4,
+        }}
+      >
+        <Grid
+          item
+          xs={12}
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}
+        >
           {icon}
 
           {link}
         </Grid>
 
         <Grid item xs={12}>
-          <Typography variant="h6" fontWeight={700} mb={2}>
+          <Typography
+            variant="h6"
+            sx={{
+              fontWeight: 700,
+              mb: 2,
+            }}
+          >
             {title}
           </Typography>
 
-          <Typography mb={2}>{desc}</Typography>
+          <Typography
+            sx={{
+              mb: 2,
+            }}
+          >
+            {desc}
+          </Typography>
 
           <Countdown seconds={remainingSeconds} />
         </Grid>
diff --git a/src/features/recovery/components/RecoveryCards/RecoveryProposalCard.tsx b/src/features/recovery/components/RecoveryCards/RecoveryProposalCard.tsx
index ce153d1da3..5953417988 100644
--- a/src/features/recovery/components/RecoveryCards/RecoveryProposalCard.tsx
+++ b/src/features/recovery/components/RecoveryCards/RecoveryProposalCard.tsx
@@ -31,7 +31,12 @@ type Props =
       setTxFlow: TxModalContextType['setTxFlow']
     }
 
-export function _RecoveryProposalCard({ orientation = 'vertical', onClose, safe, setTxFlow }: Props): ReactElement {
+export function InternalRecoveryProposalCard({
+  orientation = 'vertical',
+  onClose,
+  safe,
+  setTxFlow,
+}: Props): ReactElement {
   const isDarkMode = useDarkMode()
 
   const onRecover = async () => {
@@ -70,19 +75,32 @@ export function _RecoveryProposalCard({ orientation = 'vertical', onClose, safe,
       <Card data-testid="recovery-proposal-hr" sx={{ py: 3, px: 4 }}>
         <Grid
           container
-          display="flex"
-          alignItems={{ xs: 'flex-start', md: 'center' }}
-          gap={3}
-          flexDirection={{ xs: 'column', md: 'row' }}
+          sx={{
+            display: 'flex',
+            alignItems: { xs: 'flex-start', md: 'center' },
+            gap: 3,
+            flexDirection: { xs: 'column', md: 'row' },
+          }}
         >
           <Grid item>{icon}</Grid>
 
           <Grid item xs>
-            <Typography variant="h6" fontWeight={700} mb={1}>
+            <Typography
+              variant="h6"
+              sx={{
+                fontWeight: 700,
+                mb: 1,
+              }}
+            >
               {title}
             </Typography>
 
-            <Typography color="primary.light" mb={1}>
+            <Typography
+              sx={{
+                color: 'primary.light',
+                mb: 1,
+              }}
+            >
               {desc}
             </Typography>
 
@@ -97,26 +115,58 @@ export function _RecoveryProposalCard({ orientation = 'vertical', onClose, safe,
 
   return (
     <Card data-testid="recovery-proposal" elevation={0} className={css.card}>
-      <Grid container display="flex" flexDirection="column" gap={4}>
-        <Grid item xs={12} display="flex" justifyContent="space-between">
+      <Grid
+        container
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 4,
+        }}
+      >
+        <Grid
+          item
+          xs={12}
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}
+        >
           {icon}
 
           {link}
         </Grid>
 
         <Grid item xs={12}>
-          <Typography variant="h6" fontWeight={700} mb={2}>
+          <Typography
+            variant="h6"
+            sx={{
+              fontWeight: 700,
+              mb: 2,
+            }}
+          >
             {title}
           </Typography>
 
-          <Typography color="primary.light" mb={2}>
+          <Typography
+            sx={{
+              color: 'primary.light',
+              mb: 2,
+            }}
+          >
             {desc}
           </Typography>
         </Grid>
 
         <Divider flexItem sx={{ mx: -4 }} />
 
-        <Grid item container justifyContent="flex-end" gap={{ md: 1 }}>
+        <Grid
+          item
+          container
+          sx={{
+            justifyContent: 'flex-end',
+            gap: { md: 1 },
+          }}
+        >
           <Button
             data-testid="postpone-recovery-btn"
             onClick={() => {
@@ -134,10 +184,10 @@ export function _RecoveryProposalCard({ orientation = 'vertical', onClose, safe,
 }
 
 // Appease TypeScript
-const _useSafe = () => useSafeInfo().safe
-const _useSetTxFlow = () => useContext(TxModalContext).setTxFlow
+const InternalUseSafe = () => useSafeInfo().safe
+const InternalUseSetTxFlow = () => useContext(TxModalContext).setTxFlow
 
-export const RecoveryProposalCard = madProps(_RecoveryProposalCard, {
-  safe: _useSafe,
-  setTxFlow: _useSetTxFlow,
+export const RecoveryProposalCard = madProps(InternalRecoveryProposalCard, {
+  safe: InternalUseSafe,
+  setTxFlow: InternalUseSetTxFlow,
 })
diff --git a/src/features/recovery/components/RecoveryCards/__tests__/RecoveryProposalCard.test.tsx b/src/features/recovery/components/RecoveryCards/__tests__/RecoveryProposalCard.test.tsx
index 76904dddbe..aaa6f452e1 100644
--- a/src/features/recovery/components/RecoveryCards/__tests__/RecoveryProposalCard.test.tsx
+++ b/src/features/recovery/components/RecoveryCards/__tests__/RecoveryProposalCard.test.tsx
@@ -2,7 +2,7 @@ import { faker } from '@faker-js/faker'
 import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 import { fireEvent, render } from '@/tests/test-utils'
-import { _RecoveryProposalCard } from '../RecoveryProposalCard'
+import { InternalRecoveryProposalCard } from '../RecoveryProposalCard'
 
 describe('RecoveryProposalCard', () => {
   describe('vertical', () => {
@@ -11,7 +11,7 @@ describe('RecoveryProposalCard', () => {
       const mockSetTxFlow = jest.fn()
 
       const { queryByText } = render(
-        <_RecoveryProposalCard
+        <InternalRecoveryProposalCard
           orientation="vertical"
           onClose={mockClose}
           safe={{ owners: [{ value: faker.finance.ethereumAddress() }] } as SafeInfo}
@@ -41,7 +41,7 @@ describe('RecoveryProposalCard', () => {
     const mockSetTxFlow = jest.fn()
 
     const { queryByText } = render(
-      <_RecoveryProposalCard
+      <InternalRecoveryProposalCard
         orientation="horizontal"
         safe={{ owners: [{ value: faker.finance.ethereumAddress() }] } as SafeInfo}
         setTxFlow={mockSetTxFlow}
diff --git a/src/features/recovery/components/RecoveryContext/useRecoveryPendingTxs.ts b/src/features/recovery/components/RecoveryContext/useRecoveryPendingTxs.ts
index 48bd0fe9d8..b7b3dbda87 100644
--- a/src/features/recovery/components/RecoveryContext/useRecoveryPendingTxs.ts
+++ b/src/features/recovery/components/RecoveryContext/useRecoveryPendingTxs.ts
@@ -10,7 +10,7 @@ export type PendingRecoveryTransactions = {
   }
 }
 
-const pendingStatuses: { [key in RecoveryEvent]: RecoveryEvent | null } = {
+const pendingStatuses: { [_key in RecoveryEvent]: RecoveryEvent | null } = {
   [RecoveryEvent.PROCESSING_BY_SMART_CONTRACT_WALLET]: null,
   [RecoveryEvent.PROCESSING]: RecoveryEvent.PROCESSING,
   [RecoveryEvent.PROCESSED]: RecoveryEvent.PROCESSED,
diff --git a/src/features/recovery/components/RecoveryDescription/index.tsx b/src/features/recovery/components/RecoveryDescription/index.tsx
index 707e7964db..d30df5324a 100644
--- a/src/features/recovery/components/RecoveryDescription/index.tsx
+++ b/src/features/recovery/components/RecoveryDescription/index.tsx
@@ -51,9 +51,13 @@ export function RecoveryDescription({ item }: { item: RecoveryQueueItem }): Reac
       {newSetup.owners.map((owner) => (
         <EthHashInfo key={owner.value} address={owner.value} shortAddress={false} showCopyButton hasExplorer />
       ))}
-
       <div>
-        <Typography fontWeight={700} gutterBottom>
+        <Typography
+          gutterBottom
+          sx={{
+            fontWeight: 700,
+          }}
+        >
           Required confirmations for new transactions:
         </Typography>
         <Typography>
diff --git a/src/features/recovery/components/RecoveryHeader/index.test.tsx b/src/features/recovery/components/RecoveryHeader/index.test.tsx
index f90d988902..168bcd4002 100644
--- a/src/features/recovery/components/RecoveryHeader/index.test.tsx
+++ b/src/features/recovery/components/RecoveryHeader/index.test.tsx
@@ -1,6 +1,6 @@
 import { faker } from '@faker-js/faker'
 
-import { _RecoveryHeader, _useIsProposalInProgress } from '.'
+import { InternalRecoveryHeader, useIsProposalInProgress } from '.'
 import { render, renderHook, waitFor } from '@/tests/test-utils'
 import store from '@/features/recovery/components/RecoveryContext'
 import { RecoveryEvent, recoveryDispatch, RecoveryTxType } from '@/features/recovery/services/recoveryEvents'
@@ -19,7 +19,7 @@ describe('RecoveryHeader', () => {
     const queue = [{ validFrom: BigInt(0) }] as any
     store.setStore({ state: [[{ queue }]] } as any)
 
-    const { queryByText } = render(<_RecoveryHeader isProposalInProgress={false} isRecoverer queue={queue} />)
+    const { queryByText } = render(<InternalRecoveryHeader isProposalInProgress={false} isRecoverer queue={queue} />)
 
     expect(queryByText('Account recovery in progress')).toBeTruthy()
   })
@@ -28,7 +28,7 @@ describe('RecoveryHeader', () => {
     const queue = [] as any
     store.setStore({ state: [[{ queue }]] } as any)
 
-    const { queryByText } = render(<_RecoveryHeader isProposalInProgress={false} isRecoverer queue={queue} />)
+    const { queryByText } = render(<InternalRecoveryHeader isProposalInProgress={false} isRecoverer queue={queue} />)
 
     expect(queryByText('Recover this Account')).toBeTruthy()
   })
@@ -37,7 +37,7 @@ describe('RecoveryHeader', () => {
     const queue = [] as any
     store.setStore({ state: [[{ queue }]] } as any)
 
-    const { container } = render(<_RecoveryHeader isProposalInProgress isRecoverer queue={queue} />)
+    const { container } = render(<InternalRecoveryHeader isProposalInProgress isRecoverer queue={queue} />)
 
     expect(container).toBeEmptyDOMElement()
   })
@@ -49,7 +49,7 @@ describe('useIsProposalInProgress', () => {
       it('should return true if there is a proposal in progress', async () => {
         mockUseRecoveryQueue.mockReturnValue([] as any)
 
-        const { result } = renderHook(() => _useIsProposalInProgress())
+        const { result } = renderHook(() => useIsProposalInProgress())
 
         expect(result.current).toBe(false)
 
@@ -77,7 +77,7 @@ describe('useIsProposalInProgress', () => {
 
       mockUseRecoveryQueue.mockReturnValue([{ args: { txHash: payload.recoveryTxHash } }] as any)
 
-      const { result } = renderHook(() => _useIsProposalInProgress())
+      const { result } = renderHook(() => useIsProposalInProgress())
 
       expect(result.current).toBe(false)
 
diff --git a/src/features/recovery/components/RecoveryHeader/index.tsx b/src/features/recovery/components/RecoveryHeader/index.tsx
index 005b84b749..a9e2a7381c 100644
--- a/src/features/recovery/components/RecoveryHeader/index.tsx
+++ b/src/features/recovery/components/RecoveryHeader/index.tsx
@@ -11,7 +11,7 @@ import { WidgetContainer, WidgetBody } from '@/components/dashboard/styled'
 import { RecoveryEvent, RecoveryTxType, recoverySubscribe } from '@/features/recovery/services/recoveryEvents'
 import type { RecoveryQueueItem } from '@/features/recovery/services/recovery-state'
 
-export function _RecoveryHeader({
+export function InternalRecoveryHeader({
   isProposalInProgress,
   isRecoverer,
   queue,
@@ -40,7 +40,7 @@ export function _RecoveryHeader({
   return null
 }
 
-export function _useIsProposalInProgress(): boolean {
+export function useIsProposalInProgress(): boolean {
   const [isProposalSubmitting, setIsProposalSubmitting] = useState(false)
   const queue = useRecoveryQueue()
 
@@ -63,8 +63,8 @@ export function _useIsProposalInProgress(): boolean {
   return isProposalSubmitting
 }
 
-const RecoveryHeader = madProps(_RecoveryHeader, {
-  isProposalInProgress: _useIsProposalInProgress,
+const RecoveryHeader = madProps(InternalRecoveryHeader, {
+  isProposalInProgress: useIsProposalInProgress,
   isRecoverer: useIsRecoverer,
   queue: useRecoveryQueue,
 })
diff --git a/src/features/recovery/components/RecoveryList/LazyRecoveryList.tsx b/src/features/recovery/components/RecoveryList/LazyRecoveryList.tsx
index 8da9c114c4..500c2f0d53 100644
--- a/src/features/recovery/components/RecoveryList/LazyRecoveryList.tsx
+++ b/src/features/recovery/components/RecoveryList/LazyRecoveryList.tsx
@@ -13,7 +13,7 @@ import type { RecoveryQueueItem } from '@/features/recovery/services/recovery-st
 import labelCss from '@/components/transactions/GroupLabel/styles.module.css'
 
 // Conditional hook
-function _RecoveryList({ recoveryQueue }: { recoveryQueue: Array<RecoveryQueueItem> }): ReactElement {
+function InternalRecoveryList({ recoveryQueue }: { recoveryQueue: Array<RecoveryQueueItem> }): ReactElement {
   const queue = useTxQueue()
 
   const groupedItems = useMemo(() => {
@@ -53,7 +53,7 @@ function LazyRecoveryList(): ReactElement | null {
       <div className={labelCss.container}>Pending recovery</div>
 
       <TxListGrid>
-        <_RecoveryList recoveryQueue={recoveryQueue} />
+        <InternalRecoveryList recoveryQueue={recoveryQueue} />
       </TxListGrid>
     </>
   )
diff --git a/src/features/recovery/components/RecoveryModal/__snapshots__/index.test.tsx.snap b/src/features/recovery/components/RecoveryModal/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..647daee782
--- /dev/null
+++ b/src/features/recovery/components/RecoveryModal/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RecoveryModal component proposal should not render the proposal modal when there is no queue for non-owners 1`] = `"<div aria-hidden="true" class="MuiBackdrop-root css-19tyr40-MuiBackdrop-root" style="opacity: 0; visibility: hidden;"></div>"`;
+
+exports[`RecoveryModal component proposal should not render the proposal modal when there is no queue for owners 1`] = `"<div aria-hidden="true" class="MuiBackdrop-root css-19tyr40-MuiBackdrop-root" style="opacity: 0; visibility: hidden;"></div>"`;
+
+exports[`RecoveryModal component proposal should not render the proposal modal when there is no queue for recoverers on a non-sidebar route 1`] = `"<div aria-hidden="true" class="MuiBackdrop-root css-19tyr40-MuiBackdrop-root" style="opacity: 0; visibility: hidden;"></div>"`;
+
+exports[`RecoveryModal component should not render either modal if there is no queue and the user is an owner 1`] = `"<div aria-hidden="true" class="MuiBackdrop-root css-19tyr40-MuiBackdrop-root" style="opacity: 0; visibility: hidden;"></div>"`;
diff --git a/src/features/recovery/components/RecoveryModal/index.test.tsx b/src/features/recovery/components/RecoveryModal/index.test.tsx
index d0a2b5961d..56ecc307e7 100644
--- a/src/features/recovery/components/RecoveryModal/index.test.tsx
+++ b/src/features/recovery/components/RecoveryModal/index.test.tsx
@@ -6,7 +6,7 @@ import { render, waitFor } from '@/tests/test-utils'
 import { safeInfoBuilder } from '@/tests/builders/safe'
 import { connectedWalletBuilder } from '@/tests/builders/wallet'
 import * as safeInfo from '@/hooks/useSafeInfo'
-import { _useDidDismissProposal } from './index'
+import { useDidDismissProposal } from './index'
 import type { RecoveryQueueItem } from '@/features/recovery/services/recovery-state'
 import store from '@/features/recovery/components/RecoveryContext'
 
@@ -19,13 +19,13 @@ describe('RecoveryModal', () => {
 
   describe('component', () => {
     // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-    let _RecoveryModal: typeof import('./index')._RecoveryModal
+    let _RecoveryModal: typeof import('./index').InternalRecoveryModal
 
     beforeEach(() => {
       localStorage.clear()
 
       // Clear cache in between tests
-      _RecoveryModal = require('./index')._RecoveryModal
+      _RecoveryModal = require('./index').InternalRecoveryModal
     })
 
     it('should not render either modal if there is no queue and the user is an owner', () => {
@@ -40,9 +40,7 @@ describe('RecoveryModal', () => {
         <_RecoveryModal wallet={wallet} isOwner isRecoverer={false} queue={queue} />,
       )
 
-      expect(container.innerHTML).toBe(
-        '<div aria-hidden="true" class="MuiBackdrop-root css-1ejpag9-MuiBackdrop-root" style="opacity: 0; visibility: hidden;"></div>',
-      )
+      expect(container.innerHTML).toMatchSnapshot()
       expect(queryByText('recovery')).toBeFalsy()
     })
 
@@ -177,9 +175,7 @@ describe('RecoveryModal', () => {
           <_RecoveryModal wallet={wallet} isOwner isRecoverer={false} queue={queue} />,
         )
 
-        expect(container.innerHTML).toBe(
-          '<div aria-hidden="true" class="MuiBackdrop-root css-1ejpag9-MuiBackdrop-root" style="opacity: 0; visibility: hidden;"></div>',
-        )
+        expect(container.innerHTML).toMatchSnapshot()
         expect(queryByText('Recover this Account')).toBeFalsy()
       })
 
@@ -195,9 +191,7 @@ describe('RecoveryModal', () => {
           <_RecoveryModal wallet={wallet} isOwner={false} isRecoverer queue={queue} isSidebarRoute={false} />,
         )
 
-        expect(container.innerHTML).toBe(
-          '<div aria-hidden="true" class="MuiBackdrop-root css-1ejpag9-MuiBackdrop-root" style="opacity: 0; visibility: hidden;"></div>',
-        )
+        expect(container.innerHTML).toMatchSnapshot()
         expect(queryByText('recovery')).toBeFalsy()
       })
 
@@ -213,9 +207,7 @@ describe('RecoveryModal', () => {
           <_RecoveryModal wallet={wallet} isOwner={false} isRecoverer={false} queue={queue} />,
         )
 
-        expect(container.innerHTML).toBe(
-          '<div aria-hidden="true" class="MuiBackdrop-root css-1ejpag9-MuiBackdrop-root" style="opacity: 0; visibility: hidden;"></div>',
-        )
+        expect(container.innerHTML).toMatchSnapshot()
         expect(queryByText('Recover this Account')).toBeFalsy()
       })
     })
@@ -235,7 +227,7 @@ describe('RecoveryModal', () => {
       it('should return false if the proposal was not dismissed before', () => {
         const recovererAddress = faker.finance.ethereumAddress()
 
-        const { result } = renderHook(() => _useDidDismissProposal())
+        const { result } = renderHook(() => useDidDismissProposal())
 
         expect(result.current.wasProposalDismissed(recovererAddress)).toBeFalsy()
       })
@@ -243,7 +235,7 @@ describe('RecoveryModal', () => {
       it('should return true if the proposal was dismissed before', () => {
         const recovererAddress = faker.finance.ethereumAddress()
 
-        const { result, rerender } = renderHook(() => _useDidDismissProposal())
+        const { result, rerender } = renderHook(() => useDidDismissProposal())
 
         expect(result.current.wasProposalDismissed(recovererAddress)).toBeFalsy()
         result.current.dismissProposal(recovererAddress)
@@ -256,7 +248,7 @@ describe('RecoveryModal', () => {
       it('should persist dismissals between sessions', () => {
         const recovererAddress = faker.finance.ethereumAddress()
 
-        const firstRender = renderHook(() => _useDidDismissProposal())
+        const firstRender = renderHook(() => useDidDismissProposal())
 
         expect(firstRender.result.current.wasProposalDismissed(recovererAddress)).toBeFalsy()
         firstRender.result.current.dismissProposal(recovererAddress)
@@ -267,20 +259,20 @@ describe('RecoveryModal', () => {
 
         firstRender.unmount()
 
-        const secondRender = renderHook(() => _useDidDismissProposal())
+        const secondRender = renderHook(() => useDidDismissProposal())
         expect(secondRender.result.current.wasProposalDismissed(recovererAddress)).toBeTruthy()
       })
     })
 
     describe('useDidDismissInProgress', () => {
       // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-      let _useDidDismissInProgress: typeof import('./index')._useDidDismissInProgress
+      let _useDidDismissInProgress: typeof import('./index').useDidDismissInProgress
 
       beforeEach(() => {
         localStorage.clear()
 
         // Clear cache in between tests
-        _useDidDismissInProgress = require('./index')._useDidDismissInProgress
+        _useDidDismissInProgress = require('./index').useDidDismissInProgress
       })
 
       it('should return false if in-progress was not dismissed before', () => {
diff --git a/src/features/recovery/components/RecoveryModal/index.tsx b/src/features/recovery/components/RecoveryModal/index.tsx
index 85429e69e4..67cfe15ea3 100644
--- a/src/features/recovery/components/RecoveryModal/index.tsx
+++ b/src/features/recovery/components/RecoveryModal/index.tsx
@@ -16,7 +16,7 @@ import { sameAddress } from '@/utils/addresses'
 import { useIsSidebarRoute } from '@/hooks/useIsSidebarRoute'
 import type { RecoveryQueueItem } from '@/features/recovery/services/recovery-state'
 
-export function _RecoveryModal({
+export function InternalRecoveryModal({
   isOwner,
   isRecoverer,
   queue,
@@ -29,8 +29,8 @@ export function _RecoveryModal({
   wallet: ReturnType<typeof useWallet>
   isSidebarRoute?: boolean
 }): ReactElement {
-  const { wasProposalDismissed, dismissProposal } = _useDidDismissProposal()
-  const { wasInProgressDismissed, dismissInProgress } = _useDidDismissInProgress()
+  const { wasProposalDismissed, dismissProposal } = useDidDismissProposal()
+  const { wasInProgressDismissed, dismissInProgress } = useDidDismissInProgress()
 
   const [modal, setModal] = useState<ReactElement | null>(null)
   const router = useRouter()
@@ -105,7 +105,7 @@ const useSidebar = () => {
   return isSidebarRoute
 }
 
-export const RecoveryModal = madProps(_RecoveryModal, {
+export const RecoveryModal = madProps(InternalRecoveryModal, {
   isOwner: useIsSafeOwner,
   isRecoverer: useIsRecoverer,
   queue: useRecoveryQueue,
@@ -113,7 +113,7 @@ export const RecoveryModal = madProps(_RecoveryModal, {
   isSidebarRoute: useSidebar,
 })
 
-export function _useDidDismissProposal() {
+export function useDidDismissProposal() {
   const LS_KEY = 'dismissedRecoveryProposals'
 
   type Recoverer = string
@@ -151,7 +151,7 @@ export function _useDidDismissProposal() {
   return { wasProposalDismissed, dismissProposal }
 }
 
-export function _useDidDismissInProgress() {
+export function useDidDismissInProgress() {
   type TxHash = string
   type DismissedInProgressCache = { [chainId: string]: { [safeAddress: string]: TxHash } }
 
diff --git a/src/features/recovery/components/RecoverySettings/ChooseRecoveryMethodModal.tsx b/src/features/recovery/components/RecoverySettings/ChooseRecoveryMethodModal.tsx
index 54f2c98d2e..e3241d200b 100644
--- a/src/features/recovery/components/RecoverySettings/ChooseRecoveryMethodModal.tsx
+++ b/src/features/recovery/components/RecoverySettings/ChooseRecoveryMethodModal.tsx
@@ -70,7 +70,12 @@ export function ChooseRecoveryMethodModal({ open, onClose }: { open: boolean; on
   return (
     <Dialog open={open} onClose={onClose} className={css.dialog}>
       <DialogContent dividers sx={{ py: 2, px: 3 }}>
-        <Typography variant="h2" mb={1}>
+        <Typography
+          variant="h2"
+          sx={{
+            mb: 1,
+          }}
+        >
           Set up Account Recovery
         </Typography>
         <IconButton onClick={onClose} className={css.closeIcon}>
@@ -102,7 +107,13 @@ export function ChooseRecoveryMethodModal({ open, onClose }: { open: boolean; on
                   label={
                     <div className={css.method}>
                       <RecoveryCustomIcon style={{ display: 'block' }} />
-                      <Typography fontWeight="bold" mb={1} mt={2}>
+                      <Typography
+                        sx={{
+                          fontWeight: 'bold',
+                          mb: 1,
+                          mt: 2,
+                        }}
+                      >
                         Self Custodial Recovery
                       </Typography>
                       <List className={css.checkList}>
@@ -131,7 +142,13 @@ export function ChooseRecoveryMethodModal({ open, onClose }: { open: boolean; on
                     <div className={css.method}>
                       <RecoverySygnumIcon style={{ display: 'block' }} />
 
-                      <Typography fontWeight="bold" mb={1} mt={2}>
+                      <Typography
+                        sx={{
+                          fontWeight: 'bold',
+                          mb: 1,
+                          mt: 2,
+                        }}
+                      >
                         Sygnum Web3 Recovery
                       </Typography>
                       <List className={css.checkList}>
@@ -150,7 +167,12 @@ export function ChooseRecoveryMethodModal({ open, onClose }: { open: boolean; on
                       </List>
 
                       {!hasSygnumApp && (
-                        <Box mt={2.5} sx={{ oopacity: 0.75 }}>
+                        <Box
+                          sx={{
+                            mt: 2.5,
+                            oopacity: 0.75,
+                          }}
+                        >
                           <TxStatusChip color="primary">Not available on this network</TxStatusChip>
                         </Box>
                       )}
@@ -161,13 +183,24 @@ export function ChooseRecoveryMethodModal({ open, onClose }: { open: boolean; on
             )}
           />
         </FormControl>
-        <Typography color="primary.light" mt="12px">
+        <Typography
+          sx={{
+            color: 'primary.light',
+            mt: '12px',
+          }}
+        >
           Unhappy with the provided options?{' '}
           <Track {...RECOVERY_EVENTS.GIVE_US_FEEDBACK} label="method-modal">
             <ExternalLink href={RECOVERY_FEEDBACK_FORM}>Give us feedback</ExternalLink>
           </Track>
         </Typography>
-        <Box display="flex" justifyContent="center" mt={3}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            mt: 3,
+          }}
+        >
           {currentType === RecoveryMethod.SelfCustody ? (
             <Track {...RECOVERY_EVENTS.CONTINUE_WITH_RECOVERY} label={currentType}>
               <Button
diff --git a/src/features/recovery/components/RecoverySettings/index.tsx b/src/features/recovery/components/RecoverySettings/index.tsx
index 0aa340ddec..c6d5af78f9 100644
--- a/src/features/recovery/components/RecoverySettings/index.tsx
+++ b/src/features/recovery/components/RecoverySettings/index.tsx
@@ -113,15 +113,31 @@ function RecoverySettings(): ReactElement {
     <Paper sx={{ p: 4 }}>
       <Grid container spacing={3}>
         <Grid item lg={4} xs={12}>
-          <Box display="flex" alignItems="center" gap={1} mb={1}>
-            <Typography variant="h4" fontWeight="bold">
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+              mb: 1,
+            }}
+          >
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: 'bold',
+              }}
+            >
               Account recovery
             </Typography>
           </Box>
         </Grid>
 
         <Grid item xs>
-          <Typography mb={2}>
+          <Typography
+            sx={{
+              mb: 2,
+            }}
+          >
             {isRecoveryEnabled
               ? 'The trusted Recoverer will be able to recover your Safe Account if you ever lose access. You can change Recoverers or alter your recovery setup at any time.'
               : 'Choose a trusted Recoverer to recover your Safe Account if you ever lose access. Enabling the Account recovery module will require a transaction.'}{' '}
diff --git a/src/features/recovery/components/RecoverySigners/index.tsx b/src/features/recovery/components/RecoverySigners/index.tsx
index af0715eee2..f33c9260e2 100644
--- a/src/features/recovery/components/RecoverySigners/index.tsx
+++ b/src/features/recovery/components/RecoverySigners/index.tsx
@@ -20,7 +20,13 @@ export function RecoverySigners({ item }: { item: RecoveryQueueItem }): ReactEle
     item.expiresAt !== null ? (
       <>
         The recovery proposal can be executed{' '}
-        <Typography color="primary.main">until {formatDateTime(Number(item.expiresAt))}.</Typography>
+        <Typography
+          sx={{
+            color: 'primary.main',
+          }}
+        >
+          until {formatDateTime(Number(item.expiresAt))}.
+        </Typography>
       </>
     ) : (
       'The recovery proposal can be executed now.'
@@ -62,14 +68,20 @@ export function RecoverySigners({ item }: { item: RecoveryQueueItem }): ReactEle
           <ListItemText primaryTypographyProps={{ fontWeight: 700 }}>Can be executed</ListItemText>
         </ListItem>
       </List>
-
       <Box className={txSignersCss.listFooter}>
         <Typography sx={({ palette }) => ({ color: palette.border.main, mb: 1 })}>{desc}</Typography>
 
         {isNext && <Countdown seconds={remainingSeconds} />}
       </Box>
-
-      <Box display="flex" alignItems="center" justifyContent="center" gap={1} mt={2}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 1,
+          mt: 2,
+        }}
+      >
         <ExecuteRecoveryButton recovery={item} />
         <CancelRecoveryButton recovery={item} />
       </Box>
diff --git a/src/features/recovery/components/RecoverySummary/index.tsx b/src/features/recovery/components/RecoverySummary/index.tsx
index e3fdd022c4..23f1b26292 100644
--- a/src/features/recovery/components/RecoverySummary/index.tsx
+++ b/src/features/recovery/components/RecoverySummary/index.tsx
@@ -18,24 +18,46 @@ export function RecoverySummary({ item }: { item: RecoveryQueueItem }): ReactEle
 
   return (
     <Box className={css.gridContainer}>
-      <Box gridArea="type">
+      <Box
+        sx={{
+          gridArea: 'type',
+        }}
+      >
         <RecoveryType isMalicious={isMalicious} />
       </Box>
-
-      <Box gridArea="info">
+      <Box
+        sx={{
+          gridArea: 'info',
+        }}
+      >
         <RecoveryInfo isMalicious={isMalicious} />
       </Box>
-
-      <Box gridArea="date" data-testid="tx-date" className={css.date}>
+      <Box
+        data-testid="tx-date"
+        className={css.date}
+        sx={{
+          gridArea: 'date',
+        }}
+      >
         <DateTime value={Number(item.timestamp)} />
       </Box>
-
       {!isExecutable || isPending ? (
-        <Box gridArea="status">
+        <Box
+          sx={{
+            gridArea: 'status',
+          }}
+        >
           <RecoveryStatus recovery={item} />
         </Box>
       ) : (
-        <Box gridArea="actions" mr={2} display="flex" justifyContent="center">
+        <Box
+          sx={{
+            gridArea: 'actions',
+            mr: 2,
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
           {!isMalicious && wallet && <ExecuteRecoveryButton recovery={item} compact />}
         </Box>
       )}
diff --git a/src/features/recovery/hooks/__tests__/useIsValidRecoveryExecution.test.ts b/src/features/recovery/hooks/__tests__/useIsValidRecoveryExecution.test.ts
index 9e4ce24268..2dfe538418 100644
--- a/src/features/recovery/hooks/__tests__/useIsValidRecoveryExecution.test.ts
+++ b/src/features/recovery/hooks/__tests__/useIsValidRecoveryExecution.test.ts
@@ -134,7 +134,7 @@ describe('useIsValidRecoveryExecution', () => {
       mockUseIsRecoverer.mockReturnValue(true)
 
       mockGetPatchedSignerOrProvider.mockReturnValue({
-        getSigner: () => ({} as any),
+        getSigner: () => ({}) as any,
       } as any)
 
       const isValid = faker.datatype.boolean()
@@ -167,7 +167,7 @@ describe('useIsValidRecoveryExecution', () => {
       mockUseIsRecoverer.mockReturnValue(true)
 
       mockGetPatchedSignerOrProvider.mockReturnValue({
-        getSigner: () => ({} as any),
+        getSigner: () => ({}) as any,
       } as any)
 
       const error = new Error('Some error')
@@ -275,7 +275,7 @@ describe('useIsValidRecoveryExecution', () => {
       mockUseRecoveryTxState.mockReturnValue({ isExecutable: true } as any)
 
       mockGetPatchedSignerOrProvider.mockReturnValue({
-        getSigner: () => ({} as any),
+        getSigner: () => ({}) as any,
       } as any)
 
       mockGetModuleInstance.mockReturnValue({
@@ -312,7 +312,7 @@ describe('useIsValidRecoveryExecution', () => {
       mockUseRecoveryTxState.mockReturnValue({ isExecutable: true } as any)
 
       mockGetPatchedSignerOrProvider.mockReturnValue({
-        getSigner: () => ({} as any),
+        getSigner: () => ({}) as any,
       } as any)
 
       const error = new Error('Some error')
@@ -429,7 +429,7 @@ describe('useIsValidRecoveryExecution', () => {
       mockUseRecoveryTxState.mockReturnValue({ isExpired: true } as any)
 
       mockGetPatchedSignerOrProvider.mockReturnValue({
-        getSigner: () => ({} as any),
+        getSigner: () => ({}) as any,
       } as any)
 
       mockGetModuleInstance.mockReturnValue({
@@ -466,7 +466,7 @@ describe('useIsValidRecoveryExecution', () => {
       mockUseRecoveryTxState.mockReturnValue({ isExpired: true } as any)
 
       mockGetPatchedSignerOrProvider.mockReturnValue({
-        getSigner: () => ({} as any),
+        getSigner: () => ({}) as any,
       } as any)
 
       const error = new Error('Some error')
diff --git a/src/features/siweAccounts/components/EnableAccountBanner/index.tsx b/src/features/siweAccounts/components/EnableAccountBanner/index.tsx
index 126c3d750b..513ef68ee6 100644
--- a/src/features/siweAccounts/components/EnableAccountBanner/index.tsx
+++ b/src/features/siweAccounts/components/EnableAccountBanner/index.tsx
@@ -42,7 +42,12 @@ const SignInBanner = ({ provider }: { provider: BrowserProvider | undefined }) =
         action={
           <>
             <Button onClick={signIn} endIcon={<ChevronRightIcon />} sx={{ padding: '2px', minWidth: '130px' }}>
-              <Typography noWrap fontWeight={700}>
+              <Typography
+                noWrap
+                sx={{
+                  fontWeight: 700,
+                }}
+              >
                 Enable now
               </Typography>
             </Button>
@@ -59,8 +64,19 @@ const SignInBanner = ({ provider }: { provider: BrowserProvider | undefined }) =
           </>
         }
       >
-        <Box display="flex" alignContent="center" alignItems="center" width="100%">
-          <Typography flex="1">
+        <Box
+          sx={{
+            display: 'flex',
+            alignContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+          }}
+        >
+          <Typography
+            sx={{
+              flex: '1',
+            }}
+          >
             <b>Access your accounts on any device!</b> Enable cloud storage to switch devices effortlessly and keep your
             data secure.
           </Typography>
diff --git a/src/features/speedup/components/SpeedUpModal.tsx b/src/features/speedup/components/SpeedUpModal.tsx
index b529480268..30f46e9861 100644
--- a/src/features/speedup/components/SpeedUpModal.tsx
+++ b/src/features/speedup/components/SpeedUpModal.tsx
@@ -84,7 +84,7 @@ export const SpeedUpModal = ({
     const txOptions = getTxOptions(
       {
         ...speedUpFee,
-        gasLimit,
+        gasLimit: typeof gasLimit === 'undefined' ? null : BigInt(gasLimit),
       },
       chainInfo,
     )
@@ -167,25 +167,41 @@ export const SpeedUpModal = ({
     return (
       <ModalDialog open={open} onClose={onCancel} dialogTitle="Speed up transaction">
         <DialogContent sx={{ p: '24px !important' }}>
-          <Box display="flex" justifyContent="center" alignItems="center" mb={2}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              mb: 2,
+            }}
+          >
             <SvgIcon inheritViewBox component={RocketSpeedup} sx={{ width: 90, height: 90 }} />
           </Box>
 
           <Typography data-testid="speedup-summary">
             This will speed up the pending transaction by{' '}
-            <Typography component="span" fontWeight={700}>
+            <Typography
+              component="span"
+              sx={{
+                fontWeight: 700,
+              }}
+            >
               replacing
             </Typography>{' '}
             the original gas parameters with new ones.
           </Typography>
 
-          <Box mt={2}>
+          <Box
+            sx={{
+              mt: 2,
+            }}
+          >
             {speedUpFee && signerNonce && (
               <GasParams
                 params={{
                   // nonce: safeTx?.data?.nonce,
                   userNonce: signerNonce,
-                  gasLimit,
+                  gasLimit: typeof gasLimit === 'undefined' ? null : BigInt(gasLimit),
                   maxFeePerGas: speedUpFee.maxFeePerGas,
                   maxPriorityFeePerGas: speedUpFee.maxPriorityFeePerGas,
                 }}
@@ -199,7 +215,6 @@ export const SpeedUpModal = ({
             <NetworkWarning />
           </Box>
         </DialogContent>
-
         <DialogActions>
           <Button onClick={onCancel}>Cancel</Button>
 
@@ -226,7 +241,14 @@ export const SpeedUpModal = ({
   return (
     <ModalDialog open={open} onClose={handleClose} dialogTitle="Speed up transaction">
       <DialogContent sx={{ p: '24px !important' }}>
-        <Box display="flex" justifyContent="center" alignItems="center" mb={2}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            mb: 2,
+          }}
+        >
           <SvgIcon inheritViewBox component={RocketSpeedup} sx={{ width: 90, height: 90 }} />
         </Box>
 
diff --git a/src/features/speedup/components/SpeedUpMonitor.tsx b/src/features/speedup/components/SpeedUpMonitor.tsx
index 8aa9e2dac2..04bd2ce311 100644
--- a/src/features/speedup/components/SpeedUpMonitor.tsx
+++ b/src/features/speedup/components/SpeedUpMonitor.tsx
@@ -68,7 +68,13 @@ export const SpeedUpMonitor = ({ txId, pendingTx, modalTrigger = 'alertBox' }: S
             action={<Button onClick={onOpen}>{`Speed up >`}</Button>}
           >
             <AlertTitle>
-              <Typography textAlign="left">Taking too long?</Typography>
+              <Typography
+                sx={{
+                  textAlign: 'left',
+                }}
+              >
+                Taking too long?
+              </Typography>
             </AlertTitle>
             Try to speed up with better gas parameters.
           </Alert>
diff --git a/src/features/stake/components/StakePage/index.tsx b/src/features/stake/components/StakePage/index.tsx
index e6c4b855ec..5de1c02306 100644
--- a/src/features/stake/components/StakePage/index.tsx
+++ b/src/features/stake/components/StakePage/index.tsx
@@ -30,7 +30,14 @@ const StakePage = () => {
 
   if (blockedAddress) {
     return (
-      <Stack direction="column" alignItems="center" justifyContent="center" flex={1}>
+      <Stack
+        direction="column"
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'center',
+          flex: 1,
+        }}
+      >
         <BlockedAddress address={blockedAddress} featureTitle="stake feature with Kiln" />
       </Stack>
     )
@@ -41,7 +48,14 @@ const StakePage = () => {
       {isConsentAccepted === undefined ? null : isConsentAccepted ? (
         <StakingWidget asset={String(asset)} />
       ) : (
-        <Stack direction="column" alignItems="center" justifyContent="center" flex={1}>
+        <Stack
+          direction="column"
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 1,
+          }}
+        >
           <Disclaimer
             title="Note"
             content={<WidgetDisclaimer widgetName="Stake Widget by Kiln" />}
diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
index 9024347517..ecb42bd615 100644
--- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
@@ -23,7 +23,11 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro
   // the fee is returned in decimal format, so we multiply by 100 to get the percentage
   const fee = (order.fee * 100).toFixed(2)
   return (
-    <Stack gap={isOrder ? 2 : 1}>
+    <Stack
+      sx={{
+        gap: isOrder ? 2 : 1,
+      }}
+    >
       {isOrder && (
         <ConfirmationOrderHeader
           blocks={[
@@ -39,19 +43,16 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro
           ]}
         />
       )}
-
       <FieldsGrid title="Net annual rewards">
         {formatVisualAmount(order.expectedAnnualReward, order.tokenInfo.decimals)} {order.tokenInfo.symbol}
         {' ('}
         {formatCurrency(order.expectedFiatAnnualReward, CURRENCY)})
       </FieldsGrid>
-
       <FieldsGrid title="Net monthly rewards">
         {formatVisualAmount(order.expectedMonthlyReward, order.tokenInfo.decimals)} {order.tokenInfo.symbol}
         {' ('}
         {formatCurrency(order.expectedFiatMonthlyReward, CURRENCY)})
       </FieldsGrid>
-
       <FieldsGrid
         title={
           <>
@@ -62,17 +63,31 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro
       >
         {fee} %
       </FieldsGrid>
-
       <Stack
         {...{ [isOrder ? 'border' : 'borderTop']: '1px solid' }}
         {...(isOrder ? { p: 2, borderRadius: 1 } : { mt: 1, pt: 2, pb: 1 })}
-        borderColor="border.light"
-        gap={1}
+        sx={{
+          borderColor: 'border.light',
+          gap: 1,
+        }}
       >
         {isOrder ? (
-          <Typography fontWeight="bold" mb={2}>
+          <Typography
+            sx={{
+              fontWeight: 'bold',
+              mb: 2,
+            }}
+          >
             You will own{' '}
-            <Box component="span" bgcolor="border.background" px={1} py={0.5} borderRadius={1}>
+            <Box
+              component="span"
+              sx={{
+                bgcolor: 'border.background',
+                px: 1,
+                py: 0.5,
+                borderRadius: 1,
+              }}
+            >
               {order.numValidators} Ethereum validator{order.numValidators === 1 ? '' : 's'}
             </Box>
           </Typography>
@@ -91,7 +106,13 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro
         )}
 
         {isOrder && (
-          <Typography variant="body2" color="text.secondary" mt={2}>
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+              mt: 2,
+            }}
+          >
             Earn ETH rewards with dedicated validators. Rewards must be withdrawn manually, and you can request a
             withdrawal at any time.
           </Typography>
diff --git a/src/features/stake/components/StakingConfirmationTx/Exit.tsx b/src/features/stake/components/StakingConfirmationTx/Exit.tsx
index 03a8012da2..34e55eafcc 100644
--- a/src/features/stake/components/StakingConfirmationTx/Exit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Exit.tsx
@@ -16,7 +16,11 @@ const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps)
   ])
 
   return (
-    <Stack gap={2}>
+    <Stack
+      sx={{
+        gap: 2,
+      }}
+    >
       <ConfirmationOrderHeader
         blocks={[
           {
@@ -30,7 +34,6 @@ const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps)
           },
         ]}
       />
-
       <FieldsGrid
         title={
           <>
@@ -51,11 +54,15 @@ const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps)
       >
         Up to {withdrawIn}
       </FieldsGrid>
-
-      <Typography variant="body2" color="text.secondary" mt={2}>
+      <Typography
+        variant="body2"
+        sx={{
+          color: 'text.secondary',
+          mt: 2,
+        }}
+      >
         The selected amount and any rewards will be withdrawn from Dedicated Staking for ETH after the validator exit.
       </Typography>
-
       <Alert severity="warning" sx={{ mb: 1 }}>
         This transaction is a withdrawal request. After it&apos;s executed, you&apos;ll need to complete a separate
         withdrawal transaction.
diff --git a/src/features/stake/components/StakingConfirmationTx/Withdraw.tsx b/src/features/stake/components/StakingConfirmationTx/Withdraw.tsx
index 08011e6e76..08b11ed637 100644
--- a/src/features/stake/components/StakingConfirmationTx/Withdraw.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Withdraw.tsx
@@ -12,7 +12,11 @@ type StakingOrderConfirmationViewProps = {
 
 const StakingConfirmationTxWithdraw = ({ order }: StakingOrderConfirmationViewProps) => {
   return (
-    <Stack gap={2}>
+    <Stack
+      sx={{
+        gap: 2,
+      }}
+    >
       <FieldsGrid title="Receive">
         {' '}
         <TokenAmount
diff --git a/src/features/stake/components/StakingTxDepositDetails/index.tsx b/src/features/stake/components/StakingTxDepositDetails/index.tsx
index 1a3e3c9d0a..6165bfa729 100644
--- a/src/features/stake/components/StakingTxDepositDetails/index.tsx
+++ b/src/features/stake/components/StakingTxDepositDetails/index.tsx
@@ -6,13 +6,19 @@ import StakingConfirmationTxDeposit from '@/features/stake/components/StakingCon
 
 const StakingTxDepositDetails = ({ info, txData }: { info: StakingTxDepositInfo; txData?: TransactionData }) => {
   return (
-    <Box pl={1} pr={5} display="flex" flexDirection="column" gap={1}>
+    <Box
+      sx={{
+        pl: 1,
+        pr: 5,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+      }}
+    >
       {txData && (
         <SendAmountBlock title="Deposit" amountInWei={txData.value?.toString() || '0'} tokenInfo={info.tokenInfo} />
       )}
-
       <FieldsGrid title="Net reward rate">{info.annualNrr.toFixed(3)}%</FieldsGrid>
-
       <StakingConfirmationTxDeposit order={info} />
     </Box>
   )
diff --git a/src/features/stake/components/StakingTxExitDetails/index.tsx b/src/features/stake/components/StakingTxExitDetails/index.tsx
index d4cdb80722..30ffa0896a 100644
--- a/src/features/stake/components/StakingTxExitDetails/index.tsx
+++ b/src/features/stake/components/StakingTxExitDetails/index.tsx
@@ -14,7 +14,14 @@ const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo }) => {
   ])
 
   return (
-    <Box pr={5} display="flex" flexDirection="column" gap={1}>
+    <Box
+      sx={{
+        pr: 5,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+      }}
+    >
       <FieldsGrid title="Exit">
         {info.validators.map((validator: string, index: number) => {
           return (
@@ -26,7 +33,6 @@ const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo }) => {
         })}
       </FieldsGrid>
       {info.status !== NativeStakingStatus.EXITED && <FieldsGrid title="Est. exit time">Up to {withdrawIn}</FieldsGrid>}
-
       <FieldsGrid title="Validator status">
         <StakingStatus status={info.status} />
       </FieldsGrid>
diff --git a/src/features/stake/components/StakingTxWithdrawDetails/index.tsx b/src/features/stake/components/StakingTxWithdrawDetails/index.tsx
index 78681f19d0..1a20e647fc 100644
--- a/src/features/stake/components/StakingTxWithdrawDetails/index.tsx
+++ b/src/features/stake/components/StakingTxWithdrawDetails/index.tsx
@@ -4,7 +4,15 @@ import StakingConfirmationTxWithdraw from '@/features/stake/components/StakingCo
 
 const StakingTxWithdrawDetails = ({ info }: { info: StakingTxWithdrawInfo }) => {
   return (
-    <Box pl={1} pr={5} display="flex" flexDirection="column" gap={1}>
+    <Box
+      sx={{
+        pl: 1,
+        pr: 5,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+      }}
+    >
       <StakingConfirmationTxWithdraw order={info} />
     </Box>
   )
diff --git a/src/features/swap/components/OrderId/index.tsx b/src/features/swap/components/OrderId/index.tsx
index e128adb8eb..8179d25ea7 100644
--- a/src/features/swap/components/OrderId/index.tsx
+++ b/src/features/swap/components/OrderId/index.tsx
@@ -21,7 +21,11 @@ const OrderId = ({
     <Stack direction="row">
       <span>{truncatedOrderId}</span>
       {showCopyButton && <CopyButton text={orderId} />}
-      <Box color="border.main">
+      <Box
+        sx={{
+          color: 'border.main',
+        }}
+      >
         <ExplorerButton href={href} />
       </Box>
     </Stack>
diff --git a/src/features/swap/components/SwapOrder/index.tsx b/src/features/swap/components/SwapOrder/index.tsx
index dd12b48a64..1147c4993a 100644
--- a/src/features/swap/components/SwapOrder/index.tsx
+++ b/src/features/swap/components/SwapOrder/index.tsx
@@ -48,7 +48,11 @@ const AmountRow = ({ order }: { order: Order }) => {
   const isSellOrder = kind === 'sell'
   return (
     <DataRow key="Amount" title="Amount">
-      <Stack flexDirection={isSellOrder ? 'column' : 'column-reverse'}>
+      <Stack
+        sx={{
+          flexDirection: isSellOrder ? 'column' : 'column-reverse',
+        }}
+      >
         <div>
           <span className={css.value}>
             {isSellOrder ? 'Sell' : 'For at most'}{' '}
@@ -105,7 +109,12 @@ const ExpiryRow = ({ order }: { order: Order }) => {
       return (
         <DataRow key="Expiry" title="Expiry">
           <Typography>
-            <Typography fontWeight={700} component="span">
+            <Typography
+              component="span"
+              sx={{
+                fontWeight: 700,
+              }}
+            >
               {formatTimeInWords(validUntil * 1000)}
             </Typography>{' '}
             ({formatDateTime(validUntil * 1000)})
@@ -247,7 +256,12 @@ export const TwapOrder = ({ order }: { order: SwapTwapOrder }) => {
         status !== 'fulfilled' && compareAsc(now, expires) !== 1 ? (
           <DataRow key="Expiry" title="Expiry">
             <Typography>
-              <Typography fontWeight={700} component="span">
+              <Typography
+                component="span"
+                sx={{
+                  fontWeight: 700,
+                }}
+              >
                 {formatTimeInWords(validUntil * 1000)}
               </Typography>{' '}
               ({formatDateTime(validUntil * 1000)})
diff --git a/src/features/swap/components/SwapOrder/rows/PartBuyAmount.tsx b/src/features/swap/components/SwapOrder/rows/PartBuyAmount.tsx
index 5076242c14..7911af2b7b 100644
--- a/src/features/swap/components/SwapOrder/rows/PartBuyAmount.tsx
+++ b/src/features/swap/components/SwapOrder/rows/PartBuyAmount.tsx
@@ -15,10 +15,20 @@ export const PartBuyAmount = ({
   return (
     <DataRow title="Buy amount" key="buy_amount_part">
       <Box>
-        <Typography component="span" fontWeight="bold">
+        <Typography
+          component="span"
+          sx={{
+            fontWeight: 'bold',
+          }}
+        >
           {formatVisualAmount(minPartLimit, buyToken.decimals)} {buyToken.symbol}
         </Typography>
-        <Typography component="span" color="var(--color-primary-light)">
+        <Typography
+          component="span"
+          sx={{
+            color: 'var(--color-primary-light)',
+          }}
+        >
           {` ${addonText}`}
         </Typography>
       </Box>
diff --git a/src/features/swap/components/SwapOrder/rows/PartSellAmount.tsx b/src/features/swap/components/SwapOrder/rows/PartSellAmount.tsx
index ac8fcf13b6..2346dc5b2d 100644
--- a/src/features/swap/components/SwapOrder/rows/PartSellAmount.tsx
+++ b/src/features/swap/components/SwapOrder/rows/PartSellAmount.tsx
@@ -15,10 +15,20 @@ export const PartSellAmount = ({
   return (
     <DataRow title="Sell amount" key="sell_amount_part">
       <Box>
-        <Typography component="span" fontWeight="bold">
+        <Typography
+          component="span"
+          sx={{
+            fontWeight: 'bold',
+          }}
+        >
           {formatVisualAmount(partSellAmount, sellToken.decimals)} {sellToken.symbol}
         </Typography>
-        <Typography component="span" color="var(--color-primary-light)">
+        <Typography
+          component="span"
+          sx={{
+            color: 'var(--color-primary-light)',
+          }}
+        >
           {` ${addonText}`}
         </Typography>
       </Box>
diff --git a/src/features/swap/components/SwapOrderConfirmationView/index.tsx b/src/features/swap/components/SwapOrderConfirmationView/index.tsx
index 2c986286b5..f327b23b84 100644
--- a/src/features/swap/components/SwapOrderConfirmationView/index.tsx
+++ b/src/features/swap/components/SwapOrderConfirmationView/index.tsx
@@ -44,7 +44,6 @@ export const SwapOrderConfirmation = ({ order, settlementContract }: SwapOrderPr
   return (
     <>
       {isChangingFallbackHandler && <TwapFallbackHandlerWarning />}
-
       <DataTable
         header="Order details"
         rows={[
@@ -70,7 +69,12 @@ export const SwapOrderConfirmation = ({ order, settlementContract }: SwapOrderPr
           compareAsc(now, expires) !== 1 ? (
             <DataRow datatestid="expiry" key="Expiry" title="Expiry">
               <Typography>
-                <Typography fontWeight={700} component="span">
+                <Typography
+                  component="span"
+                  sx={{
+                    fontWeight: 700,
+                  }}
+                >
                   {formatTimeInWords(validUntil * 1000)}
                 </Typography>{' '}
                 ({formatDateTime(validUntil * 1000)})
@@ -120,7 +124,6 @@ export const SwapOrderConfirmation = ({ order, settlementContract }: SwapOrderPr
           ),
         ]}
       />
-
       {isTwapOrder && (
         <div className={css.partsBlock}>
           <DataTable
diff --git a/src/features/swap/components/SwapTxInfo/SwapTx.tsx b/src/features/swap/components/SwapTxInfo/SwapTx.tsx
index c06651486e..cb0746e401 100644
--- a/src/features/swap/components/SwapTxInfo/SwapTx.tsx
+++ b/src/features/swap/components/SwapTxInfo/SwapTx.tsx
@@ -14,7 +14,15 @@ const Amount = ({ value, token }: { value: string; token: OrderToken }) => (
 )
 
 const OnlyToken = ({ token }: { token: OrderToken }) => (
-  <Typography fontWeight="bold" component="span" display="flex" alignItems="center" gap={1}>
+  <Typography
+    component="span"
+    sx={{
+      fontWeight: 'bold',
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1,
+    }}
+  >
     <TokenIcon tokenSymbol={token.symbol} logoUri={token.logoUri ?? undefined} />
     {token.symbol}
   </Typography>
@@ -35,15 +43,22 @@ export const SwapTx = ({ info }: { info: Order }): ReactElement => {
   return (
     <Typography
       component="div"
-      display="flex"
-      alignItems="center"
-      fontWeight="bold"
-      whiteSpace="nowrap"
-      overflow="hidden"
-      textOverflow="ellipsis"
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        fontWeight: 'bold',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      }}
     >
       {from}
-      <Typography component="span" mx={0.5}>
+      <Typography
+        component="span"
+        sx={{
+          mx: 0.5,
+        }}
+      >
         &nbsp;to&nbsp;
       </Typography>
       {to}
diff --git a/src/features/swap/helpers/__tests__/utils.test.ts b/src/features/swap/helpers/__tests__/utils.test.ts
index 506a96ce80..65bd524c7e 100644
--- a/src/features/swap/helpers/__tests__/utils.test.ts
+++ b/src/features/swap/helpers/__tests__/utils.test.ts
@@ -171,7 +171,6 @@ describe('Swap helpers', () => {
       expect(result).toEqual('0')
     })
 
-    // eslint-disable-next-line no-only-tests/no-only-tests
     it('returns the surplus amount for buy orders', () => {
       const mockOrder = {
         executedSellAmount: '10000000000000000000', //10
diff --git a/src/features/swap/helpers/fee.ts b/src/features/swap/helpers/fee.ts
index 0a7cc79d32..d412e308bd 100644
--- a/src/features/swap/helpers/fee.ts
+++ b/src/features/swap/helpers/fee.ts
@@ -20,10 +20,13 @@ const FEE_TIERS = {
 }
 
 const getLowerCaseStableCoinAddresses = () => {
-  const lowerCaseStableCoinAddresses = Object.keys(stableCoinAddresses).reduce((result, key) => {
-    result[key.toLowerCase()] = stableCoinAddresses[key]
-    return result
-  }, {} as typeof stableCoinAddresses)
+  const lowerCaseStableCoinAddresses = Object.keys(stableCoinAddresses).reduce(
+    (result, key) => {
+      result[key.toLowerCase()] = stableCoinAddresses[key]
+      return result
+    },
+    {} as typeof stableCoinAddresses,
+  )
 
   return lowerCaseStableCoinAddresses
 }
diff --git a/src/features/targetedOutreach/components/OutreachPopup/index.tsx b/src/features/targetedOutreach/components/OutreachPopup/index.tsx
index f635d3947e..d60183c8e9 100644
--- a/src/features/targetedOutreach/components/OutreachPopup/index.tsx
+++ b/src/features/targetedOutreach/components/OutreachPopup/index.tsx
@@ -80,12 +80,29 @@ const OutreachPopup = (): ReactElement | null => {
         <ThemeProvider theme={safeTheme}>
           <Box className={css.popup}>
             <Paper className={css.container}>
-              <Stack gap={2}>
-                <Box display="flex">
+              <Stack
+                sx={{
+                  gap: 2,
+                }}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                  }}
+                >
                   <Avatar alt="Clem, product lead" src="/images/common/outreach-popup-avatar.png" />
-                  <Box ml={1}>
+                  <Box
+                    sx={{
+                      ml: 1,
+                    }}
+                  >
                     <Typography variant="body2">Clem</Typography>
-                    <Typography variant="body2" color="primary.light">
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        color: 'primary.light',
+                      }}
+                    >
                       Product Lead
                     </Typography>
                   </Box>
@@ -95,13 +112,23 @@ const OutreachPopup = (): ReactElement | null => {
                     size="small"
                     sx={{ backgroundColor: 'text.primary', color: 'background.paper', mt: '-2px' }}
                     label={
-                      <Typography fontWeight={700} variant="overline">
+                      <Typography
+                        variant="overline"
+                        sx={{
+                          fontWeight: 700,
+                        }}
+                      >
                         EARN REWARDS
                       </Typography>
                     }
                   />
                 </Box>
-                <Typography variant="h4" fontWeight={700}>
+                <Typography
+                  variant="h4"
+                  sx={{
+                    fontWeight: 700,
+                  }}
+                >
                   You&apos;re invited!
                 </Typography>
                 <Typography>
@@ -120,7 +147,13 @@ const OutreachPopup = (): ReactElement | null => {
                     Ask me later
                   </Button>
                 </Track>
-                <Typography variant="body2" color="primary.light" mx="auto">
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'primary.light',
+                    mx: 'auto',
+                  }}
+                >
                   It&apos;ll only take 2 minutes.
                 </Typography>
                 <Track {...OUTREACH_EVENTS.CLOSE_POPUP}>
diff --git a/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx b/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
index b9a504ab8a..d2929f24ca 100644
--- a/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
+++ b/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
@@ -246,7 +246,7 @@ describe('WalletConnectProvider', () => {
         () =>
           ({
             request: mockRequest,
-          } as unknown as ReturnType<typeof useSafeWalletProvider.default>),
+          }) as unknown as ReturnType<typeof useSafeWalletProvider.default>,
       )
 
       render(
@@ -305,7 +305,7 @@ describe('WalletConnectProvider', () => {
         () =>
           ({
             request: mockRequest,
-          } as unknown as ReturnType<typeof useSafeWalletProvider.default>),
+          }) as unknown as ReturnType<typeof useSafeWalletProvider.default>,
       )
 
       render(
@@ -372,7 +372,7 @@ describe('WalletConnectProvider', () => {
         () =>
           ({
             request: mockRequest,
-          } as unknown as ReturnType<typeof useSafeWalletProvider.default>),
+          }) as unknown as ReturnType<typeof useSafeWalletProvider.default>,
       )
 
       render(
@@ -443,7 +443,7 @@ describe('WalletConnectProvider', () => {
         () =>
           ({
             request: () => Promise.reject(new Error('Test request failed')),
-          } as unknown as ReturnType<typeof useSafeWalletProvider.default>),
+          }) as unknown as ReturnType<typeof useSafeWalletProvider.default>,
       )
 
       const onRequestSpy = jest.spyOn(WalletConnectWallet.prototype, 'onRequest')
diff --git a/src/features/walletconnect/components/WcConnectionForm/index.tsx b/src/features/walletconnect/components/WcConnectionForm/index.tsx
index e1a7932325..7cdbdd79d8 100644
--- a/src/features/walletconnect/components/WcConnectionForm/index.tsx
+++ b/src/features/walletconnect/components/WcConnectionForm/index.tsx
@@ -30,7 +30,12 @@ export const WcConnectionForm = ({ sessions, uri }: { sessions: SessionTypes.Str
 
   return (
     <Grid className={css.container}>
-      <Grid item textAlign="center">
+      <Grid
+        item
+        sx={{
+          textAlign: 'center',
+        }}
+      >
         <Tooltip
           title={showHints ? 'Hide how WalletConnect works' : 'How does WalletConnect work?'}
           placement="top"
@@ -48,30 +53,41 @@ export const WcConnectionForm = ({ sessions, uri }: { sessions: SessionTypes.Str
 
         <WcLogoHeader />
 
-        <Typography variant="body2" color="text.secondary">
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+          }}
+        >
           {safeLoaded
             ? `Paste the pairing code below to connect to your Safe{Wallet} via WalletConnect`
             : `Please open one of your Safe Accounts to connect to via WalletConnect`}
         </Typography>
 
         {safeLoaded ? (
-          <Box mt={3}>
+          <Box
+            sx={{
+              mt: 3,
+            }}
+          >
             <WcInput uri={uri} />
           </Box>
         ) : null}
       </Grid>
-
       <Divider flexItem />
-
       <Grid item>
         <WcSessionList sessions={sessions} />
       </Grid>
-
       {showHints && (
         <>
           <Divider flexItem />
 
-          <Grid item mt={1}>
+          <Grid
+            item
+            sx={{
+              mt: 1,
+            }}
+          >
             <WcHints />
           </Grid>
         </>
diff --git a/src/features/walletconnect/components/WcConnectionState/index.tsx b/src/features/walletconnect/components/WcConnectionState/index.tsx
index d3f4284e72..e48d608677 100644
--- a/src/features/walletconnect/components/WcConnectionState/index.tsx
+++ b/src/features/walletconnect/components/WcConnectionState/index.tsx
@@ -24,8 +24,12 @@ const WcConnectionState = ({ metadata, isDelete }: { metadata?: CoreTypes.Metada
 
         <SafeAppIconCard src={icon} width={28} height={28} alt={`${name} logo`} />
       </div>
-
-      <Typography variant="h5" mt={3}>
+      <Typography
+        variant="h5"
+        sx={{
+          mt: 3,
+        }}
+      >
         {isDelete ? `${name} disconnected` : `${name} successfully connected!`}
       </Typography>
     </div>
diff --git a/src/features/walletconnect/components/WcErrorMessage/index.tsx b/src/features/walletconnect/components/WcErrorMessage/index.tsx
index 05454ab393..e14144925b 100644
--- a/src/features/walletconnect/components/WcErrorMessage/index.tsx
+++ b/src/features/walletconnect/components/WcErrorMessage/index.tsx
@@ -10,13 +10,16 @@ const WcErrorMessage = ({ error, onClose }: { error: Error; onClose: () => void
   return (
     <div className={css.errorContainer}>
       <WcLogoHeader errorMessage={summary} />
-
       {details && (
-        <Typography mt={1} className={css.details}>
+        <Typography
+          className={css.details}
+          sx={{
+            mt: 1,
+          }}
+        >
           {details}
         </Typography>
       )}
-
       <Button variant="contained" onClick={onClose} className={css.button}>
         OK
       </Button>
diff --git a/src/features/walletconnect/components/WcHints/index.tsx b/src/features/walletconnect/components/WcHints/index.tsx
index 8123a20c2b..defb6b04df 100644
--- a/src/features/walletconnect/components/WcHints/index.tsx
+++ b/src/features/walletconnect/components/WcHints/index.tsx
@@ -85,7 +85,13 @@ const WcHints = (): ReactElement => {
   }
 
   return (
-    <Box display="flex" flexDirection="column" gap={1}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+      }}
+    >
       <HintAccordion
         title={ConnectionTitle}
         items={ConnectionSteps}
diff --git a/src/features/walletconnect/components/WcLogoHeader/index.tsx b/src/features/walletconnect/components/WcLogoHeader/index.tsx
index d879fb642d..fa128879f5 100644
--- a/src/features/walletconnect/components/WcLogoHeader/index.tsx
+++ b/src/features/walletconnect/components/WcLogoHeader/index.tsx
@@ -11,8 +11,14 @@ const WcLogoHeader = ({ errorMessage }: { errorMessage?: string }): ReactElement
         <SvgIcon component={WalletConnect} inheritViewBox className={css.icon} />
         {errorMessage && <SvgIcon component={Alert} inheritViewBox className={css.errorBadge} fontSize="small" />}
       </div>
-
-      <Typography variant="h5" mt={2} mb={0.5} className={css.title}>
+      <Typography
+        variant="h5"
+        className={css.title}
+        sx={{
+          mt: 2,
+          mb: 0.5,
+        }}
+      >
         {errorMessage || 'Connect dApps to Safe{Wallet}'}
       </Typography>
     </>
diff --git a/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx b/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx
index ac70503186..d74aed5dfd 100644
--- a/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx
+++ b/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx
@@ -32,10 +32,14 @@ export const CompatibilityWarning = ({
       <Alert severity={severity} className={css.alert}>
         {message}
       </Alert>
-
       {isUnsupportedChain && (
         <>
-          <Typography mt={3} mb={1}>
+          <Typography
+            sx={{
+              mt: 3,
+              mb: 1,
+            }}
+          >
             Supported networks
           </Typography>
 
@@ -45,7 +49,12 @@ export const CompatibilityWarning = ({
             ))}
           </div>
 
-          <Typography mt={3} component="div">
+          <Typography
+            component="div"
+            sx={{
+              mt: 3,
+            }}
+          >
             Switch network
             <NetworkSelector onChainSelect={onChainChange} />
           </Typography>
diff --git a/src/features/walletconnect/components/WcProposalForm/index.tsx b/src/features/walletconnect/components/WcProposalForm/index.tsx
index 21ac308a3e..2f0bf672c8 100644
--- a/src/features/walletconnect/components/WcProposalForm/index.tsx
+++ b/src/features/walletconnect/components/WcProposalForm/index.tsx
@@ -114,30 +114,39 @@ const WcProposalForm = ({ proposal, setProposal, onApprove }: ProposalFormProps)
 
   return (
     <div className={css.container}>
-      <Typography variant="body2" color="text.secondary">
+      <Typography
+        variant="body2"
+        sx={{
+          color: 'text.secondary',
+        }}
+      >
         WalletConnect
       </Typography>
-
       {proposer.metadata.icons[0] && (
         <div className={css.icon}>
           <SafeAppIconCard src={proposer.metadata.icons[0]} width={32} height={32} alt={`${name || 'dApp'} logo`} />
         </div>
       )}
-
-      <Typography mb={1}>
+      <Typography
+        sx={{
+          mb: 1,
+        }}
+      >
         <b>{name}</b> wants to connect
       </Typography>
-
-      <Typography className={css.origin} mb={3}>
+      <Typography
+        className={css.origin}
+        sx={{
+          mb: 3,
+        }}
+      >
         {proposal.verifyContext.verified.origin}
       </Typography>
-
       <div className={css.info}>
         <ProposalVerification proposal={proposal} />
 
         <CompatibilityWarning proposal={proposal} chainIds={chainIds} />
       </div>
-
       {!isBlocked && isHighRisk && (
         <FormControlLabel
           className={css.checkbox}
@@ -145,13 +154,10 @@ const WcProposalForm = ({ proposal, setProposal, onApprove }: ProposalFormProps)
           label="I understand the risks associated with interacting with this dApp and would like to continue."
         />
       )}
-
       {isSafePass && sanctionedAddress && (
         <BlockedAddress address={sanctionedAddress} featureTitle="Safe{Pass}" onClose={onReject} />
       )}
-
       <Divider flexItem className={css.divider} />
-
       <div className={css.buttons}>
         <Button variant="danger" onClick={onReject} className={css.button} disabled={!!isLoading}>
           {isLoading === WCLoadingState.REJECT ? <CircularProgress size={20} /> : 'Reject'}
diff --git a/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx b/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx
index 21d7ce34fa..ef8c46b68c 100644
--- a/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx
+++ b/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx
@@ -21,11 +21,13 @@ const WcSampleDapps = ({ onUnload }: { onUnload: () => void }) => {
   return (
     <Typography
       variant="body2"
-      display="flex"
-      justifyContent="space-between"
-      alignItems="center"
-      mt={3}
       component="div"
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        mt: 3,
+      }}
     >
       {SAMPLE_DAPPS.map((item) => (
         <Typography variant="body2" key={item.url}>
@@ -51,10 +53,15 @@ const WcNoSessions = () => {
 
   return (
     <>
-      <Typography variant="body2" textAlign="center" color="text.secondary">
+      <Typography
+        variant="body2"
+        sx={{
+          textAlign: 'center',
+          color: 'text.secondary',
+        }}
+      >
         No dApps are connected yet.{sampleDapps ? ' Try one of these:' : ''}
       </Typography>
-
       {sampleDapps}
     </>
   )
diff --git a/src/hooks/__tests__/useChainId.test.ts b/src/hooks/__tests__/useChainId.test.ts
index b93c047509..6a0a737a2b 100644
--- a/src/hooks/__tests__/useChainId.test.ts
+++ b/src/hooks/__tests__/useChainId.test.ts
@@ -84,7 +84,7 @@ describe('useChainId hook', () => {
       () =>
         ({
           chainId: '1337',
-        } as ConnectedWallet),
+        }) as ConnectedWallet,
     )
 
     jest.spyOn(useChains, 'default').mockImplementation(() => ({
diff --git a/src/hooks/__tests__/useDebounce.test.ts b/src/hooks/__tests__/useDebounce.test.ts
index 4c96a0426b..0b51ea5a35 100644
--- a/src/hooks/__tests__/useDebounce.test.ts
+++ b/src/hooks/__tests__/useDebounce.test.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
-import { renderHook, act } from '@testing-library/react'
+import { renderHook } from '@testing-library/react'
+import { act } from 'react'
 import useDebounce from '../useDebounce'
 
 const useTestHook = (): string => {
diff --git a/src/hooks/__tests__/useLoadSpendingLimits.test.ts b/src/hooks/__tests__/useLoadSpendingLimits.test.ts
index d84275eab3..3dfaea11ab 100644
--- a/src/hooks/__tests__/useLoadSpendingLimits.test.ts
+++ b/src/hooks/__tests__/useLoadSpendingLimits.test.ts
@@ -178,7 +178,7 @@ describe('getTokenAllowanceForDelegate', () => {
           },
           _isProvider: true,
           resolveName: (name: string) => name,
-        } as any),
+        }) as any,
     )
 
     const mockContract = { getTokenAllowance: getTokenAllowanceMock } as unknown as AllowanceModule
diff --git a/src/hooks/__tests__/useSafeTokenAllocation.test.ts b/src/hooks/__tests__/useSafeTokenAllocation.test.ts
index 6b66b3c44d..f86cdd9896 100644
--- a/src/hooks/__tests__/useSafeTokenAllocation.test.ts
+++ b/src/hooks/__tests__/useSafeTokenAllocation.test.ts
@@ -82,7 +82,7 @@ describe('Allocations', () => {
             address: toBeHex('0x2', 20),
             chainId: '1',
           },
-        } as any),
+        }) as any,
     )
   })
 
@@ -96,7 +96,7 @@ describe('Allocations', () => {
               address: undefined,
               chainId: '1',
             },
-          } as any),
+          }) as any,
       )
 
       const { result } = renderHook(() => useSafeTokenAllocation())
@@ -170,7 +170,7 @@ describe('Allocations', () => {
               }
               return Promise.resolve('0x')
             },
-          } as any),
+          }) as any,
       )
 
       const { result } = renderHook(() => useSafeTokenAllocation())
@@ -229,7 +229,7 @@ describe('Allocations', () => {
               }
               return Promise.resolve('0x')
             },
-          } as any),
+          }) as any,
       )
 
       const { result } = renderHook(() => useSafeTokenAllocation())
@@ -268,7 +268,7 @@ describe('Allocations', () => {
               address: undefined,
               chainId: '1',
             },
-          } as any),
+          }) as any,
       )
 
       const { result } = renderHook(() => useSafeVotingPower([{} as Vesting]))
@@ -295,7 +295,7 @@ describe('Allocations', () => {
               }
               return Promise.resolve('0x')
             },
-          } as any),
+          }) as any,
       )
 
       const { result } = renderHook(() => useSafeVotingPower())
@@ -321,7 +321,7 @@ describe('Allocations', () => {
               }
               return Promise.resolve('0x')
             },
-          } as any),
+          }) as any,
       )
 
       const mockAllocation: Vesting[] = [
@@ -366,7 +366,7 @@ describe('Allocations', () => {
               }
               return Promise.resolve('0x')
             },
-          } as any),
+          }) as any,
       )
 
       const mockAllocation: Vesting[] = [
diff --git a/src/hooks/messages/__tests__/useSafeMessageStatus.test.ts b/src/hooks/messages/__tests__/useSafeMessageStatus.test.ts
index 1af158baa5..bc0a390e07 100644
--- a/src/hooks/messages/__tests__/useSafeMessageStatus.test.ts
+++ b/src/hooks/messages/__tests__/useSafeMessageStatus.test.ts
@@ -18,7 +18,7 @@ describe('useSafeMessageStatus', () => {
 
   it('should return "Awaiting confirmations" if the message is not pending, the wallet has signed it but it is not fully signed', () => {
     jest.spyOn(useIsSafeMessagePendingHook, 'default').mockImplementation(() => false)
-    jest.spyOn(useWalletHook, 'default').mockImplementation(() => ({ address: '0x123' } as ConnectedWallet))
+    jest.spyOn(useWalletHook, 'default').mockImplementation(() => ({ address: '0x123' }) as ConnectedWallet)
 
     const message = {
       confirmations: [{ owner: { value: '0x123' } }],
@@ -31,7 +31,7 @@ describe('useSafeMessageStatus', () => {
 
   it('should return the message status if the message is not pending and the wallet has not signed the message', () => {
     jest.spyOn(useIsSafeMessagePendingHook, 'default').mockImplementation(() => false)
-    jest.spyOn(useWalletHook, 'default').mockImplementation(() => ({ address: '0x123' } as ConnectedWallet))
+    jest.spyOn(useWalletHook, 'default').mockImplementation(() => ({ address: '0x123' }) as ConnectedWallet)
 
     const message = {
       confirmations: [{ owner: { value: '0x456' } }] as SafeMessage['confirmations'],
@@ -44,7 +44,7 @@ describe('useSafeMessageStatus', () => {
 
   it('should return the message status if the message is not pending and it is fully signed', () => {
     jest.spyOn(useIsSafeMessagePendingHook, 'default').mockImplementation(() => false)
-    jest.spyOn(useWalletHook, 'default').mockImplementation(() => ({ address: '0x123' } as ConnectedWallet))
+    jest.spyOn(useWalletHook, 'default').mockImplementation(() => ({ address: '0x123' }) as ConnectedWallet)
 
     const message = {
       confirmations: [{ owner: { value: '0x123' } }] as SafeMessage['confirmations'],
diff --git a/src/hooks/messages/useSafeMessageStatus.ts b/src/hooks/messages/useSafeMessageStatus.ts
index c2bc737f7f..c68f48eda5 100644
--- a/src/hooks/messages/useSafeMessageStatus.ts
+++ b/src/hooks/messages/useSafeMessageStatus.ts
@@ -9,7 +9,7 @@ const AwaitingConfirmationsStatus = 'AWAITING_CONFIRMATIONS'
 
 type SafeMessageLocalStatus = SafeMessageStatus | typeof ConfirmingStatus | typeof AwaitingConfirmationsStatus
 
-const STATUS_LABELS: { [key in SafeMessageLocalStatus]: string } = {
+const STATUS_LABELS: { [_key in SafeMessageLocalStatus]: string } = {
   [ConfirmingStatus]: 'Confirming',
   [AwaitingConfirmationsStatus]: 'Awaiting confirmations',
   [SafeMessageStatus.CONFIRMED]: 'Confirmed',
diff --git a/src/hooks/safe-apps/__tests__/useCategoryFilter.test.ts b/src/hooks/safe-apps/__tests__/useCategoryFilter.test.ts
index 09864d9829..96b0d5e4c4 100644
--- a/src/hooks/safe-apps/__tests__/useCategoryFilter.test.ts
+++ b/src/hooks/safe-apps/__tests__/useCategoryFilter.test.ts
@@ -11,7 +11,7 @@ describe('useCategoryFilter', () => {
   })
 
   it('should not set categories if there are none in the URL', () => {
-    jest.spyOn(nextRouter, 'useRouter').mockImplementation(() => ({ isReady: true, query: {} } as any))
+    jest.spyOn(nextRouter, 'useRouter').mockImplementation(() => ({ isReady: true, query: {} }) as any)
 
     const mockSetter = jest.fn()
 
@@ -25,7 +25,7 @@ describe('useCategoryFilter', () => {
   it('should not set categories if they are already set', () => {
     jest
       .spyOn(nextRouter, 'useRouter')
-      .mockImplementation(() => ({ isReady: true, query: { categories: 'Aggregator' } } as any))
+      .mockImplementation(() => ({ isReady: true, query: { categories: 'Aggregator' } }) as any)
 
     const mockSetter = jest.fn()
 
@@ -43,7 +43,7 @@ describe('useCategoryFilter', () => {
   it('should not set categories that do not exist', () => {
     jest
       .spyOn(nextRouter, 'useRouter')
-      .mockImplementation(() => ({ isReady: true, query: { categories: 'RandomCategory' } } as any))
+      .mockImplementation(() => ({ isReady: true, query: { categories: 'RandomCategory' } }) as any)
 
     const mockSetter = jest.fn()
 
@@ -61,7 +61,7 @@ describe('useCategoryFilter', () => {
   it('should set categories from the URL', () => {
     jest
       .spyOn(nextRouter, 'useRouter')
-      .mockImplementation(() => ({ isReady: true, query: { categories: 'DeFi' } } as any))
+      .mockImplementation(() => ({ isReady: true, query: { categories: 'DeFi' } }) as any)
 
     const mockSetter = jest.fn()
 
diff --git a/src/hooks/useTxNotifications.ts b/src/hooks/useTxNotifications.ts
index c778e43d00..b1feb2202a 100644
--- a/src/hooks/useTxNotifications.ts
+++ b/src/hooks/useTxNotifications.ts
@@ -86,8 +86,8 @@ const useTxNotifications = (): void => {
             link: txId
               ? getTxLink(txId, chain, safeAddress)
               : txHash
-              ? getExplorerLink(txHash, chain.blockExplorerUriTemplate)
-              : undefined,
+                ? getExplorerLink(txHash, chain.blockExplorerUriTemplate)
+                : undefined,
           }),
         )
       }),
diff --git a/src/hooks/useVisibleBalances.ts b/src/hooks/useVisibleBalances.ts
index f6b81f0dc5..0cf20252af 100644
--- a/src/hooks/useVisibleBalances.ts
+++ b/src/hooks/useVisibleBalances.ts
@@ -26,12 +26,15 @@ const filterHiddenTokens = (items: SafeBalanceResponse['items'], hiddenAssets: s
 const getVisibleFiatTotal = (balances: SafeBalanceResponse, hiddenAssets: string[]): string => {
   return safeFormatUnits(
     balances.items
-      .reduce((acc, balanceItem) => {
-        if (hiddenAssets.includes(balanceItem.tokenInfo.address)) {
-          return acc - BigInt(safeParseUnits(truncateNumber(balanceItem.fiatBalance), PRECISION) ?? 0)
-        }
-        return acc
-      }, BigInt(balances.fiatTotal === '' ? 0 : safeParseUnits(truncateNumber(balances.fiatTotal), PRECISION) ?? 0))
+      .reduce(
+        (acc, balanceItem) => {
+          if (hiddenAssets.includes(balanceItem.tokenInfo.address)) {
+            return acc - BigInt(safeParseUnits(truncateNumber(balanceItem.fiatBalance), PRECISION) ?? 0)
+          }
+          return acc
+        },
+        BigInt(balances.fiatTotal === '' ? 0 : (safeParseUnits(truncateNumber(balances.fiatTotal), PRECISION) ?? 0)),
+      )
       .toString(),
     PRECISION,
   )
diff --git a/src/hooks/wallets/consts.ts b/src/hooks/wallets/consts.ts
index e12c1ccd21..7752add106 100644
--- a/src/hooks/wallets/consts.ts
+++ b/src/hooks/wallets/consts.ts
@@ -9,7 +9,7 @@ export const enum WALLET_KEYS {
 }
 
 // TODO: Check if undefined is needed as a return type, possibly couple this with WALLET_MODULES
-export const CGW_NAMES: { [key in WALLET_KEYS]: string | undefined } = {
+export const CGW_NAMES: { [_key in WALLET_KEYS]: string | undefined } = {
   [WALLET_KEYS.INJECTED]: 'detectedwallet',
   [WALLET_KEYS.WALLETCONNECT_V2]: 'walletConnect_v2',
   [WALLET_KEYS.COINBASE]: 'coinbase',
diff --git a/src/hooks/wallets/wallets.ts b/src/hooks/wallets/wallets.ts
index e7098be879..cd316bc103 100644
--- a/src/hooks/wallets/wallets.ts
+++ b/src/hooks/wallets/wallets.ts
@@ -38,7 +38,7 @@ const walletConnectV2 = (chain: ChainInfo) => {
   })
 }
 
-const WALLET_MODULES: Partial<{ [key in WALLET_KEYS]: (chain: ChainInfo) => WalletInit }> = {
+const WALLET_MODULES: Partial<{ [_key in WALLET_KEYS]: (chain: ChainInfo) => WalletInit }> = {
   [WALLET_KEYS.INJECTED]: () => injectedWalletModule() as WalletInit,
   [WALLET_KEYS.WALLETCONNECT_V2]: (chain) => walletConnectV2(chain) as WalletInit,
   [WALLET_KEYS.COINBASE]: () => coinbaseModule({ darkMode: prefersDarkMode() }) as WalletInit,
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 3e37351be6..9c1323045c 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -48,7 +48,6 @@ const getInitialProps = async (ctx: DocumentContext) => {
     <style
       data-emotion={`${style.key} ${style.ids.join(' ')}`}
       key={style.key}
-      // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: style.css }}
     />
   ))
diff --git a/src/pages/_offline.tsx b/src/pages/_offline.tsx
index a36fda8e98..4ff520c244 100644
--- a/src/pages/_offline.tsx
+++ b/src/pages/_offline.tsx
@@ -9,30 +9,61 @@ const Offline: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Offline'}</title>
       </Head>
-
       <main>
-        <Box display="flex" justifyContent="center">
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
           <Paper sx={{ p: 4, mb: 2, maxWidth: 900 }}>
-            <Box display="flex" justifyContent="center" mb={2} fontSize={100}>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                mb: 2,
+                fontSize: 100,
+              }}
+            >
               <WifiOffIcon fontSize="inherit" />
             </Box>
 
-            <Typography variant="h1" textAlign="center">
+            <Typography
+              variant="h1"
+              sx={{
+                textAlign: 'center',
+              }}
+            >
               Oops, it looks like you&apos;re offline!
             </Typography>
 
-            <Typography variant="body1" mt={3}>
+            <Typography
+              variant="body1"
+              sx={{
+                mt: 3,
+              }}
+            >
               We apologize, but it looks like you are currently unable to access our app due to an offline connection.
             </Typography>
 
-            <Typography variant="body1" mt={2}>
+            <Typography
+              variant="body1"
+              sx={{
+                mt: 2,
+              }}
+            >
               While you wait for your internet to come back online, we encourage you to take a moment to step outside
               and enjoy the nature. If you have the opportunity, try touching the grass with your bare feet -
               there&apos;s something about the sensation of grass on our skin that can be really grounding and
               refreshing.
             </Typography>
 
-            <Typography variant="body1" mt={2}>
+            <Typography
+              variant="body1"
+              sx={{
+                mt: 2,
+              }}
+            >
               We hope to see you back online soon. Thank you for your patience.
             </Typography>
           </Paper>
diff --git a/src/pages/apps/open.tsx b/src/pages/apps/open.tsx
index 938e690dcb..5e7402d173 100644
--- a/src/pages/apps/open.tsx
+++ b/src/pages/apps/open.tsx
@@ -82,7 +82,14 @@ const SafeApps: NextPage = () => {
 
   if (isLoading) {
     return (
-      <Box display="flex" justifyContent="center" alignItems="center" height="100%">
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+        }}
+      >
         <CircularProgress />
       </Box>
     )
diff --git a/src/pages/balances/index.tsx b/src/pages/balances/index.tsx
index 6a69b95670..a1ee8db0ee 100644
--- a/src/pages/balances/index.tsx
+++ b/src/pages/balances/index.tsx
@@ -26,16 +26,18 @@ const Balances: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Assets'}</title>
       </Head>
-
       <AssetsHeader>
         <HiddenTokenButton showHiddenAssets={showHiddenAssets} toggleShowHiddenAssets={toggleShowHiddenAssets} />
         <TokenListSelect />
         <CurrencySelect />
       </AssetsHeader>
-
       <main>
         {isStakingBannerEnabled && (
-          <Box mb={2}>
+          <Box
+            sx={{
+              mb: 2,
+            }}
+          >
             <StakingBanner />
           </Box>
         )}
diff --git a/src/pages/balances/nfts.tsx b/src/pages/balances/nfts.tsx
index 35a4d27fa7..fcf5976766 100644
--- a/src/pages/balances/nfts.tsx
+++ b/src/pages/balances/nfts.tsx
@@ -17,11 +17,25 @@ const NftApps = memo(function NftApps(): ReactElement | null {
   }
 
   return (
-    <Grid item sm={12} lg={3} order={{ lg: 1 }}>
-      <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2} mt={0.75}>
+    <Grid
+      item
+      sm={12}
+      lg={3}
+      sx={{
+        order: { lg: 1 },
+      }}
+    >
+      <Typography
+        component="h2"
+        variant="subtitle1"
+        sx={{
+          fontWeight: 700,
+          mb: 2,
+          mt: 0.75,
+        }}
+      >
         NFT Safe Apps
       </Typography>
-
       <Grid container spacing={3}>
         {nftApps ? (
           nftApps.map((nftSafeApp) => (
diff --git a/src/pages/imprint.tsx b/src/pages/imprint.tsx
index 2a9725ba59..fe3ac20373 100644
--- a/src/pages/imprint.tsx
+++ b/src/pages/imprint.tsx
@@ -7,20 +7,38 @@ import MUILink from '@mui/material/Link'
 
 const SafeImprint = () => (
   <div>
-    <Typography variant="h1" mb={2}>
+    <Typography
+      variant="h1"
+      sx={{
+        mb: 2,
+      }}
+    >
       Imprint & Disclaimer
     </Typography>
-    <Typography variant="h3" mb={2}>
+    <Typography
+      variant="h3"
+      sx={{
+        mb: 2,
+      }}
+    >
       Information in accordance with section 5 of the Telemedia Act (TMG, Germany):
     </Typography>
-    <Typography mb={2}>
+    <Typography
+      sx={{
+        mb: 2,
+      }}
+    >
       Core Contributors GmbH
       <br />
       Gontardstraße 11
       <br />
       10178 Berlin, Germany
     </Typography>
-    <Typography mb={4}>
+    <Typography
+      sx={{
+        mb: 4,
+      }}
+    >
       Managing director: Richard Meißner
       <br />
       Contact:{' '}
@@ -32,13 +50,26 @@ const SafeImprint = () => (
       <br />
       Register Number: HRB 240421 B
     </Typography>
-    <Typography variant="h3" mb={2}>
+    <Typography
+      variant="h3"
+      sx={{
+        mb: 2,
+      }}
+    >
       Disclaimer
     </Typography>
-    <Typography mb={1}>
+    <Typography
+      sx={{
+        mb: 1,
+      }}
+    >
       <strong>Accountability for content</strong>
     </Typography>
-    <Typography mb={2}>
+    <Typography
+      sx={{
+        mb: 2,
+      }}
+    >
       The contents of our pages have been created with the utmost care. However, we cannot guarantee the contents’
       accuracy, completeness or topicality. According to statutory provisions, we are furthermore responsible for our
       own content on these web pages. In this context, please note that we are accordingly not obliged to monitor merely
@@ -46,15 +77,27 @@ const SafeImprint = () => (
       Our obligations to remove or block the use of information under generally applicable laws remain unaffected by
       this as per §§ 8 to 10 of the Telemedia Act (TMG).
     </Typography>
-    <Typography mb={1}>
+    <Typography
+      sx={{
+        mb: 1,
+      }}
+    >
       <strong>Accountability for links</strong>
     </Typography>
-    <Typography mb={2}>
+    <Typography
+      sx={{
+        mb: 2,
+      }}
+    >
       Responsibility for the content of external links (to web pages of third parties) lies solely with the operators of
       the linked pages. No violations were evident to us at the time of linking. Should any legal infringement become
       known to us, we will remove the respective link immediately.
     </Typography>
-    <Typography mb={1}>
+    <Typography
+      sx={{
+        mb: 1,
+      }}
+    >
       <strong>Copyright</strong>
     </Typography>
     <Typography>
diff --git a/src/pages/licenses.tsx b/src/pages/licenses.tsx
index 7d271c8981..7f29e2bb29 100644
--- a/src/pages/licenses.tsx
+++ b/src/pages/licenses.tsx
@@ -7,18 +7,41 @@ import Paper from '@mui/material/Paper'
 
 const SafeLicenses = () => (
   <>
-    <Typography variant="h1" mb={2}>
+    <Typography
+      variant="h1"
+      sx={{
+        mb: 2,
+      }}
+    >
       Licenses
     </Typography>
-    <Typography variant="h3" mb={2}>
+    <Typography
+      variant="h3"
+      sx={{
+        mb: 2,
+      }}
+    >
       Libraries we use
     </Typography>
-    <Box mb={4}>
-      <Typography mb={3}>
+    <Box
+      sx={{
+        mb: 4,
+      }}
+    >
+      <Typography
+        sx={{
+          mb: 3,
+        }}
+      >
         This page contains a list of attribution notices for third party software that may be contained in portions of
         the {'Safe{Wallet}'}. We thank the open source community for all of their contributions.
       </Typography>
-      <Typography variant="h2" mb={2}>
+      <Typography
+        variant="h2"
+        sx={{
+          mb: 2,
+        }}
+      >
         Android
       </Typography>
       <TableContainer component={Paper}>
@@ -215,8 +238,17 @@ const SafeLicenses = () => (
         </Table>
       </TableContainer>
     </Box>
-    <Box mb={4}>
-      <Typography variant="h2" mb={2}>
+    <Box
+      sx={{
+        mb: 4,
+      }}
+    >
+      <Typography
+        variant="h2"
+        sx={{
+          mb: 2,
+        }}
+      >
         iOS
       </Typography>
       <TableContainer component={Paper}>
@@ -342,7 +374,12 @@ const SafeLicenses = () => (
       </TableContainer>
     </Box>
     <Box>
-      <Typography variant="h2" mb={2}>
+      <Typography
+        variant="h2"
+        sx={{
+          mb: 2,
+        }}
+      >
         Web
       </Typography>
       <TableContainer component={Paper}>
diff --git a/src/pages/privacy.tsx b/src/pages/privacy.tsx
index 5a3bd6d395..8bf31ed9e1 100644
--- a/src/pages/privacy.tsx
+++ b/src/pages/privacy.tsx
@@ -6,7 +6,6 @@ import { IS_OFFICIAL_HOST } from '@/config/constants'
 import SafePrivacyPolicy from '@/markdown/privacy/privacy.md'
 
 const overrideComponents: MDXComponents = {
-  // @ts-expect-error
   a: CustomLink,
 }
 
diff --git a/src/pages/settings/appearance.tsx b/src/pages/settings/appearance.tsx
index d9b7d09c19..6832244d2d 100644
--- a/src/pages/settings/appearance.tsx
+++ b/src/pages/settings/appearance.tsx
@@ -34,20 +34,28 @@ const Appearance: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Settings – Appearance'}</title>
       </Head>
-
       <SettingsHeader />
-
       <main>
         <Paper sx={{ p: 4 }}>
           <Grid container spacing={3}>
             <Grid item lg={4} xs={12}>
-              <Typography variant="h4" fontWeight="bold" mb={1}>
+              <Typography
+                variant="h4"
+                sx={{
+                  fontWeight: 'bold',
+                  mb: 1,
+                }}
+              >
                 Chain-specific addresses
               </Typography>
             </Grid>
 
             <Grid item xs>
-              <Typography mb={2}>
+              <Typography
+                sx={{
+                  mb: 2,
+                }}
+              >
                 Choose whether to copy{' '}
                 <ExternalLink href="https://eips.ethereum.org/EIPS/eip-3770">EIP-3770</ExternalLink> prefixes when
                 copying Ethereum addresses.
@@ -66,9 +74,21 @@ const Appearance: NextPage = () => {
             </Grid>
           </Grid>
 
-          <Grid container alignItems="center" marginTop={2} spacing={3}>
+          <Grid
+            container
+            spacing={3}
+            sx={{
+              alignItems: 'center',
+              marginTop: 2,
+            }}
+          >
             <Grid item lg={4} xs={12}>
-              <Typography variant="h4" fontWeight="bold">
+              <Typography
+                variant="h4"
+                sx={{
+                  fontWeight: 'bold',
+                }}
+              >
                 Theme
               </Typography>
             </Grid>
diff --git a/src/pages/settings/cookies.tsx b/src/pages/settings/cookies.tsx
index 4fb0c830ae..301a969e55 100644
--- a/src/pages/settings/cookies.tsx
+++ b/src/pages/settings/cookies.tsx
@@ -10,14 +10,17 @@ const Cookies: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Settings – Cookies'}</title>
       </Head>
-
       <SettingsHeader />
-
       <main>
         <Paper sx={{ p: 4, mb: 2 }}>
           <Grid container spacing={3}>
             <Grid item sm={4} xs={12}>
-              <Typography variant="h4" fontWeight={700}>
+              <Typography
+                variant="h4"
+                sx={{
+                  fontWeight: 700,
+                }}
+              >
                 Cookie preferences
               </Typography>
             </Grid>
diff --git a/src/pages/settings/setup.tsx b/src/pages/settings/setup.tsx
index 1dad75fee9..60338a6c79 100644
--- a/src/pages/settings/setup.tsx
+++ b/src/pages/settings/setup.tsx
@@ -21,14 +21,17 @@ const Setup: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Settings – Setup'}</title>
       </Head>
-
       <SettingsHeader />
-
       <main>
         <Paper data-testid="setup-section" sx={{ p: 4, mb: 2 }}>
           <Grid container spacing={3}>
             <Grid item lg={4} xs={12}>
-              <Typography variant="h4" fontWeight={700}>
+              <Typography
+                variant="h4"
+                sx={{
+                  fontWeight: 700,
+                }}
+              >
                 <Tooltip
                   placement="top"
                   title="For security reasons, transactions made with a Safe Account need to be executed in order. The nonce shows you which transaction will be executed next. You can find the nonce for a transaction in the transaction details."
@@ -46,7 +49,11 @@ const Setup: NextPage = () => {
                 </Tooltip>
               </Typography>
 
-              <Typography pt={1}>
+              <Typography
+                sx={{
+                  pt: 1,
+                }}
+              >
                 Current nonce:{' '}
                 {safeLoaded ? <b>{nonce}</b> : <Skeleton width="30px" sx={{ display: 'inline-block' }} />}
               </Typography>
diff --git a/src/pages/share/safe-app.tsx b/src/pages/share/safe-app.tsx
index 1940e462a5..3cfe2f7d1f 100644
--- a/src/pages/share/safe-app.tsx
+++ b/src/pages/share/safe-app.tsx
@@ -13,12 +13,16 @@ const ShareSafeApp = () => {
       <Head>
         <title>{`Safe{Wallet} – Safe Apps`}</title>
       </Head>
-
       <main>
         {appUrl && chain ? (
           <SafeAppLanding appUrl={appUrl} chain={chain} />
         ) : (
-          <Box py={4} textAlign="center">
+          <Box
+            sx={{
+              py: 4,
+              textAlign: 'center',
+            }}
+          >
             <CircularProgress size={40} />
           </Box>
         )}
diff --git a/src/pages/stake.tsx b/src/pages/stake.tsx
index 2b629a2676..9e563bf8d0 100644
--- a/src/pages/stake.tsx
+++ b/src/pages/stake.tsx
@@ -15,12 +15,16 @@ const StakePage: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Stake'}</title>
       </Head>
-
       {isFeatureEnabled === true ? (
         <LazyStakePage />
       ) : isFeatureEnabled === false ? (
         <main>
-          <Typography textAlign="center" my={3}>
+          <Typography
+            sx={{
+              textAlign: 'center',
+              my: 3,
+            }}
+          >
             Staking is not available on this network.
           </Typography>
         </main>
diff --git a/src/pages/swap.tsx b/src/pages/swap.tsx
index 0a18c061b8..d374e81f1f 100644
--- a/src/pages/swap.tsx
+++ b/src/pages/swap.tsx
@@ -35,12 +35,16 @@ const SwapPage: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Swap'}</title>
       </Head>
-
       <main style={{ height: 'calc(100vh - 52px)' }}>
         {isFeatureEnabled === true ? (
           <SwapWidgetNoSSR sell={sell} />
         ) : isFeatureEnabled === false ? (
-          <Typography textAlign="center" my={3}>
+          <Typography
+            sx={{
+              textAlign: 'center',
+              my: 3,
+            }}
+          >
             Swaps are not supported on this network.
           </Typography>
         ) : null}
diff --git a/src/pages/terms.tsx b/src/pages/terms.tsx
index 74005757fa..8354588ef2 100644
--- a/src/pages/terms.tsx
+++ b/src/pages/terms.tsx
@@ -6,7 +6,6 @@ import SafeTerms from '@/markdown/terms/terms.md'
 import type { MDXComponents } from 'mdx/types'
 
 const overrideComponents: MDXComponents = {
-  // @ts-expect-error
   a: CustomLink,
 }
 
diff --git a/src/pages/transactions/history.tsx b/src/pages/transactions/history.tsx
index d1d9f280e4..b014bbe90f 100644
--- a/src/pages/transactions/history.tsx
+++ b/src/pages/transactions/history.tsx
@@ -27,7 +27,6 @@ const History: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Transaction history'}</title>
       </Head>
-
       <TxHeader>
         <TrustedToggle />
 
@@ -35,11 +34,14 @@ const History: NextPage = () => {
           {filter?.type ?? 'Filter'}
         </Button>
       </TxHeader>
-
       <main>
         {showFilter && <TxFilterForm toggleFilter={toggleFilter} />}
 
-        <Box mb={4}>
+        <Box
+          sx={{
+            mb: 4,
+          }}
+        >
           <PaginatedTxns useTxns={useTxHistory} />
         </Box>
       </main>
diff --git a/src/pages/transactions/msg.tsx b/src/pages/transactions/msg.tsx
index 2db44e1e61..82cd4e62e4 100644
--- a/src/pages/transactions/msg.tsx
+++ b/src/pages/transactions/msg.tsx
@@ -10,9 +10,16 @@ const SingleTransaction: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Message details'}</title>
       </Head>
-
       <main>
-        <Typography data-testid="tx-details" variant="h3" fontWeight={700} pt={1} mb={3}>
+        <Typography
+          data-testid="tx-details"
+          variant="h3"
+          sx={{
+            fontWeight: 700,
+            pt: 1,
+            mb: 3,
+          }}
+        >
           Message details
         </Typography>
 
diff --git a/src/pages/transactions/queue.tsx b/src/pages/transactions/queue.tsx
index f68919550e..cc44deaf1b 100644
--- a/src/pages/transactions/queue.tsx
+++ b/src/pages/transactions/queue.tsx
@@ -17,14 +17,17 @@ const Queue: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Transaction queue'}</title>
       </Head>
-
       <BatchExecuteHoverProvider>
         <TxHeader>
           <BatchExecuteButton />
         </TxHeader>
 
         <main>
-          <Box mb={4}>
+          <Box
+            sx={{
+              mb: 4,
+            }}
+          >
             <RecoveryList />
 
             {/* Pending unsigned transactions */}
diff --git a/src/pages/transactions/tx.tsx b/src/pages/transactions/tx.tsx
index e60e093ebe..61d4207550 100644
--- a/src/pages/transactions/tx.tsx
+++ b/src/pages/transactions/tx.tsx
@@ -10,9 +10,16 @@ const SingleTransaction: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Transaction details'}</title>
       </Head>
-
       <main>
-        <Typography data-testid="tx-details" variant="h3" fontWeight={700} pt={1} mb={3}>
+        <Typography
+          data-testid="tx-details"
+          variant="h3"
+          sx={{
+            fontWeight: 700,
+            pt: 1,
+            mb: 3,
+          }}
+        >
           Transaction details
         </Typography>
 
diff --git a/src/services/private-key-module/PkModulePopup.tsx b/src/services/private-key-module/PkModulePopup.tsx
index 5bdbbb2452..47c899ee52 100644
--- a/src/services/private-key-module/PkModulePopup.tsx
+++ b/src/services/private-key-module/PkModulePopup.tsx
@@ -23,8 +23,18 @@ const PkModulePopup = () => {
 
   return (
     <ModalDialog dialogTitle="Connect with Private Key" onClose={onClose} open={isOpen} sx={{ zIndex: 1400 }}>
-      <Box p={2}>
-        <Typography variant="body1" gutterBottom mb={3}>
+      <Box
+        sx={{
+          p: 2,
+        }}
+      >
+        <Typography
+          variant="body1"
+          gutterBottom
+          sx={{
+            mb: 3,
+          }}
+        >
           Enter your signer private key. The key will be saved for the duration of this browser session.
         </Typography>
 
diff --git a/src/services/push-notifications/preferences.ts b/src/services/push-notifications/preferences.ts
index fbc96cb23a..10119ecf93 100644
--- a/src/services/push-notifications/preferences.ts
+++ b/src/services/push-notifications/preferences.ts
@@ -10,7 +10,7 @@ export type PushNotificationPreferences = {
   [safeKey: PushNotificationPrefsKey]: {
     chainId: string
     safeAddress: string
-    preferences: { [key in WebhookType]: boolean }
+    preferences: { [_key in WebhookType]: boolean }
   }
 }
 
diff --git a/src/services/safe-apps/AppCommunicator.ts b/src/services/safe-apps/AppCommunicator.ts
index 230a3ff5cb..913db1709d 100644
--- a/src/services/safe-apps/AppCommunicator.ts
+++ b/src/services/safe-apps/AppCommunicator.ts
@@ -13,11 +13,11 @@ type AppCommunicatorConfig = {
 }
 
 class AppCommunicator {
-  private iframeRef: RefObject<HTMLIFrameElement | undefined>
+  private iframeRef: RefObject<HTMLIFrameElement | null>
   private handlers = new Map<Methods, MessageHandler>()
   private config: AppCommunicatorConfig
 
-  constructor(iframeRef: RefObject<HTMLIFrameElement | undefined>, config?: AppCommunicatorConfig) {
+  constructor(iframeRef: RefObject<HTMLIFrameElement | null>, config?: AppCommunicatorConfig) {
     this.iframeRef = iframeRef
     this.config = config || {}
 
diff --git a/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx b/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx
index 6f1c5f7019..65264bc24f 100644
--- a/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx
+++ b/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx
@@ -7,7 +7,7 @@ import * as web3 from '@/hooks/wallets/web3'
 import * as notifications from './notifications'
 import { act, renderHook } from '@/tests/test-utils'
 import { TxModalContext } from '@/components/tx-flow'
-import useSafeWalletProvider, { _useTxFlowApi } from './useSafeWalletProvider'
+import useSafeWalletProvider, { useTxFlowApi } from './useSafeWalletProvider'
 import { SafeWalletProvider } from '.'
 import type { RootState } from '@/store'
 import { makeStore } from '@/store'
@@ -78,7 +78,7 @@ describe('useSafeWalletProvider', () => {
 
   describe('_useTxFlowApi', () => {
     it('should return a provider', () => {
-      const { result } = renderHook(() => _useTxFlowApi('1', '0x1234567890000000000000000000000000000000'))
+      const { result } = renderHook(() => useTxFlowApi('1', '0x1234567890000000000000000000000000000000'))
 
       expect(result.current?.signMessage).toBeDefined()
       expect(result.current?.signTypedMessage).toBeDefined()
@@ -96,7 +96,7 @@ describe('useSafeWalletProvider', () => {
 
       const mockSetTxFlow = jest.fn()
 
-      const { result } = renderHook(() => _useTxFlowApi('1', '0x1234567890000000000000000000000000000000'), {
+      const { result } = renderHook(() => useTxFlowApi('1', '0x1234567890000000000000000000000000000000'), {
         // TODO: Improve render/renderHook to allow custom wrappers within the "defaults"
         wrapper: ({ children }) => (
           <Provider store={makeStore()}>
@@ -138,7 +138,7 @@ describe('useSafeWalletProvider', () => {
         },
       } as Partial<RootState>)
 
-      const { result } = renderHook(() => _useTxFlowApi('1', '0x1234567890000000000000000000000000000000'), {
+      const { result } = renderHook(() => useTxFlowApi('1', '0x1234567890000000000000000000000000000000'), {
         // TODO: Improve render/renderHook to allow custom wrappers within the "defaults"
         wrapper: ({ children }) => (
           <Provider store={testStore}>
@@ -178,7 +178,7 @@ describe('useSafeWalletProvider', () => {
 
       const mockSetTxFlow = jest.fn()
 
-      const { result } = renderHook(() => _useTxFlowApi('1', '0x1234567890000000000000000000000000000000'), {
+      const { result } = renderHook(() => useTxFlowApi('1', '0x1234567890000000000000000000000000000000'), {
         // TODO: Improve render/renderHook to allow custom wrappers within the "defaults"
         wrapper: ({ children }) => (
           <Provider store={makeStore()}>
@@ -248,7 +248,7 @@ describe('useSafeWalletProvider', () => {
 
       const mockSetTxFlow = jest.fn()
 
-      const { result } = renderHook(() => _useTxFlowApi('1', '0x1234567890000000000000000000000000000000'), {
+      const { result } = renderHook(() => useTxFlowApi('1', '0x1234567890000000000000000000000000000000'), {
         // TODO: Improve render/renderHook to allow custom wrappers within the "defaults"
         wrapper: ({ children }) => (
           <Provider store={makeStore()}>
@@ -312,7 +312,7 @@ describe('useSafeWalletProvider', () => {
         hash: '0x123',
       }))
 
-      const { result } = renderHook(() => _useTxFlowApi('1', '0x1234567890000000000000000000000000000000'))
+      const { result } = renderHook(() => useTxFlowApi('1', '0x1234567890000000000000000000000000000000'))
 
       const resp = await result.current?.getBySafeTxHash('0x123456789000')
 
@@ -328,7 +328,7 @@ describe('useSafeWalletProvider', () => {
 
       jest.spyOn(window, 'confirm').mockReturnValue(true)
 
-      const { result } = renderHook(() => _useTxFlowApi('1', '0x1234567890000000000000000000000000000000'), {
+      const { result } = renderHook(() => useTxFlowApi('1', '0x1234567890000000000000000000000000000000'), {
         initialReduxState: {
           chains: {
             loading: false,
@@ -355,7 +355,7 @@ describe('useSafeWalletProvider', () => {
         send: mockSend,
       }))
 
-      const { result } = renderHook(() => _useTxFlowApi('1', '0x1234567890000000000000000000000000000000'))
+      const { result } = renderHook(() => useTxFlowApi('1', '0x1234567890000000000000000000000000000000'))
 
       result.current?.proxy('eth_chainId', [])
 
@@ -373,7 +373,7 @@ describe('useSafeWalletProvider', () => {
       },
     } as unknown as router.NextRouter)
 
-    const { result } = renderHook(() => _useTxFlowApi('1', '0x1234567890000000000000000000000000000000'))
+    const { result } = renderHook(() => useTxFlowApi('1', '0x1234567890000000000000000000000000000000'))
 
     result.current?.showTxStatus('0x123')
 
@@ -390,7 +390,7 @@ describe('useSafeWalletProvider', () => {
     const createCallDeployment = getCreateCallDeployment({ version: '1.3.0', network: '1' })
     const createCallInterface = new Interface(['function performCreate(uint256,bytes)'])
     const safeAddress = faker.finance.ethereumAddress()
-    const { result } = renderHook(() => _useTxFlowApi('1', safeAddress), {
+    const { result } = renderHook(() => useTxFlowApi('1', safeAddress), {
       initialReduxState: {
         safeInfo: {
           loading: false,
diff --git a/src/services/safe-wallet-provider/useSafeWalletProvider.tsx b/src/services/safe-wallet-provider/useSafeWalletProvider.tsx
index 0606470355..3a9c6b5d24 100644
--- a/src/services/safe-wallet-provider/useSafeWalletProvider.tsx
+++ b/src/services/safe-wallet-provider/useSafeWalletProvider.tsx
@@ -24,7 +24,7 @@ import { selectOnChainSigning } from '@/store/settingsSlice'
 import { isOffchainEIP1271Supported } from '@/utils/safe-messages'
 import { getCreateCallContractDeployment } from '../contracts/deployments'
 
-export const _useTxFlowApi = (chainId: string, safeAddress: string): WalletSDK | undefined => {
+export const useTxFlowApi = (chainId: string, safeAddress: string): WalletSDK | undefined => {
   const { safe } = useSafeInfo()
   const currentChain = useCurrentChain()
   const { setTxFlow } = useContext(TxModalContext)
@@ -233,7 +233,7 @@ const useSafeWalletProvider = (): SafeWalletProvider | undefined => {
   const { safe, safeAddress } = useSafeInfo()
   const { chainId } = safe
 
-  const txFlowApi = _useTxFlowApi(chainId, safeAddress)
+  const txFlowApi = useTxFlowApi(chainId, safeAddress)
 
   return useMemo(() => {
     if (!safeAddress || !chainId || !txFlowApi) return
diff --git a/src/services/security/modules/BlockaidModule/index.ts b/src/services/security/modules/BlockaidModule/index.ts
index a58e4b998e..6b468c4305 100644
--- a/src/services/security/modules/BlockaidModule/index.ts
+++ b/src/services/security/modules/BlockaidModule/index.ts
@@ -151,7 +151,7 @@ export class BlockaidModule implements SecurityModule<BlockaidModuleRequest, Blo
     return {
       severity: result.validation?.result_type
         ? blockaidSeverityMap[result.validation.result_type]
-        : SecuritySeverity.NONE ?? SecuritySeverity.NONE,
+        : (SecuritySeverity.NONE ?? SecuritySeverity.NONE),
       payload: {
         description: result.validation?.description,
         classification: result.validation?.classification,
diff --git a/src/store/__tests__/txQueueSlice.test.ts b/src/store/__tests__/txQueueSlice.test.ts
index 939c720c14..7c92ce8f99 100644
--- a/src/store/__tests__/txQueueSlice.test.ts
+++ b/src/store/__tests__/txQueueSlice.test.ts
@@ -183,7 +183,7 @@ describe('txQueueSlice', () => {
 
   it('should not dispatch event if signature is still missing', () => {
     const listenerApi = {
-      getState: jest.fn(() => ({} as RootState)),
+      getState: jest.fn(() => ({}) as RootState),
       dispatch: jest.fn(),
     }
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index d9574f20cd..3535f96c59 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,6 +1,16 @@
 @import url(./vars.css);
 @import url(./onboard.css);
 @import url(/fonts/fonts.css);
+/**
+* ^^^^^^^
+* Some IDEs show the fonts file above as not existing, but it is.
+* If you modify the path to it make sure that the file is also loaded on the
+* actual website.
+* Fun fact: if this comment block is above the @import url(/fonts/fonts.css);
+* nextjs's build will incorrectly place the @import in the middle of the file
+* and the fonts won't load. More info on @import:
+* https://developer.mozilla.org/en-US/docs/Web/CSS/@import#description
+*/
 
 html,
 body {
diff --git a/src/tests/pages/apps-share.test.tsx b/src/tests/pages/apps-share.test.tsx
index c6193f7cdd..dffe1967d9 100644
--- a/src/tests/pages/apps-share.test.tsx
+++ b/src/tests/pages/apps-share.test.tsx
@@ -17,6 +17,7 @@ describe('Share Safe App Page', () => {
 
   beforeEach(() => {
     jest.restoreAllMocks()
+    jest.useFakeTimers()
     window.localStorage.clear()
 
     fetchSafeAppFromManifestSpy = jest.spyOn(manifest, 'fetchSafeAppFromManifest').mockResolvedValue({
@@ -214,9 +215,8 @@ describe('Share Safe App Page', () => {
       label: 'Metamask',
       chainId: '1',
     }))
-    jest.spyOn(useOwnedSafesHook, 'default').mockImplementation(() => ({
-      '1': [safeAddress],
-    }))
+    const mockOwnedSafes = { '1': [safeAddress] }
+    jest.spyOn(useOwnedSafesHook, 'default').mockImplementation(() => mockOwnedSafes)
 
     render(<ShareSafeApp />, {
       routerProps: {
@@ -238,6 +238,7 @@ describe('Share Safe App Page', () => {
       expect(fetchSafeAppFromManifestSpy).toHaveBeenCalledWith(TX_BUILDER, '1')
       expect(getSafeAppsSpy).toHaveBeenCalledWith('1', { url: TX_BUILDER })
 
+      console.log('screen', screen.debug())
       expect(screen.getByLabelText('Select a Safe Account')).toBeInTheDocument()
     })
   })
diff --git a/src/tests/pages/apps.test.tsx b/src/tests/pages/apps.test.tsx
index 37e0089a90..d8e73eb299 100644
--- a/src/tests/pages/apps.test.tsx
+++ b/src/tests/pages/apps.test.tsx
@@ -244,13 +244,13 @@ describe('AppsPage', () => {
         },
       })
 
-      fireEvent.click(screen.getByRole('button', { name: 'Add custom Safe App' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Add custom Safe App' }))
 
       await waitFor(() => expect(screen.getByLabelText(/Safe App URL/)).toBeInTheDocument())
       const appURLInput = screen.getByLabelText(/Safe App URL/)
       fireEvent.change(appURLInput, { target: { value: APP_URL } })
       const riskCheckbox = await screen.findByRole('checkbox')
-      fireEvent.click(riskCheckbox)
+      await userEvent.click(riskCheckbox)
       await waitFor(() =>
         expect(
           screen.getByRole('heading', {
@@ -258,9 +258,7 @@ describe('AppsPage', () => {
           }),
         ).toBeInTheDocument(),
       )
-      act(() => {
-        fireEvent.click(screen.getByText('Add'))
-      })
+      await userEvent.click(screen.getByText('Add'))
 
       // modal is closed
       await waitForElementToBeRemoved(() => screen.queryByLabelText(/Safe App URL/))
@@ -272,9 +270,7 @@ describe('AppsPage', () => {
       expect(screen.queryByRole('presentation')).not.toBeInTheDocument()
 
       // clicks on Custom test Safe app Safe App
-      await waitFor(() => {
-        fireEvent.click(screen.getByRole('heading', { level: 5, name: 'Custom test Safe app' }))
-      })
+      await userEvent.click(screen.getByRole('heading', { level: 5, name: 'Custom test Safe app' }))
 
       await waitFor(() => {
         const safeAppPreviewDrawer = screen.getByRole('presentation')
@@ -384,13 +380,14 @@ describe('AppsPage', () => {
         },
       })
 
-      fireEvent.click(screen.getByRole('button', { name: 'Add custom Safe App' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Add custom Safe App' }))
 
       await waitFor(() => expect(screen.getByLabelText(/Safe App URL/)).toBeInTheDocument())
       const appURLInput = screen.getByLabelText(/Safe App URL/)
       fireEvent.change(appURLInput, { target: { value: APP_URL } })
       const riskCheckbox = await screen.findByRole('checkbox')
-      fireEvent.click(riskCheckbox)
+      await userEvent.click(riskCheckbox)
+
       await waitFor(() =>
         expect(
           screen.getByRole('heading', {
@@ -398,32 +395,23 @@ describe('AppsPage', () => {
           }),
         ).toBeInTheDocument(),
       )
-      act(() => {
-        fireEvent.click(screen.getByText('Add'))
-      })
+
+      await userEvent.click(screen.getByText('Add'))
 
       // modal is closed
       await waitForElementToBeRemoved(() => screen.queryByLabelText(/Safe App URL/))
 
       const removeCustomSafeAppButton = screen.getByLabelText('Delete Custom test Safe app')
 
-      act(() => {
-        fireEvent.click(removeCustomSafeAppButton)
-      })
+      await userEvent.click(removeCustomSafeAppButton)
 
       await waitFor(() => expect(screen.getByText('Confirm Safe App removal')).toBeInTheDocument())
 
       const confirmRemovalButton = screen.getByRole('button', { name: 'Remove' })
-      act(() => {
-        fireEvent.click(confirmRemovalButton)
-      })
+      await userEvent.click(confirmRemovalButton)
 
       await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Remove' }))
-
-      await waitFor(() =>
-        // custom safe app is not present in the list
-        expect(screen.queryByText('Custom test Safe app')).not.toBeInTheDocument(),
-      )
+      expect(screen.queryByText('Custom test Safe app')).not.toBeInTheDocument()
     })
   })
 
diff --git a/src/tests/test-utils.tsx b/src/tests/test-utils.tsx
index 95fc419813..8ca4b4214b 100644
--- a/src/tests/test-utils.tsx
+++ b/src/tests/test-utils.tsx
@@ -44,7 +44,7 @@ const mockRouter = (props: Partial<NextRouter> = {}): NextRouter => ({
 const getProviders: (options: {
   routerProps?: Partial<NextRouter>
   initialReduxState?: Partial<RootState>
-}) => React.FC<{ children: React.ReactElement }> = ({ routerProps, initialReduxState }) =>
+}) => React.JSXElementConstructor<{ children: React.ReactNode }> = ({ routerProps, initialReduxState }) =>
   function ProviderComponent({ children }) {
     const store = makeStore(initialReduxState)
 
diff --git a/src/utils/__tests__/tokens.test.ts b/src/utils/__tests__/tokens.test.ts
index 234081f88b..0b064499c6 100644
--- a/src/utils/__tests__/tokens.test.ts
+++ b/src/utils/__tests__/tokens.test.ts
@@ -37,7 +37,7 @@ describe('tokens', () => {
             },
             _isProvider: true,
             resolveName: (name: string) => name,
-          } as any),
+          }) as any,
       )
 
       const result = await getERC20TokenInfoOnChain('0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
@@ -65,7 +65,7 @@ describe('tokens', () => {
             },
             _isProvider: true,
             resolveName: (name: string) => name,
-          } as any),
+          }) as any,
       )
 
       const result = await getERC20TokenInfoOnChain('0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
diff --git a/src/utils/__tests__/transactions.test.ts b/src/utils/__tests__/transactions.test.ts
index 68ca1f22c2..fb96d9c00a 100644
--- a/src/utils/__tests__/transactions.test.ts
+++ b/src/utils/__tests__/transactions.test.ts
@@ -238,8 +238,8 @@ describe('transactions', () => {
                 data: safeTxDataBuilder()
                   .with({
                     to: onlyCalls
-                      ? getMultiSendCallOnlyDeployment()?.defaultAddress ?? faker.finance.ethereumAddress()
-                      : getMultiSendDeployment()?.defaultAddress ?? faker.finance.ethereumAddress(),
+                      ? (getMultiSendCallOnlyDeployment()?.defaultAddress ?? faker.finance.ethereumAddress())
+                      : (getMultiSendDeployment()?.defaultAddress ?? faker.finance.ethereumAddress()),
                     value: '0',
                     data: Multi_send__factory.createInterface().encodeFunctionData('multiSend', [
                       encodeMultiSendData(transactions),
diff --git a/src/utils/transactions.ts b/src/utils/transactions.ts
index 688cacefda..4348270044 100644
--- a/src/utils/transactions.ts
+++ b/src/utils/transactions.ts
@@ -80,7 +80,7 @@ export const makeTxFromDetails = (txDetails: TransactionDetails): Transaction =>
     ? isMultisigDetailedExecutionInfo(txDetails.detailedExecutionInfo)
       ? txDetails.detailedExecutionInfo.submittedAt
       : now
-    : txDetails.executedAt ?? now
+    : (txDetails.executedAt ?? now)
 
   return {
     type: TransactionListItemType.TRANSACTION,
diff --git a/tsconfig.json b/tsconfig.json
index d7d47b0276..835bd8bc48 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -41,7 +41,9 @@
     "src/definitions.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    "./jest.setup.js",
+    "./eslint.config.mjs"
   ],
   "exclude": [
     "node_modules",
diff --git a/yarn.lock b/yarn.lock
index f10895ea1b..ad3e02154c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,6 +12,11 @@
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.3.tgz#90749bde8b89cd41764224f5aac29cd4138f75ff"
   integrity sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==
 
+"@adobe/css-tools@^4.4.0":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.4.1.tgz#2447a230bfe072c1659e6815129c03cf170710e3"
+  integrity sha512-12WGKBQzjUAI4ayyF4IAtfw2QR/IDoqk6jTddXDhtYTJF9ASmoE1zst7cVtP0aL/F1jUJL5r+JxKXKEgHNbEUQ==
+
 "@adraffy/ens-normalize@1.10.0":
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.10.0.tgz#d2a39395c587e092d77cbbc80acf956a54f38bf7"
@@ -1062,13 +1067,20 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.5", "@babel/runtime@^7.23.9", "@babel/runtime@^7.25.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.25.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.25.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.7.tgz#7ffb53c37a8f247c8c4d335e89cdf16a2e0d0fb6"
   integrity sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.25.7", "@babel/runtime@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
+  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.24.0", "@babel/template@^7.3.3":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50"
@@ -1182,10 +1194,10 @@
   dependencies:
     "@cowprotocol/widget-lib" "^0.14.0"
 
-"@cypress/request@2.88.12":
-  version "2.88.12"
-  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.12.tgz#ba4911431738494a85e93fb04498cb38bc55d590"
-  integrity sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==
+"@cypress/request@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.6.tgz#f5580add6acee0e183b4d4e07eff4f31327ae12b"
+  integrity sha512-fi0eVdCOtKu5Ed6+E8mYxUF6ZTFJDZvHogCBelM0xVXmrDEkyM22gRArQzq1YcHPm1V47Vf/iAD+WgVdUlJCGg==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -1193,16 +1205,16 @@
     combined-stream "~1.0.6"
     extend "~3.0.2"
     forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    http-signature "~1.3.6"
+    form-data "~4.0.0"
+    http-signature "~1.4.0"
     is-typedarray "~1.0.0"
     isstream "~0.1.2"
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.19"
     performance-now "^2.1.0"
-    qs "~6.10.3"
+    qs "6.13.0"
     safe-buffer "^5.1.2"
-    tough-cookie "^4.1.3"
+    tough-cookie "^5.0.0"
     tunnel-agent "^0.6.0"
     uuid "^8.3.2"
 
@@ -1214,38 +1226,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@date-io/core@^2.15.0", "@date-io/core@^2.17.0":
-  version "2.17.0"
-  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.17.0.tgz#360a4d0641f069776ed22e457876e8a8a58c205e"
-  integrity sha512-+EQE8xZhRM/hsY0CDTVyayMDDY5ihc4MqXCrPxooKw19yAzUIC6uUqsZeaOFNL9YKTNxYKrJP5DFgE8o5xRCOw==
-
-"@date-io/date-fns@^2.15.0":
-  version "2.17.0"
-  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-2.17.0.tgz#1d9d0a02e0137524331819c9576a4e8e19a6142b"
-  integrity sha512-L0hWZ/mTpy3Gx/xXJ5tq5CzHo0L7ry6KEO9/w/JWiFWFLZgiNVo3ex92gOl3zmzjHqY/3Ev+5sehAr8UnGLEng==
-  dependencies:
-    "@date-io/core" "^2.17.0"
-
-"@date-io/dayjs@^2.15.0":
-  version "2.17.0"
-  resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.17.0.tgz#ec3e2384136c028971ca2f78800a6877b9fdbe62"
-  integrity sha512-Iq1wjY5XzBh0lheFA0it6Dsyv94e8mTiNR8vuTai+KopxDkreL3YjwTmZHxkgB7/vd0RMIACStzVgWvPATnDCA==
-  dependencies:
-    "@date-io/core" "^2.17.0"
-
-"@date-io/luxon@^2.15.0":
-  version "2.17.0"
-  resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-2.17.0.tgz#76e1f001aaa38fe7f0049f010fe356db1bb517d2"
-  integrity sha512-l712Vdm/uTddD2XWt9TlQloZUiTiRQtY5TCOG45MQ/8u0tu8M17BD6QYHar/3OrnkGybALAMPzCy1r5D7+0HBg==
-  dependencies:
-    "@date-io/core" "^2.17.0"
-
-"@date-io/moment@^2.15.0":
-  version "2.17.0"
-  resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-2.17.0.tgz#04d2487d9d15d468b2e7903b87268fa1c89b56cb"
-  integrity sha512-e4nb4CDZU4k0WRVhz1Wvl7d+hFsedObSauDHKtZwU9kt7gdYEAzKgnrSCTHsEaXrDumdrkCYTeZ0Tmyk7uV4tw==
-  dependencies:
-    "@date-io/core" "^2.17.0"
+"@discoveryjs/json-ext@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
+  integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
 "@ducanh2912/next-pwa@^9.7.1":
   version "9.7.1"
@@ -1261,7 +1245,14 @@
     workbox-webpack-plugin "7.0.0"
     workbox-window "7.0.0"
 
-"@emotion/babel-plugin@^11.11.0", "@emotion/babel-plugin@^11.12.0":
+"@emnapi/runtime@^1.2.0":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.3.1.tgz#0fcaa575afc31f455fd33534c19381cfce6c6f60"
+  integrity sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==
+  dependencies:
+    tslib "^2.4.0"
+
+"@emotion/babel-plugin@^11.12.0":
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"
   integrity sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==
@@ -1278,7 +1269,7 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
-"@emotion/cache@^11.11.0", "@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1":
+"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1":
   version "11.13.1"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
   integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
@@ -1294,17 +1285,12 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
   integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
 
-"@emotion/is-prop-valid@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
-  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
+"@emotion/is-prop-valid@^1.3.0":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
+  integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
   dependencies:
-    "@emotion/memoize" "^0.8.1"
-
-"@emotion/memoize@^0.8.1":
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
-  integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
+    "@emotion/memoize" "^0.9.0"
 
 "@emotion/memoize@^0.9.0":
   version "0.9.0"
@@ -1325,7 +1311,7 @@
     "@emotion/weak-memoize" "^0.4.0"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/serialize@^1.1.2", "@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.1":
+"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0", "@emotion/serialize@^1.3.1", "@emotion/serialize@^1.3.2":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.2.tgz#e1c1a2e90708d5d85d81ccaee2dfeb3cc0cccf7a"
   integrity sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==
@@ -1351,17 +1337,17 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
   integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
 
-"@emotion/styled@^11.11.0":
-  version "11.11.0"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
-  integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
+"@emotion/styled@^11.13.0":
+  version "11.13.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.13.0.tgz#633fd700db701472c7a5dbef54d6f9834e9fb190"
+  integrity sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.11.0"
-    "@emotion/is-prop-valid" "^1.2.1"
-    "@emotion/serialize" "^1.1.2"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
-    "@emotion/utils" "^1.2.1"
+    "@emotion/babel-plugin" "^11.12.0"
+    "@emotion/is-prop-valid" "^1.3.0"
+    "@emotion/serialize" "^1.3.0"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.1.0"
+    "@emotion/utils" "^1.4.0"
 
 "@emotion/unitless@^0.10.0":
   version "0.10.0"
@@ -1735,30 +1721,61 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
-"@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.6.1":
+"@eslint-community/regexpp@^4.10.0":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
   integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
-"@eslint/eslintrc@^2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
-  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
+"@eslint-community/regexpp@^4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
+
+"@eslint/config-array@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.19.0.tgz#3251a528998de914d59bb21ba4c11767cf1b3519"
+  integrity sha512-zdHg2FPIFNKPdcHWtiNT+jEFCHYVplAXRDlQDyqy0zGx/q2parwh7brGJSiTxRk/TSMkbM//zt/f5CHgyTyaSQ==
+  dependencies:
+    "@eslint/object-schema" "^2.1.4"
+    debug "^4.3.1"
+    minimatch "^3.1.2"
+
+"@eslint/core@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-0.9.0.tgz#168ee076f94b152c01ca416c3e5cf82290ab4fcd"
+  integrity sha512-7ATR9F0e4W85D/0w7cU0SNj7qkAexMG+bAHEZOjo9akvGuhHE2m7umzWzfnpa0XAg5Kxc1BWmtPMV67jJ+9VUg==
+
+"@eslint/eslintrc@^3.1.0", "@eslint/eslintrc@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.2.0.tgz#57470ac4e2e283a6bf76044d63281196e370542c"
+  integrity sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.6.0"
-    globals "^13.19.0"
+    espree "^10.0.1"
+    globals "^14.0.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
     js-yaml "^4.1.0"
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@8.57.0":
-  version "8.57.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
-  integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
+"@eslint/js@9.15.0", "@eslint/js@^9.14.0":
+  version "9.15.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.15.0.tgz#df0e24fe869143b59731942128c19938fdbadfb5"
+  integrity sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==
+
+"@eslint/object-schema@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
+  integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
+
+"@eslint/plugin-kit@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@eslint/plugin-kit/-/plugin-kit-0.2.3.tgz#812980a6a41ecf3a8341719f92a6d1e784a2e0e8"
+  integrity sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==
+  dependencies:
+    levn "^0.4.1"
 
 "@ethereumjs/common@2.6.2":
   version "2.6.2"
@@ -2989,24 +3006,146 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@humanwhocodes/config-array@^0.11.14":
-  version "0.11.14"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
-  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
+"@humanfs/core@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77"
+  integrity sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==
+
+"@humanfs/node@^0.16.6":
+  version "0.16.6"
+  resolved "https://registry.yarnpkg.com/@humanfs/node/-/node-0.16.6.tgz#ee2a10eaabd1131987bf0488fd9b820174cd765e"
+  integrity sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==
   dependencies:
-    "@humanwhocodes/object-schema" "^2.0.2"
-    debug "^4.3.1"
-    minimatch "^3.0.5"
+    "@humanfs/core" "^0.19.1"
+    "@humanwhocodes/retry" "^0.3.0"
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
-  integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
+"@humanwhocodes/retry@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.3.1.tgz#c72a5c76a9fbaf3488e231b13dc52c0da7bab42a"
+  integrity sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==
+
+"@humanwhocodes/retry@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.4.1.tgz#9a96ce501bc62df46c4031fbd970e3cc6b10f07b"
+  integrity sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==
+
+"@img/sharp-darwin-arm64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz#ef5b5a07862805f1e8145a377c8ba6e98813ca08"
+  integrity sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-arm64" "1.0.4"
+
+"@img/sharp-darwin-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz#e03d3451cd9e664faa72948cc70a403ea4063d61"
+  integrity sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-x64" "1.0.4"
+
+"@img/sharp-libvips-darwin-arm64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz#447c5026700c01a993c7804eb8af5f6e9868c07f"
+  integrity sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==
+
+"@img/sharp-libvips-darwin-x64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz#e0456f8f7c623f9dbfbdc77383caa72281d86062"
+  integrity sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==
+
+"@img/sharp-libvips-linux-arm64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz#979b1c66c9a91f7ff2893556ef267f90ebe51704"
+  integrity sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==
+
+"@img/sharp-libvips-linux-arm@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz#99f922d4e15216ec205dcb6891b721bfd2884197"
+  integrity sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==
+
+"@img/sharp-libvips-linux-s390x@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz#f8a5eb1f374a082f72b3f45e2fb25b8118a8a5ce"
+  integrity sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==
+
+"@img/sharp-libvips-linux-x64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz#d4c4619cdd157774906e15770ee119931c7ef5e0"
+  integrity sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==
+
+"@img/sharp-libvips-linuxmusl-arm64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz#166778da0f48dd2bded1fa3033cee6b588f0d5d5"
+  integrity sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==
+
+"@img/sharp-libvips-linuxmusl-x64@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz#93794e4d7720b077fcad3e02982f2f1c246751ff"
+  integrity sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==
+
+"@img/sharp-linux-arm64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz#edb0697e7a8279c9fc829a60fc35644c4839bb22"
+  integrity sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm64" "1.0.4"
+
+"@img/sharp-linux-arm@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz#422c1a352e7b5832842577dc51602bcd5b6f5eff"
+  integrity sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm" "1.0.5"
+
+"@img/sharp-linux-s390x@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz#f5c077926b48e97e4a04d004dfaf175972059667"
+  integrity sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-s390x" "1.0.4"
+
+"@img/sharp-linux-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz#d806e0afd71ae6775cc87f0da8f2d03a7c2209cb"
+  integrity sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-x64" "1.0.4"
+
+"@img/sharp-linuxmusl-arm64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz#252975b915894fb315af5deea174651e208d3d6b"
+  integrity sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
+
+"@img/sharp-linuxmusl-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz#3f4609ac5d8ef8ec7dadee80b560961a60fd4f48"
+  integrity sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
+
+"@img/sharp-wasm32@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz#6f44f3283069d935bb5ca5813153572f3e6f61a1"
+  integrity sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==
+  dependencies:
+    "@emnapi/runtime" "^1.2.0"
+
+"@img/sharp-win32-ia32@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz#1a0c839a40c5351e9885628c85f2e5dfd02b52a9"
+  integrity sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==
+
+"@img/sharp-win32-x64@0.33.5":
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz#56f00962ff0c4e0eb93d34a047d29fa995e3e342"
+  integrity sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==
 
 "@ioredis/commands@^1.1.1":
   version "1.2.0"
@@ -3669,179 +3808,179 @@
     "@motionone/dom" "^10.16.4"
     tslib "^2.3.1"
 
-"@mui/core-downloads-tracker@^5.16.7":
-  version "5.16.7"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz#182a325a520f7ebd75de051fceabfc0314cfd004"
-  integrity sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==
+"@mui/core-downloads-tracker@^6.1.6":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz#73d96e75689b2af922a989123149a3497c8a96fa"
+  integrity sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==
 
-"@mui/icons-material@^5.14.20":
-  version "5.15.1"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.1.tgz#38f51a88d224a107e753313b4d9815247caa5398"
-  integrity sha512-VPJdBSyap6uOxCb5BLbWbkvd6aeJCp1pQZm8DcZBITCH0NOSv8Mz9c8Zvo8xr4Od7+xyWHUAgvRSL4047pL2WQ==
+"@mui/icons-material@^6.1.6":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-6.1.6.tgz#bfaf32874a9f9ec88c07d1ca132d1a0671e9ed7c"
+  integrity sha512-5r9urIL2lxXb/sPN3LFfFYEibsXJUb986HhhIeu1gOcte460pwdSiEhBSxkAuyT8Dj7jvu9MjqSBmSumQELo8A==
   dependencies:
-    "@babel/runtime" "^7.23.5"
+    "@babel/runtime" "^7.26.0"
 
-"@mui/material@^5.16.7":
-  version "5.16.7"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.16.7.tgz#6e814e2eefdaf065a769cecf549c3569e107a50b"
-  integrity sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==
+"@mui/material@^6.1.6":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-6.1.6.tgz#505d7300401f6af38426006d7fb3b8707dc10fbc"
+  integrity sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==
   dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@mui/core-downloads-tracker" "^5.16.7"
-    "@mui/system" "^5.16.7"
-    "@mui/types" "^7.2.15"
-    "@mui/utils" "^5.16.6"
+    "@babel/runtime" "^7.26.0"
+    "@mui/core-downloads-tracker" "^6.1.6"
+    "@mui/system" "^6.1.6"
+    "@mui/types" "^7.2.19"
+    "@mui/utils" "^6.1.6"
     "@popperjs/core" "^2.11.8"
-    "@types/react-transition-group" "^4.4.10"
-    clsx "^2.1.0"
+    "@types/react-transition-group" "^4.4.11"
+    clsx "^2.1.1"
     csstype "^3.1.3"
     prop-types "^15.8.1"
     react-is "^18.3.1"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.16.6":
-  version "5.16.6"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.16.6.tgz#547671e7ae3f86b68d1289a0b90af04dfcc1c8c9"
-  integrity sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==
+"@mui/private-theming@^6.1.6":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-6.1.6.tgz#9966bf2eca3d626cddd6e173752f46d344c7d7d1"
+  integrity sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==
   dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@mui/utils" "^5.16.6"
+    "@babel/runtime" "^7.26.0"
+    "@mui/utils" "^6.1.6"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.16.6":
-  version "5.16.6"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.16.6.tgz#60110c106dd482dfdb7e2aa94fd6490a0a3f8852"
-  integrity sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==
+"@mui/styled-engine@^6.1.6":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-6.1.6.tgz#61996621a0297aac16061e1739a738a899613fd6"
+  integrity sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==
   dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@emotion/cache" "^11.11.0"
+    "@babel/runtime" "^7.26.0"
+    "@emotion/cache" "^11.13.1"
+    "@emotion/serialize" "^1.3.2"
+    "@emotion/sheet" "^1.4.0"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/system@^5.16.7":
-  version "5.16.7"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.16.7.tgz#4583ca5bf3b38942e02c15a1e622ba869ac51393"
-  integrity sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==
-  dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@mui/private-theming" "^5.16.6"
-    "@mui/styled-engine" "^5.16.6"
-    "@mui/types" "^7.2.15"
-    "@mui/utils" "^5.16.6"
-    clsx "^2.1.0"
+"@mui/system@^6.1.6":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-6.1.6.tgz#d335d6952092f3c758c8b78c2d993aa13ef58175"
+  integrity sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==
+  dependencies:
+    "@babel/runtime" "^7.26.0"
+    "@mui/private-theming" "^6.1.6"
+    "@mui/styled-engine" "^6.1.6"
+    "@mui/types" "^7.2.19"
+    "@mui/utils" "^6.1.6"
+    clsx "^2.1.1"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/types@^7.2.15":
-  version "7.2.18"
-  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.18.tgz#4b6385ed2f7828ef344113cdc339d6fdf8e4bc23"
-  integrity sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==
+"@mui/types@^7.2.19":
+  version "7.2.19"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.19.tgz#c941954dd24393fdce5f07830d44440cf4ab6c80"
+  integrity sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==
 
-"@mui/utils@^5.10.3", "@mui/utils@^5.16.6":
-  version "5.16.6"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.16.6.tgz#905875bbc58d3dcc24531c3314a6807aba22a711"
-  integrity sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==
+"@mui/utils@^5.16.6 || ^6.0.0", "@mui/utils@^6.1.6":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-6.1.6.tgz#4b9fd34da3a1dd4700fe506a20ca7da3933ba48e"
+  integrity sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==
   dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@mui/types" "^7.2.15"
-    "@types/prop-types" "^15.7.12"
+    "@babel/runtime" "^7.26.0"
+    "@mui/types" "^7.2.19"
+    "@types/prop-types" "^15.7.13"
     clsx "^2.1.1"
     prop-types "^15.8.1"
     react-is "^18.3.1"
 
-"@mui/x-date-pickers@^5.0.20":
-  version "5.0.20"
-  resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-5.0.20.tgz#7b4e5b5a214a8095937ba7d82bb82acd6f270d72"
-  integrity sha512-ERukSeHIoNLbI1C2XRhF9wRhqfsr+Q4B1SAw2ZlU7CWgcG8UBOxgqRKDEOVAIoSWL+DWT6GRuQjOKvj6UXZceA==
-  dependencies:
-    "@babel/runtime" "^7.18.9"
-    "@date-io/core" "^2.15.0"
-    "@date-io/date-fns" "^2.15.0"
-    "@date-io/dayjs" "^2.15.0"
-    "@date-io/luxon" "^2.15.0"
-    "@date-io/moment" "^2.15.0"
-    "@mui/utils" "^5.10.3"
-    "@types/react-transition-group" "^4.4.5"
-    clsx "^1.2.1"
-    prop-types "^15.7.2"
+"@mui/x-date-pickers@^7.22.1":
+  version "7.22.1"
+  resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-7.22.1.tgz#3abe7ad0b5816051fdcef4ffbe5343965e7dfc8e"
+  integrity sha512-VBgicE+7PvJrdHSL6HyieHT6a/0dENH8RaMIM2VwUFrGoZzvik50WNwY5U+Hip1BwZLIEvlqtNRQIIj6kgBR6Q==
+  dependencies:
+    "@babel/runtime" "^7.25.7"
+    "@mui/utils" "^5.16.6 || ^6.0.0"
+    "@mui/x-internals" "7.21.0"
+    "@types/react-transition-group" "^4.4.11"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
     react-transition-group "^4.4.5"
-    rifm "^0.12.1"
+
+"@mui/x-internals@7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@mui/x-internals/-/x-internals-7.21.0.tgz#daca984059015b27efdb47bb44dc7ff4a6816673"
+  integrity sha512-94YNyZ0BhK5Z+Tkr90RKf47IVCW8R/1MvdUhh6MCQg6sZa74jsX+x+gEZ4kzuCqOsuyTyxikeQ8vVuCIQiP7UQ==
+  dependencies:
+    "@babel/runtime" "^7.25.7"
+    "@mui/utils" "^5.16.6 || ^6.0.0"
 
 "@multiformats/base-x@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@multiformats/base-x/-/base-x-4.0.1.tgz#95ff0fa58711789d53aefb2590a8b7a4e715d121"
   integrity sha512-eMk0b9ReBbV23xXU693TAIrLyeO5iTgBZGSJfpqriG8UkYvr/hC9u9pyMlAakDNHWmbhMZCDs6KQO0jzKD8OTw==
 
-"@next/bundle-analyzer@^13.5.6":
-  version "13.5.6"
-  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-13.5.6.tgz#3c73f2e15ff5507317b37b87ce984bac5a5d7ad0"
-  integrity sha512-4P5YVpR3N/B5+p0TQ/rPAr+9fsjkdfCVTGzJhKwE7XHqS+QME4gYxAYeGKkfkHEkP2A3GKXs8QSp0LjIvWLI3g==
+"@next/bundle-analyzer@15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-15.0.2.tgz#bbce45c5f6f5df9de575eef065b567a3367f6915"
+  integrity sha512-bV566k+rDsaqXSUgHBof0iMIDx5DWtLx/98jvYtqb9x85e+WJzv+8cpDvbjtxQMf7nFC/LUkPmpruj1cOKfz4A==
   dependencies:
-    webpack-bundle-analyzer "4.7.0"
+    webpack-bundle-analyzer "4.10.1"
 
-"@next/env@14.2.13":
-  version "14.2.13"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.13.tgz#ba341ba9eb70db428fc1c754f49c3c516f7bab47"
-  integrity sha512-s3lh6K8cbW1h5Nga7NNeXrbe0+2jIIYK9YaA9T7IufDWnZpozdFUp6Hf0d5rNWUKu4fEuSX2rCKlGjCrtylfDw==
+"@next/env@15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.0.2.tgz#4e921af3faf8a16c6be98ec6a81a32a40050a8b7"
+  integrity sha512-c0Zr0ModK5OX7D4ZV8Jt/wqoXtitLNPwUfG9zElCZztdaZyNVnN40rDXVZ/+FGuR4CcNV5AEfM6N8f+Ener7Dg==
 
-"@next/eslint-plugin-next@14.1.0":
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.1.0.tgz#29b041233fac7417e22eefa4146432d5cd910820"
-  integrity sha512-x4FavbNEeXx/baD/zC/SdrvkjSby8nBn8KcCREqk6UuwvwoAPZmaV8TFCAuo/cpovBRTIY67mHhe86MQQm/68Q==
+"@next/eslint-plugin-next@15.0.3":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-15.0.3.tgz#ce953098036d462f6901e423cc6445fc165b78c4"
+  integrity sha512-3Ln/nHq2V+v8uIaxCR6YfYo7ceRgZNXfTd3yW1ukTaFbO+/I8jNakrjYWODvG9BuR2v5kgVtH/C8r0i11quOgw==
   dependencies:
-    glob "10.3.10"
+    fast-glob "3.3.1"
 
-"@next/mdx@^14.2.11":
-  version "14.2.11"
-  resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-14.2.11.tgz#d68b7558186794147a45b7b6acdb27a69c904243"
-  integrity sha512-aTs8U7N5FLXArb1YfHMsomMtHa0sulAWrfbPdZKDIpF9DUNwY8tbRVpHLz/AbIwoJk/4oDhDwDSJBFZXYxrjzw==
+"@next/mdx@15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-15.0.2.tgz#8d7893b42d92fb4722dbe47499550b95b7b2ee35"
+  integrity sha512-CANCD3snLdLJxCcqn0DBAl5qMUBvAPdWA2cWljt+lnVtcvIfGXRVLwraqSOHBjddvZ3ClCYcf3AvjEBHA4NBxA==
   dependencies:
     source-map "^0.7.0"
 
-"@next/swc-darwin-arm64@14.2.13":
-  version "14.2.13"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.13.tgz#76f08d78360c4d27d444df7f35a56f59a48f4808"
-  integrity sha512-IkAmQEa2Htq+wHACBxOsslt+jMoV3msvxCn0WFSfJSkv/scy+i/EukBKNad36grRxywaXUYJc9mxEGkeIs8Bzg==
-
-"@next/swc-darwin-x64@14.2.13":
-  version "14.2.13"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.13.tgz#1d4821d54bb01dacc6a6c32408f8468a4f4af269"
-  integrity sha512-Dv1RBGs2TTjkwEnFMVL5XIfJEavnLqqwYSD6LXgTPdEy/u6FlSrLBSSfe1pcfqhFEXRAgVL3Wpjibe5wXJzWog==
-
-"@next/swc-linux-arm64-gnu@14.2.13":
-  version "14.2.13"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.13.tgz#79d9af8d3408df9990c8911889eca1ca6a308f19"
-  integrity sha512-yB1tYEFFqo4ZNWkwrJultbsw7NPAAxlPXURXioRl9SdW6aIefOLS+0TEsKrWBtbJ9moTDgU3HRILL6QBQnMevg==
-
-"@next/swc-linux-arm64-musl@14.2.13":
-  version "14.2.13"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.13.tgz#b13180645865b120591db2f1e831743ebc02ab36"
-  integrity sha512-v5jZ/FV/eHGoWhMKYrsAweQ7CWb8xsWGM/8m1mwwZQ/sutJjoFaXchwK4pX8NqwImILEvQmZWyb8pPTcP7htWg==
-
-"@next/swc-linux-x64-gnu@14.2.13":
-  version "14.2.13"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.13.tgz#8cb8480dfeee512648e4e08c2095aac0461b876f"
-  integrity sha512-aVc7m4YL7ViiRv7SOXK3RplXzOEe/qQzRA5R2vpXboHABs3w8vtFslGTz+5tKiQzWUmTmBNVW0UQdhkKRORmGA==
-
-"@next/swc-linux-x64-musl@14.2.13":
-  version "14.2.13"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.13.tgz#df5ca922fa1e1ee81b15a06a2d3d3ace0efd2bd7"
-  integrity sha512-4wWY7/OsSaJOOKvMsu1Teylku7vKyTuocvDLTZQq0TYv9OjiYYWt63PiE1nTuZnqQ4RPvME7Xai+9enoiN0Wrg==
-
-"@next/swc-win32-arm64-msvc@14.2.13":
-  version "14.2.13"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.13.tgz#8a7db6e71f526212587975f743b28e4d1cb829d1"
-  integrity sha512-uP1XkqCqV2NVH9+g2sC7qIw+w2tRbcMiXFEbMihkQ8B1+V6m28sshBwAB0SDmOe0u44ne1vFU66+gx/28RsBVQ==
-
-"@next/swc-win32-ia32-msvc@14.2.13":
-  version "14.2.13"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.13.tgz#6aa664f36f2d70c5ae6ffcbbc56784d33f24522d"
-  integrity sha512-V26ezyjPqQpDBV4lcWIh8B/QICQ4v+M5Bo9ykLN+sqeKKBxJVDpEc6biDVyluTXTC40f5IqCU0ttth7Es2ZuMw==
-
-"@next/swc-win32-x64-msvc@14.2.13":
-  version "14.2.13"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.13.tgz#5a920eea82a58affa6146192586716cec6c87fed"
-  integrity sha512-WwzOEAFBGhlDHE5Z73mNU8CO8mqMNLqaG+AO9ETmzdCQlJhVtWZnOl2+rqgVQS+YHunjOWptdFmNfbpwcUuEsw==
+"@next/swc-darwin-arm64@15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.0.2.tgz#66f84083f1f564d09bbacff8d6b24bd833783bef"
+  integrity sha512-GK+8w88z+AFlmt+ondytZo2xpwlfAR8U6CRwXancHImh6EdGfHMIrTSCcx5sOSBei00GyLVL0ioo1JLKTfprgg==
+
+"@next/swc-darwin-x64@15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-15.0.2.tgz#1aef085642f363b89acf264cf1b9848632b52914"
+  integrity sha512-KUpBVxIbjzFiUZhiLIpJiBoelqzQtVZbdNNsehhUn36e2YzKHphnK8eTUW1s/4aPy5kH/UTid8IuVbaOpedhpw==
+
+"@next/swc-linux-arm64-gnu@15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.0.2.tgz#203b41742e60642587e004773a8c203053b6832e"
+  integrity sha512-9J7TPEcHNAZvwxXRzOtiUvwtTD+fmuY0l7RErf8Yyc7kMpE47MIQakl+3jecmkhOoIyi/Rp+ddq7j4wG6JDskQ==
+
+"@next/swc-linux-arm64-musl@15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.0.2.tgz#d256932ec11051f376348862508be9017b23f3d8"
+  integrity sha512-BjH4ZSzJIoTTZRh6rG+a/Ry4SW0HlizcPorqNBixBWc3wtQtj4Sn9FnRZe22QqrPnzoaW0ctvSz4FaH4eGKMww==
+
+"@next/swc-linux-x64-gnu@15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.0.2.tgz#06c52a23a7e13d5ccd0ded1cf295b32df58e0932"
+  integrity sha512-i3U2TcHgo26sIhcwX/Rshz6avM6nizrZPvrDVDY1bXcLH1ndjbO8zuC7RoHp0NSK7wjJMPYzm7NYL1ksSKFreA==
+
+"@next/swc-linux-x64-musl@15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.0.2.tgz#eb70a81a1c66d4935d50bf6fe1021e440f27fe9f"
+  integrity sha512-AMfZfSVOIR8fa+TXlAooByEF4OB00wqnms1sJ1v+iu8ivwvtPvnkwdzzFMpsK5jA2S9oNeeQ04egIWVb4QWmtQ==
+
+"@next/swc-win32-arm64-msvc@15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.0.2.tgz#29a763bdc3a1281633af10cf8428e916e02f079a"
+  integrity sha512-JkXysDT0/hEY47O+Hvs8PbZAeiCQVxKfGtr4GUpNAhlG2E0Mkjibuo8ryGD29Qb5a3IOnKYNoZlh/MyKd2Nbww==
+
+"@next/swc-win32-x64-msvc@15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.0.2.tgz#0f70d8146990886a85099875353539fc6dd68338"
+  integrity sha512-foaUL0NqJY/dX0Pi/UcZm5zsmSk5MtP/gxx3xOPyREkMFN+CTjctPfu3QaqrQHinaKdPnMWPJDKt4VjDfTBe/Q==
 
 "@ngraveio/bc-ur@^1.0.0", "@ngraveio/bc-ur@^1.1.5":
   version "1.1.6"
@@ -3898,7 +4037,7 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+"@nodelib/fs.walk@^1.2.3":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -4018,6 +4157,11 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@pkgr/core@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
+  integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.11":
   version "0.5.11"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.11.tgz#7c2268cedaa0644d677e8c4f377bc8fb304f714a"
@@ -4033,10 +4177,10 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
-"@polka/url@^1.0.0-next.20":
-  version "1.0.0-next.23"
-  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.23.tgz#498e41218ab3b6a1419c735e5c6ae2c5ed609b6c"
-  integrity sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==
+"@polka/url@^1.0.0-next.24":
+  version "1.0.0-next.28"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.28.tgz#d45e01c4a56f143ee69c54dd6b12eade9e270a73"
+  integrity sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==
 
 "@popperjs/core@^2.11.8":
   version "2.11.8"
@@ -4158,10 +4302,15 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rushstack/eslint-patch@^1.3.3":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz#2d4260033e199b3032a08b41348ac10de21c47e9"
-  integrity sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==
+"@rtsao/scc@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
+  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
+
+"@rushstack/eslint-patch@^1.10.3":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz#427d5549943a9c6fce808e39ea64dbe60d4047f1"
+  integrity sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==
 
 "@safe-global/api-kit@^2.4.6":
   version "2.4.6"
@@ -4195,10 +4344,10 @@
     "@safe-global/safe-gateway-typescript-sdk" "^3.5.3"
     viem "^2.1.1"
 
-"@safe-global/safe-client-gateway-sdk@1.60.1-next-069fa2b":
-  version "1.60.1-next-069fa2b"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-client-gateway-sdk/-/safe-client-gateway-sdk-1.60.1-next-069fa2b.tgz#5a4ac69661713dd08b33bbcc15fa7d870339ed0a"
-  integrity sha512-gS+AcYuX1L6l79q87TA/A6vS34wovUgypRKS8lXzo4nDbHE333i/yp7JoOAcxKXFlJDHJXHIbPRkOKoMjdylEA==
+"@safe-global/safe-client-gateway-sdk@v1.60.1":
+  version "1.60.1"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-client-gateway-sdk/-/safe-client-gateway-sdk-1.60.1.tgz#4f24a4c7f0ba04a82a2208bd14163cde46189661"
+  integrity sha512-3vdDOSXLlvx9B+bo15MPTRGPrUn5jJEvtvWF0esY1oFWfI9riQOttWIIyQGYgDZhxMd+qW0aYKNMpn8DTP+7rw==
   dependencies:
     openapi-fetch "0.10.5"
 
@@ -4893,13 +5042,6 @@
     recast "^0.23.5"
     ts-dedent "^2.0.0"
 
-"@storybook/csf@^0.0.1":
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
-  integrity sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==
-  dependencies:
-    lodash "^4.17.15"
-
 "@storybook/csf@^0.1.11", "@storybook/csf@^0.1.2":
   version "0.1.11"
   resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.1.11.tgz#ad685a4fe564a47a6b73571c2e7c07b526f4f71b"
@@ -5272,17 +5414,16 @@
     "@svgr/plugin-jsx" "^6.5.1"
     "@svgr/plugin-svgo" "^6.5.1"
 
-"@swc/counter@^0.1.3":
+"@swc/counter@0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
   integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
 
-"@swc/helpers@0.5.5":
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.5.tgz#12689df71bfc9b21c4f4ca00ae55f2f16c8b77c0"
-  integrity sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==
+"@swc/helpers@0.5.13":
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.13.tgz#33e63ff3cd0cade557672bd7888a39ce7d115a8c"
+  integrity sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==
   dependencies:
-    "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
 "@swc/helpers@^0.5.11":
@@ -5292,23 +5433,23 @@
   dependencies:
     tslib "^2.4.0"
 
-"@testing-library/cypress@^8.0.7":
-  version "8.0.7"
-  resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-8.0.7.tgz#18315eba3cf8852808afadf122e4858406384015"
-  integrity sha512-3HTV725rOS+YHve/gD9coZp/UcPK5xhr4H0GMnq/ni6USdtzVtSOG9WBFtd8rYnrXk8rrGD+0toRFYouJNIG0Q==
+"@testing-library/cypress@^10.0.2":
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-10.0.2.tgz#5d360f2aa43708c6c92e24765f892b09f3a58912"
+  integrity sha512-dKv95Bre5fDmNb9tOIuWedhGUryxGu1GWYWtXDqUsDPcr9Ekld0fiTb+pcBvSsFpYXAZSpmyEjhoXzLbhh06yQ==
   dependencies:
     "@babel/runtime" "^7.14.6"
-    "@testing-library/dom" "^8.1.0"
+    "@testing-library/dom" "^10.1.0"
 
-"@testing-library/dom@^8.1.0", "@testing-library/dom@^8.5.0":
-  version "8.20.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"
-  integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==
+"@testing-library/dom@^10.1.0":
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8"
+  integrity sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
     "@types/aria-query" "^5.0.1"
-    aria-query "5.1.3"
+    aria-query "5.3.0"
     chalk "^4.1.0"
     dom-accessibility-api "^0.5.9"
     lz-string "^1.5.0"
@@ -5328,45 +5469,41 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
-"@testing-library/jest-dom@^5.16.5":
-  version "5.17.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz#5e97c8f9a15ccf4656da00fecab505728de81e0c"
-  integrity sha512-ynmNeT7asXyH3aSVv4vvX4Rb+0qjOhdNHnO/3vuZNqPmhDpV/+rCSGwQ7bLcmU2cJ4dvoheIO85LQj0IbJHEtg==
+"@testing-library/jest-dom@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz#38949f6b63722900e2d75ba3c6d9bf8cffb3300e"
+  integrity sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==
   dependencies:
-    "@adobe/css-tools" "^4.0.1"
+    "@adobe/css-tools" "^4.3.2"
     "@babel/runtime" "^7.9.2"
-    "@types/testing-library__jest-dom" "^5.9.1"
     aria-query "^5.0.0"
     chalk "^3.0.0"
     css.escape "^1.5.1"
-    dom-accessibility-api "^0.5.6"
+    dom-accessibility-api "^0.6.3"
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/jest-dom@^6.4.2":
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz#38949f6b63722900e2d75ba3c6d9bf8cffb3300e"
-  integrity sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==
+"@testing-library/jest-dom@^6.6.3":
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz#26ba906cf928c0f8172e182c6fe214eb4f9f2bd2"
+  integrity sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==
   dependencies:
-    "@adobe/css-tools" "^4.3.2"
-    "@babel/runtime" "^7.9.2"
+    "@adobe/css-tools" "^4.4.0"
     aria-query "^5.0.0"
     chalk "^3.0.0"
     css.escape "^1.5.1"
     dom-accessibility-api "^0.6.3"
-    lodash "^4.17.15"
+    lodash "^4.17.21"
     redent "^3.0.0"
 
-"@testing-library/react@^13.3.0":
-  version "13.4.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.4.0.tgz#6a31e3bf5951615593ad984e96b9e5e2d9380966"
-  integrity sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==
+"@testing-library/react@^16.0.1":
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.0.1.tgz#29c0ee878d672703f5e7579f239005e4e0faa875"
+  integrity sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.5.0"
-    "@types/react-dom" "^18.0.0"
 
-"@testing-library/user-event@^14.4.2", "@testing-library/user-event@^14.5.2":
+"@testing-library/user-event@^14.5.2":
   version "14.5.2"
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
   integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
@@ -5684,6 +5821,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
   integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
 
+"@types/estree@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
 "@types/express-serve-static-core@^4.17.33":
   version "4.19.0"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.19.0.tgz#3ae8ab3767d98d0b682cda063c3339e1e86ccfaa"
@@ -5755,7 +5897,7 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@*", "@types/jest@^29.5.4":
+"@types/jest@^29.5.4":
   version "29.5.5"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.5.tgz#727204e06228fe24373df9bae76b90f3e8236a2a"
   integrity sha512-ebylz2hnsWR9mYvmBFbXJXr+33UPc4+ZdxyDXh5w0FlPBTfCVN3wPL+kuOiQt3xvrK419v7XWeAs+AeOksafXg==
@@ -5856,11 +5998,6 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
   integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
 
-"@types/node@^16.18.39":
-  version "16.18.58"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.58.tgz#bf66f63983104ed57c754f4e84ccaf16f8235adb"
-  integrity sha512-YGncyA25/MaVtQkjWW9r0EFBukZ+JulsLcVZBlGUfIb96OBMjkoRWwQo5IEWJ8Fj06Go3GHw+bjYDitv6BaGsA==
-
 "@types/node@^18.0.0":
   version "18.19.30"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.30.tgz#0b1e6f824ed7ce37ef6e56f8f0d7d0ec2847b327"
@@ -5911,12 +6048,7 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
   integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
 
-"@types/prop-types@*":
-  version "15.7.11"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
-  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
-
-"@types/prop-types@^15.7.12":
+"@types/prop-types@^15.7.13":
   version "15.7.13"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
   integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
@@ -5938,10 +6070,10 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react-dom@^18.0.0", "@types/react-dom@^18.3.0":
-  version "18.3.0"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
-  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
+"@types/react-dom@npm:types-react-dom@19.0.0-rc.1":
+  version "19.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/types-react-dom/-/types-react-dom-19.0.0-rc.1.tgz#1d544d02c5df2a82d87c2eff979afa2e21a8317a"
+  integrity sha512-VSLZJl8VXCD0fAWp7DUTFUDCcZ8DVXOQmjhJMD03odgeFmu14ZQJHCXeETm3BEAhJqfgJaFkLnGkQv88sRx0fQ==
   dependencies:
     "@types/react" "*"
 
@@ -5950,19 +6082,18 @@
   resolved "https://registry.yarnpkg.com/@types/react-gtm-module/-/react-gtm-module-2.0.3.tgz#bc4b68abc7112a658100266948e24e88330d2600"
   integrity sha512-fL2zKdDFN5LckSsVBXEhhm9M4tFTM9oHJfGcfZJzktQkzpOTGtDM8oXIP9d9UBDxO4xLNZhS22dlgRVv6wgK9w==
 
-"@types/react-transition-group@^4.4.10", "@types/react-transition-group@^4.4.5":
-  version "4.4.10"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
-  integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
+"@types/react-transition-group@^4.4.11":
+  version "4.4.11"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5"
+  integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.3.10":
-  version "18.3.10"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.10.tgz#6edc26dc22ff8c9c226d3c7bf8357b013c842219"
-  integrity sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==
+"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@npm:types-react@19.0.0-rc.1":
+  version "19.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/types-react/-/types-react-19.0.0-rc.1.tgz#576d1a702f6d0cc5b24813a293913e5cbfeaa647"
+  integrity sha512-RshndUfqTW6K3STLPis8BtAYCGOkMbtvYsi90gmVNDZBXUyUc5juf2PE9LfS/JmOlUIRO8cWTS/1MTnmhjDqyQ==
   dependencies:
-    "@types/prop-types" "*"
     csstype "^3.0.2"
 
 "@types/resolve@1.17.1":
@@ -5984,7 +6115,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/semver@^7.3.10", "@types/semver@^7.3.12", "@types/semver@^7.3.4", "@types/semver@^7.5.8":
+"@types/semver@^7.3.10", "@types/semver@^7.3.4", "@types/semver@^7.5.8":
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
   integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
@@ -6021,13 +6152,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/testing-library__jest-dom@^5.9.1":
-  version "5.14.9"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz#0fb1e6a0278d87b6737db55af5967570b67cb466"
-  integrity sha512-FSYhIjFlfOpGSRyVoMBMuS3ws5ehFQODymf3vlI7U1K8c7PHwWwFY7VREfmsuzHSOnoKs/9/Y983ayOs7eRzqw==
-  dependencies:
-    "@types/jest" "*"
-
 "@types/tough-cookie@*":
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.3.tgz#3d06b6769518450871fbc40770b7586334bdfd90"
@@ -6106,6 +6230,21 @@
   dependencies:
     "@types/node" "*"
 
+"@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.13.0.tgz#650c50b8c795b5d092189f139f6d00535b5b0f3d"
+  integrity sha512-nQtBLiZYMUPkclSeC3id+x4uVd1SGtHuElTxL++SfP47jR0zfkZBJHc+gL4qPsgTuypz0k8Y2GheaDYn6Gy3rg==
+  dependencies:
+    "@eslint-community/regexpp" "^4.10.0"
+    "@typescript-eslint/scope-manager" "8.13.0"
+    "@typescript-eslint/type-utils" "8.13.0"
+    "@typescript-eslint/utils" "8.13.0"
+    "@typescript-eslint/visitor-keys" "8.13.0"
+    graphemer "^1.4.0"
+    ignore "^5.3.1"
+    natural-compare "^1.4.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/eslint-plugin@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.6.0.tgz#1f5df5cda490a0bcb6fbdd3382e19f1241024242"
@@ -6123,33 +6262,17 @@
     semver "^7.6.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/parser@^5.4.2 || ^6.0.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.21.0.tgz#af8fcf66feee2edc86bc5d1cf45e33b0630bf35b"
-  integrity sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==
+"@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.13.0.tgz#ef76203b7cac515aa3ccc4f7ce5320dd61c46b29"
+  integrity sha512-w0xp+xGg8u/nONcGw1UXAr6cjCPU1w0XVyBs6Zqaj5eLmxkKQAByTdV/uGgNN5tVvN/kKpoQlP2cL7R+ajZZIQ==
   dependencies:
-    "@typescript-eslint/scope-manager" "6.21.0"
-    "@typescript-eslint/types" "6.21.0"
-    "@typescript-eslint/typescript-estree" "6.21.0"
-    "@typescript-eslint/visitor-keys" "6.21.0"
+    "@typescript-eslint/scope-manager" "8.13.0"
+    "@typescript-eslint/types" "8.13.0"
+    "@typescript-eslint/typescript-estree" "8.13.0"
+    "@typescript-eslint/visitor-keys" "8.13.0"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
-  integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
-  dependencies:
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/visitor-keys" "5.62.0"
-
-"@typescript-eslint/scope-manager@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
-  integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
-  dependencies:
-    "@typescript-eslint/types" "6.21.0"
-    "@typescript-eslint/visitor-keys" "6.21.0"
-
 "@typescript-eslint/scope-manager@7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.6.0.tgz#1e9972f654210bd7500b31feadb61a233f5b5e9d"
@@ -6158,6 +6281,22 @@
     "@typescript-eslint/types" "7.6.0"
     "@typescript-eslint/visitor-keys" "7.6.0"
 
+"@typescript-eslint/scope-manager@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.13.0.tgz#2f4aed0b87d72360e64e4ea194b1fde14a59082e"
+  integrity sha512-XsGWww0odcUT0gJoBZ1DeulY1+jkaHUciUq4jKNv4cpInbvvrtDoyBH9rE/n2V29wQJPk8iCH1wipra9BhmiMA==
+  dependencies:
+    "@typescript-eslint/types" "8.13.0"
+    "@typescript-eslint/visitor-keys" "8.13.0"
+
+"@typescript-eslint/scope-manager@8.14.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.14.0.tgz#01f37c147a735cd78f0ff355e033b9457da1f373"
+  integrity sha512-aBbBrnW9ARIDn92Zbo7rguLnqQ/pOrUguVpbUwzOhkFg2npFDwTgPGqFqE0H5feXcOoJOfX3SxlJaKEVtq54dw==
+  dependencies:
+    "@typescript-eslint/types" "8.14.0"
+    "@typescript-eslint/visitor-keys" "8.14.0"
+
 "@typescript-eslint/type-utils@7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.6.0.tgz#644f75075f379827d25fe0713e252ccd4e4a428c"
@@ -6168,47 +6307,30 @@
     debug "^4.3.4"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/types@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
-  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
-
-"@typescript-eslint/types@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
-  integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
+"@typescript-eslint/type-utils@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.13.0.tgz#8c8fa68490dcb9ae1687ffc7de8fbe23c26417bd"
+  integrity sha512-Rqnn6xXTR316fP4D2pohZenJnp+NwQ1mo7/JM+J1LWZENSLkJI8ID8QNtlvFeb0HnFSK94D6q0cnMX6SbE5/vA==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "8.13.0"
+    "@typescript-eslint/utils" "8.13.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.3.0"
 
 "@typescript-eslint/types@7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.6.0.tgz#53dba7c30c87e5f10a731054266dd905f1fbae38"
   integrity sha512-h02rYQn8J+MureCvHVVzhl69/GAfQGPQZmOMjG1KfCl7o3HtMSlPaPUAPu6lLctXI5ySRGIYk94clD/AUMCUgQ==
 
-"@typescript-eslint/typescript-estree@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
-  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
-  dependencies:
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/visitor-keys" "5.62.0"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
+"@typescript-eslint/types@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.13.0.tgz#3f35dead2b2491a04339370dcbcd17bbdfc204d8"
+  integrity sha512-4cyFErJetFLckcThRUFdReWJjVsPCqyBlJTi6IDEpc1GWCIIZRFxVppjWLIMcQhNGhdWJJRYFHpHoDWvMlDzng==
 
-"@typescript-eslint/typescript-estree@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
-  integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
-  dependencies:
-    "@typescript-eslint/types" "6.21.0"
-    "@typescript-eslint/visitor-keys" "6.21.0"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    minimatch "9.0.3"
-    semver "^7.5.4"
-    ts-api-utils "^1.0.1"
+"@typescript-eslint/types@8.14.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.14.0.tgz#0d33d8d0b08479c424e7d654855fddf2c71e4021"
+  integrity sha512-yjeB9fnO/opvLJFAsPNYlKPnEM8+z4og09Pk504dkqonT02AyL5Z9SSqlE0XqezS93v6CXn49VHvB2G7XSsl0g==
 
 "@typescript-eslint/typescript-estree@7.6.0":
   version "7.6.0"
@@ -6224,6 +6346,34 @@
     semver "^7.6.0"
     ts-api-utils "^1.3.0"
 
+"@typescript-eslint/typescript-estree@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.13.0.tgz#db8c93dd5437ca3ce417a255fb35ddc3c12c3e95"
+  integrity sha512-v7SCIGmVsRK2Cy/LTLGN22uea6SaUIlpBcO/gnMGT/7zPtxp90bphcGf4fyrCQl3ZtiBKqVTG32hb668oIYy1g==
+  dependencies:
+    "@typescript-eslint/types" "8.13.0"
+    "@typescript-eslint/visitor-keys" "8.13.0"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/typescript-estree@8.14.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.14.0.tgz#a7a3a5a53a6c09313e12fb4531d4ff582ee3c312"
+  integrity sha512-OPXPLYKGZi9XS/49rdaCbR5j/S14HazviBlUQFvSKz3npr3NikF+mrgK7CFVur6XEt95DZp/cmke9d5i3vtVnQ==
+  dependencies:
+    "@typescript-eslint/types" "8.14.0"
+    "@typescript-eslint/visitor-keys" "8.14.0"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/utils@7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.6.0.tgz#e400d782280b6f724c8a1204269d984c79202282"
@@ -6237,35 +6387,25 @@
     "@typescript-eslint/typescript-estree" "7.6.0"
     semver "^7.6.0"
 
-"@typescript-eslint/utils@^5.62.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
-  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
-  dependencies:
-    "@eslint-community/eslint-utils" "^4.2.0"
-    "@types/json-schema" "^7.0.9"
-    "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.62.0"
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/typescript-estree" "5.62.0"
-    eslint-scope "^5.1.1"
-    semver "^7.3.7"
-
-"@typescript-eslint/visitor-keys@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
-  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
+"@typescript-eslint/utils@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.13.0.tgz#f6d40e8b5053dcaeabbd2e26463857abf27d62c0"
+  integrity sha512-A1EeYOND6Uv250nybnLZapeXpYMl8tkzYUxqmoKAWnI4sei3ihf2XdZVd+vVOmHGcp3t+P7yRrNsyyiXTvShFQ==
   dependencies:
-    "@typescript-eslint/types" "5.62.0"
-    eslint-visitor-keys "^3.3.0"
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "8.13.0"
+    "@typescript-eslint/types" "8.13.0"
+    "@typescript-eslint/typescript-estree" "8.13.0"
 
-"@typescript-eslint/visitor-keys@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
-  integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
+"@typescript-eslint/utils@^8.8.1":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.14.0.tgz#ac2506875e03aba24e602364e43b2dfa45529dbd"
+  integrity sha512-OGqj6uB8THhrHj0Fk27DcHPojW7zKwKkPmHXHvQ58pLYp4hy8CSUdTKykKeh+5vFqTTVmjz0zCOOPKRovdsgHA==
   dependencies:
-    "@typescript-eslint/types" "6.21.0"
-    eslint-visitor-keys "^3.4.1"
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "8.14.0"
+    "@typescript-eslint/types" "8.14.0"
+    "@typescript-eslint/typescript-estree" "8.14.0"
 
 "@typescript-eslint/visitor-keys@7.6.0":
   version "7.6.0"
@@ -6275,7 +6415,23 @@
     "@typescript-eslint/types" "7.6.0"
     eslint-visitor-keys "^3.4.3"
 
-"@ungap/structured-clone@^1.0.0", "@ungap/structured-clone@^1.2.0":
+"@typescript-eslint/visitor-keys@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.13.0.tgz#e97b0d92b266ef38a1faf40a74da289b66683a5b"
+  integrity sha512-7N/+lztJqH4Mrf0lb10R/CbI1EaAMMGyF5y0oJvFoAhafwgiRA7TXyd8TFn8FC8k5y2dTsYogg238qavRGNnlw==
+  dependencies:
+    "@typescript-eslint/types" "8.13.0"
+    eslint-visitor-keys "^3.4.3"
+
+"@typescript-eslint/visitor-keys@8.14.0":
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.14.0.tgz#2418d5a54669af9658986ade4e6cfb7767d815ad"
+  integrity sha512-vG0XZo8AdTH9OE6VFRwAZldNc7qtJ/6NLGWak+BtENuEUXGZgFpihILPiBvKXvJ2nFu27XNGC6rKiwuaoMbYzQ==
+  dependencies:
+    "@typescript-eslint/types" "8.14.0"
+    eslint-visitor-keys "^3.4.3"
+
+"@ungap/structured-clone@^1.0.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
@@ -7101,11 +7257,16 @@ acorn@^7.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.0.0, acorn@^8.0.4, acorn@^8.1.0, acorn@^8.10.0, acorn@^8.11.3, acorn@^8.7.1, acorn@^8.8.1, acorn@^8.8.2, acorn@^8.9.0:
+acorn@^8.0.0, acorn@^8.0.4, acorn@^8.1.0, acorn@^8.10.0, acorn@^8.11.3, acorn@^8.7.1, acorn@^8.8.1, acorn@^8.8.2:
   version "8.12.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
   integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
 
+acorn@^8.14.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
 adjust-sourcemap-loader@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz#fc4a0fd080f7d10471f30a7320f25560ade28c99"
@@ -7273,13 +7434,18 @@ aria-query@5.1.3:
   dependencies:
     deep-equal "^2.0.5"
 
-aria-query@^5.0.0, aria-query@^5.3.0:
+aria-query@5.3.0, aria-query@^5.0.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
   dependencies:
     dequal "^2.0.3"
 
+aria-query@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
+  integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
+
 array-back@^3.0.1, array-back@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/array-back/-/array-back-3.1.0.tgz#b8859d7a508871c9a7b2cf42f99428f65e96bfb0"
@@ -7303,7 +7469,7 @@ array-flatten@1.1.1:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
 
-array-includes@^3.1.6, array-includes@^3.1.7:
+array-includes@^3.1.6:
   version "3.1.7"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda"
   integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==
@@ -7314,6 +7480,18 @@ array-includes@^3.1.6, array-includes@^3.1.7:
     get-intrinsic "^1.2.1"
     is-string "^1.0.7"
 
+array-includes@^3.1.8:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    is-string "^1.0.7"
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -7331,26 +7509,28 @@ array-uniq@^1.0.1:
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
   integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
 
-array.prototype.filter@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array.prototype.filter/-/array.prototype.filter-1.0.3.tgz#423771edeb417ff5914111fff4277ea0624c0d0e"
-  integrity sha512-VizNcj/RGJiUyQBgzwxzE5oHdeuXY5hSbbmKMlphj1cy1Vl7Pn2asCGbSrru6hSQjmCzqTBPVWAF/whmEOVHbw==
+array.prototype.findlast@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
+  integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-    es-array-method-boxes-properly "^1.0.0"
-    is-string "^1.0.7"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
 
-array.prototype.findlastindex@^1.2.3:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.4.tgz#d1c50f0b3a9da191981ff8942a0aedd82794404f"
-  integrity sha512-hzvSHUshSpCflDR1QMUBLHGHP1VIEBegT4pix9H/Z92Xw3ySoy6c2qh7lJWTJnRJ8JCZ9bJNCgTyYaJGcJu6xQ==
+array.prototype.findlastindex@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+  integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
   dependencies:
-    call-bind "^1.0.5"
+    call-bind "^1.0.7"
     define-properties "^1.2.1"
-    es-abstract "^1.22.3"
+    es-abstract "^1.23.2"
     es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
     es-shim-unscopables "^1.0.2"
 
 array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
@@ -7363,7 +7543,7 @@ array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
     es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.flatmap@^1.3.1, array.prototype.flatmap@^1.3.2:
+array.prototype.flatmap@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
   integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
@@ -7373,16 +7553,16 @@ array.prototype.flatmap@^1.3.1, array.prototype.flatmap@^1.3.2:
     es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.tosorted@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.2.tgz#620eff7442503d66c799d95503f82b475745cefd"
-  integrity sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==
+array.prototype.tosorted@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz#fe954678ff53034e717ea3352a03f0b0b86f7ffc"
+  integrity sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-    es-shim-unscopables "^1.0.0"
-    get-intrinsic "^1.2.1"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+    es-errors "^1.3.0"
+    es-shim-unscopables "^1.0.2"
 
 arraybuffer.prototype.slice@^1.0.3:
   version "1.0.3"
@@ -7474,13 +7654,6 @@ async@^3.2.0, async@^3.2.3:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
   integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
 
-asynciterator.prototype@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz#8c5df0514936cdd133604dfcc9d3fb93f09b2b62"
-  integrity sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==
-  dependencies:
-    has-symbols "^1.0.3"
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -7501,7 +7674,7 @@ attr-accept@^2.2.2:
   resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
   integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
 
-available-typed-arrays@^1.0.5, available-typed-arrays@^1.0.6:
+available-typed-arrays@^1.0.5, available-typed-arrays@^1.0.6, available-typed-arrays@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
   integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
@@ -7518,10 +7691,10 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3"
   integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==
 
-axe-core@=4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
-  integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
+axe-core@^4.10.0:
+  version "4.10.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"
+  integrity sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==
 
 axios@0.26.1:
   version "0.26.1"
@@ -7539,12 +7712,10 @@ axios@^1.3.4:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-axobject-query@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
-  integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
-  dependencies:
-    dequal "^2.0.3"
+axobject-query@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
+  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
 
 b4a@^1.6.4:
   version "1.6.6"
@@ -8074,7 +8245,7 @@ buffer@6.0.3, buffer@^6.0.3, buffer@~6.0.3:
     base64-js "^1.3.1"
     ieee754 "^1.2.1"
 
-buffer@^5.1.0, buffer@^5.5.0, buffer@^5.6.0:
+buffer@^5.1.0, buffer@^5.5.0, buffer@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
   integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
@@ -8308,6 +8479,11 @@ ci-info@^3.2.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
+ci-info@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-4.0.0.tgz#65466f8b280fc019b9f50a5388115d17a63a44f2"
+  integrity sha512-TdHqgGf9odd8SXNuxtUBVx8Nv+qZOejE6qyqiy5NtbYYQOeFa6zmHkxlPzmaLxWWHsU6nJmB7AETdVPi+2NBUg==
+
 cids@^1.0.0, cids@^1.1.5, cids@^1.1.6:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/cids/-/cids-1.1.9.tgz#402c26db5c07059377bcd6fb82f2a24e7f2f4a4f"
@@ -8429,12 +8605,12 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
-clsx@^1.1.0, clsx@^1.2.1:
+clsx@^1.1.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
-clsx@^2.1.0, clsx@^2.1.1:
+clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -8509,7 +8685,7 @@ colorette@^2.0.10, colorette@^2.0.16:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
-combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
+combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -8753,7 +8929,7 @@ cross-fetch@^3.1.4, cross-fetch@^3.1.5, cross-fetch@^3.1.6:
   dependencies:
     node-fetch "^2.6.12"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.3:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.5.tgz#910aac880ff5243da96b728bc6521a5f6c2f2f82"
   integrity sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==
@@ -8762,6 +8938,15 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+cross-spawn@^7.0.5:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypto-browserify@^3.12.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -8876,33 +9061,33 @@ cypress-file-upload@^5.0.8:
   resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-5.0.8.tgz#d8824cbeaab798e44be8009769f9a6c9daa1b4a1"
   integrity sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==
 
-cypress-visual-regression@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/cypress-visual-regression/-/cypress-visual-regression-5.0.2.tgz#1681543e0859525cc09baba9de6a367c6c0dbfa5"
-  integrity sha512-Rr/W2uSw1KxG5AE9q6MT8yZfT81GaLVO0z/QyKg9pCZ7XvObUklyh9j5gWe7yUzDnY/2g9XpczZKNKL2zZ2PAg==
+cypress-visual-regression@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/cypress-visual-regression/-/cypress-visual-regression-5.2.2.tgz#4dc3e7e223683ffa3419025f397f50dba91ac8e0"
+  integrity sha512-QWCXlE7GCpNnwVLmkywiIJ8usrIgTdVdUE6j3LYhZPSB35jNR3GmwVihP6NzzAG4CpW4zm+MAEDrkuX1MQzPeA==
   dependencies:
     chalk "^4.1.2"
     pixelmatch "^5.2.1"
     pngjs "^6.0.0"
     sanitize-filename "^1.6.3"
 
-cypress@^12.15.0:
-  version "12.17.4"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.17.4.tgz#b4dadf41673058493fa0d2362faa3da1f6ae2e6c"
-  integrity sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==
+cypress@^13.15.2:
+  version "13.15.2"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.15.2.tgz#ef19554c274bc4ff23802aeb5c52951677fa67f1"
+  integrity sha512-ARbnUorjcCM3XiPwgHKuqsyr5W9Qn+pIIBPaoilnoBkLdSC2oLQjV1BUpnmc7KR+b7Avah3Ly2RMFnfxr96E/A==
   dependencies:
-    "@cypress/request" "2.88.12"
+    "@cypress/request" "^3.0.6"
     "@cypress/xvfb" "^1.2.4"
-    "@types/node" "^16.18.39"
     "@types/sinonjs__fake-timers" "8.1.1"
     "@types/sizzle" "^2.3.2"
     arch "^2.2.0"
     blob-util "^2.0.2"
     bluebird "^3.7.2"
-    buffer "^5.6.0"
+    buffer "^5.7.1"
     cachedir "^2.3.0"
     chalk "^4.1.0"
     check-more-types "^2.24.0"
+    ci-info "^4.0.0"
     cli-cursor "^3.1.0"
     cli-table3 "~0.6.1"
     commander "^6.2.1"
@@ -8917,7 +9102,6 @@ cypress@^12.15.0:
     figures "^3.2.0"
     fs-extra "^9.1.0"
     getos "^3.2.1"
-    is-ci "^3.0.0"
     is-installed-globally "~0.4.0"
     lazy-ass "^1.6.0"
     listr2 "^3.8.3"
@@ -8931,7 +9115,8 @@ cypress@^12.15.0:
     request-progress "^3.0.0"
     semver "^7.5.3"
     supports-color "^8.1.1"
-    tmp "~0.2.1"
+    tmp "~0.2.3"
+    tree-kill "1.2.2"
     untildify "^4.0.0"
     yauzl "^2.10.0"
 
@@ -8964,6 +9149,33 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+data-view-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
+  integrity sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
+  integrity sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-offset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
+  integrity sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
 date-fns@^2.30.0:
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
@@ -8976,6 +9188,11 @@ dayjs@^1.10.4:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
   integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
 
+debounce@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -9097,7 +9314,7 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
-define-data-property@^1.0.1, define-data-property@^1.1.2:
+define-data-property@^1.0.1, define-data-property@^1.1.2, define-data-property@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
   integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
@@ -9205,7 +9422,7 @@ detect-libc@^1.0.3:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==
 
-detect-libc@^2.0.0, detect-libc@^2.0.2:
+detect-libc@^2.0.0, detect-libc@^2.0.2, detect-libc@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
   integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
@@ -9262,7 +9479,7 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
+dom-accessibility-api@^0.5.9:
   version "0.5.16"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
@@ -9576,7 +9793,59 @@ error-stack-parser@^2.0.6:
   dependencies:
     stackframe "^1.3.4"
 
-es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.22.4:
+es-abstract@^1.17.5, es-abstract@^1.23.0, es-abstract@^1.23.2, es-abstract@^1.23.3:
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
+  integrity sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.3"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    data-view-buffer "^1.0.1"
+    data-view-byte-length "^1.0.1"
+    data-view-byte-offset "^1.0.0"
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.0.3"
+    es-to-primitive "^1.2.1"
+    function.prototype.name "^1.1.6"
+    get-intrinsic "^1.2.4"
+    get-symbol-description "^1.0.2"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
+    has-symbols "^1.0.3"
+    hasown "^2.0.2"
+    internal-slot "^1.0.7"
+    is-array-buffer "^3.0.4"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.1"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.3"
+    is-string "^1.0.7"
+    is-typed-array "^1.1.13"
+    is-weakref "^1.0.2"
+    object-inspect "^1.13.1"
+    object-keys "^1.1.1"
+    object.assign "^4.1.5"
+    regexp.prototype.flags "^1.5.2"
+    safe-array-concat "^1.1.2"
+    safe-regex-test "^1.0.3"
+    string.prototype.trim "^1.2.9"
+    string.prototype.trimend "^1.0.8"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.2"
+    typed-array-byte-length "^1.0.1"
+    typed-array-byte-offset "^1.0.2"
+    typed-array-length "^1.0.6"
+    unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.15"
+
+es-abstract@^1.22.1, es-abstract@^1.22.3:
   version "1.22.4"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.4.tgz#26eb2e7538c3271141f5754d31aabfdb215f27bf"
   integrity sha512-vZYJlk2u6qHYxBOTjAeg7qUxHdNfih64Uu2J8QqWgXZ2cri0ZpJAkzDUK/q593+mvKwlxyaxr6F1Q+3LKoQRgg==
@@ -9623,11 +9892,6 @@ es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.22.4:
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.14"
 
-es-array-method-boxes-properly@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
-  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
-
 es-define-property@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
@@ -9635,7 +9899,7 @@ es-define-property@^1.0.0:
   dependencies:
     get-intrinsic "^1.2.4"
 
-es-errors@^1.0.0, es-errors@^1.2.1, es-errors@^1.3.0:
+es-errors@^1.2.1, es-errors@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
@@ -9655,33 +9919,40 @@ es-get-iterator@^1.1.3:
     isarray "^2.0.5"
     stop-iteration-iterator "^1.0.0"
 
-es-iterator-helpers@^1.0.12, es-iterator-helpers@^1.0.15:
-  version "1.0.17"
-  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.17.tgz#123d1315780df15b34eb181022da43e734388bb8"
-  integrity sha512-lh7BsUqelv4KUbR5a/ZTaGGIMLCjPGPqJ6q+Oq24YP0RdyptX1uzm4vvaqzk7Zx3bpl/76YLTTDj9L7uYQ92oQ==
+es-iterator-helpers@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.2.0.tgz#2f1a3ab998b30cb2d10b195b587c6d9ebdebf152"
+  integrity sha512-tpxqxncxnpw3c93u8n3VOzACmRFoVmWJqbWXvX/JfKbkhBw1oslgPrUfeSt2psuqyEJFD6N/9lg5i7bsKpoq+Q==
   dependencies:
-    asynciterator.prototype "^1.0.0"
     call-bind "^1.0.7"
     define-properties "^1.2.1"
-    es-abstract "^1.22.4"
+    es-abstract "^1.23.3"
     es-errors "^1.3.0"
-    es-set-tostringtag "^2.0.2"
+    es-set-tostringtag "^2.0.3"
     function-bind "^1.1.2"
     get-intrinsic "^1.2.4"
-    globalthis "^1.0.3"
+    globalthis "^1.0.4"
+    gopd "^1.0.1"
     has-property-descriptors "^1.0.2"
-    has-proto "^1.0.1"
+    has-proto "^1.0.3"
     has-symbols "^1.0.3"
     internal-slot "^1.0.7"
-    iterator.prototype "^1.1.2"
-    safe-array-concat "^1.1.0"
+    iterator.prototype "^1.1.3"
+    safe-array-concat "^1.1.2"
 
 es-module-lexer@^1.2.1, es-module-lexer@^1.4.1:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.5.0.tgz#4878fee3789ad99e065f975fdd3c645529ff0236"
   integrity sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==
 
-es-set-tostringtag@^2.0.2:
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.0.2, es-set-tostringtag@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
   integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
@@ -9890,25 +10161,26 @@ escodegen@^2.0.0, escodegen@^2.1.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-next@^14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.1.0.tgz#7e309d426b8afacaba3b32fdbb02ba220b6d0a97"
-  integrity sha512-SBX2ed7DoRFXC6CQSLc/SbLY9Ut6HxNB2wPTcoIWjUMd7aF7O/SIE7111L8FdZ9TXsNV4pulUDnfthpyPtbFUg==
+eslint-config-next@^15.0.2:
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-15.0.3.tgz#b483585260d5e55050d4ab87e053c88089ae12ee"
+  integrity sha512-IGP2DdQQrgjcr4mwFPve4DrCqo7CVVez1WoYY47XwKSrYO4hC0Dlb+iJA60i0YfICOzgNADIb8r28BpQ5Zs0wg==
   dependencies:
-    "@next/eslint-plugin-next" "14.1.0"
-    "@rushstack/eslint-patch" "^1.3.3"
-    "@typescript-eslint/parser" "^5.4.2 || ^6.0.0"
+    "@next/eslint-plugin-next" "15.0.3"
+    "@rushstack/eslint-patch" "^1.10.3"
+    "@typescript-eslint/eslint-plugin" "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+    "@typescript-eslint/parser" "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
     eslint-import-resolver-node "^0.3.6"
     eslint-import-resolver-typescript "^3.5.2"
-    eslint-plugin-import "^2.28.1"
-    eslint-plugin-jsx-a11y "^6.7.1"
-    eslint-plugin-react "^7.33.2"
-    eslint-plugin-react-hooks "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+    eslint-plugin-import "^2.31.0"
+    eslint-plugin-jsx-a11y "^6.10.0"
+    eslint-plugin-react "^7.35.0"
+    eslint-plugin-react-hooks "^5.0.0"
 
-eslint-config-prettier@^8.5.0:
-  version "8.10.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz#3a06a662130807e2502fc3ff8b4143d8a0658e11"
-  integrity sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==
+eslint-config-prettier@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
+  integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
 
 eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
@@ -9932,120 +10204,123 @@ eslint-import-resolver-typescript@^3.5.2:
     is-core-module "^2.11.0"
     is-glob "^4.0.3"
 
-eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
+eslint-module-utils@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
+  integrity sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==
+  dependencies:
+    debug "^3.2.7"
+
+eslint-module-utils@^2.7.4:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz#e439fee65fc33f6bba630ff621efc38ec0375c49"
   integrity sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==
   dependencies:
     debug "^3.2.7"
 
-eslint-plugin-import@^2.28.1:
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
-  integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
+eslint-plugin-import@^2.31.0:
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
+  integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==
   dependencies:
-    array-includes "^3.1.7"
-    array.prototype.findlastindex "^1.2.3"
+    "@rtsao/scc" "^1.1.0"
+    array-includes "^3.1.8"
+    array.prototype.findlastindex "^1.2.5"
     array.prototype.flat "^1.3.2"
     array.prototype.flatmap "^1.3.2"
     debug "^3.2.7"
     doctrine "^2.1.0"
     eslint-import-resolver-node "^0.3.9"
-    eslint-module-utils "^2.8.0"
-    hasown "^2.0.0"
-    is-core-module "^2.13.1"
+    eslint-module-utils "^2.12.0"
+    hasown "^2.0.2"
+    is-core-module "^2.15.1"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
-    object.fromentries "^2.0.7"
-    object.groupby "^1.0.1"
-    object.values "^1.1.7"
+    object.fromentries "^2.0.8"
+    object.groupby "^1.0.3"
+    object.values "^1.2.0"
     semver "^6.3.1"
+    string.prototype.trimend "^1.0.8"
     tsconfig-paths "^3.15.0"
 
-eslint-plugin-jsx-a11y@^6.7.1:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz#2fa9c701d44fcd722b7c771ec322432857fcbad2"
-  integrity sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==
+eslint-plugin-jsx-a11y@^6.10.0:
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz#d2812bb23bf1ab4665f1718ea442e8372e638483"
+  integrity sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==
   dependencies:
-    "@babel/runtime" "^7.23.2"
-    aria-query "^5.3.0"
-    array-includes "^3.1.7"
+    aria-query "^5.3.2"
+    array-includes "^3.1.8"
     array.prototype.flatmap "^1.3.2"
     ast-types-flow "^0.0.8"
-    axe-core "=4.7.0"
-    axobject-query "^3.2.1"
+    axe-core "^4.10.0"
+    axobject-query "^4.1.0"
     damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
-    es-iterator-helpers "^1.0.15"
-    hasown "^2.0.0"
+    hasown "^2.0.2"
     jsx-ast-utils "^3.3.5"
     language-tags "^1.0.9"
     minimatch "^3.1.2"
-    object.entries "^1.1.7"
-    object.fromentries "^2.0.7"
+    object.fromentries "^2.0.8"
+    safe-regex-test "^1.0.3"
+    string.prototype.includes "^2.0.1"
 
-eslint-plugin-no-only-tests@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-no-only-tests/-/eslint-plugin-no-only-tests-3.1.0.tgz#f38e4935c6c6c4842bf158b64aaa20c366fe171b"
-  integrity sha512-Lf4YW/bL6Un1R6A76pRZyE1dl1vr31G/ev8UzIc/geCgFWyrKil8hVjYqWVKGB/UIGmb6Slzs9T0wNezdSVegw==
+eslint-plugin-no-only-tests@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-no-only-tests/-/eslint-plugin-no-only-tests-3.3.0.tgz#d9d42ccd4b5d099b4872fb5046cf95441188cfb5"
+  integrity sha512-brcKcxGnISN2CcVhXJ/kEQlNa0MEfGRtwKtWA16SkqXHKitaKIMrfemJKLKX1YqDU5C/5JY3PvZXd5jEW04e0Q==
 
-eslint-plugin-prettier@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
-  integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
+eslint-plugin-prettier@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz#d1c8f972d8f60e414c25465c163d16f209411f95"
+  integrity sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==
   dependencies:
     prettier-linter-helpers "^1.0.0"
+    synckit "^0.9.1"
 
-"eslint-plugin-react-hooks@^4.5.0 || 5.0.0-canary-7118f5dd7-20230705":
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
-  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+eslint-plugin-react-hooks@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0.tgz#72e2eefbac4b694f5324154619fee44f5f60f101"
+  integrity sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==
 
-eslint-plugin-react@^7.33.2:
-  version "7.33.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
-  integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
+eslint-plugin-react@^7.35.0:
+  version "7.37.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz#cd0935987876ba2900df2f58339f6d92305acc7a"
+  integrity sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==
   dependencies:
-    array-includes "^3.1.6"
-    array.prototype.flatmap "^1.3.1"
-    array.prototype.tosorted "^1.1.1"
+    array-includes "^3.1.8"
+    array.prototype.findlast "^1.2.5"
+    array.prototype.flatmap "^1.3.2"
+    array.prototype.tosorted "^1.1.4"
     doctrine "^2.1.0"
-    es-iterator-helpers "^1.0.12"
+    es-iterator-helpers "^1.1.0"
     estraverse "^5.3.0"
+    hasown "^2.0.2"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
-    object.entries "^1.1.6"
-    object.fromentries "^2.0.6"
-    object.hasown "^1.1.2"
-    object.values "^1.1.6"
+    object.entries "^1.1.8"
+    object.fromentries "^2.0.8"
+    object.values "^1.2.0"
     prop-types "^15.8.1"
-    resolve "^2.0.0-next.4"
+    resolve "^2.0.0-next.5"
     semver "^6.3.1"
-    string.prototype.matchall "^4.0.8"
+    string.prototype.matchall "^4.0.11"
+    string.prototype.repeat "^1.0.0"
 
-eslint-plugin-storybook@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-storybook/-/eslint-plugin-storybook-0.8.0.tgz#23185ecabdc289cae55248c090f0c1d8fbae6c41"
-  integrity sha512-CZeVO5EzmPY7qghO2t64oaFM+8FTaD4uzOEjHKp516exyTKo+skKAL9GI3QALS2BXhyALJjNtwbmr1XinGE8bA==
+eslint-plugin-storybook@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-storybook/-/eslint-plugin-storybook-0.11.0.tgz#97adc63512816a6f8b86040d1364af43d3336099"
+  integrity sha512-MvPJgF+ORwgK04a1CY5itO4pwdAOFIRqczlNEHL62+4Ocvj1d61GWRqIdeX1BNCKno6fdPC6TksUHCZMGsq26g==
   dependencies:
-    "@storybook/csf" "^0.0.1"
-    "@typescript-eslint/utils" "^5.62.0"
-    requireindex "^1.2.0"
+    "@storybook/csf" "^0.1.11"
+    "@typescript-eslint/utils" "^8.8.1"
     ts-dedent "^2.2.0"
 
-eslint-plugin-unused-imports@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-2.0.0.tgz#d8db8c4d0cfa0637a8b51ce3fd7d1b6bc3f08520"
-  integrity sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A==
-  dependencies:
-    eslint-rule-composer "^0.3.0"
-
-eslint-rule-composer@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"
-  integrity sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==
+eslint-plugin-unused-imports@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-4.1.4.tgz#62ddc7446ccbf9aa7b6f1f0b00a980423cda2738"
+  integrity sha512-YptD6IzQjDardkl0POxnnRBhU1OEePMV0nd6siHaRBbd+lyh6NAhFEobiznKU7kTsSsDeSD62Pe7kAM1b7dAZQ==
 
-eslint-scope@5.1.1, eslint-scope@^5.1.1:
+eslint-scope@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@@ -10053,62 +10328,63 @@ eslint-scope@5.1.1, eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.2.2:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
-  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+eslint-scope@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.2.0.tgz#377aa6f1cb5dc7592cfd0b7f892fd0cf352ce442"
+  integrity sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@^8.57.0:
-  version "8.57.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
-  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
+eslint-visitor-keys@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz#687bacb2af884fcdda8a6e7d65c606f46a14cd45"
+  integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==
+
+eslint@^9.14.0:
+  version "9.15.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.15.0.tgz#77c684a4e980e82135ebff8ee8f0a9106ce6b8a6"
+  integrity sha512-7CrWySmIibCgT1Os28lUU6upBshZ+GxybLOrmRzi08kS8MBuO8QA7pXEgYgY5W8vK3e74xv0lpjo9DbaGU9Rkw==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
-    "@eslint-community/regexpp" "^4.6.1"
-    "@eslint/eslintrc" "^2.1.4"
-    "@eslint/js" "8.57.0"
-    "@humanwhocodes/config-array" "^0.11.14"
+    "@eslint-community/regexpp" "^4.12.1"
+    "@eslint/config-array" "^0.19.0"
+    "@eslint/core" "^0.9.0"
+    "@eslint/eslintrc" "^3.2.0"
+    "@eslint/js" "9.15.0"
+    "@eslint/plugin-kit" "^0.2.3"
+    "@humanfs/node" "^0.16.6"
     "@humanwhocodes/module-importer" "^1.0.1"
-    "@nodelib/fs.walk" "^1.2.8"
-    "@ungap/structured-clone" "^1.2.0"
+    "@humanwhocodes/retry" "^0.4.1"
+    "@types/estree" "^1.0.6"
+    "@types/json-schema" "^7.0.15"
     ajv "^6.12.4"
     chalk "^4.0.0"
-    cross-spawn "^7.0.2"
+    cross-spawn "^7.0.5"
     debug "^4.3.2"
-    doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.2.2"
-    eslint-visitor-keys "^3.4.3"
-    espree "^9.6.1"
-    esquery "^1.4.2"
+    eslint-scope "^8.2.0"
+    eslint-visitor-keys "^4.2.0"
+    espree "^10.3.0"
+    esquery "^1.5.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
-    file-entry-cache "^6.0.1"
+    file-entry-cache "^8.0.0"
     find-up "^5.0.0"
     glob-parent "^6.0.2"
-    globals "^13.19.0"
-    graphemer "^1.4.0"
     ignore "^5.2.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
-    is-path-inside "^3.0.3"
-    js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
     lodash.merge "^4.6.2"
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
     optionator "^0.9.3"
-    strip-ansi "^6.0.1"
-    text-table "^0.2.0"
 
 esniff@^2.0.1:
   version "2.0.1"
@@ -10120,24 +10396,24 @@ esniff@^2.0.1:
     event-emitter "^0.3.5"
     type "^2.7.2"
 
-espree@^9.6.0, espree@^9.6.1:
-  version "9.6.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
-  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+espree@^10.0.1, espree@^10.3.0:
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-10.3.0.tgz#29267cf5b0cb98735b65e64ba07e0ed49d1eed8a"
+  integrity sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==
   dependencies:
-    acorn "^8.9.0"
+    acorn "^8.14.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.4.1"
+    eslint-visitor-keys "^4.2.0"
 
 esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.4.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
-  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
+esquery@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
   dependencies:
     estraverse "^5.1.0"
 
@@ -10730,6 +11006,17 @@ fast-glob@3.3.1, fast-glob@^3.2.7, fast-glob@^3.2.9, fast-glob@^3.3.1:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-parse@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d"
@@ -10802,12 +11089,12 @@ figures@^3.2.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
-file-entry-cache@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
-  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+file-entry-cache@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-8.0.0.tgz#7787bddcf1131bffb92636c69457bbc0edd6d81f"
+  integrity sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==
   dependencies:
-    flat-cache "^3.0.4"
+    flat-cache "^4.0.0"
 
 file-selector@^0.6.0:
   version "0.6.0"
@@ -10978,6 +11265,14 @@ flat-cache@^3.0.4:
     keyv "^4.5.3"
     rimraf "^3.0.2"
 
+flat-cache@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-4.0.1.tgz#0ece39fcb14ee012f4b0410bd33dd9c1f011127c"
+  integrity sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.4"
+
 flatted@^3.2.9:
   version "3.2.9"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.9.tgz#7eb4c67ca1ba34232ca9d2d93e9886e611ad7daf"
@@ -11035,13 +11330,13 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-form-data@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
-  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
+form-data@~4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.1.tgz#ba1076daaaa5bfd7e99c1a6cb02aa0a5cff90d48"
+  integrity sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==
   dependencies:
     asynckit "^0.4.0"
-    combined-stream "^1.0.6"
+    combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
 format@^0.2.0:
@@ -11262,17 +11557,6 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@10.3.10:
-  version "10.3.10"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
-  integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
-  dependencies:
-    foreground-child "^3.1.0"
-    jackspeak "^2.3.5"
-    minimatch "^9.0.1"
-    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
-    path-scurry "^1.10.1"
-
 glob@7.1.7:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
@@ -11320,12 +11604,10 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.19.0:
-  version "13.23.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.23.0.tgz#ef31673c926a0976e1f61dab4dca57e0c0a8af02"
-  integrity sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==
-  dependencies:
-    type-fest "^0.20.2"
+globals@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-14.0.0.tgz#898d7413c29babcf6bafe56fcadded858ada724e"
+  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
 
 globalthis@^1.0.3:
   version "1.0.3"
@@ -11334,6 +11616,14 @@ globalthis@^1.0.3:
   dependencies:
     define-properties "^1.1.3"
 
+globalthis@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
 globalyzer@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/globalyzer/-/globalyzer-0.1.0.tgz#cb76da79555669a1519d5a8edf093afaa0bf1465"
@@ -11467,6 +11757,11 @@ has-proto@^1.0.1:
   resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
   integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
 
+has-proto@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
 has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
@@ -11511,6 +11806,13 @@ hasown@^2.0.0, hasown@^2.0.1:
   dependencies:
     function-bind "^1.1.2"
 
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 hast-util-heading-rank@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz#2d5c6f2807a7af5c45f74e623498dd6054d2aba8"
@@ -11642,7 +11944,7 @@ html-entities@^2.1.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.5.2.tgz#201a3cf95d3a15be7099521620d19dfb4f65359f"
   integrity sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==
 
-html-escaper@^2.0.0:
+html-escaper@^2.0.0, html-escaper@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
@@ -11727,14 +12029,14 @@ http-shutdown@^1.2.2:
   resolved "https://registry.yarnpkg.com/http-shutdown/-/http-shutdown-1.2.2.tgz#41bc78fc767637c4c95179bc492f312c0ae64c5f"
   integrity sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==
 
-http-signature@~1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
-  integrity sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==
+http-signature@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.4.0.tgz#dee5a9ba2bf49416abc544abd6d967f6a94c8c3f"
+  integrity sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==
   dependencies:
     assert-plus "^1.0.0"
     jsprim "^2.0.2"
-    sshpk "^1.14.1"
+    sshpk "^1.18.0"
 
 https-browserify@^1.0.0:
   version "1.0.0"
@@ -12093,20 +12395,27 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-ci@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
-  integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
-  dependencies:
-    ci-info "^3.2.0"
-
-is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.13.1, is-core-module@^2.5.0:
+is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.5.0:
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
   integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
   dependencies:
     hasown "^2.0.0"
 
+is-core-module@^2.15.1:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.1.tgz#a7363a25bee942fefab0de13bf6aa372c82dcc37"
+  integrity sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==
+  dependencies:
+    hasown "^2.0.2"
+
+is-data-view@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.1.tgz#4b4d3a511b70f3dc26d42c03ca9ca515d847759f"
+  integrity sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==
+  dependencies:
+    is-typed-array "^1.1.13"
+
 is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
@@ -12206,6 +12515,11 @@ is-negative-zero@^2.0.2:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
   integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
 
+is-negative-zero@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
+  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
+
 is-number-object@^1.0.4:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
@@ -12242,7 +12556,7 @@ is-path-inside@^2.1.0:
   dependencies:
     path-is-inside "^1.0.2"
 
-is-path-inside@^3.0.2, is-path-inside@^3.0.3:
+is-path-inside@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
@@ -12262,7 +12576,7 @@ is-plain-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
   integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
 
-is-plain-object@5.0.0:
+is-plain-object@5.0.0, is-plain-object@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
   integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
@@ -12309,6 +12623,13 @@ is-shared-array-buffer@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-shared-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
+  integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
+  dependencies:
+    call-bind "^1.0.7"
+
 is-stream@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
@@ -12495,10 +12816,10 @@ it-parallel-batch@^1.0.9:
   dependencies:
     it-batch "^1.0.9"
 
-iterator.prototype@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
-  integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+iterator.prototype@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.3.tgz#016c2abe0be3bbdb8319852884f60908ac62bf9c"
+  integrity sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==
   dependencies:
     define-properties "^1.2.1"
     get-intrinsic "^1.2.1"
@@ -12506,7 +12827,7 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
-jackspeak@^2.3.5, jackspeak@^2.3.6:
+jackspeak@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
   integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
@@ -13183,7 +13504,7 @@ keccak@^3.0.0, keccak@^3.0.1, keccak@^3.0.3:
     node-gyp-build "^4.2.0"
     readable-stream "^3.6.0"
 
-keyv@^4.5.3:
+keyv@^4.5.3, keyv@^4.5.4:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
   integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
@@ -14337,14 +14658,7 @@ minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==
 
-minimatch@9.0.3:
-  version "9.0.3"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
-  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
-  dependencies:
-    brace-expansion "^2.0.1"
-
-minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -14426,10 +14740,10 @@ mri@^1.1.0, mri@^1.2.0:
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
   integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
 
-mrmime@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
-  integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
+mrmime@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.0.tgz#151082a6e06e59a9a39b46b3e14d5cfe92b3abb4"
+  integrity sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==
 
 ms@2.0.0:
   version "2.0.0"
@@ -14558,28 +14872,28 @@ next-tick@1, next-tick@^1.1.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
-next@^14.2.13:
-  version "14.2.13"
-  resolved "https://registry.yarnpkg.com/next/-/next-14.2.13.tgz#32da2ee0afbe729e2d4a467c3570def90e1c974d"
-  integrity sha512-BseY9YNw8QJSwLYD7hlZzl6QVDoSFHL/URN5K64kVEVpCsSOWeyjbIGK+dZUaRViHTaMQX8aqmnn0PHBbGZezg==
+next@15.0.2:
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/next/-/next-15.0.2.tgz#4a2224c007856118010b8cef5e9b2383cd743388"
+  integrity sha512-rxIWHcAu4gGSDmwsELXacqAPUk+j8dV/A9cDF5fsiCMpkBDYkO2AEaL1dfD+nNmDiU6QMCFN8Q30VEKapT9UHQ==
   dependencies:
-    "@next/env" "14.2.13"
-    "@swc/helpers" "0.5.5"
+    "@next/env" "15.0.2"
+    "@swc/counter" "0.1.3"
+    "@swc/helpers" "0.5.13"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001579"
-    graceful-fs "^4.2.11"
     postcss "8.4.31"
-    styled-jsx "5.1.1"
+    styled-jsx "5.1.6"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "14.2.13"
-    "@next/swc-darwin-x64" "14.2.13"
-    "@next/swc-linux-arm64-gnu" "14.2.13"
-    "@next/swc-linux-arm64-musl" "14.2.13"
-    "@next/swc-linux-x64-gnu" "14.2.13"
-    "@next/swc-linux-x64-musl" "14.2.13"
-    "@next/swc-win32-arm64-msvc" "14.2.13"
-    "@next/swc-win32-ia32-msvc" "14.2.13"
-    "@next/swc-win32-x64-msvc" "14.2.13"
+    "@next/swc-darwin-arm64" "15.0.2"
+    "@next/swc-darwin-x64" "15.0.2"
+    "@next/swc-linux-arm64-gnu" "15.0.2"
+    "@next/swc-linux-arm64-musl" "15.0.2"
+    "@next/swc-linux-x64-gnu" "15.0.2"
+    "@next/swc-linux-x64-musl" "15.0.2"
+    "@next/swc-win32-arm64-msvc" "15.0.2"
+    "@next/swc-win32-x64-msvc" "15.0.2"
+    sharp "^0.33.5"
 
 no-case@^3.0.4:
   version "3.0.4"
@@ -14778,44 +15092,35 @@ object.assign@^4.1.4, object.assign@^4.1.5:
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
-object.entries@^1.1.6, object.entries@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
-  integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-
-object.fromentries@^2.0.6, object.fromentries@^2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
-  integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
+object.entries@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
+  integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
-object.groupby@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.2.tgz#494800ff5bab78fd0eff2835ec859066e00192ec"
-  integrity sha512-bzBq58S+x+uo0VjurFT0UktpKHOZmv4/xePiOA1nbB9pMqpGK7rUPNgf+1YC+7mE+0HzhTMqNUuCqvKhj6FnBw==
+object.fromentries@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
   dependencies:
-    array.prototype.filter "^1.0.3"
-    call-bind "^1.0.5"
+    call-bind "^1.0.7"
     define-properties "^1.2.1"
-    es-abstract "^1.22.3"
-    es-errors "^1.0.0"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
 
-object.hasown@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.3.tgz#6a5f2897bb4d3668b8e79364f98ccf971bda55ae"
-  integrity sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==
+object.groupby@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
   dependencies:
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
 
-object.values@^1.1.6, object.values@^1.1.7:
+object.values@^1.1.6:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.7.tgz#617ed13272e7e1071b43973aa1655d9291b8442a"
   integrity sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==
@@ -14824,6 +15129,15 @@ object.values@^1.1.6, object.values@^1.1.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+object.values@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
+  integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
 objectorarray@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/objectorarray/-/objectorarray-1.0.5.tgz#2c05248bbefabd8f43ad13b41085951aac5e68a5"
@@ -15092,7 +15406,7 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-scurry@^1.10.1, path-scurry@^1.10.2:
+path-scurry@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.10.2.tgz#8f6357eb1239d5fa1da8b9f70e9c080675458ba7"
   integrity sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==
@@ -15404,11 +15718,16 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^2.3.1, prettier@^2.7.0:
+prettier@^2.3.1:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1, pretty-bytes@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@@ -15662,13 +15981,6 @@ qs@^6.10.0, qs@^6.10.3, qs@^6.11.2:
   dependencies:
     side-channel "^1.0.6"
 
-qs@~6.10.3:
-  version "6.10.5"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.5.tgz#974715920a80ff6a262264acd2c7e6c2a53282b4"
-  integrity sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==
-  dependencies:
-    side-channel "^1.0.4"
-
 query-string@7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328"
@@ -15821,7 +16133,14 @@ react-dom@16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
-"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.3.1:
+react-dom@19.0.0-rc-02c0e824-20241028:
+  version "19.0.0-rc-02c0e824-20241028"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0-rc-02c0e824-20241028.tgz#84999552fe7369275aa7800cf009372f59945ad1"
+  integrity sha512-LrZf3DfHL6Fs07wwlUCHrzFTCMM19yA99MvJpfLokN4I2nBAZvREGZjZAn8VPiSfN72+i9j1eL4wB8gC695F3Q==
+  dependencies:
+    scheduler "0.25.0-rc-02c0e824-20241028"
+
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0":
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -15950,7 +16269,12 @@ react@16.13.1:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
-"react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.3.1:
+react@19.0.0-rc-02c0e824-20241028:
+  version "19.0.0-rc-02c0e824-20241028"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.0.0-rc-02c0e824-20241028.tgz#d0f92b734b245471359fec4be89b3f26e23f3197"
+  integrity sha512-GbZ7hpPHQMiEu53BqEaPQVM/4GG4hARo+mqEEnx4rYporDvNvUjutiAFxYFSbu6sgHwcr7LeFv8htEOwALVA2A==
+
+"react@^16.8.0 || ^17.0.0 || ^18.0.0":
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -16310,11 +16634,6 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
-requireindex@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/requireindex/-/requireindex-1.2.0.tgz#3463cdb22ee151902635aa6c9535d4de9c2ef1ef"
-  integrity sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==
-
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
@@ -16377,7 +16696,7 @@ resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.2
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.4:
+resolve@^2.0.0-next.5:
   version "2.0.0-next.5"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
   integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
@@ -16404,11 +16723,6 @@ rfdc@^1.3.0:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
   integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
 
-rifm@^0.12.1:
-  version "0.12.1"
-  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.1.tgz#8fa77f45b7f1cda2a0068787ac821f0593967ac4"
-  integrity sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==
-
 rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -16416,7 +16730,7 @@ rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.0, rimraf@^3.0.2:
+rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -16572,6 +16886,16 @@ safe-array-concat@^1.1.0:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
+safe-array-concat@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
+  integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
+    has-symbols "^1.0.3"
+    isarray "^2.0.5"
+
 safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@^5.2.1, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -16642,6 +16966,11 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
+scheduler@0.25.0-rc-02c0e824-20241028:
+  version "0.25.0-rc-02c0e824-20241028"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0-rc-02c0e824-20241028.tgz#3e1beda3dc0a9e92b90b28f2df9f3fd2f0597ed3"
+  integrity sha512-GysnKjmMSaWcwsKTLzeJO0IhU3EyIiC0ivJKE6yDNLqt3IMxDByx8b6lSNXRNdN+ULUY0WLLjSPaZ0LuU/GnTg==
+
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@@ -16854,6 +17183,16 @@ set-function-name@^2.0.0, set-function-name@^2.0.1:
     functions-have-names "^1.2.3"
     has-property-descriptors "^1.0.0"
 
+set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
 setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
@@ -16886,6 +17225,35 @@ sharp@^0.32.6:
     tar-fs "^3.0.4"
     tunnel-agent "^0.6.0"
 
+sharp@^0.33.5:
+  version "0.33.5"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.33.5.tgz#13e0e4130cc309d6a9497596715240b2ec0c594e"
+  integrity sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==
+  dependencies:
+    color "^4.2.3"
+    detect-libc "^2.0.3"
+    semver "^7.6.3"
+  optionalDependencies:
+    "@img/sharp-darwin-arm64" "0.33.5"
+    "@img/sharp-darwin-x64" "0.33.5"
+    "@img/sharp-libvips-darwin-arm64" "1.0.4"
+    "@img/sharp-libvips-darwin-x64" "1.0.4"
+    "@img/sharp-libvips-linux-arm" "1.0.5"
+    "@img/sharp-libvips-linux-arm64" "1.0.4"
+    "@img/sharp-libvips-linux-s390x" "1.0.4"
+    "@img/sharp-libvips-linux-x64" "1.0.4"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
+    "@img/sharp-linux-arm" "0.33.5"
+    "@img/sharp-linux-arm64" "0.33.5"
+    "@img/sharp-linux-s390x" "0.33.5"
+    "@img/sharp-linux-x64" "0.33.5"
+    "@img/sharp-linuxmusl-arm64" "0.33.5"
+    "@img/sharp-linuxmusl-x64" "0.33.5"
+    "@img/sharp-wasm32" "0.33.5"
+    "@img/sharp-win32-ia32" "0.33.5"
+    "@img/sharp-win32-x64" "0.33.5"
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -16939,14 +17307,14 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
-sirv@^1.0.7:
-  version "1.0.19"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
-  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+sirv@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
+  integrity sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==
   dependencies:
-    "@polka/url" "^1.0.0-next.20"
-    mrmime "^1.0.0"
-    totalist "^1.0.0"
+    "@polka/url" "^1.0.0-next.24"
+    mrmime "^2.0.0"
+    totalist "^3.0.0"
 
 sisteransi@^1.0.5:
   version "1.0.5"
@@ -17109,10 +17477,10 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-sshpk@^1.14.1:
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.17.0.tgz#578082d92d4fe612b13007496e543fa0fbcbe4c5"
-  integrity sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==
+sshpk@^1.18.0:
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.18.0.tgz#1663e55cddf4d688b86a46b77f0d5fe363aba028"
+  integrity sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==
   dependencies:
     asn1 "~0.2.3"
     assert-plus "^1.0.0"
@@ -17258,7 +17626,34 @@ string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.8:
+string.prototype.includes@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz#eceef21283640761a81dbe16d6c7171a4edf7d92"
+  integrity sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+
+string.prototype.matchall@^4.0.11:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz#1092a72c59268d2abaad76582dccc687c0297e0a"
+  integrity sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.7"
+    regexp.prototype.flags "^1.5.2"
+    set-function-name "^2.0.2"
+    side-channel "^1.0.6"
+
+string.prototype.matchall@^4.0.6:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz#a1553eb532221d4180c51581d6072cd65d1ee100"
   integrity sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==
@@ -17273,6 +17668,14 @@ string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.8:
     set-function-name "^2.0.0"
     side-channel "^1.0.4"
 
+string.prototype.repeat@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz#e90872ee0308b29435aa26275f6e1b762daee01a"
+  integrity sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 string.prototype.trim@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz#f9ac6f8af4bd55ddfa8895e6aea92a96395393bd"
@@ -17282,6 +17685,16 @@ string.prototype.trim@^1.2.8:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+string.prototype.trim@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
+  integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.0"
+    es-object-atoms "^1.0.0"
+
 string.prototype.trimend@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz#1bb3afc5008661d73e2dc015cd4853732d6c471e"
@@ -17291,6 +17704,15 @@ string.prototype.trimend@^1.0.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+string.prototype.trimend@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
+  integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
 string.prototype.trimstart@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz#d4cdb44b83a4737ffbac2d406e405d43d0184298"
@@ -17300,6 +17722,15 @@ string.prototype.trimstart@^1.0.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
 string_decoder@^1.1.1, string_decoder@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
@@ -17446,6 +17877,13 @@ styled-jsx@5.1.1:
   dependencies:
     client-only "0.0.1"
 
+styled-jsx@5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.6.tgz#83b90c077e6c6a80f7f5e8781d0f311b2fe41499"
+  integrity sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==
+  dependencies:
+    client-only "0.0.1"
+
 stylis@4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
@@ -17539,6 +17977,14 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+synckit@^0.9.1:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.2.tgz#a3a935eca7922d48b9e7d6c61822ee6c3ae4ec62"
+  integrity sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==
+  dependencies:
+    "@pkgr/core" "^0.1.0"
+    tslib "^2.6.2"
+
 table-layout@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/table-layout/-/table-layout-1.0.2.tgz#c4038a1853b0136d63365a734b6931cf4fad4a04"
@@ -17674,11 +18120,6 @@ text-encoding-utf-8@^1.0.2:
   resolved "https://registry.yarnpkg.com/text-encoding-utf-8/-/text-encoding-utf-8-1.0.2.tgz#585b62197b0ae437e3c7b5d0af27ac1021e10d13"
   integrity sha512-8bw4MY9WjdsD2aMtO0OzOCY3pXGYNx2d2FfHRVUKkiCPDWjKuOlhLVASS+pD7VkLTVjW268LYJHwsnPFlBpbAg==
 
-text-table@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
-  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
-
 thread-stream@^0.15.1:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-0.15.2.tgz#fb95ad87d2f1e28f07116eb23d85aba3bc0425f4"
@@ -17756,12 +18197,22 @@ tinyspy@^2.2.0:
   resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-2.2.1.tgz#117b2342f1f38a0dbdcc73a50a454883adf861d1"
   integrity sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==
 
-tmp@~0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
+tldts-core@^6.1.58:
+  version "6.1.58"
+  resolved "https://registry.yarnpkg.com/tldts-core/-/tldts-core-6.1.58.tgz#f0b5c1fcb2e214f558c7cb380fb1e6f4b2459d8b"
+  integrity sha512-dR936xmhBm7AeqHIhCWwK765gZ7dFyL+IqLSFAjJbFlUXGMLCb8i2PzlzaOuWBuplBTaBYseSb565nk/ZEM0Bg==
+
+tldts@^6.1.32:
+  version "6.1.58"
+  resolved "https://registry.yarnpkg.com/tldts/-/tldts-6.1.58.tgz#63d211f46f2c17d69d4cedf0c4c19423a608874f"
+  integrity sha512-MQJrJhjHOYGYb8DobR6Y4AdDbd4TYkyQ+KBDVc5ODzs1cbrvPpfN1IemYi9jfipJ/vR1YWvrDli0hg1y19VRoA==
   dependencies:
-    rimraf "^3.0.0"
+    tldts-core "^6.1.58"
+
+tmp@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae"
+  integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==
 
 tmpl@1.0.5:
   version "1.0.5"
@@ -17795,12 +18246,12 @@ toml@^3.0.0:
   resolved "https://registry.yarnpkg.com/toml/-/toml-3.0.0.tgz#342160f1af1904ec9d204d03a5d61222d762c5ee"
   integrity sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==
 
-totalist@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
-  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+totalist@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
+  integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
 
-tough-cookie@^4.1.2, tough-cookie@^4.1.3:
+tough-cookie@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
   integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
@@ -17810,6 +18261,13 @@ tough-cookie@^4.1.2, tough-cookie@^4.1.3:
     universalify "^0.2.0"
     url-parse "^1.5.3"
 
+tough-cookie@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-5.0.0.tgz#6b6518e2b5c070cf742d872ee0f4f92d69eac1af"
+  integrity sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==
+  dependencies:
+    tldts "^6.1.32"
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -17836,6 +18294,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+tree-kill@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
 trim-lines@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
@@ -17863,7 +18326,7 @@ truncate-utf8-bytes@^1.0.0:
   dependencies:
     utf8-byte-length "^1.0.1"
 
-ts-api-utils@^1.0.1, ts-api-utils@^1.3.0:
+ts-api-utils@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
   integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
@@ -17941,7 +18404,7 @@ tsconfig-paths@^4.0.0, tsconfig-paths@^4.1.2, tsconfig-paths@^4.2.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@1.14.1, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@1.14.1, tslib@^1.13.0, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -17956,12 +18419,10 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
-tsutils@^3.21.0:
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
-  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
-  dependencies:
-    tslib "^1.8.1"
+tslib@^2.6.2:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
 
 tty-browserify@^0.0.1:
   version "0.0.1"
@@ -18017,11 +18478,6 @@ type-fest@^0.18.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
   integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
 
-type-fest@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
-  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
-
 type-fest@^0.21.3:
   version "0.21.3"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
@@ -18076,7 +18532,7 @@ typechain@^8.3.2:
     ts-command-line-args "^2.2.0"
     ts-essentials "^7.0.1"
 
-typed-array-buffer@^1.0.1:
+typed-array-buffer@^1.0.1, typed-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
   integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
@@ -18095,6 +18551,17 @@ typed-array-byte-length@^1.0.0:
     has-proto "^1.0.1"
     is-typed-array "^1.1.10"
 
+typed-array-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
+  integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
 typed-array-byte-offset@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz#cbbe89b51fdef9cd6aaf07ad4707340abbc4ea0b"
@@ -18106,6 +18573,18 @@ typed-array-byte-offset@^1.0.0:
     has-proto "^1.0.1"
     is-typed-array "^1.1.10"
 
+typed-array-byte-offset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
+  integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
 typed-array-length@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
@@ -18115,6 +18594,18 @@ typed-array-length@^1.0.4:
     for-each "^0.3.3"
     is-typed-array "^1.1.9"
 
+typed-array-length@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
+  integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+
 typeforce@^1.18.0:
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/typeforce/-/typeforce-1.18.0.tgz#d7416a2c5845e085034d70fcc5b6cc4a90edbfdc"
@@ -18693,19 +19184,23 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
-webpack-bundle-analyzer@4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz#33c1c485a7fcae8627c547b5c3328b46de733c66"
-  integrity sha512-j9b8ynpJS4K+zfO5GGwsAcQX4ZHpWV+yRiHDiL+bE0XHJ8NiPYLTNVQdlFYWxtpg9lfAQNlwJg16J9AJtFSXRg==
+webpack-bundle-analyzer@4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz#84b7473b630a7b8c21c741f81d8fe4593208b454"
+  integrity sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==
   dependencies:
+    "@discoveryjs/json-ext" "0.5.7"
     acorn "^8.0.4"
     acorn-walk "^8.0.0"
-    chalk "^4.1.0"
     commander "^7.2.0"
+    debounce "^1.2.1"
+    escape-string-regexp "^4.0.0"
     gzip-size "^6.0.0"
-    lodash "^4.17.20"
+    html-escaper "^2.0.2"
+    is-plain-object "^5.0.0"
     opener "^1.5.2"
-    sirv "^1.0.7"
+    picocolors "^1.0.0"
+    sirv "^2.0.3"
     ws "^7.3.1"
 
 webpack-dev-middleware@^6.1.1:
@@ -18903,6 +19398,17 @@ which-typed-array@^1.1.14, which-typed-array@^1.1.2, which-typed-array@^1.1.9:
     gopd "^1.0.1"
     has-tostringtag "^1.0.1"
 
+which-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
+  integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.2"
+
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"

From 67454b1e1ec081b0d4f2391ba9b36406c7dbada4 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Tue, 19 Nov 2024 08:57:11 +0100
Subject: [PATCH 02/47] Fix: run prettier

---
 src/components/common/FileUpload/styles.module.css         | 4 +++-
 src/components/dashboard/StakingBanner/styles.module.css   | 2 +-
 src/components/safe-apps/NativeSwapsCard/styles.module.css | 4 +++-
 src/components/safe-apps/SafeAppCard/styles.module.css     | 4 +++-
 src/styles/globals.css                                     | 4 +++-
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/common/FileUpload/styles.module.css b/src/components/common/FileUpload/styles.module.css
index 1225fc1433..2189462c0f 100644
--- a/src/components/common/FileUpload/styles.module.css
+++ b/src/components/common/FileUpload/styles.module.css
@@ -9,7 +9,9 @@
   margin: var(--space-3) 0;
   background: var(--color-secondary-background);
   color: var(--color-primary-light);
-  transition: border 0.5s, background 0.5s;
+  transition:
+    border 0.5s,
+    background 0.5s;
 }
 
 .verticalLine {
diff --git a/src/components/dashboard/StakingBanner/styles.module.css b/src/components/dashboard/StakingBanner/styles.module.css
index 4a786e8db4..2d16936624 100644
--- a/src/components/dashboard/StakingBanner/styles.module.css
+++ b/src/components/dashboard/StakingBanner/styles.module.css
@@ -34,7 +34,7 @@
 .gradientBackground {
   width: 100%;
   height: 100%;
-  background: linear-gradient(225deg, #D7F6FF, #B0FFC9);
+  background: linear-gradient(225deg, #d7f6ff, #b0ffc9);
   position: absolute;
   top: 0;
   left: 0;
diff --git a/src/components/safe-apps/NativeSwapsCard/styles.module.css b/src/components/safe-apps/NativeSwapsCard/styles.module.css
index 68b767d1a5..e18fc4626c 100644
--- a/src/components/safe-apps/NativeSwapsCard/styles.module.css
+++ b/src/components/safe-apps/NativeSwapsCard/styles.module.css
@@ -1,5 +1,7 @@
 .container {
-  transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
+  transition:
+    background-color 0.3s ease-in-out,
+    border 0.3s ease-in-out;
   border: 1px solid transparent;
   height: 100%;
 }
diff --git a/src/components/safe-apps/SafeAppCard/styles.module.css b/src/components/safe-apps/SafeAppCard/styles.module.css
index 5062056890..e693fc35df 100644
--- a/src/components/safe-apps/SafeAppCard/styles.module.css
+++ b/src/components/safe-apps/SafeAppCard/styles.module.css
@@ -1,5 +1,7 @@
 .safeAppContainer {
-  transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
+  transition:
+    background-color 0.3s ease-in-out,
+    border 0.3s ease-in-out;
   border: 1px solid transparent;
 }
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 3535f96c59..5e9e8d12cf 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -16,7 +16,9 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: DM Sans, sans-serif;
+  font-family:
+    DM Sans,
+    sans-serif;
   background-color: var(--color-background-paper);
 }
 

From ee8d13b806dfe4a91aba3e0d7fdd97ad87d5463c Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:28:00 +0100
Subject: [PATCH 03/47] Tests: Add proposer tests (#4536)

---
 cypress.config.js                             |   1 +
 cypress/e2e/happypath_2/proposers.cy.js       |  44 +++++++
 cypress/e2e/pages/create_tx.pages.js          |   4 +-
 cypress/e2e/pages/proposers.pages.js          | 124 ++++++++++++++++++
 cypress/e2e/regression/proposers.cy.js        | 100 ++++++++++++++
 cypress/fixtures/safes/static.json            |   3 +-
 cypress/support/localstorage_data.js          |   3 +
 .../settings/ProposersList/index.tsx          |   2 +-
 .../components/DeleteProposerDialog.tsx       |   3 +-
 .../components/EditProposerDialog.tsx         |   7 +-
 .../proposers/components/TxProposalChip.tsx   |   2 +-
 .../proposers/components/UpsertProposer.tsx   |   1 +
 12 files changed, 288 insertions(+), 6 deletions(-)
 create mode 100644 cypress/e2e/happypath_2/proposers.cy.js
 create mode 100644 cypress/e2e/pages/proposers.pages.js
 create mode 100644 cypress/e2e/regression/proposers.cy.js

diff --git a/cypress.config.js b/cypress.config.js
index f04876345f..9db6791a57 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -67,6 +67,7 @@ export default defineConfig({
     hideXHR: true,
     defaultCommandTimeout: 10000,
     pageLoadTimeout: 60000,
+    numTestsKeptInMemory: 0,
   },
 
   chromeWebSecurity: false,
diff --git a/cypress/e2e/happypath_2/proposers.cy.js b/cypress/e2e/happypath_2/proposers.cy.js
new file mode 100644
index 0000000000..725d84fff9
--- /dev/null
+++ b/cypress/e2e/happypath_2/proposers.cy.js
@@ -0,0 +1,44 @@
+import * as constants from '../../support/constants.js'
+import * as owner from '../pages/owners.pages.js'
+import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as wallet from '../../support/utils/wallet.js'
+import * as navigation from '../pages/navigation.page.js'
+import * as proposer from '../pages/proposers.pages.js'
+
+let staticSafes = []
+const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
+const signer = walletCredentials.OWNER_4_PRIVATE_KEY
+const signer3 = walletCredentials.OWNER_3_PRIVATE_KEY
+const proposerAddress = 'sep:0xC16D...6fED'
+const proposerAddress2 = '0x8eeC...2a3b'
+const proposerName2 = 'Proposer 2'
+const changedProposerName = 'Changed proposer name'
+
+describe('Happy path Proposers tests', () => {
+  before(async () => {
+    staticSafes = await getSafes(CATEGORIES.static)
+  })
+
+  beforeEach(() => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_31)
+    cy.contains(owner.safeAccountNonceStr, { timeout: 10000 })
+    wallet.connectSigner(signer)
+  })
+
+  it('Verify that editing a proposer is only possible for the proposer created by the creator', () => {
+    navigation.clickOnWalletExpandMoreIcon()
+    navigation.clickOnDisconnectBtn()
+    wallet.connectSigner(signer3)
+    proposer.verifyEditProposerBtnDisabled(proposerAddress)
+
+    proposer.clickOnEditProposerBtn(proposerAddress2)
+    proposer.enterProposerName(changedProposerName)
+    proposer.clickOnSubmitProposerBtn()
+    proposer.checkProposerData(0, [changedProposerName])
+
+    proposer.clickOnEditProposerBtn(proposerAddress2)
+    proposer.enterProposerName(proposerName2)
+    proposer.clickOnSubmitProposerBtn()
+    proposer.checkProposerData(0, [proposerName2])
+  })
+})
diff --git a/cypress/e2e/pages/create_tx.pages.js b/cypress/e2e/pages/create_tx.pages.js
index 91a4efcb73..6ccbd4fd1c 100644
--- a/cypress/e2e/pages/create_tx.pages.js
+++ b/cypress/e2e/pages/create_tx.pages.js
@@ -28,6 +28,8 @@ const advancedDetails = '[data-testid="tx-advanced-details"]'
 const baseGas = '[data-testid="tx-bas-gas"]'
 const requiredConfirmation = '[data-testid="required-confirmations"]'
 export const txDate = '[data-testid="tx-date"]'
+export const proposalStatus = '[data-testid="proposal-status"]'
+export const txSigner = '[data-testid="signer"]'
 const spamTokenWarningIcon = '[data-testid="warning"]'
 const untrustedTokenWarningModal = '[data-testid="untrusted-token-warning"]'
 const sendTokensBtn = '[data-testid="send-tokens-btn"]'
@@ -40,7 +42,7 @@ const filterTokenInput = '[data-testid="token-input"]'
 const filterNonceInput = '[data-testid="nonce-input"]'
 const filterApplyBtn = '[data-testid="apply-btn"]'
 const filterClearBtn = '[data-testid="clear-btn"]'
-const addressItem = '[data-testid="address-item"]'
+export const addressItem = '[data-testid="address-item"]'
 const radioSelector = 'div[role="radiogroup"]'
 const rejectTxBtn = '[data-testid="reject-btn"]'
 const deleteTxModalBtn = '[data-testid="delete-tx-btn"]'
diff --git a/cypress/e2e/pages/proposers.pages.js b/cypress/e2e/pages/proposers.pages.js
new file mode 100644
index 0000000000..e02d74cd08
--- /dev/null
+++ b/cypress/e2e/pages/proposers.pages.js
@@ -0,0 +1,124 @@
+import * as constants from '../../support/constants'
+import * as main from './main.page'
+import * as createWallet from './create_wallet.pages'
+import * as navigation from './navigation.page'
+import * as addressBook from './address_book.page'
+import * as batch from './batches.pages'
+import * as create_tx from './create_tx.pages'
+
+export const proposersSection = '[data-testid="proposer-section"]'
+const addProposerBtn = '[data-testid="add-proposer-btn"]'
+
+const deleteProposerBtn = '[data-testid="delete-proposer-btn"]'
+const editProposerBtn = '[data-testid="edit-proposer-btn"]'
+const confrimDeleteProposerBtn = '[data-testid="confirm-delete-proposer-btn"]'
+const rejectDeleteProposerBtn = '[data-testid="reject-delete-proposer-btn"]'
+const submitProposerBtn = '[data-testid="submit-proposer-btn"]'
+
+const safeAsProposerMessage = 'Cannot add Safe Account itself as proposer'
+const proposedTxMessage =
+  'This transaction was created by a Proposer. Please review and either confirm or reject it. Once confirmed, it can be finalized and executed'
+
+export function verifyPropsalStatusExists() {
+  cy.get(create_tx.proposalStatus).should('exist')
+}
+
+export function verifyProposerInTxActionList(address) {
+  cy.get(create_tx.txSigner).within(() => {
+    cy.contains(address)
+    cy.get('div[style]')
+      .filter((index, element) => {
+        return element.style.backgroundImage.includes('url')
+      })
+      .should('exist')
+  })
+}
+export function verifyProposedTxMsgVisible() {
+  cy.contains(proposedTxMessage).should('be.visible')
+}
+
+export function verifyDeleteProposerBtnIsDisabled() {
+  cy.get(deleteProposerBtn).should('exist').and('be.disabled')
+}
+
+export function clickOnAddProposerBtn() {
+  cy.get(addProposerBtn).click()
+}
+
+export function enterProposerName(name) {
+  addressBook.typeInNameInput(name)
+}
+export function enterProposerData(address, name) {
+  addressBook.typeInAddress(address)
+  enterProposerName(name)
+}
+
+export function clickOnSubmitProposerBtn() {
+  cy.get(submitProposerBtn).click()
+}
+
+export function checkCreatorAddress(index, data) {
+  cy.get(proposersSection).within(() => {
+    cy.get(addressBook.tableRow)
+      .eq(index)
+      .within(() => {
+        Object.entries(data).forEach(([key, value], i) => {
+          cy.get('td').eq(1).should('contain.text', value)
+        })
+      })
+  })
+}
+
+export function checkProposerData(index, data) {
+  cy.get(proposersSection).within(() => {
+    cy.get(addressBook.tableRow)
+      .eq(index)
+      .within(() => {
+        Object.entries(data).forEach(([key, value], i) => {
+          cy.get('td').eq(0).should('contain.text', value)
+        })
+      })
+  })
+}
+
+export function clickOnEditProposerBtn(address) {
+  cy.get(proposersSection).within(() => {
+    cy.get(addressBook.tableRow).contains(address).parents('tr').find(editProposerBtn).click()
+  })
+}
+
+export function verifyEditProposerBtnDisabled(address) {
+  cy.get(proposersSection).within(() => {
+    cy.get(addressBook.tableRow).contains(address).parents('tr').find(editProposerBtn).should('be.disabled')
+  })
+}
+
+export function confirmProposerDeletion(index) {
+  cy.get(confrimDeleteProposerBtn).eq(index).click()
+}
+
+export function deleteAllProposers() {
+  cy.get('body').then(($body) => {
+    if ($body.find(deleteProposerBtn).length > 0) {
+      cy.get(deleteProposerBtn).then(($items) => {
+        for (let i = 0; i < $items.length; i++) {
+          cy.wrap($items[i]).click({ force: true })
+          confirmProposerDeletion(0)
+        }
+      })
+    }
+    main.verifyElementsCount(deleteProposerBtn, 0)
+  })
+}
+
+export function verifyAddProposerBtnIsDisabled() {
+  cy.get(addProposerBtn).should('exist').and('be.disabled')
+}
+
+export function checkSafeAsProposerErrorMessage() {
+  cy.contains('label', safeAsProposerMessage).should('exist')
+}
+
+export function verifyBatchDoesNotExist() {
+  main.verifyElementsCount(batch.batchTxTopBar, 0)
+}
diff --git a/cypress/e2e/regression/proposers.cy.js b/cypress/e2e/regression/proposers.cy.js
new file mode 100644
index 0000000000..bdfdded36e
--- /dev/null
+++ b/cypress/e2e/regression/proposers.cy.js
@@ -0,0 +1,100 @@
+import * as constants from '../../support/constants.js'
+import * as main from '../pages/main.page.js'
+import * as owner from '../pages/owners.pages.js'
+import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as wallet from '../../support/utils/wallet.js'
+import * as navigation from '../pages/navigation.page.js'
+import * as ls from '../../support/localstorage_data.js'
+import * as proposer from '../pages/proposers.pages.js'
+
+let staticSafes = []
+const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
+const signer = walletCredentials.OWNER_4_PRIVATE_KEY
+const signer2 = walletCredentials.OWNER_1_PRIVATE_KEY
+const proposerAddress = 'sep:0xC16D...6fED'
+const proposerAddress2 = '0x8eeC...2a3b'
+const creatorAddress = 'sep:0xC16D...6fED'
+const proposerName = 'Proposer 1'
+const proposerNameAD = 'AD Proposer1'
+const proposedTx =
+  '&id=multisig_0x09725D3c2f9bE905F8f9f1b11a771122cf9C9f35_0xd70f2f8b31ae98a7e3064f6cdb437e71d3df083a0709fb82c915fa82767a19eb'
+
+describe('Proposers tests', () => {
+  before(async () => {
+    staticSafes = await getSafes(CATEGORIES.static)
+  })
+
+  beforeEach(() => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_31)
+    cy.contains(owner.safeAccountNonceStr, { timeout: 10000 })
+    wallet.connectSigner(signer)
+  })
+
+  it('Verify the proposers section on the Set up in the settings when there are no proposers', () => {
+    main.verifyElementsCount(proposer.proposersSection, 1)
+  })
+
+  it('Verify the "Add proposers" button is disabled for non-owner/disconnected users', () => {
+    navigation.clickOnWalletExpandMoreIcon()
+    navigation.clickOnDisconnectBtn()
+    proposer.verifyAddProposerBtnIsDisabled()
+    wallet.connectSigner(signer2)
+    proposer.verifyAddProposerBtnIsDisabled()
+  })
+
+  it('Verify that a proposer cannot be the safe itself', () => {
+    proposer.clickOnAddProposerBtn()
+    proposer.enterProposerData(staticSafes.SEP_STATIC_SAFE_31.substring(4), main.generateRandomString(5))
+    proposer.checkSafeAsProposerErrorMessage()
+  })
+
+  it('Verify that a proposer address must be checksummed', () => {
+    proposer.clickOnAddProposerBtn()
+    proposer.enterProposerData(
+      staticSafes.SEP_STATIC_SAFE_31.substring(4).replace('E', 'e'),
+      main.generateRandomString(5),
+    )
+    owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.invalidChecksum)
+  })
+
+  it('Verify a proposer Creator is shown in the table', () => {
+    proposer.checkCreatorAddress(0, [creatorAddress])
+  })
+
+  it('Verify non-creators of a proposers cannot edit or delete it', () => {
+    navigation.clickOnWalletExpandMoreIcon()
+    navigation.clickOnDisconnectBtn()
+    wallet.connectSigner(signer2)
+    proposer.verifyDeleteProposerBtnIsDisabled()
+    proposer.verifyEditProposerBtnDisabled(proposerAddress)
+  })
+
+  it('Verify that the address book name of the proposers overwrites the name given during its creation', () => {
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__addressBook, ls.addressBookData.proposers)
+    cy.reload()
+    cy.contains(owner.safeAccountNonceStr, { timeout: 10000 })
+    proposer.checkProposerData(0, [proposerNameAD])
+  })
+
+  it('Verify if the address book entry of propers name is removed, then the name given during its creation shows again', () => {
+    proposer.checkProposerData(0, [proposerName])
+  })
+
+  it('Verify Proposers cannot see the "Batched tx" button in the header', () => {
+    navigation.clickOnWalletExpandMoreIcon()
+    navigation.clickOnDisconnectBtn()
+    wallet.connectSigner(signer2)
+    proposer.verifyBatchDoesNotExist()
+  })
+
+  it('Verify a tx with the "proposal" status shows a message about being created by a proposer', () => {
+    cy.visit(constants.transactionUrl + staticSafes.SEP_STATIC_SAFE_31 + proposedTx)
+    proposer.verifyPropsalStatusExists()
+    proposer.verifyProposedTxMsgVisible()
+  })
+
+  it('Verify a tx with the "proposal" status shows the details of a proposer', () => {
+    cy.visit(constants.transactionUrl + staticSafes.SEP_STATIC_SAFE_31 + proposedTx)
+    proposer.verifyProposerInTxActionList(proposerAddress2)
+  })
+})
diff --git a/cypress/fixtures/safes/static.json b/cypress/fixtures/safes/static.json
index 7f55dd4785..cf07ed9bdc 100644
--- a/cypress/fixtures/safes/static.json
+++ b/cypress/fixtures/safes/static.json
@@ -30,5 +30,6 @@
   "SEP_STATIC_SAFE_27": "sep:0xC97FCf0B8890a5a7b1a1490d44Dc9EbE3cE04884",
   "MATIC_STATIC_SAFE_28": "matic:0xC96ee38f5A73C8A70b565CB8EA938D2aF913ee3B",
   "ZKSYNC_STATIC_SAFE_29": "zksync:0x950e07c80d7Bb754CcD84afE2b7751dc7Fd65D1f",
-  "SEP_STATIC_SAFE_30": "sep:0x2687E6643E189c1245EA8419e5e427809136021F"
+  "SEP_STATIC_SAFE_30": "sep:0x2687E6643E189c1245EA8419e5e427809136021F",
+  "SEP_STATIC_SAFE_31": "sep:0x09725D3c2f9bE905F8f9f1b11a771122cf9C9f35"
 }
diff --git a/cypress/support/localstorage_data.js b/cypress/support/localstorage_data.js
index 2463bc4b73..b4e236383d 100644
--- a/cypress/support/localstorage_data.js
+++ b/cypress/support/localstorage_data.js
@@ -280,6 +280,9 @@ export const batchData = {
   },
 }
 export const addressBookData = {
+  proposers: {
+    11155111: { '0xC16Db0251654C0a72E91B190d81eAD367d2C6fED': 'AD Proposer1' },
+  },
   sepoliaAddress1: {
     11155111: { '0x6a5602335a878ADDCa4BF63a050E34946B56B5bC': 'Owner1' },
   },
diff --git a/src/components/settings/ProposersList/index.tsx b/src/components/settings/ProposersList/index.tsx
index b71c3e490b..d35ccc76fa 100644
--- a/src/components/settings/ProposersList/index.tsx
+++ b/src/components/settings/ProposersList/index.tsx
@@ -83,7 +83,7 @@ const ProposersList = () => {
 
   return (
     <Paper sx={{ mt: 2 }}>
-      <Box display="flex" flexDirection="column" gap={2}>
+      <Box data-testid="proposer-section" display="flex" flexDirection="column" gap={2}>
         <Grid container spacing={3}>
           <Grid item lg={4} xs={12}>
             <Typography variant="h4" fontWeight={700}></Typography>
diff --git a/src/features/proposers/components/DeleteProposerDialog.tsx b/src/features/proposers/components/DeleteProposerDialog.tsx
index d7e69e571e..4ad41ef97c 100644
--- a/src/features/proposers/components/DeleteProposerDialog.tsx
+++ b/src/features/proposers/components/DeleteProposerDialog.tsx
@@ -172,13 +172,14 @@ const InternalDeleteProposer = ({ wallet, safeAddress, chainId, proposer }: Dele
         <Divider />
 
         <DialogActions sx={{ padding: 3, justifyContent: 'space-between' }}>
-          <Button size="small" variant="text" onClick={onCancel}>
+          <Button data-testid="reject-delete-proposer-btn" size="small" variant="text" onClick={onCancel}>
             No, keep it
           </Button>
 
           <CheckWallet checkNetwork={!isLoading}>
             {(isOk) => (
               <Button
+                data-testid="confirm-delete-proposer-btn"
                 size="small"
                 variant="danger"
                 onClick={onConfirm}
diff --git a/src/features/proposers/components/EditProposerDialog.tsx b/src/features/proposers/components/EditProposerDialog.tsx
index d42eb4f51c..52d0787126 100644
--- a/src/features/proposers/components/EditProposerDialog.tsx
+++ b/src/features/proposers/components/EditProposerDialog.tsx
@@ -29,7 +29,12 @@ const EditProposerDialog = ({ proposer }: { proposer: Delegate }) => {
               }
             >
               <span>
-                <IconButton onClick={() => setOpen(true)} size="small" disabled={!isOk || !canEdit}>
+                <IconButton
+                  data-testid="edit-proposer-btn"
+                  onClick={() => setOpen(true)}
+                  size="small"
+                  disabled={!isOk || !canEdit}
+                >
                   <SvgIcon component={EditIcon} inheritViewBox color="border" fontSize="small" />
                 </IconButton>
               </span>
diff --git a/src/features/proposers/components/TxProposalChip.tsx b/src/features/proposers/components/TxProposalChip.tsx
index ee77076164..3e9c3a65d9 100644
--- a/src/features/proposers/components/TxProposalChip.tsx
+++ b/src/features/proposers/components/TxProposalChip.tsx
@@ -18,7 +18,7 @@ const TxProposalChip = () => {
               gap={0.7}
             >
               <SvgIcon component={InfoIcon} inheritViewBox fontSize="small" />
-              <Typography variant="caption" fontWeight="bold">
+              <Typography data-testid="proposal-status" variant="caption" fontWeight="bold">
                 Proposal
               </Typography>
             </Typography>
diff --git a/src/features/proposers/components/UpsertProposer.tsx b/src/features/proposers/components/UpsertProposer.tsx
index 975135bd5d..2cea318c8d 100644
--- a/src/features/proposers/components/UpsertProposer.tsx
+++ b/src/features/proposers/components/UpsertProposer.tsx
@@ -202,6 +202,7 @@ const UpsertProposer = ({ onClose, onSuccess, proposer }: UpsertProposerProps) =
             <CheckWallet checkNetwork={!isLoading} allowProposer={false}>
               {(isOk) => (
                 <Button
+                  data-testid="submit-proposer-btn"
                   size="small"
                   variant="contained"
                   color="primary"

From abdae72c4105c13a893f2a3412ea1c841761a95d Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Wed, 20 Nov 2024 14:06:20 +0100
Subject: [PATCH 04/47] Chore: update cgw sdk to stable version

---
 package.json |  2 +-
 yarn.lock    | 39 +++++++--------------------------------
 2 files changed, 8 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index 5d621f26cd..470aa66ead 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "@safe-global/safe-apps-sdk": "^9.1.0",
     "@safe-global/safe-client-gateway-sdk": "v1.60.1",
     "@safe-global/safe-deployments": "1.37.12",
-    "@safe-global/safe-gateway-typescript-sdk": "3.22.3-beta.15",
+    "@safe-global/safe-gateway-typescript-sdk": "3.22.3",
     "@safe-global/safe-modules-deployments": "^2.2.1",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",
diff --git a/yarn.lock b/yarn.lock
index ad3e02154c..db1a5673cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4379,10 +4379,10 @@
   dependencies:
     semver "^7.6.2"
 
-"@safe-global/safe-gateway-typescript-sdk@3.22.3-beta.15":
-  version "3.22.3-beta.15"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.22.3-beta.15.tgz#83c7e784b7ee0d08104c2f1b7dc99f6cdc950683"
-  integrity sha512-6vAKyGualYDde0zpNaigDY9H7EMpccWPov9hw/itBwY+7JReWGYO2DC0yma48bqDyeipsAkrhvHBNx5TF2zY4Q==
+"@safe-global/safe-gateway-typescript-sdk@3.22.3":
+  version "3.22.3"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.22.3.tgz#85619769cf99d105d99221c94c2709912b731034"
+  integrity sha512-aDb/FpkJMZ2IvP5KULHXnCRVVYOhEEY4BAwrGfsuTXqp8g8s2oAsBoBYJfaN9rWI/QDkd5Wn3GTC0ZeOLW1NiQ==
 
 "@safe-global/safe-gateway-typescript-sdk@^3.5.3":
   version "3.21.2"
@@ -17599,16 +17599,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -17767,14 +17758,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -19605,7 +19589,7 @@ workbox-window@7.0.0:
     "@types/trusted-types" "^2.0.2"
     workbox-core "7.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -19623,15 +19607,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 436f99ef24ff364fcfe946c2a20e9e396cb9e989 Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Wed, 20 Nov 2024 19:25:55 +0100
Subject: [PATCH 05/47] Tests: Add proposers tests (#4542)

---
 cypress/e2e/happypath_2/proposers.cy.js       | 29 +++---
 cypress/e2e/pages/create_tx.pages.js          | 10 +++
 cypress/e2e/pages/nfts.pages.js               |  1 -
 cypress/e2e/pages/proposers.pages.js          | 77 +++++++++++-----
 cypress/e2e/pages/sidebar.pages.js            |  3 +-
 cypress/e2e/pages/transactions.page.js        | 10 +++
 .../e2e/regression/multichain_network.cy.js   |  3 -
 cypress/e2e/regression/proposers.cy.js        |  8 +-
 cypress/e2e/regression/proposers_2.cy.js      | 88 +++++++++++++++++++
 cypress/e2e/safe-apps/apps_list.cy.js         |  4 +-
 cypress/fixtures/safes/static.json            |  4 +-
 cypress/support/constants.js                  |  1 +
 cypress/support/utils/wallet.js               |  1 -
 src/components/tx/security/tenderly/index.tsx |  2 +
 14 files changed, 194 insertions(+), 47 deletions(-)
 create mode 100644 cypress/e2e/regression/proposers_2.cy.js

diff --git a/cypress/e2e/happypath_2/proposers.cy.js b/cypress/e2e/happypath_2/proposers.cy.js
index 725d84fff9..3b4eafe6a2 100644
--- a/cypress/e2e/happypath_2/proposers.cy.js
+++ b/cypress/e2e/happypath_2/proposers.cy.js
@@ -4,14 +4,17 @@ import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
 import * as navigation from '../pages/navigation.page.js'
 import * as proposer from '../pages/proposers.pages.js'
+import { getSafeDelegates } from '../../support/utils/cgw.js'
 
 let staticSafes = []
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
 const signer = walletCredentials.OWNER_4_PRIVATE_KEY
 const signer3 = walletCredentials.OWNER_3_PRIVATE_KEY
+const addedProposer = walletCredentials.OWNER_3_WALLET_ADDRESS
 const proposerAddress = 'sep:0xC16D...6fED'
 const proposerAddress2 = '0x8eeC...2a3b'
 const proposerName2 = 'Proposer 2'
+const proposerName = 'Proposer 1'
 const changedProposerName = 'Changed proposer name'
 
 describe('Happy path Proposers tests', () => {
@@ -19,26 +22,32 @@ describe('Happy path Proposers tests', () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
 
-  beforeEach(() => {
+  //TODO: Flaky due to UI retrieval issue - wip
+  it.skip('Verify that editing a proposer is only possible for the proposer created by the creator', () => {
     cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_31)
-    cy.contains(owner.safeAccountNonceStr, { timeout: 10000 })
-    wallet.connectSigner(signer)
-  })
-
-  it('Verify that editing a proposer is only possible for the proposer created by the creator', () => {
-    navigation.clickOnWalletExpandMoreIcon()
-    navigation.clickOnDisconnectBtn()
     wallet.connectSigner(signer3)
+    cy.contains(owner.safeAccountNonceStr, { timeout: 10000 })
     proposer.verifyEditProposerBtnDisabled(proposerAddress)
 
     proposer.clickOnEditProposerBtn(proposerAddress2)
     proposer.enterProposerName(changedProposerName)
     proposer.clickOnSubmitProposerBtn()
-    proposer.checkProposerData(0, [changedProposerName])
+    proposer.checkProposerData([changedProposerName])
 
     proposer.clickOnEditProposerBtn(proposerAddress2)
     proposer.enterProposerName(proposerName2)
     proposer.clickOnSubmitProposerBtn()
-    proposer.checkProposerData(0, [proposerName2])
+    proposer.checkProposerData([proposerName2])
+  })
+
+  it('Verify a proposer can be added', () => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_32)
+    wallet.connectSigner(signer)
+    cy.contains(owner.safeAccountNonceStr, { timeout: 10000 })
+    proposer.deleteAllProposers()
+    proposer.clickOnAddProposerBtn()
+    proposer.enterProposerData(addedProposer, proposerName)
+    proposer.clickOnSubmitProposerBtn()
+    proposer.verifyProposerSuccessMsgDisplayed()
   })
 })
diff --git a/cypress/e2e/pages/create_tx.pages.js b/cypress/e2e/pages/create_tx.pages.js
index 6ccbd4fd1c..65c1fe0ca8 100644
--- a/cypress/e2e/pages/create_tx.pages.js
+++ b/cypress/e2e/pages/create_tx.pages.js
@@ -47,6 +47,8 @@ const radioSelector = 'div[role="radiogroup"]'
 const rejectTxBtn = '[data-testid="reject-btn"]'
 const deleteTxModalBtn = '[data-testid="delete-tx-btn"]'
 const toggleUntrustedBtn = '[data-testid="toggle-untrusted"]'
+const simulateTxBtn = '[data-testid="simulate-btn"]'
+const simulateSuccess = '[data-testid="simulation-success-msg"]'
 
 const viewTransactionBtn = 'View transaction'
 const transactionDetailsTitle = 'Transaction details'
@@ -629,3 +631,11 @@ export function verifyBulkExecuteBtnIsDisabled() {
 export function toggleUntrustedTxs() {
   cy.get(toggleUntrustedBtn).click()
 }
+
+export function clickOnSimulateTxBtn() {
+  cy.get(simulateTxBtn).click()
+}
+
+export function verifySuccessfulSimulation() {
+  cy.get(simulateSuccess).should('exist')
+}
diff --git a/cypress/e2e/pages/nfts.pages.js b/cypress/e2e/pages/nfts.pages.js
index 0ca4235fb5..dcd566f383 100644
--- a/cypress/e2e/pages/nfts.pages.js
+++ b/cypress/e2e/pages/nfts.pages.js
@@ -18,7 +18,6 @@ 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 txDetailsSummary = '[data-testid="decoded-tx-summary"]'
 const txAccordionDetails = '[data-testid="decoded-tx-details"]'
 const accordionActionItem = '[data-testid="action-item"]'
diff --git a/cypress/e2e/pages/proposers.pages.js b/cypress/e2e/pages/proposers.pages.js
index e02d74cd08..c39b8916f6 100644
--- a/cypress/e2e/pages/proposers.pages.js
+++ b/cypress/e2e/pages/proposers.pages.js
@@ -5,6 +5,7 @@ import * as navigation from './navigation.page'
 import * as addressBook from './address_book.page'
 import * as batch from './batches.pages'
 import * as create_tx from './create_tx.pages'
+import { getSafeDelegates } from '../../support/utils/cgw.js'
 
 export const proposersSection = '[data-testid="proposer-section"]'
 const addProposerBtn = '[data-testid="add-proposer-btn"]'
@@ -18,6 +19,7 @@ const submitProposerBtn = '[data-testid="submit-proposer-btn"]'
 const safeAsProposerMessage = 'Cannot add Safe Account itself as proposer'
 const proposedTxMessage =
   'This transaction was created by a Proposer. Please review and either confirm or reject it. Once confirmed, it can be finalized and executed'
+const proposerAddedMsg = 'Proposer added successfully!'
 
 export function verifyPropsalStatusExists() {
   cy.get(create_tx.proposalStatus).should('exist')
@@ -37,10 +39,6 @@ export function verifyProposedTxMsgVisible() {
   cy.contains(proposedTxMessage).should('be.visible')
 }
 
-export function verifyDeleteProposerBtnIsDisabled() {
-  cy.get(deleteProposerBtn).should('exist').and('be.disabled')
-}
-
 export function clickOnAddProposerBtn() {
   cy.get(addProposerBtn).click()
 }
@@ -57,27 +55,48 @@ export function clickOnSubmitProposerBtn() {
   cy.get(submitProposerBtn).click()
 }
 
-export function checkCreatorAddress(index, data) {
+export function checkCreatorAddress(data) {
   cy.get(proposersSection).within(() => {
-    cy.get(addressBook.tableRow)
-      .eq(index)
-      .within(() => {
-        Object.entries(data).forEach(([key, value], i) => {
-          cy.get('td').eq(1).should('contain.text', value)
+    Object.entries(data).forEach(([key, value]) => {
+      let found = false
+      cy.get(addressBook.tableRow)
+        .each(($row) => {
+          cy.wrap($row)
+            .find('td')
+            .eq(1)
+            .then(($cell) => {
+              if ($cell.text().includes(value)) {
+                found = true
+              }
+            })
         })
-      })
+        .then(() => {
+          expect(found, `Value "${value}" should be found in td:eq(1) within proposersSection`).to.be.true
+        })
+    })
   })
 }
 
-export function checkProposerData(index, data) {
+export function checkProposerData(data) {
   cy.get(proposersSection).within(() => {
-    cy.get(addressBook.tableRow)
-      .eq(index)
-      .within(() => {
-        Object.entries(data).forEach(([key, value], i) => {
-          cy.get('td').eq(0).should('contain.text', value)
+    Object.entries(data).forEach(([key, value]) => {
+      let found = false
+
+      cy.get(addressBook.tableRow)
+        .each(($row) => {
+          cy.wrap($row)
+            .find('td')
+            .eq(0)
+            .then(($cell) => {
+              if ($cell.text().includes(value)) {
+                found = true
+              }
+            })
         })
-      })
+        .then(() => {
+          expect(found, `Value "${value}" should be found in td:eq(0) within proposersSection`).to.be.true
+        })
+    })
   })
 }
 
@@ -87,12 +106,6 @@ export function clickOnEditProposerBtn(address) {
   })
 }
 
-export function verifyEditProposerBtnDisabled(address) {
-  cy.get(proposersSection).within(() => {
-    cy.get(addressBook.tableRow).contains(address).parents('tr').find(editProposerBtn).should('be.disabled')
-  })
-}
-
 export function confirmProposerDeletion(index) {
   cy.get(confrimDeleteProposerBtn).eq(index).click()
 }
@@ -122,3 +135,19 @@ export function checkSafeAsProposerErrorMessage() {
 export function verifyBatchDoesNotExist() {
   main.verifyElementsCount(batch.batchTxTopBar, 0)
 }
+
+export function verifyProposerSuccessMsgDisplayed() {
+  cy.contains(proposerAddedMsg).should('exist')
+}
+
+export function verifyEditProposerBtnDisabled(address) {
+  cy.get(proposersSection).within(() => {
+    cy.get(addressBook.tableRow).contains(address).parents('tr').find(editProposerBtn).should('be.disabled')
+  })
+}
+
+export function verifyDeleteProposerBtnIsDisabled(address) {
+  cy.get(proposersSection).within(() => {
+    cy.get(addressBook.tableRow).contains(address).parents('tr').find(deleteProposerBtn).should('be.disabled')
+  })
+}
diff --git a/cypress/e2e/pages/sidebar.pages.js b/cypress/e2e/pages/sidebar.pages.js
index 8b77c4e70d..eea4c36737 100644
--- a/cypress/e2e/pages/sidebar.pages.js
+++ b/cypress/e2e/pages/sidebar.pages.js
@@ -67,6 +67,7 @@ const signersNotConsistentMsg3 =
   'To manage your account easier and to prevent lose of funds, we recommend keeping the same signers'
 const signersNotConsistentConfirmTxViewMsg = (network) =>
   `Signers are not consistent across networks on this account. Changing signers will only affect the account on ${network}`
+const activateStr = 'You need to activate your Safe first'
 
 export const addedSafesEth = ['0x8675...a19b']
 export const addedSafesSepolia = ['0x6d0b...6dC1', '0x5912...fFdb', '0x0637...708e', '0xD157...DE9a']
@@ -187,7 +188,7 @@ export function verifyTxCounter(counter) {
 }
 
 export function verifyNavItemDisabled(item) {
-  cy.get(sideBarListItem).contains(item).parents('li').invoke('attr', 'class').should('include', 'disabled')
+  cy.get(`div[aria-label*="${activateStr}"]`).contains(item).should('exist')
 }
 
 export function verifySafeCount(count) {
diff --git a/cypress/e2e/pages/transactions.page.js b/cypress/e2e/pages/transactions.page.js
index b602ccb094..c5c2a60b7e 100644
--- a/cypress/e2e/pages/transactions.page.js
+++ b/cypress/e2e/pages/transactions.page.js
@@ -4,11 +4,21 @@ const connectedWalletExecutionMethod = '[data-testid="connected-wallet-execution
 const txStatus = '[data-testid="transaction-status"]'
 const finishTransactionBtn = '[data-testid="finish-transaction-btn"]'
 const executeFormBtn = '[data-testid="execute-form-btn"]'
+const signBtn = '[data-testid="sign-btn"]'
+const txConfirmBtn = '[data-track="tx-list: Confirm transaction"] > button'
 
 const executeBtnStr = 'Execute'
 const txCompletedStr = 'Transaction was successful'
 export const relayRemainingAttemptsStr = 'free transactions left today'
 
+export function verifyTxConfirmBtnDisabled() {
+  cy.get(txConfirmBtn).should('be.disabled')
+}
+
+export function verifySignBtnEnabled() {
+  cy.get(signBtn).should('be.enabled')
+}
+
 export function selectExecuteNow() {
   cy.get(executeNowOption).click()
 }
diff --git a/cypress/e2e/regression/multichain_network.cy.js b/cypress/e2e/regression/multichain_network.cy.js
index 3e3d3695dd..5edea28b86 100644
--- a/cypress/e2e/regression/multichain_network.cy.js
+++ b/cypress/e2e/regression/multichain_network.cy.js
@@ -9,8 +9,6 @@ let staticSafes = []
 
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
 const signer = walletCredentials.OWNER_4_PRIVATE_KEY
-// DO NOT use OWNER_2_PRIVATE_KEY for safe creation. Used for CF safes.
-const signer2 = walletCredentials.OWNER_2_PRIVATE_KEY
 
 describe('Multichain add network tests', () => {
   before(async () => {
@@ -51,7 +49,6 @@ describe('Multichain add network tests', () => {
     main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__addedSafes, ls.addedSafes.set6_undeployed_safe)
     main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__undeployedSafes, ls.undeployedSafe.safe1)
     main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__addressBook, ls.addressBookData.undeployed)
-    wallet.connectSigner(signer2)
     sideBar.openSidebar()
     sideBar.removeSafeItem(sideBar.undeployedSafe)
     cy.wrap(null, { timeout: 10000 }).should(() => {
diff --git a/cypress/e2e/regression/proposers.cy.js b/cypress/e2e/regression/proposers.cy.js
index bdfdded36e..611c4cbb14 100644
--- a/cypress/e2e/regression/proposers.cy.js
+++ b/cypress/e2e/regression/proposers.cy.js
@@ -58,14 +58,14 @@ describe('Proposers tests', () => {
   })
 
   it('Verify a proposer Creator is shown in the table', () => {
-    proposer.checkCreatorAddress(0, [creatorAddress])
+    proposer.checkCreatorAddress([creatorAddress])
   })
 
   it('Verify non-creators of a proposers cannot edit or delete it', () => {
     navigation.clickOnWalletExpandMoreIcon()
     navigation.clickOnDisconnectBtn()
     wallet.connectSigner(signer2)
-    proposer.verifyDeleteProposerBtnIsDisabled()
+    proposer.verifyDeleteProposerBtnIsDisabled(proposerAddress)
     proposer.verifyEditProposerBtnDisabled(proposerAddress)
   })
 
@@ -73,11 +73,11 @@ describe('Proposers tests', () => {
     main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__addressBook, ls.addressBookData.proposers)
     cy.reload()
     cy.contains(owner.safeAccountNonceStr, { timeout: 10000 })
-    proposer.checkProposerData(0, [proposerNameAD])
+    proposer.checkProposerData([proposerNameAD])
   })
 
   it('Verify if the address book entry of propers name is removed, then the name given during its creation shows again', () => {
-    proposer.checkProposerData(0, [proposerName])
+    proposer.checkProposerData([proposerName])
   })
 
   it('Verify Proposers cannot see the "Batched tx" button in the header', () => {
diff --git a/cypress/e2e/regression/proposers_2.cy.js b/cypress/e2e/regression/proposers_2.cy.js
new file mode 100644
index 0000000000..810c73835d
--- /dev/null
+++ b/cypress/e2e/regression/proposers_2.cy.js
@@ -0,0 +1,88 @@
+import * as constants from '../../support/constants.js'
+import * as owner from '../pages/owners.pages.js'
+import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as wallet from '../../support/utils/wallet.js'
+import * as proposer from '../pages/proposers.pages.js'
+import * as createtx from '../pages/create_tx.pages.js'
+import * as tx from '../pages/transactions.page.js'
+
+let staticSafes = []
+const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
+const signer = walletCredentials.OWNER_4_PRIVATE_KEY
+const signer2 = walletCredentials.OWNER_1_PRIVATE_KEY
+const signer3 = walletCredentials.OWNER_3_PRIVATE_KEY
+const proposerAddress = '0x8eeC...2a3b'
+const proposerAddress_2 = '0x0972...9f35'
+const sendValue = 0.000001
+
+describe('Proposers 2 tests', () => {
+  before(async () => {
+    staticSafes = await getSafes(CATEGORIES.static)
+  })
+
+  it('Verify that an owner that is also a proposer can still execute transactions', () => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_32)
+    cy.contains(owner.safeAccountNonceStr, { timeout: 10000 })
+    wallet.connectSigner(signer)
+    createtx.clickOnNewtransactionBtn()
+    createtx.clickOnSendTokensBtn()
+    createtx.typeRecipientAddress(constants.EOA)
+    createtx.setSendValue(sendValue)
+    createtx.clickOnNextBtn()
+    tx.selectExecuteNow()
+    createtx.verifySubmitBtnIsEnabled()
+    tx.selectExecuteLater()
+    tx.verifySignBtnEnabled()
+  })
+
+  it('Verify a proposers is capable of propose transactions', () => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_33)
+    cy.contains(owner.safeAccountNonceStr, { timeout: 10000 })
+    wallet.connectSigner(signer2)
+    createtx.clickOnNewtransactionBtn()
+    createtx.clickOnSendTokensBtn()
+    createtx.typeRecipientAddress(constants.EOA)
+    createtx.setSendValue(sendValue)
+    createtx.clickOnNextBtn()
+    createtx.verifySubmitBtnIsEnabled()
+  })
+
+  it('Verify a proposers cannot confirm a transaction', () => {
+    cy.visit(constants.transactionQueueUrl + staticSafes.SEP_STATIC_SAFE_31)
+    wallet.connectSigner(signer2)
+    tx.verifyTxConfirmBtnDisabled()
+  })
+
+  it('Verify a proposer cannot edit himself', () => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_31)
+    wallet.connectSigner(signer2)
+    proposer.verifyEditProposerBtnDisabled(proposerAddress)
+  })
+
+  it('Verify a proposer cannot edit or remove other proposers', () => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_33)
+    wallet.connectSigner(signer2)
+    proposer.verifyEditProposerBtnDisabled(proposerAddress_2)
+    proposer.verifyDeleteProposerBtnIsDisabled(proposerAddress_2)
+  })
+
+  it('Verify that deleting a proposer is only possible by creator', () => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_33)
+    wallet.connectSigner(signer3)
+    proposer.verifyEditProposerBtnDisabled(proposerAddress_2)
+    proposer.verifyDeleteProposerBtnIsDisabled(proposerAddress_2)
+    proposer.verifyEditProposerBtnDisabled(proposerAddress)
+    proposer.verifyDeleteProposerBtnIsDisabled(proposerAddress)
+  })
+
+  //TODO: Unskip when tenderly visibilty bug is solved
+  it.skip('Verify a Tenderly simulation can be performed while proposing a tx', () => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_33)
+    wallet.connectSigner(signer2)
+    owner.openAddOwnerWindow()
+    owner.typeOwnerAddress(constants.SEPOLIA_OWNER_2)
+    owner.clickOnNextBtn()
+    createtx.clickOnSimulateTxBtn()
+    createtx.verifySuccessfulSimulation()
+  })
+})
diff --git a/cypress/e2e/safe-apps/apps_list.cy.js b/cypress/e2e/safe-apps/apps_list.cy.js
index 9cff538a47..424f3d811e 100644
--- a/cypress/e2e/safe-apps/apps_list.cy.js
+++ b/cypress/e2e/safe-apps/apps_list.cy.js
@@ -40,12 +40,12 @@ describe('Safe Apps list tests', () => {
 
   it('Verify apps can be pinned', () => {
     safeapps.clearSearchAppInput()
-    safeapps.pinApp(1, safeapps.transactionBuilderStr)
+    safeapps.pinApp(0, safeapps.transactionBuilderStr)
     safeapps.verifyPinnedAppCount(1)
   })
 
   it('Verify apps can be unpinned', () => {
-    safeapps.pinApp(1, safeapps.transactionBuilderStr)
+    safeapps.pinApp(0, safeapps.transactionBuilderStr)
     safeapps.pinApp(0, safeapps.transactionBuilderStr, false)
     safeapps.verifyPinnedAppCount(0)
   })
diff --git a/cypress/fixtures/safes/static.json b/cypress/fixtures/safes/static.json
index cf07ed9bdc..8acc0f0acb 100644
--- a/cypress/fixtures/safes/static.json
+++ b/cypress/fixtures/safes/static.json
@@ -31,5 +31,7 @@
   "MATIC_STATIC_SAFE_28": "matic:0xC96ee38f5A73C8A70b565CB8EA938D2aF913ee3B",
   "ZKSYNC_STATIC_SAFE_29": "zksync:0x950e07c80d7Bb754CcD84afE2b7751dc7Fd65D1f",
   "SEP_STATIC_SAFE_30": "sep:0x2687E6643E189c1245EA8419e5e427809136021F",
-  "SEP_STATIC_SAFE_31": "sep:0x09725D3c2f9bE905F8f9f1b11a771122cf9C9f35"
+  "SEP_STATIC_SAFE_31": "sep:0x09725D3c2f9bE905F8f9f1b11a771122cf9C9f35",
+  "SEP_STATIC_SAFE_32": "sep:0x698C8D95D7B6b0B50338c2885d9583737546768f",
+  "SEP_STATIC_SAFE_33": "sep:0x597D644b1F2b66B84F2C56f0D40D0314E8D5895b"
 }
diff --git a/cypress/support/constants.js b/cypress/support/constants.js
index d934a37697..525d9a981e 100644
--- a/cypress/support/constants.js
+++ b/cypress/support/constants.js
@@ -84,6 +84,7 @@ export const stagingCGWChains = '/chains/'
 export const stagingCGWSafes = '/safes/'
 export const stagingCGWNone = '/nonces/'
 export const stagingCGWCollectibles = '/collectibles/'
+export const stagingCGWDelegatesUrl = '/delegates?safe='
 export const relayPath = '/relay/'
 export const stagingCGWAllTokensBalances = '/balances/USD?trusted=false&exclude_spam=false'
 
diff --git a/cypress/support/utils/wallet.js b/cypress/support/utils/wallet.js
index 68013c469a..ff0bf28bd9 100644
--- a/cypress/support/utils/wallet.js
+++ b/cypress/support/utils/wallet.js
@@ -47,7 +47,6 @@ export function connectSigner(signer) {
         cy.get(connectWalletBtn)
           .eq(0)
           .should('be.enabled')
-          .and('be.visible')
           .click()
           .then(() => {
             const actionKey = $body.find(onboardv2).length > 0 ? 'privateKey' : 'retry'
diff --git a/src/components/tx/security/tenderly/index.tsx b/src/components/tx/security/tenderly/index.tsx
index 32190ca14a..7022849d28 100644
--- a/src/components/tx/security/tenderly/index.tsx
+++ b/src/components/tx/security/tenderly/index.tsx
@@ -123,6 +123,7 @@ const TxSimulationBlock = ({ transactions, disabled, gasLimit, executionOwner }:
             </Typography>
           ) : (
             <Typography
+              data-testid="simulation-success-msg"
               variant="body2"
               className={sharedCss.result}
               sx={{
@@ -136,6 +137,7 @@ const TxSimulationBlock = ({ transactions, disabled, gasLimit, executionOwner }:
         ) : (
           <Track {...MODALS_EVENTS.SIMULATE_TX}>
             <Button
+              data-testid="simulate-btn"
               variant="outlined"
               size="small"
               className={css.simulate}

From 01c1079cefe100b7bac0f8989fec8a57c275fe32 Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Thu, 21 Nov 2024 11:31:47 +0100
Subject: [PATCH 06/47] Tests: Add safe apps tests (#4544)

---
 cypress/e2e/happypath_2/proposers.cy.js |  2 --
 cypress/e2e/pages/proposers.pages.js    |  4 ----
 cypress/e2e/pages/safeapps.pages.js     | 25 ++++++++++++++++++++++++-
 cypress/e2e/pages/sidebar.pages.js      |  1 +
 cypress/e2e/safe-apps/apps_list.cy.js   | 11 +++++++++++
 5 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/cypress/e2e/happypath_2/proposers.cy.js b/cypress/e2e/happypath_2/proposers.cy.js
index 3b4eafe6a2..411548b5e0 100644
--- a/cypress/e2e/happypath_2/proposers.cy.js
+++ b/cypress/e2e/happypath_2/proposers.cy.js
@@ -2,9 +2,7 @@ import * as constants from '../../support/constants.js'
 import * as owner from '../pages/owners.pages.js'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
-import * as navigation from '../pages/navigation.page.js'
 import * as proposer from '../pages/proposers.pages.js'
-import { getSafeDelegates } from '../../support/utils/cgw.js'
 
 let staticSafes = []
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
diff --git a/cypress/e2e/pages/proposers.pages.js b/cypress/e2e/pages/proposers.pages.js
index c39b8916f6..11411278c6 100644
--- a/cypress/e2e/pages/proposers.pages.js
+++ b/cypress/e2e/pages/proposers.pages.js
@@ -1,11 +1,7 @@
-import * as constants from '../../support/constants'
 import * as main from './main.page'
-import * as createWallet from './create_wallet.pages'
-import * as navigation from './navigation.page'
 import * as addressBook from './address_book.page'
 import * as batch from './batches.pages'
 import * as create_tx from './create_tx.pages'
-import { getSafeDelegates } from '../../support/utils/cgw.js'
 
 export const proposersSection = '[data-testid="proposer-section"]'
 const addProposerBtn = '[data-testid="add-proposer-btn"]'
diff --git a/cypress/e2e/pages/safeapps.pages.js b/cypress/e2e/pages/safeapps.pages.js
index e04417a366..f30fed55ed 100644
--- a/cypress/e2e/pages/safeapps.pages.js
+++ b/cypress/e2e/pages/safeapps.pages.js
@@ -100,6 +100,7 @@ export const dummyTxStr = 'Trigger dummy tx (safe.txs.send)'
 export const signOnchainMsgStr = 'Sign message (on-chain)'
 export const pinWalletConnectStr = /pin walletconnect/i
 export const transactionBuilderStr = 'Transaction Builder'
+export const cowswapStr = 'CowSwap'
 export const testAddressValueStr = 'testAddressValue'
 export const logoWalletConnect = /logo.*walletconnect/i
 export const walletConnectHeadlinePreview = /walletconnect/i
@@ -117,6 +118,10 @@ export const linkNames = {
   wcLogo: /WalletConnect logo/i,
   txBuilderLogo: /Transaction Builder logo/i,
 }
+const featuredAppsStr = /featured apps/i
+const pinnedAppsStr = 'My pinned apps'
+const pinnedAppsStrR = /my pinned apps/i
+
 export const abi =
   '[{"inputs":[{"internalType":"address","name":"_singleton","type":"address"}],"stateMutability":"nonpayable","type":"constructor"},{"stateMutability":"payable","type":"fallback"},{"inputs":[{"internalType":"address","name":"target","type":"address"}],"name":"AddressEmptyCode","type":"error"},{"inputs":[{"internalType":"address","name":"account","type":"address"}],"name":"balanceOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"value","type":"uint256"}],"name":"approve","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"}]'
 
@@ -197,7 +202,9 @@ export function verifyNoAppsTextPresent() {
 
 export function pinApp(index, app, pin = true) {
   const option = pin ? 'Pin' : 'Unpin'
+  const option_ = pin ? 'Unpin' : 'Pin'
   cy.get(`[aria-label="${option} ${app}"]`).eq(index).click()
+  cy.get(`[aria-label="${option_} ${app}"]`).should('exist')
 }
 
 export function clickOnBookmarkedAppsTab() {
@@ -213,7 +220,23 @@ export function verifyCustomAppCount(count) {
 }
 
 export function verifyPinnedAppCount(count) {
-  cy.findByText(`My pinned apps (${count})`).should(count ? 'be.visible' : 'not.exist')
+  cy.findByText(`${pinnedAppsStr} (${count})`).should(count ? 'be.visible' : 'not.exist')
+}
+
+export function verifyAppInFeaturedList(app) {
+  cy.findByText(featuredAppsStr)
+    .next('ul')
+    .within(() => {
+      cy.findByText(app).should('exist')
+    })
+}
+
+export function verifyAppInPinnedList(app) {
+  cy.findByText(pinnedAppsStrR)
+    .next('ul')
+    .within(() => {
+      cy.findByText(app).should('exist')
+    })
 }
 
 export function clickOnCustomAppsTab() {
diff --git a/cypress/e2e/pages/sidebar.pages.js b/cypress/e2e/pages/sidebar.pages.js
index eea4c36737..1051962fe4 100644
--- a/cypress/e2e/pages/sidebar.pages.js
+++ b/cypress/e2e/pages/sidebar.pages.js
@@ -345,6 +345,7 @@ export function renameSafeItem(oldName, newName) {
 
 export function removeSafeItem(name) {
   clickOnSafeItemOptionsBtn(name)
+  cy.wait(1000)
   clickOnRemoveBtn()
   confirmSafeItemRemoval()
   verifyModalRemoved()
diff --git a/cypress/e2e/safe-apps/apps_list.cy.js b/cypress/e2e/safe-apps/apps_list.cy.js
index 424f3d811e..f1dc6d05d2 100644
--- a/cypress/e2e/safe-apps/apps_list.cy.js
+++ b/cypress/e2e/safe-apps/apps_list.cy.js
@@ -76,4 +76,15 @@ describe('Safe Apps list tests', () => {
     safeapps.verifyCustomAppCount(1)
     safeapps.verifyAppDescription(myCustomAppDescrAdded)
   })
+
+  it('Verify the featured apps list', () => {
+    safeapps.verifyAppInFeaturedList(safeapps.transactionBuilderStr)
+    safeapps.verifyAppInFeaturedList(safeapps.cowswapStr)
+  })
+
+  it('Verify that pinned app can be in pinned section and in featured at the same time', () => {
+    safeapps.pinApp(0, safeapps.transactionBuilderStr)
+    safeapps.verifyAppInFeaturedList(safeapps.transactionBuilderStr)
+    safeapps.verifyAppInPinnedList(safeapps.transactionBuilderStr)
+  })
 })

From 7253f67e97047d73dedea016899baff00876abc1 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 21 Nov 2024 14:31:36 +0100
Subject: [PATCH 07/47] Fix: mui accordion background (#4543)

* Fix: mui accordion background

* Update tests
---
 src/components/theme/safeTheme.ts                        | 9 +++------
 .../__tests__/__snapshots__/SignOrExecute.test.tsx.snap  | 8 ++++----
 .../__snapshots__/BatchTransactions.test.tsx.snap        | 4 ++--
 .../__snapshots__/ConfirmationView.test.tsx.snap         | 8 ++++----
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/theme/safeTheme.ts b/src/components/theme/safeTheme.ts
index 9c43de5545..b3ec8675b0 100644
--- a/src/components/theme/safeTheme.ts
+++ b/src/components/theme/safeTheme.ts
@@ -193,20 +193,17 @@ const createSafeTheme = (mode: PaletteMode): Theme => {
               margin: 0,
               borderColor: theme.palette.secondary.light,
             },
-
-            '&.Mui-expanded > .MuiAccordionSummary-root': {
-              background: theme.palette.background.light,
-            },
           }),
         },
       },
       MuiAccordionSummary: {
         styleOverrides: {
-          root: {
+          root: ({ theme }) => ({
             '&.Mui-expanded': {
               minHeight: '48px',
+              background: theme.palette.background.light,
             },
-          },
+          }),
           content: {
             '&.Mui-expanded': {
               margin: '12px 0',
diff --git a/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap b/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap
index ce43a32472..e4872296c5 100644
--- a/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap
+++ b/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
           class="MuiBox-root css-0"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1befnxe-MuiPaper-root-MuiAccordion-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1gdgqta-MuiPaper-root-MuiAccordion-root"
             style="--Paper-shadow: none;"
           >
             <h3
@@ -24,7 +24,7 @@ exports[`SignOrExecute should display a confirmation screen 1`] = `
             >
               <div
                 aria-expanded="false"
-                class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-66oagt-MuiButtonBase-root-MuiAccordionSummary-root"
+                class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-6csn7x-MuiButtonBase-root-MuiAccordionSummary-root"
                 data-testid="decoded-tx-summary"
                 role="button"
                 tabindex="0"
@@ -276,7 +276,7 @@ exports[`SignOrExecute should display an error screen 1`] = `
           class="MuiBox-root css-0"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1befnxe-MuiPaper-root-MuiAccordion-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1gdgqta-MuiPaper-root-MuiAccordion-root"
             style="--Paper-shadow: none;"
           >
             <h3
@@ -284,7 +284,7 @@ exports[`SignOrExecute should display an error screen 1`] = `
             >
               <div
                 aria-expanded="false"
-                class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-66oagt-MuiButtonBase-root-MuiAccordionSummary-root"
+                class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-6csn7x-MuiButtonBase-root-MuiAccordionSummary-root"
                 data-testid="decoded-tx-summary"
                 role="button"
                 tabindex="0"
diff --git a/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap b/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap
index f20bc6d87b..549ada2e01 100644
--- a/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap
+++ b/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
         1
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1bkyy70-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1147gyl-MuiPaper-root-MuiAccordion-root"
         style="--Paper-shadow: none;"
       >
         <h3
@@ -22,7 +22,7 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
         >
           <div
             aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-66oagt-MuiButtonBase-root-MuiAccordionSummary-root"
+            class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-6csn7x-MuiButtonBase-root-MuiAccordionSummary-root"
             role="button"
             tabindex="0"
           >
diff --git a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap b/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
index 699e1afa25..0e3f6bd27d 100644
--- a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
+++ b/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
@@ -137,7 +137,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
       class="MuiBox-root css-0"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1befnxe-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1gdgqta-MuiPaper-root-MuiAccordion-root"
         style="--Paper-shadow: none;"
       >
         <h3
@@ -145,7 +145,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
         >
           <div
             aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-66oagt-MuiButtonBase-root-MuiAccordionSummary-root"
+            class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-6csn7x-MuiButtonBase-root-MuiAccordionSummary-root"
             data-testid="decoded-tx-summary"
             role="button"
             tabindex="0"
@@ -404,7 +404,7 @@ exports[`ConfirmationView should display a confirmation with method call when th
       class="MuiBox-root css-0"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1befnxe-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1gdgqta-MuiPaper-root-MuiAccordion-root"
         style="--Paper-shadow: none;"
       >
         <h3
@@ -412,7 +412,7 @@ exports[`ConfirmationView should display a confirmation with method call when th
         >
           <div
             aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-66oagt-MuiButtonBase-root-MuiAccordionSummary-root"
+            class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-6csn7x-MuiButtonBase-root-MuiAccordionSummary-root"
             data-testid="decoded-tx-summary"
             role="button"
             tabindex="0"

From e4776d1769f08c6657bc7df30fcdd11f6d239513 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 21 Nov 2024 14:32:48 +0100
Subject: [PATCH 08/47] Fix: section heading in terms (#4545)

---
 src/markdown/terms/terms.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/markdown/terms/terms.md b/src/markdown/terms/terms.md
index e0b9433cbf..2f3bfdb426 100644
--- a/src/markdown/terms/terms.md
+++ b/src/markdown/terms/terms.md
@@ -15,7 +15,7 @@ Last updated: September, 2024
 
 [4\. What do the Services not consist of?](#4.-what-do-the-services-not-consist-of?)
 
-[5\. What do you need to know about Third-Party Services?](#5.-what-do-you-need-to-know-about-third-party-safe-apps-and-third-party-services?)
+[5\. What do you need to know about Third-Party Safe Apps and Third-Party Services?](#5.-what-do-you-need-to-know-about-third-party-safe-apps-and-third-party-services?)
 
 [6\. What are the fees for the Services?](#6.-what-are-the-fees-for-the-services?)
 
@@ -31,6 +31,8 @@ Last updated: September, 2024
 
 [12\. Are we responsible for third-party content and services?](#12.-are-we-responsible-for-third-party-content-and-services?)
 
+[13\. Can we terminate or limit your right to use our Services?](#13.-can-we-terminate-or-limit-your-right-to-use-our-services?)
+
 [14\. Can you terminate your Agreement with us?](#14.-can-you-terminate-your-agreement-with-us?)
 
 [15\. What licenses and access do we grant to you?](#15.-what-licenses-and-access-do-we-grant-to-you?)
@@ -233,7 +235,7 @@ Our Services do not consist of:
 
 3. If we offer access to Third-Party Features in the Safe{Wallet} App free of charge by us (Third-Parties may charge separate fees), the liability for providing access to such Third-Party Feature is limited pursuant to Section 18 below. Furthermore we reserve the right to cease to provide access to those Third-Party Features through the Safe{Wallet} App without notice.
 
-13\. Can we terminate or limit your right to use our Services?
+# 13\. Can we terminate or limit your right to use our Services? {#13.-can-we-terminate-or-limit-your-right-to-use-our-services?}
 
 1. We may cease offering our Services and/or terminate the Agreement and refuse access to the Safe{Wallet} App at any time. The right of the parties to terminate the Agreement at any time for cause remains unaffected. In case of our termination of the Agreement, you may no longer access your Safe Account via our Services. However, you may continue to access your Safe Account and any Tokens via a third-party wallet provider using your Recovery Phrase and Private Keys.
 
@@ -386,4 +388,4 @@ For users who are merchants within the meaning of the German Commercial Code (Ha
 
 # 31\. Is this all? {#31.-is-this-all?}
 
-These Terms constitute the entire agreement between you and us in relation to the Agreement’s subject matter. It replaces and extinguishes any and all prior agreements, draft agreements, arrangements, warranties, statements, assurances, representations and undertakings of any nature made by, or on behalf of either of us, whether oral or written, public or private, in relation to that subject matter.  
+These Terms constitute the entire agreement between you and us in relation to the Agreement’s subject matter. It replaces and extinguishes any and all prior agreements, draft agreements, arrangements, warranties, statements, assurances, representations and undertakings of any nature made by, or on behalf of either of us, whether oral or written, public or private, in relation to that subject matter.

From 5f8fad033374b3a26df6fab34ebae083f6b1069b Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Fri, 22 Nov 2024 07:50:59 +0100
Subject: [PATCH 09/47] Chore: update walletconnect packages

---
 package.json |   6 +--
 yarn.lock    | 110 +++++++++++++++++++++------------------------------
 2 files changed, 48 insertions(+), 68 deletions(-)

diff --git a/package.json b/package.json
index 470aa66ead..ae5f294d79 100644
--- a/package.json
+++ b/package.json
@@ -65,8 +65,8 @@
     "@safe-global/safe-modules-deployments": "^2.2.1",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",
-    "@walletconnect/utils": "^2.16.1",
-    "@walletconnect/web3wallet": "^1.15.1",
+    "@walletconnect/utils": "^2.17.2",
+    "@walletconnect/web3wallet": "^1.16.1",
     "@web3-onboard/coinbase": "^2.2.6",
     "@web3-onboard/core": "^2.21.4",
     "@web3-onboard/injected-wallets": "^2.11.2",
@@ -137,7 +137,7 @@
     "@types/react-gtm-module": "^2.0.3",
     "@types/semver": "^7.3.10",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@walletconnect/types": "^2.16.1",
+    "@walletconnect/types": "^2.17.2",
     "cross-env": "^7.0.3",
     "cypress": "^13.15.2",
     "cypress-file-upload": "^5.0.8",
diff --git a/yarn.lock b/yarn.lock
index db1a5673cf..4f212c8460 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6498,28 +6498,6 @@
     events "^3.3.0"
     isomorphic-unfetch "^3.1.0"
 
-"@walletconnect/core@2.16.1":
-  version "2.16.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.16.1.tgz#019b181387792e0d284e75074b961b48193d9b6a"
-  integrity sha512-UlsnEMT5wwFvmxEjX8s4oju7R3zadxNbZgsFeHEsjh7uknY2zgmUe1Lfc5XU6zyPb1Jx7Nqpdx1KN485ee8ogw==
-  dependencies:
-    "@walletconnect/heartbeat" "1.2.2"
-    "@walletconnect/jsonrpc-provider" "1.0.14"
-    "@walletconnect/jsonrpc-types" "1.0.4"
-    "@walletconnect/jsonrpc-utils" "1.0.8"
-    "@walletconnect/jsonrpc-ws-connection" "1.0.14"
-    "@walletconnect/keyvaluestorage" "1.1.1"
-    "@walletconnect/logger" "2.1.2"
-    "@walletconnect/relay-api" "1.0.11"
-    "@walletconnect/relay-auth" "1.0.4"
-    "@walletconnect/safe-json" "1.0.2"
-    "@walletconnect/time" "1.0.2"
-    "@walletconnect/types" "2.16.1"
-    "@walletconnect/utils" "2.16.1"
-    events "3.3.0"
-    lodash.isequal "4.5.0"
-    uint8arrays "3.1.0"
-
 "@walletconnect/core@2.17.1":
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.17.1.tgz#8ee51d630068e4450014fe62a76af895ab1d349d"
@@ -6737,21 +6715,6 @@
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/sign-client@2.16.1":
-  version "2.16.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/sign-client/-/sign-client-2.16.1.tgz#94a2f630ba741bd180f540c53576c5ceaace4857"
-  integrity sha512-s2Tx2n2duxt+sHtuWXrN9yZVaHaYqcEcjwlTD+55/vs5NUPlISf+fFmZLwSeX1kUlrSBrAuxPUcqQuRTKcjLOA==
-  dependencies:
-    "@walletconnect/core" "2.16.1"
-    "@walletconnect/events" "1.0.1"
-    "@walletconnect/heartbeat" "1.2.2"
-    "@walletconnect/jsonrpc-utils" "1.0.8"
-    "@walletconnect/logger" "2.1.2"
-    "@walletconnect/time" "1.0.2"
-    "@walletconnect/types" "2.16.1"
-    "@walletconnect/utils" "2.16.1"
-    events "3.3.0"
-
 "@walletconnect/sign-client@2.17.1":
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/sign-client/-/sign-client-2.17.1.tgz#0777536427eba1b725c111ecc08eb301e05a8c55"
@@ -6786,10 +6749,10 @@
     "@walletconnect/logger" "2.1.2"
     events "3.3.0"
 
-"@walletconnect/types@2.16.1", "@walletconnect/types@^2.16.1":
-  version "2.16.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.16.1.tgz#6583d458d3f7b1919d482ba516ccb7878ec8c91f"
-  integrity sha512-9P4RG4VoDEF+yBF/n2TF12gsvT/aTaeZTVDb/AOayafqiPnmrQZMKmNCJJjq1sfdsDcHXFcZWMGsuCeSJCmrXA==
+"@walletconnect/types@2.17.1":
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.17.1.tgz#425dedbe5853231252d081f61448c55ecd341c96"
+  integrity sha512-aiUeBE3EZZTsZBv5Cju3D0PWAsZCMks1g3hzQs9oNtrbuLL6pKKU0/zpKwk4vGywszxPvC3U0tBCku9LLsH/0A==
   dependencies:
     "@walletconnect/events" "1.0.1"
     "@walletconnect/heartbeat" "1.2.2"
@@ -6798,10 +6761,10 @@
     "@walletconnect/logger" "2.1.2"
     events "3.3.0"
 
-"@walletconnect/types@2.17.1":
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.17.1.tgz#425dedbe5853231252d081f61448c55ecd341c96"
-  integrity sha512-aiUeBE3EZZTsZBv5Cju3D0PWAsZCMks1g3hzQs9oNtrbuLL6pKKU0/zpKwk4vGywszxPvC3U0tBCku9LLsH/0A==
+"@walletconnect/types@2.17.2", "@walletconnect/types@^2.17.2":
+  version "2.17.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.17.2.tgz#f9afff242563be33f377de689b03b482f5b20aee"
+  integrity sha512-j/+0WuO00lR8ntu7b1+MKe/r59hNwYLFzW0tTmozzhfAlDL+dYwWasDBNq4AH8NbVd7vlPCQWmncH7/6FVtOfQ==
   dependencies:
     "@walletconnect/events" "1.0.1"
     "@walletconnect/heartbeat" "1.2.2"
@@ -6850,32 +6813,36 @@
     query-string "7.1.3"
     uint8arrays "3.1.0"
 
-"@walletconnect/utils@2.16.1", "@walletconnect/utils@^2.16.1":
-  version "2.16.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.16.1.tgz#2099cc2bd16b0edc32022f64aa2c2c323b45d1d4"
-  integrity sha512-aoQirVoDoiiEtYeYDtNtQxFzwO/oCrz9zqeEEXYJaAwXlGVTS34KFe7W3/Rxd/pldTYKFOZsku2EzpISfH8Wsw==
+"@walletconnect/utils@2.17.1":
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.17.1.tgz#fc57ffb89fc101fa1bf015de016ea01091d10ae0"
+  integrity sha512-KL7pPwq7qUC+zcTmvxGqIyYanfHgBQ+PFd0TEblg88jM7EjuDLhjyyjtkhyE/2q7QgR7OanIK7pCpilhWvBsBQ==
   dependencies:
+    "@ethersproject/hash" "5.7.0"
+    "@ethersproject/transactions" "5.7.0"
     "@stablelib/chacha20poly1305" "1.0.1"
     "@stablelib/hkdf" "1.0.1"
     "@stablelib/random" "1.0.2"
     "@stablelib/sha256" "1.0.1"
     "@stablelib/x25519" "1.0.3"
+    "@walletconnect/jsonrpc-utils" "1.0.8"
+    "@walletconnect/keyvaluestorage" "1.1.1"
     "@walletconnect/relay-api" "1.0.11"
     "@walletconnect/relay-auth" "1.0.4"
     "@walletconnect/safe-json" "1.0.2"
     "@walletconnect/time" "1.0.2"
-    "@walletconnect/types" "2.16.1"
+    "@walletconnect/types" "2.17.1"
     "@walletconnect/window-getters" "1.0.1"
     "@walletconnect/window-metadata" "1.0.1"
     detect-browser "5.3.0"
-    elliptic "^6.5.7"
+    elliptic "6.5.7"
     query-string "7.1.3"
     uint8arrays "3.1.0"
 
-"@walletconnect/utils@2.17.1":
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.17.1.tgz#fc57ffb89fc101fa1bf015de016ea01091d10ae0"
-  integrity sha512-KL7pPwq7qUC+zcTmvxGqIyYanfHgBQ+PFd0TEblg88jM7EjuDLhjyyjtkhyE/2q7QgR7OanIK7pCpilhWvBsBQ==
+"@walletconnect/utils@^2.17.2":
+  version "2.17.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.17.2.tgz#b4b12e3f5ebbfd883b2a5c87fb818e53501dc7ea"
+  integrity sha512-T7eLRiuw96fgwUy2A5NZB5Eu87ukX8RCVoO9lji34RFV4o2IGU9FhTEWyd4QQKI8OuQRjSknhbJs0tU0r0faPw==
   dependencies:
     "@ethersproject/hash" "5.7.0"
     "@ethersproject/transactions" "5.7.0"
@@ -6890,27 +6857,27 @@
     "@walletconnect/relay-auth" "1.0.4"
     "@walletconnect/safe-json" "1.0.2"
     "@walletconnect/time" "1.0.2"
-    "@walletconnect/types" "2.17.1"
+    "@walletconnect/types" "2.17.2"
     "@walletconnect/window-getters" "1.0.1"
     "@walletconnect/window-metadata" "1.0.1"
     detect-browser "5.3.0"
-    elliptic "6.5.7"
+    elliptic "6.6.0"
     query-string "7.1.3"
     uint8arrays "3.1.0"
 
-"@walletconnect/web3wallet@^1.15.1":
-  version "1.15.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/web3wallet/-/web3wallet-1.15.1.tgz#47d041c07e2b12824ade85e53ed50c89536ef37b"
-  integrity sha512-EgtdZUgtf0diU98x8Q8tiZslE0Z5comnxv3SqmAIgkdhpXDxaM/goo7BC1yC+Wey/IHOOVYg2SW+La2Txk+6hQ==
+"@walletconnect/web3wallet@^1.16.1":
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/web3wallet/-/web3wallet-1.16.1.tgz#53abb98fea6f1ac77704d4e4c91288e0300f2fb9"
+  integrity sha512-l6jVoLEh/UtRfvYUDs52fN+LYXsBgx3F9WfErJuCSCFfpbxDKIzM2Y9sI0WI1/5dWN5sh24H1zNCXnQ4JJltZw==
   dependencies:
     "@walletconnect/auth-client" "2.1.2"
-    "@walletconnect/core" "2.16.1"
+    "@walletconnect/core" "2.17.1"
     "@walletconnect/jsonrpc-provider" "1.0.14"
     "@walletconnect/jsonrpc-utils" "1.0.8"
     "@walletconnect/logger" "2.1.2"
-    "@walletconnect/sign-client" "2.16.1"
-    "@walletconnect/types" "2.16.1"
-    "@walletconnect/utils" "2.16.1"
+    "@walletconnect/sign-client" "2.17.1"
+    "@walletconnect/types" "2.17.1"
+    "@walletconnect/utils" "2.17.1"
 
 "@walletconnect/window-getters@1.0.1", "@walletconnect/window-getters@^1.0.1":
   version "1.0.1"
@@ -9677,6 +9644,19 @@ elliptic@6.5.7, elliptic@^6.5.7:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+elliptic@6.6.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.6.0.tgz#5919ec723286c1edf28685aa89261d4761afa210"
+  integrity sha512-dpwoQcLc/2WLQvJvLRHKZ+f9FgOdjnq11rurqwekGQygGPsYSK29OMMD2WalatiqQ+XGFDglTNixpPfI+lpaAA==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
 elliptic@^6.4.0, elliptic@^6.4.1, elliptic@^6.5.2, elliptic@^6.5.3, elliptic@^6.5.4, elliptic@^6.5.5:
   version "6.5.5"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.5.tgz#c715e09f78b6923977610d4c2346d6ce22e6dded"

From 6ff9e3283ba661388a39261fe67f78b2539b19e9 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Fri, 22 Nov 2024 08:26:19 +0100
Subject: [PATCH 10/47] Fix: remove old app store button (#4546)

* Fix: remove old app store button

* Rm import
---
 public/images/common/appstore-light.svg       |  1 -
 public/images/common/appstore.svg             |  1 -
 .../common/AppStoreButton/index.tsx           | 34 -------------------
 src/components/common/Footer/index.tsx        |  4 ---
 src/services/analytics/events/index.ts        |  1 -
 .../analytics/events/mobileAppPromotion.ts    |  8 -----
 6 files changed, 49 deletions(-)
 delete mode 100644 public/images/common/appstore-light.svg
 delete mode 100644 public/images/common/appstore.svg
 delete mode 100644 src/components/common/AppStoreButton/index.tsx
 delete mode 100644 src/services/analytics/events/mobileAppPromotion.ts

diff --git a/public/images/common/appstore-light.svg b/public/images/common/appstore-light.svg
deleted file mode 100644
index a21ad045c4..0000000000
--- a/public/images/common/appstore-light.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 646 250" style="enable-background:new 0 0 646 250" xml:space="preserve"><path d="M583.2 21.5H57.1c-1.6 0-3.2 0-4.8.1-3.5 0-6.9.3-10.4.9-3.4.6-6.7 1.7-9.8 3.2-3.1 1.6-5.9 3.6-8.4 6.1-2.5 2.4-4.5 5.3-6.1 8.4-1.6 3.1-2.7 6.4-3.2 9.8-.6 3.4-.9 6.9-.9 10.4 0 1.6-.1 3.2-.1 4.8v119.6c0 1.6 0 3.2.1 4.8 0 3.5.4 6.9.9 10.4.6 3.4 1.7 6.8 3.2 9.9 1.6 3.1 3.6 5.9 6.1 8.4 2.4 2.5 5.3 4.5 8.4 6.1 3.1 1.6 6.4 2.7 9.8 3.3 3.4.6 6.9.9 10.4.9 1.6 0 3.2.1 4.8.1h531.7c1.6 0 3.2 0 4.8-.1 3.5 0 6.9-.3 10.3-.9 3.4-.6 6.8-1.7 9.9-3.3 3.1-1.6 5.9-3.6 8.4-6.1 2.5-2.4 4.5-5.3 6.1-8.4 1.6-3.1 2.6-6.4 3.2-9.9.6-3.4.9-6.9 1-10.4V60.5c-.1-3.5-.4-6.9-1-10.4-.6-3.4-1.6-6.7-3.2-9.8-3.2-6.3-8.3-11.3-14.5-14.5-3.1-1.6-6.4-2.7-9.9-3.2-3.4-.6-6.9-.9-10.3-.9-1.6 0-3.2-.1-4.8-.1-1.8-.1-3.7-.1-5.6-.1z"/><path d="M57.2 223.9c-1.6 0-3.1 0-4.7-.1-3.2 0-6.5-.3-9.7-.8-3-.5-5.9-1.5-8.6-2.8-2.7-1.4-5.1-3.1-7.2-5.3-2.1-2.1-3.9-4.5-5.3-7.2s-2.3-5.6-2.8-8.6c-.5-3.2-.8-6.4-.9-9.7 0-1.1-.1-4.7-.1-4.7V65.2s0-3.6.1-4.6c0-3.2.3-6.5.9-9.7.5-3 1.4-5.9 2.8-8.6 1.3-2.7 3.1-5.1 5.3-7.2 2.1-2.1 4.6-3.9 7.3-5.3s5.6-2.3 8.6-2.8c3.2-.5 6.5-.8 9.7-.8l4.7-.1h531.6l4.7.1c3.2 0 6.4.3 9.6.8 3 .5 5.9 1.5 8.6 2.8 5.4 2.8 9.7 7.1 12.5 12.5 1.3 2.7 2.3 5.6 2.8 8.5.5 3.2.8 6.5.9 9.8v128.9c-.1 3.2-.4 6.4-.9 9.6-.5 3-1.4 5.9-2.8 8.6-1.4 2.7-3.1 5.1-5.3 7.2-2.1 2.1-4.6 3.9-7.2 5.3-2.7 1.4-5.6 2.3-8.6 2.8-3.2.5-6.4.8-9.7.8-1.5 0-3.1.1-4.6.1H57.2z" style="fill:#fff"/><path d="M142.8 124.4c.1-9.1 4.9-17.6 12.7-22.3-4.9-7-12.9-11.3-21.5-11.6-9-.9-17.8 5.4-22.4 5.4-4.7 0-11.8-5.3-19.4-5.2-10 .3-19.2 5.9-24.1 14.7-10.4 18-2.6 44.5 7.3 59 5 7.1 10.8 15.1 18.4 14.8 7.5-.3 10.2-4.8 19.3-4.8 8.9 0 11.5 4.8 19.3 4.6 8-.1 13.1-7.2 17.9-14.4 3.6-5.1 6.3-10.7 8.2-16.6-9.5-3.9-15.7-13.2-15.7-23.6zM128.1 80.9c4.4-5.2 6.5-12 6-18.8-6.7.7-12.8 3.9-17.3 8.9-4.4 5-6.6 11.5-6.2 18.1 6.9.1 13.3-2.9 17.5-8.2zM232.3 161.9h-24.5l-5.9 17.4h-10.4l23.2-64.2h10.8l23.2 64.2h-10.5l-5.9-17.4zm-21.9-8h19.4l-9.6-28.2h-.3l-9.5 28.2zM298.8 155.9c0 14.6-7.8 23.9-19.5 23.9-6.1.3-11.8-2.9-14.7-8.2h-.2v23.2h-9.6v-62.3h9.3v7.8h.2c3.1-5.3 8.8-8.5 14.9-8.3 11.8 0 19.6 9.4 19.6 23.9zm-9.9 0c0-9.5-4.9-15.7-12.4-15.7-7.3 0-12.3 6.4-12.3 15.7 0 9.4 4.9 15.8 12.3 15.8 7.5-.1 12.4-6.3 12.4-15.8zM350.4 155.9c0 14.6-7.8 23.9-19.5 23.9-6.1.3-11.8-2.9-14.7-8.2h-.2v23.2h-9.6v-62.3h9.3v7.8h.2c3.1-5.3 8.8-8.5 14.9-8.3 11.7 0 19.6 9.4 19.6 23.9zm-9.9 0c0-9.5-4.9-15.7-12.4-15.7-7.3 0-12.3 6.4-12.3 15.7 0 9.4 4.9 15.8 12.3 15.8 7.5-.1 12.4-6.3 12.4-15.8zM384.4 161.4c.7 6.4 6.9 10.6 15.4 10.6 8.1 0 13.9-4.2 13.9-9.9 0-5-3.5-8-11.8-10l-8.3-2c-11.8-2.8-17.3-8.4-17.3-17.3 0-11.1 9.7-18.7 23.4-18.7 13.6 0 22.9 7.6 23.2 18.7h-9.7c-.6-6.4-5.9-10.3-13.6-10.3-7.7 0-13 3.9-13 9.6 0 4.5 3.4 7.2 11.7 9.3l7.1 1.7c13.2 3.1 18.7 8.4 18.7 17.8 0 12-9.6 19.5-24.8 19.5-14.2 0-23.9-7.4-24.5-19h9.6zM444.6 121.4v11.1h8.9v7.6h-8.9v25.8c0 4 1.8 5.9 5.7 5.9 1.1 0 2.1-.1 3.2-.2v7.6c-1.8.3-3.5.5-5.3.4-9.5 0-13.2-3.6-13.2-12.6v-26.8h-6.8v-7.6h6.8v-11.1h9.6zM458.7 155.9c0-14.7 8.7-24 22.2-24 13.6 0 22.2 9.3 22.2 24 0 14.8-8.6 24-22.2 24s-22.2-9.2-22.2-24zm34.6 0c0-10.1-4.6-16.1-12.4-16.1s-12.4 6-12.4 16.1c0 10.1 4.6 16.1 12.4 16.1s12.4-6 12.4-16.1zM511 132.5h9.2v8h.2c1.3-5.1 6-8.7 11.3-8.5 1.1 0 2.2.1 3.3.4v9c-1.4-.4-2.9-.6-4.3-.6-5.3-.2-9.9 3.9-10.1 9.3 0 .5 0 1 .1 1.5v27.8H511v-46.9zM579.3 165.5c-1.3 8.5-9.6 14.3-20.2 14.3-13.6 0-22.1-9.1-22.1-23.8 0-14.7 8.5-24.2 21.7-24.2 13 0 21.1 8.9 21.1 23.1v3.3h-33.1v.6c-.6 6.7 4.4 12.6 11.1 13.2.5 0 1 .1 1.5 0 4.7.4 9.1-2.2 10.8-6.6l9.2.1zm-32.5-13.9h23.4c.3-6.2-4.4-11.5-10.6-11.9h-.9c-6.5 0-11.9 5.2-11.9 11.8v.1zM209.2 66.7c7.5-.5 14.1 5.1 14.6 12.6.1.9 0 1.8-.1 2.7 0 9.9-5.3 15.5-14.5 15.5H198V66.7h11.2zm-6.4 26.5h5.8c5.3.3 9.9-3.8 10.3-9.1 0-.7 0-1.3-.1-2 .7-5.3-3-10.2-8.3-11-.6-.1-1.2-.1-1.9-.1h-5.8v22.2zM229.1 85.9c-.6-6.1 3.9-11.5 9.9-12 6.1-.6 11.5 3.9 12 9.9.1.7.1 1.4 0 2.1.6 6.1-3.8 11.5-9.9 12.1-6.1.6-11.5-3.8-12.1-9.9 0-.8 0-1.5.1-2.2zm17.2 0c0-5-2.3-8-6.2-8-4 0-6.2 3-6.2 8 0 5.1 2.2 8 6.2 8s6.2-2.9 6.2-8zM280.3 97.6h-4.8l-4.8-17.2h-.4l-4.8 17.2h-4.7l-6.4-23.3h4.7l4.2 17.8h.3l4.8-17.8h4.4l4.8 17.8h.4l4.2-17.8h4.6l-6.5 23.3zM292.1 74.3h4.4V78h.3c1.2-2.7 4-4.4 7-4.1 4.2-.3 7.8 2.8 8.1 7 0 .6 0 1.1-.1 1.7v15.1h-4.6V83.6c0-3.7-1.6-5.6-5-5.6-2.9-.1-5.4 2.1-5.6 5.1v14.4H292l.1-23.2zM319.2 65.2h4.6v32.4h-4.6V65.2zM330.2 85.9c-.6-6.1 3.9-11.5 9.9-12 6.1-.6 11.5 3.9 12 9.9.1.7.1 1.4 0 2.1.6 6.1-3.9 11.5-9.9 12.1-6.1.6-11.5-3.9-12.1-9.9 0-.8 0-1.5.1-2.2zm17.2 0c0-5-2.3-8-6.2-8-4 0-6.2 3-6.2 8 0 5.1 2.2 8 6.2 8 3.9 0 6.2-2.9 6.2-8zM357 91c0-4.2 3.1-6.6 8.7-7l6.3-.4v-2c0-2.5-1.6-3.8-4.8-3.8-2.6 0-4.3.9-4.9 2.6h-4.5c.5-4 4.2-6.6 9.5-6.6 5.8 0 9.1 2.9 9.1 7.8v15.9H372v-3.3h-.4c-1.5 2.4-4.2 3.8-7 3.7-3.9.4-7.3-2.4-7.7-6.3.1-.1.1-.4.1-.6zm15-2v-2l-5.7.4c-3.2.2-4.7 1.3-4.7 3.4 0 2.1 1.8 3.3 4.3 3.3 3 .3 5.7-1.9 6-4.9 0-.1 0-.1.1-.2zM382.6 85.9c0-7.4 3.8-12 9.7-12 3-.1 5.8 1.5 7.1 4.1h.3V65.2h4.6v32.4h-4.4v-3.7h-.4c-1.5 2.6-4.3 4.2-7.3 4.1-5.9 0-9.6-4.7-9.6-12.1zm4.7 0c0 4.9 2.3 7.9 6.2 7.9 3.9 0 6.3-3 6.3-7.9s-2.4-7.9-6.3-7.9c-3.8 0-6.2 3-6.2 7.9zM423.3 85.9c-.6-6.1 3.9-11.5 9.9-12 6.1-.6 11.5 3.9 12 9.9.1.7.1 1.4 0 2.1.6 6.1-3.8 11.5-9.9 12.1-6.1.6-11.5-3.8-12.1-9.9.1-.8.1-1.5.1-2.2zm17.3 0c0-5-2.3-8-6.2-8-4 0-6.2 3-6.2 8 0 5.1 2.2 8 6.2 8 3.9 0 6.2-2.9 6.2-8zM451.5 74.3h4.4V78h.3c1.2-2.7 4-4.4 7-4.1 4.2-.3 7.8 2.8 8.1 7 0 .6 0 1.1-.1 1.7v15.1h-4.6V83.6c0-3.7-1.6-5.6-5-5.6-2.9-.1-5.4 2.1-5.6 5.1v14.4h-4.6V74.3zM497.2 68.5v5.9h5v3.9h-5v12c0 2.4 1 3.5 3.3 3.5.6 0 1.2 0 1.8-.1v3.8c-.8.1-1.7.2-2.5.2-5.1 0-7.1-1.8-7.1-6.3V78.3H489v-3.9h3.7v-5.9h4.5zM508.6 65.2h4.6V78h.4c1.3-2.7 4.1-4.4 7.1-4.2 4.2-.2 7.8 3 8.1 7.2 0 .5 0 1-.1 1.4v15H524V83.7c0-3.7-1.7-5.6-5-5.6-3-.2-5.6 2-5.9 5v14.5h-4.6l.1-32.4zM555.4 91.3c-1.3 4.4-5.5 7.2-10.1 6.7-5.8.2-10.7-4.5-10.9-10.3 0-.6 0-1.2.1-1.7-.8-5.9 3.3-11.3 9.2-12.1.5-.1 1-.1 1.5-.1 6.5 0 10.4 4.4 10.4 11.7v1.6h-16.4v.3c-.3 3.4 2.2 6.4 5.6 6.7h.6c2.2.3 4.4-.8 5.5-2.8h4.5zm-16.2-7.5H551c.2-3.1-2.1-5.8-5.2-6h-.5c-3.3 0-6 2.6-6 5.9-.1 0-.1 0-.1.1z"/></svg>
\ No newline at end of file
diff --git a/public/images/common/appstore.svg b/public/images/common/appstore.svg
deleted file mode 100644
index 1dbcc9769e..0000000000
--- a/public/images/common/appstore.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="119.664" height="40"><path d="M110.135 0H9.535c-.367 0-.73 0-1.095.002-.306.002-.61.008-.919.013A13.215 13.215 0 0 0 5.517.19a6.665 6.665 0 0 0-1.9.627 6.438 6.438 0 0 0-1.62 1.18A6.258 6.258 0 0 0 .82 3.617 6.601 6.601 0 0 0 .195 5.52a12.993 12.993 0 0 0-.179 2.002c-.01.307-.01.615-.015.921V31.56c.005.31.006.61.015.921a12.992 12.992 0 0 0 .18 2.002 6.588 6.588 0 0 0 .624 1.905A6.208 6.208 0 0 0 1.998 38a6.274 6.274 0 0 0 1.618 1.179 6.7 6.7 0 0 0 1.901.63 13.455 13.455 0 0 0 2.004.177c.31.007.613.011.919.011.366.002.728.002 1.095.002h100.6c.36 0 .724 0 1.084-.002.304 0 .617-.004.922-.01a13.279 13.279 0 0 0 2-.178 6.804 6.804 0 0 0 1.908-.63A6.277 6.277 0 0 0 117.666 38a6.395 6.395 0 0 0 1.182-1.614 6.604 6.604 0 0 0 .619-1.905 13.506 13.506 0 0 0 .185-2.002c.004-.31.004-.61.004-.921.008-.364.008-.725.008-1.094V9.536c0-.366 0-.73-.008-1.092 0-.306 0-.614-.004-.92a13.507 13.507 0 0 0-.185-2.003 6.618 6.618 0 0 0-.62-1.903 6.466 6.466 0 0 0-2.798-2.8 6.768 6.768 0 0 0-1.908-.627 13.044 13.044 0 0 0-2-.176c-.305-.005-.618-.011-.922-.013-.36-.002-.725-.002-1.084-.002Z" style="fill:#a6a6a6"/><path d="M8.445 39.125c-.305 0-.602-.004-.904-.01a12.687 12.687 0 0 1-1.87-.164 5.884 5.884 0 0 1-1.656-.548 5.406 5.406 0 0 1-1.397-1.016 5.32 5.32 0 0 1-1.02-1.397 5.722 5.722 0 0 1-.544-1.657 12.414 12.414 0 0 1-.166-1.875c-.007-.21-.015-.913-.015-.913v-23.1s.009-.692.015-.895a12.37 12.37 0 0 1 .165-1.872 5.755 5.755 0 0 1 .544-1.662 5.373 5.373 0 0 1 1.015-1.398 5.565 5.565 0 0 1 1.402-1.023 5.823 5.823 0 0 1 1.653-.544A12.586 12.586 0 0 1 7.543.887l.902-.012h102.769l.913.013a12.385 12.385 0 0 1 1.858.162 5.938 5.938 0 0 1 1.671.548 5.594 5.594 0 0 1 2.415 2.42 5.763 5.763 0 0 1 .535 1.649 12.995 12.995 0 0 1 .174 1.887c.003.283.003.588.003.89.008.375.008.732.008 1.092v20.929c0 .363 0 .718-.008 1.075 0 .325 0 .623-.004.93a12.731 12.731 0 0 1-.17 1.853 5.739 5.739 0 0 1-.54 1.67 5.48 5.48 0 0 1-1.016 1.386 5.413 5.413 0 0 1-1.4 1.022 5.862 5.862 0 0 1-1.668.55 12.542 12.542 0 0 1-1.869.163c-.293.007-.6.011-.897.011l-1.084.002Z"/><g data-name="&lt;Group&gt;"><g data-name="&lt;Group&gt;"><path data-name="&lt;Path&gt;" d="M24.769 20.3a4.949 4.949 0 0 1 2.356-4.151 5.066 5.066 0 0 0-3.99-2.158c-1.68-.176-3.308 1.005-4.164 1.005-.872 0-2.19-.988-3.608-.958a5.315 5.315 0 0 0-4.473 2.728c-1.934 3.348-.491 8.269 1.361 10.976.927 1.325 2.01 2.805 3.428 2.753 1.387-.058 1.905-.885 3.58-.885 1.658 0 2.144.885 3.59.852 1.489-.025 2.426-1.332 3.32-2.67a10.962 10.962 0 0 0 1.52-3.092 4.782 4.782 0 0 1-2.92-4.4Zm-2.732-8.09a4.872 4.872 0 0 0 1.115-3.49 4.957 4.957 0 0 0-3.208 1.66 4.636 4.636 0 0 0-1.144 3.36 4.1 4.1 0 0 0 3.237-1.53Z" style="fill:#fff"/></g><path d="M42.302 27.14H37.57l-1.137 3.356h-2.005l4.484-12.418h2.083l4.483 12.418h-2.039Zm-4.243-1.55h3.752l-1.85-5.446h-.051Zm17.101.38c0 2.813-1.506 4.62-3.779 4.62a3.07 3.07 0 0 1-2.848-1.583h-.043v4.484h-1.86V21.442h1.8v1.506h.033a3.212 3.212 0 0 1 2.883-1.6c2.298 0 3.813 1.816 3.813 4.622Zm-1.91 0c0-1.833-.948-3.038-2.393-3.038-1.42 0-2.375 1.23-2.375 3.038 0 1.824.955 3.046 2.375 3.046 1.445 0 2.393-1.197 2.393-3.046Zm11.875 0c0 2.813-1.506 4.62-3.779 4.62a3.07 3.07 0 0 1-2.848-1.583h-.043v4.484h-1.859V21.442h1.799v1.506h.034a3.212 3.212 0 0 1 2.883-1.6c2.298 0 3.813 1.816 3.813 4.622Zm-1.91 0c0-1.833-.948-3.038-2.393-3.038-1.42 0-2.375 1.23-2.375 3.038 0 1.824.955 3.046 2.375 3.046 1.445 0 2.392-1.197 2.392-3.046Zm8.495 1.066c.138 1.232 1.334 2.04 2.97 2.04 1.566 0 2.693-.808 2.693-1.919 0-.964-.68-1.54-2.29-1.936l-1.609-.388c-2.28-.55-3.339-1.617-3.339-3.348 0-2.142 1.867-3.614 4.519-3.614 2.624 0 4.423 1.472 4.483 3.614h-1.876c-.112-1.239-1.136-1.987-2.634-1.987s-2.521.757-2.521 1.858c0 .878.654 1.395 2.255 1.79l1.368.336c2.548.603 3.606 1.626 3.606 3.443 0 2.323-1.85 3.778-4.793 3.778-2.754 0-4.614-1.42-4.734-3.667ZM83.346 19.3v2.142h1.722v1.472h-1.722v4.991c0 .776.345 1.137 1.102 1.137a5.808 5.808 0 0 0 .611-.043v1.463a5.104 5.104 0 0 1-1.032.086c-1.833 0-2.548-.689-2.548-2.445v-5.189h-1.316v-1.472h1.316V19.3Zm2.719 6.67c0-2.849 1.678-4.639 4.294-4.639 2.625 0 4.295 1.79 4.295 4.639 0 2.856-1.661 4.638-4.295 4.638-2.633 0-4.294-1.782-4.294-4.638Zm6.695 0c0-1.954-.895-3.108-2.401-3.108s-2.4 1.162-2.4 3.108c0 1.962.894 3.106 2.4 3.106s2.401-1.144 2.401-3.106Zm3.426-4.528h1.773v1.541h.043a2.16 2.16 0 0 1 2.177-1.635 2.866 2.866 0 0 1 .637.069v1.738a2.598 2.598 0 0 0-.835-.112 1.873 1.873 0 0 0-1.937 2.083v5.37h-1.858Zm13.198 6.395c-.25 1.643-1.85 2.771-3.898 2.771-2.634 0-4.269-1.764-4.269-4.595 0-2.84 1.644-4.682 4.19-4.682 2.506 0 4.08 1.72 4.08 4.466v.637h-6.394v.112a2.358 2.358 0 0 0 2.436 2.564 2.048 2.048 0 0 0 2.09-1.273Zm-6.282-2.702h4.526a2.177 2.177 0 0 0-2.22-2.298 2.292 2.292 0 0 0-2.306 2.298Z" style="fill:#fff"/></g><path d="M37.826 8.731a2.64 2.64 0 0 1 2.808 2.965c0 1.906-1.03 3.002-2.808 3.002h-2.155V8.73Zm-1.228 5.123h1.125a1.876 1.876 0 0 0 1.967-2.146 1.881 1.881 0 0 0-1.967-2.134h-1.125Zm5.082-1.41a2.133 2.133 0 1 1 4.248 0 2.134 2.134 0 1 1-4.247 0Zm3.334 0c0-.976-.439-1.547-1.208-1.547-.773 0-1.207.571-1.207 1.547 0 .984.434 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55Zm6.559 2.254h-.922l-.93-3.317h-.07l-.927 3.317h-.913l-1.242-4.503h.902l.806 3.436h.067l.926-3.436h.852l.926 3.436h.07l.803-3.436h.889Zm2.281-4.503h.855v.715h.066a1.348 1.348 0 0 1 1.344-.802 1.465 1.465 0 0 1 1.559 1.675v2.915h-.889v-2.692c0-.724-.314-1.084-.972-1.084a1.033 1.033 0 0 0-1.075 1.141v2.635h-.888Zm5.24-1.758h.888v6.26h-.888Zm2.124 4.007a2.133 2.133 0 1 1 4.247 0 2.134 2.134 0 1 1-4.247 0Zm3.333 0c0-.976-.439-1.547-1.208-1.547-.773 0-1.207.571-1.207 1.547 0 .984.434 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55Zm1.849.98c0-.81.604-1.278 1.676-1.344l1.22-.07v-.389c0-.475-.315-.744-.922-.744-.497 0-.84.182-.939.5h-.86c.09-.773.818-1.27 1.84-1.27 1.128 0 1.765.563 1.765 1.514v3.077h-.855v-.633h-.07a1.515 1.515 0 0 1-1.353.707 1.36 1.36 0 0 1-1.501-1.348Zm2.895-.384v-.377l-1.1.07c-.62.042-.9.253-.9.65 0 .405.351.64.834.64a1.062 1.062 0 0 0 1.166-.983Zm2.053-.596c0-1.423.732-2.324 1.87-2.324a1.484 1.484 0 0 1 1.38.79h.067V8.437h.888v6.26h-.851v-.71h-.07a1.563 1.563 0 0 1-1.415.785c-1.145 0-1.869-.901-1.869-2.328Zm.918 0c0 .955.45 1.53 1.203 1.53.75 0 1.212-.583 1.212-1.526 0-.938-.468-1.53-1.212-1.53-.748 0-1.203.58-1.203 1.526Zm6.964 0a2.133 2.133 0 1 1 4.247 0 2.134 2.134 0 1 1-4.247 0Zm3.333 0c0-.976-.438-1.547-1.208-1.547-.772 0-1.207.571-1.207 1.547 0 .984.435 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55Zm2.107-2.249h.855v.715h.066a1.348 1.348 0 0 1 1.344-.802 1.465 1.465 0 0 1 1.559 1.675v2.915h-.889v-2.692c0-.724-.314-1.084-.972-1.084a1.033 1.033 0 0 0-1.075 1.141v2.635h-.889Zm8.845-1.121v1.141h.976v.749h-.976v2.315c0 .472.194.679.637.679a2.967 2.967 0 0 0 .339-.021v.74a2.916 2.916 0 0 1-.484.046c-.988 0-1.381-.348-1.381-1.216v-2.543h-.715v-.749h.715V9.074Zm2.19-.637h.88v2.481h.07a1.386 1.386 0 0 1 1.374-.806 1.483 1.483 0 0 1 1.55 1.679v2.907h-.889V12.01c0-.72-.335-1.084-.963-1.084a1.052 1.052 0 0 0-1.134 1.142v2.63h-.888Zm9.056 5.045a1.828 1.828 0 0 1-1.95 1.303 2.045 2.045 0 0 1-2.081-2.325 2.077 2.077 0 0 1 2.076-2.352c1.253 0 2.009.856 2.009 2.27v.31h-3.18v.05a1.19 1.19 0 0 0 1.2 1.29 1.08 1.08 0 0 0 1.07-.546Zm-3.126-1.451h2.275a1.086 1.086 0 0 0-1.109-1.167 1.152 1.152 0 0 0-1.166 1.167Z" style="fill:#fff" data-name="&lt;Group&gt;"/></svg>
\ No newline at end of file
diff --git a/src/components/common/AppStoreButton/index.tsx b/src/components/common/AppStoreButton/index.tsx
deleted file mode 100644
index 65fe9eb30a..0000000000
--- a/src/components/common/AppStoreButton/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ReactElement } from 'react'
-import Image from 'next/image'
-
-import { useDarkMode } from '@/hooks/useDarkMode'
-import { MOBILE_APP_EVENTS, trackEvent } from '@/services/analytics'
-
-// App Store campaigns track the user interaction
-enum LINKS {
-  footer = 'https://apps.apple.com/app/apple-store/id1515759131?pt=119497694&ct=Web%20App%20Footer&mt=8',
-}
-
-const AppstoreButton = ({ placement }: { placement: keyof typeof LINKS }): ReactElement => {
-  const isDarkMode = useDarkMode()
-
-  const onClick = () => {
-    trackEvent({
-      ...MOBILE_APP_EVENTS.APPSTORE_BUTTON_CLICK,
-      label: placement,
-    })
-  }
-
-  return (
-    <a href={LINKS[placement]} target="_blank" rel="noreferrer" onClick={onClick}>
-      <Image
-        src={isDarkMode ? '/images/common/appstore-light.svg' : '/images/common/appstore.svg'}
-        alt="Download on the App Store"
-        width={105}
-        height={35}
-      />
-    </a>
-  )
-}
-
-export default AppstoreButton
diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
index 10a27177eb..de2d36f115 100644
--- a/src/components/common/Footer/index.tsx
+++ b/src/components/common/Footer/index.tsx
@@ -6,7 +6,6 @@ import { useRouter } from 'next/router'
 import css from './styles.module.css'
 import { AppRoutes } from '@/config/routes'
 import packageJson from '../../../../package.json'
-import AppstoreButton from '../AppStoreButton'
 import ExternalLink from '../ExternalLink'
 import MUILink from '@mui/material/Link'
 import { HELP_CENTER_URL, IS_DEV, IS_OFFICIAL_HOST } from '@/config/constants'
@@ -83,9 +82,6 @@ const Footer = (): ReactElement | null => {
             <SvgIcon component={GitHubIcon} inheritViewBox fontSize="inherit" sx={{ mr: 0.5 }} /> v{packageJson.version}
           </ExternalLink>
         </li>
-        <li>
-          <AppstoreButton placement="footer" />
-        </li>
       </ul>
     </footer>
   )
diff --git a/src/services/analytics/events/index.ts b/src/services/analytics/events/index.ts
index 7edb89c9e3..af373e8450 100644
--- a/src/services/analytics/events/index.ts
+++ b/src/services/analytics/events/index.ts
@@ -1,7 +1,6 @@
 export * from './addressBook'
 export * from './assets'
 export * from './createLoadSafe'
-export * from './mobileAppPromotion'
 export * from './modals'
 export * from './overview'
 export * from './safeApps'
diff --git a/src/services/analytics/events/mobileAppPromotion.ts b/src/services/analytics/events/mobileAppPromotion.ts
deleted file mode 100644
index e5bdb05c90..0000000000
--- a/src/services/analytics/events/mobileAppPromotion.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-const MOBILE_APP_CATEGORY = 'mobile-app-promotion'
-
-export const MOBILE_APP_EVENTS = {
-  APPSTORE_BUTTON_CLICK: {
-    action: 'appstore-button-click',
-    category: MOBILE_APP_CATEGORY,
-  },
-}

From 03b34bf83ffd148b8ee65a4f933dfdf7d6389a39 Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Fri, 22 Nov 2024 10:58:19 +0100
Subject: [PATCH 11/47] Tests: Add staking history tests (#4549)

---
 cypress/e2e/pages/staking.page.js            | 65 ++++++++++++++++++++
 cypress/e2e/regression/staking_history.cy.js | 39 ++++++++++++
 cypress/fixtures/staking_data.json           | 19 ++++++
 cypress/support/constants.js                 |  1 +
 4 files changed, 124 insertions(+)
 create mode 100644 cypress/e2e/pages/staking.page.js
 create mode 100644 cypress/e2e/regression/staking_history.cy.js
 create mode 100644 cypress/fixtures/staking_data.json

diff --git a/cypress/e2e/pages/staking.page.js b/cypress/e2e/pages/staking.page.js
new file mode 100644
index 0000000000..b22aa1d990
--- /dev/null
+++ b/cypress/e2e/pages/staking.page.js
@@ -0,0 +1,65 @@
+import * as main from './main.page.js'
+import * as create_tx from './create_tx.pages.js'
+
+const existStr = 'Exit'
+const validatorStatusStr = 'Validator status'
+
+export const dataFields = {
+  deposit: 'Deposit',
+  netRewardRate: 'Net reward rate',
+  netAnnualRewards: 'Net annual rewards',
+  netMonthlyRewards: 'Net monthly rewards',
+  fee: 'Fee',
+  validators: 'Validators',
+  activationTime: 'Activation time',
+  rewards: 'Rewards',
+}
+
+export const validatorStatusOptions = {
+  withdrwal: 'Withdrawn',
+}
+
+export const stakingTxs = {
+  claim:
+    '&id=multisig_0xAD1Cf279D18f34a13c3Bf9b79F4D427D5CD9505B_0xa763d9d136df5efc17e9825f4cca58033cd86a078b3e56500ccd1b53a2362e3b',
+  withdrawal:
+    '&id=multisig_0xAD1Cf279D18f34a13c3Bf9b79F4D427D5CD9505B_0x84f2ec635b73eaaea60ba813b12deaa370f413651ba08861cc0e9f080bffbecc',
+  stake:
+    '&id=multisig_0xAD1Cf279D18f34a13c3Bf9b79F4D427D5CD9505B_0xd1699838071a472d26963f2b823a4c835e9acd449d0376ca1d468a666903130d',
+}
+
+export function getPercentageRegex() {
+  return new RegExp('^\\d+(\\.\\d+)?\\s?%$')
+}
+
+export function getRewardRegex() {
+  return new RegExp('^\\d+(\\.\\d+)? ETH \\(\\$\\s?\\d{1,3}(,\\d{3})*\\)$')
+}
+
+export function checkTxHeaderData(data) {
+  main.verifyValuesExist(create_tx.transactionItem, data)
+}
+
+export function verifyValidatorCount(count) {
+  cy.get(create_tx.txRowTitle).contains(existStr).parent().next().contains(`Validator ${count}`).should('exist')
+}
+
+export function verifyValidatorStatus(status) {
+  cy.get(create_tx.txRowTitle).contains(validatorStatusStr).parent().next().contains(status).should('exist')
+}
+
+export function checkDataFields(field, value) {
+  cy.get(create_tx.txRowTitle)
+    .contains(field)
+    .parent()
+    .next()
+    .invoke('text')
+    .then((text) => {
+      const trimmedText = text.trim()
+      if (value instanceof RegExp) {
+        expect(trimmedText).to.match(value)
+      } else {
+        expect(trimmedText).to.include(value)
+      }
+    })
+}
diff --git a/cypress/e2e/regression/staking_history.cy.js b/cypress/e2e/regression/staking_history.cy.js
new file mode 100644
index 0000000000..bcb52b81ac
--- /dev/null
+++ b/cypress/e2e/regression/staking_history.cy.js
@@ -0,0 +1,39 @@
+import * as constants from '../../support/constants.js'
+import * as create_tx from '../pages/create_tx.pages.js'
+import * as staking from '../pages/staking.page.js'
+import * as staking_data from '../../fixtures/staking_data.json'
+
+const safe = 'eth:0xAD1Cf279D18f34a13c3Bf9b79F4D427D5CD9505B'
+const historyData = staking_data.type.history
+
+describe('Staking history tests', { defaultCommandTimeout: 30000 }, () => {
+  it('Verify Claim tx shows amount received', () => {
+    cy.visit(constants.transactionUrl + safe + staking.stakingTxs.claim)
+    staking.checkTxHeaderData([historyData.ETH_3205184, historyData.claim])
+    create_tx.verifyExpandedDetails([historyData.ETH_3205184, historyData.received])
+    create_tx.clickOnAdvancedDetails()
+    create_tx.verifyAdvancedDetails([historyData.call_batchWithdrawCLFee, historyData.StakingContract])
+  })
+
+  it('Verify Withdraw request shows amount of validators and Validator status', () => {
+    cy.visit(constants.transactionUrl + safe + staking.stakingTxs.withdrawal)
+    staking.checkTxHeaderData([historyData.withdrawal, historyData.validator_1])
+    staking.verifyValidatorCount(1)
+    staking.verifyValidatorStatus(staking.validatorStatusOptions.withdrwal)
+    create_tx.clickOnAdvancedDetails()
+    create_tx.verifyAdvancedDetails([historyData.call_requestValidatorsExit, historyData.StakingContract])
+  })
+
+  it('Verify Stake tx show the amount staked and proper fields', () => {
+    cy.visit(constants.transactionUrl + safe + staking.stakingTxs.stake)
+    staking.checkTxHeaderData([historyData.ETH32_2, historyData.stake])
+    staking.checkDataFields(staking.dataFields.deposit, historyData.ETH_32)
+    staking.checkDataFields(staking.dataFields.netRewardRate, staking.getPercentageRegex())
+    staking.checkDataFields(staking.dataFields.netAnnualRewards, staking.getRewardRegex())
+    staking.checkDataFields(staking.dataFields.netMonthlyRewards, staking.getRewardRegex())
+    staking.checkDataFields(staking.dataFields.fee, staking.getPercentageRegex())
+    staking.checkDataFields(staking.dataFields.validators, '1')
+    staking.checkDataFields(staking.dataFields.activationTime, historyData.activationTimeValue)
+    staking.checkDataFields(staking.dataFields.rewards, historyData.rewardsValue)
+  })
+})
diff --git a/cypress/fixtures/staking_data.json b/cypress/fixtures/staking_data.json
new file mode 100644
index 0000000000..2011deb8bd
--- /dev/null
+++ b/cypress/fixtures/staking_data.json
@@ -0,0 +1,19 @@
+{
+  "type": {
+    "history": {
+      "ETH_3205184": "32.05184 ETH",
+      "ETH32_2": "32 ETH",
+      "ETH_32": "ETH32",
+      "received": "Receive",
+      "call_batchWithdrawCLFee": "batchWithdrawCLFee",
+      "call_requestValidatorsExit": "requestValidatorsExit",
+      "StakingContract": "StakingContract",
+      "claim": "Claim",
+      "stake": "Stake",
+      "withdrawal": "Withdraw request",
+      "validator_1": "1 Validator",
+      "activationTimeValue": "10 hours 14 minutes",
+      "rewardsValue": "Approx. every 5 days after activation"
+    }
+  }
+}
diff --git a/cypress/support/constants.js b/cypress/support/constants.js
index 525d9a981e..f7cf8aead9 100644
--- a/cypress/support/constants.js
+++ b/cypress/support/constants.js
@@ -46,6 +46,7 @@ export const testAppUrl = 'https://safe-test-app.com'
 export const swapUrl = '/swap?safe='
 export const addressBookUrl = '/address-book?safe='
 export const appsUrlGeneral = '/apps?=safe='
+export const stakingUrl = '/stake?safe='
 export const appsCustomUrl = 'apps/custom?safe='
 export const BALANCE_URL = '/balances?safe='
 export const balanceNftsUrl = '/balances/nfts?safe='

From cf98da099e9120d72d96c41e8bc616e37764218e Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Fri, 22 Nov 2024 11:51:11 +0100
Subject: [PATCH 12/47] Chore: replace @walletconnect packages with
 @reown/walletkit (#4548)

* Chore: replace @walletconnect packages with @reown/walletkit

* Fix tests

* Add core
---
 package.json                                  |   5 +-
 .../__tests__/WalletConnectContext.test.tsx   |  10 +-
 .../WcProposalForm/CompatibilityWarning.tsx   |   4 +-
 .../WcProposalForm/ProposalVerification.tsx   |   4 +-
 .../__tests__/useCompatibilityWarning.test.ts |  18 +--
 .../components/WcProposalForm/index.tsx       |   6 +-
 .../WcProposalForm/useCompatibilityWarning.ts |   4 +-
 .../components/WcSessionManager/index.tsx     |   6 +-
 .../services/WalletConnectWallet.ts           |  23 ++--
 .../__tests__/WalletConnectWallet.test.ts     |  68 +++++-----
 yarn.lock                                     | 125 ++++--------------
 11 files changed, 98 insertions(+), 175 deletions(-)

diff --git a/package.json b/package.json
index ae5f294d79..1990d83eda 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "cypress:ci": "yarn cypress:run --config baseUrl=http://localhost:8080 --spec cypress/e2e/smoke/*.cy.js",
     "serve": "npx -y serve out -p ${REVERSE_PROXY_UI_PORT:=8080}",
     "static-serve": "yarn build && yarn serve",
-    "update-wc": "yarn add @walletconnect/web3wallet@latest @walletconnect/utils@latest; yarn add -D @walletconnect/types@latest",
     "prepare": "husky",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build --quiet"
@@ -56,6 +55,7 @@
     "@mui/material": "^6.1.6",
     "@mui/x-date-pickers": "^7.22.1",
     "@reduxjs/toolkit": "^2.2.6",
+    "@reown/walletkit": "^1.1.1",
     "@safe-global/api-kit": "^2.4.6",
     "@safe-global/protocol-kit": "^4.1.1",
     "@safe-global/safe-apps-sdk": "^9.1.0",
@@ -65,8 +65,8 @@
     "@safe-global/safe-modules-deployments": "^2.2.1",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",
+    "@walletconnect/core": "^2.17.2",
     "@walletconnect/utils": "^2.17.2",
-    "@walletconnect/web3wallet": "^1.16.1",
     "@web3-onboard/coinbase": "^2.2.6",
     "@web3-onboard/core": "^2.21.4",
     "@web3-onboard/injected-wallets": "^2.11.2",
@@ -137,7 +137,6 @@
     "@types/react-gtm-module": "^2.0.3",
     "@types/semver": "^7.3.10",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@walletconnect/types": "^2.17.2",
     "cross-env": "^7.0.3",
     "cypress": "^13.15.2",
     "cypress-file-upload": "^5.0.8",
diff --git a/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx b/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
index d2929f24ca..17364f2aaf 100644
--- a/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
+++ b/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
@@ -2,7 +2,7 @@ import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { toBeHex } from 'ethers'
 import { useContext } from 'react'
 import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import type { SessionTypes } from '@walletconnect/types'
 
 import { act, fireEvent, render, waitFor } from '@/tests/test-utils'
@@ -276,7 +276,7 @@ describe('WalletConnectProvider', () => {
           request: {},
           chainId: 'eip155:5', // Goerli
         },
-      } as unknown as Web3WalletTypes.SessionRequest)
+      } as unknown as WalletKitTypes.SessionRequest)
 
       await waitFor(() => {
         expect(sendSessionResponseSpy).toHaveBeenCalledWith('topic', {
@@ -335,7 +335,7 @@ describe('WalletConnectProvider', () => {
           request: {},
           chainId: 'eip155:1', // Mainnet
         },
-      } as unknown as Web3WalletTypes.SessionRequest)
+      } as unknown as WalletKitTypes.SessionRequest)
 
       await waitFor(() => {
         expect(sendSessionResponseSpy).toHaveBeenCalledWith('topic', {
@@ -404,7 +404,7 @@ describe('WalletConnectProvider', () => {
           request: { method: 'fake', params: [] },
           chainId: 'eip155:5', // Goerli
         },
-      } as unknown as Web3WalletTypes.SessionRequest)
+      } as unknown as WalletKitTypes.SessionRequest)
 
       expect(mockRequest).toHaveBeenCalledWith(
         1,
@@ -476,7 +476,7 @@ describe('WalletConnectProvider', () => {
           request: {},
           chainId: 'eip155:5', // Goerli
         },
-      } as unknown as Web3WalletTypes.SessionRequest)
+      } as unknown as WalletKitTypes.SessionRequest)
 
       expect(sendSessionResponseSpy).not.toHaveBeenCalled()
 
diff --git a/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx b/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx
index d74aed5dfd..cb6c4384ea 100644
--- a/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx
+++ b/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx
@@ -1,6 +1,6 @@
 import { Alert, Typography } from '@mui/material'
 import { useCallback } from 'react'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 
 import ChainIndicator from '@/components/common/ChainIndicator'
 import { useCompatibilityWarning } from './useCompatibilityWarning'
@@ -15,7 +15,7 @@ export const CompatibilityWarning = ({
   proposal,
   chainIds,
 }: {
-  proposal: Web3WalletTypes.SessionProposal
+  proposal: WalletKitTypes.SessionProposal
   chainIds: Array<string>
 }) => {
   const { safe } = useSafeInfo()
diff --git a/src/features/walletconnect/components/WcProposalForm/ProposalVerification.tsx b/src/features/walletconnect/components/WcProposalForm/ProposalVerification.tsx
index 869c10bcbf..55113eebf0 100644
--- a/src/features/walletconnect/components/WcProposalForm/ProposalVerification.tsx
+++ b/src/features/walletconnect/components/WcProposalForm/ProposalVerification.tsx
@@ -1,11 +1,11 @@
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import { Alert, SvgIcon } from '@mui/material'
 import AlertIcon from '@/public/images/notifications/alert.svg'
 import type { ReactElement } from 'react'
 import { getPeerName } from '@/features/walletconnect/services/utils'
 import css from './styles.module.css'
 
-const ProposalVerification = ({ proposal }: { proposal: Web3WalletTypes.SessionProposal }): ReactElement | null => {
+const ProposalVerification = ({ proposal }: { proposal: WalletKitTypes.SessionProposal }): ReactElement | null => {
   const { isScam, validation } = proposal.verifyContext.verified
 
   if (validation === 'UNKNOWN' || validation === 'VALID') {
diff --git a/src/features/walletconnect/components/WcProposalForm/__tests__/useCompatibilityWarning.test.ts b/src/features/walletconnect/components/WcProposalForm/__tests__/useCompatibilityWarning.test.ts
index c5ae3bc326..0d7fb93e85 100644
--- a/src/features/walletconnect/components/WcProposalForm/__tests__/useCompatibilityWarning.test.ts
+++ b/src/features/walletconnect/components/WcProposalForm/__tests__/useCompatibilityWarning.test.ts
@@ -1,7 +1,7 @@
 import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { renderHook } from '@/tests/test-utils'
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import { useCompatibilityWarning } from '../useCompatibilityWarning'
 import * as wcUtils from '@/features/walletconnect/services/utils'
 
@@ -13,7 +13,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: 'Fake Bridge' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
 
@@ -30,7 +30,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: '' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
 
@@ -50,7 +50,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: 'Fake Bridge' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
 
@@ -68,7 +68,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: '' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
 
@@ -88,7 +88,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: 'Fake dApp' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, true))
 
@@ -105,7 +105,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: '' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, true))
 
@@ -124,7 +124,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: 'Fake dApp' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false), {
         initialReduxState: {
@@ -163,7 +163,7 @@ describe('useCompatibilityWarning', () => {
       const proposal = {
         params: { proposer: { metadata: { name: 'Fake dApp' } } },
         verifyContext: { verified: { origin: '' } },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       const { result } = renderHook(() => useCompatibilityWarning(proposal, false))
 
diff --git a/src/features/walletconnect/components/WcProposalForm/index.tsx b/src/features/walletconnect/components/WcProposalForm/index.tsx
index 2f0bf672c8..7b8bb5f798 100644
--- a/src/features/walletconnect/components/WcProposalForm/index.tsx
+++ b/src/features/walletconnect/components/WcProposalForm/index.tsx
@@ -15,7 +15,7 @@ import { WALLETCONNECT_EVENTS } from '@/services/analytics/events/walletconnect'
 
 import { asError } from '@/services/exceptions/utils'
 import { Button, Checkbox, CircularProgress, Divider, FormControlLabel, Typography } from '@mui/material'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import type { ChangeEvent, ReactElement } from 'react'
 import { type Dispatch, type SetStateAction, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { CompatibilityWarning } from './CompatibilityWarning'
@@ -25,8 +25,8 @@ import { useSanctionedAddress } from '@/hooks/useSanctionedAddress'
 import BlockedAddress from '@/components/common/BlockedAddress'
 
 type ProposalFormProps = {
-  proposal: Web3WalletTypes.SessionProposal
-  setProposal: Dispatch<SetStateAction<Web3WalletTypes.SessionProposal | undefined>>
+  proposal: WalletKitTypes.SessionProposal
+  setProposal: Dispatch<SetStateAction<WalletKitTypes.SessionProposal | undefined>>
   onApprove: () => void
 }
 
diff --git a/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts b/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts
index 89c36d85fa..7e7093165b 100644
--- a/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts
+++ b/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import type { AlertColor } from '@mui/material'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import useChains from '@/hooks/useChains'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { capitalize } from '@/utils/formatters'
@@ -46,7 +46,7 @@ export const _getWarning = (origin: string, name: string, isUnsupportedChain: bo
 }
 
 export const useCompatibilityWarning = (
-  proposal: Web3WalletTypes.SessionProposal,
+  proposal: WalletKitTypes.SessionProposal,
   isUnsupportedChain: boolean,
 ): (typeof Warnings)[string] => {
   const { configs } = useChains()
diff --git a/src/features/walletconnect/components/WcSessionManager/index.tsx b/src/features/walletconnect/components/WcSessionManager/index.tsx
index 689c95b11d..5109d7a50e 100644
--- a/src/features/walletconnect/components/WcSessionManager/index.tsx
+++ b/src/features/walletconnect/components/WcSessionManager/index.tsx
@@ -3,7 +3,7 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import { asError } from '@/services/exceptions/utils'
 import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import { useCallback, useContext, useEffect, useState } from 'react'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { WalletKitTypes } from '@reown/walletkit'
 import type { SessionTypes } from '@walletconnect/types'
 import { WalletConnectContext } from '@/features/walletconnect/WalletConnectContext'
 import WcConnectionForm from '../WcConnectionForm'
@@ -28,11 +28,11 @@ const WcSessionManager = ({ sessions, uri }: WcSessionManagerProps) => {
   const { walletConnect, error, setError, open, setOpen, setIsLoading } = useContext(WalletConnectContext)
   const { safe, safeAddress } = useSafeInfo()
   const { chainId } = safe
-  const [proposal, setProposal] = useState<Web3WalletTypes.SessionProposal>()
+  const [proposal, setProposal] = useState<WalletKitTypes.SessionProposal>()
 
   // On session approve
   const onApprove = useCallback(
-    async (proposalData?: Web3WalletTypes.SessionProposal) => {
+    async (proposalData?: WalletKitTypes.SessionProposal) => {
       const sessionProposal = proposalData || proposal
 
       if (!walletConnect || !chainId || !safeAddress || !sessionProposal) return
diff --git a/src/features/walletconnect/services/WalletConnectWallet.ts b/src/features/walletconnect/services/WalletConnectWallet.ts
index 51b5747c6c..62aef73ce9 100644
--- a/src/features/walletconnect/services/WalletConnectWallet.ts
+++ b/src/features/walletconnect/services/WalletConnectWallet.ts
@@ -1,8 +1,7 @@
 import { Core } from '@walletconnect/core'
-import { Web3Wallet } from '@walletconnect/web3wallet'
+import { WalletKit, type WalletKitTypes } from '@reown/walletkit'
 import { buildApprovedNamespaces, getSdkError } from '@walletconnect/utils'
-import type Web3WalletType from '@walletconnect/web3wallet'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import type Web3WalletType from '@reown/walletkit'
 import type { ProposalTypes, SessionTypes } from '@walletconnect/types'
 import { type JsonRpcResponse } from '@walletconnect/jsonrpc-utils'
 import uniq from 'lodash/uniq'
@@ -12,8 +11,8 @@ import { EIP155, SAFE_COMPATIBLE_EVENTS, SAFE_COMPATIBLE_METHODS, SAFE_WALLET_ME
 import { invariant } from '@/utils/helpers'
 import { getEip155ChainId, stripEip155Prefix } from './utils'
 
-const SESSION_ADD_EVENT = 'session_add' as Web3WalletTypes.Event // Workaround: WalletConnect doesn't emit session_add event
-const SESSION_REJECT_EVENT = 'session_reject' as Web3WalletTypes.Event // Workaround: WalletConnect doesn't emit session_reject event
+const SESSION_ADD_EVENT = 'session_add' as WalletKitTypes.Event // Workaround: WalletConnect doesn't emit session_add event
+const SESSION_REJECT_EVENT = 'session_reject' as WalletKitTypes.Event // Workaround: WalletConnect doesn't emit session_reject event
 
 function assertWeb3Wallet<T extends Web3WalletType | null>(web3Wallet: T): asserts web3Wallet {
   return invariant(web3Wallet, 'WalletConnect not initialized')
@@ -39,7 +38,7 @@ class WalletConnectWallet {
       customStoragePrefix: LS_NAMESPACE,
     })
 
-    const web3wallet = await Web3Wallet.init({
+    const web3wallet = await WalletKit.init({
       core,
       metadata: SAFE_WALLET_METADATA,
     })
@@ -81,7 +80,7 @@ class WalletConnectWallet {
     })
   }
 
-  private getNamespaces(proposal: Web3WalletTypes.SessionProposal, currentChainId: string, safeAddress: string) {
+  private getNamespaces(proposal: WalletKitTypes.SessionProposal, currentChainId: string, safeAddress: string) {
     // As workaround, we pretend to support all the required chains plus the current Safe's chain
     const requiredChains = proposal.params.requiredNamespaces[EIP155]?.chains || []
 
@@ -108,7 +107,7 @@ class WalletConnectWallet {
   }
 
   public async approveSession(
-    proposal: Web3WalletTypes.SessionProposal,
+    proposal: WalletKitTypes.SessionProposal,
     currentChainId: string,
     safeAddress: string,
     sessionProperties?: ProposalTypes.SessionProperties,
@@ -182,7 +181,7 @@ class WalletConnectWallet {
     }
   }
 
-  public async rejectSession(proposal: Web3WalletTypes.SessionProposal) {
+  public async rejectSession(proposal: WalletKitTypes.SessionProposal) {
     assertWeb3Wallet(this.web3Wallet)
 
     await this.web3Wallet.rejectSession({
@@ -197,7 +196,7 @@ class WalletConnectWallet {
   /**
    * Subscribe to session proposals
    */
-  public onSessionPropose(handler: (e: Web3WalletTypes.SessionProposal) => void) {
+  public onSessionPropose(handler: (e: WalletKitTypes.SessionProposal) => void) {
     // Subscribe to the session proposal event
     this.web3Wallet?.on('session_proposal', handler)
 
@@ -210,7 +209,7 @@ class WalletConnectWallet {
   /**
    * Subscribe to session proposal rejections
    */
-  public onSessionReject(handler: (e: Web3WalletTypes.SessionProposal) => void) {
+  public onSessionReject(handler: (e: WalletKitTypes.SessionProposal) => void) {
     // @ts-expect-error - custom event payload
     this.web3Wallet?.on(SESSION_REJECT_EVENT, handler)
 
@@ -273,7 +272,7 @@ class WalletConnectWallet {
   /**
    * Subscribe to requests
    */
-  public onRequest(handler: (event: Web3WalletTypes.SessionRequest) => void) {
+  public onRequest(handler: (event: WalletKitTypes.SessionRequest) => void) {
     this.web3Wallet?.on('session_request', handler)
 
     return () => {
diff --git a/src/features/walletconnect/services/__tests__/WalletConnectWallet.test.ts b/src/features/walletconnect/services/__tests__/WalletConnectWallet.test.ts
index d9a33cdc14..132b134123 100644
--- a/src/features/walletconnect/services/__tests__/WalletConnectWallet.test.ts
+++ b/src/features/walletconnect/services/__tests__/WalletConnectWallet.test.ts
@@ -1,6 +1,6 @@
 import { toBeHex } from 'ethers'
 import type { ProposalTypes, SessionTypes, SignClientTypes, Verify } from '@walletconnect/types'
-import type { IWeb3Wallet, Web3WalletTypes } from '@walletconnect/web3wallet'
+import type { IWalletKit, WalletKitTypes } from '@reown/walletkit'
 
 import WalletConnectWallet from '../WalletConnectWallet'
 
@@ -8,8 +8,8 @@ jest.mock('@walletconnect/core', () => ({
   Core: jest.fn(),
 }))
 
-jest.mock('@walletconnect/web3wallet', () => {
-  class MockWeb3Wallet implements Partial<IWeb3Wallet> {
+jest.mock('@reown/walletkit', () => {
+  class MockWeb3Wallet implements Partial<IWalletKit> {
     static init() {
       const wallet = new MockWeb3Wallet()
 
@@ -20,7 +20,7 @@ jest.mock('@walletconnect/web3wallet', () => {
       pairing: {
         pair: jest.fn(),
       },
-    } as unknown as IWeb3Wallet['core']
+    } as unknown as IWalletKit['core']
 
     approveSession = jest.fn()
     updateSession = jest.fn()
@@ -32,7 +32,7 @@ jest.mock('@walletconnect/web3wallet', () => {
 
     events = {
       emit: jest.fn(),
-    } as unknown as IWeb3Wallet['events']
+    } as unknown as IWalletKit['events']
     on = jest.fn()
     off = jest.fn()
 
@@ -40,7 +40,7 @@ jest.mock('@walletconnect/web3wallet', () => {
   }
 
   return {
-    Web3Wallet: MockWeb3Wallet,
+    WalletKit: MockWeb3Wallet,
   }
 })
 
@@ -60,7 +60,7 @@ describe('WalletConnectWallet', () => {
 
   describe('connect', () => {
     it('should call pair with the correct parameters', async () => {
-      const pairSpy = jest.spyOn(((wallet as any).web3Wallet as IWeb3Wallet).core.pairing, 'pair')
+      const pairSpy = jest.spyOn(((wallet as any).web3Wallet as IWalletKit).core.pairing, 'pair')
 
       await wallet.connect('wc:123')
 
@@ -70,7 +70,7 @@ describe('WalletConnectWallet', () => {
 
   describe('chainChanged', () => {
     it('should call emitSessionEvent with the correct parameters', async () => {
-      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'emitSessionEvent')
+      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'emitSessionEvent')
 
       await wallet.chainChanged('topic1', '1')
 
@@ -87,7 +87,7 @@ describe('WalletConnectWallet', () => {
 
   describe('accountsChanged', () => {
     it('should call emitSessionEvent with the correct parameters', async () => {
-      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'emitSessionEvent')
+      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'emitSessionEvent')
 
       await wallet.accountsChanged('topic1', '1', toBeHex('0x123', 20))
 
@@ -104,7 +104,7 @@ describe('WalletConnectWallet', () => {
 
   describe('approveSession', () => {
     it('should approve the session with proposed required/optional chains/methods and required events', async () => {
-      const approveSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'approveSession')
+      const approveSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'approveSession')
       approveSessionSpy.mockResolvedValue({
         namespaces: {
           eip155: {},
@@ -151,7 +151,7 @@ describe('WalletConnectWallet', () => {
             },
           },
         },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       await wallet.approveSession(
         proposal,
@@ -183,7 +183,7 @@ describe('WalletConnectWallet', () => {
     })
 
     it('should call approveSession with correct namespace if no requiredNamespace is given', async () => {
-      const approveSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'approveSession')
+      const approveSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'approveSession')
       approveSessionSpy.mockResolvedValue({
         namespaces: {
           eip155: {},
@@ -206,7 +206,7 @@ describe('WalletConnectWallet', () => {
             },
           },
         },
-      } as unknown as Web3WalletTypes.SessionProposal
+      } as unknown as WalletKitTypes.SessionProposal
 
       await wallet.approveSession(
         proposal,
@@ -230,8 +230,8 @@ describe('WalletConnectWallet', () => {
     })
 
     it('should call updateSession with the correct parameters', async () => {
-      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'emitSessionEvent')
-      jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'approveSession').mockResolvedValue({
+      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'emitSessionEvent')
+      jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'approveSession').mockResolvedValue({
         topic: 'topic',
         namespaces: {
           eip155: {},
@@ -269,8 +269,8 @@ describe('WalletConnectWallet', () => {
     })
 
     it('should call emitSessionEvent with the correct parameters', async () => {
-      const emitSpy = jest.spyOn(((wallet as any).web3Wallet as IWeb3Wallet).events, 'emit')
-      jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'approveSession').mockResolvedValue({
+      const emitSpy = jest.spyOn(((wallet as any).web3Wallet as IWalletKit).events, 'emit')
+      jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'approveSession').mockResolvedValue({
         topic: 'topic',
         namespaces: {
           eip155: {},
@@ -305,8 +305,8 @@ describe('WalletConnectWallet', () => {
 
   describe('updateSession', () => {
     it('should disconnect unsupported chains', async () => {
-      const disconnectSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'disconnectSession')
-      const emitSpy = jest.spyOn(((wallet as any).web3Wallet as IWeb3Wallet).events, 'emit')
+      const disconnectSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'disconnectSession')
+      const emitSpy = jest.spyOn(((wallet as any).web3Wallet as IWalletKit).events, 'emit')
 
       const session = {
         topic: 'topic1',
@@ -334,8 +334,8 @@ describe('WalletConnectWallet', () => {
     })
 
     it('should update the session with the correct namespace', async () => {
-      const updateSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'updateSession')
-      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'emitSessionEvent')
+      const updateSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'updateSession')
+      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'emitSessionEvent')
 
       const session = {
         topic: 'topic1',
@@ -367,8 +367,8 @@ describe('WalletConnectWallet', () => {
     })
 
     it('should not update the session if the chainId and account is already in the namespace', async () => {
-      const updateSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'updateSession')
-      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'emitSessionEvent')
+      const updateSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'updateSession')
+      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'emitSessionEvent')
 
       const session = {
         topic: 'topic1',
@@ -388,7 +388,7 @@ describe('WalletConnectWallet', () => {
     })
 
     it('should call emitSessionEvent with the correct parameters', async () => {
-      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'emitSessionEvent')
+      const emitSessionEventSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'emitSessionEvent')
 
       const session = {
         topic: 'topic',
@@ -438,8 +438,8 @@ describe('WalletConnectWallet', () => {
 
   describe('onSessionPropose', () => {
     it('should subscribe to session_proposal event', () => {
-      const onSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'on')
-      const offSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'off')
+      const onSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'on')
+      const offSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'off')
 
       const handler = jest.fn()
 
@@ -456,8 +456,8 @@ describe('WalletConnectWallet', () => {
 
   describe('onSessionAdd', () => {
     it('should subscribe to SESSION_ADD_EVENT event', () => {
-      const onSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'on')
-      const offSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'off')
+      const onSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'on')
+      const offSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'off')
 
       const handler = jest.fn()
 
@@ -474,8 +474,8 @@ describe('WalletConnectWallet', () => {
 
   describe('onSessionDelete', () => {
     it('should subscribe to session_delete event', () => {
-      const onSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'on')
-      const offSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'off')
+      const onSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'on')
+      const offSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'off')
 
       const handler = jest.fn()
 
@@ -493,7 +493,7 @@ describe('WalletConnectWallet', () => {
   describe('disconnectSession', () => {
     it('should call disconnectSession with the correct parameters', async () => {
       const session = { topic: 'topic1', namespaces: {} } as SessionTypes.Struct
-      const disconnectSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'disconnectSession')
+      const disconnectSessionSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'disconnectSession')
 
       await wallet.disconnectSession(session)
 
@@ -526,8 +526,8 @@ describe('WalletConnectWallet', () => {
   describe('onRequest', () => {
     it('should subscribe to session_request event', () => {
       const handler = jest.fn()
-      const onSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'on')
-      const offSpy = jest.spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'off')
+      const onSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'on')
+      const offSpy = jest.spyOn((wallet as any).web3Wallet as IWalletKit, 'off')
 
       const unsubscribe = wallet.onRequest(handler)
 
@@ -543,7 +543,7 @@ describe('WalletConnectWallet', () => {
   describe('sendSessionResponse', () => {
     it('should call respondSessionRequest with the correct parameters', async () => {
       const respondSessionRequestSpy = jest
-        .spyOn((wallet as any).web3Wallet as IWeb3Wallet, 'respondSessionRequest')
+        .spyOn((wallet as any).web3Wallet as IWalletKit, 'respondSessionRequest')
         .mockResolvedValue(undefined)
 
       await wallet.sendSessionResponse('topic1', { id: 1, jsonrpc: '2.0', result: 'result' })
diff --git a/yarn.lock b/yarn.lock
index 4f212c8460..7019bef465 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4265,6 +4265,19 @@
     redux-thunk "^3.1.0"
     reselect "^5.1.0"
 
+"@reown/walletkit@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@reown/walletkit/-/walletkit-1.1.1.tgz#8d4e77a1fd92d16827dbb11338d60fd6000eab08"
+  integrity sha512-GTPksxBO6VAsqiQ0oH2jt8C845Y7redpI4OxRy31vf7KKDPPGfldbsTYZ+FP9xSda00dCJJKuXhzewZT/xHuDg==
+  dependencies:
+    "@walletconnect/core" "2.17.1"
+    "@walletconnect/jsonrpc-provider" "1.0.14"
+    "@walletconnect/jsonrpc-utils" "1.0.8"
+    "@walletconnect/logger" "2.1.2"
+    "@walletconnect/sign-client" "2.17.1"
+    "@walletconnect/types" "2.17.1"
+    "@walletconnect/utils" "2.17.1"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -4662,7 +4675,7 @@
     "@stablelib/binary" "^1.0.1"
     "@stablelib/wipe" "^1.0.1"
 
-"@stablelib/sha256@1.0.1", "@stablelib/sha256@^1.0.1":
+"@stablelib/sha256@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@stablelib/sha256/-/sha256-1.0.1.tgz#77b6675b67f9b0ea081d2e31bda4866297a3ae4f"
   integrity sha512-GIIH3e6KH+91FqGV42Kcj71Uefd/QEe7Dy42sBTeqppXV95ggCcxLTk39bEr+lZfJmp+ghsR07J++ORkRELsBQ==
@@ -6479,25 +6492,6 @@
     loupe "^2.3.7"
     pretty-format "^29.7.0"
 
-"@walletconnect/auth-client@2.1.2":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/auth-client/-/auth-client-2.1.2.tgz#cee304fb0cdca76f6bf4aafac96ef9301862a7e8"
-  integrity sha512-ubJLn+vGb8sTdBFX6xAh4kjR5idrtS3RBngQWaJJJpEPBQmxMb8pM2q0FIRs8Is4K6jKy+uEhusMV+7ZBmTzjw==
-  dependencies:
-    "@ethersproject/hash" "^5.7.0"
-    "@ethersproject/transactions" "^5.7.0"
-    "@stablelib/random" "^1.0.2"
-    "@stablelib/sha256" "^1.0.1"
-    "@walletconnect/core" "^2.10.1"
-    "@walletconnect/events" "^1.0.1"
-    "@walletconnect/heartbeat" "^1.2.1"
-    "@walletconnect/jsonrpc-utils" "^1.0.8"
-    "@walletconnect/logger" "^2.0.1"
-    "@walletconnect/time" "^1.0.2"
-    "@walletconnect/utils" "^2.10.1"
-    events "^3.3.0"
-    isomorphic-unfetch "^3.1.0"
-
 "@walletconnect/core@2.17.1":
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.17.1.tgz#8ee51d630068e4450014fe62a76af895ab1d349d"
@@ -6521,10 +6515,10 @@
     lodash.isequal "4.5.0"
     uint8arrays "3.1.0"
 
-"@walletconnect/core@^2.10.1":
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.16.0.tgz#751eb0b9bcd24a0035c87a1be63c830b86dad3de"
-  integrity sha512-B/PPcg0MRb9pqB6nupVqEFGI5cFK5HNXYoi+y6Qaq53JIjHa6KANskNkj567iegETaPUZIniHENry7M8mHN3Bw==
+"@walletconnect/core@^2.17.2":
+  version "2.17.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.17.2.tgz#877dc03f190d7b262bff8ce346330fdf1019cd83"
+  integrity sha512-O9VUsFg78CbvIaxfQuZMsHcJ4a2Z16DRz/O4S+uOAcGKhH/i/ln8hp864Tb+xRvifWSzaZ6CeAVxk657F+pscA==
   dependencies:
     "@walletconnect/heartbeat" "1.2.2"
     "@walletconnect/jsonrpc-provider" "1.0.14"
@@ -6537,8 +6531,9 @@
     "@walletconnect/relay-auth" "1.0.4"
     "@walletconnect/safe-json" "1.0.2"
     "@walletconnect/time" "1.0.2"
-    "@walletconnect/types" "2.16.0"
-    "@walletconnect/utils" "2.16.0"
+    "@walletconnect/types" "2.17.2"
+    "@walletconnect/utils" "2.17.2"
+    "@walletconnect/window-getters" "1.0.1"
     events "3.3.0"
     lodash.isequal "4.5.0"
     uint8arrays "3.1.0"
@@ -6584,15 +6579,6 @@
     "@walletconnect/time" "^1.0.2"
     events "^3.3.0"
 
-"@walletconnect/heartbeat@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/heartbeat/-/heartbeat-1.2.1.tgz#afaa3a53232ae182d7c9cff41c1084472d8f32e9"
-  integrity sha512-yVzws616xsDLJxuG/28FqtZ5rzrTA4gUjdEMTbWB5Y8V1XHRmqq4efAxCw5ie7WjbXFSUyBHaWlMR+2/CpQC5Q==
-  dependencies:
-    "@walletconnect/events" "^1.0.1"
-    "@walletconnect/time" "^1.0.2"
-    tslib "1.14.1"
-
 "@walletconnect/jsonrpc-http-connection@1.0.8":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.8.tgz#2f4c3948f074960a3edd07909560f3be13e2c7ae"
@@ -6656,7 +6642,7 @@
     idb-keyval "^6.2.1"
     unstorage "^1.9.0"
 
-"@walletconnect/logger@2.1.2", "@walletconnect/logger@^2.0.1":
+"@walletconnect/logger@2.1.2":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@walletconnect/logger/-/logger-2.1.2.tgz#813c9af61b96323a99f16c10089bfeb525e2a272"
   integrity sha512-aAb28I3S6pYXZHQm5ESB+V6rDqIYfsnHaQyzFbwUUBFY4H0OXx/YtTl8lvhUNhMMfb9UxbwEBS253TlXUYJWSw==
@@ -6737,18 +6723,6 @@
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/types@2.16.0":
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.16.0.tgz#1719bbde7bd6316e8167ab47e6cbb441c4f168dc"
-  integrity sha512-n+vpli0eonAzG9wtOgmjYbJEMGz2gvOttU2VnzNkeVmvDz7otVuPgtk+7BNyRofZ6rBW6rriW5cCKtmbzvUSzA==
-  dependencies:
-    "@walletconnect/events" "1.0.1"
-    "@walletconnect/heartbeat" "1.2.2"
-    "@walletconnect/jsonrpc-types" "1.0.4"
-    "@walletconnect/keyvaluestorage" "1.1.1"
-    "@walletconnect/logger" "2.1.2"
-    events "3.3.0"
-
 "@walletconnect/types@2.17.1":
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.17.1.tgz#425dedbe5853231252d081f61448c55ecd341c96"
@@ -6761,7 +6735,7 @@
     "@walletconnect/logger" "2.1.2"
     events "3.3.0"
 
-"@walletconnect/types@2.17.2", "@walletconnect/types@^2.17.2":
+"@walletconnect/types@2.17.2":
   version "2.17.2"
   resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.17.2.tgz#f9afff242563be33f377de689b03b482f5b20aee"
   integrity sha512-j/+0WuO00lR8ntu7b1+MKe/r59hNwYLFzW0tTmozzhfAlDL+dYwWasDBNq4AH8NbVd7vlPCQWmncH7/6FVtOfQ==
@@ -6791,28 +6765,6 @@
     events "3.3.0"
     lodash "4.17.21"
 
-"@walletconnect/utils@2.16.0", "@walletconnect/utils@^2.10.1":
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.16.0.tgz#0696655035dce9efcc209e5c789b7e22b085a70d"
-  integrity sha512-ASh9yyqzP4GLIU400rKEvBefcM5GFJbi2Iw7p0SFDyFC5WZYYyllU3WopU+YV/7bbukCMkthEIdioWYlpmjERQ==
-  dependencies:
-    "@stablelib/chacha20poly1305" "1.0.1"
-    "@stablelib/hkdf" "1.0.1"
-    "@stablelib/random" "1.0.2"
-    "@stablelib/sha256" "1.0.1"
-    "@stablelib/x25519" "1.0.3"
-    "@walletconnect/relay-api" "1.0.11"
-    "@walletconnect/relay-auth" "1.0.4"
-    "@walletconnect/safe-json" "1.0.2"
-    "@walletconnect/time" "1.0.2"
-    "@walletconnect/types" "2.16.0"
-    "@walletconnect/window-getters" "1.0.1"
-    "@walletconnect/window-metadata" "1.0.1"
-    detect-browser "5.3.0"
-    elliptic "^6.5.7"
-    query-string "7.1.3"
-    uint8arrays "3.1.0"
-
 "@walletconnect/utils@2.17.1":
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.17.1.tgz#fc57ffb89fc101fa1bf015de016ea01091d10ae0"
@@ -6839,7 +6791,7 @@
     query-string "7.1.3"
     uint8arrays "3.1.0"
 
-"@walletconnect/utils@^2.17.2":
+"@walletconnect/utils@2.17.2", "@walletconnect/utils@^2.17.2":
   version "2.17.2"
   resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.17.2.tgz#b4b12e3f5ebbfd883b2a5c87fb818e53501dc7ea"
   integrity sha512-T7eLRiuw96fgwUy2A5NZB5Eu87ukX8RCVoO9lji34RFV4o2IGU9FhTEWyd4QQKI8OuQRjSknhbJs0tU0r0faPw==
@@ -6865,20 +6817,6 @@
     query-string "7.1.3"
     uint8arrays "3.1.0"
 
-"@walletconnect/web3wallet@^1.16.1":
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/web3wallet/-/web3wallet-1.16.1.tgz#53abb98fea6f1ac77704d4e4c91288e0300f2fb9"
-  integrity sha512-l6jVoLEh/UtRfvYUDs52fN+LYXsBgx3F9WfErJuCSCFfpbxDKIzM2Y9sI0WI1/5dWN5sh24H1zNCXnQ4JJltZw==
-  dependencies:
-    "@walletconnect/auth-client" "2.1.2"
-    "@walletconnect/core" "2.17.1"
-    "@walletconnect/jsonrpc-provider" "1.0.14"
-    "@walletconnect/jsonrpc-utils" "1.0.8"
-    "@walletconnect/logger" "2.1.2"
-    "@walletconnect/sign-client" "2.17.1"
-    "@walletconnect/types" "2.17.1"
-    "@walletconnect/utils" "2.17.1"
-
 "@walletconnect/window-getters@1.0.1", "@walletconnect/window-getters@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/window-getters/-/window-getters-1.0.1.tgz#f36d1c72558a7f6b87ecc4451fc8bd44f63cbbdc"
@@ -9631,7 +9569,7 @@ elliptic@6.5.4:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
-elliptic@6.5.7, elliptic@^6.5.7:
+elliptic@6.5.7:
   version "6.5.7"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b"
   integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==
@@ -12698,14 +12636,6 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-isomorphic-unfetch@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz#87341d5f4f7b63843d468438128cb087b7c3e98f"
-  integrity sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==
-  dependencies:
-    node-fetch "^2.6.1"
-    unfetch "^4.2.0"
-
 isomorphic-ws@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz#55fd4cd6c5e6491e76dc125938dd863f5cd4f2dc"
@@ -18708,11 +18638,6 @@ unenv@^1.7.4:
     node-fetch-native "^1.4.1"
     pathe "^1.1.1"
 
-unfetch@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
-  integrity sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==
-
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"

From a4862adcd32f5b43687c995c1c7a48883d02395b Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Fri, 22 Nov 2024 13:10:40 +0100
Subject: [PATCH 13/47] Update import export tests (#4551)

---
 cypress/e2e/pages/sidebar.pages.js           |  4 +---
 cypress/e2e/smoke/import_export_data.cy.js   |  2 +-
 cypress/e2e/smoke/import_export_data_2.cy.js | 11 +----------
 3 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/cypress/e2e/pages/sidebar.pages.js b/cypress/e2e/pages/sidebar.pages.js
index 1051962fe4..d7ead5c158 100644
--- a/cypress/e2e/pages/sidebar.pages.js
+++ b/cypress/e2e/pages/sidebar.pages.js
@@ -33,7 +33,7 @@ const currencySection = '[data-testid="currency-section"]'
 const missingSignatureInfo = '[data-testid="missing-signature-info"]'
 const queuedTxInfo = '[data-testid="queued-tx-info"]'
 const showMoreBtn = '[data-testid="show-more-btn" ]'
-const importBtn = '[data-testid="import-btn"]'
+export const importBtn = '[data-testid="import-btn"]'
 export const pendingActivationIcon = '[data-testid="pending-activation-icon"]'
 const safeItemMenuIcon = '[data-testid="MoreVertIcon"]'
 const multichainItemSummary = '[data-testid="multichain-item-summary"]'
@@ -105,8 +105,6 @@ export function getImportBtn() {
   return cy.get(importBtn).scrollIntoView().should('be.visible')
 }
 export function clickOnSidebarImportBtn() {
-  cy.get(sidebarSafeContainer).find(sideSafeListItem).last().scrollIntoView()
-
   getImportBtn().click()
   modal.verifyModalTitle(modal.modalTitiles.dataImport)
   file.verifyValidImportInputExists()
diff --git a/cypress/e2e/smoke/import_export_data.cy.js b/cypress/e2e/smoke/import_export_data.cy.js
index fb99cd6909..cfeda752e6 100644
--- a/cypress/e2e/smoke/import_export_data.cy.js
+++ b/cypress/e2e/smoke/import_export_data.cy.js
@@ -8,7 +8,7 @@ import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 
 let staticSafes = []
 
-describe('[SMOKE] Import Export Data tests', () => {
+describe('[SMOKE] Import Export Data tests', { defaultCommandTimeout: 20000 }, () => {
   before(async () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
diff --git a/cypress/e2e/smoke/import_export_data_2.cy.js b/cypress/e2e/smoke/import_export_data_2.cy.js
index 7d52747f61..b712f3c549 100644
--- a/cypress/e2e/smoke/import_export_data_2.cy.js
+++ b/cypress/e2e/smoke/import_export_data_2.cy.js
@@ -1,10 +1,8 @@
 import 'cypress-file-upload'
 import * as file from '../pages/import_export.pages.js'
-import * as main from '../pages/main.page.js'
 import * as constants from '../../support/constants.js'
 import * as sidebar from '../pages/sidebar.pages.js'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
-import * as wallet from '../../support/utils/wallet.js'
 
 let staticSafes = []
 
@@ -15,10 +13,7 @@ const invalidJsonPath_3 = 'cypress/fixtures/test-empty-batch.json'
 
 const appNames = ['Transaction Builder']
 
-const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
-const signer = walletCredentials.OWNER_4_PRIVATE_KEY
-
-describe('[SMOKE] Import Export Data tests 2', () => {
+describe('[SMOKE] Import Export Data tests 2', { defaultCommandTimeout: 20000 }, () => {
   before(async () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
@@ -28,13 +23,11 @@ describe('[SMOKE] Import Export Data tests 2', () => {
   })
 
   it('[SMOKE] Verify that the Sidebar Import button opens an import modal', () => {
-    wallet.connectSigner(signer)
     sidebar.openSidebar()
     sidebar.clickOnSidebarImportBtn()
   })
 
   it('[SMOKE] Verify that correctly formatted json file can be uploaded and shows data', () => {
-    wallet.connectSigner(signer)
     sidebar.openSidebar()
     sidebar.clickOnSidebarImportBtn()
     file.dragAndDropFile(validJsonPath)
@@ -48,7 +41,6 @@ describe('[SMOKE] Import Export Data tests 2', () => {
   })
 
   it('[SMOKE] Verify that only json files can be imported', () => {
-    wallet.connectSigner(signer)
     sidebar.openSidebar()
     sidebar.clickOnSidebarImportBtn()
     file.dragAndDropFile(invalidJsonPath)
@@ -63,7 +55,6 @@ describe('[SMOKE] Import Export Data tests 2', () => {
   })
 
   it('[SMOKE] Verify that json files with wrong information are rejected', () => {
-    wallet.connectSigner(signer)
     sidebar.openSidebar()
     sidebar.clickOnSidebarImportBtn()
     file.dragAndDropFile(invalidJsonPath_3)

From 74a7e2458bcfe48e168c4b5a6c68d9b7246053ca Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Fri, 22 Nov 2024 15:19:27 +0100
Subject: [PATCH 14/47] Fix: WC unit tests (#4553)

---
 .../walletconnect/__tests__/WalletConnectContext.test.tsx       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx b/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
index 17364f2aaf..3ead9dd5ec 100644
--- a/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
+++ b/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
@@ -13,6 +13,8 @@ import { safeInfoSlice } from '@/store/safeInfoSlice'
 import { useAppDispatch } from '@/store'
 import * as useSafeWalletProvider from '@/services/safe-wallet-provider/useSafeWalletProvider'
 
+jest.mock('@reown/walletkit', () => jest.fn())
+
 jest.mock('../services/WalletConnectWallet')
 jest.mock('@/services/safe-wallet-provider/useSafeWalletProvider')
 

From 43d158f74c00ce849b7a7ce000dea3b637639f1e Mon Sep 17 00:00:00 2001
From: Manuel Gellfart <manu@safe.global>
Date: Fri, 22 Nov 2024 21:47:44 +0700
Subject: [PATCH 15/47] fix: fetch safe overviews including untrusted token
 fiatTotal (#4495)

* fix: fetch safe overviews including untrusted token fiatTotal

* test: fix safeOverviews.test.ts

* chore: add comment explaining why trusted needs to be false
---
 src/store/__tests__/safeOverviews.test.ts | 6 +++---
 src/store/api/gateway/safeOverviews.ts    | 6 +++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/store/__tests__/safeOverviews.test.ts b/src/store/__tests__/safeOverviews.test.ts
index 45baf52bfe..dab26c3159 100644
--- a/src/store/__tests__/safeOverviews.test.ts
+++ b/src/store/__tests__/safeOverviews.test.ts
@@ -175,7 +175,7 @@ describe('safeOverviews', () => {
           ],
           {
             currency: 'usd',
-            trusted: true,
+            trusted: false,
             exclude_spam: true,
           },
         )
@@ -344,12 +344,12 @@ describe('safeOverviews', () => {
       expect(mockedGetSafeOverviews).toHaveBeenCalledTimes(2)
       expect(mockedGetSafeOverviews).toHaveBeenCalledWith(
         request.safes.slice(0, 10).map((safe) => `1:${safe.address}`),
-        { currency: 'usd', exclude_spam: true, trusted: true },
+        { currency: 'usd', exclude_spam: true, trusted: false },
       )
 
       expect(mockedGetSafeOverviews).toHaveBeenCalledWith(
         request.safes.slice(10).map((safe) => `1:${safe.address}`),
-        { currency: 'usd', exclude_spam: true, trusted: true },
+        { currency: 'usd', exclude_spam: true, trusted: false },
       )
     })
   })
diff --git a/src/store/api/gateway/safeOverviews.ts b/src/store/api/gateway/safeOverviews.ts
index 852ec14a00..d781eedd0f 100644
--- a/src/store/api/gateway/safeOverviews.ts
+++ b/src/store/api/gateway/safeOverviews.ts
@@ -35,7 +35,11 @@ class SafeOverviewFetcher {
     currency: string
   }) {
     return await getSafeOverviews(safeIds, {
-      trusted: true,
+      /**
+       * This flag can only be set once for all cross chain `safeIds`.
+       * If we set `trusted` to `true` we will get 0 as `fiatTotal` for all Safes on networks without Default tokenlists.
+       */
+      trusted: false,
       exclude_spam: true,
       currency,
       wallet_address: walletAddress,

From 96d6f207c8fa7956006b3ad61be1ad8b6afd54a6 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 25 Nov 2024 11:05:46 +0100
Subject: [PATCH 16/47] Chore(deps): Bump ethers from 6.11.1 to 6.13.4 (#4557)

Bumps [ethers](https://github.com/ethers-io/ethers.js) from 6.11.1 to 6.13.4.
- [Release notes](https://github.com/ethers-io/ethers.js/releases)
- [Changelog](https://github.com/ethers-io/ethers.js/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ethers-io/ethers.js/compare/v6.11.1...v6.13.4)

---
updated-dependencies:
- dependency-name: ethers
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json |   2 +-
 yarn.lock    | 108 +++++++++++++++++++++++++++++++--------------------
 2 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/package.json b/package.json
index 1990d83eda..de1e014f43 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "blo": "^1.1.1",
     "classnames": "^2.5.1",
     "date-fns": "^2.30.0",
-    "ethers": "^6.11.1",
+    "ethers": "^6.13.4",
     "exponential-backoff": "^3.1.0",
     "firebase": "^10.3.1",
     "fuse.js": "^7.0.0",
diff --git a/yarn.lock b/yarn.lock
index 7019bef465..f4c093e986 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4014,12 +4014,12 @@
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.2.tgz#6f26dbc8fbc7205873ce3cee2f690eba0d421b39"
   integrity sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==
 
-"@noble/hashes@1.4.0", "@noble/hashes@^1.4.0":
+"@noble/hashes@1.4.0", "@noble/hashes@^1.2.0", "@noble/hashes@^1.3.3", "@noble/hashes@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.4.0.tgz#45814aa329f30e4fe0ba49426f49dfccdd066426"
   integrity sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==
 
-"@noble/hashes@^1.2.0", "@noble/hashes@^1.3.3", "@noble/hashes@~1.3.0", "@noble/hashes@~1.3.2":
+"@noble/hashes@~1.3.0", "@noble/hashes@~1.3.2":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.3.tgz#39908da56a4adc270147bb07968bf3b16cfe1699"
   integrity sha512-V7/fPHgl+jsVPXqqeOzT8egNj2iBIVt+ECeMMG8TdcnTikP3oaBtUVqpT/gYCR68aEBJSF+XbYUxStjbFMqIIA==
@@ -5989,23 +5989,18 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.32.tgz#f6cd08939ae3ad886fcc92ef7f0109dacddf61ab"
   integrity sha512-xPSg0jm4mqgEkNhowKgZFBNtwoEwF6gJ4Dhww+GFpm3IgtNseHQZ5IqdNwnquZEoANxyDAKDRAdVo4Z72VvD/g==
 
-"@types/node@*", "@types/node@>=12.12.47", "@types/node@>=13.7.0", "@types/node@^20.2.5":
-  version "20.8.5"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.5.tgz#13352ae1f80032171616910e8aba2e3e52e57d96"
-  integrity sha512-SPlobFgbidfIeOYlzXiEjSYeIJiOCthv+9tSQVpvk4PAdIIc+2SmjNVzWXk9t0Y7dl73Zdf+OgXKHX9XtkqUpw==
+"@types/node@*", "@types/node@22.7.5", "@types/node@>=12.12.47", "@types/node@>=13.7.0":
+  version "22.7.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.7.5.tgz#cfde981727a7ab3611a481510b473ae54442b92b"
+  integrity sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==
   dependencies:
-    undici-types "~5.25.1"
+    undici-types "~6.19.2"
 
 "@types/node@18.11.18":
   version "18.11.18"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.18.tgz#8dfb97f0da23c2293e554c5a50d61ef134d7697f"
   integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
 
-"@types/node@18.15.13":
-  version "18.15.13"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.13.tgz#f64277c341150c979e42b00e4ac289290c9df469"
-  integrity sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q==
-
 "@types/node@^12.12.54":
   version "12.20.55"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
@@ -6018,6 +6013,13 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/node@^20.2.5":
+  version "20.8.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.5.tgz#13352ae1f80032171616910e8aba2e3e52e57d96"
+  integrity sha512-SPlobFgbidfIeOYlzXiEjSYeIJiOCthv+9tSQVpvk4PAdIIc+2SmjNVzWXk9t0Y7dl73Zdf+OgXKHX9XtkqUpw==
+  dependencies:
+    undici-types "~5.25.1"
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
@@ -10642,18 +10644,18 @@ ethers@5.7.2:
     "@ethersproject/web" "5.7.1"
     "@ethersproject/wordlists" "5.7.0"
 
-ethers@^6.11.1, ethers@^6.13.1, ethers@^6.9.2:
-  version "6.11.1"
-  resolved "https://registry.yarnpkg.com/ethers/-/ethers-6.11.1.tgz#96aae00b627c2e35f9b0a4d65c7ab658259ee6af"
-  integrity sha512-mxTAE6wqJQAbp5QAe/+o+rXOID7Nw91OZXvgpjDa1r4fAbq2Nu314oEZSbjoRLacuCzs7kUC3clEvkCQowffGg==
+ethers@^6.11.1, ethers@^6.13.1, ethers@^6.13.4, ethers@^6.9.2:
+  version "6.13.4"
+  resolved "https://registry.yarnpkg.com/ethers/-/ethers-6.13.4.tgz#bd3e1c3dc1e7dc8ce10f9ffb4ee40967a651b53c"
+  integrity sha512-21YtnZVg4/zKkCQPjrDj38B1r4nQvTZLopUGMLQ1ePU2zV/joCfDC3t3iKQjWRzjjjbzR+mdAIoikeBRNkdllA==
   dependencies:
     "@adraffy/ens-normalize" "1.10.1"
     "@noble/curves" "1.2.0"
     "@noble/hashes" "1.3.2"
-    "@types/node" "18.15.13"
+    "@types/node" "22.7.5"
     aes-js "4.0.0-beta.5"
-    tslib "2.4.0"
-    ws "8.5.0"
+    tslib "2.7.0"
+    ws "8.17.1"
 
 ethjs-util@0.1.6, ethjs-util@^0.1.6:
   version "0.1.6"
@@ -17509,7 +17511,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -17668,7 +17679,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -18303,17 +18321,12 @@ tslib@1.14.1, tslib@^1.13.0, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
-  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
-
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
-  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+tslib@2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
+  integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
 
-tslib@^2.6.2:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.6.2:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -18627,6 +18640,11 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
 unenv@^1.7.4:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/unenv/-/unenv-1.8.0.tgz#0f860d5278405700bd95d47b23bc01f3a735d68c"
@@ -19494,7 +19512,7 @@ workbox-window@7.0.0:
     "@types/trusted-types" "^2.0.2"
     workbox-core "7.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -19512,6 +19530,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -19539,7 +19566,7 @@ ws@7.4.6:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
   integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
 
-ws@7.5.9, ws@^7.2.0, ws@^7.3.1, ws@^7.5.1:
+ws@7.5.9:
   version "7.5.9"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
   integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
@@ -19549,21 +19576,16 @@ ws@8.13.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
   integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
 
-ws@8.5.0:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
-  integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==
+ws@8.17.1, ws@^8.11.0, ws@^8.2.3, ws@^8.5.0:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
+  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
 
-ws@^7.5.10:
+ws@^7.2.0, ws@^7.3.1, ws@^7.5.1, ws@^7.5.10:
   version "7.5.10"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
   integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
 
-ws@^8.11.0, ws@^8.2.3, ws@^8.5.0:
-  version "8.16.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.16.0.tgz#d1cd774f36fbc07165066a60e40323eab6446fd4"
-  integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==
-
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"

From 207dfd17a0f6b22b272bd4308d26bab2cd3dd1d0 Mon Sep 17 00:00:00 2001
From: James Mealy <james@safe.global>
Date: Mon, 25 Nov 2024 19:52:38 +0700
Subject: [PATCH 17/47] Epic: sidebar improvements (#4442)

* Feat(Sidebar): Add pinned safes list to sidebar and accounts page [SW-304] (#4412)

* feat: allow pinning and unpinning accounts

* feat: allow pinning multichain safes

* fix: pinning of multichain safes

* feat: simplify all accounts list

* feat: load safe info when safelist item is scrolled into view

* feat: remove safes when unpinning if they werent added before being pinned

* fix: pinning behaviour of multichain safes

* fix: multichain sub itemstyles

* feat: add empty state for pinned list

* fix: lint errors

* fix: show threshold for counterfactual safes

* fix: mobile layout

* restore loading balances for safes

* fix: subaccount item layout, and app crashing on unpin

* feat: expand all accounts if there are no pinned safes

* fix: flickering when loading all safes

* fix: account for default threshold and owner numbers

* reduce transition animation duration for pinning and unpinning safes

* reduce space between chains and balance

* Feat(sidebar): sort safes by name and recently used [SW-307] (#4458)

* Feat: add option to sort by recently visited and by name

* tests: add new properties to unit tests

* fix: make order by preference persist

* feat: sort sub account items by name and recently visited

* refactor: fix incorrect variable names and remove console log

* Feat(sidebar): filter safes by search query [SW-305] (#4484)

* feat: filter safes by search query

* feat: display current order by option. fix text colors

* feat: search by adddress name and chain name

* fix: use ignoreLocation to match the final address characters when searching

* add tracking event for search

* fix: cypress tests

* Feat(sidebar): Add tracking events for search, sorting, and pinning/unpinning safes [SW-308] (#4500)

* track the number of pined safes on the accounts page

* feat: track pinning, unpinning, and sorting

* fix: separate watchlist and pined safes for tracking

* fix: remove wallet from dependency array

* Update src/components/welcome/MyAccounts/useTrackedSafesCount.ts

Co-authored-by: Usame Algan <5880855+usame-algan@users.noreply.github.com>

* fix: lint

---------

Co-authored-by: Usame Algan <5880855+usame-algan@users.noreply.github.com>

* Refactor(Sidebar): use feature directory structure for MyAccounts (#4508)

* refactor: move myAccounts to features

* fix:align  queue and status chips with address for large screens

* remove commented code

* fix: chip styles

* fix(sidebar):  fix designs for data widget and empty/disconnected state [SW-507] (#4509)

* fix: add connect wallet button and empty state

* fix: datawidget styles

* Fix(Sidebar): Include sub safe in search results [SW-305] (#4527)

* fix: CF chip dark mode color

* include multichain sub safe names in search

* fix: queue chips being cut off

* Fix: rm Remove option

* Refactor: pinned = added safes [SW-304] (#4552)

* Refactor: pinned = added safes

* Rm Watchlist word

* Fix duplicate cf safes

---------

Co-authored-by: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Co-authored-by: katspaugh <katspaugh@gmail.com>
Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com>
---
 cypress/e2e/pages/sidebar.pages.js            |  11 +-
 .../common/NetworkSelector/index.tsx          |   2 +-
 .../create/steps/ReviewStep/index.tsx         |   4 +-
 src/components/new-safe/load/index.tsx        |   2 +-
 .../GlobalPushNotifications.tsx               |   2 +-
 .../sidebar/SafeListContextMenu/index.tsx     |   8 +-
 .../sidebar/SafeListRemoveDialog/index.tsx    |   2 +-
 src/components/sidebar/Sidebar/index.tsx      |   4 +-
 .../sidebar/Sidebar/styles.module.css         |   2 +-
 .../sidebar/WatchlistAddButton/index.tsx      |   4 +-
 .../welcome/MyAccounts/PaginatedSafeList.tsx  | 139 ---------
 src/components/welcome/MyAccounts/index.tsx   | 138 ---------
 src/components/welcome/WelcomeLogin/index.tsx |   2 +-
 .../InconsistentSignerSetupWarning.tsx        |   2 +-
 .../multichain/hooks/useIsMultichainSafe.ts   |   2 +-
 src/features/multichain/utils/utils.test.ts   |  68 ++++-
 src/features/multichain/utils/utils.ts        |   4 +-
 .../components/AccountInfoChips/index.tsx     | 115 ++++++++
 .../AccountInfoChips/styles.module.css        |  20 ++
 .../AccountItems}/MultiAccountItem.tsx        | 121 +++++---
 .../AccountItems/SingleAccountItem.tsx}       | 152 ++++++----
 .../AccountItems}/SubAccountItem.tsx          |  97 ++++---
 .../AccountItems}/styles.module.css           | 121 ++------
 .../components/AddNetworkButton/index.tsx}    |   0
 .../components/CreateButton/index.tsx}        |   2 +-
 .../components/DataWidget/index.tsx}          |  46 ++-
 .../components/DataWidget/styles.module.css   |  24 ++
 .../components/OrderByButton/index.tsx        |  80 +++++
 .../components/QueueActions/index.tsx}        |  60 ++--
 .../myAccounts/components/SafesList/index.tsx |  45 +++
 .../myAccounts/hooks}/useAllOwnedSafes.ts     |   0
 .../myAccounts/hooks}/useAllSafes.ts          |  40 ++-
 .../myAccounts/hooks}/useAllSafesGrouped.ts   |  17 +-
 .../myAccounts/hooks}/useGetHref.ts           |   0
 .../myAccounts/hooks/useSafesSearch.ts        |  63 ++++
 .../myAccounts/hooks}/useTrackedSafesCount.ts |  45 ++-
 .../myAccounts/hooks/useVisitedSafes.ts       |  29 ++
 src/features/myAccounts/index.tsx             | 273 ++++++++++++++++++
 src/features/myAccounts/styles.module.css     |  88 ++++++
 src/features/myAccounts/utils/utils.ts        |  19 ++
 src/pages/_app.tsx                            |   2 +
 src/pages/welcome/accounts.tsx                |   2 +-
 src/services/analytics/events/overview.ts     |  22 ++
 src/store/__tests__/safeOverviews.test.ts     | 171 +++++++++--
 src/store/addedSafesSlice.ts                  |  16 +-
 src/store/api/gateway/safeOverviews.ts        |   2 +-
 src/store/index.ts                            |   4 +
 src/store/orderByPreferenceSlice.ts           |  29 ++
 src/store/slices.ts                           |   2 +
 src/store/visitedSafesSlice.ts                |  34 +++
 50 files changed, 1475 insertions(+), 662 deletions(-)
 delete mode 100644 src/components/welcome/MyAccounts/PaginatedSafeList.tsx
 delete mode 100644 src/components/welcome/MyAccounts/index.tsx
 create mode 100644 src/features/myAccounts/components/AccountInfoChips/index.tsx
 create mode 100644 src/features/myAccounts/components/AccountInfoChips/styles.module.css
 rename src/{components/welcome/MyAccounts => features/myAccounts/components/AccountItems}/MultiAccountItem.tsx (68%)
 rename src/{components/welcome/MyAccounts/AccountItem.tsx => features/myAccounts/components/AccountItems/SingleAccountItem.tsx} (53%)
 rename src/{components/welcome/MyAccounts => features/myAccounts/components/AccountItems}/SubAccountItem.tsx (65%)
 rename src/{components/welcome/MyAccounts => features/myAccounts/components/AccountItems}/styles.module.css (55%)
 rename src/{components/welcome/MyAccounts/AddNetworkButton.tsx => features/myAccounts/components/AddNetworkButton/index.tsx} (100%)
 rename src/{components/welcome/MyAccounts/CreateButton.tsx => features/myAccounts/components/CreateButton/index.tsx} (88%)
 rename src/{components/welcome/MyAccounts/DataWidget.tsx => features/myAccounts/components/DataWidget/index.tsx} (71%)
 create mode 100644 src/features/myAccounts/components/DataWidget/styles.module.css
 create mode 100644 src/features/myAccounts/components/OrderByButton/index.tsx
 rename src/{components/welcome/MyAccounts/QueueActions.tsx => features/myAccounts/components/QueueActions/index.tsx} (59%)
 create mode 100644 src/features/myAccounts/components/SafesList/index.tsx
 rename src/{components/welcome/MyAccounts => features/myAccounts/hooks}/useAllOwnedSafes.ts (100%)
 rename src/{components/welcome/MyAccounts => features/myAccounts/hooks}/useAllSafes.ts (60%)
 rename src/{components/welcome/MyAccounts => features/myAccounts/hooks}/useAllSafesGrouped.ts (70%)
 rename src/{components/welcome/MyAccounts => features/myAccounts/hooks}/useGetHref.ts (100%)
 create mode 100644 src/features/myAccounts/hooks/useSafesSearch.ts
 rename src/{components/welcome/MyAccounts => features/myAccounts/hooks}/useTrackedSafesCount.ts (50%)
 create mode 100644 src/features/myAccounts/hooks/useVisitedSafes.ts
 create mode 100644 src/features/myAccounts/index.tsx
 create mode 100644 src/features/myAccounts/styles.module.css
 create mode 100644 src/features/myAccounts/utils/utils.ts
 create mode 100644 src/store/orderByPreferenceSlice.ts
 create mode 100644 src/store/visitedSafesSlice.ts

diff --git a/cypress/e2e/pages/sidebar.pages.js b/cypress/e2e/pages/sidebar.pages.js
index d7ead5c158..a1ef546f27 100644
--- a/cypress/e2e/pages/sidebar.pages.js
+++ b/cypress/e2e/pages/sidebar.pages.js
@@ -26,13 +26,12 @@ export const safeItemOptionsRemoveBtn = '[data-testid="remove-btn"]'
 export const safeItemOptionsAddChainBtn = '[data-testid="add-chain-btn"]'
 const nameInput = '[data-testid="name-input"]'
 const saveBtn = '[data-testid="save-btn"]'
-const cancelBtn = '[data-testid="cancel-btn"]'
 const deleteBtn = '[data-testid="delete-btn"]'
 const readOnlyVisibility = '[data-testid="read-only-visibility"]'
 const currencySection = '[data-testid="currency-section"]'
 const missingSignatureInfo = '[data-testid="missing-signature-info"]'
 const queuedTxInfo = '[data-testid="queued-tx-info"]'
-const showMoreBtn = '[data-testid="show-more-btn" ]'
+const expandSafesList = '[data-testid="expand-safes-list" ]'
 export const importBtn = '[data-testid="import-btn"]'
 export const pendingActivationIcon = '[data-testid="pending-activation-icon"]'
 const safeItemMenuIcon = '[data-testid="MoreVertIcon"]'
@@ -54,7 +53,6 @@ export const addedNetworkOption = 'li[role="option"]'
 const modalAddNetworkName = '[data-testid="added-network"]'
 const networkSeperator = 'div[role="separator"]'
 export const addNetworkTooltip = '[data-testid="add-network-tooltip"]'
-const networkOptionNetworkSwitch = 'span[data-track="overview: Add new network"] > li'
 export const importBtnStr = 'Import'
 export const exportBtnStr = 'Export'
 export const undeployedSafe = 'Undeployed Sepolia'
@@ -112,10 +110,9 @@ export function clickOnSidebarImportBtn() {
 
 export function showAllSafes() {
   cy.get('body').then(($body) => {
-    if ($body.find(showMoreBtn).length > 0) {
-      cy.get(showMoreBtn).click()
+    if ($body.find(expandSafesList).length > 0) {
+      cy.get(expandSafesList).click()
       cy.wait(500)
-      showAllSafes()
     }
   })
 }
@@ -467,7 +464,7 @@ export function checkNetworksInRange(expectedString, expectedCount, direction =
 
   return cy
     .get(startSelector)
-    [traversalMethod](endSelector, 'li')
+  [traversalMethod](endSelector, 'li')
     .then((liElements) => {
       expect(liElements.length).to.equal(expectedCount)
       const optionTexts = [...liElements].map((li) => li.innerText)
diff --git a/src/components/common/NetworkSelector/index.tsx b/src/components/common/NetworkSelector/index.tsx
index be1c268b38..8da8316fdd 100644
--- a/src/components/common/NetworkSelector/index.tsx
+++ b/src/components/common/NetworkSelector/index.tsx
@@ -28,7 +28,7 @@ import { useChainId } from '@/hooks/useChainId'
 import { type ReactElement, useCallback, useMemo, useState } from 'react'
 import { OVERVIEW_EVENTS, OVERVIEW_LABELS, trackEvent } from '@/services/analytics'
 
-import { useAllSafesGrouped } from '@/components/welcome/MyAccounts/useAllSafesGrouped'
+import { useAllSafesGrouped } from '@/features/myAccounts/hooks/useAllSafesGrouped'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import { sameAddress } from '@/utils/addresses'
 import uniq from 'lodash/uniq'
diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
index 57f1e906a3..6a79f937c3 100644
--- a/src/components/new-safe/create/steps/ReviewStep/index.tsx
+++ b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -42,7 +42,7 @@ import { useRouter } from 'next/router'
 import { useMemo, useState } from 'react'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import NetworkWarning from '../../NetworkWarning'
-import useAllSafes from '@/components/welcome/MyAccounts/useAllSafes'
+import useAllSafes from '@/features/myAccounts/hooks/useAllSafes'
 import { uniq } from 'lodash'
 import { selectRpc } from '@/store/settingsSlice'
 import { AppRoutes } from '@/config/routes'
@@ -521,7 +521,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
             size="stretched"
             disabled={isDisabled}
           >
-            {isCreating ? <CircularProgress size={18} /> : 'Create Account'}
+            {isCreating ? <CircularProgress size={18} /> : 'Create account'}
           </Button>
         </Box>
       </Box>
diff --git a/src/components/new-safe/load/index.tsx b/src/components/new-safe/load/index.tsx
index e0295b7c9b..5356afffcf 100644
--- a/src/components/new-safe/load/index.tsx
+++ b/src/components/new-safe/load/index.tsx
@@ -68,7 +68,7 @@ const LoadSafe = ({ initialData }: { initialData?: TxStepperProps<LoadSafeFormDa
               pb: 2,
             }}
           >
-            Add Safe Account to watchlist
+            Add existing Safe Account
           </Typography>
         </Grid>
         <Grid
diff --git a/src/components/settings/PushNotifications/GlobalPushNotifications.tsx b/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
index e50ee1e350..ecd23bf6cd 100644
--- a/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
+++ b/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
@@ -36,7 +36,7 @@ import type { PushNotificationPreferences } from '@/services/push-notifications/
 import CheckWallet from '@/components/common/CheckWallet'
 
 import css from './styles.module.css'
-import useAllOwnedSafes from '@/components/welcome/MyAccounts/useAllOwnedSafes'
+import useAllOwnedSafes from '@/features/myAccounts/hooks/useAllOwnedSafes'
 import useWallet from '@/hooks/wallets/useWallet'
 import { selectAllAddedSafes, type AddedSafesState } from '@/store/addedSafesSlice'
 
diff --git a/src/components/sidebar/SafeListContextMenu/index.tsx b/src/components/sidebar/SafeListContextMenu/index.tsx
index 5d1e77d867..d715110463 100644
--- a/src/components/sidebar/SafeListContextMenu/index.tsx
+++ b/src/components/sidebar/SafeListContextMenu/index.tsx
@@ -8,8 +8,6 @@ import ListItemText from '@mui/material/ListItemText'
 
 import EntryDialog from '@/components/address-book/EntryDialog'
 import SafeListRemoveDialog from '@/components/sidebar/SafeListRemoveDialog'
-import { useAppSelector } from '@/store'
-import { selectAddedSafes } from '@/store/addedSafesSlice'
 import EditIcon from '@/public/images/common/edit.svg'
 import DeleteIcon from '@/public/images/common/delete.svg'
 import PlusIcon from '@/public/images/common/plus.svg'
@@ -35,15 +33,15 @@ const SafeListContextMenu = ({
   chainId,
   addNetwork,
   rename,
+  undeployedSafe,
 }: {
   name: string
   address: string
   chainId: string
   addNetwork: boolean
   rename: boolean
+  undeployedSafe: boolean
 }): ReactElement => {
-  const addedSafes = useAppSelector((state) => selectAddedSafes(state, chainId))
-  const isAdded = !!addedSafes?.[address]
   const addressBook = useAddressBook()
   const hasName = address in addressBook
 
@@ -89,7 +87,7 @@ const SafeListContextMenu = ({
           </MenuItem>
         )}
 
-        {isAdded && (
+        {undeployedSafe && (
           <MenuItem onClick={handleOpenModal(ModalType.REMOVE, OVERVIEW_EVENTS.REMOVE_FROM_WATCHLIST)}>
             <ListItemIcon>
               <SvgIcon component={DeleteIcon} inheritViewBox fontSize="small" color="error" />
diff --git a/src/components/sidebar/SafeListRemoveDialog/index.tsx b/src/components/sidebar/SafeListRemoveDialog/index.tsx
index 6332ba7a78..53ca700c8b 100644
--- a/src/components/sidebar/SafeListRemoveDialog/index.tsx
+++ b/src/components/sidebar/SafeListRemoveDialog/index.tsx
@@ -40,7 +40,7 @@ const SafeListRemoveDialog = ({
     <ModalDialog open onClose={handleClose} dialogTitle="Delete entry">
       <DialogContent sx={{ p: '24px !important' }}>
         <Typography>
-          Are you sure you want to remove <b>{safe}</b> from your Watchlist?
+          Are you sure you want to remove the <b>{safe}</b> account?
         </Typography>
       </DialogContent>
 
diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
index b845cec463..0423611e99 100644
--- a/src/components/sidebar/Sidebar/index.tsx
+++ b/src/components/sidebar/Sidebar/index.tsx
@@ -10,7 +10,7 @@ import IndexingStatus from '@/components/sidebar/IndexingStatus'
 
 import css from './styles.module.css'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
-import MyAccounts from '@/components/welcome/MyAccounts'
+import MyAccounts from '@/features/myAccounts'
 
 const Sidebar = (): ReactElement => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
@@ -60,7 +60,7 @@ const Sidebar = (): ReactElement => {
       </div>
       <Drawer variant="temporary" anchor="left" open={isDrawerOpen} onClose={onDrawerToggle}>
         <div className={css.drawer}>
-          <MyAccounts onLinkClick={closeDrawer}></MyAccounts>
+          <MyAccounts onLinkClick={closeDrawer} isSidebar></MyAccounts>
         </div>
       </Drawer>
     </div>
diff --git a/src/components/sidebar/Sidebar/styles.module.css b/src/components/sidebar/Sidebar/styles.module.css
index f5f3013f33..b90513e727 100644
--- a/src/components/sidebar/Sidebar/styles.module.css
+++ b/src/components/sidebar/Sidebar/styles.module.css
@@ -21,7 +21,7 @@
 }
 
 .drawer {
-  width: 480px;
+  width: 550px;
   max-width: 90vw;
   padding-top: var(--header-height);
   border-right: 1px solid var(--color-border-light);
diff --git a/src/components/sidebar/WatchlistAddButton/index.tsx b/src/components/sidebar/WatchlistAddButton/index.tsx
index 43b37ac580..f0df8fff3b 100644
--- a/src/components/sidebar/WatchlistAddButton/index.tsx
+++ b/src/components/sidebar/WatchlistAddButton/index.tsx
@@ -43,7 +43,7 @@ const WatchlistAddButton = () => {
             disableElevation
             sx={{ py: 1.3, px: 1 }}
           >
-            Remove from watchlist
+            Remove account
           </Button>
         </Track>
       ) : (
@@ -58,7 +58,7 @@ const WatchlistAddButton = () => {
             sx={{ py: 1.3 }}
             startIcon={<VisibilityOutlined sx={{ verticalAlign: 'middle', marginRight: 1 }} />}
           >
-            Add to watchlist
+            Add read-only
           </Button>
         </Track>
       )}
diff --git a/src/components/welcome/MyAccounts/PaginatedSafeList.tsx b/src/components/welcome/MyAccounts/PaginatedSafeList.tsx
deleted file mode 100644
index ef621e51e4..0000000000
--- a/src/components/welcome/MyAccounts/PaginatedSafeList.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { type ReactElement, type ReactNode, useState, useCallback, useEffect, useMemo } from 'react'
-import { Paper, Typography } from '@mui/material'
-import AccountItem from './AccountItem'
-import { type SafeItem } from './useAllSafes'
-import css from './styles.module.css'
-import InfiniteScroll from '@/components/common/InfiniteScroll'
-import { type MultiChainSafeItem } from './useAllSafesGrouped'
-import MultiAccountItem from './MultiAccountItem'
-import { isMultiChainSafeItem } from '@/features/multichain/utils/utils'
-
-type PaginatedSafeListProps = {
-  safes?: (SafeItem | MultiChainSafeItem)[]
-  title: ReactNode
-  noSafesMessage?: ReactNode
-  action?: ReactElement
-  onLinkClick?: () => void
-}
-
-type SafeListPageProps = {
-  safes: (SafeItem | MultiChainSafeItem)[]
-  onLinkClick: PaginatedSafeListProps['onLinkClick']
-}
-
-const DEFAULT_PAGE_SIZE = 10
-
-export const SafeListPage = ({ safes, onLinkClick }: SafeListPageProps) => {
-  return (
-    <>
-      {safes.map((item) =>
-        isMultiChainSafeItem(item) ? (
-          <MultiAccountItem onLinkClick={onLinkClick} key={item.address} multiSafeAccountItem={item} />
-        ) : (
-          <AccountItem onLinkClick={onLinkClick} safeItem={item} key={item.chainId + item.address} />
-        ),
-      )}
-    </>
-  )
-}
-
-const AllSafeListPages = ({
-  safes,
-  onLinkClick,
-  pageSize = DEFAULT_PAGE_SIZE,
-}: SafeListPageProps & { pageSize?: number }) => {
-  const totalPages = Math.ceil(safes.length / pageSize)
-  const [pages, setPages] = useState<(SafeItem | MultiChainSafeItem)[][]>([])
-
-  const onNextPage = useCallback(() => {
-    setPages((prev) => {
-      const pageIndex = prev.length
-      const nextPage = safes.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)
-      return prev.concat([nextPage])
-    })
-  }, [safes, pageSize])
-
-  useEffect(() => {
-    if (safes.length > 0) {
-      setPages([safes.slice(0, pageSize)])
-    }
-  }, [safes, pageSize])
-
-  return (
-    <>
-      {pages.map((pageSafes, index) => (
-        <SafeListPage key={index} safes={pageSafes} onLinkClick={onLinkClick} />
-      ))}
-
-      {totalPages > pages.length && <InfiniteScroll onLoadMore={onNextPage} key={pages.length} />}
-    </>
-  )
-}
-
-const PaginatedSafeList = ({ safes, title, action, noSafesMessage, onLinkClick }: PaginatedSafeListProps) => {
-  const multiChainSafes = useMemo(() => safes?.filter(isMultiChainSafeItem), [safes])
-  const singleChainSafes = useMemo(() => safes?.filter((safe) => !isMultiChainSafeItem(safe)), [safes])
-
-  const totalMultiChainSafes = multiChainSafes?.length ?? 0
-  const totalSingleChainSafes = singleChainSafes?.length ?? 0
-  const totalSafes = totalMultiChainSafes + totalSingleChainSafes
-
-  return (
-    <Paper className={css.safeList}>
-      <div className={css.listHeader}>
-        <Typography
-          variant="h5"
-          className={css.listTitle}
-          sx={{
-            fontWeight: 700,
-            mb: 2,
-          }}
-        >
-          {title}
-
-          {safes && safes.length > 0 && (
-            <Typography
-              component="span"
-              sx={{
-                color: 'var(--color-primary-light)',
-                fontSize: 'inherit',
-                fontWeight: 'normal',
-              }}
-            >
-              {' '}
-              ({safes.length})
-            </Typography>
-          )}
-        </Typography>
-
-        {action}
-      </div>
-      {totalSafes > 0 ? (
-        <>
-          {multiChainSafes && multiChainSafes.length > 0 && (
-            <AllSafeListPages safes={multiChainSafes} onLinkClick={onLinkClick} pageSize={1} />
-          )}
-          {singleChainSafes && singleChainSafes.length > 0 && (
-            <AllSafeListPages safes={singleChainSafes} onLinkClick={onLinkClick} pageSize={10} />
-          )}
-        </>
-      ) : (
-        <Typography
-          component="div"
-          variant="body2"
-          sx={{
-            color: 'text.secondary',
-            textAlign: 'center',
-            py: 3,
-            mx: 'auto',
-            width: 250,
-          }}
-        >
-          {noSafesMessage}
-        </Typography>
-      )}
-    </Paper>
-  )
-}
-
-export default PaginatedSafeList
diff --git a/src/components/welcome/MyAccounts/index.tsx b/src/components/welcome/MyAccounts/index.tsx
deleted file mode 100644
index e21f679806..0000000000
--- a/src/components/welcome/MyAccounts/index.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { useMemo } from 'react'
-import { Box, Button, Link, SvgIcon, Typography } from '@mui/material'
-import madProps from '@/utils/mad-props'
-import CreateButton from './CreateButton'
-import Track from '@/components/common/Track'
-import { OVERVIEW_EVENTS, OVERVIEW_LABELS } from '@/services/analytics'
-import { DataWidget } from '@/components/welcome/MyAccounts/DataWidget'
-import css from './styles.module.css'
-import PaginatedSafeList from './PaginatedSafeList'
-import { VisibilityOutlined } from '@mui/icons-material'
-import AddIcon from '@/public/images/common/add.svg'
-import { AppRoutes } from '@/config/routes'
-import ConnectWalletButton from '@/components/common/ConnectWallet/ConnectWalletButton'
-import useWallet from '@/hooks/wallets/useWallet'
-import { useRouter } from 'next/router'
-import useTrackSafesCount from './useTrackedSafesCount'
-import { type AllSafesGrouped, useAllSafesGrouped, type MultiChainSafeItem } from './useAllSafesGrouped'
-import { type SafeItem } from './useAllSafes'
-
-const NO_SAFES_MESSAGE = "You don't have any Safe Accounts yet"
-const NO_WATCHED_MESSAGE = 'Watch any Safe Account to keep an eye on its activity'
-
-type AccountsListProps = {
-  safes: AllSafesGrouped
-  onLinkClick?: () => void
-}
-const AccountsList = ({ safes, onLinkClick }: AccountsListProps) => {
-  const wallet = useWallet()
-  const router = useRouter()
-
-  // We consider a multiChain account owned if at least one of the multiChain accounts is not on the watchlist
-  const ownedMultiChainSafes = useMemo(
-    () => safes.allMultiChainSafes?.filter((account) => account.safes.some(({ isWatchlist }) => !isWatchlist)),
-    [safes],
-  )
-
-  // If all safes of a multichain account are on the watchlist we put the entire account on the watchlist
-  const watchlistMultiChainSafes = useMemo(
-    () => safes.allMultiChainSafes?.filter((account) => !account.safes.some(({ isWatchlist }) => !isWatchlist)),
-    [safes],
-  )
-
-  const ownedSafes = useMemo<(MultiChainSafeItem | SafeItem)[]>(
-    () => [...(ownedMultiChainSafes ?? []), ...(safes.allSingleSafes?.filter(({ isWatchlist }) => !isWatchlist) ?? [])],
-    [safes, ownedMultiChainSafes],
-  )
-  const watchlistSafes = useMemo<(MultiChainSafeItem | SafeItem)[]>(
-    () => [
-      ...(watchlistMultiChainSafes ?? []),
-      ...(safes.allSingleSafes?.filter(({ isWatchlist }) => isWatchlist) ?? []),
-    ],
-    [safes, watchlistMultiChainSafes],
-  )
-
-  useTrackSafesCount(ownedSafes, watchlistSafes, wallet)
-
-  const isLoginPage = router.pathname === AppRoutes.welcome.accounts
-  const trackingLabel = isLoginPage ? OVERVIEW_LABELS.login_page : OVERVIEW_LABELS.sidebar
-
-  return (
-    <Box data-testid="sidebar-safe-container" className={css.container}>
-      <Box className={css.myAccounts}>
-        <Box className={css.header}>
-          <Typography
-            variant="h1"
-            className={css.title}
-            sx={{
-              fontWeight: 700,
-            }}
-          >
-            Safe accounts
-          </Typography>
-          <Track {...OVERVIEW_EVENTS.CREATE_NEW_SAFE} label={trackingLabel}>
-            <CreateButton isPrimary={!!wallet} />
-          </Track>
-        </Box>
-
-        <PaginatedSafeList
-          title="My accounts"
-          safes={ownedSafes}
-          onLinkClick={onLinkClick}
-          noSafesMessage={
-            wallet ? (
-              NO_SAFES_MESSAGE
-            ) : (
-              <>
-                <Box
-                  sx={{
-                    mb: 2,
-                  }}
-                >
-                  Connect a wallet to view your Safe Accounts or to create a new one
-                </Box>
-                <Track {...OVERVIEW_EVENTS.OPEN_ONBOARD} label={trackingLabel}>
-                  <ConnectWalletButton text="Connect a wallet" contained />
-                </Track>
-              </>
-            )
-          }
-        />
-
-        <PaginatedSafeList
-          title={
-            <>
-              <VisibilityOutlined sx={{ verticalAlign: 'middle', marginRight: '10px' }} fontSize="small" />
-              Watchlist
-            </>
-          }
-          safes={watchlistSafes || []}
-          action={
-            <Track {...OVERVIEW_EVENTS.ADD_TO_WATCHLIST} label={trackingLabel}>
-              <Link href={AppRoutes.newSafe.load}>
-                <Button
-                  disableElevation
-                  size="small"
-                  onClick={onLinkClick}
-                  startIcon={<SvgIcon component={AddIcon} inheritViewBox fontSize="small" />}
-                >
-                  Add
-                </Button>
-              </Link>
-            </Track>
-          }
-          noSafesMessage={NO_WATCHED_MESSAGE}
-          onLinkClick={onLinkClick}
-        />
-
-        <DataWidget />
-      </Box>
-    </Box>
-  )
-}
-
-const MyAccounts = madProps(AccountsList, {
-  safes: useAllSafesGrouped,
-})
-
-export default MyAccounts
diff --git a/src/components/welcome/WelcomeLogin/index.tsx b/src/components/welcome/WelcomeLogin/index.tsx
index 3d7ee16d80..00d493ab08 100644
--- a/src/components/welcome/WelcomeLogin/index.tsx
+++ b/src/components/welcome/WelcomeLogin/index.tsx
@@ -6,7 +6,7 @@ import { useRouter } from 'next/router'
 import { CREATE_SAFE_EVENTS } from '@/services/analytics/events/createLoadSafe'
 import { OVERVIEW_EVENTS, OVERVIEW_LABELS, trackEvent } from '@/services/analytics'
 import useWallet from '@/hooks/wallets/useWallet'
-import { useHasSafes } from '../MyAccounts/useAllSafes'
+import { useHasSafes } from '@/features/myAccounts/hooks/useAllSafes'
 import Track from '@/components/common/Track'
 import { useCallback, useEffect, useState } from 'react'
 import WalletLogin from './WalletLogin'
diff --git a/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx b/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx
index e1e3f83532..60537e047b 100644
--- a/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx
+++ b/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx
@@ -4,7 +4,7 @@ import ErrorMessage from '@/components/tx/ErrorMessage'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import { useAppSelector } from '@/store'
 import { selectCurrency, selectUndeployedSafes, useGetMultipleSafeOverviewsQuery } from '@/store/slices'
-import { useAllSafesGrouped } from '@/components/welcome/MyAccounts/useAllSafesGrouped'
+import { useAllSafesGrouped } from '@/features/myAccounts/hooks/useAllSafesGrouped'
 import { sameAddress } from '@/utils/addresses'
 import { useMemo } from 'react'
 import { getDeviatingSetups, getSafeSetups } from '@/features/multichain/utils/utils'
diff --git a/src/features/multichain/hooks/useIsMultichainSafe.ts b/src/features/multichain/hooks/useIsMultichainSafe.ts
index 89205b3e7c..0f235feace 100644
--- a/src/features/multichain/hooks/useIsMultichainSafe.ts
+++ b/src/features/multichain/hooks/useIsMultichainSafe.ts
@@ -1,4 +1,4 @@
-import { useAllSafesGrouped } from '@/components/welcome/MyAccounts/useAllSafesGrouped'
+import { useAllSafesGrouped } from '@/features/myAccounts/hooks/useAllSafesGrouped'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import { sameAddress } from '@/utils/addresses'
 import { useMemo } from 'react'
diff --git a/src/features/multichain/utils/utils.test.ts b/src/features/multichain/utils/utils.test.ts
index 0735b11d5a..4eff5c8ba6 100644
--- a/src/features/multichain/utils/utils.test.ts
+++ b/src/features/multichain/utils/utils.test.ts
@@ -13,9 +13,15 @@ describe('multiChain/utils', () => {
             {
               address: faker.finance.ethereumAddress(),
               chainId: '1',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
           ],
+          isPinned: false,
+          lastVisited: 0,
+          name: undefined,
         }),
       ).toBeTruthy()
     })
@@ -25,7 +31,10 @@ describe('multiChain/utils', () => {
         isMultiChainSafeItem({
           address: faker.finance.ethereumAddress(),
           chainId: '1',
-          isWatchlist: false,
+          isReadOnly: false,
+          isPinned: false,
+          lastVisited: 0,
+          name: undefined,
         }),
       ).toBeFalsy()
     })
@@ -229,7 +238,10 @@ describe('multiChain/utils', () => {
             {
               address: faker.finance.ethereumAddress(),
               chainId: '1',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
           ],
           [],
@@ -245,7 +257,10 @@ describe('multiChain/utils', () => {
             {
               address: faker.finance.ethereumAddress(),
               chainId: '1',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
           ],
           [],
@@ -265,12 +280,18 @@ describe('multiChain/utils', () => {
             {
               address,
               chainId: '1',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
             {
               address,
               chainId: '100',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
           ],
           [
@@ -317,12 +338,18 @@ describe('multiChain/utils', () => {
             {
               address,
               chainId: '1',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
             {
               address,
               chainId: '100',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
           ],
           [],
@@ -375,17 +402,26 @@ describe('multiChain/utils', () => {
             {
               address,
               chainId: '1',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
             {
               address,
               chainId: '100',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
             {
               address,
               chainId: '5',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
           ],
           [
@@ -436,12 +472,18 @@ describe('multiChain/utils', () => {
             {
               address,
               chainId: '1',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
             {
               address,
               chainId: '100',
-              isWatchlist: false,
+              isReadOnly: false,
+              isPinned: false,
+              lastVisited: 0,
+              name: undefined,
             },
           ],
           [
diff --git a/src/features/multichain/utils/utils.ts b/src/features/multichain/utils/utils.ts
index 1f60254d53..05384ee149 100644
--- a/src/features/multichain/utils/utils.ts
+++ b/src/features/multichain/utils/utils.ts
@@ -9,8 +9,8 @@ import { extractCounterfactualSafeSetup } from '@/features/counterfactual/utils'
 import { encodeSafeSetupCall } from '@/components/new-safe/create/logic'
 import { memoize } from 'lodash'
 import { FEATURES, hasFeature } from '@/utils/chains'
-import { type SafeItem } from '@/components/welcome/MyAccounts/useAllSafes'
-import { type MultiChainSafeItem } from '@/components/welcome/MyAccounts/useAllSafesGrouped'
+import { type SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
+import { type MultiChainSafeItem } from '@/features/myAccounts/hooks/useAllSafesGrouped'
 
 type SafeSetup = {
   owners: string[]
diff --git a/src/features/myAccounts/components/AccountInfoChips/index.tsx b/src/features/myAccounts/components/AccountInfoChips/index.tsx
new file mode 100644
index 0000000000..6181fcf9e5
--- /dev/null
+++ b/src/features/myAccounts/components/AccountInfoChips/index.tsx
@@ -0,0 +1,115 @@
+import { Box, Chip, Typography, useMediaQuery, useTheme } from '@mui/material'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import { LoopIcon } from '@/features/counterfactual/CounterfactualStatusButton'
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import css from './styles.module.css'
+import QueueActions from '../QueueActions'
+import type { ChainInfo, SafeOverview } from '@safe-global/safe-gateway-typescript-sdk'
+import type { UrlObject } from 'url'
+import Link from 'next/link'
+import Track from '@/components/common/Track'
+import { OVERVIEW_EVENTS } from '@/services/analytics'
+
+const AccountStatusChip = ({ isActivating }: { isActivating: boolean }) => {
+  return (
+    <Chip
+      className={css.chip}
+      sx={{
+        backgroundColor: isActivating ? 'var(--color-info-light)' : 'var(--color-warning-background)',
+        // backgroundColor: 'warning.background',
+      }}
+      size="small"
+      label={isActivating ? 'Activating account' : 'Not activated'}
+      icon={
+        isActivating ? (
+          <LoopIcon fontSize="small" className={css.pendingLoopIcon} sx={{ mr: '-4px', ml: '4px' }} />
+        ) : (
+          <ErrorOutlineIcon fontSize="small" color="warning" />
+        )
+      }
+    />
+  )
+}
+
+const ReadOnlyChip = () => {
+  return (
+    <Chip
+      className={css.chip}
+      sx={{ color: 'var(--color-primary-light)', borderColor: 'var(--color-border-light)' }}
+      variant="outlined"
+      size="small"
+      icon={<VisibilityIcon className={css.visibilityIcon} />}
+      label={
+        <Typography variant="caption" display="flex" alignItems="center" gap={0.5}>
+          Read-only
+        </Typography>
+      }
+    />
+  )
+}
+
+export const AccountInfoChips = ({
+  isActivating,
+  isReadOnly,
+  undeployedSafe,
+  isVisible,
+  safeOverview,
+  chain,
+  href,
+  onLinkClick,
+  trackingLabel,
+}: {
+  isActivating: boolean
+  isReadOnly: boolean
+  isVisible: boolean
+  undeployedSafe: boolean
+  safeOverview: SafeOverview | null
+  chain: ChainInfo | undefined
+  href: UrlObject | string
+  onLinkClick: (() => void) | undefined
+  trackingLabel: string
+}) => {
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+  const showQueueActions = isVisible && !undeployedSafe && !isReadOnly
+
+  return (
+    <Box sx={{ width: '100%', mt: 0.3 }}>
+      {undeployedSafe ? (
+        <>
+          {isMobile ? (
+            <Track {...OVERVIEW_EVENTS.OPEN_SAFE} label={trackingLabel}>
+              <Link onClick={onLinkClick} href={href}>
+                <AccountStatusChip isActivating={isActivating} />
+              </Link>
+            </Track>
+          ) : (
+            // For larger screens, the Chip is within the parent Link
+            <AccountStatusChip isActivating={isActivating} />
+          )}
+        </>
+      ) : isReadOnly ? (
+        <>
+          {isMobile ? (
+            <Track {...OVERVIEW_EVENTS.OPEN_SAFE} label={trackingLabel}>
+              <Link onClick={onLinkClick} href={href}>
+                <ReadOnlyChip />
+              </Link>
+            </Track>
+          ) : (
+            // For larger screens, the Chip is within the parent Link
+            <ReadOnlyChip />
+          )}
+        </>
+      ) : showQueueActions && safeOverview ? (
+        <QueueActions
+          isMobile={isMobile}
+          queued={safeOverview?.queued || 0}
+          awaitingConfirmation={safeOverview?.awaitingConfirmation || 0}
+          safeAddress={safeOverview?.address.value}
+          chainShortName={chain?.shortName || ''}
+        />
+      ) : null}
+    </Box>
+  )
+}
diff --git a/src/features/myAccounts/components/AccountInfoChips/styles.module.css b/src/features/myAccounts/components/AccountInfoChips/styles.module.css
new file mode 100644
index 0000000000..db9942e344
--- /dev/null
+++ b/src/features/myAccounts/components/AccountInfoChips/styles.module.css
@@ -0,0 +1,20 @@
+.chip {
+  border-radius: var(--space-2);
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.visibilityIcon {
+  font-size: 16px !important;
+  color: var(--color-border-main) !important;
+}
+
+.pendingLoopIcon {
+  color: var(--color-info-dark) !important;
+}
+
+@media (max-width: 600px) {
+  .chip {
+    margin: 0 var(--space-2) var(--space-2) var(--space-2);
+  }
+}
diff --git a/src/components/welcome/MyAccounts/MultiAccountItem.tsx b/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx
similarity index 68%
rename from src/components/welcome/MyAccounts/MultiAccountItem.tsx
rename to src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx
index 7e00f2e083..5cc0e071c0 100644
--- a/src/components/welcome/MyAccounts/MultiAccountItem.tsx
+++ b/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx
@@ -12,24 +12,25 @@ import {
   AccordionSummary,
   Divider,
   Tooltip,
+  SvgIcon,
+  IconButton,
 } from '@mui/material'
 import SafeIcon from '@/components/common/SafeIcon'
-import { OVERVIEW_EVENTS, OVERVIEW_LABELS, trackEvent } from '@/services/analytics'
+import { OVERVIEW_EVENTS, OVERVIEW_LABELS, PIN_SAFE_LABELS, trackEvent } from '@/services/analytics'
 import { AppRoutes } from '@/config/routes'
-import { useAppSelector } from '@/store'
+import { useAppDispatch, useAppSelector } from '@/store'
 import css from './styles.module.css'
-import { selectAllAddressBooks } from '@/store/addressBookSlice'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import { sameAddress } from '@/utils/addresses'
 import classnames from 'classnames'
 import { useRouter } from 'next/router'
 import FiatValue from '@/components/common/FiatValue'
-import { type MultiChainSafeItem } from './useAllSafesGrouped'
+import { type MultiChainSafeItem } from '@/features/myAccounts/hooks/useAllSafesGrouped'
 import { shortenAddress } from '@/utils/formatters'
-import { type SafeItem } from './useAllSafes'
+import { type SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
 import SubAccountItem from './SubAccountItem'
 import { getSafeSetups, getSharedSetup, hasMultiChainAddNetworkFeature } from '@/features/multichain/utils/utils'
-import { AddNetworkButton } from './AddNetworkButton'
+import { AddNetworkButton } from '../AddNetworkButton'
 import { isPredictedSafeProps } from '@/features/counterfactual/utils'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import MultiAccountContextMenu from '@/components/sidebar/SafeListContextMenu/MultiAccountContextMenu'
@@ -37,6 +38,12 @@ import { useGetMultipleSafeOverviewsQuery } from '@/store/api/gateway'
 import useWallet from '@/hooks/wallets/useWallet'
 import { selectCurrency } from '@/store/settingsSlice'
 import { selectChains } from '@/store/chainsSlice'
+import BookmarkIcon from '@/public/images/apps/bookmark.svg'
+import BookmarkedIcon from '@/public/images/apps/bookmarked.svg'
+import { addOrUpdateSafe, pinSafe, selectAllAddedSafes, unpinSafe } from '@/store/addedSafesSlice'
+import { defaultSafeInfo } from '@/store/safeInfoSlice'
+import { selectOrderByPreference } from '@/store/orderByPreferenceSlice'
+import { getComparator } from '@/features/myAccounts/utils/utils'
 
 type MultiAccountItemProps = {
   multiSafeAccountItem: MultiChainSafeItem
@@ -78,7 +85,7 @@ const MultichainIndicator = ({ safes }: { safes: SafeItem[] }) => {
 }
 
 const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountItemProps) => {
-  const { address, safes } = multiSafeAccountItem
+  const { address, safes, isPinned } = multiSafeAccountItem
   const undeployedSafes = useAppSelector(selectUndeployedSafes)
   const safeAddress = useSafeAddress()
   const router = useRouter()
@@ -86,11 +93,18 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
   const isWelcomePage = router.pathname === AppRoutes.welcome.accounts
   const [expanded, setExpanded] = useState(isCurrentSafe)
   const chains = useAppSelector(selectChains)
+  const { orderBy } = useAppSelector(selectOrderByPreference)
+
+  const sortComparator = getComparator(orderBy)
+  const sortedSafes = useMemo(() => safes.sort(sortComparator), [safes, sortComparator])
+
+  const allAddedSafes = useAppSelector((state) => selectAllAddedSafes(state))
+  const dispatch = useAppDispatch()
 
   const deployedChainIds = useMemo(() => safes.map((safe) => safe.chainId), [safes])
 
-  const isWatchlist = useMemo(
-    () => multiSafeAccountItem.safes.every((safe) => safe.isWatchlist),
+  const isReadOnly = useMemo(
+    () => multiSafeAccountItem.safes.every((safe) => safe.isReadOnly),
     [multiSafeAccountItem.safes],
   )
 
@@ -101,11 +115,6 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
     setExpanded((prev) => !prev)
   }
 
-  const allAddressBooks = useAppSelector(selectAllAddressBooks)
-  const name = useMemo(() => {
-    return Object.values(allAddressBooks).find((ab) => ab[address] !== undefined)?.[address]
-  }, [address, allAddressBooks])
-
   const currency = useAppSelector(selectCurrency)
   const { address: walletAddress } = useWallet() ?? {}
   const deployedSafes = useMemo(
@@ -147,6 +156,39 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
     [safeOverviews],
   )
 
+  const addToPinnedList = useCallback(() => {
+    const isGroupAdded = safes.every((safe) => allAddedSafes[safe.chainId]?.[safe.address])
+    if (isGroupAdded) {
+      for (const safe of safes) {
+        dispatch(pinSafe({ chainId: safe.chainId, address: safe.address }))
+      }
+    } else {
+      for (const safe of safes) {
+        const overview = findOverview(safe)
+        dispatch(
+          addOrUpdateSafe({
+            safe: {
+              ...defaultSafeInfo,
+              chainId: safe.chainId,
+              address: { value: address },
+              owners: overview ? overview.owners : defaultSafeInfo.owners,
+              threshold: overview ? overview.threshold : defaultSafeInfo.threshold,
+            },
+          }),
+        )
+        dispatch(pinSafe({ chainId: safe.chainId, address: safe.address }))
+      }
+    }
+    trackEvent({ ...OVERVIEW_EVENTS.PIN_SAFE, label: PIN_SAFE_LABELS.pin })
+  }, [safes, allAddedSafes, dispatch, findOverview, address])
+
+  const removeFromPinnedList = useCallback(() => {
+    for (const safe of safes) {
+      dispatch(unpinSafe({ chainId: safe.chainId, address: safe.address }))
+    }
+    trackEvent({ ...OVERVIEW_EVENTS.PIN_SAFE, label: PIN_SAFE_LABELS.unpin })
+  }, [safes, dispatch])
+
   return (
     <ListItemButton
       data-testid="safe-list-item"
@@ -163,31 +205,14 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
             '&.Mui-expanded': { backgroundColor: 'transparent !important' },
           }}
         >
-          <Box
-            className={css.safeLink}
-            sx={{
-              width: '100%',
-            }}
-          >
-            <Box
-              sx={{
-                pr: 2.5,
-              }}
-              data-testid="group-safe-icon"
-            >
+          <Box className={classnames(css.multiSafeLink, css.safeLink)} width="100%">
+            <Box sx={{ pr: 2.5 }} data-testid="group-safe-icon">
               <SafeIcon address={address} owners={sharedSetup?.owners.length} threshold={sharedSetup?.threshold} />
             </Box>
             <Typography variant="body2" component="div" className={css.safeAddress}>
-              {name && (
-                <Typography
-                  variant="subtitle2"
-                  component="p"
-                  className={css.safeName}
-                  sx={{
-                    fontWeight: 'bold',
-                  }}
-                >
-                  {name}
+              {multiSafeAccountItem.name && (
+                <Typography variant="subtitle2" component="p" sx={{ fontWeight: 'bold' }} className={css.safeName}>
+                  {multiSafeAccountItem.name}
                 </Typography>
               )}
               <Typography
@@ -218,8 +243,24 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
               )}
             </Typography>
           </Box>
+          <IconButton
+            edge="end"
+            size="medium"
+            sx={{ mx: 1 }}
+            onClick={(event) => {
+              event.stopPropagation()
+              isPinned ? removeFromPinnedList() : addToPinnedList()
+            }}
+          >
+            <SvgIcon
+              component={isPinned ? BookmarkedIcon : BookmarkIcon}
+              inheritViewBox
+              color={isPinned ? 'primary' : undefined}
+              fontSize="small"
+            />
+          </IconButton>
           <MultiAccountContextMenu
-            name={name ?? ''}
+            name={multiSafeAccountItem.name ?? ''}
             address={address}
             chainIds={deployedChainIds}
             addNetwork={hasReplayableSafe}
@@ -227,7 +268,7 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
         </AccordionSummary>
         <AccordionDetails sx={{ padding: '0px 12px' }}>
           <Box data-testid="subacounts-container">
-            {safes.map((safeItem) => (
+            {sortedSafes.map((safeItem) => (
               <SubAccountItem
                 onLinkClick={onLinkClick}
                 safeItem={safeItem}
@@ -236,7 +277,7 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
               />
             ))}
           </Box>
-          {!isWatchlist && hasReplayableSafe && (
+          {!isReadOnly && hasReplayableSafe && (
             <>
               <Divider sx={{ ml: '-12px', mr: '-12px' }} />
               <Box
@@ -249,7 +290,7 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
                 }}
               >
                 <AddNetworkButton
-                  currentName={name}
+                  currentName={multiSafeAccountItem.name ?? ''}
                   safeAddress={address}
                   deployedChains={safes.map((safe) => safe.chainId)}
                 />
diff --git a/src/components/welcome/MyAccounts/AccountItem.tsx b/src/features/myAccounts/components/AccountItems/SingleAccountItem.tsx
similarity index 53%
rename from src/components/welcome/MyAccounts/AccountItem.tsx
rename to src/features/myAccounts/components/AccountItems/SingleAccountItem.tsx
index 2d25ddba2d..f7b1c4a9f0 100644
--- a/src/components/welcome/MyAccounts/AccountItem.tsx
+++ b/src/features/myAccounts/components/AccountItems/SingleAccountItem.tsx
@@ -1,14 +1,12 @@
-import { LoopIcon } from '@/features/counterfactual/CounterfactualStatusButton'
 import { selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
-import type { SafeOverview } from '@safe-global/safe-gateway-typescript-sdk'
-import { useMemo } from 'react'
-import { ListItemButton, Box, Typography, Chip, Skeleton } from '@mui/material'
+import { type SafeOverview } from '@safe-global/safe-gateway-typescript-sdk'
+import { useMemo, useRef } from 'react'
+import { ListItemButton, Box, Typography, IconButton, SvgIcon, Skeleton, useTheme, useMediaQuery } from '@mui/material'
 import Link from 'next/link'
-import SafeIcon from '@/components/common/SafeIcon'
 import Track from '@/components/common/Track'
-import { OVERVIEW_EVENTS, OVERVIEW_LABELS } from '@/services/analytics'
+import { OVERVIEW_EVENTS, OVERVIEW_LABELS, PIN_SAFE_LABELS, trackEvent } from '@/services/analytics'
 import { AppRoutes } from '@/config/routes'
-import { useAppSelector } from '@/store'
+import { useAppDispatch, useAppSelector } from '@/store'
 import { selectChainById } from '@/store/chainsSlice'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import css from './styles.module.css'
@@ -20,16 +18,21 @@ import useChainId from '@/hooks/useChainId'
 import { sameAddress } from '@/utils/addresses'
 import classnames from 'classnames'
 import { useRouter } from 'next/router'
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
-import type { SafeItem } from './useAllSafes'
-import FiatValue from '@/components/common/FiatValue'
-import QueueActions from './QueueActions'
-import { useGetHref } from './useGetHref'
+import type { SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
+import { useGetHref } from '@/features/myAccounts/hooks/useGetHref'
 import { extractCounterfactualSafeSetup, isPredictedSafeProps } from '@/features/counterfactual/utils'
-import { useGetSafeOverviewQuery } from '@/store/api/gateway'
 import useWallet from '@/hooks/wallets/useWallet'
-import { skipToken } from '@reduxjs/toolkit/query'
 import { hasMultiChainAddNetworkFeature } from '@/features/multichain/utils/utils'
+import BookmarkIcon from '@/public/images/apps/bookmark.svg'
+import BookmarkedIcon from '@/public/images/apps/bookmarked.svg'
+import { addOrUpdateSafe, unpinSafe } from '@/store/addedSafesSlice'
+import SafeIcon from '@/components/common/SafeIcon'
+import useOnceVisible from '@/hooks/useOnceVisible'
+import { skipToken } from '@reduxjs/toolkit/query'
+import { defaultSafeInfo, useGetSafeOverviewQuery } from '@/store/slices'
+import FiatValue from '@/components/common/FiatValue'
+import { AccountInfoChips } from '../AccountInfoChips'
+
 type AccountItemProps = {
   safeItem: SafeItem
   safeOverview?: SafeOverview
@@ -37,7 +40,7 @@ type AccountItemProps = {
 }
 
 const AccountItem = ({ onLinkClick, safeItem }: AccountItemProps) => {
-  const { chainId, address } = safeItem
+  const { chainId, address, isReadOnly, isPinned } = safeItem
   const chain = useAppSelector((state) => selectChainById(state, chainId))
   const undeployedSafe = useAppSelector((state) => selectUndeployedSafe(state, chainId, address))
   const safeAddress = useSafeAddress()
@@ -46,6 +49,12 @@ const AccountItem = ({ onLinkClick, safeItem }: AccountItemProps) => {
   const isCurrentSafe = chainId === currChainId && sameAddress(safeAddress, address)
   const isWelcomePage = router.pathname === AppRoutes.welcome.accounts
   const { address: walletAddress } = useWallet() ?? {}
+  const elementRef = useRef<HTMLDivElement>(null)
+  const isVisible = useOnceVisible(elementRef)
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  const dispatch = useAppDispatch()
 
   const trackingLabel = isWelcomePage ? OVERVIEW_LABELS.login_page : OVERVIEW_LABELS.sidebar
 
@@ -65,12 +74,10 @@ const AccountItem = ({ onLinkClick, safeItem }: AccountItemProps) => {
 
   const addNetworkFeatureEnabled = hasMultiChainAddNetworkFeature(chain)
   const isReplayable =
-    addNetworkFeatureEnabled &&
-    !safeItem.isWatchlist &&
-    (!undeployedSafe || !isPredictedSafeProps(undeployedSafe.props))
+    addNetworkFeatureEnabled && !isReadOnly && (!undeployedSafe || !isPredictedSafeProps(undeployedSafe.props))
 
   const { data: safeOverview } = useGetSafeOverviewQuery(
-    undeployedSafe
+    undeployedSafe || !isVisible
       ? skipToken
       : {
           chainId: safeItem.chainId,
@@ -79,8 +86,33 @@ const AccountItem = ({ onLinkClick, safeItem }: AccountItemProps) => {
         },
   )
 
+  const safeThreshold = safeOverview?.threshold ?? counterfactualSetup?.threshold ?? defaultSafeInfo.threshold
+  const safeOwners =
+    safeOverview?.owners ?? counterfactualSetup?.owners.map((address) => ({ value: address })) ?? defaultSafeInfo.owners
+
+  const addToPinnedList = () => {
+    dispatch(
+      addOrUpdateSafe({
+        safe: {
+          ...defaultSafeInfo,
+          chainId,
+          address: { value: address },
+          owners: safeOwners,
+          threshold: safeThreshold,
+        },
+      }),
+    )
+    trackEvent({ ...OVERVIEW_EVENTS.PIN_SAFE, label: PIN_SAFE_LABELS.pin })
+  }
+
+  const removeFromPinnedList = () => {
+    dispatch(unpinSafe({ chainId, address }))
+    trackEvent({ ...OVERVIEW_EVENTS.PIN_SAFE, label: PIN_SAFE_LABELS.unpin })
+  }
+
   return (
     <ListItemButton
+      ref={elementRef}
       data-testid="safe-list-item"
       selected={isCurrentSafe}
       className={classnames(css.listItem, { [css.currentListItem]: isCurrentSafe })}
@@ -94,8 +126,8 @@ const AccountItem = ({ onLinkClick, safeItem }: AccountItemProps) => {
           >
             <SafeIcon
               address={address}
-              owners={safeOverview?.owners.length ?? counterfactualSetup?.owners.length}
-              threshold={safeOverview?.threshold ?? counterfactualSetup?.threshold}
+              owners={safeOwners.length > 0 ? safeOwners.length : undefined}
+              threshold={safeThreshold > 0 ? safeThreshold : undefined}
               chainId={chainId}
             />
           </Box>
@@ -123,51 +155,63 @@ const AccountItem = ({ onLinkClick, safeItem }: AccountItemProps) => {
             >
               {shortenAddress(address)}
             </Typography>
-            {undeployedSafe && (
-              <div>
-                <Chip
-                  size="small"
-                  label={isActivating ? 'Activating account' : 'Not activated'}
-                  icon={
-                    isActivating ? (
-                      <LoopIcon fontSize="small" className={css.pendingLoopIcon} sx={{ mr: '-4px', ml: '4px' }} />
-                    ) : (
-                      <ErrorOutlineIcon fontSize="small" color="warning" />
-                    )
-                  }
-                  className={classnames(css.chip, {
-                    [css.pendingAccount]: isActivating,
-                  })}
-                />
-              </div>
+            {!isMobile && (
+              <AccountInfoChips
+                isActivating={isActivating}
+                isReadOnly={isReadOnly}
+                undeployedSafe={!!undeployedSafe}
+                isVisible={isVisible}
+                safeOverview={safeOverview ?? null}
+                chain={chain}
+                href={href}
+                onLinkClick={onLinkClick}
+                trackingLabel={trackingLabel}
+              />
             )}
           </Typography>
 
           <ChainIndicator chainId={chainId} responsive onlyLogo className={css.chainIndicator} />
 
-          <Typography
-            variant="body2"
-            sx={{
-              fontWeight: 'bold',
-              textAlign: 'right',
-              pl: 2,
-            }}
-          >
-            {safeOverview ? (
+          <Typography variant="body2" sx={{ fontWeight: 'bold', textAlign: 'right', pl: 2 }}>
+            {undeployedSafe ? null : safeOverview ? (
               <FiatValue value={safeOverview.fiatTotal} />
-            ) : undeployedSafe ? null : (
+            ) : (
               <Skeleton variant="text" sx={{ ml: 'auto' }} />
             )}
           </Typography>
         </Link>
       </Track>
-      <SafeListContextMenu name={name} address={address} chainId={chainId} addNetwork={isReplayable} rename />
-      <QueueActions
-        queued={safeOverview?.queued || 0}
-        awaitingConfirmation={safeOverview?.awaitingConfirmation || 0}
-        safeAddress={address}
-        chainShortName={chain?.shortName || ''}
+      <IconButton edge="end" size="medium" sx={{ mx: 1 }} onClick={isPinned ? removeFromPinnedList : addToPinnedList}>
+        <SvgIcon
+          component={isPinned ? BookmarkedIcon : BookmarkIcon}
+          inheritViewBox
+          color={isPinned ? 'primary' : undefined}
+          fontSize="small"
+        />
+      </IconButton>
+
+      <SafeListContextMenu
+        name={name}
+        address={address}
+        chainId={chainId}
+        addNetwork={isReplayable}
+        rename
+        undeployedSafe={!!undeployedSafe}
       />
+
+      {isMobile && (
+        <AccountInfoChips
+          isActivating={isActivating}
+          isReadOnly={isReadOnly}
+          undeployedSafe={!!undeployedSafe}
+          isVisible={isVisible}
+          safeOverview={safeOverview ?? null}
+          chain={chain}
+          href={href}
+          onLinkClick={onLinkClick}
+          trackingLabel={trackingLabel}
+        />
+      )}
     </ListItemButton>
   )
 }
diff --git a/src/components/welcome/MyAccounts/SubAccountItem.tsx b/src/features/myAccounts/components/AccountItems/SubAccountItem.tsx
similarity index 65%
rename from src/components/welcome/MyAccounts/SubAccountItem.tsx
rename to src/features/myAccounts/components/AccountItems/SubAccountItem.tsx
index 53dbc90f0d..e5a8e80a98 100644
--- a/src/components/welcome/MyAccounts/SubAccountItem.tsx
+++ b/src/features/myAccounts/components/AccountItems/SubAccountItem.tsx
@@ -1,8 +1,7 @@
-import { LoopIcon } from '@/features/counterfactual/CounterfactualStatusButton'
 import { selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
 import type { SafeOverview } from '@safe-global/safe-gateway-typescript-sdk'
-import { useMemo } from 'react'
-import { ListItemButton, Box, Typography, Chip, Skeleton } from '@mui/material'
+import { useMemo, useRef } from 'react'
+import { ListItemButton, Box, Typography, Skeleton, useMediaQuery, useTheme } from '@mui/material'
 import Link from 'next/link'
 import SafeIcon from '@/components/common/SafeIcon'
 import Track from '@/components/common/Track'
@@ -18,12 +17,12 @@ import useChainId from '@/hooks/useChainId'
 import { sameAddress } from '@/utils/addresses'
 import classnames from 'classnames'
 import { useRouter } from 'next/router'
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
-import type { SafeItem } from './useAllSafes'
+import type { SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
 import FiatValue from '@/components/common/FiatValue'
-import QueueActions from './QueueActions'
-import { useGetHref } from './useGetHref'
+import { useGetHref } from '@/features/myAccounts/hooks/useGetHref'
 import { extractCounterfactualSafeSetup } from '@/features/counterfactual/utils'
+import useOnceVisible from '@/hooks/useOnceVisible'
+import { AccountInfoChips } from '../AccountInfoChips'
 
 type SubAccountItem = {
   safeItem: SafeItem
@@ -40,6 +39,10 @@ const SubAccountItem = ({ onLinkClick, safeItem, safeOverview }: SubAccountItem)
   const router = useRouter()
   const isCurrentSafe = chainId === currChainId && sameAddress(safeAddress, address)
   const isWelcomePage = router.pathname === AppRoutes.welcome.accounts
+  const elementRef = useRef<HTMLDivElement>(null)
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+  const isVisible = useOnceVisible(elementRef)
 
   const trackingLabel = isWelcomePage ? OVERVIEW_LABELS.login_page : OVERVIEW_LABELS.sidebar
 
@@ -57,17 +60,14 @@ const SubAccountItem = ({ onLinkClick, safeItem, safeOverview }: SubAccountItem)
 
   return (
     <ListItemButton
+      ref={elementRef}
       data-testid="safe-list-item"
       selected={isCurrentSafe}
       className={classnames(css.listItem, { [css.currentListItem]: isCurrentSafe }, css.subItem)}
     >
       <Track {...OVERVIEW_EVENTS.OPEN_SAFE} label={trackingLabel}>
-        <Link onClick={onLinkClick} href={href} className={css.safeSubLink}>
-          <Box
-            sx={{
-              pr: 2.5,
-            }}
-          >
+        <Link onClick={onLinkClick} href={href} className={classnames(css.safeLink, css.safeSubLink)}>
+          <Box sx={{ pr: 2.5 }}>
             <SafeIcon
               address={address}
               owners={safeOverview?.owners.length ?? cfSafeSetup?.owners.length}
@@ -99,51 +99,54 @@ const SubAccountItem = ({ onLinkClick, safeItem, safeOverview }: SubAccountItem)
             >
               {chain?.chainName}
             </Typography>
-            {undeployedSafe && (
-              <div>
-                <Chip
-                  size="small"
-                  label={isActivating ? 'Activating account' : 'Not activated'}
-                  icon={
-                    isActivating ? (
-                      <LoopIcon fontSize="small" className={css.pendingLoopIcon} sx={{ mr: '-4px', ml: '4px' }} />
-                    ) : (
-                      <ErrorOutlineIcon fontSize="small" color="warning" />
-                    )
-                  }
-                  className={classnames(css.chip, {
-                    [css.pendingAccount]: isActivating,
-                  })}
-                />
-              </div>
+            {!isMobile && (
+              <AccountInfoChips
+                isActivating={isActivating}
+                isReadOnly={safeItem.isReadOnly}
+                undeployedSafe={!!undeployedSafe}
+                isVisible={isVisible}
+                safeOverview={safeOverview ?? null}
+                chain={chain}
+                href={href}
+                onLinkClick={onLinkClick}
+                trackingLabel={trackingLabel}
+              />
             )}
           </Typography>
 
-          <Typography
-            variant="body2"
-            sx={{
-              fontWeight: 'bold',
-              textAlign: 'right',
-              pr: 5,
-            }}
-          >
-            {safeOverview ? (
+          <Typography variant="body2" fontWeight="bold" textAlign="right" sx={{ pr: 5 }}>
+            {undeployedSafe ? null : safeOverview ? (
               <FiatValue value={safeOverview.fiatTotal} />
-            ) : undeployedSafe ? null : (
+            ) : (
               <Skeleton variant="text" />
             )}
           </Typography>
         </Link>
       </Track>
       {undeployedSafe && (
-        <SafeListContextMenu name={name} address={address} chainId={chainId} addNetwork={false} rename={false} />
+        <SafeListContextMenu
+          name={name}
+          address={address}
+          chainId={chainId}
+          addNetwork={false}
+          rename={false}
+          undeployedSafe={!!undeployedSafe}
+        />
+      )}
+
+      {isMobile && (
+        <AccountInfoChips
+          isActivating={isActivating}
+          isReadOnly={safeItem.isReadOnly}
+          undeployedSafe={!!undeployedSafe}
+          isVisible={isVisible}
+          safeOverview={safeOverview ?? null}
+          chain={chain}
+          href={href}
+          onLinkClick={onLinkClick}
+          trackingLabel={trackingLabel}
+        />
       )}
-      <QueueActions
-        queued={safeOverview?.queued || 0}
-        awaitingConfirmation={safeOverview?.awaitingConfirmation || 0}
-        safeAddress={address}
-        chainShortName={chain?.shortName || ''}
-      />
     </ListItemButton>
   )
 }
diff --git a/src/components/welcome/MyAccounts/styles.module.css b/src/features/myAccounts/components/AccountItems/styles.module.css
similarity index 55%
rename from src/components/welcome/MyAccounts/styles.module.css
rename to src/features/myAccounts/components/AccountItems/styles.module.css
index 485a31323a..4adeb324f6 100644
--- a/src/components/welcome/MyAccounts/styles.module.css
+++ b/src/features/myAccounts/components/AccountItems/styles.module.css
@@ -1,33 +1,3 @@
-.container {
-  container-type: inline-size;
-  container-name: my-accounts-container;
-  display: flex;
-  justify-content: center;
-}
-
-.myAccounts {
-  width: 100%;
-  max-width: 600px;
-  margin: var(--space-2);
-}
-
-.safeList {
-  padding: var(--space-3);
-  margin-bottom: var(--space-3);
-}
-
-.safeList :last-child {
-  margin-bottom: 0;
-}
-
-.header {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  padding: var(--space-3) 0;
-  gap: var(--space-1);
-}
-
 .listItem {
   border: 1px solid var(--color-border-light);
   border-radius: var(--space-1);
@@ -69,6 +39,7 @@
   border-radius: 6px;
   border: 1px solid var(--color-border-light);
 }
+
 .subItem.currentListItem .borderLeft {
   border-left: 4px solid var(--color-secondary-light);
 }
@@ -81,15 +52,16 @@
 .safeLink {
   display: grid;
   padding: var(--space-2) var(--space-1) var(--space-2) var(--space-2);
-  grid-template-columns: 60px 3fr 3fr minmax(auto, 2fr);
+  grid-template-columns: 60px 10fr 2fr 3fr;
   align-items: center;
 }
 
+.multiSafeLink {
+  grid-template-columns: 60px 8fr 5fr 3fr;
+}
+
 .safeSubLink {
-  display: grid;
-  padding: var(--space-2) var(--space-1) var(--space-2) var(--space-2);
   grid-template-columns: 60px 3fr minmax(auto, 2fr);
-  align-items: center;
 }
 
 .safeName,
@@ -100,52 +72,11 @@
 }
 
 .listHeader {
-  padding-bottom: var(--space-1);
   display: flex;
-  justify-content: space-between;
 }
 
-.listTitle {
-  margin: auto 0;
-}
-
-.card {
-  margin: auto;
-  padding: var(--space-3);
-  display: flex;
-  flex-direction: column;
-  background-color: transparent;
-}
-
-.card :global .MuiCardHeader-root,
-.card :global .MuiCardContent-root {
-  padding: 0;
-}
-
-.cardHeader {
-  text-align: center;
-}
-
-.infoIcon {
-  vertical-align: middle;
-  width: 1rem;
-  height: 1rem;
-  margin: 4px;
-  color: var(--color-text-secondary);
-}
-
-.chip {
-  border-radius: 4px;
-  background-color: var(--color-warning-background);
-  margin-top: 4px;
-}
-
-.pendingAccount {
-  background-color: var(--color-info-light);
-}
-
-.pendingLoopIcon {
-  color: var(--color-info-dark) !important;
+.listHeader svg path {
+  stroke: var(--color-text-primary);
 }
 
 .multiChains {
@@ -165,11 +96,15 @@
   justify-content: flex-end;
 }
 
-@media (max-width: 899.95px) {
-  .container {
-    width: auto;
-  }
+.chipSection {
+  width: 100%;
+}
 
+.chipSection:empty {
+  display: none;
+}
+
+@media (max-width: 899.95px) {
   .safeLink {
     padding-right: 0;
   }
@@ -200,28 +135,8 @@
   .multiChains {
     justify-content: flex-start;
   }
-}
 
-@container my-accounts-container (max-width: 500px) {
-  .myAccounts {
-    margin: 0;
-  }
-
-  .header {
-    padding: var(--space-3);
-    border-bottom: 1px solid var(--color-border-light);
-  }
-
-  .safeList {
-    border-radius: 0;
-    margin-bottom: 0;
-  }
-
-  .title {
-    font-size: 20px;
-  }
-
-  .card {
-    border-top: 1px solid var(--color-border-light);
+  .chainIndicator {
+    justify-content: flex-start;
   }
 }
diff --git a/src/components/welcome/MyAccounts/AddNetworkButton.tsx b/src/features/myAccounts/components/AddNetworkButton/index.tsx
similarity index 100%
rename from src/components/welcome/MyAccounts/AddNetworkButton.tsx
rename to src/features/myAccounts/components/AddNetworkButton/index.tsx
diff --git a/src/components/welcome/MyAccounts/CreateButton.tsx b/src/features/myAccounts/components/CreateButton/index.tsx
similarity index 88%
rename from src/components/welcome/MyAccounts/CreateButton.tsx
rename to src/features/myAccounts/components/CreateButton/index.tsx
index 51153ce78b..d3ee1f8c87 100644
--- a/src/components/welcome/MyAccounts/CreateButton.tsx
+++ b/src/features/myAccounts/components/CreateButton/index.tsx
@@ -2,7 +2,7 @@ import { Button } from '@mui/material'
 import Link from 'next/link'
 import { AppRoutes } from '@/config/routes'
 
-const buttonSx = { width: ['100%', 'auto'] }
+const buttonSx = { width: ['100%', 'auto'], height: '36px', px: 2 }
 
 const CreateButton = ({ isPrimary }: { isPrimary: boolean }) => {
   return (
diff --git a/src/components/welcome/MyAccounts/DataWidget.tsx b/src/features/myAccounts/components/DataWidget/index.tsx
similarity index 71%
rename from src/components/welcome/MyAccounts/DataWidget.tsx
rename to src/features/myAccounts/components/DataWidget/index.tsx
index cc6f0c10e7..a8799633e1 100644
--- a/src/components/welcome/MyAccounts/DataWidget.tsx
+++ b/src/features/myAccounts/components/DataWidget/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Grid, SvgIcon, Card, CardHeader, CardContent, Tooltip } from '@mui/material'
+import { Button, SvgIcon, Card, CardHeader, CardContent, Tooltip, Box } from '@mui/material'
 import { useState } from 'react'
 import type { ReactElement } from 'react'
 
@@ -56,37 +56,33 @@ export const DataWidget = (): ReactElement => {
         }
       />
       <CardContent>
-        <Grid container spacing={2} sx={{ maxWidth: 240, margin: 'auto', paddingRight: 2 }}>
+        <Box display="flex" gap={2} justifyContent="center" sx={{ maxWidth: 240, margin: 'auto' }}>
           {hasData && (
-            <Grid item xs={6}>
-              <Track {...OVERVIEW_EVENTS.EXPORT_DATA} label={trackingLabel}>
-                <Button
-                  variant="outlined"
-                  size="small"
-                  onClick={exportAppData}
-                  startIcon={<SvgIcon component={ExportIcon} inheritViewBox fontSize="small" />}
-                  sx={{ width: '100%', py: 0.5 }}
-                >
-                  Export
-                </Button>
-              </Track>
-            </Grid>
-          )}
-          <Grid item xs={6}>
-            <Track {...OVERVIEW_EVENTS.IMPORT_DATA} label={trackingLabel}>
+            <Track {...OVERVIEW_EVENTS.EXPORT_DATA} label={trackingLabel}>
               <Button
-                data-testid="import-btn"
                 variant="outlined"
                 size="small"
-                onClick={onImport}
-                startIcon={<SvgIcon component={ImportIcon} inheritViewBox fontSize="small" />}
-                sx={{ width: '100%', py: 0.5 }}
+                onClick={exportAppData}
+                startIcon={<SvgIcon component={ExportIcon} inheritViewBox fontSize="small" />}
+                sx={{ width: '100%', py: 0.5, px: 2, mt: 2 }}
               >
-                Import
+                Export
               </Button>
             </Track>
-          </Grid>
-        </Grid>
+          )}
+          <Track {...OVERVIEW_EVENTS.IMPORT_DATA} label={trackingLabel}>
+            <Button
+              data-testid="import-btn"
+              variant="outlined"
+              size="small"
+              onClick={onImport}
+              startIcon={<SvgIcon component={ImportIcon} inheritViewBox fontSize="small" />}
+              sx={{ width: '100%', py: 0.5, px: 2, mt: 2 }}
+            >
+              Import
+            </Button>
+          </Track>
+        </Box>
       </CardContent>
       {importModalOpen && (
         <ImportDialog
diff --git a/src/features/myAccounts/components/DataWidget/styles.module.css b/src/features/myAccounts/components/DataWidget/styles.module.css
new file mode 100644
index 0000000000..18fa2b19c6
--- /dev/null
+++ b/src/features/myAccounts/components/DataWidget/styles.module.css
@@ -0,0 +1,24 @@
+.cardHeader {
+  text-align: center;
+}
+
+.card {
+  margin: auto;
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+}
+
+.card :global .MuiCardHeader-root,
+.card :global .MuiCardContent-root {
+  padding: 0;
+}
+
+.infoIcon {
+  vertical-align: middle;
+  width: 1rem;
+  height: 1rem;
+  margin: 4px;
+  color: var(--color-text-secondary);
+}
diff --git a/src/features/myAccounts/components/OrderByButton/index.tsx b/src/features/myAccounts/components/OrderByButton/index.tsx
new file mode 100644
index 0000000000..5a07a4b4cd
--- /dev/null
+++ b/src/features/myAccounts/components/OrderByButton/index.tsx
@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import { Box, Button, ListItemText, MenuItem, SvgIcon, Typography } from '@mui/material'
+import ContextMenu from '@/components/common/ContextMenu'
+import TransactionsIcon from '@/public/images/transactions/transactions.svg'
+import CheckIcon from '@/public/images/common/check.svg'
+import { OrderByOption } from '@/store/orderByPreferenceSlice'
+import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
+
+type OrderByButtonProps = {
+  orderBy: OrderByOption
+  onOrderByChange: (orderBy: OrderByOption) => void
+}
+
+const orderByLabels = {
+  [OrderByOption.LAST_VISITED]: 'Most recent',
+  [OrderByOption.NAME]: 'Name',
+}
+
+const OrderByButton = ({ orderBy: orderBy, onOrderByChange: onOrderByChange }: OrderByButtonProps) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>()
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(undefined)
+  }
+
+  const handleOrderByChange = (newOrderBy: OrderByOption) => {
+    trackEvent({ ...OVERVIEW_EVENTS.SORT_SAFES, label: orderByLabels[newOrderBy] })
+    onOrderByChange(newOrderBy)
+    handleClose()
+  }
+
+  return (
+    <Box display="flex">
+      <Button
+        onClick={handleClick}
+        startIcon={<SvgIcon component={TransactionsIcon} inheritViewBox />}
+        sx={{ color: 'primary.light', fontWeight: 'normal' }}
+        size="small"
+      >
+        <Typography variant="body2" noWrap>
+          Sort by: {orderByLabels[orderBy]}
+        </Typography>
+      </Button>
+
+      <ContextMenu
+        anchorEl={anchorEl}
+        open={!!anchorEl}
+        onClose={handleClose}
+        sx={{
+          '& .MuiPaper-root': { minWidth: '250px' },
+          '& .Mui-selected, & .Mui-selected:hover': {
+            backgroundColor: `background.paper`,
+          },
+        }}
+      >
+        <MenuItem disabled>
+          <ListItemText>Sort by</ListItemText>
+        </MenuItem>
+        <MenuItem
+          sx={{ borderRadius: 0 }}
+          onClick={() => handleOrderByChange(OrderByOption.LAST_VISITED)}
+          selected={orderBy === OrderByOption.LAST_VISITED}
+        >
+          <ListItemText sx={{ mr: 2 }}>{orderByLabels[OrderByOption.LAST_VISITED]}</ListItemText>
+          {orderBy === OrderByOption.LAST_VISITED && <CheckIcon sx={{ ml: 1 }} />}
+        </MenuItem>
+        <MenuItem onClick={() => handleOrderByChange(OrderByOption.NAME)} selected={orderBy === OrderByOption.NAME}>
+          <ListItemText>{orderByLabels[OrderByOption.NAME]}</ListItemText>
+          {orderBy === OrderByOption.NAME && <CheckIcon sx={{ ml: 1 }} />}
+        </MenuItem>
+      </ContextMenu>
+    </Box>
+  )
+}
+
+export default OrderByButton
diff --git a/src/components/welcome/MyAccounts/QueueActions.tsx b/src/features/myAccounts/components/QueueActions/index.tsx
similarity index 59%
rename from src/components/welcome/MyAccounts/QueueActions.tsx
rename to src/features/myAccounts/components/QueueActions/index.tsx
index cacdd5a3f1..5da57be62e 100644
--- a/src/components/welcome/MyAccounts/QueueActions.tsx
+++ b/src/features/myAccounts/components/QueueActions/index.tsx
@@ -32,11 +32,13 @@ const QueueActions = ({
   chainShortName,
   queued,
   awaitingConfirmation,
+  isMobile = false,
 }: {
   safeAddress: string
   chainShortName: string
   queued: number
   awaitingConfirmation: number
+  isMobile?: boolean
 }) => {
   const queueLink = useMemo<UrlObject>(
     () => ({
@@ -51,39 +53,33 @@ const QueueActions = ({
   }
 
   return (
-    <Box
-      sx={{
-        width: '100%',
-      }}
-    >
-      <Track {...OVERVIEW_EVENTS.OPEN_MISSING_SIGNATURES}>
-        <NextLink href={queueLink}>
-          <Box
-            sx={{
-              px: 2,
-              pb: 2,
-              display: 'flex',
-              gap: 1,
-              alignItems: 'center',
-            }}
-          >
-            {queued > 0 && (
-              <ChipLink>
-                <SvgIcon component={TransactionsIcon} inheritViewBox fontSize="small" />
-                {queued} pending transaction{queued > 1 ? 's' : ''}
-              </ChipLink>
-            )}
+    <Track {...OVERVIEW_EVENTS.OPEN_MISSING_SIGNATURES}>
+      <NextLink href={queueLink}>
+        <Box
+          sx={{
+            px: isMobile ? 2 : 0,
+            pb: isMobile ? 2 : 0,
+            display: 'flex',
+            gap: 1,
+            alignItems: 'center',
+          }}
+        >
+          {queued > 0 && (
+            <ChipLink>
+              <SvgIcon component={TransactionsIcon} inheritViewBox sx={{ fontSize: 'small' }} />
+              {queued} pending
+            </ChipLink>
+          )}
 
-            {awaitingConfirmation > 0 && (
-              <ChipLink color="warning">
-                <SvgIcon component={CheckIcon} inheritViewBox fontSize="small" color="warning" />
-                {awaitingConfirmation} to confirm
-              </ChipLink>
-            )}
-          </Box>
-        </NextLink>
-      </Track>
-    </Box>
+          {awaitingConfirmation > 0 && (
+            <ChipLink color="warning">
+              <SvgIcon component={CheckIcon} inheritViewBox sx={{ fontSize: 'small', color: 'warning' }} />
+              {awaitingConfirmation} to confirm
+            </ChipLink>
+          )}
+        </Box>
+      </NextLink>
+    </Track>
   )
 }
 
diff --git a/src/features/myAccounts/components/SafesList/index.tsx b/src/features/myAccounts/components/SafesList/index.tsx
new file mode 100644
index 0000000000..63f8985725
--- /dev/null
+++ b/src/features/myAccounts/components/SafesList/index.tsx
@@ -0,0 +1,45 @@
+import AccountItem from '@/features/myAccounts/components/AccountItems/SingleAccountItem'
+import type { SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
+import type { MultiChainSafeItem } from '@/features/myAccounts/hooks/useAllSafesGrouped'
+import MultiAccountItem from '@/features/myAccounts/components/AccountItems/MultiAccountItem'
+import { isMultiChainSafeItem } from '@/features/multichain/utils/utils'
+import { TransitionGroup } from 'react-transition-group'
+import { Collapse } from '@mui/material'
+
+type SafeListProps = {
+  safes?: (SafeItem | MultiChainSafeItem)[]
+  onLinkClick?: () => void
+  useTransitions?: boolean
+}
+
+const renderSafeItem = (item: SafeItem | MultiChainSafeItem, onLinkClick?: () => void) => {
+  return isMultiChainSafeItem(item) ? (
+    <MultiAccountItem onLinkClick={onLinkClick} multiSafeAccountItem={item} />
+  ) : (
+    <AccountItem onLinkClick={onLinkClick} safeItem={item} />
+  )
+}
+
+const SafesList = ({ safes, onLinkClick, useTransitions = true }: SafeListProps) => {
+  if (!safes || safes.length === 0) {
+    return null
+  }
+
+  return useTransitions ? (
+    <TransitionGroup>
+      {safes.map((item) => (
+        <Collapse key={item.address} timeout="auto">
+          {renderSafeItem(item, onLinkClick)}
+        </Collapse>
+      ))}
+    </TransitionGroup>
+  ) : (
+    <>
+      {safes.map((item) => (
+        <div key={item.address}>{renderSafeItem(item, onLinkClick)}</div>
+      ))}
+    </>
+  )
+}
+
+export default SafesList
diff --git a/src/components/welcome/MyAccounts/useAllOwnedSafes.ts b/src/features/myAccounts/hooks/useAllOwnedSafes.ts
similarity index 100%
rename from src/components/welcome/MyAccounts/useAllOwnedSafes.ts
rename to src/features/myAccounts/hooks/useAllOwnedSafes.ts
diff --git a/src/components/welcome/MyAccounts/useAllSafes.ts b/src/features/myAccounts/hooks/useAllSafes.ts
similarity index 60%
rename from src/components/welcome/MyAccounts/useAllSafes.ts
rename to src/features/myAccounts/hooks/useAllSafes.ts
index 84c3a40020..6990098fad 100644
--- a/src/components/welcome/MyAccounts/useAllSafes.ts
+++ b/src/features/myAccounts/hooks/useAllSafes.ts
@@ -3,15 +3,18 @@ import uniq from 'lodash/uniq'
 import isEmpty from 'lodash/isEmpty'
 import { useAppSelector } from '@/store'
 import { selectAllAddedSafes } from '@/store/addedSafesSlice'
-import useAllOwnedSafes from './useAllOwnedSafes'
 import useChains from '@/hooks/useChains'
 import useWallet from '@/hooks/wallets/useWallet'
-import { selectUndeployedSafes } from '@/store/slices'
+import { selectAllAddressBooks, selectAllVisitedSafes, selectUndeployedSafes } from '@/store/slices'
 import { sameAddress } from '@/utils/addresses'
+import useAllOwnedSafes from './useAllOwnedSafes'
 export type SafeItem = {
   chainId: string
   address: string
-  isWatchlist: boolean
+  isReadOnly: boolean
+  isPinned: boolean
+  lastVisited: number
+  name: string | undefined
 }
 
 export type SafeItems = SafeItem[]
@@ -36,37 +39,46 @@ export const useHasSafes = () => {
 
 const useAllSafes = (): SafeItems | undefined => {
   const { address: walletAddress = '' } = useWallet() || {}
-  const [allOwned, , allOwnedLoading] = useAllOwnedSafes(walletAddress)
+  const [allOwned] = useAllOwnedSafes(walletAddress)
   const allAdded = useAddedSafes()
+  const allUndeployed = useAppSelector(selectUndeployedSafes)
+  const allVisitedSafes = useAppSelector(selectAllVisitedSafes)
   const { configs } = useChains()
-  const undeployedSafes = useAppSelector(selectUndeployedSafes)
+  const allSafeNames = useAppSelector(selectAllAddressBooks)
 
-  return useMemo<SafeItems | undefined>(() => {
-    if (walletAddress && (allOwned === undefined || allOwnedLoading)) {
-      return undefined
+  return useMemo<SafeItems>(() => {
+    if (walletAddress && allOwned === undefined) {
+      return []
     }
-    const chains = uniq(Object.keys(allAdded).concat(Object.keys(allOwned || {})))
+    const chains = uniq(Object.keys(allOwned || {}).concat(Object.keys(allAdded), Object.keys(allUndeployed)))
+    chains.sort((a, b) => parseInt(a) - parseInt(b))
 
     return chains.flatMap((chainId) => {
       if (!configs.some((item) => item.chainId === chainId)) return []
       const addedOnChain = Object.keys(allAdded[chainId] || {})
       const ownedOnChain = (allOwned || {})[chainId]
-      const undeployedOnChain = Object.keys(undeployedSafes[chainId] || {})
-      const uniqueAddresses = uniq(addedOnChain.concat(ownedOnChain)).filter(Boolean)
+      const undeployedOnChain = Object.keys(allUndeployed[chainId] || {})
+      const uniqueAddresses = uniq(addedOnChain.concat(ownedOnChain, undeployedOnChain).filter(Boolean))
+      uniqueAddresses.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
 
       return uniqueAddresses.map((address) => {
         const owners = allAdded?.[chainId]?.[address]?.owners
+        const isPinned = !!allAdded?.[chainId]?.[address]
         const isOwner = owners?.some(({ value }) => sameAddress(walletAddress, value))
-        const isUndeployed = undeployedOnChain.includes(address)
         const isOwned = (ownedOnChain || []).includes(address) || isOwner
+        const lastVisited = allVisitedSafes?.[chainId]?.[address]?.lastVisited || 0
+        const name = allSafeNames?.[chainId]?.[address]
         return {
           address,
           chainId,
-          isWatchlist: !isOwned && !isUndeployed,
+          isReadOnly: !isOwned,
+          isPinned,
+          lastVisited,
+          name,
         }
       })
     })
-  }, [allAdded, allOwned, allOwnedLoading, configs, undeployedSafes, walletAddress])
+  }, [allAdded, allOwned, allUndeployed, configs, walletAddress, allVisitedSafes, allSafeNames])
 }
 
 export default useAllSafes
diff --git a/src/components/welcome/MyAccounts/useAllSafesGrouped.ts b/src/features/myAccounts/hooks/useAllSafesGrouped.ts
similarity index 70%
rename from src/components/welcome/MyAccounts/useAllSafesGrouped.ts
rename to src/features/myAccounts/hooks/useAllSafesGrouped.ts
index 8877a7a1c0..23f3a4663f 100644
--- a/src/components/welcome/MyAccounts/useAllSafesGrouped.ts
+++ b/src/features/myAccounts/hooks/useAllSafesGrouped.ts
@@ -3,7 +3,13 @@ import useAllSafes, { type SafeItem, type SafeItems } from './useAllSafes'
 import { useMemo } from 'react'
 import { sameAddress } from '@/utils/addresses'
 
-export type MultiChainSafeItem = { address: string; safes: SafeItem[] }
+export type MultiChainSafeItem = {
+  address: string
+  safes: SafeItem[]
+  isPinned: boolean
+  lastVisited: number
+  name: string | undefined
+}
 
 export type AllSafesGrouped = {
   allSingleSafes: SafeItems | undefined
@@ -14,8 +20,13 @@ const getMultiChainAccounts = (safes: SafeItems): MultiChainSafeItem[] => {
   const groupedByAddress = groupBy(safes, (safe) => safe.address)
   const multiChainSafeItems = Object.entries(groupedByAddress)
     .filter((entry) => entry[1].length > 1)
-    .map((entry): MultiChainSafeItem => ({ address: entry[0], safes: entry[1] }))
-
+    .map((entry) => {
+      const [address, safes] = entry
+      const isPinned = safes.some((safe) => safe.isPinned)
+      const lastVisited = safes.reduce((acc, safe) => Math.max(acc, safe.lastVisited || 0), 0)
+      const name = safes.find((safe) => safe.name !== undefined)?.name
+      return { address, safes, isPinned, lastVisited, name }
+    })
   return multiChainSafeItems
 }
 
diff --git a/src/components/welcome/MyAccounts/useGetHref.ts b/src/features/myAccounts/hooks/useGetHref.ts
similarity index 100%
rename from src/components/welcome/MyAccounts/useGetHref.ts
rename to src/features/myAccounts/hooks/useGetHref.ts
diff --git a/src/features/myAccounts/hooks/useSafesSearch.ts b/src/features/myAccounts/hooks/useSafesSearch.ts
new file mode 100644
index 0000000000..c8fe879452
--- /dev/null
+++ b/src/features/myAccounts/hooks/useSafesSearch.ts
@@ -0,0 +1,63 @@
+import { useEffect, useMemo } from 'react'
+import Fuse from 'fuse.js'
+import type { MultiChainSafeItem } from './useAllSafesGrouped'
+import type { SafeItem } from './useAllSafes'
+import { selectChains } from '@/store/chainsSlice'
+import { useAppSelector } from '@/store'
+import { isMultiChainSafeItem } from '@/features/multichain/utils/utils'
+import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
+
+const useSafesSearch = (safes: (SafeItem | MultiChainSafeItem)[], query: string): (SafeItem | MultiChainSafeItem)[] => {
+  const chains = useAppSelector(selectChains)
+
+  useEffect(() => {
+    if (query) {
+      trackEvent({
+        category: OVERVIEW_EVENTS.SEARCH.category,
+        action: OVERVIEW_EVENTS.SEARCH.action,
+      })
+    }
+  }, [query])
+
+  // Include chain names in the search
+  const safesWithChainNames = useMemo(
+    () =>
+      safes.map((safe) => {
+        if (isMultiChainSafeItem(safe)) {
+          const subSafeChains = safe.safes.map(
+            (subSafe) => chains.data.find((chain) => chain.chainId === subSafe.chainId)?.chainName,
+          )
+          const subSafeNames = safe.safes.map((subSafe) => subSafe.name)
+          return { ...safe, chainNames: subSafeChains, names: subSafeNames }
+        }
+        const chain = chains.data.find((chain) => chain.chainId === safe.chainId)
+        return { ...safe, chainNames: [chain?.chainName], names: [safe.name] }
+      }),
+    [safes, chains.data],
+  )
+
+  const fuse = useMemo(
+    () =>
+      new Fuse(safesWithChainNames, {
+        keys: [{ name: 'names' }, { name: 'address' }, { name: 'chainNames' }],
+        threshold: 0.2,
+        findAllMatches: true,
+        ignoreLocation: true,
+      }),
+    [safesWithChainNames],
+  )
+
+  // Return results in the original format
+  return useMemo(
+    () =>
+      query
+        ? fuse.search(query).map((result) => {
+            const { chainNames: _chainNames, names: _names, ...safe } = result.item
+            return safe
+          })
+        : [],
+    [fuse, query],
+  )
+}
+
+export { useSafesSearch }
diff --git a/src/components/welcome/MyAccounts/useTrackedSafesCount.ts b/src/features/myAccounts/hooks/useTrackedSafesCount.ts
similarity index 50%
rename from src/components/welcome/MyAccounts/useTrackedSafesCount.ts
rename to src/features/myAccounts/hooks/useTrackedSafesCount.ts
index 1b0b0ec3ff..9c90115828 100644
--- a/src/components/welcome/MyAccounts/useTrackedSafesCount.ts
+++ b/src/features/myAccounts/hooks/useTrackedSafesCount.ts
@@ -1,23 +1,51 @@
 import { AppRoutes } from '@/config/routes'
 import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
 import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import { type SafeItem } from './useAllSafes'
+import type { AllSafesGrouped } from './useAllSafesGrouped'
 import { type MultiChainSafeItem } from './useAllSafesGrouped'
 import { isMultiChainSafeItem } from '@/features/multichain/utils/utils'
 
 let isOwnedSafesTracked = false
+let isPinnedSafesTracked = false
 let isWatchlistTracked = false
 
 const useTrackSafesCount = (
-  ownedSafes: (MultiChainSafeItem | SafeItem)[] | undefined,
-  watchlistSafes: (MultiChainSafeItem | SafeItem)[] | undefined,
+  safes: AllSafesGrouped,
+  pinnedSafes: (MultiChainSafeItem | SafeItem)[],
   wallet: ConnectedWallet | null,
 ) => {
   const router = useRouter()
   const isLoginPage = router.pathname === AppRoutes.welcome.accounts
 
+  const ownedMultiChainSafes = useMemo(
+    () => safes.allMultiChainSafes?.filter((account) => account.safes.some(({ isReadOnly }) => !isReadOnly)),
+    [safes],
+  )
+
+  // If all safes of a multichain account are on the watchlist we put the entire account on the watchlist
+  const watchlistMultiChainSafes = useMemo(
+    () =>
+      safes.allMultiChainSafes?.filter((account) =>
+        account.safes.some(({ isReadOnly, isPinned }) => isReadOnly && !isPinned),
+      ),
+    [safes],
+  )
+
+  const ownedSafes = useMemo<(MultiChainSafeItem | SafeItem)[]>(
+    () => [...(ownedMultiChainSafes ?? []), ...(safes.allSingleSafes?.filter(({ isReadOnly }) => !isReadOnly) ?? [])],
+    [safes, ownedMultiChainSafes],
+  )
+  const watchlistSafes = useMemo<(MultiChainSafeItem | SafeItem)[]>(
+    () => [
+      ...(watchlistMultiChainSafes ?? []),
+      ...(safes.allSingleSafes?.filter(({ isReadOnly, isPinned }) => isReadOnly && !isPinned) ?? []),
+    ],
+    [safes, watchlistMultiChainSafes],
+  )
+
   // Reset tracking for new wallet
   useEffect(() => {
     isOwnedSafesTracked = false
@@ -34,6 +62,17 @@ const useTrackSafesCount = (
     }
   }, [isLoginPage, ownedSafes, wallet])
 
+  useEffect(() => {
+    const totalSafesPinned = pinnedSafes?.reduce(
+      (prev, current) => prev + (isMultiChainSafeItem(current) ? current.safes.length : 1),
+      0,
+    )
+    if (!isPinnedSafesTracked && pinnedSafes && pinnedSafes.length > 0 && isLoginPage) {
+      trackEvent({ ...OVERVIEW_EVENTS.TOTAL_SAFES_PINNED, label: totalSafesPinned })
+      isPinnedSafesTracked = true
+    }
+  }, [isLoginPage, pinnedSafes])
+
   useEffect(() => {
     const totalSafesWatched = watchlistSafes?.reduce(
       (prev, current) => prev + (isMultiChainSafeItem(current) ? current.safes.length : 1),
diff --git a/src/features/myAccounts/hooks/useVisitedSafes.ts b/src/features/myAccounts/hooks/useVisitedSafes.ts
new file mode 100644
index 0000000000..6836add9d7
--- /dev/null
+++ b/src/features/myAccounts/hooks/useVisitedSafes.ts
@@ -0,0 +1,29 @@
+import { useRouter } from 'next/router'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { useAppDispatch } from '@/store'
+import { useCallback, useEffect } from 'react'
+import { upsertVisitedSafe } from '@/store/visitedSafesSlice'
+
+export const useVisitedSafes = () => {
+  const router = useRouter()
+  const { safe } = useSafeInfo()
+  const dispatch = useAppDispatch()
+
+  const handleRouteChange = useCallback(() => {
+    const { query } = router
+    if (query.safe && safe.address.value) {
+      const visitedSafe = {
+        chainId: safe.chainId,
+        address: safe.address.value,
+        lastVisited: Date.now(),
+      }
+      dispatch(upsertVisitedSafe(visitedSafe))
+    }
+  }, [router, safe.address.value, safe.chainId, dispatch])
+
+  useEffect(() => {
+    if (router.query.safe) {
+      handleRouteChange()
+    }
+  }, [handleRouteChange, router.query.safe])
+}
diff --git a/src/features/myAccounts/index.tsx b/src/features/myAccounts/index.tsx
new file mode 100644
index 0000000000..832e95ad75
--- /dev/null
+++ b/src/features/myAccounts/index.tsx
@@ -0,0 +1,273 @@
+import { useCallback, useMemo, useState } from 'react'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Button,
+  Divider,
+  InputAdornment,
+  Link,
+  Paper,
+  SvgIcon,
+  TextField,
+  Typography,
+} from '@mui/material'
+import debounce from 'lodash/debounce'
+import madProps from '@/utils/mad-props'
+import CreateButton from '@/features/myAccounts/components/CreateButton'
+import AddIcon from '@/public/images/common/add.svg'
+import Track from '@/components/common/Track'
+import { OVERVIEW_EVENTS, OVERVIEW_LABELS } from '@/services/analytics'
+import css from '@/features/myAccounts/styles.module.css'
+import SafesList from '@/features/myAccounts/components/SafesList'
+import { AppRoutes } from '@/config/routes'
+import useWallet from '@/hooks/wallets/useWallet'
+import { useRouter } from 'next/router'
+import {
+  type AllSafesGrouped,
+  useAllSafesGrouped,
+  type MultiChainSafeItem,
+} from '@/features/myAccounts/hooks/useAllSafesGrouped'
+import { type SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import BookmarkIcon from '@/public/images/apps/bookmark.svg'
+import classNames from 'classnames'
+import { getComparator } from '@/features/myAccounts/utils/utils'
+import SearchIcon from '@/public/images/common/search.svg'
+import type { OrderByOption } from '@/store/orderByPreferenceSlice'
+import { selectOrderByPreference, setOrderByPreference } from '@/store/orderByPreferenceSlice'
+import { useAppDispatch, useAppSelector } from '@/store'
+import { useSafesSearch } from '@/features/myAccounts/hooks/useSafesSearch'
+import useTrackSafesCount from '@/features/myAccounts/hooks/useTrackedSafesCount'
+import { DataWidget } from '@/features/myAccounts/components/DataWidget'
+import OrderByButton from '@/features/myAccounts/components/OrderByButton'
+import ConnectWalletButton from '@/components/common/ConnectWallet/ConnectWalletButton'
+
+type AccountsListProps = {
+  safes: AllSafesGrouped
+  isSidebar?: boolean
+  onLinkClick?: () => void
+}
+
+const AccountsList = ({ safes, onLinkClick, isSidebar = false }: AccountsListProps) => {
+  const wallet = useWallet()
+  const router = useRouter()
+  const { orderBy } = useAppSelector(selectOrderByPreference)
+  const dispatch = useAppDispatch()
+  const sortComparator = getComparator(orderBy)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const allSafes = useMemo(
+    () => [...(safes.allMultiChainSafes ?? []), ...(safes.allSingleSafes ?? [])].sort(sortComparator),
+    [safes.allMultiChainSafes, safes.allSingleSafes, sortComparator],
+  )
+  const filteredSafes = useSafesSearch(allSafes ?? [], searchQuery).sort(sortComparator)
+
+  const pinnedSafes = useMemo<(MultiChainSafeItem | SafeItem)[]>(
+    () => [...(allSafes?.filter(({ isPinned }) => isPinned) ?? [])],
+    [allSafes],
+  )
+
+  const handleOrderByChange = (orderBy: OrderByOption) => {
+    dispatch(setOrderByPreference({ orderBy }))
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleSearch = useCallback(debounce(setSearchQuery, 300), [])
+
+  useTrackSafesCount(safes, pinnedSafes, wallet)
+
+  const isLoginPage = router.pathname === AppRoutes.welcome.accounts
+  const trackingLabel = isLoginPage ? OVERVIEW_LABELS.login_page : OVERVIEW_LABELS.sidebar
+
+  return (
+    <Box data-testid="sidebar-safe-container" className={css.container}>
+      <Box className={classNames(css.myAccounts, { [css.sidebarAccounts]: isSidebar })}>
+        <Box className={classNames(css.header, { [css.sidebarHeader]: isSidebar })}>
+          <Typography variant="h1" fontWeight={700} className={css.title}>
+            My accounts
+          </Typography>
+          <Box className={css.headerButtons}>
+            <Track {...OVERVIEW_EVENTS.ADD_TO_WATCHLIST} label={trackingLabel}>
+              <Link href={AppRoutes.newSafe.load}>
+                <Button
+                  disableElevation
+                  variant="outlined"
+                  size="small"
+                  onClick={onLinkClick}
+                  startIcon={<SvgIcon component={AddIcon} inheritViewBox fontSize="small" />}
+                  sx={{ height: '36px', width: '100%', px: 2 }}
+                >
+                  Add
+                </Button>
+              </Link>
+            </Track>
+
+            {wallet ? (
+              <Track {...OVERVIEW_EVENTS.CREATE_NEW_SAFE} label={trackingLabel}>
+                <CreateButton isPrimary />
+              </Track>
+            ) : (
+              <Box sx={{ '& button': { height: '36px' } }}>
+                <ConnectWalletButton small={true} />
+              </Box>
+            )}
+          </Box>
+        </Box>
+
+        <Paper sx={{ padding: 0 }}>
+          <Paper sx={{ px: 2, py: 1 }}>
+            <Box display="flex" justifyContent="space-between" width="100%" gap={1}>
+              <TextField
+                id="search-by-name"
+                placeholder="Search"
+                aria-label="Search Safe list by name"
+                variant="filled"
+                hiddenLabel
+                onChange={(e) => {
+                  handleSearch(e.target.value)
+                }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SvgIcon
+                        component={SearchIcon}
+                        inheritViewBox
+                        fontWeight="bold"
+                        fontSize="small"
+                        sx={{
+                          color: 'var(--color-border-main)',
+                          '.MuiInputBase-root.Mui-focused &': { color: 'var(--color-text-primary)' },
+                        }}
+                      />
+                    </InputAdornment>
+                  ),
+                  disableUnderline: true,
+                }}
+                fullWidth
+                size="small"
+              />
+              <OrderByButton orderBy={orderBy} onOrderByChange={handleOrderByChange} />
+            </Box>
+          </Paper>
+
+          {isSidebar && <Divider />}
+
+          <Paper className={css.safeList}>
+            {searchQuery ? (
+              <>
+                {/* Search results */}
+                <Typography variant="h5" fontWeight="normal" mb={2} color="primary.light">
+                  Found {filteredSafes.length} result{filteredSafes.length === 1 ? '' : 's'}
+                </Typography>
+                <Box mt={1}>
+                  <SafesList safes={filteredSafes} onLinkClick={onLinkClick} useTransitions={false} />
+                </Box>
+              </>
+            ) : (
+              <>
+                {/* Pinned Accounts */}
+                <Box mb={2} minHeight="170px">
+                  <div className={css.listHeader}>
+                    <SvgIcon
+                      component={BookmarkIcon}
+                      inheritViewBox
+                      fontSize="small"
+                      sx={{ mt: '2px', mr: 1, strokeWidth: 2 }}
+                    />
+                    <Typography variant="h5" fontWeight={700} mb={2}>
+                      Pinned
+                    </Typography>
+                  </div>
+                  {pinnedSafes.length > 0 ? (
+                    <SafesList safes={pinnedSafes} onLinkClick={onLinkClick} />
+                  ) : (
+                    <Box className={css.noPinnedSafesMessage}>
+                      <Typography color="text.secondary" variant="body2" maxWidth="350px" textAlign="center">
+                        Personalize your account list by clicking the
+                        <SvgIcon
+                          component={BookmarkIcon}
+                          inheritViewBox
+                          fontSize="small"
+                          sx={{ mx: '4px', color: 'text.secondary', position: 'relative', top: '2px' }}
+                        />
+                        icon on the accounts most important to you.
+                      </Typography>
+                    </Box>
+                  )}
+                </Box>
+
+                {/* All Accounts */}
+                <Accordion sx={{ border: 'none' }} defaultExpanded={!isSidebar}>
+                  <AccordionSummary
+                    data-testid="expand-safes-list"
+                    expandIcon={<ExpandMoreIcon sx={{ '& path': { fill: 'var(--color-text-secondary)' } }} />}
+                    sx={{
+                      padding: 0,
+                      '& .MuiAccordionSummary-content': { margin: '0 !important', mb: 1, flexGrow: 0 },
+                    }}
+                  >
+                    <div className={css.listHeader}>
+                      <Typography variant="h5" fontWeight={700}>
+                        Accounts
+                        {allSafes && allSafes.length > 0 && (
+                          <Typography
+                            component="span"
+                            color="text.secondary"
+                            fontSize="inherit"
+                            fontWeight="normal"
+                            mr={1}
+                          >
+                            {' '}
+                            ({allSafes.length})
+                          </Typography>
+                        )}
+                      </Typography>
+                    </div>
+                  </AccordionSummary>
+                  <AccordionDetails sx={{ padding: 0 }}>
+                    {allSafes.length > 0 ? (
+                      <Box mt={1}>
+                        <SafesList safes={allSafes} onLinkClick={onLinkClick} />
+                      </Box>
+                    ) : (
+                      <Typography
+                        component="div"
+                        variant="body2"
+                        color="text.secondary"
+                        textAlign="center"
+                        py={3}
+                        mx="auto"
+                        width={250}
+                      >
+                        {!wallet ? (
+                          <>
+                            <Box mb={2}>Connect a wallet to view your Safe Accounts or to create a new one</Box>
+                            <Track {...OVERVIEW_EVENTS.OPEN_ONBOARD} label={trackingLabel}>
+                              <ConnectWalletButton text="Connect a wallet" contained />
+                            </Track>
+                          </>
+                        ) : (
+                          "You don't have any safes yet"
+                        )}
+                      </Typography>
+                    )}
+                  </AccordionDetails>
+                </Accordion>
+              </>
+            )}
+          </Paper>
+        </Paper>
+        {isSidebar && <Divider />}
+        <DataWidget />
+      </Box>
+    </Box>
+  )
+}
+
+const MyAccounts = madProps(AccountsList, {
+  safes: useAllSafesGrouped,
+})
+
+export default MyAccounts
diff --git a/src/features/myAccounts/styles.module.css b/src/features/myAccounts/styles.module.css
new file mode 100644
index 0000000000..84df9b9a56
--- /dev/null
+++ b/src/features/myAccounts/styles.module.css
@@ -0,0 +1,88 @@
+.container {
+  container-type: inline-size;
+  container-name: my-accounts-container;
+  display: flex;
+  justify-content: center;
+}
+
+.myAccounts {
+  width: 100vw;
+  max-width: 750px;
+  margin: var(--space-2);
+}
+
+.sidebarAccounts {
+  margin: 0 !important;
+}
+
+.safeList {
+  padding: var(--space-2) var(--space-2) var(--space-3);
+  margin-bottom: var(--space-1);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-3) 0;
+  gap: var(--space-2);
+}
+
+.sidebarHeader {
+  padding: var(--space-3) var(--space-2);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.sidebarHeader > h1 {
+  font-size: 24px;
+}
+
+.headerButtons {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-1);
+}
+
+.noPinnedSafesMessage {
+  display: flex;
+  justify-content: center;
+  border: 1px solid var(--color-border-light);
+  padding: var(--space-3);
+  border-radius: var(--space-1);
+  border-style: dashed;
+}
+
+.listHeader {
+  display: flex;
+}
+
+.listHeader svg path {
+  stroke: var(--color-text-primary);
+}
+
+@media (max-width: 899.95px) {
+  .container {
+    width: auto;
+  }
+}
+
+.safeList :global .MuiAccordionSummary-root {
+  background: var(--color-background-paper) !important;
+  padding-left: 0;
+  min-height: 0;
+  justify-content: left;
+  vertical-align: middle;
+}
+
+@media (max-width: 599.95px) {
+  .header {
+    flex-direction: column;
+  }
+
+  .headerButtons > span {
+    flex: 1;
+  }
+
+  .headerButtons > span > a {
+    width: 100%;
+  }
+}
diff --git a/src/features/myAccounts/utils/utils.ts b/src/features/myAccounts/utils/utils.ts
new file mode 100644
index 0000000000..59af191b5c
--- /dev/null
+++ b/src/features/myAccounts/utils/utils.ts
@@ -0,0 +1,19 @@
+import { OrderByOption } from '@/store/orderByPreferenceSlice'
+import type { SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
+import type { MultiChainSafeItem } from '@/features/myAccounts/hooks/useAllSafesGrouped'
+
+export const nameComparator = (a: SafeItem | MultiChainSafeItem, b: SafeItem | MultiChainSafeItem) => {
+  // Put undefined names last
+  if (!a.name && !b.name) return 0
+  if (!a.name) return 1
+  if (!b.name) return -1
+  return a.name.localeCompare(b.name)
+}
+
+export const lastVisitedComparator = (a: SafeItem | MultiChainSafeItem, b: SafeItem | MultiChainSafeItem) => {
+  return b.lastVisited - a.lastVisited
+}
+
+export const getComparator = (orderBy: OrderByOption) => {
+  return orderBy === OrderByOption.NAME ? nameComparator : lastVisitedComparator
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index f960836ede..6ff90ba635 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -45,6 +45,7 @@ import WalletProvider from '@/components/common/WalletProvider'
 import CounterfactualHooks from '@/features/counterfactual/CounterfactualHooks'
 import PkModulePopup from '@/services/private-key-module/PkModulePopup'
 import GeoblockingProvider from '@/components/common/GeoblockingProvider'
+import { useVisitedSafes } from '@/features/myAccounts/hooks/useVisitedSafes'
 import OutreachPopup from '@/features/targetedOutreach/components/OutreachPopup'
 
 export const GATEWAY_URL = IS_PRODUCTION || cgwDebugStorage.get() ? GATEWAY_URL_PRODUCTION : GATEWAY_URL_STAGING
@@ -71,6 +72,7 @@ const InitApp = (): null => {
   useTxTracking()
   useSafeMsgTracking()
   useBeamer()
+  useVisitedSafes()
 
   return null
 }
diff --git a/src/pages/welcome/accounts.tsx b/src/pages/welcome/accounts.tsx
index b85f0a906e..3cb3983d41 100644
--- a/src/pages/welcome/accounts.tsx
+++ b/src/pages/welcome/accounts.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import MyAccounts from '@/components/welcome/MyAccounts'
+import MyAccounts from '@/features/myAccounts'
 
 const Accounts: NextPage = () => {
   return (
diff --git a/src/services/analytics/events/overview.ts b/src/services/analytics/events/overview.ts
index e2d2fbb4bd..00a1d32d65 100644
--- a/src/services/analytics/events/overview.ts
+++ b/src/services/analytics/events/overview.ts
@@ -52,11 +52,24 @@ export const OVERVIEW_EVENTS = {
     category: OVERVIEW_CATEGORY,
     event: EventType.META,
   },
+  TOTAL_SAFES_PINNED: {
+    action: 'Total Safes pinned',
+    category: OVERVIEW_CATEGORY,
+    event: EventType.META,
+  },
   TOTAL_SAFES_WATCHLIST: {
     action: 'Total Safes watchlist',
     category: OVERVIEW_CATEGORY,
     event: EventType.META,
   },
+  SEARCH: {
+    action: 'Search safes',
+    category: OVERVIEW_CATEGORY,
+  },
+  SORT_SAFES: {
+    action: 'Sort Safes',
+    category: OVERVIEW_CATEGORY,
+  },
   SIDEBAR: {
     action: 'Sidebar',
     category: OVERVIEW_CATEGORY,
@@ -129,6 +142,10 @@ export const OVERVIEW_EVENTS = {
     category: OVERVIEW_CATEGORY,
     //label: OPEN_SAFE_LABELS
   },
+  PIN_SAFE: {
+    action: 'Toggle Safe pinned state',
+    category: OVERVIEW_CATEGORY,
+  },
   // Track clicks on links to Safe Accounts
   EXPAND_MULTI_SAFE: {
     action: 'Expand multi Safe',
@@ -176,6 +193,11 @@ export const OVERVIEW_EVENTS = {
   },
 }
 
+export enum PIN_SAFE_LABELS {
+  pin = 'pin',
+  unpin = 'unpin',
+}
+
 export enum OPEN_SAFE_LABELS {
   sidebar = 'sidebar',
   after_create = 'after_create',
diff --git a/src/store/__tests__/safeOverviews.test.ts b/src/store/__tests__/safeOverviews.test.ts
index dab26c3159..579c1192e9 100644
--- a/src/store/__tests__/safeOverviews.test.ts
+++ b/src/store/__tests__/safeOverviews.test.ts
@@ -220,8 +220,22 @@ describe('safeOverviews', () => {
       const request = {
         currency: 'usd',
         safes: [
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '10', isWatchlist: false },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '10',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
         ],
       }
 
@@ -263,8 +277,22 @@ describe('safeOverviews', () => {
       const request = {
         currency: 'usd',
         safes: [
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '10', isWatchlist: false },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '10',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
         ],
       }
 
@@ -288,21 +316,126 @@ describe('safeOverviews', () => {
       const request = {
         currency: 'usd',
         safes: [
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
-          { address: faker.finance.ethereumAddress(), chainId: '1', isWatchlist: false },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
+          {
+            address: faker.finance.ethereumAddress(),
+            chainId: '1',
+            isReadOnly: false,
+            isPinned: false,
+            lastVisited: 0,
+            name: undefined,
+          },
         ],
       }
 
diff --git a/src/store/addedSafesSlice.ts b/src/store/addedSafesSlice.ts
index eefde3d421..e6b22dcda9 100644
--- a/src/store/addedSafesSlice.ts
+++ b/src/store/addedSafesSlice.ts
@@ -45,6 +45,20 @@ export const addedSafesSlice = createSlice({
 
       delete state[chainId]?.[address]
 
+      if (Object.keys(state[chainId]).length === 0) {
+        delete state[chainId]
+      }
+    },
+    pinSafe: (state, { payload }: PayloadAction<{ chainId: string; address: string }>) => {
+      const { chainId, address } = payload
+      state[chainId] ??= {}
+      state[chainId][address] = state[chainId][address] ?? {}
+    },
+    unpinSafe: (state, { payload }: PayloadAction<{ chainId: string; address: string }>) => {
+      const { chainId, address } = payload
+
+      delete state[chainId]?.[address]
+
       if (Object.keys(state[chainId]).length === 0) {
         delete state[chainId]
       }
@@ -52,7 +66,7 @@ export const addedSafesSlice = createSlice({
   },
 })
 
-export const { addOrUpdateSafe, removeSafe } = addedSafesSlice.actions
+export const { addOrUpdateSafe, removeSafe, pinSafe, unpinSafe } = addedSafesSlice.actions
 
 export const selectAllAddedSafes = (state: RootState): AddedSafesState => {
   return state[addedSafesSlice.name]
diff --git a/src/store/api/gateway/safeOverviews.ts b/src/store/api/gateway/safeOverviews.ts
index d781eedd0f..8bb8aa728f 100644
--- a/src/store/api/gateway/safeOverviews.ts
+++ b/src/store/api/gateway/safeOverviews.ts
@@ -4,7 +4,7 @@ import { type SafeOverview, getSafeOverviews } from '@safe-global/safe-gateway-t
 import { sameAddress } from '@/utils/addresses'
 import type { RootState } from '../..'
 import { selectCurrency } from '../../settingsSlice'
-import { type SafeItem } from '@/components/welcome/MyAccounts/useAllSafes'
+import { type SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
 import { asError } from '@/services/exceptions/utils'
 
 type SafeOverviewQueueItem = {
diff --git a/src/store/index.ts b/src/store/index.ts
index 1dcd5903fb..8617ee59da 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -50,6 +50,8 @@ const rootReducer = combineReducers({
   [slices.batchSlice.name]: slices.batchSlice.reducer,
   [slices.undeployedSafesSlice.name]: slices.undeployedSafesSlice.reducer,
   [slices.swapParamsSlice.name]: slices.swapParamsSlice.reducer,
+  [slices.visitedSafesSlice.name]: slices.visitedSafesSlice.reducer,
+  [slices.orderByPreferenceSlice.name]: slices.orderByPreferenceSlice.reducer,
   [ofacApi.reducerPath]: ofacApi.reducer,
   [safePassApi.reducerPath]: safePassApi.reducer,
   [slices.gatewayApi.reducerPath]: slices.gatewayApi.reducer,
@@ -68,6 +70,8 @@ const persistedSlices: (keyof Partial<RootState>)[] = [
   slices.undeployedSafesSlice.name,
   slices.swapParamsSlice.name,
   slices.swapOrderSlice.name,
+  slices.visitedSafesSlice.name,
+  slices.orderByPreferenceSlice.name,
 ]
 
 export const getPersistedState = () => {
diff --git a/src/store/orderByPreferenceSlice.ts b/src/store/orderByPreferenceSlice.ts
new file mode 100644
index 0000000000..6894e0e070
--- /dev/null
+++ b/src/store/orderByPreferenceSlice.ts
@@ -0,0 +1,29 @@
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
+import type { RootState } from '@/store'
+
+export enum OrderByOption {
+  NAME = 'name',
+  LAST_VISITED = 'lastVisited',
+}
+
+export type OrderByPreferenceState = { orderBy: OrderByOption }
+
+const initialState: OrderByPreferenceState = { orderBy: OrderByOption.LAST_VISITED }
+
+export const orderByPreferenceSlice = createSlice({
+  name: 'orderByPreference',
+  initialState,
+  reducers: {
+    setOrderByPreference: (state, { payload }: PayloadAction<{ orderBy: OrderByOption }>) => {
+      const { orderBy } = payload
+      state.orderBy = orderBy
+    },
+  },
+})
+
+export const { setOrderByPreference } = orderByPreferenceSlice.actions
+
+export const selectOrderByPreference = (state: RootState): OrderByPreferenceState => {
+  return state[orderByPreferenceSlice.name] || initialState
+}
diff --git a/src/store/slices.ts b/src/store/slices.ts
index a36e3c1806..7f4dd6cd21 100644
--- a/src/store/slices.ts
+++ b/src/store/slices.ts
@@ -21,3 +21,5 @@ export * from '@/features/swap/store/swapParamsSlice'
 export * from './swapOrderSlice'
 export * from './api/gateway'
 export * from './api/gateway/safeOverviews'
+export * from './visitedSafesSlice'
+export * from './orderByPreferenceSlice'
diff --git a/src/store/visitedSafesSlice.ts b/src/store/visitedSafesSlice.ts
new file mode 100644
index 0000000000..fc0787d350
--- /dev/null
+++ b/src/store/visitedSafesSlice.ts
@@ -0,0 +1,34 @@
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
+import type { RootState } from '@/store'
+
+export type VisitedSafesState = {
+  [chainId: string]: {
+    [safeAddress: string]: {
+      lastVisited: number
+    }
+  }
+}
+
+const initialState: VisitedSafesState = {}
+
+export const visitedSafesSlice = createSlice({
+  name: 'visitedSafes',
+  initialState,
+  reducers: {
+    upsertVisitedSafe: (
+      state,
+      { payload }: PayloadAction<{ chainId: string; address: string; lastVisited: number }>,
+    ) => {
+      const { chainId, address, lastVisited } = payload
+      state[chainId] ??= {}
+      state[chainId][address] = { lastVisited }
+    },
+  },
+})
+
+export const { upsertVisitedSafe } = visitedSafesSlice.actions
+
+export const selectAllVisitedSafes = (state: RootState): VisitedSafesState => {
+  return state[visitedSafesSlice.name] || initialState
+}

From 5637ba7b854745f2e1e35852421b1c45b34424fe Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:57:37 +0100
Subject: [PATCH 18/47] fix: Disable transaction buttons until sdk is
 initialized (#4405)

* fix: Disable transaction buttons until sdk is initialized

* fix: Failing tests

* fix: Add test case and adjust other tests to use getByText

---------

Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com>
---
 .../common/CheckWallet/index.test.tsx         | 68 +++++++++++--------
 src/components/common/CheckWallet/index.tsx   |  7 ++
 .../flows/SignMessage/SignMessage.test.tsx    |  4 ++
 3 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/src/components/common/CheckWallet/index.test.tsx b/src/components/common/CheckWallet/index.test.tsx
index 7058f79761..f5730c7c20 100644
--- a/src/components/common/CheckWallet/index.test.tsx
+++ b/src/components/common/CheckWallet/index.test.tsx
@@ -1,4 +1,5 @@
-import { getByLabelText, render } from '@/tests/test-utils'
+import { useSafeSDK } from '@/hooks/coreSDK/safeCoreSDK'
+import { render } from '@/tests/test-utils'
 import CheckWallet from '.'
 import useIsOnlySpendingLimitBeneficiary from '@/hooks/useIsOnlySpendingLimitBeneficiary'
 import useIsSafeOwner from '@/hooks/useIsSafeOwner'
@@ -61,6 +62,11 @@ jest.mock('@/hooks/useSafeInfo', () => ({
   }),
 }))
 
+jest.mock('@/hooks/coreSDK/safeCoreSDK', () => ({
+  __esModule: true,
+  useSafeSDK: jest.fn(() => ({})),
+}))
+
 const renderButton = () =>
   render(<CheckWallet checkNetwork={false}>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>)
 
@@ -70,34 +76,31 @@ describe('CheckWallet', () => {
   })
 
   it('renders correctly when the wallet is connected to the right chain and is an owner', () => {
-    const { container } = renderButton()
+    const { getByText } = renderButton()
 
     // Check that the button is enabled
-    expect(container.querySelector('button')).not.toBeDisabled()
+    expect(getByText('Continue')).not.toBeDisabled()
   })
 
   it('should disable the button when the wallet is not connected', () => {
     ;(useWallet as jest.MockedFunction<typeof useWallet>).mockReturnValueOnce(null)
 
-    const { container } = renderButton()
+    const { getByText, getByLabelText } = renderButton()
 
     // Check that the button is disabled
-    expect(container.querySelector('button')).toBeDisabled()
+    expect(getByText('Continue')).toBeDisabled()
 
     // Check the tooltip text
-    getByLabelText(container, 'Please connect your wallet')
+    expect(getByLabelText('Please connect your wallet')).toBeInTheDocument()
   })
 
   it('should disable the button when the wallet is connected to the right chain but is not an owner', () => {
     ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(false)
 
-    const { container } = renderButton()
+    const { getByText, getByLabelText } = renderButton()
 
-    expect(container.querySelector('button')).toBeDisabled()
-    expect(container.querySelector('span[aria-label]')).toHaveAttribute(
-      'aria-label',
-      `Your connected wallet is not a signer of this Safe Account`,
-    )
+    expect(getByText('Continue')).toBeDisabled()
+    expect(getByLabelText('Your connected wallet is not a signer of this Safe Account')).toBeInTheDocument()
   })
 
   it('should be disabled when connected to the wrong network', () => {
@@ -105,11 +108,11 @@ describe('CheckWallet', () => {
     ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(true)
 
     const renderButtonWithNetworkCheck = () =>
-      render(<CheckWallet checkNetwork={true}>{(isOk) => <button disabled={!isOk}></button>}</CheckWallet>)
+      render(<CheckWallet checkNetwork={true}>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>)
 
-    const { container } = renderButtonWithNetworkCheck()
+    const { getByText } = renderButtonWithNetworkCheck()
 
-    expect(container.querySelector('button')).toBeDisabled()
+    expect(getByText('Continue')).toBeDisabled()
   })
 
   it('should not disable the button for non-owner spending limit benificiaries', () => {
@@ -118,20 +121,20 @@ describe('CheckWallet', () => {
       useIsOnlySpendingLimitBeneficiary as jest.MockedFunction<typeof useIsOnlySpendingLimitBeneficiary>
     ).mockReturnValueOnce(true)
 
-    const { container: allowContainer } = render(
+    const { getByText } = render(
       <CheckWallet allowSpendingLimit>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>,
     )
 
-    expect(allowContainer.querySelector('button')).not.toBeDisabled()
+    expect(getByText('Continue')).not.toBeDisabled()
   })
 
   it('should not disable the button for proposers', () => {
     ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(false)
     ;(useIsWalletProposer as jest.MockedFunction<typeof useIsWalletProposer>).mockReturnValueOnce(true)
 
-    const { container } = renderButton()
+    const { getByText } = renderButton()
 
-    expect(container.querySelector('button')).not.toBeDisabled()
+    expect(getByText('Continue')).not.toBeDisabled()
   })
 
   it('should disable the button for proposers if specified via flag', () => {
@@ -172,10 +175,10 @@ describe('CheckWallet', () => {
       mockSafeInfo as unknown as ReturnType<typeof useSafeInfo>,
     )
 
-    const { container } = renderButton()
+    const { getByText, getByLabelText } = renderButton()
 
-    expect(container.querySelector('button')).toBeDisabled()
-    getByLabelText(container, 'You need to activate the Safe before transacting')
+    expect(getByText('Continue')).toBeDisabled()
+    expect(getByLabelText('You need to activate the Safe before transacting')).toBeInTheDocument()
   })
 
   it('should enable the button for counterfactual Safes if allowed', () => {
@@ -194,21 +197,21 @@ describe('CheckWallet', () => {
       mockSafeInfo as unknown as ReturnType<typeof useSafeInfo>,
     )
 
-    const { container } = render(
+    const { getByText } = render(
       <CheckWallet allowUndeployedSafe>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>,
     )
 
-    expect(container.querySelector('button')).toBeEnabled()
+    expect(getByText('Continue')).toBeEnabled()
   })
 
   it('should allow non-owners if specified', () => {
     ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(false)
 
-    const { container } = render(
+    const { getByText } = render(
       <CheckWallet allowNonOwner>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>,
     )
 
-    expect(container.querySelector('button')).not.toBeDisabled()
+    expect(getByText('Continue')).not.toBeDisabled()
   })
 
   it('should not allow non-owners that have a spending limit without allowing spending limits', () => {
@@ -217,10 +220,19 @@ describe('CheckWallet', () => {
       useIsOnlySpendingLimitBeneficiary as jest.MockedFunction<typeof useIsOnlySpendingLimitBeneficiary>
     ).mockReturnValueOnce(true)
 
-    const { container: allowContainer } = render(
+    const { getByText } = render(<CheckWallet>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>)
+
+    expect(getByText('Continue')).toBeDisabled()
+  })
+
+  it('should disable the button if SDK is not initialized', () => {
+    ;(useSafeSDK as jest.MockedFunction<typeof useSafeSDK>).mockReturnValue(undefined)
+
+    const { getByText, getByLabelText } = render(
       <CheckWallet>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>,
     )
 
-    expect(allowContainer.querySelector('button')).toBeDisabled()
+    expect(getByText('Continue')).toBeDisabled()
+    expect(getByLabelText('SDK is not initialized yet'))
   })
 })
diff --git a/src/components/common/CheckWallet/index.tsx b/src/components/common/CheckWallet/index.tsx
index 93296deb67..298b0fc62b 100644
--- a/src/components/common/CheckWallet/index.tsx
+++ b/src/components/common/CheckWallet/index.tsx
@@ -1,3 +1,4 @@
+import { useSafeSDK } from '@/hooks/coreSDK/safeCoreSDK'
 import { useIsWalletProposer } from '@/hooks/useProposers'
 import { useMemo, type ReactElement } from 'react'
 import useIsOnlySpendingLimitBeneficiary from '@/hooks/useIsOnlySpendingLimitBeneficiary'
@@ -20,6 +21,7 @@ type CheckWalletProps = {
 
 enum Message {
   WalletNotConnected = 'Please connect your wallet',
+  SDKNotInitialized = 'SDK is not initialized yet',
   NotSafeOwner = 'Your connected wallet is not a signer of this Safe Account',
   SafeNotActivated = 'You need to activate the Safe before transacting',
 }
@@ -38,6 +40,7 @@ const CheckWallet = ({
   const isOnlySpendingLimit = useIsOnlySpendingLimitBeneficiary()
   const connectWallet = useConnectWallet()
   const isWrongChain = useIsWrongChain()
+  const sdk = useSafeSDK()
   const isProposer = useIsWalletProposer()
 
   const { safe } = useSafeInfo()
@@ -48,6 +51,9 @@ const CheckWallet = ({
     if (!wallet) {
       return Message.WalletNotConnected
     }
+    if (!sdk) {
+      return Message.SDKNotInitialized
+    }
 
     if (isUndeployedSafe && !allowUndeployedSafe) {
       return Message.SafeNotActivated
@@ -69,6 +75,7 @@ const CheckWallet = ({
     isOnlySpendingLimit,
     isSafeOwner,
     isUndeployedSafe,
+    sdk,
     wallet,
   ])
 
diff --git a/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx b/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx
index 5139f253e6..4016329bb5 100644
--- a/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx
+++ b/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx
@@ -1,3 +1,4 @@
+import type Safe from '@safe-global/protocol-kit'
 import { act } from 'react'
 import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { hexlify, zeroPadValue, toUtf8Bytes } from 'ethers'
@@ -13,6 +14,7 @@ import * as useChainsHook from '@/hooks/useChains'
 import * as sender from '@/services/safe-messages/safeMsgSender'
 import * as onboard from '@/hooks/wallets/useOnboard'
 import * as useSafeMessage from '@/hooks/messages/useSafeMessage'
+import * as sdk from '@/hooks/coreSDK/safeCoreSDK'
 import { render, fireEvent, waitFor } from '@/tests/test-utils'
 import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import type { EIP1193Provider, WalletState, AppState, OnboardAPI } from '@web3-onboard/core'
@@ -102,6 +104,8 @@ describe('SignMessage', () => {
     }))
 
     jest.spyOn(useIsWrongChainHook, 'default').mockImplementation(() => false)
+
+    jest.spyOn(sdk, 'useSafeSDK').mockReturnValue({} as unknown as Safe)
   })
 
   describe('EIP-191 messages', () => {

From 0eb9dc26d7e3215408e3d4004c9a383cce2c061f Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Tue, 26 Nov 2024 12:15:21 +0100
Subject: [PATCH 19/47] fix: only return "next" transactions as pending (#4568)

---
 src/hooks/__tests__/usePendingTxs.test.ts | 40 ++++++++++++++++++++++-
 src/hooks/usePendingTxs.ts                | 21 ++++++++----
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/hooks/__tests__/usePendingTxs.test.ts b/src/hooks/__tests__/usePendingTxs.test.ts
index 5765fa1c68..5a8aad5e6c 100644
--- a/src/hooks/__tests__/usePendingTxs.test.ts
+++ b/src/hooks/__tests__/usePendingTxs.test.ts
@@ -14,7 +14,8 @@ import {
   ConflictType,
 } from '@safe-global/safe-gateway-typescript-sdk'
 import * as useSafeInfoHook from '@/hooks/useSafeInfo'
-import { filterUntrustedQueue, useHasPendingTxs, usePendingTxsQueue } from '../usePendingTxs'
+import { filterUntrustedQueue, getNextTransactions, useHasPendingTxs, usePendingTxsQueue } from '../usePendingTxs'
+import { isLabelListItem } from '@/utils/transaction-guards'
 
 const mockQueue = <TransactionListPage>{
   next: undefined,
@@ -43,6 +44,24 @@ const mockQueue = <TransactionListPage>{
   ],
 }
 
+const mockQueueWithQueued = <TransactionListPage>{
+  next: undefined,
+  previous: undefined,
+  results: [
+    ...mockQueue.results,
+    {
+      type: TransactionListItemType.LABEL,
+      label: LabelValue.Queued,
+    },
+    {
+      type: 'TRANSACTION',
+      transaction: {
+        id: 'multisig_789',
+      },
+    },
+  ],
+}
+
 const mockQueueWithConflictHeaders = <TransactionListPage>{
   next: undefined,
   previous: undefined,
@@ -80,6 +99,25 @@ jest.mock('@safe-global/safe-gateway-typescript-sdk', () => ({
   getTransactionQueue: jest.fn(() => Promise.resolve(mockQueue)),
 }))
 
+describe('getNextTransactions', () => {
+  it('should return all transactions up to the "Queued" label', () => {
+    const result = getNextTransactions(mockQueueWithQueued)
+
+    expect(result.results).toStrictEqual(mockQueue.results)
+  })
+
+  it('should return all transactions if there is no "Queued" label', () => {
+    const mockQueueWithoutQueuedLabel = {
+      ...mockQueueWithQueued,
+      results: mockQueueWithQueued.results.filter((item) => isLabelListItem(item) && item.label !== LabelValue.Queued),
+    }
+
+    const result = getNextTransactions(mockQueueWithoutQueuedLabel)
+
+    expect(result.results).toStrictEqual(mockQueueWithoutQueuedLabel.results)
+  })
+})
+
 describe('filterUntrustedQueue', () => {
   it('should remove transactions that are not pending', () => {
     const mockPendingIds = ['multisig_123']
diff --git a/src/hooks/usePendingTxs.ts b/src/hooks/usePendingTxs.ts
index 23689c392e..8b03379315 100644
--- a/src/hooks/usePendingTxs.ts
+++ b/src/hooks/usePendingTxs.ts
@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import {
   type TransactionListPage,
   type TransactionSummary,
-  type LabelValue,
+  LabelValue,
   getTransactionQueue,
 } from '@safe-global/safe-gateway-typescript-sdk'
 import { useAppSelector } from '@/store'
@@ -63,6 +63,12 @@ export const filterUntrustedQueue = (
   return transactions.length ? { results } : undefined
 }
 
+export function getNextTransactions(queue: TransactionListPage): TransactionListPage {
+  const queueLabelIndex = queue.results.findIndex((item) => isLabelListItem(item) && item.label === LabelValue.Queued)
+  const nextTransactions = queueLabelIndex === -1 ? queue.results : queue.results.slice(0, queueLabelIndex)
+  return { results: nextTransactions }
+}
+
 export const usePendingTxsQueue = (): {
   page?: TransactionListPage
   error?: string
@@ -73,20 +79,21 @@ export const usePendingTxsQueue = (): {
   const pendingIds = usePendingTxIds()
   const hasPending = pendingIds.length > 0
 
-  const [untrustedQueue, error, loading] = useAsync<TransactionListPage>(
-    () => {
+  const [untrustedNext, error, loading] = useAsync<TransactionListPage | undefined>(
+    async () => {
       if (!hasPending) return
-      return getTransactionQueue(chainId, safeAddress, { trusted: false })
+      const untrustedQueue = await getTransactionQueue(chainId, safeAddress, { trusted: false })
+      return getNextTransactions(untrustedQueue)
     },
     [chainId, safeAddress, hasPending],
     false,
   )
 
   const pendingTxPage = useMemo(() => {
-    if (!untrustedQueue || !pendingIds.length) return
+    if (!untrustedNext || !pendingIds.length) return
 
-    return filterUntrustedQueue(untrustedQueue, pendingIds)
-  }, [untrustedQueue, pendingIds])
+    return filterUntrustedQueue(untrustedNext, pendingIds)
+  }, [untrustedNext, pendingIds])
 
   return useMemo(
     () => ({

From 7642d4a8fe7960aa54781d300b2b2bb448e53f10 Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Tue, 26 Nov 2024 13:14:35 +0100
Subject: [PATCH 20/47] Tests: Fix sidebar and staking tests (#4566)

---
 cypress/e2e/pages/sidebar.pages.js                       | 9 ++++++---
 cypress/e2e/pages/staking.page.js                        | 4 ++++
 cypress/e2e/regression/sidebar_2.cy.js                   | 7 ++++++-
 cypress/e2e/regression/staking_history.cy.js             | 2 +-
 cypress/fixtures/staking_data.json                       | 1 -
 .../components/AccountItems/MultiAccountItem.tsx         | 1 +
 .../components/AccountItems/SingleAccountItem.tsx        | 8 +++++++-
 src/features/myAccounts/index.tsx                        | 2 +-
 8 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/cypress/e2e/pages/sidebar.pages.js b/cypress/e2e/pages/sidebar.pages.js
index a1ef546f27..636959eafe 100644
--- a/cypress/e2e/pages/sidebar.pages.js
+++ b/cypress/e2e/pages/sidebar.pages.js
@@ -53,6 +53,7 @@ export const addedNetworkOption = 'li[role="option"]'
 const modalAddNetworkName = '[data-testid="added-network"]'
 const networkSeperator = 'div[role="separator"]'
 export const addNetworkTooltip = '[data-testid="add-network-tooltip"]'
+const pinnedAccountsContainer = '[data-testid="pinned-accounts"]'
 export const importBtnStr = 'Import'
 export const exportBtnStr = 'Export'
 export const undeployedSafe = 'Undeployed Sepolia'
@@ -87,7 +88,7 @@ const emptyWatchListStr = 'Watch any Safe Account to keep an eye on its activity
 const emptySafeListStr = "You don't have any Safe Accounts yet"
 const myAccountsStr = 'My accounts'
 const confirmTxStr = (number) => `${number} to confirm`
-const pedningTxStr = (n) => `${n} pending transaction`
+const pedningTxStr = (n) => `${n} pending`
 export const confirmGenStr = 'to confirm'
 
 export const multichainSafes = {
@@ -96,7 +97,9 @@ export const multichainSafes = {
 }
 
 export function verifyNumberOfPendingTxTag(tx) {
-  cy.contains(pedningTxStr(tx))
+  cy.get(pinnedAccountsContainer).within(() => {
+    cy.get('span').contains(pedningTxStr(tx))
+  })
 }
 
 export function getImportBtn() {
@@ -464,7 +467,7 @@ export function checkNetworksInRange(expectedString, expectedCount, direction =
 
   return cy
     .get(startSelector)
-  [traversalMethod](endSelector, 'li')
+    [traversalMethod](endSelector, 'li')
     .then((liElements) => {
       expect(liElements.length).to.equal(expectedCount)
       const optionTexts = [...liElements].map((li) => li.innerText)
diff --git a/cypress/e2e/pages/staking.page.js b/cypress/e2e/pages/staking.page.js
index b22aa1d990..f0daba1e04 100644
--- a/cypress/e2e/pages/staking.page.js
+++ b/cypress/e2e/pages/staking.page.js
@@ -36,6 +36,10 @@ export function getRewardRegex() {
   return new RegExp('^\\d+(\\.\\d+)? ETH \\(\\$\\s?\\d{1,3}(,\\d{3})*\\)$')
 }
 
+export function getActivationTimeRegex() {
+  return new RegExp('^\\d+\\s+hour(s)?\\s+\\d+\\s+minute(s)?$')
+}
+
 export function checkTxHeaderData(data) {
   main.verifyValuesExist(create_tx.transactionItem, data)
 }
diff --git a/cypress/e2e/regression/sidebar_2.cy.js b/cypress/e2e/regression/sidebar_2.cy.js
index b0e56b43bd..3800e48b02 100644
--- a/cypress/e2e/regression/sidebar_2.cy.js
+++ b/cypress/e2e/regression/sidebar_2.cy.js
@@ -4,8 +4,11 @@ import * as sideBar from '../pages/sidebar.pages'
 import * as ls from '../../support/localstorage_data.js'
 import * as assets from '../pages/assets.pages.js'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as wallet from '../../support/utils/wallet.js'
 
 let staticSafes = []
+const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
+const signer = walletCredentials.OWNER_4_PRIVATE_KEY
 
 const newSafeName = 'Added safe 3'
 const addedSafe900 = 'Added safe 900'
@@ -35,7 +38,8 @@ describe('Sidebar added sidebar tests', () => {
     sideBar.verifySafeNameExists(newSafeName)
   })
 
-  it('Verify a safe can be removed', () => {
+  // TODO: Waiting for new tests due to changed functionality
+  it.skip('Verify a safe can be removed', () => {
     sideBar.openSidebar()
     sideBar.removeSafeItem(addedSafe900)
     sideBar.verifySafeRemoved([addedSafe900])
@@ -47,6 +51,7 @@ describe('Sidebar added sidebar tests', () => {
   })
 
   it('Verify "wallet" tag counter if the safe has tx ready for execution', () => {
+    wallet.connectSigner(signer)
     sideBar.openSidebar()
     sideBar.verifyNumberOfPendingTxTag(1)
   })
diff --git a/cypress/e2e/regression/staking_history.cy.js b/cypress/e2e/regression/staking_history.cy.js
index bcb52b81ac..8e4a63ddb0 100644
--- a/cypress/e2e/regression/staking_history.cy.js
+++ b/cypress/e2e/regression/staking_history.cy.js
@@ -33,7 +33,7 @@ describe('Staking history tests', { defaultCommandTimeout: 30000 }, () => {
     staking.checkDataFields(staking.dataFields.netMonthlyRewards, staking.getRewardRegex())
     staking.checkDataFields(staking.dataFields.fee, staking.getPercentageRegex())
     staking.checkDataFields(staking.dataFields.validators, '1')
-    staking.checkDataFields(staking.dataFields.activationTime, historyData.activationTimeValue)
+    staking.checkDataFields(staking.dataFields.activationTime, staking.getActivationTimeRegex())
     staking.checkDataFields(staking.dataFields.rewards, historyData.rewardsValue)
   })
 })
diff --git a/cypress/fixtures/staking_data.json b/cypress/fixtures/staking_data.json
index 2011deb8bd..b424f70165 100644
--- a/cypress/fixtures/staking_data.json
+++ b/cypress/fixtures/staking_data.json
@@ -12,7 +12,6 @@
       "stake": "Stake",
       "withdrawal": "Withdraw request",
       "validator_1": "1 Validator",
-      "activationTimeValue": "10 hours 14 minutes",
       "rewardsValue": "Approx. every 5 days after activation"
     }
   }
diff --git a/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx b/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx
index 5cc0e071c0..7e4987247f 100644
--- a/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx
+++ b/src/features/myAccounts/components/AccountItems/MultiAccountItem.tsx
@@ -244,6 +244,7 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
             </Typography>
           </Box>
           <IconButton
+            data-testid="bookmark-icon"
             edge="end"
             size="medium"
             sx={{ mx: 1 }}
diff --git a/src/features/myAccounts/components/AccountItems/SingleAccountItem.tsx b/src/features/myAccounts/components/AccountItems/SingleAccountItem.tsx
index f7b1c4a9f0..eebf17261b 100644
--- a/src/features/myAccounts/components/AccountItems/SingleAccountItem.tsx
+++ b/src/features/myAccounts/components/AccountItems/SingleAccountItem.tsx
@@ -181,7 +181,13 @@ const AccountItem = ({ onLinkClick, safeItem }: AccountItemProps) => {
           </Typography>
         </Link>
       </Track>
-      <IconButton edge="end" size="medium" sx={{ mx: 1 }} onClick={isPinned ? removeFromPinnedList : addToPinnedList}>
+      <IconButton
+        data-testid="bookmark-icon"
+        edge="end"
+        size="medium"
+        sx={{ mx: 1 }}
+        onClick={isPinned ? removeFromPinnedList : addToPinnedList}
+      >
         <SvgIcon
           component={isPinned ? BookmarkedIcon : BookmarkIcon}
           inheritViewBox
diff --git a/src/features/myAccounts/index.tsx b/src/features/myAccounts/index.tsx
index 832e95ad75..47d705b7eb 100644
--- a/src/features/myAccounts/index.tsx
+++ b/src/features/myAccounts/index.tsx
@@ -168,7 +168,7 @@ const AccountsList = ({ safes, onLinkClick, isSidebar = false }: AccountsListPro
             ) : (
               <>
                 {/* Pinned Accounts */}
-                <Box mb={2} minHeight="170px">
+                <Box data-testid="pinned-accounts" mb={2} minHeight="170px">
                   <div className={css.listHeader}>
                     <SvgIcon
                       component={BookmarkIcon}

From 9382f626b68199579d29bc6088e1546724c67eb3 Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Tue, 26 Nov 2024 14:49:02 +0100
Subject: [PATCH 21/47] fix: remove unnecessary log (#4570)

---
 src/features/multichain/hooks/useSafeCreationData.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/features/multichain/hooks/useSafeCreationData.ts b/src/features/multichain/hooks/useSafeCreationData.ts
index d4c60013f6..504064f34c 100644
--- a/src/features/multichain/hooks/useSafeCreationData.ts
+++ b/src/features/multichain/hooks/useSafeCreationData.ts
@@ -173,9 +173,7 @@ export const useSafeCreationData = (safeAddress: string, chains: ChainInfo[]): A
         const undeployedSafe = undeployedSafes[chain.chainId]?.[safeAddress]
 
         try {
-          const creationData = await getCreationDataForChain(chain, undeployedSafe, safeAddress, customRpc)
-          console.log({ creationData })
-          return creationData
+          return await getCreationDataForChain(chain, undeployedSafe, safeAddress, customRpc)
         } catch (err) {
           lastError = asError(err)
         }

From 1aa662676c90cac9a8d9af09b8fc3338efb8e800 Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Wed, 27 Nov 2024 08:53:40 +0100
Subject: [PATCH 22/47] fix: Init Safe SDK for replayed safes (#4567)

---
 src/hooks/coreSDK/safeCoreSDK.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hooks/coreSDK/safeCoreSDK.ts b/src/hooks/coreSDK/safeCoreSDK.ts
index 1637ed0300..4ab7d540c8 100644
--- a/src/hooks/coreSDK/safeCoreSDK.ts
+++ b/src/hooks/coreSDK/safeCoreSDK.ts
@@ -11,7 +11,7 @@ import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import semverSatisfies from 'semver/functions/satisfies'
 import { isValidMasterCopy } from '@/services/contracts/safeContracts'
 import { sameAddress } from '@/utils/addresses'
-import { isPredictedSafeProps } from '@/features/counterfactual/utils'
+import { isPredictedSafeProps, isReplayedSafeProps } from '@/features/counterfactual/utils'
 
 export const isLegacyVersion = (safeVersion: string): boolean => {
   const LEGACY_VERSION = '<1.3.0'
@@ -82,7 +82,7 @@ export const initSafeSDK = async ({
   }
 
   if (undeployedSafe) {
-    if (isPredictedSafeProps(undeployedSafe.props)) {
+    if (isPredictedSafeProps(undeployedSafe.props) || isReplayedSafeProps(undeployedSafe.props)) {
       return Safe.init({
         provider: provider._getConnection().url,
         isL1SafeSingleton,

From 2ed4765a19d1afb35e3fc557ce265b4bfbc8ef81 Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Wed, 27 Nov 2024 13:15:51 +0100
Subject: [PATCH 23/47] Tests: Add safe pin tests (#4573)

---
 cypress/e2e/pages/create_wallet.pages.js    |   5 +-
 cypress/e2e/pages/sidebar.pages.js          | 101 +++++++++++++++-----
 cypress/e2e/prodhealthcheck/sidebar_3.cy.js |   6 +-
 cypress/e2e/regression/sidebar_3.cy.js      |  18 ++--
 cypress/e2e/regression/sidebar_4.cy.js      |  67 +++++++++++++
 cypress/e2e/regression/sidebar_5.cy.js      |  39 ++++++++
 src/features/myAccounts/index.tsx           |   3 +-
 7 files changed, 198 insertions(+), 41 deletions(-)
 create mode 100644 cypress/e2e/regression/sidebar_4.cy.js
 create mode 100644 cypress/e2e/regression/sidebar_5.cy.js

diff --git a/cypress/e2e/pages/create_wallet.pages.js b/cypress/e2e/pages/create_wallet.pages.js
index 9b3b8afe78..8f6af31a64 100644
--- a/cypress/e2e/pages/create_wallet.pages.js
+++ b/cypress/e2e/pages/create_wallet.pages.js
@@ -191,9 +191,12 @@ export function clickOnContinueWithWalletBtn() {
   cy.get('button').contains(continueWithWalletBtn).click().wait(1000)
 }
 
+export function verifyConnectWalletBtnDisplayed() {
+  return cy.get(connectWalletBtn).should('be.visible')
+}
 export function clickOnConnectWalletBtn() {
   cy.get(welcomeLoginScreen).within(() => {
-    cy.get(connectWalletBtn).should('be.visible').should('be.enabled').click().wait(1000)
+    verifyConnectWalletBtnDisplayed().should('be.enabled').click().wait(1000)
   })
 }
 
diff --git a/cypress/e2e/pages/sidebar.pages.js b/cypress/e2e/pages/sidebar.pages.js
index 636959eafe..eaf38c3635 100644
--- a/cypress/e2e/pages/sidebar.pages.js
+++ b/cypress/e2e/pages/sidebar.pages.js
@@ -6,6 +6,7 @@ import { safeHeaderInfo } from './import_export.pages.js'
 import * as file from './import_export.pages.js'
 import safes from '../../fixtures/safes/static.json'
 import * as address_book from './address_book.page.js'
+import * as create_wallet from '../pages/create_wallet.pages.js'
 
 export const chainLogo = '[data-testid="chain-logo"]'
 const safeIcon = '[data-testid="safe-icon"]'
@@ -31,7 +32,7 @@ const readOnlyVisibility = '[data-testid="read-only-visibility"]'
 const currencySection = '[data-testid="currency-section"]'
 const missingSignatureInfo = '[data-testid="missing-signature-info"]'
 const queuedTxInfo = '[data-testid="queued-tx-info"]'
-const expandSafesList = '[data-testid="expand-safes-list" ]'
+const expandSafesList = '[data-testid="expand-safes-list"]'
 export const importBtn = '[data-testid="import-btn"]'
 export const pendingActivationIcon = '[data-testid="pending-activation-icon"]'
 const safeItemMenuIcon = '[data-testid="MoreVertIcon"]'
@@ -54,6 +55,10 @@ const modalAddNetworkName = '[data-testid="added-network"]'
 const networkSeperator = 'div[role="separator"]'
 export const addNetworkTooltip = '[data-testid="add-network-tooltip"]'
 const pinnedAccountsContainer = '[data-testid="pinned-accounts"]'
+const emptyPinnedList = '[data-testid="empty-pinned-list"]'
+const boomarkIcon = '[data-testid="bookmark-icon"]'
+const emptyAccountList = '[data-testid="empty-account-list"]'
+const searchInput = '[id="search-by-name"]'
 export const importBtnStr = 'Import'
 export const exportBtnStr = 'Export'
 export const undeployedSafe = 'Undeployed Sepolia'
@@ -67,6 +72,7 @@ const signersNotConsistentMsg3 =
 const signersNotConsistentConfirmTxViewMsg = (network) =>
   `Signers are not consistent across networks on this account. Changing signers will only affect the account on ${network}`
 const activateStr = 'You need to activate your Safe first'
+const emptyPinnedMessage = 'Personalize your account list by clicking theicon on the accounts most important to you.'
 
 export const addedSafesEth = ['0x8675...a19b']
 export const addedSafesSepolia = ['0x6d0b...6dC1', '0x5912...fFdb', '0x0637...708e', '0xD157...DE9a']
@@ -75,18 +81,22 @@ export const sideBarSafes = {
   safe1: '0xBb26E3717172d5000F87DeFd391994f789D80aEB',
   safe2: '0x905934aA8758c06B2422F0C90D97d2fbb6677811',
   safe1short: '0xBb26...0aEB',
+  safe1short_: '0xBb26',
   safe2short: '0x9059...7811',
   safe3short: '0x86Cb...2C27',
+  safe4short: '0x9261...7E00',
 }
+
+// 0x926186108f74dB20BFeb2b6c888E523C78cb7E00
 export const sideBarSafesPendingActions = {
   safe1: '0x5912f6616c84024cD1aff0D5b55bb36F5180fFdb',
   safe1short: '0x5912...fFdb',
 }
 export const testSafeHeaderDetails = ['2/2', safes.SEP_STATIC_SAFE_9_SHORT]
 const receiveAssetsStr = 'Receive assets'
-const emptyWatchListStr = 'Watch any Safe Account to keep an eye on its activity'
-const emptySafeListStr = "You don't have any Safe Accounts yet"
-const myAccountsStr = 'My accounts'
+const emptyPinnedListStr = 'Watch any Safe Account to keep an eye on its activity'
+const emptySafeListStr = "You don't have any safes yet"
+const accountsStr = 'Accounts'
 const confirmTxStr = (number) => `${number} to confirm`
 const pedningTxStr = (n) => `${n} pending`
 export const confirmGenStr = 'to confirm'
@@ -96,12 +106,31 @@ export const multichainSafes = {
   sepolia: 'Multichain Sepolia',
 }
 
+export function searchSafe(safe) {
+  cy.get(searchInput).clear().type(safe)
+}
+
+export function verifySearchInputPosition() {
+  cy.get(searchInput).then(($searchInput) => {
+    cy.get(pinnedAccountsContainer).then(($pinnedList) => {
+      const searchInputPosition = $searchInput[0].compareDocumentPosition($pinnedList[0])
+      expect(searchInputPosition & Node.DOCUMENT_POSITION_FOLLOWING).to.equal(Node.DOCUMENT_POSITION_FOLLOWING)
+    })
+  })
+}
+
 export function verifyNumberOfPendingTxTag(tx) {
   cy.get(pinnedAccountsContainer).within(() => {
     cy.get('span').contains(pedningTxStr(tx))
   })
 }
 
+export function verifyPinnedSafe(safe) {
+  cy.get(pinnedAccountsContainer).within(() => {
+    cy.get(sideSafeListItem).contains(safe)
+  })
+}
+
 export function getImportBtn() {
   return cy.get(importBtn).scrollIntoView().should('be.visible')
 }
@@ -120,6 +149,16 @@ export function showAllSafes() {
   })
 }
 
+export function verifyAccountsCollapsed() {
+  cy.get(expandSafesList).should('have.attr', 'aria-expanded', 'false')
+}
+
+export function verifyConnectBtnDisplayed() {
+  cy.get(emptyAccountList).within(() => {
+    create_wallet.verifyConnectWalletBtnDisplayed()
+  })
+}
+
 export function verifyNetworkIsDisplayed(netwrok) {
   cy.get(sidebarContainer)
     .should('be.visible')
@@ -193,8 +232,13 @@ export function verifySafeCount(count) {
   main.verifyMinimumElementsCount(sideSafeListItem, count)
 }
 
-export function openSidebar() {
+export function clickOnOpenSidebarBtn() {
   cy.get(openSafesIcon).click()
+}
+
+// Expands all safes in the sidebar
+export function openSidebar() {
+  clickOnOpenSidebarBtn()
   cy.wait(500)
   showAllSafes()
   main.verifyElementsExist([sidebarSafeContainer])
@@ -221,32 +265,30 @@ export function verifySafesByNetwork(netwrok, safes) {
   })
 }
 
-function getSafeItemByName(name) {
-  return cy
-    .get(sidebarSafeContainer)
-    .find(sideSafeListItem)
-    .contains(name)
-    .parents('span')
-    .parent()
-    .within(() => {
-      cy.get(safeItemOptionsBtn)
-    })
+function getSafeByName(safe) {
+  return cy.get(sidebarSafeContainer).find(sideSafeListItem).contains(safe).parents('span').parent()
+}
+
+function getSafeItemOptions(name) {
+  return getSafeByName(name).within(() => {
+    cy.get(safeItemOptionsBtn)
+  })
 }
 
 export function verifySafeReadOnlyState(safe) {
-  getSafeItemByName(safe).find(readOnlyVisibility).should('exist')
+  getSafeItemOptions(safe).find(readOnlyVisibility).should('exist')
 }
 
 export function verifyMissingSignature(safe) {
-  getSafeItemByName(safe).find(missingSignatureInfo).should('exist')
+  getSafeItemOptions(safe).find(missingSignatureInfo).should('exist')
 }
 
 export function verifyQueuedTx(safe) {
-  return getSafeItemByName(safe).find(queuedTxInfo).should('exist')
+  return getSafeItemOptions(safe).find(queuedTxInfo).should('exist')
 }
 
 export function clickOnSafeItemOptionsBtn(name) {
-  getSafeItemByName(name).find(safeItemOptionsBtn).click()
+  getSafeItemOptions(name).find(safeItemOptionsBtn).click()
 }
 
 export function clickOnSafeItemOptionsBtnByIndex(index) {
@@ -395,21 +437,34 @@ export function checkSafeAddressInHeader(address) {
   main.verifyValuesExist(sidebarSafeHeader, address)
 }
 
-export function verifyWatchlistIsEmpty() {
-  main.verifyValuesExist(sidebarSafeContainer, [emptyWatchListStr])
+export function verifyPinnedListIsEmpty() {
+  cy.get(emptyPinnedList).should('contain.text', emptyPinnedMessage).find('svg').should('exist')
 }
 
 export function verifySafeListIsEmpty() {
   main.verifyValuesExist(sidebarSafeContainer, [emptySafeListStr])
 }
 
+export function verifySafeBookmarkBtnExists(safe) {
+  getSafeByName(safe).within(() => {
+    cy.get(boomarkIcon).should('exist')
+  })
+}
+
+export function clickOnBookmarkBtn(safe) {
+  getSafeByName(safe).within(() => {
+    cy.get(boomarkIcon).click()
+    cy.wait(500)
+  })
+}
+
 export function verifySafeGiveNameOptionExists(index) {
   cy.get(safeItemMenuIcon).eq(index).click()
   clickOnRenameBtn()
 }
 
-export function checkMyAccountCounter(value) {
-  cy.contains(myAccountsStr).should('contain', value)
+export function checkAccountsCounter(value) {
+  cy.contains(accountsStr).should('contain', value)
 }
 
 export function checkTxToConfirm(numberOfTx) {
diff --git a/cypress/e2e/prodhealthcheck/sidebar_3.cy.js b/cypress/e2e/prodhealthcheck/sidebar_3.cy.js
index 441d368eeb..c1c3711862 100644
--- a/cypress/e2e/prodhealthcheck/sidebar_3.cy.js
+++ b/cypress/e2e/prodhealthcheck/sidebar_3.cy.js
@@ -15,14 +15,14 @@ describe('[PROD] Sidebar tests 3', () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
 
-  it('Verify the "My accounts" counter at the top is counting all safes the user owns', () => {
+  it('Verify the "Accounts" counter at the top is counting all safes the user owns', () => {
     cy.visit(constants.prodbaseUrl + constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
     cy.intercept('GET', constants.safeListEndpoint, {
       11155111: [sideBar.sideBarSafes.safe1, sideBar.sideBarSafes.safe2],
     })
     wallet.connectSigner(signer)
     sideBar.openSidebar()
-    sideBar.checkMyAccountCounter(2)
+    sideBar.checkAccountsCounter(2)
   })
 
   it('Verify pending signature is displayed in sidebar for unsigned tx', () => {
@@ -33,14 +33,12 @@ describe('[PROD] Sidebar tests 3', () => {
     })
     sideBar.openSidebar()
     sideBar.verifyTxToConfirmDoesNotExist()
-    cy.get('body').click()
     owner.clickOnWalletExpandMoreIcon()
     navigation.clickOnDisconnectBtn()
     cy.intercept('GET', constants.safeListEndpoint, {
       11155111: [sideBar.sideBarSafesPendingActions.safe1],
     })
     wallet.connectSigner(signer2)
-    sideBar.openSidebar()
     sideBar.verifyAddedSafesExist([sideBar.sideBarSafesPendingActions.safe1short])
     sideBar.checkTxToConfirm(1)
   })
diff --git a/cypress/e2e/regression/sidebar_3.cy.js b/cypress/e2e/regression/sidebar_3.cy.js
index 823228476d..cee5e6899a 100644
--- a/cypress/e2e/regression/sidebar_3.cy.js
+++ b/cypress/e2e/regression/sidebar_3.cy.js
@@ -19,7 +19,7 @@ describe('Sidebar tests 3', () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
 
-  it('Verify that users with no accounts see the empty state in "My accounts" block', () => {
+  it('Verify the empty state of the "All accounts" list', () => {
     cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
     cy.intercept('GET', constants.safeListEndpoint, { 1: [], 100: [], 137: [], 11155111: [] })
     wallet.connectSigner(signer)
@@ -27,12 +27,12 @@ describe('Sidebar tests 3', () => {
     sideBar.verifySafeListIsEmpty()
   })
 
-  it('Verify empty state of the Watchlist', () => {
+  it('Verify the empty state of the pinned safes list', () => {
     cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
     cy.intercept('GET', constants.safeListEndpoint, {})
     wallet.connectSigner(signer)
     sideBar.openSidebar()
-    sideBar.verifyWatchlistIsEmpty()
+    sideBar.verifyPinnedListIsEmpty()
   })
 
   it('Verify connected user is redirected from welcome page to accounts page', () => {
@@ -50,11 +50,9 @@ describe('Sidebar tests 3', () => {
     cy.intercept('GET', constants.safeListEndpoint, {
       11155111: [sideBar.sideBarSafes.safe1, sideBar.sideBarSafes.safe2],
     })
-
     wallet.connectSigner(signer)
     sideBar.openSidebar()
-    sideBar.verifyAddedSafesExistByIndex(0, sideBar.sideBarSafes.safe1short)
-    sideBar.verifyAddedSafesExistByIndex(1, sideBar.sideBarSafes.safe2short)
+    sideBar.verifyAddedSafesExist([sideBar.sideBarSafes.safe1short, sideBar.sideBarSafes.safe2short])
   })
 
   it('Verify there is an option to name an unnamed safe', () => {
@@ -80,14 +78,14 @@ describe('Sidebar tests 3', () => {
   })
 
   // Added to prod
-  it('Verify the "My accounts" counter at the top is counting all safes the user owns', () => {
+  it('Verify the "Accounts" counter at the top is counting all safes the user owns', () => {
     cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
     cy.intercept('GET', constants.safeListEndpoint, {
       11155111: [sideBar.sideBarSafes.safe1, sideBar.sideBarSafes.safe2],
     })
     wallet.connectSigner(signer)
     sideBar.openSidebar()
-    sideBar.checkMyAccountCounter(2)
+    sideBar.checkAccountsCounter(2)
   })
 
   it('Verify that safes the user do not owns show in the watchlist after adding them', () => {
@@ -115,16 +113,12 @@ describe('Sidebar tests 3', () => {
     })
     sideBar.openSidebar()
     sideBar.verifyTxToConfirmDoesNotExist()
-
-    cy.get('body').click()
-
     owner.clickOnWalletExpandMoreIcon()
     navigation.clickOnDisconnectBtn()
     cy.intercept('GET', constants.safeListEndpoint, {
       11155111: [sideBar.sideBarSafesPendingActions.safe1],
     })
     wallet.connectSigner(signer2)
-    sideBar.openSidebar()
     sideBar.verifyAddedSafesExist([sideBar.sideBarSafesPendingActions.safe1short])
     sideBar.checkTxToConfirm(1)
   })
diff --git a/cypress/e2e/regression/sidebar_4.cy.js b/cypress/e2e/regression/sidebar_4.cy.js
new file mode 100644
index 0000000000..7d022a1e4e
--- /dev/null
+++ b/cypress/e2e/regression/sidebar_4.cy.js
@@ -0,0 +1,67 @@
+import * as constants from '../../support/constants.js'
+import * as main from '../pages/main.page.js'
+import * as sideBar from '../pages/sidebar.pages.js'
+import * as ls from '../../support/localstorage_data.js'
+import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as wallet from '../../support/utils/wallet.js'
+
+let staticSafes = []
+const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
+const signer = walletCredentials.OWNER_4_PRIVATE_KEY
+
+describe('Sidebar tests 4', () => {
+  before(async () => {
+    staticSafes = await getSafes(CATEGORIES.static)
+  })
+
+  it('Verify that safes in the sidebar show the "bookmark" icon', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    cy.intercept('GET', constants.safeListEndpoint, {
+      11155111: [sideBar.sideBarSafes.safe1],
+    })
+    wallet.connectSigner(signer)
+    sideBar.openSidebar()
+    sideBar.verifySafeBookmarkBtnExists(sideBar.sideBarSafes.safe1short)
+  })
+
+  it('Verify a safe can be added and removed from the pinned list', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    cy.intercept('GET', constants.safeListEndpoint, {
+      11155111: [sideBar.sideBarSafes.safe1],
+    })
+    wallet.connectSigner(signer)
+    sideBar.openSidebar()
+    sideBar.clickOnBookmarkBtn(sideBar.sideBarSafes.safe1short)
+    sideBar.verifyPinnedSafe(sideBar.sideBarSafes.safe1short)
+    sideBar.clickOnBookmarkBtn(sideBar.sideBarSafes.safe1short)
+    sideBar.verifyPinnedListIsEmpty()
+  })
+
+  it('Verify CF safe can be added and removed from the pinned list', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    cy.intercept('GET', constants.safeListEndpoint, { 1: [], 100: [], 137: [], 11155111: [] })
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__undeployedSafes, ls.undeployedSafe.safe1)
+    wallet.connectSigner(signer)
+    sideBar.openSidebar()
+    sideBar.clickOnBookmarkBtn(sideBar.sideBarSafes.safe4short)
+    sideBar.verifyPinnedSafe(sideBar.sideBarSafes.safe4short)
+    sideBar.clickOnBookmarkBtn(sideBar.sideBarSafes.safe4short)
+    sideBar.verifyPinnedListIsEmpty()
+  })
+
+  it('Verify the "All account" list is always closed by whenever you open the sidebar', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    cy.intercept('GET', constants.safeListEndpoint, {
+      11155111: [sideBar.sideBarSafes.safe1],
+    })
+    wallet.connectSigner(signer)
+    sideBar.clickOnOpenSidebarBtn()
+    sideBar.verifyAccountsCollapsed()
+  })
+
+  it('Verify the empty state of Accounts shows "Connect" for a disconnected user', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    sideBar.openSidebar()
+    sideBar.verifyConnectBtnDisplayed()
+  })
+})
diff --git a/cypress/e2e/regression/sidebar_5.cy.js b/cypress/e2e/regression/sidebar_5.cy.js
new file mode 100644
index 0000000000..e638afb254
--- /dev/null
+++ b/cypress/e2e/regression/sidebar_5.cy.js
@@ -0,0 +1,39 @@
+import * as constants from '../../support/constants.js'
+import * as main from '../pages/main.page.js'
+import * as sideBar from '../pages/sidebar.pages.js'
+import * as ls from '../../support/localstorage_data.js'
+import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as wallet from '../../support/utils/wallet.js'
+import * as create_wallet from '../pages/create_wallet.pages.js'
+import * as navigation from '../pages/navigation.page.js'
+import * as owner from '../pages/owners.pages.js'
+
+let staticSafes = []
+const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
+const signer = walletCredentials.OWNER_4_PRIVATE_KEY
+
+describe('Sidebar search tests', () => {
+  before(async () => {
+    staticSafes = await getSafes(CATEGORIES.static)
+  })
+
+  it('Verify the search input shows at the top above the pinned safes list', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    cy.intercept('GET', constants.safeListEndpoint, { 1: [], 100: [], 137: [], 11155111: [] })
+    sideBar.openSidebar()
+    sideBar.verifySearchInputPosition()
+  })
+
+  it('Verify the search find safes in both pinned and unpinned safes', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    cy.intercept('GET', constants.safeListEndpoint, {
+      11155111: [sideBar.sideBarSafes.safe1, sideBar.sideBarSafes.safe2],
+    })
+    wallet.connectSigner(signer)
+    sideBar.openSidebar()
+    sideBar.clickOnBookmarkBtn(sideBar.sideBarSafes.safe1short)
+    sideBar.searchSafe(sideBar.sideBarSafes.safe1short_)
+    sideBar.verifyAddedSafesExist([sideBar.sideBarSafes.safe1short])
+    sideBar.verifySafeCount(1)
+  })
+})
diff --git a/src/features/myAccounts/index.tsx b/src/features/myAccounts/index.tsx
index 47d705b7eb..51e44fcec2 100644
--- a/src/features/myAccounts/index.tsx
+++ b/src/features/myAccounts/index.tsx
@@ -183,7 +183,7 @@ const AccountsList = ({ safes, onLinkClick, isSidebar = false }: AccountsListPro
                   {pinnedSafes.length > 0 ? (
                     <SafesList safes={pinnedSafes} onLinkClick={onLinkClick} />
                   ) : (
-                    <Box className={css.noPinnedSafesMessage}>
+                    <Box data-testid="empty-pinned-list" className={css.noPinnedSafesMessage}>
                       <Typography color="text.secondary" variant="body2" maxWidth="350px" textAlign="center">
                         Personalize your account list by clicking the
                         <SvgIcon
@@ -233,6 +233,7 @@ const AccountsList = ({ safes, onLinkClick, isSidebar = false }: AccountsListPro
                       </Box>
                     ) : (
                       <Typography
+                        data-testid="empty-account-list"
                         component="div"
                         variant="body2"
                         color="text.secondary"

From 5098280ed288ba7a0e430dc2ff0fb11c76d52c3b Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Wed, 27 Nov 2024 13:58:24 +0100
Subject: [PATCH 24/47] Refactor: rm unnecessary tx decoding (#4541)

* Refactor: rm unnecessary tx decoding

* Update tests

* Repropose after sign relayed

* Update SDK type

* Update src/components/tx/confirmation-views/index.tsx

Co-authored-by: Usame Algan <5880855+usame-algan@users.noreply.github.com>

* Fix Order type

* Make 420 more random

---------

Co-authored-by: Usame Algan <5880855+usame-algan@users.noreply.github.com>
---
 package.json                                  |   2 +-
 .../TxDetails/Summary/TxDataRow/index.tsx     |   8 +-
 .../tx-flow/flows/SuccessScreen/index.tsx     |  13 +-
 .../tx/ApprovalEditor/ApprovalEditor.test.tsx |  12 +-
 src/components/tx/ConfirmationOrder/index.tsx |  23 -
 .../tx/SignOrExecuteForm/ExecuteForm.tsx      |   2 +-
 src/components/tx/SignOrExecuteForm/hooks.ts  |  13 +-
 .../tx/confirmation-views/StakingTx/index.tsx |  13 +
 .../tx/confirmation-views/SwapOrder/index.tsx |  19 +
 .../ConfirmationView.test.tsx.snap            | 578 ++++++++++++++++++
 .../tx/confirmation-views/index.tsx           |  23 +-
 .../StakingConfirmationTx/Deposit.tsx         |  12 +-
 .../components/StakingConfirmationTx/Exit.tsx |   8 +-
 .../StakingConfirmationTx/index.tsx           |  16 +-
 .../StakingTxDepositDetails/index.tsx         |   2 +-
 .../SwapOrderConfirmationView/index.tsx       |  14 +-
 .../swap/helpers/__tests__/utils.test.ts      |  18 +-
 src/features/swap/helpers/swapOrderBuilder.ts |   9 +-
 src/features/swap/helpers/utils.ts            |   6 +-
 yarn.lock                                     |   8 +-
 20 files changed, 684 insertions(+), 115 deletions(-)
 delete mode 100644 src/components/tx/ConfirmationOrder/index.tsx
 create mode 100644 src/components/tx/confirmation-views/StakingTx/index.tsx
 create mode 100644 src/components/tx/confirmation-views/SwapOrder/index.tsx

diff --git a/package.json b/package.json
index 8e7f29a51d..43dddde452 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "@safe-global/safe-apps-sdk": "^9.1.0",
     "@safe-global/safe-client-gateway-sdk": "v1.60.1",
     "@safe-global/safe-deployments": "1.37.12",
-    "@safe-global/safe-gateway-typescript-sdk": "3.22.3",
+    "@safe-global/safe-gateway-typescript-sdk": "3.22.4",
     "@safe-global/safe-modules-deployments": "^2.2.1",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",
diff --git a/src/components/transactions/TxDetails/Summary/TxDataRow/index.tsx b/src/components/transactions/TxDetails/Summary/TxDataRow/index.tsx
index d8a93de5da..4ad49479b0 100644
--- a/src/components/transactions/TxDetails/Summary/TxDataRow/index.tsx
+++ b/src/components/transactions/TxDetails/Summary/TxDataRow/index.tsx
@@ -33,6 +33,12 @@ export const generateDataRowValue = (
         />
       )
     case 'rawData':
+      let length = 0
+      try {
+        length = dataLength(value)
+      } catch {
+        // ignore
+      }
       return (
         <Box
           data-testid="tx-data-row"
@@ -41,7 +47,7 @@ export const generateDataRowValue = (
             alignItems: 'center',
           }}
         >
-          <div>{value ? dataLength(value) : 0} bytes</div>
+          <div>{length} bytes</div>
           <CopyButton text={value} />
         </Box>
       )
diff --git a/src/components/tx-flow/flows/SuccessScreen/index.tsx b/src/components/tx-flow/flows/SuccessScreen/index.tsx
index 88e31e4461..b70605ac20 100644
--- a/src/components/tx-flow/flows/SuccessScreen/index.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/index.tsx
@@ -14,21 +14,18 @@ import LoadingSpinner, { SpinnerStatus } from '@/components/new-safe/create/step
 import { ProcessingStatus } from '@/components/tx-flow/flows/SuccessScreen/statuses/ProcessingStatus'
 import { IndexingStatus } from '@/components/tx-flow/flows/SuccessScreen/statuses/IndexingStatus'
 import { DefaultStatus } from '@/components/tx-flow/flows/SuccessScreen/statuses/DefaultStatus'
-import useDecodeTx from '@/hooks/useDecodeTx'
-import { isSwapConfirmationViewOrder } from '@/utils/transaction-guards'
-import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
+import { isSwapTransferOrderTxInfo } from '@/utils/transaction-guards'
 import { getTxLink } from '@/utils/tx-link'
+import useTxDetails from '@/hooks/useTxDetails'
 
 interface Props {
   /** The ID assigned to the transaction in the client-gateway */
   txId?: string
   /** For module transaction, pass the transaction hash while the `txId` is not yet available */
   txHash?: string
-  /** The multisig transaction object */
-  safeTx?: SafeTransaction
 }
 
-const SuccessScreen = ({ txId, txHash, safeTx }: Props) => {
+const SuccessScreen = ({ txId, txHash }: Props) => {
   const [localTxHash, setLocalTxHash] = useState<string | undefined>(txHash)
   const [error, setError] = useState<Error>()
   const { setTxFlow } = useContext(TxModalContext)
@@ -38,8 +35,8 @@ const SuccessScreen = ({ txId, txHash, safeTx }: Props) => {
   const status = !txId && txHash ? PendingStatus.INDEXING : pendingTx?.status
   const pendingTxHash = pendingTx && 'txHash' in pendingTx ? pendingTx.txHash : undefined
   const txLink = chain && txId && getTxLink(txId, chain, safeAddress)
-  const [decodedData] = useDecodeTx(safeTx)
-  const isSwapOrder = isSwapConfirmationViewOrder(decodedData)
+  const [txDetails] = useTxDetails(txId)
+  const isSwapOrder = txDetails && isSwapTransferOrderTxInfo(txDetails.txInfo)
 
   useEffect(() => {
     if (!pendingTxHash) return
diff --git a/src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx b/src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx
index 7df0c7021e..04de8962d7 100644
--- a/src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx
+++ b/src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx
@@ -80,8 +80,8 @@ describe('ApprovalEditor', () => {
       tokenInfo: { symbol: 'TST', decimals: 18, address: tokenAddress, type: TokenType.ERC20 },
       tokenAddress,
       spender: spenderAddress,
-      amount: '4200000',
-      amountFormatted: '420.0',
+      amount: '9876456354200000',
+      amountFormatted: '987645635420.0',
       method: 'approve',
       transactionIndex: 0,
     } as const
@@ -98,7 +98,7 @@ describe('ApprovalEditor', () => {
 
     expect(amountInput).not.toBeInTheDocument()
     expect(result.getByText('TST', { exact: false }))
-    expect(result.getByText('420', { exact: false }))
+    expect(result.getByText('987,645,635,420', { exact: false }))
     expect(result.getByText(spenderAddress))
   })
 
@@ -109,8 +109,8 @@ describe('ApprovalEditor', () => {
       tokenInfo: { symbol: 'TST', decimals: 18, address: tokenAddress, type: TokenType.ERC20 },
       tokenAddress,
       spender: spenderAddress,
-      amount: '4200000',
-      amountFormatted: '420.0',
+      amount: '9876456354200000',
+      amountFormatted: '987645635420.0',
       method: 'approve',
       transactionIndex: 0,
     } as const
@@ -127,7 +127,7 @@ describe('ApprovalEditor', () => {
 
     expect(amountInput1).toBeInTheDocument
 
-    expect(amountInput1).toHaveValue('420.0')
+    expect(amountInput1).toHaveValue('987645635420.0')
     expect(result.getByText('TST', { exact: false }))
     expect(result.getByText(spenderAddress))
   })
diff --git a/src/components/tx/ConfirmationOrder/index.tsx b/src/components/tx/ConfirmationOrder/index.tsx
deleted file mode 100644
index 33142de06f..0000000000
--- a/src/components/tx/ConfirmationOrder/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import StrakingConfirmationTx from '@/features/stake/components/StakingConfirmationTx'
-import SwapOrderConfirmationView from '@/features/swap/components/SwapOrderConfirmationView'
-import type useDecodeTx from '@/hooks/useDecodeTx'
-import { isAnyStakingConfirmationView, isAnySwapConfirmationViewOrder } from '@/utils/transaction-guards'
-
-type OrderConfirmationViewProps = {
-  decodedData: ReturnType<typeof useDecodeTx>[0]
-  toAddress: string
-}
-
-const ConfirmationOrder = ({ decodedData, toAddress }: OrderConfirmationViewProps) => {
-  if (isAnySwapConfirmationViewOrder(decodedData)) {
-    return <SwapOrderConfirmationView order={decodedData} settlementContract={toAddress} />
-  }
-
-  if (isAnyStakingConfirmationView(decodedData)) {
-    return <StrakingConfirmationTx order={decodedData} />
-  }
-
-  return null
-}
-
-export default ConfirmationOrder
diff --git a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
index 55d67a6b05..daaa6f09b4 100644
--- a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
@@ -114,7 +114,7 @@ export const ExecuteForm = ({
 
     // On success
     onSubmit?.(executedTxId, true)
-    setTxFlow(<SuccessScreenFlow txId={executedTxId} safeTx={safeTx} />, undefined, false)
+    setTxFlow(<SuccessScreenFlow txId={executedTxId} />, undefined, false)
   }
 
   const walletCanPay = useWalletCanPay({
diff --git a/src/components/tx/SignOrExecuteForm/hooks.ts b/src/components/tx/SignOrExecuteForm/hooks.ts
index 5d899cc3a0..70df0774be 100644
--- a/src/components/tx/SignOrExecuteForm/hooks.ts
+++ b/src/components/tx/SignOrExecuteForm/hooks.ts
@@ -144,20 +144,15 @@ export const useTxActions = (): TxActions => {
       assertChainInfo(chain)
 
       let tx: TransactionDetails | undefined
+      let rePropose = false
       // Relayed transactions must be fully signed, so request a final signature if needed
       if (isRelayed && safeTx.signatures.size < safe.threshold) {
-        if (txId) {
-          safeTx = await signRelayedTx(safeTx)
-          tx = await _propose(wallet.address, safeTx, txId, origin)
-        } else {
-          tx = await _propose(wallet.address, safeTx, txId, origin)
-          safeTx = await signRelayedTx(safeTx)
-        }
-        txId = tx.txId
+        safeTx = await signRelayedTx(safeTx)
+        rePropose = true
       }
 
       // Propose the tx if there's no id yet ("immediate execution")
-      if (!txId) {
+      if (!txId || rePropose) {
         tx = await _propose(wallet.address, safeTx, txId, origin)
         txId = tx.txId
       }
diff --git a/src/components/tx/confirmation-views/StakingTx/index.tsx b/src/components/tx/confirmation-views/StakingTx/index.tsx
new file mode 100644
index 0000000000..2a101c565a
--- /dev/null
+++ b/src/components/tx/confirmation-views/StakingTx/index.tsx
@@ -0,0 +1,13 @@
+import StrakingConfirmationTx from '@/features/stake/components/StakingConfirmationTx'
+import type { StakingTxInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { NarrowConfirmationViewProps } from '../types'
+
+export interface StakingTxProps extends NarrowConfirmationViewProps {
+  txInfo: StakingTxInfo
+}
+
+function StakingTx({ txInfo }: StakingTxProps) {
+  return <StrakingConfirmationTx order={txInfo} />
+}
+
+export default StakingTx
diff --git a/src/components/tx/confirmation-views/SwapOrder/index.tsx b/src/components/tx/confirmation-views/SwapOrder/index.tsx
new file mode 100644
index 0000000000..cdccdfa8e8
--- /dev/null
+++ b/src/components/tx/confirmation-views/SwapOrder/index.tsx
@@ -0,0 +1,19 @@
+import SwapOrderConfirmation from '@/features/swap/components/SwapOrderConfirmationView'
+import type { Order } from '@safe-global/safe-gateway-typescript-sdk'
+import type { NarrowConfirmationViewProps } from '../types'
+
+interface SwapOrderProps extends NarrowConfirmationViewProps {
+  txInfo: Order
+}
+
+function SwapOrder({ txDetails, txInfo }: SwapOrderProps) {
+  return (
+    <SwapOrderConfirmation
+      order={txInfo}
+      decodedData={txDetails?.txData?.dataDecoded}
+      settlementContract={txDetails?.txData?.to?.value ?? ''}
+    />
+  )
+}
+
+export default SwapOrder
diff --git a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap b/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
index 0e3f6bd27d..cdedd844a4 100644
--- a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
+++ b/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
@@ -167,6 +167,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
               <div
                 class="MuiBox-root css-i9gxme"
               />
+              addOwnerWithThreshold
             </div>
             <div
               class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
@@ -203,6 +204,294 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                   class="MuiAccordionDetails-root css-w74p4c-MuiAccordionDetails-root"
                   data-testid="decoded-tx-details"
                 >
+                  <div
+                    class="MuiStack-root css-1sazv7p-MuiStack-root"
+                  >
+                    <div
+                      class="MuiTypography-root MuiTypography-body1 css-13ch7tx-MuiTypography-root"
+                    >
+                      Call
+                      <code
+                        class="MuiTypography-root MuiTypography-body2 css-1vdua93-MuiTypography-root"
+                      >
+                        addOwnerWithThreshold
+                      </code>
+                       
+                      on
+                      <div
+                        class="container"
+                      >
+                        <div
+                          class="avatarContainer"
+                          style="width: 24px; height: 24px;"
+                        >
+                          <div
+                            class="icon"
+                            style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0ib3B0aW1pemVTcGVlZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJoc2woMjE4IDk2JSA0OSUpIiBkPSJNMCwwSDhWOEgweiIvPjxwYXRoIGZpbGw9ImhzbCgzMDQgNTclIDEzJSkiIGQ9Ik0xLDBoMXYxaC0xek02LDBoMXYxaC0xek0zLDBoMXYxaC0xek00LDBoMXYxaC0xek0wLDFoMXYxaC0xek03LDFoMXYxaC0xek0yLDFoMXYxaC0xek01LDFoMXYxaC0xek0xLDJoMXYxaC0xek02LDJoMXYxaC0xek0yLDNoMXYxaC0xek01LDNoMXYxaC0xek0xLDRoMXYxaC0xek02LDRoMXYxaC0xek0yLDRoMXYxaC0xek01LDRoMXYxaC0xek0zLDRoMXYxaC0xek00LDRoMXYxaC0xek0wLDVoMXYxaC0xek03LDVoMXYxaC0xek0zLDVoMXYxaC0xek00LDVoMXYxaC0xek0xLDZoMXYxaC0xek02LDZoMXYxaC0xek0zLDZoMXYxaC0xek00LDZoMXYxaC0xek0xLDdoMXYxaC0xek02LDdoMXYxaC0xek0zLDdoMXYxaC0xek00LDdoMXYxaC0xeiIvPjxwYXRoIGZpbGw9ImhzbCgyNjMgODQlIDQyJSkiIGQ9Ik0zLDNoMXYxaC0xek00LDNoMXYxaC0xek0wLDRoMXYxaC0xek03LDRoMXYxaC0xek0xLDVoMXYxaC0xek02LDVoMXYxaC0xeiIvPjwvc3ZnPg==); width: 24px; height: 24px;"
+                          />
+                        </div>
+                        <div
+                          class="inline MuiBox-root css-1lchl8k"
+                        >
+                          <div
+                            class="addressContainer inline"
+                          >
+                            <div
+                              class="MuiBox-root css-b5p5gz"
+                            >
+                              <span
+                                aria-label="Copy to clipboard"
+                                class=""
+                                data-mui-internal-clone-element="true"
+                                style="cursor: pointer;"
+                              >
+                                <span>
+                                  0xDa5e...EE6b
+                                </span>
+                              </span>
+                            </div>
+                            <span
+                              aria-label="Copy to clipboard"
+                              class=""
+                              data-mui-internal-clone-element="true"
+                              style="cursor: pointer;"
+                            >
+                              <button
+                                aria-label="Copy to clipboard"
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <mock-icon
+                                  aria-hidden=""
+                                  class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
+                                  data-testid="copy-btn-icon"
+                                  focusable="false"
+                                />
+                              </button>
+                            </span>
+                            <div
+                              class="MuiBox-root css-yjghm1"
+                            >
+                              <button
+                                aria-label=""
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1vbp2rr-MuiButtonBase-root-MuiIconButton-root"
+                                data-mui-internal-clone-element="true"
+                                data-testid="explorer-btn"
+                                rel="noreferrer"
+                                tabindex="0"
+                                target="_blank"
+                                type="button"
+                              >
+                                <mock-icon
+                                  aria-hidden=""
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
+                                  focusable="false"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="MuiBox-root css-kz5wc9"
+                    />
+                    <div
+                      class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
+                    >
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
+                        data-testid="tx-row-title"
+                        style="word-break: break-word;"
+                      >
+                        <p
+                          class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
+                        >
+                          Value:
+                        </p>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+                        data-testid="tx-data-row"
+                      >
+                        <div
+                          class="MuiBox-root css-axw7ok"
+                        >
+                          <img
+                            alt="ETH"
+                            class="image"
+                            height="26"
+                            src="/images/common/token-placeholder.svg"
+                          />
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 css-w5uidf-MuiTypography-root"
+                          >
+                            ETH
+                          </p>
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 css-v6lhhw-MuiTypography-root"
+                            data-testid="token-amount"
+                          >
+                            0
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="MuiBox-root css-0"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-111k8jw-MuiTypography-root"
+                      >
+                        Parameters
+                      </p>
+                      <div
+                        class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
+                      >
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
+                          data-testid="tx-row-title"
+                          style="word-break: break-word;"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
+                          >
+                            <span
+                              class="MuiTypography-root MuiTypography-body1 css-v6lhhw-MuiTypography-root"
+                            >
+                              owner
+                            </span>
+                             
+                            <span
+                              class="MuiTypography-root MuiTypography-body1 css-fw8ds0-MuiTypography-root"
+                            >
+                              address
+                            </span>
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+                          data-testid="tx-data-row"
+                        >
+                          <div
+                            class="container"
+                          >
+                            <div
+                              class="MuiBox-root css-1lchl8k"
+                            >
+                              <div
+                                class="MuiBox-root css-171onha"
+                                title="MetaMultiSigWallet"
+                              >
+                                <div
+                                  class="MuiBox-root css-1o4wo1x"
+                                >
+                                  MetaMultiSigWallet
+                                </div>
+                              </div>
+                              <div
+                                class="addressContainer"
+                              >
+                                <div
+                                  class="MuiBox-root css-b5p5gz"
+                                >
+                                  <span
+                                    aria-label="Copy to clipboard"
+                                    class=""
+                                    data-mui-internal-clone-element="true"
+                                    style="cursor: pointer;"
+                                  >
+                                    <span>
+                                      0xd8dA...6045
+                                    </span>
+                                  </span>
+                                </div>
+                                <span
+                                  aria-label="Copy to clipboard"
+                                  class=""
+                                  data-mui-internal-clone-element="true"
+                                  style="cursor: pointer;"
+                                >
+                                  <button
+                                    aria-label="Copy to clipboard"
+                                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
+                                    tabindex="0"
+                                    type="button"
+                                  >
+                                    <mock-icon
+                                      aria-hidden=""
+                                      class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
+                                      data-testid="copy-btn-icon"
+                                      focusable="false"
+                                    />
+                                  </button>
+                                </span>
+                                <div
+                                  class="MuiBox-root css-yjghm1"
+                                >
+                                  <button
+                                    aria-label=""
+                                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1vbp2rr-MuiButtonBase-root-MuiIconButton-root"
+                                    data-mui-internal-clone-element="true"
+                                    data-testid="explorer-btn"
+                                    rel="noreferrer"
+                                    tabindex="0"
+                                    target="_blank"
+                                    type="button"
+                                  >
+                                    <mock-icon
+                                      aria-hidden=""
+                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
+                                      focusable="false"
+                                    />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
+                      >
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
+                          data-testid="tx-row-title"
+                          style="word-break: break-word;"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
+                          >
+                            <span
+                              class="MuiTypography-root MuiTypography-body1 css-v6lhhw-MuiTypography-root"
+                            >
+                              _threshold
+                            </span>
+                             
+                            <span
+                              class="MuiTypography-root MuiTypography-body1 css-fw8ds0-MuiTypography-root"
+                            >
+                              uint256
+                            </span>
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+                          data-testid="tx-data-row"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 css-mxvcov-MuiTypography-root"
+                          >
+                            1
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="MuiBox-root css-kz5wc9"
+                  />
                   <div
                     class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                   >
@@ -434,6 +723,7 @@ exports[`ConfirmationView should display a confirmation with method call when th
               <div
                 class="MuiBox-root css-i9gxme"
               />
+              addOwnerWithThreshold
             </div>
             <div
               class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
@@ -470,6 +760,294 @@ exports[`ConfirmationView should display a confirmation with method call when th
                   class="MuiAccordionDetails-root css-w74p4c-MuiAccordionDetails-root"
                   data-testid="decoded-tx-details"
                 >
+                  <div
+                    class="MuiStack-root css-1sazv7p-MuiStack-root"
+                  >
+                    <div
+                      class="MuiTypography-root MuiTypography-body1 css-13ch7tx-MuiTypography-root"
+                    >
+                      Call
+                      <code
+                        class="MuiTypography-root MuiTypography-body2 css-1vdua93-MuiTypography-root"
+                      >
+                        addOwnerWithThreshold
+                      </code>
+                       
+                      on
+                      <div
+                        class="container"
+                      >
+                        <div
+                          class="avatarContainer"
+                          style="width: 24px; height: 24px;"
+                        >
+                          <div
+                            class="icon"
+                            style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0ib3B0aW1pemVTcGVlZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJoc2woMjE4IDk2JSA0OSUpIiBkPSJNMCwwSDhWOEgweiIvPjxwYXRoIGZpbGw9ImhzbCgzMDQgNTclIDEzJSkiIGQ9Ik0xLDBoMXYxaC0xek02LDBoMXYxaC0xek0zLDBoMXYxaC0xek00LDBoMXYxaC0xek0wLDFoMXYxaC0xek03LDFoMXYxaC0xek0yLDFoMXYxaC0xek01LDFoMXYxaC0xek0xLDJoMXYxaC0xek02LDJoMXYxaC0xek0yLDNoMXYxaC0xek01LDNoMXYxaC0xek0xLDRoMXYxaC0xek02LDRoMXYxaC0xek0yLDRoMXYxaC0xek01LDRoMXYxaC0xek0zLDRoMXYxaC0xek00LDRoMXYxaC0xek0wLDVoMXYxaC0xek03LDVoMXYxaC0xek0zLDVoMXYxaC0xek00LDVoMXYxaC0xek0xLDZoMXYxaC0xek02LDZoMXYxaC0xek0zLDZoMXYxaC0xek00LDZoMXYxaC0xek0xLDdoMXYxaC0xek02LDdoMXYxaC0xek0zLDdoMXYxaC0xek00LDdoMXYxaC0xeiIvPjxwYXRoIGZpbGw9ImhzbCgyNjMgODQlIDQyJSkiIGQ9Ik0zLDNoMXYxaC0xek00LDNoMXYxaC0xek0wLDRoMXYxaC0xek03LDRoMXYxaC0xek0xLDVoMXYxaC0xek02LDVoMXYxaC0xeiIvPjwvc3ZnPg==); width: 24px; height: 24px;"
+                          />
+                        </div>
+                        <div
+                          class="inline MuiBox-root css-1lchl8k"
+                        >
+                          <div
+                            class="addressContainer inline"
+                          >
+                            <div
+                              class="MuiBox-root css-b5p5gz"
+                            >
+                              <span
+                                aria-label="Copy to clipboard"
+                                class=""
+                                data-mui-internal-clone-element="true"
+                                style="cursor: pointer;"
+                              >
+                                <span>
+                                  0xDa5e...EE6b
+                                </span>
+                              </span>
+                            </div>
+                            <span
+                              aria-label="Copy to clipboard"
+                              class=""
+                              data-mui-internal-clone-element="true"
+                              style="cursor: pointer;"
+                            >
+                              <button
+                                aria-label="Copy to clipboard"
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <mock-icon
+                                  aria-hidden=""
+                                  class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
+                                  data-testid="copy-btn-icon"
+                                  focusable="false"
+                                />
+                              </button>
+                            </span>
+                            <div
+                              class="MuiBox-root css-yjghm1"
+                            >
+                              <button
+                                aria-label=""
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1vbp2rr-MuiButtonBase-root-MuiIconButton-root"
+                                data-mui-internal-clone-element="true"
+                                data-testid="explorer-btn"
+                                rel="noreferrer"
+                                tabindex="0"
+                                target="_blank"
+                                type="button"
+                              >
+                                <mock-icon
+                                  aria-hidden=""
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
+                                  focusable="false"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="MuiBox-root css-kz5wc9"
+                    />
+                    <div
+                      class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
+                    >
+                      <div
+                        class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
+                        data-testid="tx-row-title"
+                        style="word-break: break-word;"
+                      >
+                        <p
+                          class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
+                        >
+                          Value:
+                        </p>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+                        data-testid="tx-data-row"
+                      >
+                        <div
+                          class="MuiBox-root css-axw7ok"
+                        >
+                          <img
+                            alt="ETH"
+                            class="image"
+                            height="26"
+                            src="/images/common/token-placeholder.svg"
+                          />
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 css-w5uidf-MuiTypography-root"
+                          >
+                            ETH
+                          </p>
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 css-v6lhhw-MuiTypography-root"
+                            data-testid="token-amount"
+                          >
+                            0
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="MuiBox-root css-0"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-111k8jw-MuiTypography-root"
+                      >
+                        Parameters
+                      </p>
+                      <div
+                        class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
+                      >
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
+                          data-testid="tx-row-title"
+                          style="word-break: break-word;"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
+                          >
+                            <span
+                              class="MuiTypography-root MuiTypography-body1 css-v6lhhw-MuiTypography-root"
+                            >
+                              owner
+                            </span>
+                             
+                            <span
+                              class="MuiTypography-root MuiTypography-body1 css-fw8ds0-MuiTypography-root"
+                            >
+                              address
+                            </span>
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+                          data-testid="tx-data-row"
+                        >
+                          <div
+                            class="container"
+                          >
+                            <div
+                              class="MuiBox-root css-1lchl8k"
+                            >
+                              <div
+                                class="MuiBox-root css-171onha"
+                                title="MetaMultiSigWallet"
+                              >
+                                <div
+                                  class="MuiBox-root css-1o4wo1x"
+                                >
+                                  MetaMultiSigWallet
+                                </div>
+                              </div>
+                              <div
+                                class="addressContainer"
+                              >
+                                <div
+                                  class="MuiBox-root css-b5p5gz"
+                                >
+                                  <span
+                                    aria-label="Copy to clipboard"
+                                    class=""
+                                    data-mui-internal-clone-element="true"
+                                    style="cursor: pointer;"
+                                  >
+                                    <span>
+                                      0xd8dA...6045
+                                    </span>
+                                  </span>
+                                </div>
+                                <span
+                                  aria-label="Copy to clipboard"
+                                  class=""
+                                  data-mui-internal-clone-element="true"
+                                  style="cursor: pointer;"
+                                >
+                                  <button
+                                    aria-label="Copy to clipboard"
+                                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-xyrzjn-MuiButtonBase-root-MuiIconButton-root"
+                                    tabindex="0"
+                                    type="button"
+                                  >
+                                    <mock-icon
+                                      aria-hidden=""
+                                      class="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-gvpe62-MuiSvgIcon-root"
+                                      data-testid="copy-btn-icon"
+                                      focusable="false"
+                                    />
+                                  </button>
+                                </span>
+                                <div
+                                  class="MuiBox-root css-yjghm1"
+                                >
+                                  <button
+                                    aria-label=""
+                                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1vbp2rr-MuiButtonBase-root-MuiIconButton-root"
+                                    data-mui-internal-clone-element="true"
+                                    data-testid="explorer-btn"
+                                    rel="noreferrer"
+                                    tabindex="0"
+                                    target="_blank"
+                                    type="button"
+                                  >
+                                    <mock-icon
+                                      aria-hidden=""
+                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
+                                      focusable="false"
+                                    />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
+                      >
+                        <div
+                          class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
+                          data-testid="tx-row-title"
+                          style="word-break: break-word;"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 css-shf88x-MuiTypography-root"
+                          >
+                            <span
+                              class="MuiTypography-root MuiTypography-body1 css-v6lhhw-MuiTypography-root"
+                            >
+                              _threshold
+                            </span>
+                             
+                            <span
+                              class="MuiTypography-root MuiTypography-body1 css-fw8ds0-MuiTypography-root"
+                            >
+                              uint256
+                            </span>
+                          </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+                          data-testid="tx-data-row"
+                        >
+                          <p
+                            class="MuiTypography-root MuiTypography-body1 css-mxvcov-MuiTypography-root"
+                          >
+                            1
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="MuiBox-root css-kz5wc9"
+                  />
                   <div
                     class="MuiGrid-root MuiGrid-container css-86qz5o-MuiGrid-root"
                   >
diff --git a/src/components/tx/confirmation-views/index.tsx b/src/components/tx/confirmation-views/index.tsx
index 39f99518d7..367b10123d 100644
--- a/src/components/tx/confirmation-views/index.tsx
+++ b/src/components/tx/confirmation-views/index.tsx
@@ -1,15 +1,13 @@
 import { type TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 import DecodedTx from '../DecodedTx'
-import ConfirmationOrder from '../ConfirmationOrder'
-import useDecodeTx from '@/hooks/useDecodeTx'
 import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
 import {
   isAnyStakingTxInfo,
   isCustomTxInfo,
   isExecTxData,
-  isGenericConfirmation,
   isOnChainConfirmationTxData,
   isOrderTxInfo,
+  isSwapOrderTxInfo,
 } from '@/utils/transaction-guards'
 import { type ReactNode, useContext, useMemo } from 'react'
 import TxData from '@/components/transactions/TxDetails/TxData'
@@ -22,6 +20,8 @@ import { isSettingsChangeView, isChangeThresholdView, isConfirmBatchView } from
 import { OnChainConfirmation } from '@/components/transactions/TxDetails/TxData/NestedTransaction/OnChainConfirmation'
 import { ExecTransaction } from '@/components/transactions/TxDetails/TxData/NestedTransaction/ExecTransaction'
 import { type ReactElement } from 'react'
+import SwapOrder from './SwapOrder'
+import StakingTx from './StakingTx'
 
 type ConfirmationViewProps = {
   txDetails?: TransactionDetails
@@ -51,12 +51,15 @@ const getConfirmationViewComponent = ({
 
   if (isExecTxData(txDetails.txData)) return <ExecTransaction data={txDetails.txData} isConfirmationView />
 
+  if (isSwapOrderTxInfo(txInfo)) return <SwapOrder txDetails={txDetails} txInfo={txInfo} />
+
+  if (isAnyStakingTxInfo(txInfo)) return <StakingTx txDetails={txDetails} txInfo={txInfo} />
+
   return null
 }
 
 const ConfirmationView = ({ txDetails, ...props }: ConfirmationViewProps) => {
   const { txId } = txDetails || {}
-  const [decodedData] = useDecodeTx(props.safeTx)
   const { txFlow } = useContext(TxModalContext)
 
   const ConfirmationViewComponent = useMemo(
@@ -84,22 +87,14 @@ const ConfirmationView = ({ txDetails, ...props }: ConfirmationViewProps) => {
       {ConfirmationViewComponent ||
         (showTxDetails && txDetails && <TxData txDetails={txDetails} imitation={false} trusted />)}
 
-      {decodedData && <ConfirmationOrder decodedData={decodedData} toAddress={props.safeTx?.data.to ?? ''} />}
-
       {props.children}
 
       <DecodedTx
         tx={props.safeTx}
         txDetails={txDetails}
-        decodedData={decodedData}
+        decodedData={txDetails?.txData?.dataDecoded}
         showMultisend={!props.isBatch}
-        showMethodCall={
-          props.showMethodCall &&
-          !ConfirmationViewComponent &&
-          !showTxDetails &&
-          !props.isApproval &&
-          isGenericConfirmation(decodedData)
-        }
+        showMethodCall={props.showMethodCall && !ConfirmationViewComponent && !showTxDetails && !props.isApproval}
       />
     </>
   )
diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
index ecb42bd615..4de75c92b4 100644
--- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
@@ -1,10 +1,7 @@
 import { Box, Stack, Typography } from '@mui/material'
 import FieldsGrid from '@/components/tx/FieldsGrid'
 import type { StakingTxDepositInfo } from '@safe-global/safe-gateway-typescript-sdk'
-import {
-  ConfirmationViewTypes,
-  type NativeStakingDepositConfirmationView,
-} from '@safe-global/safe-gateway-typescript-sdk'
+import { type NativeStakingDepositConfirmationView } from '@safe-global/safe-gateway-typescript-sdk'
 import ConfirmationOrderHeader from '@/components/tx/ConfirmationOrder/ConfirmationOrderHeader'
 import { formatDurationFromMilliseconds, formatVisualAmount } from '@/utils/formatters'
 import { formatCurrency } from '@/utils/formatNumber'
@@ -13,12 +10,13 @@ import { InfoTooltip } from '@/features/stake/components/InfoTooltip'
 
 type StakingOrderConfirmationViewProps = {
   order: NativeStakingDepositConfirmationView | StakingTxDepositInfo
+  isTxDetails?: boolean
 }
 
 const CURRENCY = 'USD'
 
-const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewProps) => {
-  const isOrder = order.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_DEPOSIT
+const StakingConfirmationTxDeposit = ({ order, isTxDetails }: StakingOrderConfirmationViewProps) => {
+  const isOrder = !isTxDetails
 
   // the fee is returned in decimal format, so we multiply by 100 to get the percentage
   const fee = (order.fee * 100).toFixed(2)
@@ -32,7 +30,7 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro
         <ConfirmationOrderHeader
           blocks={[
             {
-              value: order.value || '0',
+              value: order.value,
               tokenInfo: order.tokenInfo,
               label: 'Deposit',
             },
diff --git a/src/features/stake/components/StakingConfirmationTx/Exit.tsx b/src/features/stake/components/StakingConfirmationTx/Exit.tsx
index 34e55eafcc..a6b75e5a04 100644
--- a/src/features/stake/components/StakingConfirmationTx/Exit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Exit.tsx
@@ -1,12 +1,12 @@
 import { Alert, Stack, Typography } from '@mui/material'
 import FieldsGrid from '@/components/tx/FieldsGrid'
 import { formatDurationFromMilliseconds } from '@/utils/formatters'
-import { type NativeStakingValidatorsExitConfirmationView } from '@safe-global/safe-gateway-typescript-sdk/dist/types/decoded-data'
 import ConfirmationOrderHeader from '@/components/tx/ConfirmationOrder/ConfirmationOrderHeader'
 import { InfoTooltip } from '@/features/stake/components/InfoTooltip'
+import type { StakingTxExitInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 type StakingOrderConfirmationViewProps = {
-  order: NativeStakingValidatorsExitConfirmationView
+  order: StakingTxExitInfo
 }
 
 const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps) => {
@@ -24,11 +24,11 @@ const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps)
       <ConfirmationOrderHeader
         blocks={[
           {
-            value: `${order.numValidators || 0} Validators`,
+            value: `${order.numValidators} Validators`,
             label: 'Exit',
           },
           {
-            value: order.value || '0',
+            value: order.value,
             tokenInfo: order.tokenInfo,
             label: 'Receive',
           },
diff --git a/src/features/stake/components/StakingConfirmationTx/index.tsx b/src/features/stake/components/StakingConfirmationTx/index.tsx
index c1309fccb4..35b2c5f4aa 100644
--- a/src/features/stake/components/StakingConfirmationTx/index.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/index.tsx
@@ -1,27 +1,23 @@
-import type { AnyStakingConfirmationView } from '@safe-global/safe-gateway-typescript-sdk'
-import { ConfirmationViewTypes, type StakingTxInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { StakingTxInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import StakingConfirmationTxDeposit from '@/features/stake/components/StakingConfirmationTx/Deposit'
 import StakingConfirmationTxExit from '@/features/stake/components/StakingConfirmationTx/Exit'
 import StakingConfirmationTxWithdraw from '@/features/stake/components/StakingConfirmationTx/Withdraw'
+import { isStakingTxDepositInfo, isStakingTxExitInfo, isStakingTxWithdrawInfo } from '@/utils/transaction-guards'
 
 type StakingOrderConfirmationViewProps = {
-  order: AnyStakingConfirmationView | StakingTxInfo
+  order: StakingTxInfo
 }
 
 const StrakingConfirmationTx = ({ order }: StakingOrderConfirmationViewProps) => {
-  const isDeposit = order.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_DEPOSIT
-  const isExit = order.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_VALIDATORS_EXIT
-  const isWithdraw = order.type === ConfirmationViewTypes.KILN_NATIVE_STAKING_WITHDRAW
-
-  if (isDeposit) {
+  if (isStakingTxDepositInfo(order)) {
     return <StakingConfirmationTxDeposit order={order} />
   }
 
-  if (isExit) {
+  if (isStakingTxExitInfo(order)) {
     return <StakingConfirmationTxExit order={order} />
   }
 
-  if (isWithdraw) {
+  if (isStakingTxWithdrawInfo(order)) {
     return <StakingConfirmationTxWithdraw order={order} />
   }
 
diff --git a/src/features/stake/components/StakingTxDepositDetails/index.tsx b/src/features/stake/components/StakingTxDepositDetails/index.tsx
index 6165bfa729..e2ce845d7e 100644
--- a/src/features/stake/components/StakingTxDepositDetails/index.tsx
+++ b/src/features/stake/components/StakingTxDepositDetails/index.tsx
@@ -19,7 +19,7 @@ const StakingTxDepositDetails = ({ info, txData }: { info: StakingTxDepositInfo;
         <SendAmountBlock title="Deposit" amountInWei={txData.value?.toString() || '0'} tokenInfo={info.tokenInfo} />
       )}
       <FieldsGrid title="Net reward rate">{info.annualNrr.toFixed(3)}%</FieldsGrid>
-      <StakingConfirmationTxDeposit order={info} />
+      <StakingConfirmationTxDeposit order={info} isTxDetails />
     </Box>
   )
 }
diff --git a/src/features/swap/components/SwapOrderConfirmationView/index.tsx b/src/features/swap/components/SwapOrderConfirmationView/index.tsx
index f327b23b84..a1feae9bbb 100644
--- a/src/features/swap/components/SwapOrderConfirmationView/index.tsx
+++ b/src/features/swap/components/SwapOrderConfirmationView/index.tsx
@@ -7,9 +7,8 @@ import { compareAsc } from 'date-fns'
 import { Alert, Typography } from '@mui/material'
 import { formatAmount } from '@/utils/formatNumber'
 import { getLimitPrice, getOrderClass, getSlippageInPercent } from '@/features/swap/helpers/utils'
-import type { AnySwapOrderConfirmationView } from '@safe-global/safe-gateway-typescript-sdk'
-import { StartTimeValue } from '@safe-global/safe-gateway-typescript-sdk'
-import { ConfirmationViewTypes } from '@safe-global/safe-gateway-typescript-sdk'
+import type { DataDecoded, SwapOrder, SwapTransferOrder, TwapOrder } from '@safe-global/safe-gateway-typescript-sdk'
+import { StartTimeValue, TransactionInfoType } from '@safe-global/safe-gateway-typescript-sdk'
 import SwapTokens from '@/features/swap/components/SwapTokens'
 import AlertIcon from '@/public/images/common/alert.svg'
 import EthHashInfo from '@/components/common/EthHashInfo'
@@ -23,14 +22,15 @@ import { isSettingTwapFallbackHandler } from '@/features/swap/helpers/utils'
 import { TwapFallbackHandlerWarning } from '@/features/swap/components/TwapFallbackHandlerWarning'
 
 type SwapOrderProps = {
-  order: AnySwapOrderConfirmationView
+  order: SwapOrder | SwapTransferOrder | TwapOrder
   settlementContract: string
+  decodedData?: DataDecoded
 }
 
-export const SwapOrderConfirmation = ({ order, settlementContract }: SwapOrderProps): ReactElement => {
+export const SwapOrderConfirmation = ({ order, decodedData, settlementContract }: SwapOrderProps): ReactElement => {
   const { owner, kind, validUntil, sellToken, buyToken, sellAmount, buyAmount, explorerUrl, receiver } = order
 
-  const isTwapOrder = order.type === ConfirmationViewTypes.COW_SWAP_TWAP_ORDER
+  const isTwapOrder = order.type === TransactionInfoType.TWAP_ORDER
 
   const limitPrice = getLimitPrice(order)
   const orderClass = getOrderClass(order)
@@ -39,7 +39,7 @@ export const SwapOrderConfirmation = ({ order, settlementContract }: SwapOrderPr
 
   const slippage = getSlippageInPercent(order)
   const isSellOrder = kind === 'sell'
-  const isChangingFallbackHandler = isSettingTwapFallbackHandler(order)
+  const isChangingFallbackHandler = decodedData && isSettingTwapFallbackHandler(decodedData)
 
   return (
     <>
diff --git a/src/features/swap/helpers/__tests__/utils.test.ts b/src/features/swap/helpers/__tests__/utils.test.ts
index 65bd524c7e..0f504d85c8 100644
--- a/src/features/swap/helpers/__tests__/utils.test.ts
+++ b/src/features/swap/helpers/__tests__/utils.test.ts
@@ -8,7 +8,7 @@ import {
   isSettingTwapFallbackHandler,
   TWAP_FALLBACK_HANDLER,
 } from '../utils'
-import type { DecodedDataResponse, TwapOrder } from '@safe-global/safe-gateway-typescript-sdk'
+import type { DataDecoded, TwapOrder } from '@safe-global/safe-gateway-typescript-sdk'
 import { type SwapOrder } from '@safe-global/safe-gateway-typescript-sdk'
 
 describe('Swap helpers', () => {
@@ -351,7 +351,7 @@ describe('Swap helpers', () => {
             ],
           },
         ],
-      } as unknown as DecodedDataResponse
+      } as unknown as DataDecoded
       expect(isSettingTwapFallbackHandler(decodedData)).toBe(true)
     })
 
@@ -369,7 +369,7 @@ describe('Swap helpers', () => {
             ],
           },
         ],
-      } as unknown as DecodedDataResponse
+      } as unknown as DataDecoded
       expect(isSettingTwapFallbackHandler(decodedData)).toBe(false)
     })
 
@@ -387,16 +387,12 @@ describe('Swap helpers', () => {
             ],
           },
         ],
-      } as unknown as DecodedDataResponse
+      } as unknown as DataDecoded
       expect(isSettingTwapFallbackHandler(decodedData)).toBe(false)
     })
 
-    it('should return false when decodedData is undefined', () => {
-      expect(isSettingTwapFallbackHandler(undefined)).toBe(false)
-    })
-
     it('should return false when parameters are missing', () => {
-      const decodedData = {} as unknown as DecodedDataResponse
+      const decodedData = {} as unknown as DataDecoded
       expect(isSettingTwapFallbackHandler(decodedData)).toBe(false)
     })
 
@@ -407,7 +403,7 @@ describe('Swap helpers', () => {
             valueDecoded: null,
           },
         ],
-      } as unknown as DecodedDataResponse
+      } as unknown as DataDecoded
       expect(isSettingTwapFallbackHandler(decodedData)).toBe(false)
     })
 
@@ -422,7 +418,7 @@ describe('Swap helpers', () => {
             ],
           },
         ],
-      } as unknown as DecodedDataResponse
+      } as unknown as DataDecoded
       expect(isSettingTwapFallbackHandler(decodedData)).toBe(false)
     })
   })
diff --git a/src/features/swap/helpers/swapOrderBuilder.ts b/src/features/swap/helpers/swapOrderBuilder.ts
index cf5b9d156b..9750383b02 100644
--- a/src/features/swap/helpers/swapOrderBuilder.ts
+++ b/src/features/swap/helpers/swapOrderBuilder.ts
@@ -5,9 +5,8 @@ import type {
   SwapOrder,
   TransactionInfoType,
   TwapOrder,
-  SwapOrderConfirmationView,
+  Order,
 } from '@safe-global/safe-gateway-typescript-sdk'
-import { ConfirmationViewTypes } from '@safe-global/safe-gateway-typescript-sdk'
 import { DurationType, StartTimeValue } from '@safe-global/safe-gateway-typescript-sdk'
 
 export function appDataBuilder(
@@ -102,10 +101,10 @@ export function twapOrderBuilder(): IBuilder<TwapOrder> {
 }
 
 // create a builder for SwapOrderConfirmationView
-export function swapOrderConfirmationViewBuilder(): IBuilder<SwapOrderConfirmationView> {
+export function swapOrderConfirmationViewBuilder(): IBuilder<Order> {
   const ownerAndReceiver = faker.finance.ethereumAddress()
-  return Builder.new<SwapOrderConfirmationView>().with({
-    type: ConfirmationViewTypes.COW_SWAP_ORDER,
+  return Builder.new<Order>().with({
+    type: 'SwapOrder' as TransactionInfoType.SWAP_ORDER,
     uid: faker.string.uuid(),
     kind: faker.helpers.arrayElement(['buy', 'sell']),
     orderClass: faker.helpers.arrayElement(['limit', 'market', 'liquidity']),
diff --git a/src/features/swap/helpers/utils.ts b/src/features/swap/helpers/utils.ts
index dfc8328343..846bdb29d0 100644
--- a/src/features/swap/helpers/utils.ts
+++ b/src/features/swap/helpers/utils.ts
@@ -1,4 +1,4 @@
-import type { DecodedDataResponse, Order as SwapOrder } from '@safe-global/safe-gateway-typescript-sdk'
+import type { DataDecoded, Order as SwapOrder } from '@safe-global/safe-gateway-typescript-sdk'
 import { formatUnits } from 'ethers'
 import type { AnyAppDataDocVersion, latest, LatestAppDataDocVersion } from '@cowprotocol/app-data'
 
@@ -200,9 +200,9 @@ export const UiOrderTypeToOrderType = (orderType: UiOrderType): TradeType => {
   }
 }
 
-export const isSettingTwapFallbackHandler = (decodedData: DecodedDataResponse | undefined) => {
+export const isSettingTwapFallbackHandler = (decodedData: DataDecoded) => {
   return (
-    decodedData?.parameters?.some(
+    decodedData.parameters?.some(
       (item) =>
         Array.isArray(item?.valueDecoded) &&
         item.valueDecoded.some(
diff --git a/yarn.lock b/yarn.lock
index f4c093e986..ac57e26b43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4392,10 +4392,10 @@
   dependencies:
     semver "^7.6.2"
 
-"@safe-global/safe-gateway-typescript-sdk@3.22.3":
-  version "3.22.3"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.22.3.tgz#85619769cf99d105d99221c94c2709912b731034"
-  integrity sha512-aDb/FpkJMZ2IvP5KULHXnCRVVYOhEEY4BAwrGfsuTXqp8g8s2oAsBoBYJfaN9rWI/QDkd5Wn3GTC0ZeOLW1NiQ==
+"@safe-global/safe-gateway-typescript-sdk@3.22.4":
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.22.4.tgz#9109a538df40f778666a3e6776e7a08c757e893d"
+  integrity sha512-Z7Z8w3GEJdJ/paF+NK23VN4AwqWPadq0AeRYjYLjIBiPWpRB2UO/FKq7ONABEq0YFgNPklazIV4IExQU1gavXA==
 
 "@safe-global/safe-gateway-typescript-sdk@^3.5.3":
   version "3.21.2"

From ed631fc49cab00511a85dcfb66407b927080a32c Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Wed, 27 Nov 2024 18:08:36 +0100
Subject: [PATCH 25/47] fix: Advanced safe creation address computation (#4564)

---
 .../new-safe/create/AdvancedCreateSafe.tsx    |   2 +
 src/components/new-safe/create/index.tsx      |   4 +-
 src/components/new-safe/create/logic/index.ts |   6 +-
 .../steps/AdvancedOptionsStep/index.tsx       | 121 ++++++++++++------
 .../create/steps/ReviewStep/index.tsx         |  13 +-
 5 files changed, 93 insertions(+), 53 deletions(-)

diff --git a/src/components/new-safe/create/AdvancedCreateSafe.tsx b/src/components/new-safe/create/AdvancedCreateSafe.tsx
index 1cd1a12ff6..5dd08899bb 100644
--- a/src/components/new-safe/create/AdvancedCreateSafe.tsx
+++ b/src/components/new-safe/create/AdvancedCreateSafe.tsx
@@ -1,3 +1,4 @@
+import { ECOSYSTEM_ID_ADDRESS } from '@/config/constants'
 import { Container, Typography, Grid } from '@mui/material'
 import { useRouter } from 'next/router'
 
@@ -98,6 +99,7 @@ const AdvancedCreateSafe = () => {
     threshold: 1,
     saltNonce: 0,
     safeVersion: getLatestSafeVersion(chain),
+    paymentReceiver: ECOSYSTEM_ID_ADDRESS,
   }
 
   const onClose = () => {
diff --git a/src/components/new-safe/create/index.tsx b/src/components/new-safe/create/index.tsx
index 52a29f56ec..788abf45b7 100644
--- a/src/components/new-safe/create/index.tsx
+++ b/src/components/new-safe/create/index.tsx
@@ -28,10 +28,11 @@ export type NewSafeFormData = {
   networks: ChainInfo[]
   threshold: number
   owners: NamedAddress[]
-  saltNonce: number
+  saltNonce?: number
   safeVersion: SafeVersion
   safeAddress?: string
   willRelay?: boolean
+  paymentReceiver?: string
 }
 
 const staticHints: Record<
@@ -173,7 +174,6 @@ const CreateSafe = () => {
     networks: [],
     owners: [],
     threshold: 1,
-    saltNonce: 0,
     safeVersion: getLatestSafeVersion(chain) as SafeVersion,
   }
 
diff --git a/src/components/new-safe/create/logic/index.ts b/src/components/new-safe/create/logic/index.ts
index af85829355..0361d80caf 100644
--- a/src/components/new-safe/create/logic/index.ts
+++ b/src/components/new-safe/create/logic/index.ts
@@ -202,7 +202,9 @@ export type UndeployedSafeWithoutSalt = Omit<ReplayedSafeProps, 'saltNonce'>
  */
 export const createNewUndeployedSafeWithoutSalt = (
   safeVersion: SafeVersion,
-  safeAccountConfig: Pick<ReplayedSafeProps['safeAccountConfig'], 'owners' | 'threshold'>,
+  safeAccountConfig: Pick<ReplayedSafeProps['safeAccountConfig'], 'owners' | 'threshold'> & {
+    paymentReceiver?: string
+  },
   chain: ChainInfo,
 ): UndeployedSafeWithoutSalt => {
   // Create universal deployment Data across chains:
@@ -243,7 +245,7 @@ export const createNewUndeployedSafeWithoutSalt = (
       fallbackHandler: fallbackHandlerAddress,
       to: includeMigration && safeToL2SetupAddress ? safeToL2SetupAddress : ZERO_ADDRESS,
       data: includeMigration ? safeToL2SetupInterface.encodeFunctionData('setupToL2', [safeL2Address]) : EMPTY_DATA,
-      paymentReceiver: ECOSYSTEM_ID_ADDRESS,
+      paymentReceiver: safeAccountConfig.paymentReceiver ?? ECOSYSTEM_ID_ADDRESS,
     },
     safeVersion,
   }
diff --git a/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx b/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx
index 71314ad37b..829b386199 100644
--- a/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx
+++ b/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx
@@ -1,6 +1,8 @@
+import { predictAddressBasedOnReplayData } from '@/features/multichain/utils/utils'
+import { useWeb3ReadOnly } from '@/hooks/wallets/web3'
 import { Button, MenuItem, Divider, Box, TextField, Stack, Skeleton, SvgIcon, Tooltip, Typography } from '@mui/material'
 import { Controller, FormProvider, useForm } from 'react-hook-form'
-import type { ReactElement } from 'react'
+import { type ReactElement, useMemo } from 'react'
 
 import type { StepRenderProps } from '@/components/new-safe/CardStepper/useCardStepper'
 import type { NewSafeFormData } from '@/components/new-safe/create'
@@ -11,29 +13,29 @@ import { type SafeVersion } from '@safe-global/safe-core-sdk-types'
 import NumberField from '@/components/common/NumberField'
 import { useCurrentChain } from '@/hooks/useChains'
 import useAsync from '@/hooks/useAsync'
-import { computeNewSafeAddress } from '../../logic'
-import { getReadOnlyFallbackHandlerContract } from '@/services/contracts/safeContracts'
+import { createNewUndeployedSafeWithoutSalt } from '../../logic'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import InfoIcon from '@/public/images/notifications/info.svg'
-import useWallet from '@/hooks/wallets/useWallet'
 import { isSmartContract } from '@/utils/wallets'
 
 enum AdvancedOptionsFields {
   safeVersion = 'safeVersion',
   saltNonce = 'saltNonce',
+  paymentReceiver = 'paymentReceiver',
 }
 
 export type AdvancedOptionsStepForm = {
   [AdvancedOptionsFields.safeVersion]: SafeVersion
   [AdvancedOptionsFields.saltNonce]: number
+  [AdvancedOptionsFields.paymentReceiver]: string
 }
 
 const ADVANCED_OPTIONS_STEP_FORM_ID = 'create-safe-advanced-options-step-form'
 
 const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProps<NewSafeFormData>): ReactElement => {
-  const wallet = useWallet()
   useSyncSafeCreationStep(setStep, data.networks)
   const chain = useCurrentChain()
+  const provider = useWeb3ReadOnly()
 
   const formMethods = useForm<AdvancedOptionsStepForm>({
     mode: 'onChange',
@@ -44,39 +46,31 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
 
   const selectedSafeVersion = watch(AdvancedOptionsFields.safeVersion)
   const selectedSaltNonce = watch(AdvancedOptionsFields.saltNonce)
+  const selectedPaymentReceiver = watch(AdvancedOptionsFields.paymentReceiver)
 
-  const [readOnlyFallbackHandlerContract] = useAsync(
-    () => (chain ? getReadOnlyFallbackHandlerContract(selectedSafeVersion) : undefined),
-    [chain, selectedSafeVersion],
+  const newSafeProps = useMemo(
+    () =>
+      chain
+        ? createNewUndeployedSafeWithoutSalt(
+            selectedSafeVersion,
+            {
+              owners: data.owners.map((owner) => owner.address),
+              threshold: data.threshold,
+              paymentReceiver: selectedPaymentReceiver,
+            },
+            chain,
+          )
+        : undefined,
+    [chain, data.owners, data.threshold, selectedSafeVersion, selectedPaymentReceiver],
   )
 
   const [predictedSafeAddress] = useAsync(async () => {
-    if (!chain || !readOnlyFallbackHandlerContract || !wallet) {
-      return undefined
-    }
-
-    return computeNewSafeAddress(
-      wallet.provider,
-      {
-        safeAccountConfig: {
-          owners: data.owners.map((owner) => owner.address),
-          threshold: data.threshold,
-          fallbackHandler: await readOnlyFallbackHandlerContract.getAddress(),
-        },
-        saltNonce: selectedSaltNonce.toString(),
-      },
-      chain,
-      selectedSafeVersion,
-    )
-  }, [
-    chain,
-    data.owners,
-    data.threshold,
-    wallet,
-    readOnlyFallbackHandlerContract,
-    selectedSafeVersion,
-    selectedSaltNonce,
-  ])
+    if (!provider || !newSafeProps) return
+
+    const replayedSafeWithNonce = { ...newSafeProps, saltNonce: selectedSaltNonce.toString() }
+
+    return predictAddressBasedOnReplayData(replayedSafeWithNonce, provider)
+  }, [provider, newSafeProps, selectedSaltNonce])
 
   const [isDeployed] = useAsync(
     async () => (predictedSafeAddress ? await isSmartContract(predictedSafeAddress) : false),
@@ -102,7 +96,7 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
         <Stack spacing={2}>
           <Box className={layoutCss.row}>
             <Typography
-              variant="h4"
+              variant="h5"
               sx={{
                 fontWeight: 700,
                 display: 'inline-flex',
@@ -139,17 +133,16 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
                 </TextField>
               )}
             />
-          </Box>
 
-          <Divider />
-          <Box className={layoutCss.row}>
             <Typography
-              variant="h4"
+              variant="h5"
               sx={{
                 fontWeight: 700,
                 display: 'inline-flex',
                 alignItems: 'center',
                 gap: 1,
+                mt: 4,
+                width: 1,
               }}
             >
               Salt nonce
@@ -183,15 +176,57 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
                 },
                 required: true,
               })}
+              fullWidth
               label="Salt nonce"
               error={Boolean(formState.errors[AdvancedOptionsFields.saltNonce]) || Boolean(isDeployed)}
               helperText={
-                (formState.errors[AdvancedOptionsFields.saltNonce]?.message ?? Boolean(isDeployed))
-                  ? 'The Safe is already deployed. Use a different salt nonce.'
-                  : undefined
+                formState.errors[AdvancedOptionsFields.saltNonce]?.message ??
+                (Boolean(isDeployed) ? 'The Safe is already deployed. Use a different salt nonce.' : undefined)
               }
             />
+
+            <Typography
+              variant="h5"
+              sx={{
+                fontWeight: 700,
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 1,
+                mt: 4,
+                width: 1,
+              }}
+            >
+              Payment receiver
+              <Tooltip title="The payment receiver changes the predicted Safe address." arrow placement="top">
+                <span style={{ display: 'flex' }}>
+                  <SvgIcon component={InfoIcon} inheritViewBox color="border" fontSize="small" />
+                </span>
+              </Tooltip>
+            </Typography>
+            <Typography
+              variant="body2"
+              sx={{
+                mb: 2,
+              }}
+            >
+              Impacts the derived Safe address
+            </Typography>
+            <TextField
+              {...register(AdvancedOptionsFields.paymentReceiver, {
+                required: true,
+              })}
+              label="Payment receiver"
+              error={Boolean(formState.errors[AdvancedOptionsFields.paymentReceiver]) || Boolean(isDeployed)}
+              helperText={
+                formState.errors[AdvancedOptionsFields.paymentReceiver]?.message ??
+                (Boolean(isDeployed) ? 'The Safe is already deployed. Use a different payment receiver.' : undefined)
+              }
+              fullWidth
+            />
           </Box>
+
+          <Divider />
+
           <Box className={layoutCss.row}>
             <Typography
               variant="h4"
@@ -208,7 +243,9 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
               <Skeleton />
             )}
           </Box>
+
           <Divider />
+
           <Box className={layoutCss.row}>
             <Box
               sx={{
diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
index 6a79f937c3..d5a3c41d6d 100644
--- a/src/components/new-safe/create/steps/ReviewStep/index.tsx
+++ b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -184,11 +184,12 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
             {
               owners: data.owners.map((owner) => owner.address),
               threshold: data.threshold,
+              paymentReceiver: data.paymentReceiver,
             },
             chain,
           )
         : undefined,
-    [chain, data.owners, data.safeVersion, data.threshold],
+    [chain, data.owners, data.safeVersion, data.threshold, data.paymentReceiver],
   )
 
   const safePropsForGasEstimation = useMemo(() => {
@@ -226,12 +227,10 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
       setIsCreating(true)
 
       // Figure out the shared available nonce across chains
-      const nextAvailableNonce = await getAvailableSaltNonce(
-        customRPCs,
-        { ...newSafeProps, saltNonce: '0' },
-        data.networks,
-        knownAddresses,
-      )
+      const nextAvailableNonce =
+        data.saltNonce !== undefined
+          ? data.saltNonce.toString()
+          : await getAvailableSaltNonce(customRPCs, { ...newSafeProps, saltNonce: '0' }, data.networks, knownAddresses)
 
       const replayedSafeWithNonce = { ...newSafeProps, saltNonce: nextAvailableNonce }
 

From cc5374cfe0debeddc1cb2374268f66f8c304e510 Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Thu, 28 Nov 2024 09:04:29 +0100
Subject: [PATCH 26/47] Tests: Add regex to handle my accounts (#4574)

---
 cypress.config.js                           |  2 +-
 cypress/e2e/pages/sidebar.pages.js          | 11 +++++++++--
 cypress/e2e/prodhealthcheck/sidebar_3.cy.js |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/cypress.config.js b/cypress.config.js
index 9db6791a57..429e69f07e 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -67,7 +67,7 @@ export default defineConfig({
     hideXHR: true,
     defaultCommandTimeout: 10000,
     pageLoadTimeout: 60000,
-    numTestsKeptInMemory: 0,
+    numTestsKeptInMemory: 20,
   },
 
   chromeWebSecurity: false,
diff --git a/cypress/e2e/pages/sidebar.pages.js b/cypress/e2e/pages/sidebar.pages.js
index eaf38c3635..c0eefa5f8d 100644
--- a/cypress/e2e/pages/sidebar.pages.js
+++ b/cypress/e2e/pages/sidebar.pages.js
@@ -96,7 +96,7 @@ export const testSafeHeaderDetails = ['2/2', safes.SEP_STATIC_SAFE_9_SHORT]
 const receiveAssetsStr = 'Receive assets'
 const emptyPinnedListStr = 'Watch any Safe Account to keep an eye on its activity'
 const emptySafeListStr = "You don't have any safes yet"
-const accountsStr = 'Accounts'
+const accountsRegex = /(My accounts|Accounts) \((\d+)\)/
 const confirmTxStr = (number) => `${number} to confirm`
 const pedningTxStr = (n) => `${n} pending`
 export const confirmGenStr = 'to confirm'
@@ -464,7 +464,14 @@ export function verifySafeGiveNameOptionExists(index) {
 }
 
 export function checkAccountsCounter(value) {
-  cy.contains(accountsStr).should('contain', value)
+  cy.get(sidebarSafeContainer)
+    .should('exist')
+    .then(($el) => {
+      const text = $el.text()
+      const match = text.match(accountsRegex)
+      expect(match).not.to.be.null
+      expect(match[0]).to.exist
+    })
 }
 
 export function checkTxToConfirm(numberOfTx) {
diff --git a/cypress/e2e/prodhealthcheck/sidebar_3.cy.js b/cypress/e2e/prodhealthcheck/sidebar_3.cy.js
index c1c3711862..01ea2fc20e 100644
--- a/cypress/e2e/prodhealthcheck/sidebar_3.cy.js
+++ b/cypress/e2e/prodhealthcheck/sidebar_3.cy.js
@@ -22,7 +22,7 @@ describe('[PROD] Sidebar tests 3', () => {
     })
     wallet.connectSigner(signer)
     sideBar.openSidebar()
-    sideBar.checkAccountsCounter(2)
+    sideBar.checkAccountsCounter('2')
   })
 
   it('Verify pending signature is displayed in sidebar for unsigned tx', () => {

From 6a16d5c4b79a0400d853afc030e0c7bb7fb7866d Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 28 Nov 2024 10:04:10 +0100
Subject: [PATCH 27/47] Docs: update .env.example

---
 .env.example | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/.env.example b/.env.example
index 121efd942e..69e9230b30 100644
--- a/.env.example
+++ b/.env.example
@@ -2,10 +2,16 @@
 NEXT_PUBLIC_INFURA_TOKEN=
 NEXT_PUBLIC_SAFE_APPS_INFURA_TOKEN=
 
+# WalletConnect
+NEXT_PUBLIC_WC_PROJECT_ID=
+
 ## CGW
 NEXT_PUBLIC_GATEWAY_URL_PRODUCTION=
 NEXT_PUBLIC_GATEWAY_URL_STAGING=
 
+# Blockaid
+NEXT_PUBLIC_BLOCKAID_CLIENT_ID=
+
 # Transaction simulation
 NEXT_PUBLIC_TENDERLY_SIMULATE_ENDPOINT_URL=
 NEXT_PUBLIC_TENDERLY_PROJECT_NAME=
@@ -17,15 +23,11 @@ NEXT_PUBLIC_IS_PRODUCTION=
 # Latest supported safe version, used for upgrade prompts
 NEXT_PUBLIC_SAFE_VERSION=
 
-# Access keys
+# Sentry
 NEXT_PUBLIC_SENTRY_DSN=
-NEXT_PUBLIC_BEAMER_ID=
-
-# Wallet-specific variables
-NEXT_PUBLIC_WC_PROJECT_ID=
 
-# E2E tests
-NEXT_PUBLIC_CYPRESS_MNEMONIC=
+# Beamer
+NEXT_PUBLIC_BEAMER_ID=
 
 # Safe Gelato relay service
 NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_PRODUCTION=
@@ -34,19 +36,11 @@ NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING=
 # Firebase Cloud Messaging
 NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTION=
 NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION=
-
 NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING=
 NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING=
 
-# Blockaid
-NEXT_PUBLIC_BLOCKAID_CLIENT_ID
-
-# Social Login
-NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING=
-NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION=
-
 # Cypress wallet private keys
 CYPRESS_WALLET_CREDENTIALS=
 
 # [optional] Beamer keys for e2e tests
-BEAMER_DATA_E2E=
\ No newline at end of file
+BEAMER_DATA_E2E=

From 047f45da475fc216b9a560fcbea1d5660eab46ab Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Thu, 28 Nov 2024 14:32:46 +0100
Subject: [PATCH 28/47] fix: Don't break array elements in tx details into
 multiple lines if empty (#4571)

---
 .../TxData/DecodedData/ValueArray/index.tsx   | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/ValueArray/index.tsx b/src/components/transactions/TxDetails/TxData/DecodedData/ValueArray/index.tsx
index 8bc19b7cf5..9ddfd67723 100644
--- a/src/components/transactions/TxDetails/TxData/DecodedData/ValueArray/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/DecodedData/ValueArray/index.tsx
@@ -35,24 +35,26 @@ export const Value = ({ type, value, ...props }: ValueArrayProps): ReactElement
     return (
       <Typography component="div" variant="body2">
         [
-        <div className={css.nestedWrapper}>
-          {parsedValue.map((address, index) => {
-            const key = `${props.key || props.method}-${index}`
-            if (Array.isArray(address)) {
-              const newProps = {
-                type,
-                ...props,
-                value: address,
+        {parsedValue.length > 0 && (
+          <div className={css.nestedWrapper}>
+            {parsedValue.map((address, index) => {
+              const key = `${props.key || props.method}-${index}`
+              if (Array.isArray(address)) {
+                const newProps = {
+                  type,
+                  ...props,
+                  value: address,
+                }
+                return <Value key={key} {...newProps} />
               }
-              return <Value key={key} {...newProps} />
-            }
-            return (
-              <div key={`${address}_${key}`}>
-                <EthHashInfo address={address} showAvatar={false} shortAddress={false} showCopyButton hasExplorer />
-              </div>
-            )
-          })}
-        </div>
+              return (
+                <div key={`${address}_${key}`}>
+                  <EthHashInfo address={address} showAvatar={false} shortAddress={false} showCopyButton hasExplorer />
+                </div>
+              )
+            })}
+          </div>
+        )}
         ]
       </Typography>
     )

From 1814c261853943fef3823d33ac4708bd6cf19fa7 Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Thu, 28 Nov 2024 14:34:15 +0100
Subject: [PATCH 29/47] fix: update `wallet_getCallsStatus` spec. (#4569)

---
 .../safe-wallet-provider/index.test.ts        | 85 +++++++++++++++++--
 src/services/safe-wallet-provider/index.ts    | 62 +++++++-------
 src/utils/hex.ts                              |  2 +-
 3 files changed, 113 insertions(+), 36 deletions(-)

diff --git a/src/services/safe-wallet-provider/index.test.ts b/src/services/safe-wallet-provider/index.test.ts
index 3252f21e23..cbb86f5c50 100644
--- a/src/services/safe-wallet-provider/index.test.ts
+++ b/src/services/safe-wallet-provider/index.test.ts
@@ -2,6 +2,8 @@
 import { faker } from '@faker-js/faker'
 import { SafeWalletProvider } from '.'
 import { ERC20__factory } from '@/types/contracts'
+import { numberToHex } from '@/utils/hex'
+import type { TransactionReceipt } from 'ethers'
 
 const safe = {
   safeAddress: faker.finance.ethereumAddress(),
@@ -617,10 +619,16 @@ describe('SafeWalletProvider', () => {
     })
 
     describe('wallet_getCallsStatus', () => {
-      it('should look up a tx by txHash', async () => {
+      it('should return a confirmed transaction', async () => {
+        const receipt: Pick<TransactionReceipt, 'logs' | 'blockHash' | 'blockNumber' | 'gasUsed'> = {
+          logs: [],
+          blockHash: faker.string.hexadecimal(),
+          blockNumber: faker.number.int(),
+          gasUsed: faker.number.bigInt(),
+        }
         const sdk = {
           getBySafeTxHash: jest.fn().mockResolvedValue({
-            txStatus: 'AWAITING_EXECUTION',
+            txStatus: 'SUCCESS',
             txHash: '0x123',
             txData: {
               dataDecoded: {
@@ -628,22 +636,45 @@ describe('SafeWalletProvider', () => {
               },
             },
           }),
-          proxy: jest.fn(),
+          proxy: jest.fn().mockImplementation((method) => {
+            if (method === 'eth_getTransactionReceipt') {
+              return Promise.resolve(receipt)
+            }
+            return Promise.reject('Unknown method')
+          }),
         }
         const safeWalletProvider = new SafeWalletProvider(safe, sdk as any)
 
         const params = ['0x123']
 
-        await safeWalletProvider.request(1, { method: 'wallet_getCallsStatus', params } as any, appInfo)
+        const status = await safeWalletProvider.request(1, { method: 'wallet_getCallsStatus', params } as any, appInfo)
 
         expect(sdk.getBySafeTxHash).toHaveBeenCalledWith(params[0])
         expect(sdk.proxy).toHaveBeenCalledWith('eth_getTransactionReceipt', params)
+        expect(status).toStrictEqual({
+          id: 1,
+          jsonrpc: '2.0',
+          result: {
+            receipts: [
+              {
+                blockHash: receipt.blockHash,
+                blockNumber: numberToHex(receipt.blockNumber),
+                chainId: '0x1',
+                gasUsed: numberToHex(receipt.gasUsed),
+                logs: receipt.logs,
+                status: '0x1',
+                transactionHash: '0x123',
+              },
+            ],
+            status: 'CONFIRMED',
+          },
+        })
       })
 
       it('should return a pending status w/o txHash', async () => {
         const sdk = {
           getBySafeTxHash: jest.fn().mockResolvedValue({
-            txStatus: 'AWAITING_CONFIRMATION',
+            txStatus: 'AWAITING_EXECUTION',
             txData: {
               dataDecoded: {
                 parameters: [{ valueDecoded: [1] }],
@@ -656,10 +687,52 @@ describe('SafeWalletProvider', () => {
 
         const params = ['0x123']
 
-        await safeWalletProvider.request(1, { method: 'wallet_getCallsStatus', params } as any, appInfo)
+        const status = await safeWalletProvider.request(1, { method: 'wallet_getCallsStatus', params } as any, appInfo)
 
         expect(sdk.getBySafeTxHash).toHaveBeenCalledWith(params[0])
         expect(sdk.proxy).not.toHaveBeenCalled()
+        expect(status).toStrictEqual({
+          id: 1,
+          jsonrpc: '2.0',
+          result: {
+            status: 'PENDING',
+          },
+        })
+      })
+
+      it('should return a pending status w/o receipt', async () => {
+        const sdk = {
+          getBySafeTxHash: jest.fn().mockResolvedValue({
+            txStatus: 'AWAITING_EXECUTION',
+            txHash: '0x123',
+            txData: {
+              dataDecoded: {
+                parameters: [{ valueDecoded: [1] }],
+              },
+            },
+          }),
+          proxy: jest.fn().mockImplementation((method) => {
+            if (method === 'eth_getTransactionReceipt') {
+              return Promise.resolve(null)
+            }
+            return Promise.reject('Unknown method')
+          }),
+        }
+        const safeWalletProvider = new SafeWalletProvider(safe, sdk as any)
+
+        const params = ['0x123']
+
+        const status = await safeWalletProvider.request(1, { method: 'wallet_getCallsStatus', params } as any, appInfo)
+
+        expect(sdk.getBySafeTxHash).toHaveBeenCalledWith(params[0])
+        expect(sdk.proxy).toHaveBeenCalledWith('eth_getTransactionReceipt', params)
+        expect(status).toStrictEqual({
+          id: 1,
+          jsonrpc: '2.0',
+          result: {
+            status: 'PENDING',
+          },
+        })
       })
     })
 
diff --git a/src/services/safe-wallet-provider/index.ts b/src/services/safe-wallet-provider/index.ts
index d44109b528..89c568d3b3 100644
--- a/src/services/safe-wallet-provider/index.ts
+++ b/src/services/safe-wallet-provider/index.ts
@@ -365,17 +365,15 @@ export class SafeWalletProvider {
     return safeTxHash
   }
   async wallet_getCallsStatus(safeTxHash: string): Promise<{
-    calls: Array<{
-      status: BundleStatus
-      receipt: {
-        success: boolean
-        blockHash: string
-        blockNumber: string // hex string
-        blockTimestamp: string // hex string
-        gasUsed: string // hex string
-        transactionHash: string
-        logs: TransactionReceipt['logs']
-      }
+    status: BundleStatus
+    receipts?: Array<{
+      logs: TransactionReceipt['logs']
+      status: `0x${string}` // Hex 1 or 0 for success or failure, respectively
+      chainId: `0x${string}`
+      blockHash: `0x${string}`
+      blockNumber: `0x${string}`
+      gasUsed: `0x${string}`
+      transactionHash: `0x${string}`
     }>
   }> {
     let tx: TransactionDetails | undefined
@@ -384,33 +382,39 @@ export class SafeWalletProvider {
       tx = await this.sdk.getBySafeTxHash(safeTxHash)
     } catch (e) {}
 
-    if (!tx || !tx.txData?.dataDecoded) {
+    if (!tx) {
       throw new Error('Transaction not found')
     }
 
-    const calls = new Array(tx.txData.dataDecoded.parameters?.[0].valueDecoded?.length ?? 1).fill(null)
-    const { txStatus, txHash } = tx
+    const status = BundleTxStatuses[tx.txStatus]
 
-    let receipt: TransactionReceipt | undefined
-    if (txHash) {
-      receipt = await (this.sdk.proxy('eth_getTransactionReceipt', [txHash]) as Promise<TransactionReceipt>)
+    if (!tx.txHash) {
+      return {
+        status,
+      }
     }
 
-    const callStatus = {
-      status: BundleTxStatuses[txStatus],
-      receipt: {
-        success: txStatus === TransactionStatus.SUCCESS,
-        blockHash: receipt?.blockHash ?? '',
-        blockNumber: receipt?.blockNumber.toString() ?? '0x0',
-        blockTimestamp: numberToHex(tx.executedAt ?? 0),
-        gasUsed: receipt?.gasUsed.toString() ?? '0x0',
-        transactionHash: txHash ?? '',
-        logs: receipt?.logs ?? [],
-      },
+    const receipt = await (this.sdk.proxy('eth_getTransactionReceipt', [
+      tx.txHash,
+    ]) as Promise<TransactionReceipt | null>)
+    if (!receipt) {
+      return { status }
     }
 
+    const calls = tx.txData?.dataDecoded?.parameters?.[0].valueDecoded?.length ?? 1
+    const receipts = Array.from({ length: calls }, () => ({
+      logs: receipt.logs,
+      status: numberToHex(tx.txStatus === TransactionStatus.SUCCESS ? 1 : 0),
+      chainId: numberToHex(this.safe.chainId),
+      blockHash: receipt.blockHash as `0x${string}`,
+      blockNumber: numberToHex(receipt.blockNumber),
+      gasUsed: numberToHex(receipt.gasUsed),
+      transactionHash: tx.txHash as `0x${string}`,
+    }))
+
     return {
-      calls: calls.map(() => callStatus),
+      status,
+      receipts,
     }
   }
   async wallet_showCallsStatus(txHash: string): Promise<null> {
diff --git a/src/utils/hex.ts b/src/utils/hex.ts
index 6ce32e4723..7bac3d8481 100644
--- a/src/utils/hex.ts
+++ b/src/utils/hex.ts
@@ -1,3 +1,3 @@
 export const isEmptyHexData = (encodedData: string): boolean => encodedData !== '' && isNaN(parseInt(encodedData, 16))
 
-export const numberToHex = (value: number) => `0x${value.toString(16)}`
+export const numberToHex = (value: number | bigint): `0x${string}` => `0x${value.toString(16)}`

From d8ff28149a37880534c663e12f483b1c1715fc73 Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Thu, 28 Nov 2024 15:12:55 +0100
Subject: [PATCH 30/47] Tests: Add sidebar tests (#4577)

---
 cypress/e2e/pages/sidebar.pages.js            | 48 ++++++++++-
 cypress/e2e/regression/sidebar_3.cy.js        |  2 +-
 cypress/e2e/regression/sidebar_5.cy.js        | 59 ++++++++++++-
 cypress/e2e/regression/sidebar_6.cy.js        | 86 +++++++++++++++++++
 cypress/support/constants.js                  |  1 +
 cypress/support/localstorage_data.js          | 57 ++++++++++++
 .../components/OrderByButton/index.tsx        |  8 +-
 src/features/myAccounts/index.tsx             |  2 +-
 8 files changed, 254 insertions(+), 9 deletions(-)
 create mode 100644 cypress/e2e/regression/sidebar_6.cy.js

diff --git a/cypress/e2e/pages/sidebar.pages.js b/cypress/e2e/pages/sidebar.pages.js
index c0eefa5f8d..a2bd1c0ad7 100644
--- a/cypress/e2e/pages/sidebar.pages.js
+++ b/cypress/e2e/pages/sidebar.pages.js
@@ -59,6 +59,9 @@ const emptyPinnedList = '[data-testid="empty-pinned-list"]'
 const boomarkIcon = '[data-testid="bookmark-icon"]'
 const emptyAccountList = '[data-testid="empty-account-list"]'
 const searchInput = '[id="search-by-name"]'
+const accountsList = '[data-testid="accounts-list"]'
+const sortbyBtn = '[data-testid="sortby-button"]'
+
 export const importBtnStr = 'Import'
 export const exportBtnStr = 'Export'
 export const undeployedSafe = 'Undeployed Sepolia'
@@ -80,11 +83,13 @@ export const sideBarListItems = ['Home', 'Assets', 'Transactions', 'Address book
 export const sideBarSafes = {
   safe1: '0xBb26E3717172d5000F87DeFd391994f789D80aEB',
   safe2: '0x905934aA8758c06B2422F0C90D97d2fbb6677811',
+  safe3: '0xC96ee38f5A73C8A70b565CB8EA938D2aF913ee3B',
   safe1short: '0xBb26...0aEB',
   safe1short_: '0xBb26',
   safe2short: '0x9059...7811',
   safe3short: '0x86Cb...2C27',
   safe4short: '0x9261...7E00',
+  multichain_short_: '0xC96e',
 }
 
 // 0x926186108f74dB20BFeb2b6c888E523C78cb7E00
@@ -100,6 +105,15 @@ const accountsRegex = /(My accounts|Accounts) \((\d+)\)/
 const confirmTxStr = (number) => `${number} to confirm`
 const pedningTxStr = (n) => `${n} pending`
 export const confirmGenStr = 'to confirm'
+const searchResults = (number) => `Found ${number} result${number === 1 ? '' : 's'}`
+
+export const sortOptions = {
+  lastVisited: '[data-testid="last-visited-option"]',
+  name: '[data-testid="name-option"]',
+}
+export function checkSearchResults(number) {
+  cy.contains(searchResults(number)).should('exist')
+}
 
 export const multichainSafes = {
   polygon: 'Multichain polygon',
@@ -110,6 +124,18 @@ export function searchSafe(safe) {
   cy.get(searchInput).clear().type(safe)
 }
 
+export function openSortOptionsMenu() {
+  cy.get(sortbyBtn).click()
+}
+
+export function selectSortOption(option) {
+  cy.get(option).click()
+}
+
+export function clearSearchInput() {
+  cy.get(searchInput).scrollIntoView().clear({ force: true })
+}
+
 export function verifySearchInputPosition() {
   cy.get(searchInput).then(($searchInput) => {
     cy.get(pinnedAccountsContainer).then(($pinnedList) => {
@@ -232,6 +258,12 @@ export function verifySafeCount(count) {
   main.verifyMinimumElementsCount(sideSafeListItem, count)
 }
 
+export function verifyAccountListSafeCount(count) {
+  cy.get(accountsList).within(() => {
+    cy.get(sideSafeListItem).should('have.length', count)
+  })
+}
+
 export function clickOnOpenSidebarBtn() {
   cy.get(openSafesIcon).click()
 }
@@ -248,9 +280,12 @@ export function verifyAddedSafesExist(safes) {
   main.verifyValuesExist(sideSafeListItem, safes)
 }
 
+export function verifySafesDoNotExist(safes) {
+  main.verifyValuesDoNotExist(sidebarSafeContainer, safes)
+}
+
 export function verifyAddedSafesExistByIndex(index, safe) {
   cy.get(sideSafeListItem).eq(index).should('contain', safe)
-  cy.get(sideSafeListItem).eq(index).should('contain', 'sep:')
 }
 
 export function verifySafesByNetwork(netwrok, safes) {
@@ -266,7 +301,7 @@ export function verifySafesByNetwork(netwrok, safes) {
 }
 
 function getSafeByName(safe) {
-  return cy.get(sidebarSafeContainer).find(sideSafeListItem).contains(safe).parents('span').parent()
+  return cy.get(sidebarSafeContainer).find(sideSafeListItem).contains(safe).parents('span').parent().should('exist')
 }
 
 function getSafeItemOptions(name) {
@@ -295,13 +330,16 @@ export function clickOnSafeItemOptionsBtnByIndex(index) {
   cy.get(safeItemOptionsBtn).eq(index).click()
 }
 
+export function expandGroupSafes(index) {
+  cy.get(multichainItemSummary).eq(index).click()
+}
+
 export function clickOnMultichainItemOptionsBtn(index) {
   cy.get(multichainItemSummary).eq(index).find(safeItemOptionsBtn).click()
 }
 
 export function checkMultichainTooltipExists(index) {
   cy.get(multichainItemSummary).eq(index).find(chainLogo).eq(0).trigger('mouseover', { force: true })
-
   cy.get(multichainTooltip).should('exist')
 }
 
@@ -340,6 +378,10 @@ export function checkUndeployedSafeExists(index) {
   return getSubAccountContainer(index).contains(notActivatedStr).should('exist')
 }
 
+export function checkMultichainSubSafeExists(safes) {
+  main.verifyValuesExist(subAccountContainer, safes)
+}
+
 export function checkAddNetworkBtnPosition(index) {
   cy.get(multichainItemSummary)
     .eq(index)
diff --git a/cypress/e2e/regression/sidebar_3.cy.js b/cypress/e2e/regression/sidebar_3.cy.js
index cee5e6899a..f60cdaa1f6 100644
--- a/cypress/e2e/regression/sidebar_3.cy.js
+++ b/cypress/e2e/regression/sidebar_3.cy.js
@@ -85,7 +85,7 @@ describe('Sidebar tests 3', () => {
     })
     wallet.connectSigner(signer)
     sideBar.openSidebar()
-    sideBar.checkAccountsCounter(2)
+    sideBar.checkAccountsCounter('2')
   })
 
   it('Verify that safes the user do not owns show in the watchlist after adding them', () => {
diff --git a/cypress/e2e/regression/sidebar_5.cy.js b/cypress/e2e/regression/sidebar_5.cy.js
index e638afb254..3f2e7ddc12 100644
--- a/cypress/e2e/regression/sidebar_5.cy.js
+++ b/cypress/e2e/regression/sidebar_5.cy.js
@@ -4,9 +4,6 @@ import * as sideBar from '../pages/sidebar.pages.js'
 import * as ls from '../../support/localstorage_data.js'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
-import * as create_wallet from '../pages/create_wallet.pages.js'
-import * as navigation from '../pages/navigation.page.js'
-import * as owner from '../pages/owners.pages.js'
 
 let staticSafes = []
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
@@ -36,4 +33,60 @@ describe('Sidebar search tests', () => {
     sideBar.verifyAddedSafesExist([sideBar.sideBarSafes.safe1short])
     sideBar.verifySafeCount(1)
   })
+
+  it("Verify searching for a safe name filters out those who don't match", () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    cy.intercept('GET', constants.safeListEndpoint, {
+      11155111: [sideBar.sideBarSafes.safe1, sideBar.sideBarSafes.safe2],
+    })
+    wallet.connectSigner(signer)
+    sideBar.openSidebar()
+    sideBar.searchSafe(sideBar.sideBarSafes.safe1short_)
+    sideBar.verifyAddedSafesExist([sideBar.sideBarSafes.safe1short])
+    sideBar.verifySafesDoNotExist([sideBar.sideBarSafes.safe2short])
+  })
+
+  it('Verify searching for a safe also finds safes in different networks', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    cy.intercept('GET', constants.safeListEndpoint, {
+      11155111: [sideBar.sideBarSafes.safe3],
+    })
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__undeployedSafes, ls.undeployedSafe.safes2)
+    wallet.connectSigner(signer)
+    sideBar.clickOnOpenSidebarBtn()
+    sideBar.searchSafe(sideBar.sideBarSafes.multichain_short_)
+    sideBar.checkMultichainSubSafeExists([
+      constants.networks.gnosis,
+      constants.networks.ethereum,
+      constants.networks.sepolia,
+    ])
+  })
+
+  it('Verify search shows number of results found', () => {
+    const safe = main.changeSafeChainName(staticSafes.MATIC_STATIC_SAFE_28, 'eth')
+    cy.visit(constants.BALANCE_URL + safe)
+    cy.intercept('GET', constants.safeListEndpoint, {
+      11155111: [sideBar.sideBarSafes.safe1, sideBar.sideBarSafes.safe2, sideBar.sideBarSafes.safe3],
+    })
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__undeployedSafes, ls.undeployedSafe.safes2)
+    wallet.connectSigner(signer)
+    sideBar.clickOnOpenSidebarBtn()
+    sideBar.searchSafe('0x')
+    sideBar.checkSearchResults(3)
+  })
+
+  it('Verify clearing the search input returns back to the previous lists', () => {
+    const safe = main.changeSafeChainName(staticSafes.MATIC_STATIC_SAFE_28, 'eth')
+    cy.visit(constants.BALANCE_URL + safe)
+    cy.intercept('GET', constants.safeListEndpoint, {
+      11155111: [sideBar.sideBarSafes.safe1, sideBar.sideBarSafes.safe2, sideBar.sideBarSafes.safe3],
+    })
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__undeployedSafes, ls.undeployedSafe.safes2)
+    wallet.connectSigner(signer)
+    sideBar.clickOnOpenSidebarBtn()
+    sideBar.searchSafe('0xC')
+    sideBar.checkSearchResults(1)
+    sideBar.clearSearchInput()
+    sideBar.verifyAccountListSafeCount(6)
+  })
 })
diff --git a/cypress/e2e/regression/sidebar_6.cy.js b/cypress/e2e/regression/sidebar_6.cy.js
new file mode 100644
index 0000000000..872dfd8cbd
--- /dev/null
+++ b/cypress/e2e/regression/sidebar_6.cy.js
@@ -0,0 +1,86 @@
+import * as constants from '../../support/constants.js'
+import * as main from '../pages/main.page.js'
+import * as sideBar from '../pages/sidebar.pages.js'
+import * as ls from '../../support/localstorage_data.js'
+import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as wallet from '../../support/utils/wallet.js'
+
+let staticSafes = []
+const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
+const signer = walletCredentials.OWNER_4_PRIVATE_KEY
+
+const aSafe = 'Safe A'
+const bSafe = 'Safe B'
+const safe14 = 'Safe 14'
+const safe15 = 'Safe 15'
+
+describe('Sidebar sorting tests', () => {
+  before(async () => {
+    staticSafes = await getSafes(CATEGORIES.static)
+  })
+
+  it('Verify the same safe of the different networks is ordered by most recent', () => {
+    let safe_eth = main.changeSafeChainName(staticSafes.MATIC_STATIC_SAFE_28, 'eth')
+    let safe_gno = main.changeSafeChainName(staticSafes.MATIC_STATIC_SAFE_28, 'gno')
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    cy.intercept('GET', constants.safeListEndpoint, { 1: [], 100: [], 137: [], 11155111: [] })
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__undeployedSafes, ls.undeployedSafe.safes2)
+    wallet.connectSigner(signer)
+    cy.visit(constants.BALANCE_URL + safe_eth)
+    cy.visit(constants.BALANCE_URL + safe_gno)
+
+    sideBar.clickOnOpenSidebarBtn()
+    sideBar.searchSafe('96')
+    sideBar.checkSearchResults(1)
+    sideBar.verifySafeCount(3)
+    sideBar.verifyAddedSafesExistByIndex(1, constants.networks.gnosis)
+    sideBar.verifyAddedSafesExistByIndex(2, constants.networks.ethereum)
+  })
+
+  it('Verify the same safe of the different networks is ordered by name', () => {
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__addressBook, ls.addressBookData.undeployedSet)
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__undeployedSafes, ls.undeployedSafe.safes2)
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    cy.intercept('GET', constants.safeListEndpoint, { 1: [], 100: [], 137: [], 11155111: [] })
+    wallet.connectSigner(signer)
+
+    sideBar.clickOnOpenSidebarBtn()
+    sideBar.searchSafe('96')
+    sideBar.verifySafeCount(3)
+    sideBar.expandGroupSafes(0)
+    sideBar.openSortOptionsMenu()
+    sideBar.selectSortOption(sideBar.sortOptions.name)
+    sideBar.verifyAddedSafesExistByIndex(1, aSafe)
+    sideBar.verifyAddedSafesExistByIndex(2, bSafe)
+  })
+
+  it('Verify that a pinned safe can be sorted by name and last visited', () => {
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__addressBook, ls.addressBookData.pagination)
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__visitedSafes, ls.visitedSafes.set1)
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_9)
+    cy.intercept('GET', constants.safeListEndpoint, {
+      11155111: [sideBar.sideBarSafes.safe1, sideBar.sideBarSafes.safe2],
+    })
+    wallet.connectSigner(signer)
+    sideBar.clickOnOpenSidebarBtn()
+    sideBar.searchSafe('15')
+    cy.wait(1000)
+    sideBar.clickOnBookmarkBtn(sideBar.sideBarSafes.safe2short)
+    sideBar.clearSearchInput()
+    sideBar.searchSafe('14')
+    cy.wait(1000)
+    sideBar.clickOnBookmarkBtn(sideBar.sideBarSafes.safe1short)
+    sideBar.clearSearchInput()
+
+    sideBar.verifyPinnedSafe(sideBar.sideBarSafes.safe2short)
+    sideBar.verifyPinnedSafe(sideBar.sideBarSafes.safe1short)
+
+    sideBar.openSortOptionsMenu()
+    sideBar.selectSortOption(sideBar.sortOptions.name)
+    sideBar.verifyAddedSafesExistByIndex(0, safe14)
+    sideBar.verifyAddedSafesExistByIndex(1, safe15)
+    sideBar.selectSortOption(sideBar.sortOptions.lastVisited)
+    sideBar.verifyAddedSafesExistByIndex(0, safe15)
+    sideBar.verifyAddedSafesExistByIndex(1, safe14)
+  })
+})
diff --git a/cypress/support/constants.js b/cypress/support/constants.js
index f7cf8aead9..4f3b928082 100644
--- a/cypress/support/constants.js
+++ b/cypress/support/constants.js
@@ -255,4 +255,5 @@ export const localStorageKeys = {
   SAFE_v2__SafeApps__infoModal: 'SAFE_v2__SafeApps__infoModal',
   SAFE_v2__undeployedSafes: 'SAFE_v2__undeployedSafes',
   SAFE_v2__batch: 'SAFE_v2__batch',
+  SAFE_v2__visitedSafes: 'SAFE_v2__visitedSafes',
 }
diff --git a/cypress/support/localstorage_data.js b/cypress/support/localstorage_data.js
index b4e236383d..feeefe5db4 100644
--- a/cypress/support/localstorage_data.js
+++ b/cypress/support/localstorage_data.js
@@ -279,6 +279,15 @@ export const batchData = {
     },
   },
 }
+export const visitedSafes = {
+  set1: {
+    11155111: {
+      '0x905934aA8758c06B2422F0C90D97d2fbb6677811': {
+        lastVisited: 1732794651004,
+      },
+    },
+  },
+}
 export const addressBookData = {
   proposers: {
     11155111: { '0xC16Db0251654C0a72E91B190d81eAD367d2C6fED': 'AD Proposer1' },
@@ -356,6 +365,14 @@ export const addressBookData = {
       '0x926186108f74dB20BFeb2b6c888E523C78cb7E00': 'Undeployed Sepolia',
     },
   },
+  undeployedSet: {
+    100: {
+      '0xC96ee38f5A73C8A70b565CB8EA938D2aF913ee3B': 'Safe A',
+    },
+    1: {
+      '0xC96ee38f5A73C8A70b565CB8EA938D2aF913ee3B': 'Safe B',
+    },
+  },
   undeployedEth: {
     1: {
       '0x926186108f74dB20BFeb2b6c888E523C78cb7E00': 'Undeployed Sepolia',
@@ -772,4 +789,44 @@ export const undeployedSafe = {
       },
     },
   },
+  safes2: {
+    1: {
+      '0xC96ee38f5A73C8A70b565CB8EA938D2aF913ee3B': {
+        props: {
+          safeAccountConfig: {
+            threshold: 1,
+            owners: ['0x3ba5d9a6d6169429Adb278768D9681A125C01Af6'],
+            fallbackHandler: '0xfd0732Dc9E303f09fCEf3a7388Ad10A83459Ec99',
+          },
+          safeDeploymentConfig: {
+            saltNonce: '0',
+            safeVersion: '1.4.1',
+          },
+        },
+        status: {
+          status: 'AWAITING_EXECUTION',
+          type: 'PayLater',
+        },
+      },
+    },
+    100: {
+      '0xC96ee38f5A73C8A70b565CB8EA938D2aF913ee3B': {
+        props: {
+          safeAccountConfig: {
+            threshold: 1,
+            owners: ['0x3ba5d9a6d6169429Adb278768D9681A125C01Af6'],
+            fallbackHandler: '0xfd0732Dc9E303f09fCEf3a7388Ad10A83459Ec99',
+          },
+          safeDeploymentConfig: {
+            saltNonce: '0',
+            safeVersion: '1.4.1',
+          },
+        },
+        status: {
+          status: 'AWAITING_EXECUTION',
+          type: 'PayLater',
+        },
+      },
+    },
+  },
 }
diff --git a/src/features/myAccounts/components/OrderByButton/index.tsx b/src/features/myAccounts/components/OrderByButton/index.tsx
index 5a07a4b4cd..0944fee6d1 100644
--- a/src/features/myAccounts/components/OrderByButton/index.tsx
+++ b/src/features/myAccounts/components/OrderByButton/index.tsx
@@ -36,6 +36,7 @@ const OrderByButton = ({ orderBy: orderBy, onOrderByChange: onOrderByChange }: O
   return (
     <Box display="flex">
       <Button
+        data-testid="sortby-button"
         onClick={handleClick}
         startIcon={<SvgIcon component={TransactionsIcon} inheritViewBox />}
         sx={{ color: 'primary.light', fontWeight: 'normal' }}
@@ -61,6 +62,7 @@ const OrderByButton = ({ orderBy: orderBy, onOrderByChange: onOrderByChange }: O
           <ListItemText>Sort by</ListItemText>
         </MenuItem>
         <MenuItem
+          data-testid="last-visited-option"
           sx={{ borderRadius: 0 }}
           onClick={() => handleOrderByChange(OrderByOption.LAST_VISITED)}
           selected={orderBy === OrderByOption.LAST_VISITED}
@@ -68,7 +70,11 @@ const OrderByButton = ({ orderBy: orderBy, onOrderByChange: onOrderByChange }: O
           <ListItemText sx={{ mr: 2 }}>{orderByLabels[OrderByOption.LAST_VISITED]}</ListItemText>
           {orderBy === OrderByOption.LAST_VISITED && <CheckIcon sx={{ ml: 1 }} />}
         </MenuItem>
-        <MenuItem onClick={() => handleOrderByChange(OrderByOption.NAME)} selected={orderBy === OrderByOption.NAME}>
+        <MenuItem
+          data-testid="name-option"
+          onClick={() => handleOrderByChange(OrderByOption.NAME)}
+          selected={orderBy === OrderByOption.NAME}
+        >
           <ListItemText>{orderByLabels[OrderByOption.NAME]}</ListItemText>
           {orderBy === OrderByOption.NAME && <CheckIcon sx={{ ml: 1 }} />}
         </MenuItem>
diff --git a/src/features/myAccounts/index.tsx b/src/features/myAccounts/index.tsx
index 51e44fcec2..26e772937a 100644
--- a/src/features/myAccounts/index.tsx
+++ b/src/features/myAccounts/index.tsx
@@ -226,7 +226,7 @@ const AccountsList = ({ safes, onLinkClick, isSidebar = false }: AccountsListPro
                       </Typography>
                     </div>
                   </AccordionSummary>
-                  <AccordionDetails sx={{ padding: 0 }}>
+                  <AccordionDetails data-testid="accounts-list" sx={{ padding: 0 }}>
                     {allSafes.length > 0 ? (
                       <Box mt={1}>
                         <SafesList safes={allSafes} onLinkClick={onLinkClick} />

From d595f12382a2c426a341b1674b44b99b95cf2804 Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Fri, 29 Nov 2024 07:58:01 +0100
Subject: [PATCH 31/47] Tests: Add timeout for drain account app (#4579)

---
 cypress/e2e/safe-apps/drain_account.spec.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/safe-apps/drain_account.spec.cy.js b/cypress/e2e/safe-apps/drain_account.spec.cy.js
index 6604ac409e..6f81403565 100644
--- a/cypress/e2e/safe-apps/drain_account.spec.cy.js
+++ b/cypress/e2e/safe-apps/drain_account.spec.cy.js
@@ -13,7 +13,7 @@ let iframeSelector
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
 const signer = walletCredentials.OWNER_4_PRIVATE_KEY
 
-describe('Drain Account tests', () => {
+describe('Drain Account tests', { defaultCommandTimeout: 40000 }, () => {
   before(async () => {
     safeAppSafes = await getSafes(CATEGORIES.safeapps)
   })

From 316b9562fb57b5a0a3a385ea12dc11009e2bf51f Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Fri, 29 Nov 2024 10:39:01 +0100
Subject: [PATCH 32/47] feat: add LI.FI widget (#4459)

* Add LI.FI widget

* Add theme parameter and fix redirect

* Add test coverage

* Add sanction handling and disclaimer

* Add new chip

* Simplify badge

* Remove redundant test

* Put sidebar item behind feature flag

* Fix lint

* Add geo-blocking

* Make sidebar item dependant on feature flag

* Display bridging before checking sanctions

* Fix test

* Add tracking and rename prop
---
 public/images/common/bridge.svg               |   6 +
 src/components/common/Navigate/index.test.tsx |  29 +++++
 src/components/common/Navigate/index.tsx      |  16 +++
 .../sidebar/SidebarNavigation/config.tsx      |   8 +-
 .../sidebar/SidebarNavigation/index.tsx       |   6 +-
 .../SignOrExecuteForm/SignOrExecuteForm.tsx   |   7 +-
 .../wrappers/DisclaimerWrapper/index.test.tsx |  40 +++++++
 .../wrappers/DisclaimerWrapper/index.tsx      |  45 ++++++++
 .../wrappers/FeatureWrapper/index.test.tsx    |  73 ++++++++++++
 .../wrappers/FeatureWrapper/index.tsx         |  35 ++++++
 .../wrappers/SanctionWrapper/index.test.tsx   | 109 ++++++++++++++++++
 .../wrappers/SanctionWrapper/index.tsx        |  52 +++++++++
 src/config/routes.ts                          |   1 +
 .../bridge/components/Bridge/index.tsx        |  28 +++++
 .../components/BridgeWidget/index.test.tsx    |  82 +++++++++++++
 .../bridge/components/BridgeWidget/index.tsx  |  53 +++++++++
 .../bridge/hooks/useIsBridgeFeatureEnabled.ts |   6 +
 src/hooks/useIsGeoblockedFeatureEnabled.ts    |  11 ++
 src/pages/bridge.tsx                          |  17 +++
 .../analytics/__tests__/tx-tracking.test.ts   |  11 ++
 src/services/analytics/events/bridge.ts       |  12 ++
 src/services/analytics/events/transactions.ts |   1 +
 src/services/analytics/tx-tracking.ts         |   8 +-
 src/utils/chains.ts                           |   2 +
 24 files changed, 651 insertions(+), 7 deletions(-)
 create mode 100644 public/images/common/bridge.svg
 create mode 100644 src/components/common/Navigate/index.test.tsx
 create mode 100644 src/components/common/Navigate/index.tsx
 create mode 100644 src/components/wrappers/DisclaimerWrapper/index.test.tsx
 create mode 100644 src/components/wrappers/DisclaimerWrapper/index.tsx
 create mode 100644 src/components/wrappers/FeatureWrapper/index.test.tsx
 create mode 100644 src/components/wrappers/FeatureWrapper/index.tsx
 create mode 100644 src/components/wrappers/SanctionWrapper/index.test.tsx
 create mode 100644 src/components/wrappers/SanctionWrapper/index.tsx
 create mode 100644 src/features/bridge/components/Bridge/index.tsx
 create mode 100644 src/features/bridge/components/BridgeWidget/index.test.tsx
 create mode 100644 src/features/bridge/components/BridgeWidget/index.tsx
 create mode 100644 src/features/bridge/hooks/useIsBridgeFeatureEnabled.ts
 create mode 100644 src/hooks/useIsGeoblockedFeatureEnabled.ts
 create mode 100644 src/pages/bridge.tsx
 create mode 100644 src/services/analytics/events/bridge.ts

diff --git a/public/images/common/bridge.svg b/public/images/common/bridge.svg
new file mode 100644
index 0000000000..db47ec7f69
--- /dev/null
+++ b/public/images/common/bridge.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<rect x="14" y="14" width="8" height="8" rx="2" fill="none"/>
+<rect x="2" y="2" width="8" height="8" rx="2" fill="none"/>
+<path d="M7 14v1a2 2 0 0 0 2 2h1"/>
+<path d="M14 7h1a2 2 0 0 1 2 2v1"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/common/Navigate/index.test.tsx b/src/components/common/Navigate/index.test.tsx
new file mode 100644
index 0000000000..c8b14db7c0
--- /dev/null
+++ b/src/components/common/Navigate/index.test.tsx
@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react'
+import type { NextRouter } from 'next/router'
+
+import { Navigate } from '@/components/common/Navigate'
+
+const mockRouter = {
+  replace: jest.fn(),
+  push: jest.fn(),
+} as jest.MockedObjectDeep<NextRouter>
+
+describe('Navigate', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+
+    jest.spyOn(require('next/navigation'), 'useRouter').mockReturnValue(mockRouter)
+  })
+
+  it('should navigate to the specified route', () => {
+    render(<Navigate to="/test" />)
+
+    expect(mockRouter.push).toHaveBeenCalledWith('/test')
+  })
+
+  it('should replace the current route', () => {
+    render(<Navigate to="/test" replace />)
+
+    expect(mockRouter.replace).toHaveBeenCalledWith('/test')
+  })
+})
diff --git a/src/components/common/Navigate/index.tsx b/src/components/common/Navigate/index.tsx
new file mode 100644
index 0000000000..a5cf8f27eb
--- /dev/null
+++ b/src/components/common/Navigate/index.tsx
@@ -0,0 +1,16 @@
+import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
+
+export function Navigate({ to, replace = false }: { to: string; replace?: boolean }): null {
+  const router = useRouter()
+
+  useEffect(() => {
+    if (replace) {
+      router.replace(to)
+    } else {
+      router.push(to)
+    }
+  }, [replace, router, to])
+
+  return null
+}
diff --git a/src/components/sidebar/SidebarNavigation/config.tsx b/src/components/sidebar/SidebarNavigation/config.tsx
index 70c741ce09..1bc0133d90 100644
--- a/src/components/sidebar/SidebarNavigation/config.tsx
+++ b/src/components/sidebar/SidebarNavigation/config.tsx
@@ -7,6 +7,7 @@ import TransactionIcon from '@/public/images/sidebar/transactions.svg'
 import ABIcon from '@/public/images/sidebar/address-book.svg'
 import AppsIcon from '@/public/images/apps/apps-icon.svg'
 import SettingsIcon from '@/public/images/sidebar/settings.svg'
+import BridgeIcon from '@/public/images/common/bridge.svg'
 import SwapIcon from '@/public/images/common/swap.svg'
 import StakeIcon from '@/public/images/common/stake.svg'
 import { SvgIcon } from '@mui/material'
@@ -31,6 +32,12 @@ export const navItems: NavItem[] = [
     icon: <SvgIcon component={AssetsIcon} inheritViewBox />,
     href: AppRoutes.balances.index,
   },
+  {
+    label: 'Bridge',
+    icon: <SvgIcon component={BridgeIcon} inheritViewBox />,
+    href: AppRoutes.bridge,
+    tag: <Chip label="New" sx={{ backgroundColor: 'secondary.light', color: 'static.main' }} />,
+  },
   {
     label: 'Swap',
     icon: <SvgIcon component={SwapIcon} inheritViewBox />,
@@ -40,7 +47,6 @@ export const navItems: NavItem[] = [
     label: 'Stake',
     icon: <SvgIcon component={StakeIcon} inheritViewBox />,
     href: AppRoutes.stake,
-    tag: <Chip label="New" sx={{ backgroundColor: 'secondary.light', color: 'static.main' }} />,
   },
   {
     label: 'Transactions',
diff --git a/src/components/sidebar/SidebarNavigation/index.tsx b/src/components/sidebar/SidebarNavigation/index.tsx
index a14541f566..d41a50a084 100644
--- a/src/components/sidebar/SidebarNavigation/index.tsx
+++ b/src/components/sidebar/SidebarNavigation/index.tsx
@@ -21,16 +21,18 @@ import { SWAP_EVENTS, SWAP_LABELS } from '@/services/analytics/events/swaps'
 import { GeoblockingContext } from '@/components/common/GeoblockingProvider'
 import { STAKE_EVENTS, STAKE_LABELS } from '@/services/analytics/events/stake'
 import { Tooltip } from '@mui/material'
+import { BRIDGE_EVENTS, BRIDGE_LABELS } from '@/services/analytics/events/bridge'
 
 const getSubdirectory = (pathname: string): string => {
   return pathname.split('/')[1]
 }
 
-const geoBlockedRoutes = [AppRoutes.swap, AppRoutes.stake]
+const geoBlockedRoutes = [AppRoutes.bridge, AppRoutes.swap, AppRoutes.stake]
 
-const undeployedSafeBlockedRoutes = [AppRoutes.swap, AppRoutes.stake, AppRoutes.apps.index]
+const undeployedSafeBlockedRoutes = [AppRoutes.bridge, AppRoutes.swap, AppRoutes.stake, AppRoutes.apps.index]
 
 const customSidebarEvents: { [key: string]: { event: any; label: string } } = {
+  [AppRoutes.bridge]: { event: BRIDGE_EVENTS.OPEN_BRIDGE, label: BRIDGE_LABELS.sidebar },
   [AppRoutes.swap]: { event: SWAP_EVENTS.OPEN_SWAPS, label: SWAP_LABELS.sidebar },
   [AppRoutes.stake]: { event: STAKE_EVENTS.OPEN_STAKE, label: STAKE_LABELS.sidebar },
 }
diff --git a/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx
index 1627da354c..2aec75bbbf 100644
--- a/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx
@@ -61,6 +61,7 @@ const trackTxEvents = (
   isExecuted: boolean,
   isRoleExecution: boolean,
   isProposerCreation: boolean,
+  origin?: string,
 ) => {
   const creationEvent = isRoleExecution
     ? TX_EVENTS.CREATE_VIA_ROLE
@@ -69,7 +70,7 @@ const trackTxEvents = (
       : TX_EVENTS.CREATE
   const executionEvent = isRoleExecution ? TX_EVENTS.EXECUTE_VIA_ROLE : TX_EVENTS.EXECUTE
   const event = isCreation ? creationEvent : isExecuted ? executionEvent : TX_EVENTS.CONFIRM
-  const txType = getTransactionTrackingType(details)
+  const txType = getTransactionTrackingType(details, origin)
   trackEvent({ ...event, label: txType })
 
   // Immediate execution on creation
@@ -130,9 +131,9 @@ export const SignOrExecuteForm = ({
 
       const { data: details } = await trigger({ chainId, txId })
       // Track tx event
-      trackTxEvents(details, !!isCreation, isExecuted, isRoleExecution, isProposerCreation)
+      trackTxEvents(details, !!isCreation, isExecuted, isRoleExecution, isProposerCreation, props.origin)
     },
-    [chainId, isCreation, onSubmit, trigger],
+    [chainId, isCreation, onSubmit, props.origin, trigger],
   )
 
   const onRoleExecutionSubmit = useCallback<typeof onFormSubmit>(
diff --git a/src/components/wrappers/DisclaimerWrapper/index.test.tsx b/src/components/wrappers/DisclaimerWrapper/index.test.tsx
new file mode 100644
index 0000000000..875ac8ccc2
--- /dev/null
+++ b/src/components/wrappers/DisclaimerWrapper/index.test.tsx
@@ -0,0 +1,40 @@
+import { _DisclaimerWrapper, DisclaimerWrapper } from '@/components/wrappers/DisclaimerWrapper'
+import { act, render } from '@/tests/test-utils'
+
+describe('DisclaimerWrapper', () => {
+  it('should render children if consent is given', () => {
+    const { queryByText } = render(
+      <_DisclaimerWrapper localStorageKey="key" widgetName="name" getLocalStorage={() => [true as any, () => {}]}>
+        <>Consent given</>
+      </_DisclaimerWrapper>,
+    )
+
+    expect(queryByText('Consent given')).toBeTruthy()
+  })
+
+  it('should not render children if consent is not given', () => {
+    const { queryByText } = render(
+      <_DisclaimerWrapper localStorageKey="key" widgetName="name" getLocalStorage={() => [false as any, () => {}]}>
+        <>Consent given</>
+      </_DisclaimerWrapper>,
+    )
+
+    expect(queryByText('Consent given')).toBeFalsy()
+  })
+
+  it('should render children if disclaimer is accepted', () => {
+    const { getByText, queryByText } = render(
+      <DisclaimerWrapper localStorageKey="key" widgetName="name">
+        <>Consent given</>
+      </DisclaimerWrapper>,
+    )
+
+    expect(queryByText('Consent given')).toBeFalsy()
+
+    act(() => {
+      getByText('Continue').click()
+    })
+
+    expect(queryByText('Consent given')).toBeTruthy()
+  })
+})
diff --git a/src/components/wrappers/DisclaimerWrapper/index.tsx b/src/components/wrappers/DisclaimerWrapper/index.tsx
new file mode 100644
index 0000000000..12d180b13b
--- /dev/null
+++ b/src/components/wrappers/DisclaimerWrapper/index.tsx
@@ -0,0 +1,45 @@
+import { Stack } from '@mui/material'
+import type { ReactElement } from 'react'
+
+import Disclaimer from '@/components/common/Disclaimer'
+import WidgetDisclaimer from '@/components/common/WidgetDisclaimer'
+import useLocalStorage from '@/services/local-storage/useLocalStorage'
+import madProps from '@/utils/mad-props'
+
+// TODO: Use with swaps/staking
+export function _DisclaimerWrapper({
+  children,
+  localStorageKey,
+  widgetName,
+  getLocalStorage,
+}: {
+  children: ReactElement
+  localStorageKey: string
+  widgetName: string
+  getLocalStorage: typeof useLocalStorage
+}): ReactElement | null {
+  const [hasConsented = false, setHasConsented] = getLocalStorage<boolean>(localStorageKey)
+
+  const onAccept = () => {
+    setHasConsented(true)
+  }
+
+  if (!hasConsented) {
+    return (
+      <Stack direction="column" alignItems="center" justifyContent="center" flex={1}>
+        <Disclaimer
+          title="Note"
+          content={<WidgetDisclaimer widgetName={widgetName} />}
+          onAccept={onAccept}
+          buttonText="Continue"
+        />
+      </Stack>
+    )
+  }
+
+  return children
+}
+
+export const DisclaimerWrapper = madProps(_DisclaimerWrapper, {
+  getLocalStorage: () => useLocalStorage,
+})
diff --git a/src/components/wrappers/FeatureWrapper/index.test.tsx b/src/components/wrappers/FeatureWrapper/index.test.tsx
new file mode 100644
index 0000000000..5cb50165ad
--- /dev/null
+++ b/src/components/wrappers/FeatureWrapper/index.test.tsx
@@ -0,0 +1,73 @@
+import { faker } from '@faker-js/faker'
+import type { NextRouter } from 'next/router'
+
+import { render } from '@/tests/test-utils'
+import { _FeatureWrapper } from '@/components/wrappers/FeatureWrapper'
+import { FEATURES } from '@/utils/chains'
+import type * as useChains from '@/hooks/useChains'
+
+const mockRouter = {
+  replace: jest.fn(),
+} as jest.MockedObjectDeep<NextRouter>
+const mockUseHasFeature: jest.MockedFn<(typeof useChains)['useHasFeature']> = jest.fn()
+
+describe('FeatureWrapper', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+
+    jest.spyOn(require('next/navigation'), 'useRouter').mockReturnValue(mockRouter)
+    jest.spyOn(require('@/hooks/useChains'), 'default').mockReturnValue(mockUseHasFeature)
+  })
+
+  it('should render the children if the feature is enabled', () => {
+    mockUseHasFeature.mockReturnValue(true)
+
+    const { queryByText } = render(
+      <_FeatureWrapper
+        feature={faker.helpers.objectValue(FEATURES)}
+        fallbackRoute="/test"
+        isFeatureEnabled={mockUseHasFeature}
+      >
+        <>Feature enabled</>
+      </_FeatureWrapper>,
+    )
+
+    expect(queryByText('Feature enabled')).toBeTruthy()
+    expect(mockRouter.replace).not.toHaveBeenCalled()
+  })
+
+  it('should replace the current route if the feature is disabled', () => {
+    const route = '/test'
+    mockUseHasFeature.mockReturnValue(false)
+
+    const { queryByText } = render(
+      <_FeatureWrapper
+        feature={faker.helpers.objectValue(FEATURES)}
+        fallbackRoute={route}
+        isFeatureEnabled={mockUseHasFeature}
+      >
+        <>Feature enabled</>
+      </_FeatureWrapper>,
+    )
+
+    expect(queryByText('Feature enabled')).toBeNull()
+    expect(mockRouter.replace).toHaveBeenCalledWith(route)
+  })
+
+  it('should not render anything if the enabled features are loading', () => {
+    mockUseHasFeature.mockReturnValue(undefined)
+
+    const { queryByText } = render(
+      <_FeatureWrapper
+        feature={faker.helpers.objectValue(FEATURES)}
+        fallbackRoute="/test"
+        isFeatureEnabled={mockUseHasFeature}
+      >
+        <>Feature enabled</>
+      </_FeatureWrapper>,
+    )
+
+    expect(queryByText('Feature enabled')).toBeNull()
+    expect(mockRouter.replace).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/components/wrappers/FeatureWrapper/index.tsx b/src/components/wrappers/FeatureWrapper/index.tsx
new file mode 100644
index 0000000000..806a250aea
--- /dev/null
+++ b/src/components/wrappers/FeatureWrapper/index.tsx
@@ -0,0 +1,35 @@
+import type { ReactElement } from 'react'
+
+import { Navigate } from '@/components/common/Navigate'
+import { useHasFeature } from '@/hooks/useChains'
+import madProps from '@/utils/mad-props'
+import type { FEATURES } from '@/utils/chains'
+
+// TODO: Use with swaps/staking
+export function _FeatureWrapper({
+  children,
+  feature,
+  fallbackRoute,
+  isFeatureEnabled,
+}: {
+  children: ReactElement
+  feature: FEATURES
+  fallbackRoute: string
+  isFeatureEnabled: typeof useHasFeature
+}): ReactElement | null {
+  const isEnabled = isFeatureEnabled(feature)
+
+  if (isEnabled === undefined) {
+    return null
+  }
+
+  if (isEnabled === false) {
+    return <Navigate to={fallbackRoute} replace />
+  }
+
+  return children
+}
+
+export const FeatureWrapper = madProps(_FeatureWrapper, {
+  isFeatureEnabled: () => useHasFeature,
+})
diff --git a/src/components/wrappers/SanctionWrapper/index.test.tsx b/src/components/wrappers/SanctionWrapper/index.test.tsx
new file mode 100644
index 0000000000..655334a343
--- /dev/null
+++ b/src/components/wrappers/SanctionWrapper/index.test.tsx
@@ -0,0 +1,109 @@
+import { faker } from '@faker-js/faker'
+
+import { render } from '@/tests/test-utils'
+import { _SanctionWrapper } from '@/components/wrappers/SanctionWrapper'
+import type { useGetIsSanctionedQuery } from '@/store/api/ofac'
+import type useSafeInfo from '@/hooks/useSafeInfo'
+import type useWallet from '@/hooks/wallets/useWallet'
+
+describe('SanctionWrapper', () => {
+  it('should render the children if neither the signer or Safe is sanctioned', () => {
+    const safe = faker.finance.ethereumAddress()
+    const wallet = faker.finance.ethereumAddress()
+
+    const getSafeInfo = (() => {
+      return { safeAddress: safe }
+    }) as typeof useSafeInfo
+
+    const getWallet = (() => {
+      return { address: wallet }
+    }) as typeof useWallet
+
+    const isSanctioned = (() => {
+      return { data: false }
+    }) as typeof useGetIsSanctionedQuery
+
+    const { queryByText } = render(
+      <_SanctionWrapper featureTitle="test" getSafeInfo={getSafeInfo} getWallet={getWallet} isSanctioned={isSanctioned}>
+        <>Not sanctioned</>
+      </_SanctionWrapper>,
+    )
+
+    expect(queryByText('Not sanctioned')).toBeTruthy()
+  })
+
+  it('should render the disclaimer if the signer is sanctioned', () => {
+    const safe = faker.finance.ethereumAddress()
+    const wallet = faker.finance.ethereumAddress()
+
+    const getSafeInfo = (() => {
+      return { safeAddress: safe }
+    }) as typeof useSafeInfo
+
+    const getWallet = (() => {
+      return { address: wallet }
+    }) as typeof useWallet
+
+    const isSanctioned = ((address: string) => {
+      return { data: address === wallet }
+    }) as typeof useGetIsSanctionedQuery
+
+    const { queryByText } = render(
+      <_SanctionWrapper featureTitle="test" getSafeInfo={getSafeInfo} getWallet={getWallet} isSanctioned={isSanctioned}>
+        <>Not sanctioned</>
+      </_SanctionWrapper>,
+    )
+
+    expect(queryByText('Not sanctioned')).toBeFalsy()
+  })
+
+  it('should render the disclaimer if the Safe is sanctioned', () => {
+    const safe = faker.finance.ethereumAddress()
+    const wallet = faker.finance.ethereumAddress()
+
+    const getSafeInfo = (() => {
+      return { safeAddress: safe }
+    }) as typeof useSafeInfo
+
+    const getWallet = (() => {
+      return { address: wallet }
+    }) as typeof useWallet
+
+    const isSanctioned = ((address: string) => {
+      return { data: address === safe }
+    }) as typeof useGetIsSanctionedQuery
+
+    const { queryByText } = render(
+      <_SanctionWrapper featureTitle="test" getSafeInfo={getSafeInfo} getWallet={getWallet} isSanctioned={isSanctioned}>
+        <>Not sanctioned</>
+      </_SanctionWrapper>,
+    )
+
+    expect(queryByText('Blocked address')).toBeTruthy()
+  })
+
+  it('should render if the sanction list is loading', () => {
+    const safe = faker.finance.ethereumAddress()
+    const wallet = faker.finance.ethereumAddress()
+
+    const getSafeInfo = (() => {
+      return { safeAddress: safe }
+    }) as typeof useSafeInfo
+
+    const getWallet = (() => {
+      return { address: wallet }
+    }) as typeof useWallet
+
+    const isSanctioned = (() => {
+      return { data: undefined }
+    }) as typeof useGetIsSanctionedQuery
+
+    const { queryByText } = render(
+      <_SanctionWrapper featureTitle="test" getSafeInfo={getSafeInfo} getWallet={getWallet} isSanctioned={isSanctioned}>
+        <>Not sanctioned</>
+      </_SanctionWrapper>,
+    )
+
+    expect(queryByText('Not sanctioned')).toBeTruthy()
+  })
+})
diff --git a/src/components/wrappers/SanctionWrapper/index.tsx b/src/components/wrappers/SanctionWrapper/index.tsx
new file mode 100644
index 0000000000..12465eed4b
--- /dev/null
+++ b/src/components/wrappers/SanctionWrapper/index.tsx
@@ -0,0 +1,52 @@
+import { Stack } from '@mui/material'
+import { skipToken } from '@reduxjs/toolkit/query'
+import type { ReactElement } from 'react'
+
+import BlockedAddress from '@/components/common/BlockedAddress'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import useWallet from '@/hooks/wallets/useWallet'
+import { useGetIsSanctionedQuery } from '@/store/api/ofac'
+import { getKeyWithTrueValue } from '@/utils/helpers'
+import madProps from '@/utils/mad-props'
+
+// TODO: Use with swaps/staking
+export function _SanctionWrapper({
+  children,
+  featureTitle,
+  getSafeInfo,
+  getWallet,
+  isSanctioned,
+}: {
+  children: ReactElement
+  featureTitle: string
+  getSafeInfo: typeof useSafeInfo
+  getWallet: typeof useWallet
+  isSanctioned: typeof useGetIsSanctionedQuery
+}): ReactElement | null {
+  const { safeAddress } = getSafeInfo()
+  const wallet = getWallet()
+
+  const { data: isSafeAddressBlocked = false } = isSanctioned(safeAddress || skipToken)
+  const { data: isWalletAddressBlocked = false } = isSanctioned(wallet?.address || skipToken)
+
+  const blockedAddress = getKeyWithTrueValue({
+    [safeAddress]: !!isSafeAddressBlocked,
+    [wallet?.address || '']: !!isWalletAddressBlocked,
+  })
+
+  if (blockedAddress) {
+    return (
+      <Stack direction="column" alignItems="center" justifyContent="center" flex={1}>
+        <BlockedAddress address={blockedAddress} featureTitle={featureTitle} />
+      </Stack>
+    )
+  }
+
+  return children
+}
+
+export const SanctionWrapper = madProps(_SanctionWrapper, {
+  getWallet: () => useWallet,
+  getSafeInfo: () => useSafeInfo,
+  isSanctioned: () => useGetIsSanctionedQuery,
+})
diff --git a/src/config/routes.ts b/src/config/routes.ts
index 8f65fa5bb7..9002355243 100644
--- a/src/config/routes.ts
+++ b/src/config/routes.ts
@@ -11,6 +11,7 @@ export const AppRoutes = {
   imprint: '/imprint',
   home: '/home',
   cookie: '/cookie',
+  bridge: '/bridge',
   addressBook: '/address-book',
   addOwner: '/addOwner',
   _offline: '/_offline',
diff --git a/src/features/bridge/components/Bridge/index.tsx b/src/features/bridge/components/Bridge/index.tsx
new file mode 100644
index 0000000000..3d503b3cfd
--- /dev/null
+++ b/src/features/bridge/components/Bridge/index.tsx
@@ -0,0 +1,28 @@
+import dynamic from 'next/dynamic'
+
+import { AppRoutes } from '@/config/routes'
+import { FEATURES } from '@/utils/chains'
+import { FeatureWrapper } from '@/components/wrappers/FeatureWrapper'
+import { SanctionWrapper } from '@/components/wrappers/SanctionWrapper'
+import { DisclaimerWrapper } from '@/components/wrappers/DisclaimerWrapper'
+
+const LOCAL_STORAGE_CONSENT_KEY = 'bridgeConsent'
+
+const BridgeWidget = dynamic(
+  () => import('@/features/bridge/components/BridgeWidget').then((module) => module.BridgeWidget),
+  {
+    ssr: false,
+  },
+)
+
+export function Bridge() {
+  return (
+    <FeatureWrapper feature={FEATURES.BRIDGE} fallbackRoute={AppRoutes.home}>
+      <SanctionWrapper featureTitle="bridge feature with LI.FI">
+        <DisclaimerWrapper localStorageKey={LOCAL_STORAGE_CONSENT_KEY} widgetName="Bridging Widget by LI.FI">
+          <BridgeWidget />
+        </DisclaimerWrapper>
+      </SanctionWrapper>
+    </FeatureWrapper>
+  )
+}
diff --git a/src/features/bridge/components/BridgeWidget/index.test.tsx b/src/features/bridge/components/BridgeWidget/index.test.tsx
new file mode 100644
index 0000000000..09d19c1361
--- /dev/null
+++ b/src/features/bridge/components/BridgeWidget/index.test.tsx
@@ -0,0 +1,82 @@
+import { faker } from '@faker-js/faker'
+
+import { _getAppData } from '@/features/bridge/components/BridgeWidget'
+import { chainBuilder } from '@/tests/builders/chains'
+import { FEATURES } from '@/utils/chains'
+
+describe('BridgeWidget', () => {
+  describe('getAppData', () => {
+    it('should return the correct SafeAppDataWithPermissions', () => {
+      const result = _getAppData(false)
+
+      expect(result).toStrictEqual({
+        accessControl: {
+          type: 'NO_RESTRICTIONS',
+        },
+        chainIds: [],
+        description: '',
+        developerWebsite: '',
+        features: [],
+        iconUrl: '/images/common/bridge.svg',
+        id: expect.any(Number),
+        name: 'Bridge',
+        safeAppsPermissions: [],
+        socialProfiles: [],
+        tags: [],
+        url: 'https://iframe.jumper.exchange/?theme=light',
+      })
+    })
+
+    it('should return the correct SafeAppDataWithPermissions with dark mode', () => {
+      const result = _getAppData(true)
+
+      expect(result).toStrictEqual({
+        accessControl: {
+          type: 'NO_RESTRICTIONS',
+        },
+        chainIds: [],
+        description: '',
+        developerWebsite: '',
+        features: [],
+        iconUrl: '/images/common/bridge.svg',
+        id: expect.any(Number),
+        name: 'Bridge',
+        safeAppsPermissions: [],
+        socialProfiles: [],
+        tags: [],
+        url: 'https://iframe.jumper.exchange/?theme=dark',
+      })
+    })
+
+    it('should return the correct SafeAppDataWithPermissions with chains', () => {
+      const chains = Array.from({ length: faker.number.int({ min: 1, max: 10 }) }, (_, i) => {
+        return (
+          chainBuilder()
+            // @ts-expect-error
+            .with({ features: i % 2 ? [FEATURES.BRIDGE] : [] })
+            .build()
+        )
+      })
+
+      const result = _getAppData(false, chains)
+
+      expect(result).toStrictEqual({
+        accessControl: {
+          type: 'NO_RESTRICTIONS',
+        },
+        // @ts-expect-error
+        chainIds: chains.filter((chain) => chain.features.includes(FEATURES.BRIDGE)).map((chain) => chain.chainId),
+        description: '',
+        developerWebsite: '',
+        features: [],
+        iconUrl: '/images/common/bridge.svg',
+        id: expect.any(Number),
+        name: 'Bridge',
+        safeAppsPermissions: [],
+        socialProfiles: [],
+        tags: [],
+        url: 'https://iframe.jumper.exchange/?theme=light',
+      })
+    })
+  })
+})
diff --git a/src/features/bridge/components/BridgeWidget/index.tsx b/src/features/bridge/components/BridgeWidget/index.tsx
new file mode 100644
index 0000000000..cf36700fdf
--- /dev/null
+++ b/src/features/bridge/components/BridgeWidget/index.tsx
@@ -0,0 +1,53 @@
+import { useMemo } from 'react'
+import type { ReactElement } from 'react'
+
+import AppFrame from '@/components/safe-apps/AppFrame'
+import { getEmptySafeApp } from '@/components/safe-apps/utils'
+import useChains from '@/hooks/useChains'
+import { FEATURES, hasFeature } from '@/utils/chains'
+import { useDarkMode } from '@/hooks/useDarkMode'
+import type { SafeAppDataWithPermissions } from '@/components/safe-apps/types'
+import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+
+export const BRIDGE_WIDGET_URL = 'https://iframe.jumper.exchange'
+
+export function BridgeWidget(): ReactElement {
+  const isDarkMode = useDarkMode()
+  const { configs } = useChains()
+
+  const appData = useMemo((): SafeAppDataWithPermissions => {
+    return _getAppData(isDarkMode, configs)
+  }, [configs, isDarkMode])
+
+  return (
+    <AppFrame
+      appUrl={appData.url}
+      allowedFeaturesList="clipboard-read; clipboard-write"
+      safeAppFromManifest={appData}
+      isNativeEmbed
+    />
+  )
+}
+
+export function _getAppData(isDarkMode: boolean, chains?: Array<ChainInfo>): SafeAppDataWithPermissions {
+  const theme = isDarkMode ? 'dark' : 'light'
+  return {
+    ...getEmptySafeApp(),
+    name: 'Bridge',
+    iconUrl: '/images/common/bridge.svg',
+    chainIds: getChainIds(chains),
+    url: `${BRIDGE_WIDGET_URL}/?theme=${theme}`,
+  }
+}
+
+function getChainIds(chains?: Array<ChainInfo>): Array<string> {
+  if (!chains) {
+    return []
+  }
+  return chains.reduce<Array<string>>((acc, cur) => {
+    if (hasFeature(cur, FEATURES.BRIDGE)) {
+      acc.push(cur.chainId)
+    }
+    return acc
+  }, [])
+}
diff --git a/src/features/bridge/hooks/useIsBridgeFeatureEnabled.ts b/src/features/bridge/hooks/useIsBridgeFeatureEnabled.ts
new file mode 100644
index 0000000000..2f3a718483
--- /dev/null
+++ b/src/features/bridge/hooks/useIsBridgeFeatureEnabled.ts
@@ -0,0 +1,6 @@
+import { useIsGeoblockedFeatureEnabled } from '@/hooks/useIsGeoblockedFeatureEnabled'
+import { FEATURES } from '@/utils/chains'
+
+export function useIsBridgeFeatureEnabled() {
+  return useIsGeoblockedFeatureEnabled(FEATURES.BRIDGE)
+}
diff --git a/src/hooks/useIsGeoblockedFeatureEnabled.ts b/src/hooks/useIsGeoblockedFeatureEnabled.ts
new file mode 100644
index 0000000000..ce97243684
--- /dev/null
+++ b/src/hooks/useIsGeoblockedFeatureEnabled.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+
+import { GeoblockingContext } from '@/components/common/GeoblockingProvider'
+import { useHasFeature } from '@/hooks/useChains'
+import type { FEATURES } from '@/utils/chains'
+
+// TODO: Refactor useIsStakingFeatureEnabled/useIsStakingFeatureEnabled to use this
+export function useIsGeoblockedFeatureEnabled(feature: FEATURES): boolean | undefined {
+  const isBlockedCountry = useContext(GeoblockingContext)
+  return useHasFeature(feature) && !isBlockedCountry
+}
diff --git a/src/pages/bridge.tsx b/src/pages/bridge.tsx
new file mode 100644
index 0000000000..34a04320ce
--- /dev/null
+++ b/src/pages/bridge.tsx
@@ -0,0 +1,17 @@
+import Head from 'next/head'
+import type { NextPage } from 'next'
+
+import { Bridge } from '@/features/bridge/components/Bridge'
+
+const BridgePage: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <title>{'Safe{Wallet} – Bridge'}</title>
+      </Head>
+      <Bridge />
+    </>
+  )
+}
+
+export default BridgePage
diff --git a/src/services/analytics/__tests__/tx-tracking.test.ts b/src/services/analytics/__tests__/tx-tracking.test.ts
index 90e5d6492e..063638f7a2 100644
--- a/src/services/analytics/__tests__/tx-tracking.test.ts
+++ b/src/services/analytics/__tests__/tx-tracking.test.ts
@@ -174,4 +174,15 @@ describe('getTransactionTrackingType', () => {
     const txType = getTransactionTrackingType(details)
     expect(txType).toEqual(TX_TYPES.batch)
   })
+
+  it('should return native_bridge for native bridge transactions', () => {
+    const details = {
+      txInfo: {
+        type: TransactionInfoType.CUSTOM,
+      },
+    } as unknown as TransactionDetails
+    const origin = '{"url":"https://iframe.jumper.exchange","name":"Bridge"}'
+    const txType = getTransactionTrackingType(details, origin)
+    expect(txType).toEqual(TX_TYPES.native_bridge)
+  })
 })
diff --git a/src/services/analytics/events/bridge.ts b/src/services/analytics/events/bridge.ts
new file mode 100644
index 0000000000..74589c50f6
--- /dev/null
+++ b/src/services/analytics/events/bridge.ts
@@ -0,0 +1,12 @@
+const BRIDGE_CATEGORY = 'bridge'
+
+export const BRIDGE_EVENTS = {
+  OPEN_BRIDGE: {
+    action: 'Open bridge',
+    category: BRIDGE_CATEGORY,
+  },
+}
+
+export enum BRIDGE_LABELS {
+  sidebar = 'sidebar',
+}
diff --git a/src/services/analytics/events/transactions.ts b/src/services/analytics/events/transactions.ts
index 839a8057a0..e2a0c12425 100644
--- a/src/services/analytics/events/transactions.ts
+++ b/src/services/analytics/events/transactions.ts
@@ -21,6 +21,7 @@ export enum TX_TYPES {
   typed_message = 'typed_message',
   walletconnect = 'walletconnect',
   custom = 'custom',
+  native_bridge = 'native_bridge',
   native_swap = 'native_swap',
   bulk_execute = 'bulk_execute',
 
diff --git a/src/services/analytics/tx-tracking.ts b/src/services/analytics/tx-tracking.ts
index b1397a6649..e97da67293 100644
--- a/src/services/analytics/tx-tracking.ts
+++ b/src/services/analytics/tx-tracking.ts
@@ -10,14 +10,20 @@ import {
   isSwapOrderTxInfo,
   isAnyStakingTxInfo,
 } from '@/utils/transaction-guards'
+import { BRIDGE_WIDGET_URL } from '@/features/bridge/components/BridgeWidget'
 
-export const getTransactionTrackingType = (details: TransactionDetails | undefined): string => {
+export const getTransactionTrackingType = (details: TransactionDetails | undefined, origin?: string): string => {
   if (!details) {
     return TX_TYPES.custom
   }
 
   const { txInfo } = details
 
+  const isNativeBridge = origin?.includes(BRIDGE_WIDGET_URL)
+  if (isNativeBridge) {
+    return TX_TYPES.native_bridge
+  }
+
   if (isTransferTxInfo(txInfo)) {
     if (isERC721Transfer(txInfo.transferInfo)) {
       return TX_TYPES.transfer_nft
diff --git a/src/utils/chains.ts b/src/utils/chains.ts
index 329aaee6a7..d1aa5bcf27 100644
--- a/src/utils/chains.ts
+++ b/src/utils/chains.ts
@@ -39,6 +39,7 @@ export enum FEATURES {
   MULTI_CHAIN_SAFE_ADD_NETWORK = 'MULTI_CHAIN_SAFE_ADD_NETWORK',
   PROPOSERS = 'PROPOSERS',
   TARGETED_SURVEY = 'TARGETED_SURVEY',
+  BRIDGE = 'BRIDGE',
 }
 
 export const FeatureRoutes = {
@@ -47,6 +48,7 @@ export const FeatureRoutes = {
   [AppRoutes.stake]: FEATURES.STAKING,
   [AppRoutes.balances.nfts]: FEATURES.ERC721,
   [AppRoutes.settings.notifications]: FEATURES.PUSH_NOTIFICATIONS,
+  [AppRoutes.bridge]: FEATURES.BRIDGE,
 }
 
 export const hasFeature = (chain: ChainInfo, feature: FEATURES): boolean => {

From 7dcd9530be4e31dafdd7cc4b114c6b4440544700 Mon Sep 17 00:00:00 2001
From: Tim <4171783+tmjssz@users.noreply.github.com>
Date: Fri, 29 Nov 2024 10:56:33 +0100
Subject: [PATCH 33/47] feat: zkEmail fake door (#4578)

- add a new recovery option for zkEmail
- proceeding with this new option selected will show a modal with some info as fake door
---
 public/images/common/zkemail-logo.svg         |   7 +
 .../ChooseRecoveryMethodModal.tsx             | 371 ++++++++++--------
 .../RecoverySettings/ZkEmailFakeDoorModal.tsx |  33 ++
 3 files changed, 249 insertions(+), 162 deletions(-)
 create mode 100644 public/images/common/zkemail-logo.svg
 create mode 100644 src/features/recovery/components/RecoverySettings/ZkEmailFakeDoorModal.tsx

diff --git a/public/images/common/zkemail-logo.svg b/public/images/common/zkemail-logo.svg
new file mode 100644
index 0000000000..8b30a8693e
--- /dev/null
+++ b/public/images/common/zkemail-logo.svg
@@ -0,0 +1,7 @@
+<svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="160" cy="160" r="160" fill="black" />
+
+    <path fill-rule="evenodd" clip-rule="evenodd" fill="white" transform="translate(-44.68594, -43.68594) scale(17, 17)"
+        d="M4.89087 9.9569C3.76033 11.0875 3.76033 12.9205 4.89088 14.0511L9.99561 19.156C11.1261 20.2865 12.9591 20.2865 14.0897 19.156L19.1951 14.0504C20.3256 12.9198 20.3256 11.0868 19.1951 9.95624L14.0903 4.85135C12.9598 3.72077 11.1268 3.72077 9.99627 4.85135L4.89087 9.9569ZM8.05263 10.4862C7.85046 11.0216 7.74937 11.5945 7.74937 12.2048H8.53561C8.53561 11.7031 8.61611 11.2332 8.7771 10.7951C8.93809 10.3571 9.16648 9.97141 9.46226 9.63818C9.75804 9.30496 10.11 9.04474 10.5181 8.85753C10.9299 8.67032 11.3867 8.57672 11.8884 8.57672C12.3901 8.57672 12.86 8.67032 13.298 8.85753C13.7361 9.04848 14.1198 9.31057 14.4493 9.6438C14.7825 9.97703 15.0427 10.3627 15.2299 10.8007C15.4171 11.2388 15.5107 11.7068 15.5107 12.2048C15.5107 12.7028 15.4171 13.1689 15.2299 13.6032C15.0427 14.0413 14.7825 14.4269 14.4493 14.7602C14.1198 15.0934 13.7361 15.3536 13.298 15.5408C12.86 15.7318 12.3901 15.8272 11.8884 15.8272C11.6188 15.8272 11.3436 15.7935 11.0628 15.7261C10.7858 15.6588 10.5518 15.5539 10.3608 15.4116C10.1736 15.2694 10.08 15.0859 10.08 14.8613C10.08 14.6853 10.1399 14.5262 10.2597 14.3839C10.3795 14.2416 10.5293 14.1705 10.709 14.1705H13.9102L14.0056 13.5358H13.3654C13.5938 13.3861 13.7754 13.1783 13.9102 12.9124C14.0487 12.6466 14.118 12.3527 14.118 12.0307C14.118 11.6226 14.0169 11.2482 13.8147 10.9074C13.6163 10.5705 13.3486 10.3009 13.0116 10.0987C12.6746 9.90027 12.3002 9.80105 11.8884 9.80105C11.4765 9.80105 11.1003 9.90027 10.7596 10.0987C10.4226 10.3009 10.153 10.5705 9.95085 10.9074C9.75242 11.2482 9.6532 11.6226 9.6532 12.0307C9.6532 12.3602 9.72247 12.6503 9.861 12.9012C10.0033 13.1521 10.1923 13.3542 10.4282 13.5077C10.2148 13.5265 10.022 13.6051 9.84976 13.7436C9.67754 13.8822 9.54088 14.0544 9.43979 14.2603C9.34245 14.47 9.29378 14.6834 9.29378 14.9006C9.29378 15.1739 9.36866 15.4154 9.51842 15.6251C9.67192 15.8385 9.8741 16.0182 10.1249 16.1642C10.3795 16.3102 10.6603 16.4207 10.9674 16.4956C11.2744 16.5742 11.5814 16.6135 11.8884 16.6135C12.4949 16.6135 13.064 16.4993 13.5957 16.2709C14.1273 16.0463 14.5953 15.7318 14.9997 15.3274C15.404 14.9268 15.7204 14.4588 15.9488 13.9233C16.1809 13.3917 16.297 12.8188 16.297 12.2048C16.297 11.5945 16.1828 11.0216 15.9544 10.4862C15.726 9.95456 15.4096 9.48655 15.0053 9.08218C14.6009 8.67781 14.1311 8.36143 13.5957 8.13304C13.064 7.90465 12.4949 7.79045 11.8884 7.79045C11.2819 7.79045 10.7259 7.90465 10.2204 8.13304C9.71498 8.36143 9.27693 8.67781 8.90627 9.08218C8.53936 9.48655 8.25481 9.95456 8.05263 10.4862ZM10.5293 12.845C10.3683 12.6316 10.2878 12.377 10.2878 12.0812C10.2878 11.7929 10.359 11.5271 10.5012 11.2837C10.6435 11.0404 10.8344 10.8457 11.0741 10.6996C11.3174 10.5536 11.5889 10.4806 11.8884 10.4806C12.1842 10.4806 12.4519 10.5518 12.6915 10.694C12.9348 10.8401 13.1277 11.0329 13.2699 11.2725C13.4122 11.5159 13.4833 11.7854 13.4833 12.0812C13.4833 12.3957 13.4103 12.6597 13.2643 12.8731C13.122 13.0865 12.9348 13.2457 12.7027 13.3505C12.4706 13.4591 12.2216 13.5134 11.9558 13.5134C11.6787 13.5134 11.411 13.4553 11.1527 13.3393C10.8981 13.2232 10.6903 13.0585 10.5293 12.845Z"
+    />
+</svg>
\ No newline at end of file
diff --git a/src/features/recovery/components/RecoverySettings/ChooseRecoveryMethodModal.tsx b/src/features/recovery/components/RecoverySettings/ChooseRecoveryMethodModal.tsx
index e3241d200b..7f6b1ec2ca 100644
--- a/src/features/recovery/components/RecoverySettings/ChooseRecoveryMethodModal.tsx
+++ b/src/features/recovery/components/RecoverySettings/ChooseRecoveryMethodModal.tsx
@@ -2,7 +2,7 @@ import Track from '@/components/common/Track'
 import { RECOVERY_FEEDBACK_FORM, HelpCenterArticle, SafeAppsTag } from '@/config/constants'
 import { trackEvent } from '@/services/analytics'
 import { RECOVERY_EVENTS } from '@/services/analytics/events/recovery'
-import { type ChangeEvent, type ReactElement, useContext } from 'react'
+import { type ChangeEvent, type ReactElement, useContext, useState, useCallback } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import Link from 'next/link'
 import {
@@ -26,6 +26,7 @@ import { UpsertRecoveryFlow } from '@/components/tx-flow/flows'
 import ExternalLink from '@/components/common/ExternalLink'
 import RecoveryCustomIcon from '@/public/images/common/recovery_custom.svg'
 import RecoverySygnumIcon from '@/public/images/common/recovery_sygnum.svg'
+import RecoveryZkEmailIcon from '@/public/images/common/zkemail-logo.svg'
 import { TxModalContext } from '@/components/tx-flow'
 import css from './styles.module.css'
 import CheckIcon from '@/public/images/common/check.svg'
@@ -33,10 +34,12 @@ import { AppRoutes } from '@/config/routes'
 import { useSearchParams } from 'next/navigation'
 import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 import TxStatusChip from '@/components/transactions/TxStatusChip'
+import { ZkEmailFakeDoorModal } from './ZkEmailFakeDoorModal'
 
 enum RecoveryMethod {
   SelfCustody = 'SelfCustody',
   Sygnum = 'Sygnum',
+  ZkEmail = 'ZkEmail',
 }
 
 enum FieldNames {
@@ -49,6 +52,7 @@ type Fields = {
 
 export function ChooseRecoveryMethodModal({ open, onClose }: { open: boolean; onClose: () => void }): ReactElement {
   const { setTxFlow } = useContext(TxModalContext)
+  const [openZkEmailModal, setOpenZkEmailModal] = useState(false)
   const querySafe = useSearchParams().get('safe')
   const [matchingApps] = useRemoteSafeApps(SafeAppsTag.RECOVERY_SYGNUM)
   const hasSygnumApp = Boolean(matchingApps?.length)
@@ -67,171 +71,214 @@ export function ChooseRecoveryMethodModal({ open, onClose }: { open: boolean; on
     trackEvent({ ...RECOVERY_EVENTS.SELECT_RECOVERY_METHOD, label: e.target.value })
   }
 
+  const handleSetupClick = useCallback(() => {
+    switch (currentType) {
+      case RecoveryMethod.SelfCustody:
+        setTxFlow(<UpsertRecoveryFlow />)
+        break
+      case RecoveryMethod.ZkEmail:
+        setOpenZkEmailModal(true)
+        break
+    }
+    onClose()
+  }, [onClose, setTxFlow, currentType])
+
   return (
-    <Dialog open={open} onClose={onClose} className={css.dialog}>
-      <DialogContent dividers sx={{ py: 2, px: 3 }}>
-        <Typography
-          variant="h2"
-          sx={{
-            mb: 1,
-          }}
-        >
-          Set up Account Recovery
-        </Typography>
-        <IconButton onClick={onClose} className={css.closeIcon}>
-          <CloseIcon />
-        </IconButton>
-        <DialogContentText color="text.primary" mb={4}>
-          Ensure that you never lose access to your funds by selecting one of the options below. Want to know how
-          recovery works? Learn more in our{' '}
-          <Track {...RECOVERY_EVENTS.LEARN_MORE} label="method-modal">
-            <ExternalLink href={HelpCenterArticle.RECOVERY}>Help Center</ExternalLink>
-          </Track>
-        </DialogContentText>
-        <FormControl>
-          <Controller
-            control={control}
-            name={FieldNames.recoveryMethod}
-            render={({ field }) => (
-              <RadioGroup
-                {...field}
-                className={css.buttonGroup}
-                onChange={(e) => {
-                  field.onChange(e)
-                  trackOptionChoice(e)
-                }}
-              >
-                <FormControlLabel
-                  value={RecoveryMethod.SelfCustody}
-                  control={<Radio />}
-                  label={
-                    <div className={css.method}>
-                      <RecoveryCustomIcon style={{ display: 'block' }} />
-                      <Typography
-                        sx={{
-                          fontWeight: 'bold',
-                          mb: 1,
-                          mt: 2,
-                        }}
-                      >
-                        Self Custodial Recovery
-                      </Typography>
-                      <List className={css.checkList}>
-                        <ListItem>
-                          <CheckIcon />
-                          Fully own your recovery setup
-                        </ListItem>
-                        <ListItem>
-                          <CheckIcon />
-                          Nominate anyone including friends, family or yourself
-                        </ListItem>
-                        <ListItem>
-                          <CheckIcon />
-                          No additional cost and ensured privacy
-                        </ListItem>
-                      </List>
-                    </div>
-                  }
-                />
-
-                <FormControlLabel
-                  value={RecoveryMethod.Sygnum}
-                  control={<Radio />}
-                  disabled={!hasSygnumApp}
-                  label={
-                    <div className={css.method}>
-                      <RecoverySygnumIcon style={{ display: 'block' }} />
-
-                      <Typography
-                        sx={{
-                          fontWeight: 'bold',
-                          mb: 1,
-                          mt: 2,
-                        }}
-                      >
-                        Sygnum Web3 Recovery
-                      </Typography>
-                      <List className={css.checkList}>
-                        <ListItem>
-                          <CheckIcon />
-                          Your key. Your crypto. Your recovery
-                        </ListItem>
-                        <ListItem>
-                          <CheckIcon />
-                          Account recovery by your identity
-                        </ListItem>
-                        <ListItem>
-                          <CheckIcon />
-                          Regulated Swiss digital asset bank
-                        </ListItem>
-                      </List>
-
-                      {!hasSygnumApp && (
-                        <Box
+    <>
+      <Dialog open={open} onClose={onClose} className={css.dialog}>
+        <DialogContent dividers sx={{ py: 2, px: 3 }}>
+          <Typography
+            variant="h2"
+            sx={{
+              mb: 1,
+            }}
+          >
+            Set up Account Recovery
+          </Typography>
+          <IconButton onClick={onClose} className={css.closeIcon}>
+            <CloseIcon />
+          </IconButton>
+          <DialogContentText color="text.primary" mb={4}>
+            Ensure that you never lose access to your funds by selecting one of the options below. Want to know how
+            recovery works? Learn more in our{' '}
+            <Track {...RECOVERY_EVENTS.LEARN_MORE} label="method-modal">
+              <ExternalLink href={HelpCenterArticle.RECOVERY}>Help Center</ExternalLink>
+            </Track>
+          </DialogContentText>
+          <FormControl>
+            <Controller
+              control={control}
+              name={FieldNames.recoveryMethod}
+              render={({ field }) => (
+                <RadioGroup
+                  {...field}
+                  className={css.buttonGroup}
+                  onChange={(e) => {
+                    field.onChange(e)
+                    trackOptionChoice(e)
+                  }}
+                >
+                  <FormControlLabel
+                    value={RecoveryMethod.SelfCustody}
+                    control={<Radio />}
+                    label={
+                      <div className={css.method}>
+                        <RecoveryCustomIcon style={{ display: 'block' }} />
+                        <Typography
                           sx={{
-                            mt: 2.5,
-                            oopacity: 0.75,
+                            fontWeight: 'bold',
+                            mb: 1,
+                            mt: 2,
                           }}
                         >
-                          <TxStatusChip color="primary">Not available on this network</TxStatusChip>
-                        </Box>
-                      )}
-                    </div>
-                  }
-                />
-              </RadioGroup>
-            )}
-          />
-        </FormControl>
-        <Typography
-          sx={{
-            color: 'primary.light',
-            mt: '12px',
-          }}
-        >
-          Unhappy with the provided options?{' '}
-          <Track {...RECOVERY_EVENTS.GIVE_US_FEEDBACK} label="method-modal">
-            <ExternalLink href={RECOVERY_FEEDBACK_FORM}>Give us feedback</ExternalLink>
-          </Track>
-        </Typography>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            mt: 3,
-          }}
-        >
-          {currentType === RecoveryMethod.SelfCustody ? (
-            <Track {...RECOVERY_EVENTS.CONTINUE_WITH_RECOVERY} label={currentType}>
-              <Button
-                data-testid="setup-btn"
-                variant="contained"
-                onClick={() => {
-                  setTxFlow(<UpsertRecoveryFlow />)
-                  onClose()
-                }}
-              >
-                Set up
-              </Button>
-            </Track>
-          ) : (
-            <Track {...RECOVERY_EVENTS.SYGNUM_APP} label={currentType}>
-              <Link
-                href={{
-                  pathname: AppRoutes.apps.open,
-                  query: {
-                    safe: querySafe,
-                    appUrl: matchingApps?.[0]?.url,
-                  },
-                }}
-                passHref
-              >
-                <Button variant="contained">Open App</Button>
-              </Link>
+                          Self Custodial Recovery
+                        </Typography>
+                        <List className={css.checkList}>
+                          <ListItem>
+                            <CheckIcon />
+                            Fully own your recovery setup
+                          </ListItem>
+                          <ListItem>
+                            <CheckIcon />
+                            Nominate anyone including friends, family or yourself
+                          </ListItem>
+                          <ListItem>
+                            <CheckIcon />
+                            No additional cost and ensured privacy
+                          </ListItem>
+                        </List>
+                      </div>
+                    }
+                  />
+
+                  <FormControlLabel
+                    value={RecoveryMethod.Sygnum}
+                    control={<Radio />}
+                    disabled={!hasSygnumApp}
+                    label={
+                      <div className={css.method}>
+                        <RecoverySygnumIcon style={{ display: 'block' }} />
+
+                        <Typography
+                          sx={{
+                            fontWeight: 'bold',
+                            mb: 1,
+                            mt: 2,
+                          }}
+                        >
+                          Sygnum Web3 Recovery
+                        </Typography>
+                        <List className={css.checkList}>
+                          <ListItem>
+                            <CheckIcon />
+                            Your key. Your crypto. Your recovery
+                          </ListItem>
+                          <ListItem>
+                            <CheckIcon />
+                            Account recovery by your identity
+                          </ListItem>
+                          <ListItem>
+                            <CheckIcon />
+                            Regulated Swiss digital asset bank
+                          </ListItem>
+                        </List>
+
+                        {!hasSygnumApp && (
+                          <Box
+                            sx={{
+                              mt: 2.5,
+                              oopacity: 0.75,
+                            }}
+                          >
+                            <TxStatusChip color="primary">Not available on this network</TxStatusChip>
+                          </Box>
+                        )}
+                      </div>
+                    }
+                  />
+
+                  <FormControlLabel
+                    value={RecoveryMethod.ZkEmail}
+                    control={<Radio />}
+                    label={
+                      <div className={css.method}>
+                        <RecoveryZkEmailIcon style={{ display: 'block' }} width={45} height={45} />
+
+                        <Typography
+                          sx={{
+                            fontWeight: 'bold',
+                            mb: 1,
+                            mt: 2,
+                          }}
+                        >
+                          Email Recovery
+                        </Typography>
+                        <List className={css.checkList}>
+                          <ListItem>
+                            <CheckIcon />
+                            Free: no fees, no gas cost
+                          </ListItem>
+                          <ListItem>
+                            <CheckIcon />
+                            Easy to use: just respond to an email to recover Safe
+                          </ListItem>
+                          <ListItem>
+                            <CheckIcon />
+                            Anonymous: thanks to zero knowledge tech the email is never exposed
+                          </ListItem>
+                        </List>
+                      </div>
+                    }
+                  />
+                </RadioGroup>
+              )}
+            />
+          </FormControl>
+          <Typography
+            sx={{
+              color: 'primary.light',
+              mt: '12px',
+            }}
+          >
+            Unhappy with the provided options?{' '}
+            <Track {...RECOVERY_EVENTS.GIVE_US_FEEDBACK} label="method-modal">
+              <ExternalLink href={RECOVERY_FEEDBACK_FORM}>Give us feedback</ExternalLink>
             </Track>
-          )}
-        </Box>
-      </DialogContent>
-    </Dialog>
+          </Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              mt: 3,
+            }}
+          >
+            {[RecoveryMethod.SelfCustody, RecoveryMethod.ZkEmail].includes(currentType) ? (
+              <Track {...RECOVERY_EVENTS.CONTINUE_WITH_RECOVERY} label={currentType}>
+                <Button data-testid="setup-btn" variant="contained" onClick={handleSetupClick}>
+                  Set up
+                </Button>
+              </Track>
+            ) : (
+              <Track {...RECOVERY_EVENTS.SYGNUM_APP} label={currentType}>
+                <Link
+                  href={{
+                    pathname: AppRoutes.apps.open,
+                    query: {
+                      safe: querySafe,
+                      appUrl: matchingApps?.[0]?.url,
+                    },
+                  }}
+                  passHref
+                >
+                  <Button variant="contained">Open App</Button>
+                </Link>
+              </Track>
+            )}
+          </Box>
+        </DialogContent>
+      </Dialog>
+
+      <ZkEmailFakeDoorModal open={openZkEmailModal} onClose={() => setOpenZkEmailModal(false)} />
+    </>
   )
 }
diff --git a/src/features/recovery/components/RecoverySettings/ZkEmailFakeDoorModal.tsx b/src/features/recovery/components/RecoverySettings/ZkEmailFakeDoorModal.tsx
new file mode 100644
index 0000000000..63a2758dfe
--- /dev/null
+++ b/src/features/recovery/components/RecoverySettings/ZkEmailFakeDoorModal.tsx
@@ -0,0 +1,33 @@
+import { type ReactElement } from 'react'
+import { Dialog, DialogContent, IconButton, Stack, Typography } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+
+import RecoveryZkEmailIcon from '@/public/images/common/zkemail-logo.svg'
+import css from './styles.module.css'
+
+export function ZkEmailFakeDoorModal({ open, onClose }: { open: boolean; onClose: () => void }): ReactElement {
+  return (
+    <Dialog open={open} onClose={onClose} className={css.dialog}>
+      <DialogContent>
+        <IconButton onClick={onClose} className={css.closeIcon}>
+          <CloseIcon />
+        </IconButton>
+
+        <Stack spacing={4}>
+          <RecoveryZkEmailIcon style={{ display: 'block' }} width={60} height={60} />
+
+          <Stack spacing={2}>
+            <Typography variant="h2">Feature is coming soon</Typography>
+
+            <Typography variant="body1">
+              Thanks for showing interest in email recovery. We are currently measuring demand for it, so your click on
+              this option made the release one step closer.
+            </Typography>
+
+            <Typography variant="body1">Stay tuned!</Typography>
+          </Stack>
+        </Stack>
+      </DialogContent>
+    </Dialog>
+  )
+}

From b50340d29b696acb28c9d4d5566a173c3dfdabb8 Mon Sep 17 00:00:00 2001
From: Manuel Gellfart <manu@safe.global>
Date: Fri, 29 Nov 2024 17:34:56 +0700
Subject: [PATCH 34/47] feat: allow signing with owned parent Safes (#4406)

* feat: nested signer integration

* test: fix SignTxButton test

* feat: implement correct design

* refactor: use rtk query to load owners

* feat: new success screen for nested transactions

* refactor: move useNestedWallet to nested-safe-wallet util

* fix: design, make link external

* fix: signature indexed state for nested signing

* fix: first review issues

* fix: finish NestedTxSuccessScreen

* fix: only load ownedSafes of current chain for useNestedSafeOwners

* fix: move selected signer state into WalletProvider

* fix: error handling when signing nested tx

* refactor: extract re-used code into fields

* fix: tenderly simulation uses signer instead of wallet address, fix ExternalLinks

* fix: select available signer in SafeTxProvider, disable signers that already signed

* fix: working parent tx link for direct execution

* feat: add analytics events for nested signing

* fix: use signer address in blockaid scans

* fix: selecting initial available signer in tx modal

* test: useBlockaid.test.ts

* fix: Safe app readOnly state for nested ownership

* fix: executing txs as parent Safe

* fix: iterate signing methods for parent (hardware) wallets

* fix: only don't iterate signing of executions

* fix: use correct hash on success screen

* fix: take execution into account when selecting signer

* fix: cache pending transaction on parent creation screen

* fix: catch malformed `safeTxHash`

* fix: lint

* Improve tracking

* Add events

* Don't show status screen for singular owners

* Revert "Don't show status screen for singular owners"

This reverts commit a74606ef805ac4c44ad4c8ee340603f1f6347a76.

* Navigate to queue if we don't have `safeTxHash`

* Fix lint

* Fix test

* Allow execution by any wallet and add transaction type to event

* Fix already signed signers being enabled

* Fix event

* Fix lint

* Address review comments

---------

Co-authored-by: Aaron Cook <aaron@safe.global>
---
 public/images/common/arrow-down.svg           |   3 +
 public/images/transactions/signature.svg      |   3 +
 .../common/CheckWallet/index.test.tsx         |  26 ++-
 src/components/common/CheckWallet/index.tsx   |  12 +-
 src/components/common/ExternalLink/index.tsx  |  41 +++--
 .../common/WalletProvider/index.tsx           |  55 +++++-
 .../safe-apps/AppFrame/useGetSafeInfo.ts      |  42 ++---
 .../transactions/SignTxButton/index.test.tsx  | 104 +++++++++++
 .../transactions/SignTxButton/index.tsx       |   5 +-
 .../OnChainConfirmation/index.tsx             |  30 ++--
 src/components/tx-flow/SafeTxProvider.tsx     |   8 +-
 .../flows/ConfirmTx/ConfirmProposedTx.tsx     |   8 +-
 .../flows/NestedTxSuccessScreen/index.tsx     | 151 ++++++++++++++++
 .../NestedTxSuccessScreen/styles.module.css   |   7 +
 .../ReviewSignMessageOnChain.test.tsx         |  26 +--
 src/components/tx-flow/flows/index.ts         |   1 +
 src/components/tx-flow/index.tsx              |  10 +-
 .../tx/SignOrExecuteForm/SignForm.tsx         |   9 +-
 .../SignOrExecuteForm/SignOrExecuteForm.tsx   |  78 ++++++++-
 .../tx/SignOrExecuteForm/SignerForm/index.tsx | 115 ++++++++++++
 .../SignerForm/styles.module.css              |  10 ++
 .../__tests__/SignerForm.test.tsx             | 131 ++++++++++++++
 .../{ => __tests__}/hooks.test.ts             |  23 +--
 src/components/tx/SignOrExecuteForm/hooks.ts  |  54 +++---
 .../blockaid/__tests__/useBlockaid.test.ts    |  16 +-
 .../tx/security/blockaid/useBlockaid.ts       |  11 +-
 src/components/tx/security/tenderly/index.tsx |   8 +-
 .../myAccounts/hooks/useAllOwnedSafes.ts      |  29 +---
 src/features/myAccounts/hooks/useAllSafes.ts  |   1 +
 .../__tests__/useIsValidExecution.test.ts     |   2 +-
 src/hooks/__tests__/useGasLimit.test.ts       |   6 +-
 .../__tests__/useNestedSafeOwners.test.ts     |  54 ++++++
 src/hooks/useGasLimit.ts                      |   4 +-
 src/hooks/useIsNestedSafeOwner.ts             |   7 +
 src/hooks/useIsSafeOwner.ts                   |   6 +-
 src/hooks/useIsValidExecution.ts              |  10 +-
 src/hooks/useNestedSafeOwners.tsx             |  19 ++
 src/hooks/useOwnedSafes.ts                    |  40 +----
 src/hooks/useTransactionStatus.ts             |   1 +
 src/hooks/useTransactionType.tsx              |   5 +-
 src/hooks/useTxPendingStatuses.ts             |  35 +++-
 src/hooks/wallets/useSelectAvailableSigner.ts |  24 +++
 src/hooks/wallets/useWallet.ts                |   8 +
 src/services/analytics/events/modals.ts       |  15 ++
 src/services/analytics/events/transactions.ts |  26 +++
 src/services/analytics/tx-tracking.ts         |   5 +
 src/services/exceptions/ErrorCodes.ts         |   1 +
 src/services/safe-wallet-provider/index.ts    |   3 +-
 .../tx/tx-sender/__tests__/ts-sender.test.ts  |   2 +
 src/services/tx/tx-sender/dispatch.ts         |  16 +-
 src/services/tx/txEvents.ts                   |   2 +
 src/store/__tests__/txQueueSlice.test.ts      |  43 +++++
 src/store/api/gateway/index.ts                |  21 ++-
 src/store/pendingTxsSlice.ts                  |   8 +
 src/store/txQueueSlice.ts                     |   4 +-
 src/tests/builders/safeTx.ts                  |  46 +++++
 src/utils/__tests__/signers.test.ts           | 140 +++++++++++++++
 src/utils/helpers.ts                          |   2 +-
 src/utils/nested-safe-wallet.ts               | 164 ++++++++++++++++++
 src/utils/signers.ts                          |  32 ++++
 src/utils/transaction-guards.ts               |   4 +
 61 files changed, 1553 insertions(+), 219 deletions(-)
 create mode 100644 public/images/common/arrow-down.svg
 create mode 100644 public/images/transactions/signature.svg
 create mode 100644 src/components/transactions/SignTxButton/index.test.tsx
 create mode 100644 src/components/tx-flow/flows/NestedTxSuccessScreen/index.tsx
 create mode 100644 src/components/tx-flow/flows/NestedTxSuccessScreen/styles.module.css
 create mode 100644 src/components/tx/SignOrExecuteForm/SignerForm/index.tsx
 create mode 100644 src/components/tx/SignOrExecuteForm/SignerForm/styles.module.css
 create mode 100644 src/components/tx/SignOrExecuteForm/__tests__/SignerForm.test.tsx
 rename src/components/tx/SignOrExecuteForm/{ => __tests__}/hooks.test.ts (97%)
 create mode 100644 src/hooks/__tests__/useNestedSafeOwners.test.ts
 create mode 100644 src/hooks/useIsNestedSafeOwner.ts
 create mode 100644 src/hooks/useNestedSafeOwners.tsx
 create mode 100644 src/hooks/wallets/useSelectAvailableSigner.ts
 create mode 100644 src/utils/__tests__/signers.test.ts
 create mode 100644 src/utils/nested-safe-wallet.ts
 create mode 100644 src/utils/signers.ts

diff --git a/public/images/common/arrow-down.svg b/public/images/common/arrow-down.svg
new file mode 100644
index 0000000000..8e0969f577
--- /dev/null
+++ b/public/images/common/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7664 9.11708C11.455 8.78255 10.9458 8.78255 10.6344 9.11708L8.801 11.0814V2.85779C8.801 2.38601 8.44073 2 8.0004 2C7.55927 2 7.1998 2.38601 7.1998 2.85779V11.0814L5.36562 9.11708C5.05419 8.7834 4.54501 8.7834 4.23358 9.11708C3.92214 9.45076 3.92214 9.99632 4.23358 10.33L7.43438 13.7586C7.48081 13.8101 7.54005 13.8375 7.5945 13.8727C7.62812 13.8941 7.65534 13.925 7.69217 13.9422C7.72499 13.9576 7.76182 13.9576 7.79625 13.9662C7.96597 14.0151 8.14531 14.0142 8.30863 13.9422C8.34386 13.9259 8.37028 13.8958 8.4031 13.8744C8.45914 13.8392 8.51759 13.8109 8.56642 13.7586L11.7664 10.33C12.0779 9.99632 12.0779 9.45076 11.7664 9.11708Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/public/images/transactions/signature.svg b/public/images/transactions/signature.svg
new file mode 100644
index 0000000000..79aa58d5a3
--- /dev/null
+++ b/public/images/transactions/signature.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.85378 11.9828C3.46711 12.4528 3.09378 12.9162 2.70711 13.3728C2.55378 13.5562 2.37711 13.7195 2.20711 13.8895C2.00711 14.0895 1.79378 14.1062 1.63044 13.9428C1.47044 13.7828 1.49044 13.5595 1.68711 13.3662C2.31378 12.7562 2.86044 12.0862 3.33711 11.3528C3.40378 11.2495 3.40044 11.1762 3.34378 11.0728C2.72711 9.92618 2.11711 8.77951 1.64044 7.56618C1.34044 6.79951 1.07044 6.01951 1.01711 5.18951C0.997109 4.85284 1.01044 4.49618 1.08711 4.16951C1.23378 3.53618 1.62711 3.09618 2.28378 2.97618C2.97378 2.84951 3.56044 3.07951 3.96711 3.65618C4.62378 4.59284 5.01378 5.63951 5.15378 6.77618C5.34711 8.31951 5.06044 9.76951 4.32378 11.1362C4.29711 11.1862 4.30711 11.2728 4.33044 11.3295C4.38711 11.4528 4.46044 11.5662 4.53044 11.6828C4.76044 12.0662 5.18378 12.1262 5.50378 11.8062C5.88378 11.4228 6.27044 11.0395 6.62378 10.6295C7.32044 9.81951 8.43044 10.0495 8.89378 10.8962C9.10044 11.2728 9.50044 11.3428 9.82711 11.0628C10.0138 10.9028 10.1938 10.7395 10.3804 10.5795C11.1271 9.93284 12.1904 10.2028 12.5371 11.1262C12.6571 11.4428 12.8304 11.5662 13.1771 11.5662C13.6504 11.5662 14.1238 11.5662 14.6004 11.5662C14.9004 11.5662 15.0804 11.8362 14.9638 12.0895C14.9004 12.2228 14.7871 12.3028 14.6438 12.3028C14.0904 12.3062 13.5371 12.3262 12.9871 12.2895C12.4171 12.2528 12.0438 11.9195 11.8504 11.3828C11.7371 11.0728 11.5071 10.9162 11.2038 10.9695C11.0938 10.9895 10.9771 11.0495 10.8871 11.1228C10.6971 11.2695 10.5204 11.4328 10.3438 11.5962C9.61044 12.2695 8.63378 11.9662 8.22044 11.2295C8.12044 11.0528 7.99378 10.9162 7.78711 10.8795C7.55711 10.8395 7.37044 10.9162 7.21378 11.0862C6.84044 11.4862 6.45378 11.8728 6.08378 12.2762C5.40378 13.0162 4.31378 12.8362 3.88044 12.0295C3.87044 12.0128 3.85711 11.9962 3.85044 11.9862L3.85378 11.9828ZM3.81711 10.4295C3.84044 10.4095 3.85044 10.4028 3.85378 10.3962C3.86378 10.3795 3.87378 10.3595 3.88044 10.3395C4.81044 8.17284 4.64711 6.09284 3.38378 4.10618C3.16711 3.76618 2.83044 3.63284 2.43711 3.69951C2.04378 3.76284 1.86378 4.05618 1.78044 4.40951C1.66711 4.88951 1.74378 5.36284 1.86044 5.82951C2.26711 7.46284 3.05044 8.93951 3.81711 10.4328V10.4295Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/common/CheckWallet/index.test.tsx b/src/components/common/CheckWallet/index.test.tsx
index f5730c7c20..56e66dfe31 100644
--- a/src/components/common/CheckWallet/index.test.tsx
+++ b/src/components/common/CheckWallet/index.test.tsx
@@ -10,12 +10,15 @@ import { useIsWalletProposer } from '@/hooks/useProposers'
 import { faker } from '@faker-js/faker'
 import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import useSafeInfo from '@/hooks/useSafeInfo'
+import { useNestedSafeOwners } from '@/hooks/useNestedSafeOwners'
+import type Safe from '@safe-global/protocol-kit'
 
+const mockWalletAddress = faker.finance.ethereumAddress()
 // mock useWallet
 jest.mock('@/hooks/wallets/useWallet', () => ({
   __esModule: true,
   default: jest.fn(() => ({
-    address: '0x1234567890',
+    address: mockWalletAddress,
   })),
 }))
 
@@ -62,10 +65,11 @@ jest.mock('@/hooks/useSafeInfo', () => ({
   }),
 }))
 
-jest.mock('@/hooks/coreSDK/safeCoreSDK', () => ({
-  __esModule: true,
-  useSafeSDK: jest.fn(() => ({})),
-}))
+jest.mock('@/hooks/useNestedSafeOwners')
+const mockUseNestedSafeOwners = useNestedSafeOwners as jest.MockedFunction<typeof useNestedSafeOwners>
+
+jest.mock('@/hooks/coreSDK/safeCoreSDK')
+const mockUseSafeSdk = useSafeSDK as jest.MockedFunction<typeof useSafeSDK>
 
 const renderButton = () =>
   render(<CheckWallet checkNetwork={false}>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>)
@@ -73,6 +77,8 @@ const renderButton = () =>
 describe('CheckWallet', () => {
   beforeEach(() => {
     jest.clearAllMocks()
+    mockUseSafeSdk.mockReturnValue({} as unknown as Safe)
+    mockUseNestedSafeOwners.mockReturnValue([])
   })
 
   it('renders correctly when the wallet is connected to the right chain and is an owner', () => {
@@ -226,7 +232,7 @@ describe('CheckWallet', () => {
   })
 
   it('should disable the button if SDK is not initialized', () => {
-    ;(useSafeSDK as jest.MockedFunction<typeof useSafeSDK>).mockReturnValue(undefined)
+    mockUseSafeSdk.mockReturnValue(undefined)
 
     const { getByText, getByLabelText } = render(
       <CheckWallet>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>,
@@ -235,4 +241,12 @@ describe('CheckWallet', () => {
     expect(getByText('Continue')).toBeDisabled()
     expect(getByLabelText('SDK is not initialized yet'))
   })
+  it('should allow nested Safe owners', () => {
+    ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(false)
+    mockUseNestedSafeOwners.mockReturnValue([faker.finance.ethereumAddress()])
+
+    const { container } = render(<CheckWallet>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>)
+    console.log(container.innerHTML)
+    expect(container.querySelector('button')).not.toBeDisabled()
+  })
 })
diff --git a/src/components/common/CheckWallet/index.tsx b/src/components/common/CheckWallet/index.tsx
index 298b0fc62b..dcf1b786de 100644
--- a/src/components/common/CheckWallet/index.tsx
+++ b/src/components/common/CheckWallet/index.tsx
@@ -8,6 +8,7 @@ import useConnectWallet from '../ConnectWallet/useConnectWallet'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
 import { Tooltip } from '@mui/material'
 import useSafeInfo from '@/hooks/useSafeInfo'
+import { useIsNestedSafeOwner } from '@/hooks/useIsNestedSafeOwner'
 
 type CheckWalletProps = {
   children: (ok: boolean) => ReactElement
@@ -45,6 +46,8 @@ const CheckWallet = ({
 
   const { safe } = useSafeInfo()
 
+  const isNestedSafeOwner = useIsNestedSafeOwner()
+
   const isUndeployedSafe = !safe.deployed
 
   const message = useMemo(() => {
@@ -59,7 +62,13 @@ const CheckWallet = ({
       return Message.SafeNotActivated
     }
 
-    if (!allowNonOwner && !isSafeOwner && !isProposer && (!isOnlySpendingLimit || !allowSpendingLimit)) {
+    if (
+      !allowNonOwner &&
+      !isSafeOwner &&
+      !isProposer &&
+      !isNestedSafeOwner &&
+      (!isOnlySpendingLimit || !allowSpendingLimit)
+    ) {
       return Message.NotSafeOwner
     }
 
@@ -72,6 +81,7 @@ const CheckWallet = ({
     allowSpendingLimit,
     allowUndeployedSafe,
     isProposer,
+    isNestedSafeOwner,
     isOnlySpendingLimit,
     isSafeOwner,
     isUndeployedSafe,
diff --git a/src/components/common/ExternalLink/index.tsx b/src/components/common/ExternalLink/index.tsx
index 9090c38177..b70a61b347 100644
--- a/src/components/common/ExternalLink/index.tsx
+++ b/src/components/common/ExternalLink/index.tsx
@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react'
 import { OpenInNewRounded } from '@mui/icons-material'
-import { Box, Link, type LinkProps } from '@mui/material'
+import { Box, Button, Link, type LinkProps } from '@mui/material'
 
 /**
  * Renders an external Link which always sets the noopener and noreferrer rel attribute and the target to _blank.
@@ -9,24 +9,33 @@ import { Box, Link, type LinkProps } from '@mui/material'
 const ExternalLink = ({
   noIcon = false,
   children,
+  href,
+  mode = 'link',
   ...props
-}: Omit<LinkProps, 'target' | 'rel'> & { noIcon?: boolean }): ReactElement => {
-  if (!props.href) return <>{children}</>
+}: Omit<LinkProps, 'target' | 'rel'> & { noIcon?: boolean; mode?: 'button' | 'link' }): ReactElement => {
+  if (!href) return <>{children}</>
 
-  return (
-    <Link rel="noreferrer noopener" target="_blank" {...props}>
-      <Box
-        component="span"
-        sx={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: 0.2,
-        }}
-      >
-        {children}
-        {!noIcon && <OpenInNewRounded fontSize="small" />}
-      </Box>
+  const linkContent = (
+    <Box
+      component="span"
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 0.2,
+      }}
+    >
+      {children}
+      {!noIcon && <OpenInNewRounded fontSize="small" />}
+    </Box>
+  )
+  return mode === 'link' ? (
+    <Link href={href} rel="noreferrer noopener" target="_blank" {...props}>
+      {linkContent}
     </Link>
+  ) : (
+    <Button variant="outlined" href={href} rel="noreferrer noopener" target="_blank" sx={props.sx}>
+      {linkContent}
+    </Button>
   )
 }
 
diff --git a/src/components/common/WalletProvider/index.tsx b/src/components/common/WalletProvider/index.tsx
index 6e14266d1a..cf13559e5f 100644
--- a/src/components/common/WalletProvider/index.tsx
+++ b/src/components/common/WalletProvider/index.tsx
@@ -1,13 +1,45 @@
-import { createContext, type ReactElement, type ReactNode, useEffect, useState } from 'react'
+import { createContext, type ReactElement, type ReactNode, useEffect, useState, useMemo } from 'react'
 import useOnboard, { type ConnectedWallet, getConnectedWallet } from '@/hooks/wallets/useOnboard'
+import useAsync from '@/hooks/useAsync'
+import { getSafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { useWeb3ReadOnly } from '@/hooks/wallets/web3'
+import { useCurrentChain } from '@/hooks/useChains'
+import { useRouter } from 'next/router'
+import { type Eip1193Provider } from 'ethers'
+import { getNestedWallet } from '@/utils/nested-safe-wallet'
+import { sameAddress } from '@/utils/addresses'
 
-export const WalletContext = createContext<ConnectedWallet | null>(null)
+export type SignerWallet = {
+  provider: Eip1193Provider | null
+  address: string
+  chainId: string
+  isSafe?: boolean
+}
+
+export type WalletContextType = {
+  connectedWallet: ConnectedWallet | null
+  signer: SignerWallet | null
+  setSignerAddress: (address: string | undefined) => void
+}
+
+export const WalletContext = createContext<WalletContextType | null>(null)
 
 const WalletProvider = ({ children }: { children: ReactNode }): ReactElement => {
   const onboard = useOnboard()
+  const currentChain = useCurrentChain()
+  const web3ReadOnly = useWeb3ReadOnly()
+  const router = useRouter()
   const onboardWallets = onboard?.state.get().wallets || []
   const [wallet, setWallet] = useState<ConnectedWallet | null>(getConnectedWallet(onboardWallets))
 
+  const [signerAddress, setSignerAddress] = useState<string>()
+
+  const [nestedSafeInfo] = useAsync(() => {
+    if (signerAddress && !sameAddress(signerAddress, wallet?.address) && currentChain) {
+      return getSafeInfo(currentChain.chainId, signerAddress)
+    }
+  }, [currentChain, signerAddress, wallet?.address])
+
   useEffect(() => {
     if (!onboard) return
 
@@ -22,7 +54,24 @@ const WalletProvider = ({ children }: { children: ReactNode }): ReactElement =>
     }
   }, [onboard])
 
-  return <WalletContext.Provider value={wallet}>{children}</WalletContext.Provider>
+  const signer = useMemo(() => {
+    if (wallet && nestedSafeInfo && web3ReadOnly) {
+      return getNestedWallet(wallet, nestedSafeInfo, web3ReadOnly, router)
+    }
+    return wallet
+  }, [wallet, nestedSafeInfo, web3ReadOnly, router])
+
+  return (
+    <WalletContext.Provider
+      value={{
+        connectedWallet: wallet,
+        signer,
+        setSignerAddress,
+      }}
+    >
+      {children}
+    </WalletContext.Provider>
+  )
 }
 
 export default WalletProvider
diff --git a/src/components/safe-apps/AppFrame/useGetSafeInfo.ts b/src/components/safe-apps/AppFrame/useGetSafeInfo.ts
index 1dcb0c6c09..62ddada412 100644
--- a/src/components/safe-apps/AppFrame/useGetSafeInfo.ts
+++ b/src/components/safe-apps/AppFrame/useGetSafeInfo.ts
@@ -1,24 +1,26 @@
-import { useMemo } from 'react'
+import { useCallback } from 'react'
 import useChainId from '@/hooks/useChainId'
 import { useCurrentChain } from '@/hooks/useChains'
 import useIsSafeOwner from '@/hooks/useIsSafeOwner'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { getLegacyChainName } from '../utils'
+import { useNestedSafeOwners } from '@/hooks/useNestedSafeOwners'
 
 const useGetSafeInfo = () => {
   const { safe, safeAddress } = useSafeInfo()
   const isOwner = useIsSafeOwner()
+  const nestedSafeOwners = useNestedSafeOwners()
   const chainId = useChainId()
   const chain = useCurrentChain()
   const chainName = chain?.chainName || ''
 
-  return useMemo(
-    () => () => ({
+  return useCallback(() => {
+    return {
       safeAddress,
       chainId: parseInt(chainId, 10),
       owners: safe.owners.map((owner) => owner.value),
       threshold: safe.threshold,
-      isReadOnly: !isOwner,
+      isReadOnly: !isOwner && (nestedSafeOwners == null || nestedSafeOwners.length === 0),
       nonce: safe.nonce,
       implementation: safe.implementation.value,
       modules: safe.modules ? safe.modules.map((module) => module.value) : null,
@@ -26,22 +28,22 @@ const useGetSafeInfo = () => {
       guard: safe.guard?.value || null,
       version: safe.version,
       network: getLegacyChainName(chainName || '', chainId).toUpperCase(),
-    }),
-    [
-      chainId,
-      chainName,
-      isOwner,
-      safeAddress,
-      safe.owners,
-      safe.threshold,
-      safe.nonce,
-      safe.implementation,
-      safe.modules,
-      safe.fallbackHandler,
-      safe.guard,
-      safe.version,
-    ],
-  )
+    }
+  }, [
+    safeAddress,
+    chainId,
+    safe.owners,
+    safe.threshold,
+    safe.nonce,
+    safe.implementation.value,
+    safe.modules,
+    safe.fallbackHandler,
+    safe.guard?.value,
+    safe.version,
+    isOwner,
+    nestedSafeOwners,
+    chainName,
+  ])
 }
 
 export default useGetSafeInfo
diff --git a/src/components/transactions/SignTxButton/index.test.tsx b/src/components/transactions/SignTxButton/index.test.tsx
new file mode 100644
index 0000000000..1ec35f5b95
--- /dev/null
+++ b/src/components/transactions/SignTxButton/index.test.tsx
@@ -0,0 +1,104 @@
+import { render, waitFor } from '@/tests/test-utils'
+import SignTxButton from '.'
+import { executionInfoBuilder, safeTxSummaryBuilder } from '@/tests/builders/safeTx'
+import { type AddressEx, DetailedExecutionInfoType } from '@safe-global/safe-gateway-typescript-sdk'
+import { faker } from '@faker-js/faker'
+import useWallet, { useSigner } from '@/hooks/wallets/useWallet'
+import { MockEip1193Provider } from '@/tests/mocks/providers'
+import { setSafeSDK } from '@/hooks/coreSDK/safeCoreSDK'
+import type Safe from '@safe-global/protocol-kit'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
+import useIsSafeOwner from '@/hooks/useIsSafeOwner'
+
+jest.mock('@/hooks/wallets/useWallet')
+jest.mock('@/hooks/useSafeInfo')
+jest.mock('@/hooks/useIsSafeOwner')
+
+describe('SignTxButton', () => {
+  const mockUseWallet = useWallet as jest.MockedFunction<typeof useWallet>
+  const mockUseSigner = useSigner as jest.MockedFunction<typeof useSigner>
+  const mockUseSafeInfo = useSafeInfo as jest.MockedFunction<typeof useSafeInfo>
+  const mockUseIsSafeOwner = useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>
+
+  const testMissingSigners: AddressEx[] = [
+    {
+      value: faker.finance.ethereumAddress(),
+    },
+    {
+      value: faker.finance.ethereumAddress(),
+    },
+  ]
+  const txSummary = safeTxSummaryBuilder()
+    .with({
+      executionInfo: executionInfoBuilder()
+        .with({
+          type: DetailedExecutionInfoType.MULTISIG,
+          confirmationsRequired: 3,
+          confirmationsSubmitted: 1,
+          missingSigners: testMissingSigners,
+        })
+        .build(),
+    })
+    .build()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    const safeAddress = faker.finance.ethereumAddress()
+    mockUseSafeInfo.mockReturnValue({
+      safeAddress,
+      safe: extendedSafeInfoBuilder()
+        .with({ address: { value: safeAddress } })
+        .build(),
+      safeLoaded: true,
+      safeLoading: false,
+    })
+  })
+
+  it('should be disabled without any wallet connected', () => {
+    const result = render(<SignTxButton txSummary={txSummary} />)
+    expect(result.getByRole('button')).toBeDisabled()
+  })
+  it('should be disabled with non-owner connected', () => {
+    mockUseWallet.mockReturnValue({
+      address: faker.finance.ethereumAddress(),
+      chainId: '1',
+      label: 'MetaMask',
+      provider: MockEip1193Provider,
+    })
+
+    mockUseSigner.mockReturnValue({
+      address: faker.finance.ethereumAddress(),
+      chainId: '1',
+      provider: MockEip1193Provider,
+    })
+
+    mockUseIsSafeOwner.mockReturnValue(false)
+
+    const result = render(<SignTxButton txSummary={txSummary} />)
+
+    expect(result.getByRole('button')).toBeDisabled()
+  })
+
+  it('should be enabled with missing signer connected', async () => {
+    mockUseWallet.mockReturnValue({
+      address: testMissingSigners[0].value,
+      chainId: '1',
+      label: 'MetaMask',
+      provider: MockEip1193Provider,
+    })
+
+    mockUseSigner.mockReturnValue({
+      address: testMissingSigners[0].value,
+      chainId: '1',
+      provider: MockEip1193Provider,
+    })
+    mockUseIsSafeOwner.mockReturnValue(true)
+    setSafeSDK({} as unknown as Safe)
+    const result = render(<SignTxButton txSummary={txSummary} />)
+    await waitFor(() => {
+      expect(result.getByRole('button')).toBeEnabled()
+    })
+  })
+})
diff --git a/src/components/transactions/SignTxButton/index.tsx b/src/components/transactions/SignTxButton/index.tsx
index f1fbdeb8a7..9e10e08829 100644
--- a/src/components/transactions/SignTxButton/index.tsx
+++ b/src/components/transactions/SignTxButton/index.tsx
@@ -13,6 +13,7 @@ import CheckWallet from '@/components/common/CheckWallet'
 import { useSafeSDK } from '@/hooks/coreSDK/safeCoreSDK'
 import { TxModalContext } from '@/components/tx-flow'
 import { ConfirmTxFlow } from '@/components/tx-flow/flows'
+import { useNestedSafeOwners } from '@/hooks/useNestedSafeOwners'
 
 const SignTxButton = ({
   txSummary,
@@ -23,8 +24,10 @@ const SignTxButton = ({
 }): ReactElement => {
   const { setTxFlow } = useContext(TxModalContext)
   const wallet = useWallet()
+  const nestedOwners = useNestedSafeOwners()
   const isSafeOwner = useIsSafeOwner()
-  const isSignable = isSignableBy(txSummary, wallet?.address || '')
+  const isSignable =
+    isSignableBy(txSummary, wallet?.address || '') || nestedOwners?.some((owner) => isSignableBy(txSummary, owner))
   const safeSDK = useSafeSDK()
   const expiredSwap = useIsExpiredSwap(txSummary.txInfo)
   const isDisabled = !isSignable || !safeSDK || expiredSwap
diff --git a/src/components/transactions/TxDetails/TxData/NestedTransaction/OnChainConfirmation/index.tsx b/src/components/transactions/TxDetails/TxData/NestedTransaction/OnChainConfirmation/index.tsx
index a29c794f73..c27134f612 100644
--- a/src/components/transactions/TxDetails/TxData/NestedTransaction/OnChainConfirmation/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/NestedTransaction/OnChainConfirmation/index.tsx
@@ -16,6 +16,8 @@ import TxData from '../..'
 import { isMultiSendTxInfo, isOrderTxInfo } from '@/utils/transaction-guards'
 import { ErrorBoundary } from '@sentry/react'
 import Multisend from '../../DecodedData/Multisend'
+import { MODALS_EVENTS } from '@/services/analytics'
+import Track from '@/components/common/Track'
 
 const safeInterface = Safe__factory.createInterface()
 
@@ -59,19 +61,21 @@ export const OnChainConfirmation = ({
           )}
 
           {chain && data && (
-            <Link
-              href={{
-                pathname: AppRoutes.transactions.tx,
-                query: {
-                  safe: `${chain?.shortName}:${data?.to.value}`,
-                  id: nestedTxDetails.txId,
-                },
-              }}
-              passHref
-              legacyBehavior
-            >
-              <ExternalLink>Open nested transaction</ExternalLink>
-            </Link>
+            <Track {...MODALS_EVENTS.OPEN_NESTED_TX}>
+              <Link
+                href={{
+                  pathname: AppRoutes.transactions.tx,
+                  query: {
+                    safe: `${chain?.shortName}:${data?.to.value}`,
+                    id: nestedTxDetails.txId,
+                  },
+                }}
+                passHref
+                legacyBehavior
+              >
+                <ExternalLink>Open nested transaction</ExternalLink>
+              </Link>
+            </Track>
           )}
         </>
       ) : txDetailsError ? (
diff --git a/src/components/tx-flow/SafeTxProvider.tsx b/src/components/tx-flow/SafeTxProvider.tsx
index 31e2070403..e46ec0a846 100644
--- a/src/components/tx-flow/SafeTxProvider.tsx
+++ b/src/components/tx-flow/SafeTxProvider.tsx
@@ -8,6 +8,7 @@ import type { EIP712TypedData } from '@safe-global/safe-gateway-typescript-sdk'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { useCurrentChain } from '@/hooks/useChains'
 import { prependSafeToL2Migration } from '@/utils/transactions'
+import { useSelectAvailableSigner } from '@/hooks/wallets/useSelectAvailableSigner'
 
 export type SafeTxContextParams = {
   safeTx?: SafeTransaction
@@ -49,6 +50,7 @@ const SafeTxProvider = ({ children }: { children: ReactNode }): ReactElement =>
 
   const { safe } = useSafeInfo()
   const chain = useCurrentChain()
+  const selectAvailableSigner = useSelectAvailableSigner()
 
   const setAndMigrateSafeTx: Dispatch<SetStateAction<SafeTransaction | undefined>> = useCallback(
     (
@@ -62,8 +64,11 @@ const SafeTxProvider = ({ children }: { children: ReactNode }): ReactElement =>
       }
 
       prependSafeToL2Migration(safeTx, safe, chain).then(setSafeTx)
+
+      // Select a matching signer when we update the transaction
+      selectAvailableSigner(safeTx, safe)
     },
-    [chain, safe],
+    [chain, safe, selectAvailableSigner],
   )
 
   // Signed txs cannot be updated
@@ -86,7 +91,6 @@ const SafeTxProvider = ({ children }: { children: ReactNode }): ReactElement =>
 
     createTx({ ...safeTx.data, safeTxGas: String(finalSafeTxGas) }, finalNonce)
       .then((tx) => {
-        console.log('SafeTxProvider: Updated tx with nonce and safeTxGas', tx)
         setSafeTx(tx)
       })
       .catch(setSafeTxError)
diff --git a/src/components/tx-flow/flows/ConfirmTx/ConfirmProposedTx.tsx b/src/components/tx-flow/flows/ConfirmTx/ConfirmProposedTx.tsx
index 9451036981..391e2c77ba 100644
--- a/src/components/tx-flow/flows/ConfirmTx/ConfirmProposedTx.tsx
+++ b/src/components/tx-flow/flows/ConfirmTx/ConfirmProposedTx.tsx
@@ -3,7 +3,7 @@ import { Typography } from '@mui/material'
 import type { TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { useChainId } from '@/hooks/useChainId'
-import useWallet from '@/hooks/wallets/useWallet'
+import { useSigner } from '@/hooks/wallets/useWallet'
 import { isExecutable, isMultisigExecutionInfo, isSignableBy } from '@/utils/transaction-guards'
 import { createExistingTx } from '@/services/tx/tx-sender'
 import { SafeTxContext } from '../../SafeTxProvider'
@@ -18,15 +18,15 @@ const EXECUTE_TEXT = 'Submit the form to execute this transaction.'
 const SIGN_EXECUTE_TEXT = 'Sign or immediately execute this transaction.'
 
 const ConfirmProposedTx = ({ txSummary }: ConfirmProposedTxProps): ReactElement => {
-  const wallet = useWallet()
+  const signer = useSigner()
   const { safe, safeAddress } = useSafeInfo()
   const chainId = useChainId()
   const { setSafeTx, setSafeTxError, setNonce } = useContext(SafeTxContext)
 
   const txId = txSummary.id
   const txNonce = isMultisigExecutionInfo(txSummary.executionInfo) ? txSummary.executionInfo.nonce : undefined
-  const canExecute = isExecutable(txSummary, wallet?.address || '', safe)
-  const canSign = isSignableBy(txSummary, wallet?.address || '')
+  const canExecute = isExecutable(txSummary, signer?.address || '', safe)
+  const canSign = isSignableBy(txSummary, signer?.address || '')
 
   useEffect(() => {
     txNonce !== undefined && setNonce(txNonce)
diff --git a/src/components/tx-flow/flows/NestedTxSuccessScreen/index.tsx b/src/components/tx-flow/flows/NestedTxSuccessScreen/index.tsx
new file mode 100644
index 0000000000..0e7113fe5c
--- /dev/null
+++ b/src/components/tx-flow/flows/NestedTxSuccessScreen/index.tsx
@@ -0,0 +1,151 @@
+import { useState, useEffect } from 'react'
+import { Box, Container, Paper, Stack, SvgIcon, Typography } from '@mui/material'
+import { PendingStatus, selectPendingTxById } from '@/store/pendingTxsSlice'
+import EthHashInfo from '@/components/common/EthHashInfo'
+import ErrorMessage from '@/components/tx/ErrorMessage'
+import useAddressBook from '@/hooks/useAddressBook'
+import NestedSafeIcon from '@/public/images/transactions/nestedTx.svg'
+import ArrowDownIcon from '@/public/images/common/arrow-down.svg'
+
+import css from './styles.module.css'
+import Link from 'next/link'
+import { AppRoutes } from '@/config/routes'
+import { useAppSelector } from '@/store'
+import ExternalLink from '@/components/common/ExternalLink'
+import { MODALS_EVENTS } from '@/services/analytics'
+import Track from '@/components/common/Track'
+import useAsync from '@/hooks/useAsync'
+import { getSafeTransaction } from '@/utils/transactions'
+import { isMultisigDetailedExecutionInfo } from '@/utils/transaction-guards'
+
+type Props = {
+  txId: string
+}
+const NestedTxSuccessScreen = ({ txId }: Props) => {
+  const addressBook = useAddressBook()
+
+  // _pendingTx eventually clears from the store, so we need to cache it
+  const _pendingTx = useAppSelector((state) => (txId ? selectPendingTxById(state, txId) : undefined))
+  const [cachedPendingTx, setCachedPendingTx] = useState(_pendingTx)
+  useEffect(() => {
+    if (_pendingTx) {
+      setCachedPendingTx(_pendingTx)
+    }
+  }, [_pendingTx])
+
+  const [safeTx] = useAsync(() => {
+    if (cachedPendingTx?.status == PendingStatus.NESTED_SIGNING) {
+      return getSafeTransaction(
+        cachedPendingTx.txHashOrParentSafeTxHash,
+        cachedPendingTx.chainId,
+        cachedPendingTx.signerAddress,
+      )
+    }
+  }, [cachedPendingTx])
+  const isSafeTxHash =
+    cachedPendingTx?.status == PendingStatus.NESTED_SIGNING &&
+    !!safeTx &&
+    isMultisigDetailedExecutionInfo(safeTx.detailedExecutionInfo) &&
+    safeTx.detailedExecutionInfo.safeTxHash === cachedPendingTx.txHashOrParentSafeTxHash
+
+  if (cachedPendingTx?.status !== PendingStatus.NESTED_SIGNING) {
+    return <ErrorMessage>No transaction data found</ErrorMessage>
+  }
+
+  const currentSafeAddress = addressBook[cachedPendingTx.safeAddress]
+  const parentSafeAddress = addressBook[cachedPendingTx.signerAddress]
+
+  return (
+    <Container
+      component={Paper}
+      disableGutters
+      sx={{
+        textAlign: 'center',
+        maxWidth: `${900 - 75}px`, // md={11}
+      }}
+      maxWidth={false}
+    >
+      <Box padding={3} mt={3} display="flex" flexDirection="column" alignItems="center" gap={2}>
+        <Box className={css.icon}>
+          <SvgIcon component={NestedSafeIcon} inheritViewBox fontSize="large" alt="Nested Safe" />
+        </Box>
+        <Typography data-testid="transaction-status" variant="h6" marginTop={2} fontWeight={700}>
+          A nested transaction was created
+        </Typography>
+        <Typography variant="body2" mb={3}>
+          Once confirmed and executed this signer transaction will confirm the child Safe&apos;s transaction.
+        </Typography>
+        <Stack spacing={2} width="70%">
+          <Box display="flex" flexDirection="column" alignItems="start" gap={1}>
+            <Typography variant="body2" color="text.secondary">
+              Parent Safe
+            </Typography>
+            <EthHashInfo
+              address={cachedPendingTx.signerAddress}
+              name={parentSafeAddress}
+              isAddressBookName={Boolean(parentSafeAddress)}
+              shortAddress={false}
+            />
+          </Box>
+          <Stack direction="row" spacing={2} alignItems="center" pl={1}>
+            <SvgIcon component={ArrowDownIcon} fontSize="medium" color="border" inheritViewBox />
+            <Typography
+              component="code"
+              variant="body2"
+              color="primary.light"
+              sx={{
+                backgroundColor: 'background.main',
+                px: 1,
+                py: 0.5,
+                borderRadius: 0.5,
+                fontFamily: 'monospace',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              approveHash
+            </Typography>
+          </Stack>
+          <Box display="flex" flexDirection="column" alignItems="start" gap={1}>
+            <Typography variant="body2" color="text.secondary">
+              Current Safe
+            </Typography>
+            <EthHashInfo
+              address={cachedPendingTx.safeAddress}
+              name={currentSafeAddress}
+              isAddressBookName={Boolean(currentSafeAddress)}
+              shortAddress={false}
+            />
+          </Box>
+        </Stack>
+        <Track {...MODALS_EVENTS.OPEN_PARENT_TX}>
+          <Link
+            href={
+              isSafeTxHash
+                ? {
+                    pathname: AppRoutes.transactions.tx,
+                    query: {
+                      safe: cachedPendingTx.signerAddress,
+                      chainId: cachedPendingTx.chainId,
+                      id: cachedPendingTx.txHashOrParentSafeTxHash,
+                    },
+                  }
+                : {
+                    pathname: AppRoutes.transactions.queue,
+                    query: {
+                      safe: cachedPendingTx.signerAddress,
+                      chainId: cachedPendingTx.chainId,
+                    },
+                  }
+            }
+            passHref
+            legacyBehavior
+          >
+            <ExternalLink mode="button">Open the transaction</ExternalLink>
+          </Link>
+        </Track>
+      </Box>
+    </Container>
+  )
+}
+
+export default NestedTxSuccessScreen
diff --git a/src/components/tx-flow/flows/NestedTxSuccessScreen/styles.module.css b/src/components/tx-flow/flows/NestedTxSuccessScreen/styles.module.css
new file mode 100644
index 0000000000..0b3beb0b53
--- /dev/null
+++ b/src/components/tx-flow/flows/NestedTxSuccessScreen/styles.module.css
@@ -0,0 +1,7 @@
+.icon {
+  border-radius: 100%;
+  background-color: var(--color-background-light);
+  height: 100px;
+  width: 100px;
+  padding-top: 30px;
+}
diff --git a/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.test.tsx b/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.test.tsx
index 13101e0591..a48d0cb15b 100644
--- a/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.test.tsx
+++ b/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.test.tsx
@@ -6,8 +6,10 @@ import * as execThroughRoleHooks from '@/components/tx/SignOrExecuteForm/Execute
 import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 import { SafeAppAccessPolicyTypes } from '@safe-global/safe-gateway-typescript-sdk'
 import ReviewSignMessageOnChain from '@/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain'
-import { JsonRpcProvider, zeroPadValue } from 'ethers'
-import { act } from 'react'
+import { JsonRpcProvider } from 'ethers'
+import { act } from '@testing-library/react'
+import { faker } from '@faker-js/faker'
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import type { SafeTxContextParams } from '../../SafeTxProvider'
 import { SafeTxContext } from '../../SafeTxProvider'
 import { createSafeTx } from '@/tests/builders/safeTx'
@@ -24,17 +26,15 @@ describe('ReviewSignMessageOnChain', () => {
       false,
     ])
     jest.spyOn(web3, 'getWeb3ReadOnly').mockImplementation(() => new JsonRpcProvider())
-    jest.spyOn(useSafeInfo, 'default').mockImplementation(
-      () =>
-        ({
-          safe: {
-            address: {
-              value: zeroPadValue('0x01', 20),
-            },
-            version: '1.3.0',
-          } as ReturnType<typeof useSafeInfo.default>['safe'],
-        }) as ReturnType<typeof useSafeInfo.default>,
-    )
+    const safeAddress = faker.finance.ethereumAddress()
+    jest.spyOn(useSafeInfo, 'default').mockReturnValue({
+      safeAddress,
+      safe: extendedSafeInfoBuilder()
+        .with({ address: { value: safeAddress } })
+        .build(),
+      safeLoaded: true,
+      safeLoading: false,
+    })
 
     await act(async () => {
       render(
diff --git a/src/components/tx-flow/flows/index.ts b/src/components/tx-flow/flows/index.ts
index 48335b9bb8..b842818db7 100644
--- a/src/components/tx-flow/flows/index.ts
+++ b/src/components/tx-flow/flows/index.ts
@@ -22,6 +22,7 @@ export const SafeAppsTxFlow = dynamic(() => import('./SafeAppsTx'))
 export const SignMessageFlow = dynamic(() => import('./SignMessage'))
 export const SignMessageOnChainFlow = dynamic(() => import('./SignMessageOnChain'))
 export const SuccessScreenFlow = dynamic(() => import('./SuccessScreen'))
+export const NestedTxSuccessScreenFlow = dynamic(() => import('./NestedTxSuccessScreen'))
 export const TokenTransferFlow = dynamic(() => import('./TokenTransfer'))
 export const UpdateSafeFlow = dynamic(() => import('./UpdateSafe'))
 export const UpsertRecoveryFlow = dynamic(() => import('./UpsertRecovery'))
diff --git a/src/components/tx-flow/index.tsx b/src/components/tx-flow/index.tsx
index f1895a350a..be1f3d66c4 100644
--- a/src/components/tx-flow/index.tsx
+++ b/src/components/tx-flow/index.tsx
@@ -1,9 +1,10 @@
 import { createContext, type ReactElement, type ReactNode, useState, useEffect, useCallback, useRef } from 'react'
 import { usePathname } from 'next/navigation'
 import TxModalDialog from '@/components/common/TxModalDialog'
-import { SuccessScreenFlow } from './flows'
+import { SuccessScreenFlow, NestedTxSuccessScreenFlow } from './flows'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import useChainId from '@/hooks/useChainId'
+import { useWalletContext } from '@/hooks/wallets/useWallet'
 
 const noop = () => {}
 
@@ -33,6 +34,7 @@ export const TxModalProvider = ({ children }: { children: ReactNode }): ReactEle
   const prevSafeId = useRef<string>(safeId ?? '')
   const pathname = usePathname()
   const prevPathname = useRef<string | null>(pathname)
+  const { setSignerAddress } = useWalletContext() ?? {}
 
   const handleModalClose = useCallback(() => {
     if (shouldWarn.current && !confirmClose()) {
@@ -41,7 +43,9 @@ export const TxModalProvider = ({ children }: { children: ReactNode }): ReactEle
     onClose.current()
     onClose.current = noop
     setFlow(undefined)
-  }, [])
+
+    setSignerAddress?.(undefined)
+  }, [setSignerAddress])
 
   // Open a new tx flow, close the previous one if any
   const setTxFlow = useCallback(
@@ -50,7 +54,7 @@ export const TxModalProvider = ({ children }: { children: ReactNode }): ReactEle
         if (prev === newTxFlow) return prev
 
         // If a new flow is triggered, close the current one
-        if (prev && newTxFlow && newTxFlow.type !== SuccessScreenFlow) {
+        if (prev && newTxFlow && newTxFlow.type !== SuccessScreenFlow && newTxFlow.type !== NestedTxSuccessScreenFlow) {
           if (shouldWarn.current && !confirmClose()) {
             return prev
           }
diff --git a/src/components/tx/SignOrExecuteForm/SignForm.tsx b/src/components/tx/SignOrExecuteForm/SignForm.tsx
index 6e45dd7a29..8673d781cc 100644
--- a/src/components/tx/SignOrExecuteForm/SignForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/SignForm.tsx
@@ -17,6 +17,8 @@ import WalletRejectionError from '@/components/tx/SignOrExecuteForm/WalletReject
 import BatchButton from './BatchButton'
 import { asError } from '@/services/exceptions/utils'
 import { isWalletRejection } from '@/utils/wallets'
+import { useSigner } from '@/hooks/wallets/useWallet'
+import { NestedTxSuccessScreenFlow } from '@/components/tx-flow/flows'
 
 export const SignForm = ({
   safeTx,
@@ -47,6 +49,7 @@ export const SignForm = ({
   const { setTxFlow } = useContext(TxModalContext)
   const { needsRiskConfirmation, isRiskConfirmed, setIsRiskIgnored } = txSecurity
   const hasSigned = useAlreadySigned(safeTx)
+  const signer = useSigner()
 
   // On modal submit
   const handleSubmit = async (e: SyntheticEvent, isAddingToBatch = false) => {
@@ -83,7 +86,11 @@ export const SignForm = ({
       onSubmit?.(resultTxId)
     }
 
-    setTxFlow(undefined)
+    if (signer?.isSafe) {
+      setTxFlow(<NestedTxSuccessScreenFlow txId={resultTxId} />, undefined, false)
+    } else {
+      setTxFlow(undefined)
+    }
   }
 
   const onBatchClick = (e: SyntheticEvent) => {
diff --git a/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx
index 2aec75bbbf..f5944f1a52 100644
--- a/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx
@@ -38,6 +38,9 @@ import { useApprovalInfos } from '../ApprovalEditor/hooks/useApprovalInfos'
 import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 import NetworkWarning from '@/components/new-safe/create/NetworkWarning'
 import ConfirmationView from '../confirmation-views'
+import { SignerForm } from './SignerForm'
+import { useSigner } from '@/hooks/wallets/useWallet'
+import { isNestedConfirmationTxInfo } from '@/utils/transaction-guards'
 
 export type SubmitCallback = (txId: string, isExecuted?: boolean) => void
 
@@ -61,15 +64,25 @@ const trackTxEvents = (
   isExecuted: boolean,
   isRoleExecution: boolean,
   isProposerCreation: boolean,
+  isParentSigner: boolean,
   origin?: string,
 ) => {
-  const creationEvent = isRoleExecution
-    ? TX_EVENTS.CREATE_VIA_ROLE
-    : isProposerCreation
-      ? TX_EVENTS.CREATE_VIA_PROPOSER
-      : TX_EVENTS.CREATE
-  const executionEvent = isRoleExecution ? TX_EVENTS.EXECUTE_VIA_ROLE : TX_EVENTS.EXECUTE
-  const event = isCreation ? creationEvent : isExecuted ? executionEvent : TX_EVENTS.CONFIRM
+  const isNestedConfirmation = !!details && isNestedConfirmationTxInfo(details.txInfo)
+
+  const creationEvent = getCreationEvent({ isParentSigner, isRoleExecution, isProposerCreation })
+  const confirmationEvent = getConfirmationEvent({ isParentSigner, isNestedConfirmation })
+  const executionEvent = getExecutionEvent({ isParentSigner, isNestedConfirmation, isRoleExecution })
+
+  const event = (() => {
+    if (isCreation) {
+      return creationEvent
+    }
+    if (isExecuted) {
+      return executionEvent
+    }
+    return confirmationEvent
+  })()
+
   const txType = getTransactionTrackingType(details, origin)
   trackEvent({ ...event, label: txType })
 
@@ -79,6 +92,42 @@ const trackTxEvents = (
   }
 }
 
+function getCreationEvent(args: { isParentSigner: boolean; isRoleExecution: boolean; isProposerCreation: boolean }) {
+  if (args.isParentSigner) {
+    return TX_EVENTS.CREATE_VIA_PARENT
+  }
+  if (args.isRoleExecution) {
+    return TX_EVENTS.CREATE_VIA_ROLE
+  }
+  if (args.isProposerCreation) {
+    return TX_EVENTS.CREATE_VIA_PROPOSER
+  }
+  return TX_EVENTS.CREATE
+}
+
+function getConfirmationEvent(args: { isParentSigner: boolean; isNestedConfirmation: boolean }) {
+  if (args.isParentSigner) {
+    return TX_EVENTS.CONFIRM_VIA_PARENT
+  }
+  if (args.isNestedConfirmation) {
+    return TX_EVENTS.CONFIRM_IN_PARENT
+  }
+  return TX_EVENTS.CONFIRM
+}
+
+function getExecutionEvent(args: { isParentSigner: boolean; isNestedConfirmation: boolean; isRoleExecution: boolean }) {
+  if (args.isParentSigner) {
+    return TX_EVENTS.EXECUTE_VIA_PARENT
+  }
+  if (args.isNestedConfirmation) {
+    return TX_EVENTS.EXECUTE_IN_PARENT
+  }
+  if (args.isRoleExecution) {
+    return TX_EVENTS.EXECUTE_VIA_ROLE
+  }
+  return TX_EVENTS.EXECUTE
+}
+
 export const SignOrExecuteForm = ({
   chainId,
   safeTx,
@@ -104,6 +153,7 @@ export const SignOrExecuteForm = ({
   const isApproval = readableApprovals && readableApprovals.length > 0
   const { safe } = useSafeInfo()
   const isSafeOwner = useIsSafeOwner()
+  const signer = useSigner()
   const isProposer = useIsWalletProposer()
   const isProposing = isProposer && !isSafeOwner && isCreation
   const isCounterfactualSafe = !safe.deployed
@@ -131,9 +181,17 @@ export const SignOrExecuteForm = ({
 
       const { data: details } = await trigger({ chainId, txId })
       // Track tx event
-      trackTxEvents(details, !!isCreation, isExecuted, isRoleExecution, isProposerCreation, props.origin)
+      trackTxEvents(
+        details,
+        !!isCreation,
+        isExecuted,
+        isRoleExecution,
+        isProposerCreation,
+        !!signer?.isSafe,
+        props.origin,
+      )
     },
-    [chainId, isCreation, onSubmit, props.origin, trigger],
+    [chainId, isCreation, onSubmit, trigger, signer?.isSafe, props.origin],
   )
 
   const onRoleExecutionSubmit = useCallback<typeof onFormSubmit>(
@@ -172,6 +230,8 @@ export const SignOrExecuteForm = ({
 
       {!isCounterfactualSafe && !props.isRejection && <TxChecks />}
 
+      <SignerForm willExecute={willExecute} />
+
       <TxCard>
         <ConfirmationTitle
           variant={
diff --git a/src/components/tx/SignOrExecuteForm/SignerForm/index.tsx b/src/components/tx/SignOrExecuteForm/SignerForm/index.tsx
new file mode 100644
index 0000000000..07b8e1c6ec
--- /dev/null
+++ b/src/components/tx/SignOrExecuteForm/SignerForm/index.tsx
@@ -0,0 +1,115 @@
+import {
+  Box,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SvgIcon,
+  Tooltip,
+  Typography,
+  type SelectChangeEvent,
+} from '@mui/material'
+import { useNestedSafeOwners } from '@/hooks/useNestedSafeOwners'
+import { useWalletContext } from '@/hooks/wallets/useWallet'
+import EthHashInfo from '@/components/common/EthHashInfo'
+import { useCallback, useContext, useMemo } from 'react'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import TxCard from '@/components/tx-flow/common/TxCard'
+import InfoIcon from '@/public/images/notifications/info.svg'
+import SignatureIcon from '@/public/images/transactions/signature.svg'
+
+import css from './styles.module.css'
+import { sameAddress } from '@/utils/addresses'
+import { SafeTxContext } from '@/components/tx-flow/SafeTxProvider'
+import { MODALS_EVENTS, trackEvent } from '@/services/analytics'
+import { useIsNestedSafeOwner } from '@/hooks/useIsNestedSafeOwner'
+
+export const SignerForm = ({ willExecute }: { willExecute?: boolean }) => {
+  const { signer, setSignerAddress, connectedWallet: wallet } = useWalletContext() ?? {}
+  const nestedSafeOwners = useNestedSafeOwners()
+  const signerAddress = signer?.address
+  const { safe } = useSafeInfo()
+  const { safeTx } = useContext(SafeTxContext)
+  const isNestedOwner = useIsNestedSafeOwner()
+
+  const onChange = (event: SelectChangeEvent<string>) => {
+    trackEvent(MODALS_EVENTS.CHANGE_SIGNER)
+    setSignerAddress?.(event.target.value)
+  }
+
+  const isOptionEnabled = useCallback(
+    (address: string) => {
+      if (!safeTx) {
+        return true
+      }
+
+      if (safeTx.signatures.size < safe.threshold) {
+        const signers = Array.from(safeTx.signatures.keys())
+        return !signers.some((key) => sameAddress(key, address))
+      }
+
+      return true
+    },
+    [safeTx, safe.threshold],
+  )
+
+  const options = useMemo(() => {
+    if (!wallet) {
+      return []
+    }
+    const owners = new Set(nestedSafeOwners ?? [])
+
+    if (willExecute || safe.owners.some((owner) => sameAddress(owner.value, wallet.address))) {
+      owners.add(wallet.address)
+    }
+
+    return Array.from(owners)
+  }, [nestedSafeOwners, safe.owners, wallet, willExecute])
+
+  if (!wallet || !isNestedOwner) {
+    return null
+  }
+
+  return (
+    <TxCard>
+      <Typography variant="h5" display="flex" gap={1} alignItems="center">
+        <SvgIcon component={SignatureIcon} inheritViewBox fontSize="small" />
+        {willExecute ? 'Execute' : 'Sign'} with
+        <Tooltip
+          title={`Your connected wallet controls other Safe Accounts, which can sign this transaction. You can select which Account to ${
+            willExecute ? 'execute' : 'sign'
+          } with.`}
+          arrow
+          placement="top"
+        >
+          <SvgIcon component={InfoIcon} inheritViewBox color="border" fontSize="small" />
+        </Tooltip>
+      </Typography>
+
+      <Box display="flex" alignItems="center" gap={1}>
+        <FormControl fullWidth size="medium">
+          <InputLabel id="signer-label">Signer Account</InputLabel>
+          <Select
+            className={css.signerForm}
+            labelId="signer-label"
+            label="Signer account"
+            fullWidth
+            onChange={onChange}
+            value={signerAddress ?? options.filter(isOptionEnabled)[0]}
+          >
+            {options?.map((owner) => (
+              <MenuItem key={owner} value={owner} disabled={!isOptionEnabled(owner)}>
+                <EthHashInfo address={owner} avatarSize={32} onlyName />
+                {!isOptionEnabled(owner) && (
+                  <Typography variant="caption" component="span" className={css.disabledPill}>
+                    Already signed
+                  </Typography>
+                )}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Box>
+    </TxCard>
+  )
+}
diff --git a/src/components/tx/SignOrExecuteForm/SignerForm/styles.module.css b/src/components/tx/SignOrExecuteForm/SignerForm/styles.module.css
new file mode 100644
index 0000000000..c4ebf3be80
--- /dev/null
+++ b/src/components/tx/SignOrExecuteForm/SignerForm/styles.module.css
@@ -0,0 +1,10 @@
+.signerForm :global .MuiOutlinedInput-notchedOutline {
+  border: 1px solid var(--color-border-light) !important;
+}
+
+.disabledPill {
+  background-color: var(--color-border-light);
+  border-radius: 4px;
+  color: var(--color-text-primary);
+  padding: 4px 8px;
+}
diff --git a/src/components/tx/SignOrExecuteForm/__tests__/SignerForm.test.tsx b/src/components/tx/SignOrExecuteForm/__tests__/SignerForm.test.tsx
new file mode 100644
index 0000000000..c96501f4e7
--- /dev/null
+++ b/src/components/tx/SignOrExecuteForm/__tests__/SignerForm.test.tsx
@@ -0,0 +1,131 @@
+import { useNestedSafeOwners } from '@/hooks/useNestedSafeOwners'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { render } from '@/tests/test-utils'
+import { SignerForm } from '../SignerForm'
+import { faker } from '@faker-js/faker'
+import { extendedSafeInfoBuilder, addressExBuilder } from '@/tests/builders/safe'
+import { generateRandomArray } from '@/tests/builders/utils'
+import { type Eip1193Provider } from 'ethers'
+import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
+import { type ReactElement, useState } from 'react'
+import { WalletContext } from '@/components/common/WalletProvider'
+
+jest.mock('@/hooks/useNestedSafeOwners')
+jest.mock('@/hooks/useSafeInfo')
+
+const TestWalletContextProvider = ({
+  connectedWallet,
+  children,
+}: {
+  connectedWallet: ConnectedWallet | null
+  children: ReactElement
+}) => {
+  const [signerAddress, setSignerAddress] = useState<string>()
+
+  return (
+    <WalletContext.Provider
+      value={
+        connectedWallet
+          ? {
+              connectedWallet,
+              setSignerAddress,
+              signer: {
+                address: signerAddress || connectedWallet.address,
+                chainId: '1',
+                provider: null,
+                isSafe: Boolean(signerAddress),
+              },
+            }
+          : null
+      }
+    >
+      {children}
+    </WalletContext.Provider>
+  )
+}
+
+describe('SignerForm', () => {
+  const mockUseSafeInfo = useSafeInfo as jest.MockedFunction<typeof useSafeInfo>
+  const mockUseNestedSafeOwners = useNestedSafeOwners as jest.MockedFunction<typeof useNestedSafeOwners>
+
+  const safeAddress = faker.finance.ethereumAddress()
+  // Safe with 3 owners
+  const mockSafeInfo = {
+    safeAddress,
+    safe: extendedSafeInfoBuilder()
+      .with({ address: { value: safeAddress } })
+      .with({ chainId: '1' })
+      .with({ owners: generateRandomArray(() => addressExBuilder().build(), { min: 3, max: 3 }) })
+      .build(),
+    safeLoaded: true,
+    safeLoading: false,
+  }
+
+  const mockOwners = mockSafeInfo.safe.owners
+
+  beforeAll(() => {
+    mockUseSafeInfo.mockReturnValue(mockSafeInfo)
+  })
+
+  it('should not render anything if no wallet is connected', () => {
+    const result = render(
+      <TestWalletContextProvider connectedWallet={null}>
+        <SignerForm />
+      </TestWalletContextProvider>,
+    )
+    expect(result.queryByText('Sign with')).toBeNull()
+  })
+
+  it('should not render if there are no nested Safes', () => {
+    mockUseNestedSafeOwners.mockReturnValue([])
+
+    const result = render(
+      <TestWalletContextProvider
+        connectedWallet={{
+          address: faker.finance.ethereumAddress(),
+          chainId: '1',
+          label: 'MetaMask',
+          provider: {} as Eip1193Provider,
+        }}
+      >
+        <SignerForm />
+      </TestWalletContextProvider>,
+    )
+
+    expect(result.queryByText('Sign with')).toBeNull()
+  })
+
+  it('should render sign form if there are nested Safes', () => {
+    mockUseNestedSafeOwners.mockReturnValue([mockOwners[0].value])
+    const result = render(
+      <TestWalletContextProvider
+        connectedWallet={{
+          address: faker.finance.ethereumAddress(),
+          chainId: '1',
+          label: 'MetaMask',
+          provider: {} as Eip1193Provider,
+        }}
+      >
+        <SignerForm />
+      </TestWalletContextProvider>,
+    )
+    expect(result.queryByText('Sign with')).toBeVisible()
+  })
+
+  it('should render execution form if there are nested Safes', () => {
+    mockUseNestedSafeOwners.mockReturnValue([mockOwners[0].value])
+    const result = render(
+      <TestWalletContextProvider
+        connectedWallet={{
+          address: faker.finance.ethereumAddress(),
+          chainId: '1',
+          label: 'MetaMask',
+          provider: {} as Eip1193Provider,
+        }}
+      >
+        <SignerForm willExecute />
+      </TestWalletContextProvider>,
+    )
+    expect(result.queryByText('Execute with')).toBeVisible()
+  })
+})
diff --git a/src/components/tx/SignOrExecuteForm/hooks.test.ts b/src/components/tx/SignOrExecuteForm/__tests__/hooks.test.ts
similarity index 97%
rename from src/components/tx/SignOrExecuteForm/hooks.test.ts
rename to src/components/tx/SignOrExecuteForm/__tests__/hooks.test.ts
index b6099d9877..c0e3f5cdff 100644
--- a/src/components/tx/SignOrExecuteForm/hooks.test.ts
+++ b/src/components/tx/SignOrExecuteForm/__tests__/hooks.test.ts
@@ -17,11 +17,14 @@ import {
   useRecommendedNonce,
   useTxActions,
   useValidateNonce,
-} from './hooks'
+} from '../hooks'
 import * as recommendedNonce from '@/services/tx/tx-sender/recommendedNonce'
 import { defaultSafeInfo } from '@/store/safeInfoSlice'
 import { chainBuilder } from '@/tests/builders/chains'
 import * as useChains from '@/hooks/useChains'
+import { MockEip1193Provider } from '@/tests/mocks/providers'
+import { type SignerWallet } from '@/components/common/WalletProvider'
+import { type NestedWallet } from '@/utils/nested-safe-wallet'
 
 const chainInfo = chainBuilder().with({ chainId: '1' }).build()
 
@@ -49,11 +52,11 @@ describe('SignOrExecute hooks', () => {
     } as unknown as OnboardAPI)
 
     // Wallet
-    jest.spyOn(wallet, 'default').mockReturnValue({
+    jest.spyOn(wallet, 'useSigner').mockReturnValue({
       chainId: '1',
-      label: 'MetaMask',
       address: '0x1234567890000000000000000000000000000000',
-    } as unknown as ConnectedWallet)
+      provider: MockEip1193Provider,
+    } as unknown as NestedWallet)
 
     jest.spyOn(useChains, 'useCurrentChain').mockReturnValue(chainInfo)
   })
@@ -564,11 +567,11 @@ describe('SignOrExecute hooks', () => {
   describe('useAlreadySigned', () => {
     it('should return true if wallet already signed a tx', () => {
       // Wallet
-      jest.spyOn(wallet, 'default').mockReturnValue({
+      jest.spyOn(wallet, 'useSigner').mockReturnValue({
         chainId: '1',
-        label: 'MetaMask',
         address: '0x1234567890000000000000000000000000000000',
-      } as unknown as ConnectedWallet)
+        provider: MockEip1193Provider,
+      } as SignerWallet)
 
       const tx = createSafeTx()
       tx.addSignature({
@@ -584,11 +587,11 @@ describe('SignOrExecute hooks', () => {
 
     it('should return false if wallet has not signed a tx yet', () => {
       // Wallet
-      jest.spyOn(wallet, 'default').mockReturnValue({
+      jest.spyOn(wallet, 'useSigner').mockReturnValue({
         chainId: '1',
-        label: 'MetaMask',
         address: '0x1234567890000000000000000000000000000000',
-      } as unknown as ConnectedWallet)
+        provider: MockEip1193Provider,
+      } as SignerWallet)
 
       const tx = createSafeTx()
       tx.addSignature({
diff --git a/src/components/tx/SignOrExecuteForm/hooks.ts b/src/components/tx/SignOrExecuteForm/hooks.ts
index 70df0774be..2474b104c6 100644
--- a/src/components/tx/SignOrExecuteForm/hooks.ts
+++ b/src/components/tx/SignOrExecuteForm/hooks.ts
@@ -1,9 +1,9 @@
-import { assertTx, assertWallet, assertOnboard, assertChainInfo } from '@/utils/helpers'
+import { assertTx, assertOnboard, assertChainInfo, assertProvider } from '@/utils/helpers'
 import { useMemo } from 'react'
 import { type TransactionOptions, type SafeTransaction } from '@safe-global/safe-core-sdk-types'
 import { sameString } from '@safe-global/protocol-kit/dist/src/utils'
 import useSafeInfo from '@/hooks/useSafeInfo'
-import useWallet from '@/hooks/wallets/useWallet'
+import useWallet, { useSigner } from '@/hooks/wallets/useWallet'
 import useOnboard from '@/hooks/wallets/useOnboard'
 import { isSmartContractWallet } from '@/utils/wallets'
 import {
@@ -42,8 +42,8 @@ type txDetails = AsyncResult<TransactionDetails>
 
 export const useProposeTx = (safeTx?: SafeTransaction, txId?: string, origin?: string): txDetails => {
   const { safe } = useSafeInfo()
-  const wallet = useWallet()
-  const sender = wallet?.address || safe.owners?.[0]?.value
+  const signer = useSigner()
+  const sender = signer?.address || safe.owners?.[0]?.value
 
   return useAsync(
     async () => {
@@ -61,6 +61,7 @@ export const useProposeTx = (safeTx?: SafeTransaction, txId?: string, origin?: s
 export const useTxActions = (): TxActions => {
   const { safe } = useSafeInfo()
   const onboard = useOnboard()
+  const signer = useSigner()
   const wallet = useWallet()
   const [addTxToBatch] = useUpdateBatch()
   const chain = useCurrentChain()
@@ -87,48 +88,56 @@ export const useTxActions = (): TxActions => {
 
     const addToBatch: TxActions['addToBatch'] = async (safeTx, origin) => {
       assertTx(safeTx)
-      assertWallet(wallet)
+      assertProvider(signer?.provider)
 
-      const tx = await _propose(wallet.address, safeTx, undefined, origin)
+      const tx = await _propose(signer.address, safeTx, undefined, origin)
       await addTxToBatch(tx)
       return tx.txId
     }
 
     const signRelayedTx = async (safeTx: SafeTransaction, txId?: string): Promise<SafeTransaction> => {
       assertTx(safeTx)
-      assertWallet(wallet)
+      assertProvider(signer?.provider)
 
       // Smart contracts cannot sign transactions off-chain
-      if (await isSmartContractWallet(wallet.chainId, wallet.address)) {
+      if (await isSmartContractWallet(signer.chainId, signer.address)) {
         throw new Error('Cannot relay an unsigned transaction from a smart contract wallet')
       }
-      return await dispatchTxSigning(safeTx, version, wallet.provider, txId)
+      return await dispatchTxSigning(safeTx, version, signer.provider, txId)
     }
 
     const signTx: TxActions['signTx'] = async (safeTx, txId, origin) => {
       assertTx(safeTx)
-      assertWallet(wallet)
+      assertProvider(signer?.provider)
       assertOnboard(onboard)
 
       // Smart contract wallets must sign via an on-chain tx
-      if (await isSmartContractWallet(wallet.chainId, wallet.address)) {
+      if (signer.isSafe || (await isSmartContractWallet(signer.chainId, signer.address))) {
         // If the first signature is a smart contract wallet, we have to propose w/o signatures
         // Otherwise the backend won't pick up the tx
         // The signature will be added once the on-chain signature is indexed
-        const id = txId || (await _propose(wallet.address, safeTx, txId, origin)).txId
-        await dispatchOnChainSigning(safeTx, id, wallet.provider, chainId, wallet.address, safeAddress)
+        const id = txId || (await _propose(signer.address, safeTx, txId, origin)).txId
+        await dispatchOnChainSigning(
+          safeTx,
+          id,
+          signer.provider,
+          chainId,
+          signer.address,
+          safeAddress,
+          Boolean(signer.isSafe),
+        )
         return id
       }
 
       // Otherwise, sign off-chain
-      const signedTx = await dispatchTxSigning(safeTx, version, wallet.provider, txId)
-      const tx = await _propose(wallet.address, signedTx, txId, origin)
+      const signedTx = await dispatchTxSigning(safeTx, version, signer.provider, txId)
+      const tx = await _propose(signer.address, signedTx, txId, origin)
       return tx.txId
     }
 
     const signProposerTx: TxActions['signProposerTx'] = async (safeTx) => {
       assertTx(safeTx)
-      assertWallet(wallet)
+      assertProvider(wallet?.provider)
       assertOnboard(onboard)
 
       const signedTx = await dispatchProposerTxSigning(safeTx, wallet)
@@ -139,7 +148,7 @@ export const useTxActions = (): TxActions => {
 
     const executeTx: TxActions['executeTx'] = async (txOptions, safeTx, txId, origin, isRelayed) => {
       assertTx(safeTx)
-      assertWallet(wallet)
+      assertProvider(signer?.provider)
       assertOnboard(onboard)
       assertChainInfo(chain)
 
@@ -153,7 +162,7 @@ export const useTxActions = (): TxActions => {
 
       // Propose the tx if there's no id yet ("immediate execution")
       if (!txId || rePropose) {
-        tx = await _propose(wallet.address, safeTx, txId, origin)
+        tx = await _propose(signer.address, safeTx, txId, origin)
         txId = tx.txId
       }
 
@@ -161,16 +170,15 @@ export const useTxActions = (): TxActions => {
       if (isRelayed) {
         await dispatchTxRelay(safeTx, safe, txId, chain, txOptions.gasLimit)
       } else {
-        const isSmartAccount = await isSmartContractWallet(wallet.chainId, wallet.address)
-
-        await dispatchTxExecution(safeTx, txOptions, txId, wallet.provider, wallet.address, safeAddress, isSmartAccount)
+        const isSmartAccount = await isSmartContractWallet(signer.chainId, signer.address)
+        await dispatchTxExecution(safeTx, txOptions, txId, signer.provider, signer.address, safeAddress, isSmartAccount)
       }
 
       return txId
     }
 
     return { addToBatch, signTx, executeTx, signProposerTx, proposeTx }
-  }, [safe, wallet, addTxToBatch, onboard, chain])
+  }, [safe, wallet, signer?.provider, signer?.address, signer?.chainId, signer?.isSafe, addTxToBatch, onboard, chain])
 }
 
 export const useValidateNonce = (safeTx: SafeTransaction | undefined): boolean => {
@@ -236,7 +244,7 @@ export const useSafeTxGas = (safeTx: SafeTransaction | undefined): string | unde
 }
 
 export const useAlreadySigned = (safeTx: SafeTransaction | undefined): boolean => {
-  const wallet = useWallet()
+  const wallet = useSigner()
   const hasSigned =
     safeTx && wallet && (safeTx.signatures.has(wallet.address.toLowerCase()) || safeTx.signatures.has(wallet.address))
   return Boolean(hasSigned)
diff --git a/src/components/tx/security/blockaid/__tests__/useBlockaid.test.ts b/src/components/tx/security/blockaid/__tests__/useBlockaid.test.ts
index 0043375c3f..f8b3fc81d1 100644
--- a/src/components/tx/security/blockaid/__tests__/useBlockaid.test.ts
+++ b/src/components/tx/security/blockaid/__tests__/useBlockaid.test.ts
@@ -1,5 +1,4 @@
 import * as useChains from '@/hooks/useChains'
-import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import * as useWallet from '@/hooks/wallets/useWallet'
 import { SecuritySeverity } from '@/services/security/modules/types'
 import { eip712TypedDataBuilder } from '@/tests/builders/messages'
@@ -12,6 +11,7 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import { safeInfoBuilder } from '@/tests/builders/safe'
 import { CLASSIFICATION_MAPPING, REASON_MAPPING } from '..'
 import { renderHook, waitFor } from '@/tests/test-utils'
+import { type SignerWallet } from '@/components/common/WalletProvider'
 
 const setupFetchStub = (data: any) => () => {
   return Promise.resolve({
@@ -37,7 +37,7 @@ jest.mock('@/hooks/useSafeInfo')
 const mockUseSafeInfo = useSafeInfo as jest.MockedFunction<typeof useSafeInfo>
 
 describe.each([TEST_CASES.MESSAGE, TEST_CASES.TRANSACTION])('useBlockaid for %s', (testCase) => {
-  let mockUseWallet: jest.SpyInstance<ConnectedWallet | null, []>
+  let mockUseSigner: jest.SpyInstance<SignerWallet | null, []>
 
   const mockPayload = testCase === TEST_CASES.TRANSACTION ? safeTxBuilder().build() : eip712TypedDataBuilder().build()
 
@@ -46,8 +46,8 @@ describe.each([TEST_CASES.MESSAGE, TEST_CASES.TRANSACTION])('useBlockaid for %s'
   beforeEach(() => {
     jest.resetAllMocks()
     jest.useFakeTimers()
-    mockUseWallet = jest.spyOn(useWallet, 'default')
-    mockUseWallet.mockImplementation(() => null)
+    mockUseSigner = jest.spyOn(useWallet, 'useSigner')
+    mockUseSigner.mockImplementation(() => null)
     mockUseSafeInfo.mockReturnValue({
       safe: { ...mockSafeInfo, deployed: true },
       safeAddress: mockSafeInfo.address.value,
@@ -81,7 +81,7 @@ describe.each([TEST_CASES.MESSAGE, TEST_CASES.TRANSACTION])('useBlockaid for %s'
   it('should return undefined without feature enabled', async () => {
     const walletAddress = toBeHex('0x1', 20)
 
-    mockUseWallet.mockImplementation(() => ({
+    mockUseSigner.mockImplementation(() => ({
       address: walletAddress,
       chainId: '1',
       label: 'Testwallet',
@@ -102,7 +102,7 @@ describe.each([TEST_CASES.MESSAGE, TEST_CASES.TRANSACTION])('useBlockaid for %s'
   it('should handle request errors', async () => {
     const walletAddress = toBeHex('0x1', 20)
 
-    mockUseWallet.mockImplementation(() => ({
+    mockUseSigner.mockImplementation(() => ({
       address: walletAddress,
       chainId: '1',
       label: 'Testwallet',
@@ -126,7 +126,7 @@ describe.each([TEST_CASES.MESSAGE, TEST_CASES.TRANSACTION])('useBlockaid for %s'
   it('should handle failed simulations', async () => {
     const walletAddress = toBeHex('0x1', 20)
 
-    mockUseWallet.mockImplementation(() => ({
+    mockUseSigner.mockImplementation(() => ({
       address: walletAddress,
       chainId: '1',
       label: 'Testwallet',
@@ -216,7 +216,7 @@ describe.each([TEST_CASES.MESSAGE, TEST_CASES.TRANSACTION])('useBlockaid for %s'
       },
     }
 
-    mockUseWallet.mockImplementation(() => ({
+    mockUseSigner.mockImplementation(() => ({
       address: walletAddress,
       chainId: '1',
       label: 'Testwallet',
diff --git a/src/components/tx/security/blockaid/useBlockaid.ts b/src/components/tx/security/blockaid/useBlockaid.ts
index c328e97a92..f09a02fc0f 100644
--- a/src/components/tx/security/blockaid/useBlockaid.ts
+++ b/src/components/tx/security/blockaid/useBlockaid.ts
@@ -1,7 +1,7 @@
 import useAsync, { type AsyncResult } from '@/hooks/useAsync'
 import { useHasFeature } from '@/hooks/useChains'
 import useSafeInfo from '@/hooks/useSafeInfo'
-import useWallet from '@/hooks/wallets/useWallet'
+import { useSigner } from '@/hooks/wallets/useWallet'
 import { MODALS_EVENTS, trackEvent } from '@/services/analytics'
 import type { SecurityResponse } from '@/services/security/modules/types'
 import { FEATURES } from '@/utils/chains'
@@ -19,12 +19,12 @@ export const useBlockaid = (
   data: SafeTransaction | EIP712TypedData | undefined,
 ): AsyncResult<SecurityResponse<BlockaidModuleResponse>> => {
   const { safe, safeAddress } = useSafeInfo()
-  const wallet = useWallet()
+  const signer = useSigner()
   const isFeatureEnabled = useHasFeature(FEATURES.RISK_MITIGATION)
 
   const [blockaidPayload, blockaidErrors, blockaidLoading] = useAsync<SecurityResponse<BlockaidModuleResponse>>(
     () => {
-      if (!isFeatureEnabled || !data || !wallet?.address) {
+      if (!isFeatureEnabled || !data || !signer?.address) {
         return
       }
 
@@ -32,12 +32,11 @@ export const useBlockaid = (
         chainId: Number(safe.chainId),
         data,
         safeAddress,
-        walletAddress: wallet.address,
+        walletAddress: signer.address,
         threshold: safe.threshold,
       })
     },
-
-    [safe.chainId, safe.threshold, safeAddress, data, wallet?.address, isFeatureEnabled],
+    [safe.chainId, safe.threshold, safeAddress, data, signer?.address, isFeatureEnabled],
     false,
   )
 
diff --git a/src/components/tx/security/tenderly/index.tsx b/src/components/tx/security/tenderly/index.tsx
index 7022849d28..9ad2f4c504 100644
--- a/src/components/tx/security/tenderly/index.tsx
+++ b/src/components/tx/security/tenderly/index.tsx
@@ -4,7 +4,7 @@ import { useContext, useEffect } from 'react'
 import type { ReactElement } from 'react'
 
 import useSafeInfo from '@/hooks/useSafeInfo'
-import useWallet from '@/hooks/wallets/useWallet'
+import { useSigner } from '@/hooks/wallets/useWallet'
 import CheckIcon from '@/public/images/common/check.svg'
 import CloseIcon from '@/public/images/common/close.svg'
 import { useDarkMode } from '@/hooks/useDarkMode'
@@ -34,7 +34,7 @@ export type TxSimulationProps = {
 // TODO: Test this component
 const TxSimulationBlock = ({ transactions, disabled, gasLimit, executionOwner }: TxSimulationProps): ReactElement => {
   const { safe } = useSafeInfo()
-  const wallet = useWallet()
+  const signer = useSigner()
   const isSafeOwner = useIsSafeOwner()
   const isDarkMode = useDarkMode()
   const { safeTx } = useContext(SafeTxContext)
@@ -44,14 +44,14 @@ const TxSimulationBlock = ({ transactions, disabled, gasLimit, executionOwner }:
   } = useContext(TxInfoContext)
 
   const handleSimulation = async () => {
-    if (!wallet) {
+    if (!signer) {
       return
     }
 
     simulateTransaction({
       safe,
       // fall back to the first owner of the safe in case the transaction is created by a proposer
-      executionOwner: (executionOwner ?? isSafeOwner) ? wallet.address : safe.owners[0].value,
+      executionOwner: (executionOwner ?? isSafeOwner) ? signer.address : safe.owners[0].value,
       transactions,
       gasLimit,
     } as SimulationTxParams)
diff --git a/src/features/myAccounts/hooks/useAllOwnedSafes.ts b/src/features/myAccounts/hooks/useAllOwnedSafes.ts
index b96e7007cb..4af05cd4aa 100644
--- a/src/features/myAccounts/hooks/useAllOwnedSafes.ts
+++ b/src/features/myAccounts/hooks/useAllOwnedSafes.ts
@@ -1,40 +1,25 @@
 import type { AllOwnedSafes } from '@safe-global/safe-gateway-typescript-sdk'
-import { getAllOwnedSafes } from '@safe-global/safe-gateway-typescript-sdk'
 import type { AsyncResult } from '@/hooks/useAsync'
-import useAsync from '@/hooks/useAsync'
 import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import { useEffect } from 'react'
+import { useGetAllOwnedSafesQuery } from '@/store/api/gateway'
+import { asError } from '@/services/exceptions/utils'
+import { skipToken } from '@reduxjs/toolkit/query'
 
 const CACHE_KEY = 'ownedSafesCache_'
 
-type OwnedSafesPerAddress = {
-  address: string | undefined
-  ownedSafes: AllOwnedSafes
-}
-
 const useAllOwnedSafes = (address: string): AsyncResult<AllOwnedSafes> => {
   const [cache, setCache] = useLocalStorage<AllOwnedSafes>(CACHE_KEY + address)
 
-  const [data, error, isLoading] = useAsync<OwnedSafesPerAddress>(async () => {
-    if (!address)
-      return {
-        ownedSafes: {},
-        address: undefined,
-      }
-    const ownedSafes = await getAllOwnedSafes(address)
-    return {
-      ownedSafes,
-      address,
-    }
-  }, [address])
+  const { data, error, isLoading } = useGetAllOwnedSafesQuery(address === '' ? skipToken : { walletAddress: address })
 
   useEffect(() => {
-    if (data?.ownedSafes != undefined && data.address === address) {
-      setCache(data.ownedSafes)
+    if (data != undefined) {
+      setCache(data)
     }
   }, [address, cache, data, setCache])
 
-  return [cache, error, isLoading]
+  return [cache, asError(error), isLoading]
 }
 
 export default useAllOwnedSafes
diff --git a/src/features/myAccounts/hooks/useAllSafes.ts b/src/features/myAccounts/hooks/useAllSafes.ts
index 6990098fad..11e1a32bbf 100644
--- a/src/features/myAccounts/hooks/useAllSafes.ts
+++ b/src/features/myAccounts/hooks/useAllSafes.ts
@@ -8,6 +8,7 @@ import useWallet from '@/hooks/wallets/useWallet'
 import { selectAllAddressBooks, selectAllVisitedSafes, selectUndeployedSafes } from '@/store/slices'
 import { sameAddress } from '@/utils/addresses'
 import useAllOwnedSafes from './useAllOwnedSafes'
+
 export type SafeItem = {
   chainId: string
   address: string
diff --git a/src/features/recovery/hooks/__tests__/useIsValidExecution.test.ts b/src/features/recovery/hooks/__tests__/useIsValidExecution.test.ts
index 4fb0e7c5f0..6ca079a063 100644
--- a/src/features/recovery/hooks/__tests__/useIsValidExecution.test.ts
+++ b/src/features/recovery/hooks/__tests__/useIsValidExecution.test.ts
@@ -52,7 +52,7 @@ describe('useIsValidExecution', () => {
     jest.resetAllMocks()
 
     jest.spyOn(web3, 'useWeb3ReadOnly').mockImplementation(() => mockReadOnlyProvider)
-    jest.spyOn(useWallet, 'default').mockReturnValue(mockWallet)
+    jest.spyOn(useWallet, 'useSigner').mockReturnValue(mockWallet)
     jest.spyOn(web3, 'createWeb3').mockImplementation(() => mockProvider)
   })
 
diff --git a/src/hooks/__tests__/useGasLimit.test.ts b/src/hooks/__tests__/useGasLimit.test.ts
index bfdf20d472..c63d061381 100644
--- a/src/hooks/__tests__/useGasLimit.test.ts
+++ b/src/hooks/__tests__/useGasLimit.test.ts
@@ -30,7 +30,9 @@ describe('useGasLimit', () => {
       getContractManager: () => contractManager,
     } as unknown as Safe)
 
-    jest.spyOn(useWallet, 'default').mockReturnValue(connectedWalletBuilder().with({ address: walletAddress }).build())
+    jest
+      .spyOn(useWallet, 'useSigner')
+      .mockReturnValue(connectedWalletBuilder().with({ address: walletAddress }).build())
     jest.spyOn(useSafeInfo, 'default').mockReturnValue({
       safe: { ...safeInfo, deployed: true },
       safeAddress: safeInfo.address.value,
@@ -49,7 +51,7 @@ describe('useGasLimit', () => {
   })
 
   it('should return undefined if no owner is connected', async () => {
-    jest.spyOn(useWallet, 'default').mockReturnValue(
+    jest.spyOn(useWallet, 'useSigner').mockReturnValue(
       connectedWalletBuilder()
         .with({
           address: undefined,
diff --git a/src/hooks/__tests__/useNestedSafeOwners.test.ts b/src/hooks/__tests__/useNestedSafeOwners.test.ts
new file mode 100644
index 0000000000..ed3d8b187e
--- /dev/null
+++ b/src/hooks/__tests__/useNestedSafeOwners.test.ts
@@ -0,0 +1,54 @@
+import { useNestedSafeOwners } from '../useNestedSafeOwners'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { faker } from '@faker-js/faker'
+import { addressExBuilder, extendedSafeInfoBuilder } from '@/tests/builders/safe'
+import { renderHook } from '@/tests/test-utils'
+import { generateRandomArray } from '@/tests/builders/utils'
+import useOwnedSafes from '../useOwnedSafes'
+
+jest.mock('@/hooks/useOwnedSafes')
+jest.mock('@/hooks/useSafeInfo')
+
+describe('useNestedSafeOwners', () => {
+  const mockUseSafeInfo = useSafeInfo as jest.MockedFunction<typeof useSafeInfo>
+  const mockUseOwnedSafes = useOwnedSafes as jest.MockedFunction<typeof useOwnedSafes>
+
+  const safeAddress = faker.finance.ethereumAddress()
+  // Safe with 3 owners
+  const mockSafeInfo = {
+    safeAddress,
+    safe: extendedSafeInfoBuilder()
+      .with({ address: { value: safeAddress } })
+      .with({ chainId: '1' })
+      .with({ owners: generateRandomArray(() => addressExBuilder().build(), { min: 3, max: 3 }) })
+      .build(),
+    safeLoaded: true,
+    safeLoading: false,
+  }
+
+  const mockOwners = mockSafeInfo.safe.owners
+
+  beforeAll(() => {
+    mockUseSafeInfo.mockReturnValue(mockSafeInfo)
+  })
+
+  it('should return undefined without owned Safes', () => {
+    mockUseOwnedSafes.mockReturnValue({})
+    const { result } = renderHook(() => useNestedSafeOwners())
+    expect(result.current).toEqual(undefined)
+  })
+
+  it('should return empty list if no owned Safe is in the owners', () => {
+    mockUseOwnedSafes.mockReturnValue({ '1': [faker.finance.ethereumAddress()] })
+    const { result } = renderHook(() => useNestedSafeOwners())
+    expect(result.current).toEqual([])
+  })
+
+  it('should return intersection of owners and owned Safes', () => {
+    mockUseOwnedSafes.mockReturnValue({
+      '1': [faker.finance.ethereumAddress(), mockOwners[0].value, mockOwners[1].value, mockOwners[2].value],
+    })
+    const { result } = renderHook(() => useNestedSafeOwners())
+    expect(result.current).toEqual([mockOwners[0].value, mockOwners[1].value, mockOwners[2].value])
+  })
+})
diff --git a/src/hooks/useGasLimit.ts b/src/hooks/useGasLimit.ts
index cd6f1626b5..73fcde6b83 100644
--- a/src/hooks/useGasLimit.ts
+++ b/src/hooks/useGasLimit.ts
@@ -7,7 +7,7 @@ import useAsync from '@/hooks/useAsync'
 import useChainId from '@/hooks/useChainId'
 import { useWeb3ReadOnly } from '@/hooks/wallets/web3'
 import chains from '@/config/chains'
-import useWallet from './wallets/useWallet'
+import { useSigner } from './wallets/useWallet'
 import { useSafeSDK } from './coreSDK/safeCoreSDK'
 import useIsSafeOwner from './useIsSafeOwner'
 import { Errors, logError } from '@/services/exceptions'
@@ -144,7 +144,7 @@ const useGasLimit = (
   const { safe } = useSafeInfo()
   const safeAddress = safe.address.value
   const threshold = safe.threshold
-  const wallet = useWallet()
+  const wallet = useSigner()
   const walletAddress = wallet?.address
   const isOwner = useIsSafeOwner()
   const currentChainId = useChainId()
diff --git a/src/hooks/useIsNestedSafeOwner.ts b/src/hooks/useIsNestedSafeOwner.ts
new file mode 100644
index 0000000000..10a2c87fb0
--- /dev/null
+++ b/src/hooks/useIsNestedSafeOwner.ts
@@ -0,0 +1,7 @@
+import { useMemo } from 'react'
+import { useNestedSafeOwners } from './useNestedSafeOwners'
+
+export const useIsNestedSafeOwner = () => {
+  const nestedOwners = useNestedSafeOwners()
+  return useMemo(() => nestedOwners && nestedOwners.length > 0, [nestedOwners])
+}
diff --git a/src/hooks/useIsSafeOwner.ts b/src/hooks/useIsSafeOwner.ts
index e1118c5818..4e6f73c8bd 100644
--- a/src/hooks/useIsSafeOwner.ts
+++ b/src/hooks/useIsSafeOwner.ts
@@ -1,12 +1,12 @@
 import useSafeInfo from '@/hooks/useSafeInfo'
-import useWallet from '@/hooks/wallets/useWallet'
 import { isOwner } from '@/utils/transaction-guards'
+import { useSigner } from './wallets/useWallet'
 
 const useIsSafeOwner = () => {
   const { safe } = useSafeInfo()
-  const wallet = useWallet()
+  const signer = useSigner()
 
-  return isOwner(safe.owners, wallet?.address)
+  return isOwner(safe.owners, signer?.address)
 }
 
 export default useIsSafeOwner
diff --git a/src/hooks/useIsValidExecution.ts b/src/hooks/useIsValidExecution.ts
index e13194b007..0548d88c08 100644
--- a/src/hooks/useIsValidExecution.ts
+++ b/src/hooks/useIsValidExecution.ts
@@ -9,9 +9,11 @@ import { type JsonRpcProvider } from 'ethers'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import { getCurrentGnosisSafeContract } from '@/services/contracts/safeContracts'
 import useSafeInfo from '@/hooks/useSafeInfo'
-import useWallet from '@/hooks/wallets/useWallet'
+import { useSigner } from '@/hooks/wallets/useWallet'
 import { encodeSignatures } from '@/services/tx/encodeSignatures'
 import useIsSafeOwner from '@/hooks/useIsSafeOwner'
+import { type NestedWallet } from '@/utils/nested-safe-wallet'
+import { assertProvider } from '@/utils/helpers'
 
 const isContractError = (error: EthersError) => {
   if (!error.reason) return false
@@ -22,10 +24,12 @@ const isContractError = (error: EthersError) => {
 // Monkey patch the signerProvider to proxy requests to the "readonly" provider if on the wrong chain
 // This is ONLY used to check the validity of a transaction in `useIsValidExecution`
 export const getPatchedSignerProvider = (
-  wallet: ConnectedWallet,
+  wallet: ConnectedWallet | NestedWallet,
   chainId: SafeInfo['chainId'],
   readOnlyProvider: JsonRpcProvider,
 ) => {
+  assertProvider(wallet.provider)
+
   const signerProvider = createWeb3(wallet.provider)
 
   if (wallet.chainId !== chainId) {
@@ -57,7 +61,7 @@ const useIsValidExecution = (
   executionValidationError?: Error
   isValidExecutionLoading: boolean
 } => {
-  const wallet = useWallet()
+  const wallet = useSigner()
   const { safe } = useSafeInfo()
   const readOnlyProvider = useWeb3ReadOnly()
   const isOwner = useIsSafeOwner()
diff --git a/src/hooks/useNestedSafeOwners.tsx b/src/hooks/useNestedSafeOwners.tsx
new file mode 100644
index 0000000000..efda33c46d
--- /dev/null
+++ b/src/hooks/useNestedSafeOwners.tsx
@@ -0,0 +1,19 @@
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { useMemo } from 'react'
+import useOwnedSafes from './useOwnedSafes'
+
+export const useNestedSafeOwners = () => {
+  const { safe, safeLoaded } = useSafeInfo()
+  const allOwned = useOwnedSafes()
+
+  const nestedSafeOwner = useMemo(() => {
+    if (!safeLoaded) return null
+
+    // Find an intersection of owned safes and the owners of the current safe
+    const ownerAddresses = safe?.owners.map((owner) => owner.value)
+
+    return allOwned[safe.chainId]?.filter((ownedSafe) => ownerAddresses?.includes(ownedSafe))
+  }, [allOwned, safe, safeLoaded])
+
+  return nestedSafeOwner
+}
diff --git a/src/hooks/useOwnedSafes.ts b/src/hooks/useOwnedSafes.ts
index 66db1772b8..9a0f778ab1 100644
--- a/src/hooks/useOwnedSafes.ts
+++ b/src/hooks/useOwnedSafes.ts
@@ -1,12 +1,10 @@
-import { useEffect } from 'react'
-import { getOwnedSafes, type OwnedSafes } from '@safe-global/safe-gateway-typescript-sdk'
+import { useMemo } from 'react'
+import { type OwnedSafes } from '@safe-global/safe-gateway-typescript-sdk'
 
-import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import useWallet from '@/hooks/wallets/useWallet'
-import { Errors, logError } from '@/services/exceptions'
 import useChainId from './useChainId'
-
-const CACHE_KEY = 'ownedSafes'
+import { useGetOwnedSafesQuery } from '@/store/slices'
+import { skipToken } from '@reduxjs/toolkit/query'
 
 type OwnedSafesCache = {
   [walletAddress: string]: {
@@ -17,36 +15,12 @@ type OwnedSafesCache = {
 const useOwnedSafes = (): OwnedSafesCache['walletAddress'] => {
   const chainId = useChainId()
   const { address: walletAddress } = useWallet() || {}
-  const [ownedSafesCache, setOwnedSafesCache] = useLocalStorage<OwnedSafesCache>(CACHE_KEY)
-
-  useEffect(() => {
-    if (!walletAddress || !chainId) return
-    let isCurrent = true
 
-    /**
-     * No useAsync in this case to avoid updating
-     * for a new chainId with stale data see https://github.com/safe-global/safe-wallet-web/pull/1760#discussion_r1133705349
-     */
-    getOwnedSafes(chainId, walletAddress)
-      .then(
-        (ownedSafes) =>
-          isCurrent &&
-          setOwnedSafesCache((prev) => ({
-            ...prev,
-            [walletAddress]: {
-              ...(prev?.[walletAddress] || {}),
-              [chainId]: ownedSafes.safes,
-            },
-          })),
-      )
-      .catch((error: Error) => logError(Errors._610, error.message))
+  const { data: ownedSafes } = useGetOwnedSafesQuery(walletAddress ? { chainId, walletAddress } : skipToken)
 
-    return () => {
-      isCurrent = false
-    }
-  }, [chainId, walletAddress, setOwnedSafesCache])
+  const result = useMemo(() => ({ [chainId]: ownedSafes?.safes ?? [] }), [chainId, ownedSafes])
 
-  return ownedSafesCache?.[walletAddress || ''] ?? {}
+  return result ?? {}
 }
 
 export default useOwnedSafes
diff --git a/src/hooks/useTransactionStatus.ts b/src/hooks/useTransactionStatus.ts
index ce79a694ae..1e539869d8 100644
--- a/src/hooks/useTransactionStatus.ts
+++ b/src/hooks/useTransactionStatus.ts
@@ -22,6 +22,7 @@ export const STATUS_LABELS: Record<TxLocalStatus, string> = {
   [PendingStatus.RELAYING]: 'Relaying',
   [PendingStatus.INDEXING]: 'Indexing',
   [PendingStatus.SIGNING]: 'Signing',
+  [PendingStatus.NESTED_SIGNING]: 'Signing',
   [ReplacedStatus]: 'Transaction will be replaced',
 }
 
diff --git a/src/hooks/useTransactionType.tsx b/src/hooks/useTransactionType.tsx
index 1955d01e72..fa2f74d48b 100644
--- a/src/hooks/useTransactionType.tsx
+++ b/src/hooks/useTransactionType.tsx
@@ -14,10 +14,9 @@ import BatchIcon from '@/public/images/common/multisend.svg'
 
 import {
   isCancellationTxInfo,
-  isExecTxInfo,
   isModuleExecutionInfo,
   isMultiSendTxInfo,
-  isOnChainConfirmationTxInfo,
+  isNestedConfirmationTxInfo,
   isOutgoingTransfer,
   isTxQueued,
 } from '@/utils/transaction-guards'
@@ -133,7 +132,7 @@ export const getTransactionType = (tx: TransactionSummary, addressBook: AddressB
         }
       }
 
-      if (isOnChainConfirmationTxInfo(tx.txInfo) || isExecTxInfo(tx.txInfo)) {
+      if (isNestedConfirmationTxInfo(tx.txInfo)) {
         return {
           icon: <SvgIcon component={NestedSafeIcon} inheritViewBox fontSize="small" alt="Nested Safe" />,
           text: `Nested Safe${addressBookName ? `: ${addressBookName}` : ''}`,
diff --git a/src/hooks/useTxPendingStatuses.ts b/src/hooks/useTxPendingStatuses.ts
index 776fce6d4f..66897e17b3 100644
--- a/src/hooks/useTxPendingStatuses.ts
+++ b/src/hooks/useTxPendingStatuses.ts
@@ -233,6 +233,32 @@ const useTxPendingStatuses = (): void => {
       )
     })
 
+    const unsubNestedTx = txSubscribe(TxEvent.NESTED_SAFE_TX_CREATED, (detail) => {
+      const txId = detail.txId
+      const nonce = detail.nonce
+
+      if (!txId || nonce === undefined) return
+
+      // If we have future issues with statuses, we should refactor `useTxPendingStatuses`
+      // @see https://github.com/safe-global/safe-wallet-web/issues/1754
+      const isIndexed = historicalTxs.some((tx) => tx.transaction.id === txId)
+      if (isIndexed) {
+        return
+      }
+
+      dispatch(
+        setPendingTx({
+          nonce,
+          chainId,
+          safeAddress,
+          txId,
+          status: PendingStatus.NESTED_SIGNING,
+          signerAddress: detail.parentSafeAddress,
+          txHashOrParentSafeTxHash: detail.txHashOrParentSafeTxHash,
+        }),
+      )
+    })
+
     // All final states stop the watcher and clear the pending state
     const unsubFns = FINAL_PENDING_STATUSES.map((event) =>
       txSubscribe(event, (detail) => {
@@ -249,7 +275,14 @@ const useTxPendingStatuses = (): void => {
       }),
     )
 
-    unsubFns.push(unsubProcessing, unsubSignatureProposing, unsubExecuting, unsubProcessed, unsubRelaying)
+    unsubFns.push(
+      unsubProcessing,
+      unsubSignatureProposing,
+      unsubExecuting,
+      unsubProcessed,
+      unsubRelaying,
+      unsubNestedTx,
+    )
 
     return () => {
       unsubFns.forEach((unsub) => unsub())
diff --git a/src/hooks/wallets/useSelectAvailableSigner.ts b/src/hooks/wallets/useSelectAvailableSigner.ts
new file mode 100644
index 0000000000..feef89fd90
--- /dev/null
+++ b/src/hooks/wallets/useSelectAvailableSigner.ts
@@ -0,0 +1,24 @@
+import { useCallback } from 'react'
+import { useWalletContext } from './useWallet'
+import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
+import { useNestedSafeOwners } from '../useNestedSafeOwners'
+import { getAvailableSigners } from '@/utils/signers'
+
+/**
+ *
+ * @returns a function that sets a signer that can sign the given transaction in the given Safe
+ */
+export const useSelectAvailableSigner = () => {
+  const { connectedWallet: wallet, setSignerAddress } = useWalletContext() ?? {}
+  const nestedSafeOwners = useNestedSafeOwners()
+
+  return useCallback(
+    (tx: SafeTransaction | undefined, safe: SafeInfo) => {
+      const availableSigners = getAvailableSigners(wallet, nestedSafeOwners, safe, tx)
+
+      setSignerAddress?.(availableSigners[0])
+    },
+    [setSignerAddress, nestedSafeOwners, wallet],
+  )
+}
diff --git a/src/hooks/wallets/useWallet.ts b/src/hooks/wallets/useWallet.ts
index c3b0b3c10c..70e6fc476b 100644
--- a/src/hooks/wallets/useWallet.ts
+++ b/src/hooks/wallets/useWallet.ts
@@ -3,6 +3,14 @@ import { type ConnectedWallet } from './useOnboard'
 import { WalletContext } from '@/components/common/WalletProvider'
 
 const useWallet = (): ConnectedWallet | null => {
+  return useContext(WalletContext)?.connectedWallet ?? null
+}
+
+export const useSigner = () => {
+  return useContext(WalletContext)?.signer ?? null
+}
+
+export const useWalletContext = () => {
   return useContext(WalletContext)
 }
 
diff --git a/src/services/analytics/events/modals.ts b/src/services/analytics/events/modals.ts
index cba11054ec..eebafc3291 100644
--- a/src/services/analytics/events/modals.ts
+++ b/src/services/analytics/events/modals.ts
@@ -72,6 +72,21 @@ export const MODALS_EVENTS = {
     action: 'Swap',
     category: MODALS_CATEGORY,
   },
+  CHANGE_SIGNER: {
+    action: 'Change tx signer',
+    category: MODALS_CATEGORY,
+    event: EventType.CLICK,
+  },
+  OPEN_PARENT_TX: {
+    action: 'Open parent transaction',
+    category: MODALS_CATEGORY,
+    event: EventType.CLICK,
+  },
+  OPEN_NESTED_TX: {
+    action: 'Open nested transaction',
+    category: MODALS_CATEGORY,
+    event: EventType.CLICK,
+  },
 }
 
 export enum MODAL_NAVIGATION {
diff --git a/src/services/analytics/events/transactions.ts b/src/services/analytics/events/transactions.ts
index e2a0c12425..61b198035c 100644
--- a/src/services/analytics/events/transactions.ts
+++ b/src/services/analytics/events/transactions.ts
@@ -19,6 +19,7 @@ export enum TX_TYPES {
   batch = 'batch',
   rejection = 'rejection',
   typed_message = 'typed_message',
+  nested_safe = 'nested_safe',
   walletconnect = 'walletconnect',
   custom = 'custom',
   native_bridge = 'native_bridge',
@@ -79,4 +80,29 @@ export const TX_EVENTS = {
     action: 'Execute via role',
     category: TX_CATEGORY,
   },
+  CREATE_VIA_PARENT: {
+    event: EventType.TX_CREATED,
+    action: 'Create via parent',
+    category: TX_CATEGORY,
+  },
+  CONFIRM_VIA_PARENT: {
+    event: EventType.TX_CREATED,
+    action: 'Confirm via parent',
+    category: TX_CATEGORY,
+  },
+  EXECUTE_VIA_PARENT: {
+    event: EventType.TX_CREATED,
+    action: 'Execute via parent',
+    category: TX_CATEGORY,
+  },
+  CONFIRM_IN_PARENT: {
+    event: EventType.TX_CONFIRMED,
+    action: 'Confirm in parent',
+    category: TX_CATEGORY,
+  },
+  EXECUTE_IN_PARENT: {
+    event: EventType.TX_EXECUTED,
+    action: 'Execute in parent',
+    category: TX_CATEGORY,
+  },
 }
diff --git a/src/services/analytics/tx-tracking.ts b/src/services/analytics/tx-tracking.ts
index e97da67293..fa2d20c913 100644
--- a/src/services/analytics/tx-tracking.ts
+++ b/src/services/analytics/tx-tracking.ts
@@ -9,6 +9,7 @@ import {
   isCancellationTxInfo,
   isSwapOrderTxInfo,
   isAnyStakingTxInfo,
+  isNestedConfirmationTxInfo,
 } from '@/utils/transaction-guards'
 import { BRIDGE_WIDGET_URL } from '@/features/bridge/components/BridgeWidget'
 
@@ -75,6 +76,10 @@ export const getTransactionTrackingType = (details: TransactionDetails | undefin
       return TX_TYPES.batch
     }
 
+    if (isNestedConfirmationTxInfo(txInfo)) {
+      return TX_TYPES.nested_safe
+    }
+
     return TX_TYPES.walletconnect
   }
 
diff --git a/src/services/exceptions/ErrorCodes.ts b/src/services/exceptions/ErrorCodes.ts
index 3a6e098b0e..b1767ab521 100644
--- a/src/services/exceptions/ErrorCodes.ts
+++ b/src/services/exceptions/ErrorCodes.ts
@@ -70,6 +70,7 @@ enum ErrorCodes {
   _814 = '814: Failed to speed up transaction',
   _815 = '815: Error executing a transaction through a role',
   _816 = '816: Error computing replay Safe creation data',
+  _817 = '817: Error sending a transaction through nested Safe provider',
 
   _900 = '900: Error loading Safe App',
   _901 = '901: Error processing Safe Apps SDK request',
diff --git a/src/services/safe-wallet-provider/index.ts b/src/services/safe-wallet-provider/index.ts
index 89c568d3b3..086d835285 100644
--- a/src/services/safe-wallet-provider/index.ts
+++ b/src/services/safe-wallet-provider/index.ts
@@ -93,7 +93,8 @@ export class SafeWalletProvider {
         return this.wallet_switchEthereumChain(...(params as [{ chainId: string }]), appInfo)
       }
 
-      case 'eth_accounts': {
+      case 'eth_accounts':
+      case 'eth_requestAccounts': {
         return this.eth_accounts()
       }
 
diff --git a/src/services/tx/tx-sender/__tests__/ts-sender.test.ts b/src/services/tx/tx-sender/__tests__/ts-sender.test.ts
index 40ce5714e3..190434c93d 100644
--- a/src/services/tx/tx-sender/__tests__/ts-sender.test.ts
+++ b/src/services/tx/tx-sender/__tests__/ts-sender.test.ts
@@ -43,12 +43,14 @@ const SIGNER_ADDRESS = '0x1234567890123456789012345678901234567890'
 const TX_HASH = '0x1234567890'
 // Mock getTransactionDetails
 jest.mock('@safe-global/safe-gateway-typescript-sdk', () => ({
+  ...jest.requireActual('@safe-global/safe-gateway-typescript-sdk'),
   getTransactionDetails: jest.fn(),
   postSafeGasEstimation: jest.fn(() => Promise.resolve({ safeTxGas: 60000, recommendedNonce: 17 })),
   Operation: {
     CALL: 0,
   },
   relayTransaction: jest.fn(() => Promise.resolve({ taskId: '0xdead1' })),
+  __esModule: true,
 }))
 
 // Mock extractTxInfo
diff --git a/src/services/tx/tx-sender/dispatch.ts b/src/services/tx/tx-sender/dispatch.ts
index a60ce9d11c..15d256440b 100644
--- a/src/services/tx/tx-sender/dispatch.ts
+++ b/src/services/tx/tx-sender/dispatch.ts
@@ -141,18 +141,22 @@ export const dispatchOnChainSigning = async (
   chainId: SafeInfo['chainId'],
   signerAddress: string,
   safeAddress: string,
+  isNestedSafe: boolean,
 ) => {
   const sdk = await getSafeSDKWithSigner(provider)
   const safeTxHash = await sdk.getTransactionHash(safeTx)
   const eventParams = { txId, nonce: safeTx.data.nonce }
 
   const options = chainId === chains.zksync ? { gasLimit: ZK_SYNC_ON_CHAIN_SIGNATURE_GAS_LIMIT } : undefined
-
+  let txHashOrParentSafeTxHash: string
   try {
     // TODO: This is a workaround until there is a fix for unchecked transactions in the protocol-kit
     const encodedApproveHashTx = await prepareApproveTxHash(safeTxHash, provider)
 
-    await provider.request({
+    // Note: SafeWalletProvider returns transaction hash if it exists, otherwise the safeTxHash
+    // If the parent immediately executes, this will be the transaction hash of the approveHash
+    // otherwise the safeTxHash of it
+    txHashOrParentSafeTxHash = await provider.request({
       method: 'eth_sendTransaction',
       params: [{ from: signerAddress, to: safeAddress, data: encodedApproveHashTx, gas: options?.gasLimit }],
     })
@@ -165,6 +169,14 @@ export const dispatchOnChainSigning = async (
 
   txDispatch(TxEvent.ONCHAIN_SIGNATURE_SUCCESS, eventParams)
 
+  if (isNestedSafe) {
+    txDispatch(TxEvent.NESTED_SAFE_TX_CREATED, {
+      ...eventParams,
+      txHashOrParentSafeTxHash,
+      parentSafeAddress: signerAddress,
+    })
+  }
+
   // Until the on-chain signature is/has been executed, the safeTx is not
   // signed so we don't return it
 }
diff --git a/src/services/tx/txEvents.ts b/src/services/tx/txEvents.ts
index 562e52135c..9ecdb89778 100644
--- a/src/services/tx/txEvents.ts
+++ b/src/services/tx/txEvents.ts
@@ -12,6 +12,7 @@ export enum TxEvent {
   SIGNATURE_INDEXED = 'SIGNATURE_INDEXED',
   ONCHAIN_SIGNATURE_REQUESTED = 'ONCHAIN_SIGNATURE_REQUESTED',
   ONCHAIN_SIGNATURE_SUCCESS = 'ONCHAIN_SIGNATURE_SUCCESS',
+  NESTED_SAFE_TX_CREATED = 'NESTED_SAFE_TX_CREATED',
   EXECUTING = 'EXECUTING',
   PROCESSING = 'PROCESSING',
   PROCESSING_MODULE = 'PROCESSING_MODULE',
@@ -38,6 +39,7 @@ interface TxEvents {
   [TxEvent.SIGNATURE_INDEXED]: { txId: string }
   [TxEvent.ONCHAIN_SIGNATURE_REQUESTED]: Id
   [TxEvent.ONCHAIN_SIGNATURE_SUCCESS]: Id
+  [TxEvent.NESTED_SAFE_TX_CREATED]: Id & { parentSafeAddress: string; txHashOrParentSafeTxHash: string }
   [TxEvent.EXECUTING]: Id
   [TxEvent.PROCESSING]: Id & {
     txHash: string
diff --git a/src/store/__tests__/txQueueSlice.test.ts b/src/store/__tests__/txQueueSlice.test.ts
index 7c92ce8f99..312bfbd7a3 100644
--- a/src/store/__tests__/txQueueSlice.test.ts
+++ b/src/store/__tests__/txQueueSlice.test.ts
@@ -17,6 +17,7 @@ import { txQueueListener, txQueueSlice } from '../txQueueSlice'
 import type { PendingTxsState } from '../pendingTxsSlice'
 import { PendingStatus } from '../pendingTxsSlice'
 import type { RootState } from '..'
+import { faker } from '@faker-js/faker/.'
 
 describe('txQueueSlice', () => {
   const listenerMiddlewareInstance = createListenerMiddleware<RootState>()
@@ -71,6 +72,48 @@ describe('txQueueSlice', () => {
     expect(txDispatchSpy).toHaveBeenCalledWith(txEvents.TxEvent.SIGNATURE_INDEXED, { txId: '0x123' })
   })
 
+  it('should dispatch SIGNATURE_INDEXED event for Nested Signing state', () => {
+    const state = {
+      pendingTxs: {
+        '0x123': {
+          nonce: 1,
+          chainId: '5',
+          safeAddress: '0x0000000000000000000000000000000000000000',
+          status: PendingStatus.NESTED_SIGNING,
+          signerAddress: '0x456',
+          txHashOrParentSafeTxHash: faker.string.hexadecimal({ length: 64 }),
+        },
+      } as PendingTxsState,
+    } as RootState
+
+    const listenerApi = {
+      getState: jest.fn(() => state),
+      dispatch: jest.fn(),
+    }
+
+    const transaction = {
+      type: TransactionListItemType.TRANSACTION,
+      transaction: {
+        id: '0x123',
+        executionInfo: {
+          type: DetailedExecutionInfoType.MULTISIG,
+          missingSigners: [],
+        },
+      },
+    } as unknown as TransactionListItem
+
+    const action = txQueueSlice.actions.set({
+      loading: false,
+      data: {
+        results: [transaction],
+      },
+    })
+
+    listenerMiddlewareInstance.middleware(listenerApi)(jest.fn())(action)
+
+    expect(txDispatchSpy).toHaveBeenCalledWith(txEvents.TxEvent.SIGNATURE_INDEXED, { txId: '0x123' })
+  })
+
   it('should not dispatch an event if the queue slice is cleared', () => {
     const state = {
       pendingTxs: {
diff --git a/src/store/api/gateway/index.ts b/src/store/api/gateway/index.ts
index 8c8893b150..7e2fdccb18 100644
--- a/src/store/api/gateway/index.ts
+++ b/src/store/api/gateway/index.ts
@@ -1,7 +1,14 @@
 import { proposerEndpoints } from '@/store/api/gateway/proposers'
 import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query/react'
 
-import { getTransactionDetails, type TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
+import {
+  type AllOwnedSafes,
+  getAllOwnedSafes,
+  getTransactionDetails,
+  type TransactionDetails,
+  type OwnedSafes,
+  getOwnedSafes,
+} from '@safe-global/safe-gateway-typescript-sdk'
 import { asError } from '@/services/exceptions/utils'
 import { safeOverviewEndpoints } from './safeOverviews'
 import { createSubmission, getSubmission } from '@safe-global/safe-client-gateway-sdk'
@@ -29,6 +36,16 @@ export const gatewayApi = createApi({
         return buildQueryFn(() => Promise.all(txIds.map((txId) => getTransactionDetails(chainId, txId))))
       },
     }),
+    getAllOwnedSafes: builder.query<AllOwnedSafes, { walletAddress: string }>({
+      queryFn({ walletAddress }) {
+        return buildQueryFn(() => getAllOwnedSafes(walletAddress))
+      },
+    }),
+    getOwnedSafes: builder.query<OwnedSafes, { chainId: string; walletAddress: string }>({
+      queryFn({ chainId, walletAddress }) {
+        return buildQueryFn(() => getOwnedSafes(chainId, walletAddress))
+      },
+    }),
     getSubmission: builder.query<
       getSubmission,
       { outreachId: number; chainId: string; safeAddress: string; signerAddress: string }
@@ -72,4 +89,6 @@ export const {
   useCreateSubmissionMutation,
   useGetSafeOverviewQuery,
   useGetMultipleSafeOverviewsQuery,
+  useGetAllOwnedSafesQuery,
+  useGetOwnedSafesQuery,
 } = gatewayApi
diff --git a/src/store/pendingTxsSlice.ts b/src/store/pendingTxsSlice.ts
index 671c550a08..8eee001fdf 100644
--- a/src/store/pendingTxsSlice.ts
+++ b/src/store/pendingTxsSlice.ts
@@ -6,6 +6,7 @@ import { selectChainIdAndSafeAddress } from '@/store/common'
 
 export enum PendingStatus {
   SIGNING = 'SIGNING',
+  NESTED_SIGNING = 'NESTED_SIGNING',
   SUBMITTING = 'SUBMITTING',
   PROCESSING = 'PROCESSING',
   RELAYING = 'RELAYING',
@@ -67,12 +68,19 @@ type PendingIndexingTx = PendingTxCommonProps & {
   txHash?: string
 }
 
+type PendingNestedSigningTx = PendingTxCommonProps & {
+  signerAddress: string
+  txHashOrParentSafeTxHash: string
+  status: PendingStatus.NESTED_SIGNING
+}
+
 export type PendingTx =
   | PendingSigningTx
   | PendingSubmittingTx
   | PendingProcessingTx
   | PendingRelayingTx
   | PendingIndexingTx
+  | PendingNestedSigningTx
 
 export type PendingTxsState = {
   [txId: string]: PendingTx
diff --git a/src/store/txQueueSlice.ts b/src/store/txQueueSlice.ts
index 37ca6c0ae8..f5decbd539 100644
--- a/src/store/txQueueSlice.ts
+++ b/src/store/txQueueSlice.ts
@@ -8,6 +8,8 @@ import { PendingStatus, selectPendingTxs } from './pendingTxsSlice'
 import { sameAddress } from '@/utils/addresses'
 import { txDispatch, TxEvent } from '@/services/tx/txEvents'
 
+const SIGNING_STATES = [PendingStatus.SIGNING, PendingStatus.NESTED_SIGNING]
+
 const { slice, selector } = makeLoadableSlice('txQueue', undefined as TransactionListPage | undefined)
 
 export const txQueueSlice = slice
@@ -45,7 +47,7 @@ export const txQueueListener = (listenerMiddleware: typeof listenerMiddlewareIns
         const txId = result.transaction.id
 
         const pendingTx = pendingTxs[txId]
-        if (!pendingTx || pendingTx.status !== PendingStatus.SIGNING) {
+        if (!pendingTx || !SIGNING_STATES.includes(pendingTx.status) || !('signerAddress' in pendingTx)) {
           continue
         }
 
diff --git a/src/tests/builders/safeTx.ts b/src/tests/builders/safeTx.ts
index 1e8d4eb2ca..449238592a 100644
--- a/src/tests/builders/safeTx.ts
+++ b/src/tests/builders/safeTx.ts
@@ -2,6 +2,15 @@ import { Builder, type IBuilder } from '@/tests/Builder'
 import { faker } from '@faker-js/faker'
 import { type SafeTransactionData, type SafeSignature, type SafeTransaction } from '@safe-global/safe-core-sdk-types'
 import { ZERO_ADDRESS } from '@safe-global/protocol-kit/dist/src/utils/constants'
+import {
+  type Custom,
+  DetailedExecutionInfoType,
+  type MultisigExecutionInfo,
+  type TransactionInfo,
+  TransactionInfoType,
+  type TransactionSummary,
+} from '@safe-global/safe-gateway-typescript-sdk'
+import { TransactionStatus } from '@safe-global/safe-apps-sdk'
 
 // TODO: Convert to builder
 export const createSafeTx = (data = '0x'): SafeTransaction => {
@@ -65,3 +74,40 @@ export function safeSignatureBuilder(): IBuilder<SafeSignature> {
     data: faker.string.hexadecimal({ length: faker.number.int({ max: 500 }) }),
   })
 }
+
+export function safeTxSummaryBuilder(): IBuilder<TransactionSummary> {
+  return Builder.new<TransactionSummary>().with({
+    id: `multisig_${faker.string.hexadecimal({ length: 40 })}_${faker.string.hexadecimal({ length: 64 })}`,
+    executionInfo: executionInfoBuilder().build(),
+    txInfo: txInfoBuilder().build(),
+    txStatus: faker.helpers.enumValue(TransactionStatus),
+  })
+}
+
+export function executionInfoBuilder(): IBuilder<MultisigExecutionInfo> {
+  const num1 = faker.number.int({ min: 1, max: 10 })
+  const num2 = faker.number.int({ min: 1, max: 10 })
+
+  return Builder.new<MultisigExecutionInfo>().with({
+    nonce: faker.number.int(),
+    type: DetailedExecutionInfoType.MULTISIG,
+    confirmationsRequired: Math.max(num1, num2),
+    confirmationsSubmitted: Math.min(num1, num2),
+    missingSigners: Array.from({ length: Math.min(num1, num2) }).map(() => ({
+      value: faker.finance.ethereumAddress(),
+    })),
+  })
+}
+
+export function txInfoBuilder(): IBuilder<TransactionInfo> {
+  const mockData = faker.string.hexadecimal({ length: { min: 0, max: 128 } })
+  return Builder.new<Custom>().with({
+    type: TransactionInfoType.CUSTOM,
+    actionCount: 1,
+    dataSize: mockData.length.toString(),
+    isCancellation: false,
+    methodName: faker.string.alpha(),
+    to: { value: faker.finance.ethereumAddress() },
+    value: faker.number.bigInt({ min: 0, max: 10n ** 18n }).toString(),
+  })
+}
diff --git a/src/utils/__tests__/signers.test.ts b/src/utils/__tests__/signers.test.ts
new file mode 100644
index 0000000000..5ef249b3ed
--- /dev/null
+++ b/src/utils/__tests__/signers.test.ts
@@ -0,0 +1,140 @@
+import { getAvailableSigners } from '../signers'
+import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
+import { safeInfoBuilder } from '@/tests/builders/safe'
+import { faker } from '@faker-js/faker'
+import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
+import { checksumAddress } from '../addresses'
+
+describe('getAvailableSigners', () => {
+  const mockWallet = {
+    address: checksumAddress(faker.finance.ethereumAddress()),
+  } as ConnectedWallet
+  const parentSafe = checksumAddress(faker.finance.ethereumAddress())
+
+  const mockTx = {
+    signatures: new Map(),
+  } as SafeTransaction
+
+  it('should return an empty array if wallet is null', () => {
+    const mockSafe = safeInfoBuilder()
+      .with({ owners: [{ value: mockWallet.address }] })
+      .build()
+
+    const result = getAvailableSigners(null, ['0xOwner1'], mockSafe, mockTx)
+
+    expect(result).toEqual([])
+  })
+
+  it('should return an empty array if nestedSafeOwners is null', () => {
+    const mockSafe = safeInfoBuilder()
+      .with({ owners: [{ value: mockWallet.address }] })
+      .build()
+    const result = getAvailableSigners(mockWallet, null, mockSafe, mockTx)
+
+    expect(result).toEqual([])
+  })
+
+  it('should return an empty array if tx is undefined', () => {
+    const nestedOwners = [mockWallet.address]
+    const mockSafe = safeInfoBuilder()
+      .with({ owners: [{ value: mockWallet.address }, { value: parentSafe }] })
+      .build()
+
+    const result = getAvailableSigners(mockWallet, nestedOwners, mockSafe, undefined)
+
+    expect(result).toEqual([])
+  })
+
+  it('should include wallet address if wallet is a direct owner and has not signed', () => {
+    const nestedOwners = [checksumAddress(faker.finance.ethereumAddress())]
+    const mockSafe = safeInfoBuilder()
+      .with({ owners: [{ value: mockWallet.address }, { value: parentSafe }] })
+      .build()
+
+    const result = getAvailableSigners(mockWallet, nestedOwners, mockSafe, mockTx)
+
+    expect(result).toEqual([nestedOwners[0], mockWallet.address])
+  })
+
+  it('should not include wallet address if wallet is a direct owner and has already signed', () => {
+    const nestedOwners = [checksumAddress(faker.finance.ethereumAddress())]
+    const mockSafe = safeInfoBuilder()
+      .with({ owners: [{ value: mockWallet.address }, { value: parentSafe }], threshold: 2 })
+      .build()
+    const signedTx = {
+      ...mockTx,
+      signatures: new Map([[mockWallet.address, 'mockWallet signature']]),
+    } as unknown as SafeTransaction
+
+    const result = getAvailableSigners(mockWallet, nestedOwners, mockSafe, signedTx)
+
+    expect(result).toEqual([nestedOwners[0]])
+  })
+
+  it('should return only signers who have not signed if threshold is not met', () => {
+    const nestedOwners = [
+      checksumAddress(faker.finance.ethereumAddress()),
+      checksumAddress(faker.finance.ethereumAddress()),
+    ]
+    const mockSafe = safeInfoBuilder()
+      .with({ owners: [{ value: mockWallet.address }, { value: parentSafe }] })
+      .build()
+    const signedTx = {
+      ...mockTx,
+      signatures: new Map([[nestedOwners[0], 'nestedOwners[0] signature']]),
+    } as unknown as SafeTransaction
+
+    const result = getAvailableSigners(mockWallet, nestedOwners, mockSafe, signedTx)
+
+    expect(result).toEqual([nestedOwners[1], mockWallet.address])
+  })
+
+  it('should return nestedSafeOwners if wallet is not a direct owner', () => {
+    const nestedOwners = [
+      checksumAddress(faker.finance.ethereumAddress()),
+      checksumAddress(faker.finance.ethereumAddress()),
+    ]
+    const mockSafe = safeInfoBuilder()
+      .with({ owners: [{ value: parentSafe }] })
+      .build()
+    const result = getAvailableSigners(mockWallet, nestedOwners, mockSafe, mockTx)
+
+    expect(result).toEqual([nestedOwners[0], nestedOwners[1]])
+  })
+
+  it('should return nested signers if the transaction has met the threshold', () => {
+    const nestedOwners = [checksumAddress(faker.finance.ethereumAddress())]
+    const mockSafe = safeInfoBuilder()
+      .with({ owners: [{ value: mockWallet.address }, { value: parentSafe }], threshold: 2 })
+      .build()
+    const fullySignedTx = {
+      ...mockTx,
+      signatures: new Map([
+        [checksumAddress(mockWallet.address), 'mockWallet signature'],
+        [checksumAddress(nestedOwners[0]), 'nestedOwners[0] signature'],
+      ]),
+    } as unknown as SafeTransaction
+
+    const result = getAvailableSigners(mockWallet, nestedOwners, mockSafe, fullySignedTx)
+
+    expect(result).toEqual([nestedOwners[0]])
+  })
+
+  it('should handle case insensitivity in addresses', () => {
+    const nonChecksummedMockWallet = { address: mockWallet.address.toLowerCase() } as ConnectedWallet
+    const nestedOwners = [faker.finance.ethereumAddress().toUpperCase(), faker.finance.ethereumAddress().toLowerCase()]
+    const mockSafe = safeInfoBuilder()
+      .with({
+        owners: [{ value: mockWallet.address }, { value: parentSafe }],
+      })
+      .build()
+
+    const result = getAvailableSigners(nonChecksummedMockWallet, nestedOwners, mockSafe, mockTx)
+
+    expect(result).toEqual([
+      checksumAddress(nestedOwners[0]),
+      checksumAddress(nestedOwners[1]),
+      checksumAddress(nonChecksummedMockWallet.address),
+    ])
+  })
+})
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index fd9f04b9ca..eac09b1a51 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -29,7 +29,7 @@ export function assertChainInfo(chainInfo: ChainInfo | undefined): asserts chain
   return invariant(chainInfo, 'No chain config available')
 }
 
-export function assertProvider(provider: Eip1193Provider | undefined): asserts provider {
+export function assertProvider(provider: Eip1193Provider | undefined | null): asserts provider {
   return invariant(provider, 'Provider not found')
 }
 
diff --git a/src/utils/nested-safe-wallet.ts b/src/utils/nested-safe-wallet.ts
new file mode 100644
index 0000000000..efe73dadb1
--- /dev/null
+++ b/src/utils/nested-safe-wallet.ts
@@ -0,0 +1,164 @@
+import { type Eip1193Provider, getAddress, type JsonRpcProvider } from 'ethers'
+import { SafeWalletProvider, type WalletSDK } from '@/services/safe-wallet-provider'
+import { getTransactionDetails, type SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { type NextRouter } from 'next/router'
+import { AppRoutes } from '@/config/routes'
+import proposeTx from '@/services/tx/proposeTransaction'
+import { isSmartContractWallet } from '@/utils/wallets'
+import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
+import { initSafeSDK } from '@/hooks/coreSDK/safeCoreSDK'
+import { logError } from '@/services/exceptions'
+import ErrorCodes from '@/services/exceptions/ErrorCodes'
+import { tryOffChainTxSigning } from '@/services/tx/tx-sender/sdk'
+import type { TransactionResult } from '@safe-global/safe-core-sdk-types'
+
+export type NestedWallet = {
+  address: string
+  chainId: string
+  provider: Eip1193Provider | null
+  isSafe: true
+}
+
+export const getNestedWallet = (
+  actualWallet: ConnectedWallet,
+  safeInfo: SafeInfo,
+  web3ReadOnly: JsonRpcProvider,
+  router: NextRouter,
+): NestedWallet => {
+  let requestId = 0
+  const nestedSafeSdk: WalletSDK = {
+    getBySafeTxHash(safeTxHash) {
+      return getTransactionDetails(safeInfo.chainId, safeTxHash)
+    },
+    async switchChain() {
+      return Promise.reject('Switching chains is not supported yet')
+    },
+    getCreateCallTransaction() {
+      throw new Error('Unsupported method')
+    },
+
+    async signMessage(): Promise<{ signature: string }> {
+      return Promise.reject('signMessage is not supported yet')
+    },
+
+    async proxy(method, params) {
+      return web3ReadOnly?.send(method, params ?? [])
+    },
+
+    async send(params) {
+      const safeCoreSDK = await initSafeSDK({
+        provider: web3ReadOnly,
+        chainId: safeInfo.chainId,
+        address: safeInfo.address.value,
+        version: safeInfo.version,
+        implementationVersionState: safeInfo.implementationVersionState,
+        implementation: safeInfo.implementation.value,
+      })
+
+      const connectedSDK = await safeCoreSDK?.connect({ provider: actualWallet.provider })
+
+      if (!connectedSDK) {
+        return Promise.reject('Could not initialize core sdk')
+      }
+
+      const transactions = params.txs.map(({ to, value, data }: any) => {
+        return {
+          to: getAddress(to),
+          value: BigInt(value).toString(),
+          data,
+          operation: 0,
+        }
+      })
+
+      const safeTx = await connectedSDK.createTransaction({
+        transactions,
+        onlyCalls: true,
+      })
+
+      const safeTxHash = await connectedSDK.getTransactionHash(safeTx)
+
+      let result: TransactionResult | null = null
+
+      try {
+        if (await isSmartContractWallet(safeInfo.chainId, actualWallet.address)) {
+          // With the unchecked signer, the contract call resolves once the tx
+          // has been submitted in the wallet not when it has been executed
+
+          // First we propose so the backend will pick it up
+          await proposeTx(safeInfo.chainId, safeInfo.address.value, actualWallet.address, safeTx, safeTxHash)
+          result = await connectedSDK.approveTransactionHash(safeTxHash)
+        } else {
+          // Sign off-chain
+          if (safeInfo.threshold === 1) {
+            // Always propose the tx so the resulting link to the parentTx does not error out
+            await proposeTx(safeInfo.chainId, safeInfo.address.value, actualWallet.address, safeTx, safeTxHash)
+
+            // Directly execute the tx
+            result = await connectedSDK.executeTransaction(safeTx)
+          } else {
+            const signedTx = await tryOffChainTxSigning(safeTx, safeInfo.version, connectedSDK)
+            await proposeTx(safeInfo.chainId, safeInfo.address.value, actualWallet.address, signedTx, safeTxHash)
+          }
+        }
+      } catch (err) {
+        logError(ErrorCodes._817, err)
+        throw err
+      }
+
+      return {
+        safeTxHash,
+        txHash: result?.hash,
+      }
+    },
+
+    setSafeSettings() {
+      throw new Error('setSafeSettings is not supported yet')
+    },
+
+    showTxStatus(safeTxHash) {
+      router.push({
+        pathname: AppRoutes.transactions.tx,
+        query: {
+          safe: router.query.safe,
+          id: safeTxHash,
+        },
+      })
+    },
+
+    async signTypedMessage() {
+      return Promise.reject('signTypedMessage is not supported yet')
+    },
+  }
+
+  const nestedSafeProvider = new SafeWalletProvider(
+    {
+      chainId: Number(safeInfo.chainId),
+      safeAddress: safeInfo.address.value,
+    },
+    nestedSafeSdk,
+  )
+
+  return {
+    provider: {
+      async request(request) {
+        const result = await nestedSafeProvider.request(requestId++, request, {
+          url: '',
+          description: '',
+          iconUrl: '',
+          name: 'Nested Safe',
+        })
+
+        if ('result' in result) {
+          return result.result
+        }
+
+        if ('error' in result) {
+          throw new Error(result.error.message)
+        }
+      },
+    },
+    address: safeInfo.address.value,
+    chainId: safeInfo.chainId,
+    isSafe: true,
+  }
+}
diff --git a/src/utils/signers.ts b/src/utils/signers.ts
new file mode 100644
index 0000000000..a8babd9767
--- /dev/null
+++ b/src/utils/signers.ts
@@ -0,0 +1,32 @@
+import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
+import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
+import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { checksumAddress } from './addresses'
+
+export const getAvailableSigners = (
+  wallet: ConnectedWallet | null | undefined,
+  nestedSafeOwners: string[] | null,
+  safe: SafeInfo,
+  tx: SafeTransaction | undefined,
+) => {
+  if (!wallet || !nestedSafeOwners || !tx) {
+    return []
+  }
+  const walletAddress = checksumAddress(wallet.address)
+
+  const isDirectOwner = safe.owners.map((owner) => checksumAddress(owner.value)).includes(walletAddress)
+  const isFullySigned = tx.signatures.size >= safe.threshold
+  const availableSigners = nestedSafeOwners ? nestedSafeOwners.map(checksumAddress) : []
+
+  const signers = Array.from(tx.signatures.keys()).map(checksumAddress)
+
+  if (isDirectOwner && !signers.includes(walletAddress)) {
+    availableSigners.push(walletAddress)
+  }
+
+  if (!isFullySigned) {
+    // Filter signers that already signed
+    return availableSigners.filter((signer) => !signers.includes(signer))
+  }
+  return availableSigners
+}
diff --git a/src/utils/transaction-guards.ts b/src/utils/transaction-guards.ts
index 3ee3e88b72..f126ebf5b0 100644
--- a/src/utils/transaction-guards.ts
+++ b/src/utils/transaction-guards.ts
@@ -443,3 +443,7 @@ export const isExecTxInfo = (info: TransactionInfo): info is Custom => {
   }
   return false
 }
+
+export const isNestedConfirmationTxInfo = (info: TransactionInfo): boolean => {
+  return isCustomTxInfo(info) && (isOnChainConfirmationTxInfo(info) || isExecTxInfo(info))
+}

From a3cd8e43245dd1cb9aff354fdb33d9b5208fc3f0 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:39:55 +0100
Subject: [PATCH 35/47] Chore: fix lodash imports (#4580)

---
 src/components/new-safe/create/steps/ReviewStep/index.tsx | 2 +-
 src/components/tx/ApprovalEditor/ApprovalEditorForm.tsx   | 2 +-
 src/components/tx/ApprovalEditor/Approvals.tsx            | 2 +-
 src/components/tx/ApprovalEditor/EditableApprovalItem.tsx | 2 +-
 src/features/multichain/utils/utils.ts                    | 2 +-
 src/features/myAccounts/hooks/useAllSafesGrouped.ts       | 2 +-
 src/pages/index.tsx                                       | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
index d5a3c41d6d..1e388ad0ce 100644
--- a/src/components/new-safe/create/steps/ReviewStep/index.tsx
+++ b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -43,7 +43,7 @@ import { useMemo, useState } from 'react'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import NetworkWarning from '../../NetworkWarning'
 import useAllSafes from '@/features/myAccounts/hooks/useAllSafes'
-import { uniq } from 'lodash'
+import uniq from 'lodash/uniq'
 import { selectRpc } from '@/store/settingsSlice'
 import { AppRoutes } from '@/config/routes'
 import { type ReplayedSafeProps } from '@/store/slices'
diff --git a/src/components/tx/ApprovalEditor/ApprovalEditorForm.tsx b/src/components/tx/ApprovalEditor/ApprovalEditorForm.tsx
index 0e2666258d..594e7f05cc 100644
--- a/src/components/tx/ApprovalEditor/ApprovalEditorForm.tsx
+++ b/src/components/tx/ApprovalEditor/ApprovalEditorForm.tsx
@@ -5,7 +5,7 @@ import type { ApprovalInfo } from './hooks/useApprovalInfos'
 
 import { useMemo } from 'react'
 import EditableApprovalItem from './EditableApprovalItem'
-import { groupBy } from 'lodash'
+import groupBy from 'lodash/groupBy'
 import { SpenderField } from './SpenderField'
 
 export type ApprovalEditorFormData = {
diff --git a/src/components/tx/ApprovalEditor/Approvals.tsx b/src/components/tx/ApprovalEditor/Approvals.tsx
index 1f4fea25d6..1d10bd7cc2 100644
--- a/src/components/tx/ApprovalEditor/Approvals.tsx
+++ b/src/components/tx/ApprovalEditor/Approvals.tsx
@@ -3,7 +3,7 @@ import { List, ListItem, Stack } from '@mui/material'
 import { type ApprovalInfo } from '@/components/tx/ApprovalEditor/hooks/useApprovalInfos'
 import css from './styles.module.css'
 import ApprovalItem from '@/components/tx/ApprovalEditor/ApprovalItem'
-import { groupBy } from 'lodash'
+import groupBy from 'lodash/groupBy'
 import { useMemo } from 'react'
 import { SpenderField } from './SpenderField'
 
diff --git a/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx b/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
index f9492c44fa..6e63db2848 100644
--- a/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
+++ b/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
@@ -6,7 +6,7 @@ import { ApprovalValueField } from './ApprovalValueField'
 import Track from '@/components/common/Track'
 import { MODALS_EVENTS } from '@/services/analytics'
 import { useFormContext } from 'react-hook-form'
-import { get } from 'lodash'
+import get from 'lodash/get'
 import { EditOutlined } from '@mui/icons-material'
 import TokenIcon from '@/components/common/TokenIcon'
 import { useState } from 'react'
diff --git a/src/features/multichain/utils/utils.ts b/src/features/multichain/utils/utils.ts
index 05384ee149..a9d549d50b 100644
--- a/src/features/multichain/utils/utils.ts
+++ b/src/features/multichain/utils/utils.ts
@@ -7,7 +7,7 @@ import { Safe_proxy_factory__factory } from '@/types/contracts'
 import { keccak256, ethers, solidityPacked, getCreate2Address, type Provider } from 'ethers'
 import { extractCounterfactualSafeSetup } from '@/features/counterfactual/utils'
 import { encodeSafeSetupCall } from '@/components/new-safe/create/logic'
-import { memoize } from 'lodash'
+import memoize from 'lodash/memoize'
 import { FEATURES, hasFeature } from '@/utils/chains'
 import { type SafeItem } from '@/features/myAccounts/hooks/useAllSafes'
 import { type MultiChainSafeItem } from '@/features/myAccounts/hooks/useAllSafesGrouped'
diff --git a/src/features/myAccounts/hooks/useAllSafesGrouped.ts b/src/features/myAccounts/hooks/useAllSafesGrouped.ts
index 23f3a4663f..e6620532d5 100644
--- a/src/features/myAccounts/hooks/useAllSafesGrouped.ts
+++ b/src/features/myAccounts/hooks/useAllSafesGrouped.ts
@@ -1,4 +1,4 @@
-import { groupBy } from 'lodash'
+import groupBy from 'lodash/groupBy'
 import useAllSafes, { type SafeItem, type SafeItems } from './useAllSafes'
 import { useMemo } from 'react'
 import { sameAddress } from '@/utils/addresses'
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d861eead32..b20b74a1eb 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import { AppRoutes } from '@/config/routes'
-import { isEmpty } from 'lodash'
+import isEmpty from 'lodash/isEmpty'
 import local from '@/services/local-storage/local'
 import { addedSafesSlice, type AddedSafesState } from '@/store/addedSafesSlice'
 

From d5517fe5d8dc8ec5ae8b5d2ff4e468a45fcc4e94 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Fri, 29 Nov 2024 12:13:35 +0100
Subject: [PATCH 36/47] Fix: replace "signer(s)" with "N signers" or "1 signer"
 (#4550)

* Fix: replace "signer(s)" with "N signers" or "1 signer"

* maybePlural

* Use for remaining relays
---
 cypress/e2e/pages/owners.pages.js                 |  6 ++++--
 cypress/support/constants.js                      |  2 +-
 .../balances/HiddenTokenButton/index.tsx          |  3 ++-
 .../create/steps/OwnerPolicyStep/index.tsx        |  5 ++++-
 .../new-safe/load/steps/SafeReviewStep/index.tsx  |  3 ++-
 src/components/nfts/NftSendForm/index.tsx         |  3 ++-
 .../PushNotifications/GlobalPushNotifications.tsx |  3 ++-
 src/components/transactions/TxInfo/index.tsx      |  4 ++--
 src/components/transactions/Warning/index.tsx     |  3 ++-
 src/components/tx-flow/common/OwnerList/index.tsx |  3 ++-
 .../tx-flow/flows/AddOwner/ChooseOwner.tsx        |  5 ++++-
 .../flows/ChangeThreshold/ChooseThreshold.tsx     |  5 ++++-
 .../tx-flow/flows/ConfirmBatch/index.tsx          |  4 ++--
 .../RecoverAccount/RecoverAccountFlowSetup.tsx    |  5 ++++-
 .../tx-flow/flows/RemoveOwner/SetThreshold.tsx    |  5 ++++-
 src/components/tx/RemainingRelays/index.tsx       |  4 +++-
 .../ChangeThreshold/ChangeThreshold.test.tsx      |  2 +-
 .../__snapshots__/ChangeThreshold.test.tsx.snap   |  5 +++--
 .../confirmation-views/ChangeThreshold/index.tsx  |  6 +++++-
 src/features/myAccounts/index.tsx                 |  3 ++-
 .../RecoveryCards/RecoveryProposalCard.tsx        |  5 ++---
 .../components/StakingConfirmationTx/Deposit.tsx  |  4 ++--
 .../stake/components/StakingTxExitInfo/index.tsx  |  3 ++-
 src/services/tx/tx-sender/sdk.ts                  |  7 ++++---
 src/utils/__tests__/formatters.test.ts            | 15 +++++++++++++++
 src/utils/date.ts                                 |  7 ++++---
 src/utils/formatters.ts                           |  5 +++++
 27 files changed, 89 insertions(+), 36 deletions(-)

diff --git a/cypress/e2e/pages/owners.pages.js b/cypress/e2e/pages/owners.pages.js
index 8d653bc327..1422cedef3 100644
--- a/cypress/e2e/pages/owners.pages.js
+++ b/cypress/e2e/pages/owners.pages.js
@@ -95,7 +95,7 @@ export function getThresholdOptions() {
 }
 
 export function verifyThresholdLimit(startValue, endValue) {
-  cy.get('p').contains(`out of ${endValue} signer(s)`)
+  cy.get('p').contains(`out of ${endValue} signer${endValue > 1 ? 's' : ''}`)
   clickOnThresholdDropdown()
   getThresholdOptions().eq(0).should('have.text', startValue).click()
 }
@@ -248,7 +248,9 @@ export function verifyConfirmTransactionWindowDisplayed() {
 
 export function verifyThreshold(startValue, endValue) {
   main.verifyInputValue(thresholdInput, startValue)
-  cy.get('p').contains(`out of ${endValue} signer(s)`).should('be.visible')
+  cy.get('p')
+    .contains(`out of ${endValue} signer${endValue > 1 ? 's' : ''}`)
+    .should('be.visible')
   cy.get(thresholdInput).parent().click()
   cy.get(thresholdList).contains(endValue).should('be.visible')
   cy.get(thresholdList).find('li').should('have.length', endValue)
diff --git a/cypress/support/constants.js b/cypress/support/constants.js
index 4f3b928082..e48a822c4c 100644
--- a/cypress/support/constants.js
+++ b/cypress/support/constants.js
@@ -102,7 +102,7 @@ export const safeContractVersions = {
 }
 
 export const commonThresholds = {
-  oneOfOne: '1 out of 1 signer(s)',
+  oneOfOne: '1 out of 1 signer',
 }
 export const TXActionNames = {
   resetAllowance: 'resetAllowance',
diff --git a/src/components/balances/HiddenTokenButton/index.tsx b/src/components/balances/HiddenTokenButton/index.tsx
index e0a30e3514..e9a4ec09f8 100644
--- a/src/components/balances/HiddenTokenButton/index.tsx
+++ b/src/components/balances/HiddenTokenButton/index.tsx
@@ -7,6 +7,7 @@ import VisibilityOutlined from '@mui/icons-material/VisibilityOutlined'
 import Track from '@/components/common/Track'
 
 import css from './styles.module.css'
+import { maybePlural } from '@/utils/formatters'
 
 const HiddenTokenButton = ({
   toggleShowHiddenAssets,
@@ -45,7 +46,7 @@ const HiddenTokenButton = ({
             >
               {hiddenAssetCount === 0
                 ? 'Hide tokens'
-                : `${hiddenAssetCount} hidden token${hiddenAssetCount > 1 ? 's' : ''}`}{' '}
+                : `${hiddenAssetCount} hidden token${maybePlural(hiddenAssetCount)}`}{' '}
             </Typography>
           </>
         </Button>
diff --git a/src/components/new-safe/create/steps/OwnerPolicyStep/index.tsx b/src/components/new-safe/create/steps/OwnerPolicyStep/index.tsx
index ce054a6f73..97754f3e80 100644
--- a/src/components/new-safe/create/steps/OwnerPolicyStep/index.tsx
+++ b/src/components/new-safe/create/steps/OwnerPolicyStep/index.tsx
@@ -16,6 +16,7 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import layoutCss from '@/components/new-safe/create/styles.module.css'
 import { CREATE_SAFE_EVENTS, trackEvent } from '@/services/analytics'
 import OwnerRow from '@/components/new-safe/OwnerRow'
+import { maybePlural } from '@/utils/formatters'
 
 enum OwnerPolicyStepFields {
   owners = 'owners',
@@ -174,7 +175,9 @@ const OwnerPolicyStep = ({
               />
             </Grid>
             <Grid item>
-              <Typography>out of {ownerFields.length} signer(s)</Typography>
+              <Typography>
+                out of {ownerFields.length} signer{maybePlural(ownerFields)}
+              </Typography>
             </Grid>
           </Grid>
         </Box>
diff --git a/src/components/new-safe/load/steps/SafeReviewStep/index.tsx b/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
index e65efc693d..d613360304 100644
--- a/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
+++ b/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
@@ -17,6 +17,7 @@ import { LOAD_SAFE_EVENTS, OPEN_SAFE_LABELS, OVERVIEW_EVENTS, trackEvent } from
 import { AppRoutes } from '@/config/routes'
 import ReviewRow from '@/components/new-safe/ReviewRow'
 import { upsertAddressBookEntries } from '@/store/addressBookSlice'
+import { maybePlural } from '@/utils/formatters'
 
 const SafeReviewStep = ({ data, onBack }: StepRenderProps<LoadSafeFormData>) => {
   const chain = useCurrentChain()
@@ -118,7 +119,7 @@ const SafeReviewStep = ({ data, onBack }: StepRenderProps<LoadSafeFormData>) =>
             name="Threshold"
             value={
               <Typography>
-                {data.threshold} out of {data.owners.length} signer(s)
+                {data.threshold} out of {data.owners.length} signer{maybePlural(data.owners)}
               </Typography>
             }
           />
diff --git a/src/components/nfts/NftSendForm/index.tsx b/src/components/nfts/NftSendForm/index.tsx
index 92948fd0b5..819f188493 100644
--- a/src/components/nfts/NftSendForm/index.tsx
+++ b/src/components/nfts/NftSendForm/index.tsx
@@ -4,13 +4,14 @@ import ArrowIcon from '@/public/images/common/arrow-nw.svg'
 import type { SafeCollectibleResponse } from '@safe-global/safe-gateway-typescript-sdk'
 import { Sticky } from '@/components/common/Sticky'
 import CheckWallet from '@/components/common/CheckWallet'
+import { maybePlural } from '@/utils/formatters'
 
 type NftSendFormProps = {
   selectedNfts: SafeCollectibleResponse[]
 }
 
 const NftSendForm = ({ selectedNfts }: NftSendFormProps): ReactElement => {
-  const nftsText = `NFT${selectedNfts.length === 1 ? '' : 's'}`
+  const nftsText = `NFT${maybePlural(selectedNfts)}`
   const noSelected = selectedNfts.length === 0
 
   return (
diff --git a/src/components/settings/PushNotifications/GlobalPushNotifications.tsx b/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
index ecd23bf6cd..eb44de9c74 100644
--- a/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
+++ b/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
@@ -39,6 +39,7 @@ import css from './styles.module.css'
 import useAllOwnedSafes from '@/features/myAccounts/hooks/useAllOwnedSafes'
 import useWallet from '@/hooks/wallets/useWallet'
 import { selectAllAddedSafes, type AddedSafesState } from '@/store/addedSafesSlice'
+import { maybePlural } from '@/utils/formatters'
 
 // UI logic
 
@@ -391,7 +392,7 @@ export const GlobalPushNotifications = (): ReactElement | null => {
           {totalSignaturesRequired > 0 && (
             <Typography display="inline" mr={2} textAlign="right">
               We&apos;ll ask you to verify ownership of each Safe Account with your signature per chain{' '}
-              {totalSignaturesRequired} time{totalSignaturesRequired > 1 ? 's' : ''}
+              {totalSignaturesRequired} time{maybePlural(totalSignaturesRequired)}
             </Typography>
           )}
 
diff --git a/src/components/transactions/TxInfo/index.tsx b/src/components/transactions/TxInfo/index.tsx
index c5ab73339f..3d4a9c4f4e 100644
--- a/src/components/transactions/TxInfo/index.tsx
+++ b/src/components/transactions/TxInfo/index.tsx
@@ -24,7 +24,7 @@ import {
   isStakingTxExitInfo,
   isStakingTxWithdrawInfo,
 } from '@/utils/transaction-guards'
-import { ellipsis, shortenAddress } from '@/utils/formatters'
+import { ellipsis, maybePlural, shortenAddress } from '@/utils/formatters'
 import { useCurrentChain } from '@/hooks/useChains'
 import { SwapTx } from '@/features/swap/components/SwapTxInfo/SwapTx'
 import StakingTxExitInfo from '@/features/stake/components/StakingTxExitInfo'
@@ -104,7 +104,7 @@ const CreationTx = ({ info }: { info: Creation }): ReactElement => {
 const MultiSendTx = ({ info }: { info: MultiSend }): ReactElement => {
   return (
     <Box className={css.txInfo}>
-      {info.actionCount} {`action${info.actionCount > 1 ? 's' : ''}`}
+      {info.actionCount} {`action${maybePlural(info.actionCount)}`}
     </Box>
   )
 }
diff --git a/src/components/transactions/Warning/index.tsx b/src/components/transactions/Warning/index.tsx
index 049ab9842a..16d199d3b3 100644
--- a/src/components/transactions/Warning/index.tsx
+++ b/src/components/transactions/Warning/index.tsx
@@ -6,6 +6,7 @@ import InfoOutlinedIcon from '@/public/images/notifications/info.svg'
 import css from './styles.module.css'
 import ExternalLink from '@/components/common/ExternalLink'
 import { HelpCenterArticle } from '@/config/constants'
+import { maybePlural } from '@/utils/formatters'
 
 const Warning = ({
   datatestid,
@@ -55,7 +56,7 @@ export const DelegateCallWarning = ({ showWarning }: { showWarning: boolean }):
 }
 
 export const ApprovalWarning = ({ approvalTxCount }: { approvalTxCount: number }): ReactElement => (
-  <Warning title="" severity="warning" text={`${approvalTxCount} ERC20 approval${approvalTxCount > 1 ? 's' : ''}`} />
+  <Warning title="" severity="warning" text={`${approvalTxCount} ERC20 approval${maybePlural(approvalTxCount)}`} />
 )
 
 export const ThresholdWarning = (): ReactElement => (
diff --git a/src/components/tx-flow/common/OwnerList/index.tsx b/src/components/tx-flow/common/OwnerList/index.tsx
index 5dfd23f363..560c72671d 100644
--- a/src/components/tx-flow/common/OwnerList/index.tsx
+++ b/src/components/tx-flow/common/OwnerList/index.tsx
@@ -7,6 +7,7 @@ import PlusIcon from '@/public/images/common/plus.svg'
 import EthHashInfo from '@/components/common/EthHashInfo'
 
 import css from './styles.module.css'
+import { maybePlural } from '@/utils/formatters'
 
 export function OwnerList({
   title,
@@ -27,7 +28,7 @@ export function OwnerList({
         }}
       >
         <SvgIcon component={PlusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
-        {title ?? `New signer${owners.length > 1 ? 's' : ''}`}
+        {title ?? `New signer${maybePlural(owners)}`}
       </Typography>
       {owners.map((newOwner) => (
         <EthHashInfo
diff --git a/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx b/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx
index 51c8e67486..916c0629ce 100644
--- a/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx
+++ b/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx
@@ -27,6 +27,7 @@ import InfoIcon from '@/public/images/notifications/info.svg'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
 import { TOOLTIP_TITLES } from '@/components/tx-flow/common/constants'
 import EthHashInfo from '@/components/common/EthHashInfo'
+import { maybePlural } from '@/utils/formatters'
 
 type FormData = Pick<AddOwnerFlowProps | ReplaceOwnerFlowProps, 'newOwner' | 'threshold'>
 
@@ -203,7 +204,9 @@ export const ChooseOwner = ({
                   />
                 </Grid>
                 <Grid item>
-                  <Typography>out of {newNumberOfOwners} signer(s)</Typography>
+                  <Typography>
+                    out of {newNumberOfOwners} signer{maybePlural(newNumberOfOwners)}
+                  </Typography>
                 </Grid>
               </Grid>
             </FormControl>
diff --git a/src/components/tx-flow/flows/ChangeThreshold/ChooseThreshold.tsx b/src/components/tx-flow/flows/ChangeThreshold/ChooseThreshold.tsx
index 3daf2e9d25..e54990b9b4 100644
--- a/src/components/tx-flow/flows/ChangeThreshold/ChooseThreshold.tsx
+++ b/src/components/tx-flow/flows/ChangeThreshold/ChooseThreshold.tsx
@@ -21,6 +21,7 @@ import InfoIcon from '@/public/images/notifications/info.svg'
 import { TOOLTIP_TITLES } from '@/components/tx-flow/common/constants'
 
 import commonCss from '@/components/tx-flow/common/styles.module.css'
+import { maybePlural } from '@/utils/formatters'
 
 export const ChooseThreshold = ({
   params,
@@ -104,7 +105,9 @@ export const ChooseThreshold = ({
                     </TextField>
                   </Grid>
                   <Grid item>
-                    <Typography>out of {safe.owners.length} signer(s)</Typography>
+                    <Typography>
+                      out of {safe.owners.length} signer{maybePlural(safe.owners)}
+                    </Typography>
                   </Grid>
                   <Grid item xs={12}>
                     {isError ? (
diff --git a/src/components/tx-flow/flows/ConfirmBatch/index.tsx b/src/components/tx-flow/flows/ConfirmBatch/index.tsx
index a0159b21e8..dcb2476e55 100644
--- a/src/components/tx-flow/flows/ConfirmBatch/index.tsx
+++ b/src/components/tx-flow/flows/ConfirmBatch/index.tsx
@@ -8,6 +8,7 @@ import { OperationType } from '@safe-global/safe-core-sdk-types'
 import TxLayout from '../../common/TxLayout'
 import BatchIcon from '@/public/images/common/batch.svg'
 import { useDraftBatch } from '@/hooks/useDraftBatch'
+import { maybePlural } from '@/utils/formatters'
 
 type ConfirmBatchProps = {
   onSubmit: () => void
@@ -36,11 +37,10 @@ const ConfirmBatch = ({ onSubmit }: ConfirmBatchProps): ReactElement => {
 
 const ConfirmBatchFlow = (props: ConfirmBatchProps) => {
   const { length } = useDraftBatch()
-
   return (
     <TxLayout
       title="Confirm batch"
-      subtitle={`This batch contains ${length} transaction${length > 1 ? 's' : ''}`}
+      subtitle={`This batch contains ${length} transaction${maybePlural(length)}`}
       icon={BatchIcon}
       step={0}
       isBatch
diff --git a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowSetup.tsx b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowSetup.tsx
index 7514b3f512..bc6865d513 100644
--- a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowSetup.tsx
+++ b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowSetup.tsx
@@ -28,6 +28,7 @@ import type { RecoverAccountFlowProps } from '.'
 import type { AddressEx } from '@safe-global/safe-gateway-typescript-sdk'
 
 import commonCss from '@/components/tx-flow/common/styles.module.css'
+import { maybePlural } from '@/utils/formatters'
 
 export function _isSameSetup({
   oldOwners,
@@ -225,7 +226,9 @@ export function RecoverAccountFlowSetup({
             </Grid>
 
             <Grid item>
-              <Typography>out of {fields.length} signer(s)</Typography>
+              <Typography>
+                out of {fields.length} signer{maybePlural(fields)}
+              </Typography>
             </Grid>
           </Grid>
 
diff --git a/src/components/tx-flow/flows/RemoveOwner/SetThreshold.tsx b/src/components/tx-flow/flows/RemoveOwner/SetThreshold.tsx
index 389d495a9e..18de9819f6 100644
--- a/src/components/tx-flow/flows/RemoveOwner/SetThreshold.tsx
+++ b/src/components/tx-flow/flows/RemoveOwner/SetThreshold.tsx
@@ -11,6 +11,7 @@ import { TOOLTIP_TITLES } from '@/components/tx-flow/common/constants'
 import type { RemoveOwnerFlowProps } from '.'
 
 import commonCss from '@/components/tx-flow/common/styles.module.css'
+import { maybePlural } from '@/utils/formatters'
 
 export const SetThreshold = ({
   params,
@@ -101,7 +102,9 @@ export const SetThreshold = ({
               </Select>
             </Grid>
             <Grid item>
-              <Typography>out of {newNumberOfOwners} signer(s)</Typography>
+              <Typography>
+                out of {newNumberOfOwners} signer{maybePlural(newNumberOfOwners)}
+              </Typography>
             </Grid>
           </Grid>
         </Box>
diff --git a/src/components/tx/RemainingRelays/index.tsx b/src/components/tx/RemainingRelays/index.tsx
index 117accdeb4..3a84ccaea7 100644
--- a/src/components/tx/RemainingRelays/index.tsx
+++ b/src/components/tx/RemainingRelays/index.tsx
@@ -3,10 +3,12 @@ import InfoIcon from '@/public/images/notifications/info.svg'
 import { MAX_DAY_RELAYS } from '@/hooks/useRemainingRelays'
 import css from '../BalanceInfo/styles.module.css'
 import type { RelayCountResponse } from '@safe-global/safe-gateway-typescript-sdk'
+import { maybePlural } from '@/utils/formatters'
 
 const RemainingRelays = ({ relays, tooltip }: { relays?: RelayCountResponse; tooltip?: string }) => {
   if (!tooltip) {
-    tooltip = `${relays?.limit ?? MAX_DAY_RELAYS} transactions per day for free`
+    const limit = relays?.limit ?? MAX_DAY_RELAYS
+    tooltip = `${limit} transaction${maybePlural(limit)} per day for free`
   }
 
   return (
diff --git a/src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.test.tsx b/src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.test.tsx
index 2ec8500f3a..e4f7a4c6d4 100644
--- a/src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.test.tsx
+++ b/src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.test.tsx
@@ -26,6 +26,6 @@ describe('ChangeThreshold', () => {
     )
 
     expect(container).toMatchSnapshot()
-    expect(getByLabelText('threshold')).toHaveTextContent('3 out of 1 signer(s)')
+    expect(getByLabelText('threshold')).toHaveTextContent('3 out of 1 signer')
   })
 })
diff --git a/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap b/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap
index 9c91c0378c..86ded94068 100644
--- a/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap
+++ b/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap
@@ -15,10 +15,11 @@ exports[`ChangeThreshold should display the ChangeThreshold component with the n
       <b>
         3
       </b>
-       out of 
+       out of
+       
       <b>
         1
-         signer(s)
+         signer
       </b>
     </p>
   </div>
diff --git a/src/components/tx/confirmation-views/ChangeThreshold/index.tsx b/src/components/tx/confirmation-views/ChangeThreshold/index.tsx
index 0b52e50e31..0841eefdc7 100644
--- a/src/components/tx/confirmation-views/ChangeThreshold/index.tsx
+++ b/src/components/tx/confirmation-views/ChangeThreshold/index.tsx
@@ -7,6 +7,7 @@ import { ChangeThresholdReviewContext } from '@/components/tx-flow/flows/ChangeT
 import { ChangeSignerSetupWarning } from '@/features/multichain/components/SignerSetupWarning/ChangeSignerSetupWarning'
 import { type TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 import { isChangeThresholdView } from '../utils'
+import { maybePlural } from '@/utils/formatters'
 
 interface ChangeThresholdProps {
   txDetails?: TransactionDetails
@@ -32,7 +33,10 @@ function ChangeThreshold({ txDetails }: ChangeThresholdProps) {
         </Typography>
 
         <Typography aria-label="threshold">
-          <b>{newThreshold || threshold}</b> out of <b>{safe.owners.length} signer(s)</b>
+          <b>{newThreshold || threshold}</b> out of{' '}
+          <b>
+            {safe.owners.length} signer{maybePlural(safe.owners)}
+          </b>
         </Typography>
       </div>
       <Box
diff --git a/src/features/myAccounts/index.tsx b/src/features/myAccounts/index.tsx
index 26e772937a..876bb3fc8e 100644
--- a/src/features/myAccounts/index.tsx
+++ b/src/features/myAccounts/index.tsx
@@ -43,6 +43,7 @@ import useTrackSafesCount from '@/features/myAccounts/hooks/useTrackedSafesCount
 import { DataWidget } from '@/features/myAccounts/components/DataWidget'
 import OrderByButton from '@/features/myAccounts/components/OrderByButton'
 import ConnectWalletButton from '@/components/common/ConnectWallet/ConnectWalletButton'
+import { maybePlural } from '@/utils/formatters'
 
 type AccountsListProps = {
   safes: AllSafesGrouped
@@ -159,7 +160,7 @@ const AccountsList = ({ safes, onLinkClick, isSidebar = false }: AccountsListPro
               <>
                 {/* Search results */}
                 <Typography variant="h5" fontWeight="normal" mb={2} color="primary.light">
-                  Found {filteredSafes.length} result{filteredSafes.length === 1 ? '' : 's'}
+                  Found {filteredSafes.length} result{maybePlural(filteredSafes)}
                 </Typography>
                 <Box mt={1}>
                   <SafesList safes={filteredSafes} onLinkClick={onLinkClick} useTransitions={false} />
diff --git a/src/features/recovery/components/RecoveryCards/RecoveryProposalCard.tsx b/src/features/recovery/components/RecoveryCards/RecoveryProposalCard.tsx
index 5953417988..2f09d78b3a 100644
--- a/src/features/recovery/components/RecoveryCards/RecoveryProposalCard.tsx
+++ b/src/features/recovery/components/RecoveryCards/RecoveryProposalCard.tsx
@@ -16,6 +16,7 @@ import type { TxModalContextType } from '@/components/tx-flow'
 import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 import css from './styles.module.css'
+import { maybePlural } from '@/utils/formatters'
 
 type Props =
   | {
@@ -52,9 +53,7 @@ export function InternalRecoveryProposalCard({
     />
   )
   const title = 'Recover this Account'
-  const desc = `The connected wallet was chosen as a trusted Recoverer. You can help the owner${
-    safe.owners.length > 1 ? 's' : ''
-  } regain access by resetting the Account setup.`
+  const desc = `The connected wallet was chosen as a trusted Recoverer. You can help the owner${maybePlural(safe.owners)} regain access by resetting the Account setup.`
 
   const link = (
     <Track {...RECOVERY_EVENTS.LEARN_MORE} label="proposal-card">
diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
index 4de75c92b4..da3859f2b8 100644
--- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
@@ -3,7 +3,7 @@ import FieldsGrid from '@/components/tx/FieldsGrid'
 import type { StakingTxDepositInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { type NativeStakingDepositConfirmationView } from '@safe-global/safe-gateway-typescript-sdk'
 import ConfirmationOrderHeader from '@/components/tx/ConfirmationOrder/ConfirmationOrderHeader'
-import { formatDurationFromMilliseconds, formatVisualAmount } from '@/utils/formatters'
+import { formatDurationFromMilliseconds, formatVisualAmount, maybePlural } from '@/utils/formatters'
 import { formatCurrency } from '@/utils/formatNumber'
 import StakingStatus from '@/features/stake/components/StakingStatus'
 import { InfoTooltip } from '@/features/stake/components/InfoTooltip'
@@ -86,7 +86,7 @@ const StakingConfirmationTxDeposit = ({ order, isTxDetails }: StakingOrderConfir
                 borderRadius: 1,
               }}
             >
-              {order.numValidators} Ethereum validator{order.numValidators === 1 ? '' : 's'}
+              {order.numValidators} Ethereum validator{maybePlural(order.numValidators)}
             </Box>
           </Typography>
         ) : (
diff --git a/src/features/stake/components/StakingTxExitInfo/index.tsx b/src/features/stake/components/StakingTxExitInfo/index.tsx
index 989bb04d34..446c8abf73 100644
--- a/src/features/stake/components/StakingTxExitInfo/index.tsx
+++ b/src/features/stake/components/StakingTxExitInfo/index.tsx
@@ -1,9 +1,10 @@
+import { maybePlural } from '@/utils/formatters'
 import type { StakingTxExitInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 const StakingTxExitInfo = ({ info }: { info: StakingTxExitInfo }) => {
   return (
     <>
-      {info.numValidators} Validator{info.numValidators > 1 ? 's' : ''}
+      {info.numValidators} Validator{maybePlural(info.numValidators)}
     </>
   )
 }
diff --git a/src/services/tx/tx-sender/sdk.ts b/src/services/tx/tx-sender/sdk.ts
index ae00cebeb1..25253a134c 100644
--- a/src/services/tx/tx-sender/sdk.ts
+++ b/src/services/tx/tx-sender/sdk.ts
@@ -20,6 +20,7 @@ import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import { asError } from '@/services/exceptions/utils'
 import { UncheckedJsonRpcSigner } from '@/utils/providers/UncheckedJsonRpcSigner'
 import get from 'lodash/get'
+import { maybePlural } from '@/utils/formatters'
 
 export const getAndValidateSafeSDK = (): Safe => {
   const safeSDK = getSafeSDK()
@@ -210,9 +211,9 @@ export const prepareTxExecution = async (safeTransaction: SafeTransaction, provi
   if (threshold > signedSafeTransaction.signatures.size) {
     const signaturesMissing = threshold - signedSafeTransaction.signatures.size
     throw new Error(
-      `There ${signaturesMissing > 1 ? 'are' : 'is'} ${signaturesMissing} signature${
-        signaturesMissing > 1 ? 's' : ''
-      } missing`,
+      `There ${signaturesMissing > 1 ? 'are' : 'is'} ${signaturesMissing} signature${maybePlural(
+        signaturesMissing,
+      )} missing`,
     )
   }
 
diff --git a/src/utils/__tests__/formatters.test.ts b/src/utils/__tests__/formatters.test.ts
index 4fc94b8a06..537fc985c8 100644
--- a/src/utils/__tests__/formatters.test.ts
+++ b/src/utils/__tests__/formatters.test.ts
@@ -101,4 +101,19 @@ describe('formatters', () => {
       expect(formatters.formatVisualAmount('1', 18, 18)).toEqual('0.000000000000000001')
     })
   })
+
+  describe('maybePlural', () => {
+    const { maybePlural } = formatters
+    it('should add an "s" for more than 1', () => {
+      expect(maybePlural(2)).toEqual('s')
+      expect(maybePlural(10)).toEqual('s')
+      expect(maybePlural(0)).toEqual('')
+      expect(maybePlural(1)).toEqual('')
+    })
+
+    it('should work for arrays too', () => {
+      expect(maybePlural(['1', '2'])).toEqual('s')
+      expect(maybePlural(['1'])).toEqual('')
+    })
+  })
 })
diff --git a/src/utils/date.ts b/src/utils/date.ts
index e17522f8d9..eb52304cc1 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -1,4 +1,5 @@
 import { format, formatDistanceToNow, formatRelative } from 'date-fns'
+import { maybePlural } from './formatters'
 
 export const currentMinutes = (): number => Math.floor(Date.now() / (1000 * 60))
 
@@ -40,14 +41,14 @@ export function getPeriod(seconds: number): string | undefined {
   const { days, hours, minutes } = getCountdown(seconds)
 
   if (days > 0) {
-    return `${days} day${days === 1 ? '' : 's'}`
+    return `${days} day${maybePlural(days)}`
   }
 
   if (hours > 0) {
-    return `${hours} hour${hours === 1 ? '' : 's'}`
+    return `${hours} hour${maybePlural(hours)}`
   }
 
   if (minutes > 0) {
-    return `${minutes} minute${minutes === 1 ? '' : 's'}`
+    return `${minutes} minute${maybePlural(minutes)}`
   }
 }
diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts
index af5c88079c..065fa0c6af 100644
--- a/src/utils/formatters.ts
+++ b/src/utils/formatters.ts
@@ -103,3 +103,8 @@ export const formatDurationFromMilliseconds = (
   const duration = intervalToDuration({ start: 0, end: seconds })
   return formatDuration(duration, { format })
 }
+
+export const maybePlural = (quantity: number | unknown[]) => {
+  quantity = Array.isArray(quantity) ? quantity.length : quantity
+  return quantity > 1 ? 's' : ''
+}

From b4c7d99df8a613960ba76afc6566a4a8b640cea6 Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Fri, 29 Nov 2024 12:28:16 +0100
Subject: [PATCH 37/47] Tests: Add using of mock safe address (#4581)

---
 cypress/e2e/prodhealthcheck/nfts.cy.js              |  6 +++---
 cypress/e2e/prodhealthcheck/spending_limits.cy.js   |  5 +++--
 cypress/e2e/regression/add_owner.cy.js              |  6 ++----
 cypress/e2e/regression/batch_tx.cy.js               |  7 ++++---
 cypress/e2e/regression/create_safe_simple.cy.js     |  3 ++-
 cypress/e2e/regression/load_safe_2.cy.js            |  5 +++--
 cypress/e2e/regression/multichain_create_safe.cy.js | 12 +++---------
 .../regression/multichain_create_safe_flow.cy.js    | 10 ++--------
 cypress/e2e/regression/multichain_network.cy.js     |  3 ++-
 .../e2e/regression/multichain_networkswitch.cy.js   |  3 ++-
 cypress/e2e/regression/multichain_setup.cy.js       |  3 ++-
 cypress/e2e/regression/nfts.cy.js                   |  8 ++++----
 cypress/e2e/regression/proposers.cy.js              |  6 ++----
 cypress/e2e/regression/proposers_2.cy.js            |  5 +++--
 cypress/e2e/regression/recovery.cy.js               |  7 ++++---
 cypress/e2e/regression/replace_owner.cy.js          |  8 ++++----
 cypress/e2e/regression/spending_limits.cy.js        |  5 +++--
 cypress/e2e/regression/twaps_history.cy.js          |  9 +++------
 cypress/e2e/safe-apps/drain_account.spec.cy.js      | 13 ++++++-------
 cypress/e2e/safe-apps/tx-builder.2spec.cy.js        |  4 ++--
 cypress/e2e/safe-apps/tx-builder.spec.cy.js         |  1 +
 cypress/support/utils/ethers.js                     |  5 +++++
 22 files changed, 65 insertions(+), 69 deletions(-)
 create mode 100644 cypress/support/utils/ethers.js

diff --git a/cypress/e2e/prodhealthcheck/nfts.cy.js b/cypress/e2e/prodhealthcheck/nfts.cy.js
index 9cd499d32f..4dd83652e4 100644
--- a/cypress/e2e/prodhealthcheck/nfts.cy.js
+++ b/cypress/e2e/prodhealthcheck/nfts.cy.js
@@ -3,6 +3,7 @@ import * as nfts from '../pages/nfts.pages'
 import * as createTx from '../pages/create_tx.pages'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 const multipleNFT = ['multiSend']
 const multipleNFTAction = 'safeTransferFrom'
@@ -32,14 +33,13 @@ describe('[PROD] NFTs tests', () => {
     nfts.waitForNftItems(2)
   })
 
-  // TODO: Add Sign action
   it('Verify multipls NFTs can be selected and reviewed', () => {
     nfts.verifyInitialNFTData()
     nfts.selectNFTs(3)
     nfts.deselectNFTs([2], 3)
     nfts.sendNFT()
     nfts.verifyNFTModalData()
-    nfts.typeRecipientAddress(staticSafes.SEP_STATIC_SAFE_1)
+    nfts.typeRecipientAddress(getMockAddress())
     nfts.clikOnNextBtn()
     nfts.verifyReviewModalData(2)
   })
@@ -48,7 +48,7 @@ describe('[PROD] NFTs tests', () => {
     nfts.verifyInitialNFTData()
     nfts.selectNFTs(2)
     nfts.sendNFT()
-    nfts.typeRecipientAddress(staticSafes.SEP_STATIC_SAFE_1)
+    nfts.typeRecipientAddress(getMockAddress())
     nfts.clikOnNextBtn()
     nfts.verifyTxDetails(multipleNFT)
     nfts.verifyCountOfActions(2)
diff --git a/cypress/e2e/prodhealthcheck/spending_limits.cy.js b/cypress/e2e/prodhealthcheck/spending_limits.cy.js
index 9b57297de5..36ccd81dbd 100644
--- a/cypress/e2e/prodhealthcheck/spending_limits.cy.js
+++ b/cypress/e2e/prodhealthcheck/spending_limits.cy.js
@@ -4,6 +4,7 @@ import * as navigation from '../pages/navigation.page'
 import * as tx from '../pages/create_tx.pages'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 let staticSafes = []
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
@@ -24,12 +25,12 @@ describe('[PROD] Spending limits tests', () => {
     //Assume that default reset time is set to One time
     wallet.connectSigner(signer)
     spendinglimit.clickOnNewSpendingLimitBtn()
-    spendinglimit.enterBeneficiaryAddress(staticSafes.SEP_STATIC_SAFE_6)
+    spendinglimit.enterBeneficiaryAddress(getMockAddress())
     spendinglimit.enterSpendingLimitAmount(0.1)
     spendinglimit.clickOnNextBtn()
     spendinglimit.checkReviewData(
       tokenAmount,
-      staticSafes.SEP_STATIC_SAFE_6,
+      getMockAddress(),
       spendinglimit.timePeriodOptions.oneTime.split(' ').join('-'),
     )
   })
diff --git a/cypress/e2e/regression/add_owner.cy.js b/cypress/e2e/regression/add_owner.cy.js
index 13a60b3531..acf9296f6b 100644
--- a/cypress/e2e/regression/add_owner.cy.js
+++ b/cypress/e2e/regression/add_owner.cy.js
@@ -4,9 +4,7 @@ import * as owner from '../pages/owners.pages'
 import * as addressBook from '../pages/address_book.page'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
-import * as createTx from '../pages/create_tx.pages.js'
-import * as navigation from '../pages/navigation.page'
-import { getEvents, events, checkDataLayerEvents } from '../../support/utils/gtag.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 let staticSafes = []
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
@@ -58,7 +56,7 @@ describe('Add Owners tests', () => {
   it('Verify that Name field not mandatory', () => {
     wallet.connectSigner(signer)
     owner.openAddOwnerWindow()
-    owner.typeOwnerAddress(constants.SEPOLIA_OWNER_2)
+    owner.typeOwnerAddress(getMockAddress())
     owner.clickOnNextBtn()
     owner.verifyConfirmTransactionWindowDisplayed()
   })
diff --git a/cypress/e2e/regression/batch_tx.cy.js b/cypress/e2e/regression/batch_tx.cy.js
index 6c705b9bba..9c2748e336 100644
--- a/cypress/e2e/regression/batch_tx.cy.js
+++ b/cypress/e2e/regression/batch_tx.cy.js
@@ -6,6 +6,7 @@ import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
 import * as ls from '../../support/localstorage_data.js'
 import * as navigation from '../pages/navigation.page.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 const currentNonce = 3
 const funds_first_tx = '0.001'
@@ -29,13 +30,13 @@ describe('Batch transaction tests', { defaultCommandTimeout: 30000 }, () => {
 
   it('Verify the Add batch button is present in a transaction form', () => {
     //The "true" is to validate that the add to batch button is not visible if "Yes, execute" is selected
-    batch.addNewTransactionToBatch(constants.EOA, currentNonce, funds_first_tx)
+    batch.addNewTransactionToBatch(getMockAddress(), currentNonce, funds_first_tx)
   })
 
   it('Verify a second transaction can be added to the batch', () => {
-    batch.addNewTransactionToBatch(constants.EOA, currentNonce, funds_first_tx)
+    batch.addNewTransactionToBatch(getMockAddress(), currentNonce, funds_first_tx)
     cy.wait(1000)
-    batch.addNewTransactionToBatch(constants.EOA, currentNonce, funds_first_tx)
+    batch.addNewTransactionToBatch(getMockAddress(), currentNonce, funds_first_tx)
     batch.verifyBatchIconCount(2)
     batch.clickOnBatchCounter()
     batch.verifyAmountTransactionsInBatch(2)
diff --git a/cypress/e2e/regression/create_safe_simple.cy.js b/cypress/e2e/regression/create_safe_simple.cy.js
index 5aad0f0d26..e38a1520c2 100644
--- a/cypress/e2e/regression/create_safe_simple.cy.js
+++ b/cypress/e2e/regression/create_safe_simple.cy.js
@@ -4,6 +4,7 @@ import * as createwallet from '../pages/create_wallet.pages'
 import * as owner from '../pages/owners.pages'
 import * as ls from '../../support/localstorage_data.js'
 import * as wallet from '../../support/utils/wallet.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
 const signer = walletCredentials.OWNER_4_PRIVATE_KEY
@@ -107,7 +108,7 @@ describe('Safe creation tests', () => {
     createwallet.typeOwnerAddress(constants.DEFAULT_OWNER_ADDRESS, 1)
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.ownerAdded)
 
-    createwallet.typeOwnerAddress(constants.DEFAULT_OWNER_ADDRESS.toUpperCase(), 1)
+    createwallet.typeOwnerAddress(getMockAddress().replace('A', 'a'), 1)
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.invalidChecksum)
 
     createwallet.typeOwnerAddress(constants.ENS_TEST_SEPOLIA_INVALID, 1)
diff --git a/cypress/e2e/regression/load_safe_2.cy.js b/cypress/e2e/regression/load_safe_2.cy.js
index e5750ec3d6..e49afa6d1c 100644
--- a/cypress/e2e/regression/load_safe_2.cy.js
+++ b/cypress/e2e/regression/load_safe_2.cy.js
@@ -5,6 +5,7 @@ import * as safe from '../pages/load_safe.pages'
 import * as ls from '../../support/localstorage_data.js'
 import * as owner from '../pages/owners.pages'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 let staticSafes,
   fundSafes = []
@@ -91,7 +92,7 @@ describe('Load Safe tests 2', () => {
   })
 
   it('Verify a valid address can be entered', () => {
-    safe.inputAddress(staticSafes.SEP_STATIC_SAFE_13)
+    safe.inputAddress(getMockAddress())
     safe.verifyAddresFormatIsValid()
   })
 
@@ -107,7 +108,7 @@ describe('Load Safe tests 2', () => {
   })
 
   it('Verify that the wrong prefix is not allowed', () => {
-    safe.inputAddress(fundSafes.ETH_FUNDS_SAFE_13)
+    safe.inputAddress(`eth:${getMockAddress()}`)
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.prefixMismatch)
     safe.verifyNextButtonStatus(constants.enabledStates.disabled)
   })
diff --git a/cypress/e2e/regression/multichain_create_safe.cy.js b/cypress/e2e/regression/multichain_create_safe.cy.js
index c7d6823bd2..cf74dc4595 100644
--- a/cypress/e2e/regression/multichain_create_safe.cy.js
+++ b/cypress/e2e/regression/multichain_create_safe.cy.js
@@ -1,22 +1,16 @@
 import * as constants from '../../support/constants.js'
 import * as main from '../pages/main.page.js'
-import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
 import * as createwallet from '../pages/create_wallet.pages'
 import * as createtx from '../pages/create_tx.pages.js'
 import * as tx from '../pages/transactions.page.js'
 import * as owner from '../pages/owners.pages'
-
-let staticSafes = []
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
 const signer = walletCredentials.OWNER_4_PRIVATE_KEY
 
 describe('Multichain safe creation tests', () => {
-  before(async () => {
-    staticSafes = await getSafes(CATEGORIES.static)
-  })
-
   beforeEach(() => {
     cy.visit(constants.welcomeUrl + '?chain=sep')
     cy.wait(2000)
@@ -61,7 +55,7 @@ describe('Multichain safe creation tests', () => {
     createwallet.selectMultiNetwork(1, constants.networks.polygon.toLowerCase())
     createwallet.clickOnNextBtn()
     owner.clickOnAddSignerBtn()
-    owner.typeOwnerAddressCreateSafeStep(1, constants.SEPOLIA_OWNER_2)
+    owner.typeOwnerAddressCreateSafeStep(1, getMockAddress())
     owner.clickOnThresholdDropdown()
     owner.getThresholdOptions().eq(1).click()
     createwallet.clickOnNextBtn()
@@ -79,7 +73,7 @@ describe('Multichain safe creation tests', () => {
     createwallet.selectMultiNetwork(1, constants.networks.polygon.toLowerCase())
     createwallet.clickOnNextBtn()
     owner.clickOnAddSignerBtn()
-    owner.typeOwnerAddressCreateSafeStep(1, constants.SEPOLIA_OWNER_2)
+    owner.typeOwnerAddressCreateSafeStep(1, getMockAddress())
     owner.clickOnThresholdDropdown()
     owner.getThresholdOptions().eq(0).click()
     createwallet.clickOnNextBtn()
diff --git a/cypress/e2e/regression/multichain_create_safe_flow.cy.js b/cypress/e2e/regression/multichain_create_safe_flow.cy.js
index da1ab474fb..6af934a157 100644
--- a/cypress/e2e/regression/multichain_create_safe_flow.cy.js
+++ b/cypress/e2e/regression/multichain_create_safe_flow.cy.js
@@ -1,20 +1,14 @@
 import * as constants from '../../support/constants.js'
 import * as main from '../pages/main.page.js'
-import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
 import * as createwallet from '../pages/create_wallet.pages.js'
 import * as owner from '../pages/owners.pages.js'
-
-let staticSafes = []
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
 const signer = walletCredentials.OWNER_4_PRIVATE_KEY
 
 describe('Multichain safe creation flow tests', () => {
-  before(async () => {
-    staticSafes = await getSafes(CATEGORIES.static)
-  })
-
   beforeEach(() => {
     cy.visit(constants.welcomeUrl + '?chain=sep')
     cy.wait(2000)
@@ -54,7 +48,7 @@ describe('Multichain safe creation flow tests', () => {
     createwallet.selectMultiNetwork(1, constants.networks.polygon.toLowerCase())
     createwallet.clickOnNextBtn()
     owner.clickOnAddSignerBtn()
-    owner.typeOwnerAddressCreateSafeStep(1, constants.SEPOLIA_OWNER_2)
+    owner.typeOwnerAddressCreateSafeStep(1, getMockAddress())
     createwallet.clickOnNextBtn()
     createwallet.clickOnReviewStepNextBtn()
     main.verifyElementsExist([createwallet.cfSafeActivationMsg, createwallet.cfSafeCreationSuccessMsg])
diff --git a/cypress/e2e/regression/multichain_network.cy.js b/cypress/e2e/regression/multichain_network.cy.js
index 5edea28b86..16e104457f 100644
--- a/cypress/e2e/regression/multichain_network.cy.js
+++ b/cypress/e2e/regression/multichain_network.cy.js
@@ -10,7 +10,8 @@ let staticSafes = []
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
 const signer = walletCredentials.OWNER_4_PRIVATE_KEY
 
-describe('Multichain add network tests', () => {
+// Skip due to issues with Polygon
+describe.skip('Multichain add network tests', () => {
   before(async () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
diff --git a/cypress/e2e/regression/multichain_networkswitch.cy.js b/cypress/e2e/regression/multichain_networkswitch.cy.js
index 864f32c224..4e999b8fc3 100644
--- a/cypress/e2e/regression/multichain_networkswitch.cy.js
+++ b/cypress/e2e/regression/multichain_networkswitch.cy.js
@@ -14,7 +14,8 @@ const signer = walletCredentials.OWNER_4_PRIVATE_KEY
 // DO NOT use OWNER_2_PRIVATE_KEY for safe creation. Used for CF safes.
 const signer2 = walletCredentials.OWNER_2_PRIVATE_KEY
 
-describe('Multichain header network switch tests', { defaultCommandTimeout: 30000 }, () => {
+// Skip due to issues with Polygon
+describe.skip('Multichain header network switch tests', { defaultCommandTimeout: 30000 }, () => {
   before(async () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
diff --git a/cypress/e2e/regression/multichain_setup.cy.js b/cypress/e2e/regression/multichain_setup.cy.js
index 7cf54fb604..84fc77f15a 100644
--- a/cypress/e2e/regression/multichain_setup.cy.js
+++ b/cypress/e2e/regression/multichain_setup.cy.js
@@ -15,7 +15,8 @@ const signer = walletCredentials.OWNER_4_PRIVATE_KEY
 // DO NOT use OWNER_2_PRIVATE_KEY for safe creation. Used for CF safes.
 const signer2 = walletCredentials.OWNER_2_PRIVATE_KEY
 
-describe('Multichain setup tests', { defaultCommandTimeout: 30000 }, () => {
+// Skip due to issues with Polygon
+describe.skip('Multichain setup tests', { defaultCommandTimeout: 30000 }, () => {
   before(async () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
diff --git a/cypress/e2e/regression/nfts.cy.js b/cypress/e2e/regression/nfts.cy.js
index 5ce20ab641..fb848826f8 100644
--- a/cypress/e2e/regression/nfts.cy.js
+++ b/cypress/e2e/regression/nfts.cy.js
@@ -4,6 +4,7 @@ import * as navigation from '../pages/navigation.page'
 import * as createTx from '../pages/create_tx.pages'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 const singleNFT = ['safeTransferFrom']
 const multipleNFT = ['multiSend']
@@ -35,14 +36,13 @@ describe('NFTs tests', () => {
   })
 
   // Added to prod
-  // TODO: Add Sign action
   it('Verify multipls NFTs can be selected and reviewed', () => {
     nfts.verifyInitialNFTData()
     nfts.selectNFTs(3)
     nfts.deselectNFTs([2], 3)
     nfts.sendNFT()
     nfts.verifyNFTModalData()
-    nfts.typeRecipientAddress(staticSafes.SEP_STATIC_SAFE_1)
+    nfts.typeRecipientAddress(getMockAddress())
     nfts.clikOnNextBtn()
     nfts.verifyReviewModalData(2)
   })
@@ -51,7 +51,7 @@ describe('NFTs tests', () => {
     nfts.verifyInitialNFTData()
     nfts.selectNFTs(1)
     nfts.sendNFT()
-    nfts.typeRecipientAddress(staticSafes.SEP_STATIC_SAFE_1)
+    nfts.typeRecipientAddress(getMockAddress())
     nfts.clikOnNextBtn()
     nfts.verifyTxDetails(singleNFT)
     nfts.verifyCountOfActions(0)
@@ -62,7 +62,7 @@ describe('NFTs tests', () => {
     nfts.verifyInitialNFTData()
     nfts.selectNFTs(2)
     nfts.sendNFT()
-    nfts.typeRecipientAddress(staticSafes.SEP_STATIC_SAFE_1)
+    nfts.typeRecipientAddress(getMockAddress())
     nfts.clikOnNextBtn()
     nfts.verifyTxDetails(multipleNFT)
     nfts.verifyCountOfActions(2)
diff --git a/cypress/e2e/regression/proposers.cy.js b/cypress/e2e/regression/proposers.cy.js
index 611c4cbb14..fb966b0831 100644
--- a/cypress/e2e/regression/proposers.cy.js
+++ b/cypress/e2e/regression/proposers.cy.js
@@ -6,6 +6,7 @@ import * as wallet from '../../support/utils/wallet.js'
 import * as navigation from '../pages/navigation.page.js'
 import * as ls from '../../support/localstorage_data.js'
 import * as proposer from '../pages/proposers.pages.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 let staticSafes = []
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
@@ -50,10 +51,7 @@ describe('Proposers tests', () => {
 
   it('Verify that a proposer address must be checksummed', () => {
     proposer.clickOnAddProposerBtn()
-    proposer.enterProposerData(
-      staticSafes.SEP_STATIC_SAFE_31.substring(4).replace('E', 'e'),
-      main.generateRandomString(5),
-    )
+    proposer.enterProposerData(getMockAddress().replace('A', 'a'), main.generateRandomString(5))
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.invalidChecksum)
   })
 
diff --git a/cypress/e2e/regression/proposers_2.cy.js b/cypress/e2e/regression/proposers_2.cy.js
index 810c73835d..794d4fe54b 100644
--- a/cypress/e2e/regression/proposers_2.cy.js
+++ b/cypress/e2e/regression/proposers_2.cy.js
@@ -5,6 +5,7 @@ import * as wallet from '../../support/utils/wallet.js'
 import * as proposer from '../pages/proposers.pages.js'
 import * as createtx from '../pages/create_tx.pages.js'
 import * as tx from '../pages/transactions.page.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 let staticSafes = []
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
@@ -26,7 +27,7 @@ describe('Proposers 2 tests', () => {
     wallet.connectSigner(signer)
     createtx.clickOnNewtransactionBtn()
     createtx.clickOnSendTokensBtn()
-    createtx.typeRecipientAddress(constants.EOA)
+    createtx.typeRecipientAddress(getMockAddress())
     createtx.setSendValue(sendValue)
     createtx.clickOnNextBtn()
     tx.selectExecuteNow()
@@ -41,7 +42,7 @@ describe('Proposers 2 tests', () => {
     wallet.connectSigner(signer2)
     createtx.clickOnNewtransactionBtn()
     createtx.clickOnSendTokensBtn()
-    createtx.typeRecipientAddress(constants.EOA)
+    createtx.typeRecipientAddress(getMockAddress())
     createtx.setSendValue(sendValue)
     createtx.clickOnNextBtn()
     createtx.verifySubmitBtnIsEnabled()
diff --git a/cypress/e2e/regression/recovery.cy.js b/cypress/e2e/regression/recovery.cy.js
index 37d585cc90..4697bcd727 100644
--- a/cypress/e2e/regression/recovery.cy.js
+++ b/cypress/e2e/regression/recovery.cy.js
@@ -6,6 +6,7 @@ import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
 import * as modules from '../pages/modules.page.js'
 import * as navigation from '../pages/navigation.page.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 let recoverySafes,
   staticSafes = []
@@ -144,7 +145,7 @@ describe('Recovery regression tests', { defaultCommandTimeout: 50000 }, () => {
     recovery.clickOnSetupRecoveryBtn()
     recovery.clickOnSetupRecoveryModalBtn()
     recovery.clickOnNextBtn()
-    recovery.enterRecovererAddress(constants.SEPOLIA_OWNER_2)
+    recovery.enterRecovererAddress(getMockAddress())
     recovery.agreeToTerms()
     recovery.clickOnNextBtn()
     navigation.clickOnModalCloseBtn(0)
@@ -186,7 +187,7 @@ describe('Recovery regression tests', { defaultCommandTimeout: 50000 }, () => {
     recovery.enterRecovererAddress(main.generateRandomString(10), 1)
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.invalidFormat)
 
-    recovery.enterRecovererAddress(constants.DEFAULT_OWNER_ADDRESS.toUpperCase(), 1)
+    recovery.enterRecovererAddress(getMockAddress().replace('A', 'a'), 1)
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.invalidChecksum)
 
     recovery.enterRecovererAddress(constants.ENS_TEST_SEPOLIA_INVALID, 1)
@@ -206,7 +207,7 @@ describe('Recovery regression tests', { defaultCommandTimeout: 50000 }, () => {
     recovery.clickOnRecoverLaterBtn()
     cy.visit(constants.homeUrl + recoverySafes.SEP_RECOVERY_SAFE_4)
     recovery.clickOnStartRecoveryBtn()
-    recovery.enterRecovererAddress(constants.SEPOLIA_OWNER_2)
+    recovery.enterRecovererAddress(getMockAddress())
     navigation.clickOnWalletExpandMoreIcon()
     navigation.clickOnDisconnectBtn()
   })
diff --git a/cypress/e2e/regression/replace_owner.cy.js b/cypress/e2e/regression/replace_owner.cy.js
index 4f7db44a74..c9355ede96 100644
--- a/cypress/e2e/regression/replace_owner.cy.js
+++ b/cypress/e2e/regression/replace_owner.cy.js
@@ -6,11 +6,11 @@ import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
 import * as ls from '../../support/localstorage_data.js'
 import { getEvents, events, checkDataLayerEvents } from '../../support/utils/gtag.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 let staticSafes = []
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
 const signer = walletCredentials.OWNER_4_PRIVATE_KEY
-const signer2 = walletCredentials.OWNER_1_PRIVATE_KEY
 
 const ownerName = 'Replacement Signer Name'
 
@@ -51,7 +51,7 @@ describe('Replace Owners tests', () => {
     wallet.connectSigner(signer)
     owner.waitForConnectionStatus()
     owner.openReplaceOwnerWindow(0)
-    owner.typeOwnerAddress(constants.SEPOLIA_OWNER_2)
+    owner.typeOwnerAddress(getMockAddress())
     owner.clickOnNextBtn()
     owner.verifyConfirmTransactionWindowDisplayed()
   })
@@ -63,13 +63,13 @@ describe('Replace Owners tests', () => {
     owner.typeOwnerAddress(main.generateRandomString(10))
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.invalidFormat)
 
-    owner.typeOwnerAddress(constants.addresBookContacts.user1.address.toUpperCase())
+    owner.typeOwnerAddress(getMockAddress().toUpperCase())
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.invalidChecksum)
 
     owner.typeOwnerAddress(staticSafes.SEP_STATIC_SAFE_4)
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.ownSafe)
 
-    owner.typeOwnerAddress(constants.addresBookContacts.user1.address.replace('F', 'f'))
+    owner.typeOwnerAddress(getMockAddress().replace('A', 'a'))
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.invalidChecksum)
 
     owner.typeOwnerAddress(constants.DEFAULT_OWNER_ADDRESS)
diff --git a/cypress/e2e/regression/spending_limits.cy.js b/cypress/e2e/regression/spending_limits.cy.js
index 893f7871a4..7b8a33c71d 100644
--- a/cypress/e2e/regression/spending_limits.cy.js
+++ b/cypress/e2e/regression/spending_limits.cy.js
@@ -6,6 +6,7 @@ import * as tx from '../pages/create_tx.pages'
 import * as ls from '../../support/localstorage_data.js'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 let staticSafes = []
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
@@ -52,12 +53,12 @@ describe('Spending limits tests', () => {
     //Assume that default reset time is set to One time
     wallet.connectSigner(signer)
     spendinglimit.clickOnNewSpendingLimitBtn()
-    spendinglimit.enterBeneficiaryAddress(staticSafes.SEP_STATIC_SAFE_6)
+    spendinglimit.enterBeneficiaryAddress(getMockAddress())
     spendinglimit.enterSpendingLimitAmount(0.1)
     spendinglimit.clickOnNextBtn()
     spendinglimit.checkReviewData(
       tokenAmount,
-      staticSafes.SEP_STATIC_SAFE_6,
+      getMockAddress(),
       spendinglimit.timePeriodOptions.oneTime.split(' ').join('-'),
     )
   })
diff --git a/cypress/e2e/regression/twaps_history.cy.js b/cypress/e2e/regression/twaps_history.cy.js
index 23cb87a543..0ef5854fd8 100644
--- a/cypress/e2e/regression/twaps_history.cy.js
+++ b/cypress/e2e/regression/twaps_history.cy.js
@@ -15,20 +15,17 @@ let iframeSelector
 
 const swapsHistory = swaps_data.type.history
 
-// Blocked by a bug on UI
-describe.skip('Twaps history tests', { defaultCommandTimeout: 30000 }, () => {
+describe('Twaps history tests', { defaultCommandTimeout: 30000 }, () => {
   before(async () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
 
-  beforeEach(() => {
+  // Blocked by bug on UI
+  it.skip('Verify order deails', () => {
     cy.visit(constants.swapUrl + staticSafes.SEP_STATIC_SAFE_27)
     main.waitForHistoryCallToComplete()
     wallet.connectSigner(signer)
     iframeSelector = `iframe[src*="${constants.swapWidget}"]`
-  })
-
-  it('Verify order deails', () => {
     swaps.acceptLegalDisclaimer()
     cy.wait(4000)
     main.getIframeBody(iframeSelector).within(() => {
diff --git a/cypress/e2e/safe-apps/drain_account.spec.cy.js b/cypress/e2e/safe-apps/drain_account.spec.cy.js
index 6f81403565..1698ae00d8 100644
--- a/cypress/e2e/safe-apps/drain_account.spec.cy.js
+++ b/cypress/e2e/safe-apps/drain_account.spec.cy.js
@@ -1,11 +1,10 @@
 import 'cypress-file-upload'
 import * as constants from '../../support/constants'
-import * as main from '../pages/main.page'
 import * as safeapps from '../pages/safeapps.pages'
 import * as navigation from '../pages/navigation.page'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
-import * as ls from '../../support/localstorage_data.js'
 import * as wallet from '../../support/utils/wallet.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 let safeAppSafes = []
 let iframeSelector
@@ -31,7 +30,7 @@ describe('Drain Account tests', { defaultCommandTimeout: 40000 }, () => {
   it('Verify drain can be created', () => {
     wallet.connectSigner(signer)
     cy.enter(iframeSelector).then((getBody) => {
-      getBody().findByLabelText(safeapps.recipientStr).type(safeAppSafes.SEP_SAFEAPP_SAFE_2)
+      getBody().findByLabelText(safeapps.recipientStr).type(getMockAddress())
       getBody().findAllByText(safeapps.transferEverythingStr).click()
     })
     cy.findByRole('button', { name: safeapps.testTransfer1 })
@@ -46,7 +45,7 @@ describe('Drain Account tests', { defaultCommandTimeout: 40000 }, () => {
       getBody().findByLabelText(safeapps.selectAllRowsChbxStr).click()
       getBody().findAllByLabelText(safeapps.selectRowChbxStr).eq(1).click()
       getBody().findAllByLabelText(safeapps.selectRowChbxStr).eq(2).click()
-      getBody().findByLabelText(safeapps.recipientStr).clear().type(safeAppSafes.SEP_SAFEAPP_SAFE_2)
+      getBody().findByLabelText(safeapps.recipientStr).clear().type(getMockAddress())
       getBody().findAllByText(safeapps.transfer2AssetsStr).click()
     })
     cy.findByRole('button', { name: safeapps.testTransfer2 })
@@ -67,7 +66,7 @@ describe('Drain Account tests', { defaultCommandTimeout: 40000 }, () => {
 
   it('Verify when cancelling a drain, previous data is preserved', () => {
     cy.enter(iframeSelector).then((getBody) => {
-      getBody().findByLabelText(safeapps.recipientStr).type(safeAppSafes.SEP_SAFEAPP_SAFE_2)
+      getBody().findByLabelText(safeapps.recipientStr).type(getMockAddress())
       getBody().findAllByText(safeapps.transferEverythingStr).click()
     })
     navigation.clickOnModalCloseBtn(0)
@@ -85,7 +84,7 @@ describe('Drain Account tests', { defaultCommandTimeout: 40000 }, () => {
 
   it('Verify a drain cannot be created with invalid recipient selected', () => {
     cy.enter(iframeSelector).then((getBody) => {
-      getBody().findByLabelText(safeapps.recipientStr).type(safeAppSafes.SEP_SAFEAPP_SAFE_2.substring(1))
+      getBody().findByLabelText(safeapps.recipientStr).type(getMockAddress().substring(1))
       getBody().findAllByText(safeapps.transferEverythingStr).click()
       getBody().findByText(safeapps.validRecipientAddressStr)
     })
@@ -94,7 +93,7 @@ describe('Drain Account tests', { defaultCommandTimeout: 40000 }, () => {
   it('Verify a drain cannot be created when no assets are selected', () => {
     cy.enter(iframeSelector).then((getBody) => {
       getBody().findByLabelText(safeapps.selectAllRowsChbxStr).click()
-      getBody().findByLabelText(safeapps.recipientStr).type(safeAppSafes.SEP_SAFEAPP_SAFE_2)
+      getBody().findByLabelText(safeapps.recipientStr).type(getMockAddress())
       getBody().findAllByText(safeapps.noTokensSelectedStr).should('be.visible')
     })
   })
diff --git a/cypress/e2e/safe-apps/tx-builder.2spec.cy.js b/cypress/e2e/safe-apps/tx-builder.2spec.cy.js
index 7f059a65ad..3353fe640e 100644
--- a/cypress/e2e/safe-apps/tx-builder.2spec.cy.js
+++ b/cypress/e2e/safe-apps/tx-builder.2spec.cy.js
@@ -6,8 +6,8 @@ import * as navigation from '../pages/navigation.page.js'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as ls from '../../support/localstorage_data.js'
 import { getEvents, events, checkDataLayerEvents } from '../../support/utils/gtag.js'
-import * as wallet from '../../support/utils/wallet.js'
 import * as utils from '../../support/utils/checkers.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 let safeAppSafes = []
 let iframeSelector
@@ -30,7 +30,7 @@ describe('Transaction Builder 2 tests', { defaultCommandTimeout: 20000 }, () =>
 
   it('Verify a batch cannot be created without method data', () => {
     cy.enter(iframeSelector).then((getBody) => {
-      getBody().findByLabelText(safeapps.enterAddressStr).type(constants.SAFE_APP_ADDRESS)
+      getBody().findByLabelText(safeapps.enterAddressStr).type(getMockAddress())
       getBody().findByText(safeapps.addTransactionStr).click()
       getBody()
         .findAllByText(safeapps.requiredStr)
diff --git a/cypress/e2e/safe-apps/tx-builder.spec.cy.js b/cypress/e2e/safe-apps/tx-builder.spec.cy.js
index bdd14fa43a..7c018d62ca 100644
--- a/cypress/e2e/safe-apps/tx-builder.spec.cy.js
+++ b/cypress/e2e/safe-apps/tx-builder.spec.cy.js
@@ -8,6 +8,7 @@ import * as ls from '../../support/localstorage_data.js'
 import { getEvents, events, checkDataLayerEvents } from '../../support/utils/gtag.js'
 import * as wallet from '../../support/utils/wallet.js'
 import * as utils from '../../support/utils/checkers.js'
+import { getMockAddress } from '../../support/utils/ethers.js'
 
 let safeAppSafes = []
 let iframeSelector
diff --git a/cypress/support/utils/ethers.js b/cypress/support/utils/ethers.js
new file mode 100644
index 0000000000..1e56b8634f
--- /dev/null
+++ b/cypress/support/utils/ethers.js
@@ -0,0 +1,5 @@
+import { ethers } from 'ethers'
+
+export const getMockAddress = () => {
+  return ethers.getAddress('0x1234567890abcdef1234567890abcdef12345678')
+}

From c3120789d57d1e3642b65b94ad06309813a37b0a Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Mon, 2 Dec 2024 09:43:39 +0100
Subject: [PATCH 38/47] Chore: extract terms version into a separate file for a
 smaller build (#4584)

---
 docs/update-terms.md                                | 4 ++--
 mocks/terms.md.js                                   | 6 ------
 src/components/common/CookieAndTermBanner/index.tsx | 4 ++--
 src/markdown/terms/terms.md                         | 5 -----
 src/markdown/terms/terms.md.d.ts                    | 5 -----
 src/markdown/terms/version.ts                       | 2 ++
 src/store/cookiesAndTermsSlice.ts                   | 6 +++---
 src/store/index.ts                                  | 7 ++-----
 8 files changed, 11 insertions(+), 28 deletions(-)
 delete mode 100644 mocks/terms.md.js
 delete mode 100644 src/markdown/terms/terms.md.d.ts
 create mode 100644 src/markdown/terms/version.ts

diff --git a/docs/update-terms.md b/docs/update-terms.md
index 5e69fac010..0e7d95832e 100644
--- a/docs/update-terms.md
+++ b/docs/update-terms.md
@@ -4,7 +4,7 @@ To update the terms and conditions, follow these steps:
 
 1. Export the terms and conditions from Google Docs as a Markdown file.
 2. Replace the content of the src/markdown/terms/terms.md file with the exported content.
-3. Update the frontmatter of the file with the new version number and date.
+3. If significant changes were made, update the version and last updated date in `version.ts` in the same folder.
 
 That’s it!
 
@@ -13,7 +13,7 @@ will automatically appear for users who haven’t accepted the new terms.
 
 ## How does this work?
 
-We rely on the version number from the frontmatter. When the Redux store is rehydrated, we check the version stored in
+We rely on the version number from `version.ts`. When the Redux store is rehydrated, we check the version stored in
 the store against the version in the frontmatter. If they differ, we reset the accepted terms, forcing the user to
 accept the new version.
 
diff --git a/mocks/terms.md.js b/mocks/terms.md.js
deleted file mode 100644
index cadf08493b..0000000000
--- a/mocks/terms.md.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const metadata = {
-  version: 'test-version',
-  last_update_date: 'test-date',
-}
-
-export default metadata
diff --git a/src/components/common/CookieAndTermBanner/index.tsx b/src/components/common/CookieAndTermBanner/index.tsx
index 43355279f5..1c74b4ea74 100644
--- a/src/components/common/CookieAndTermBanner/index.tsx
+++ b/src/components/common/CookieAndTermBanner/index.tsx
@@ -4,7 +4,7 @@ import type { CheckboxProps } from '@mui/material'
 import { Grid, Button, Checkbox, FormControlLabel, Typography, Paper, SvgIcon, Box } from '@mui/material'
 import WarningIcon from '@/public/images/notifications/warning.svg'
 import { useForm } from 'react-hook-form'
-import { metadata } from '@/markdown/terms/terms.md'
+import * as metadata from '@/markdown/terms/version'
 
 import { useAppDispatch, useAppSelector } from '@/store'
 import {
@@ -104,7 +104,7 @@ export const CookieAndTermBanner = ({
             >
               By browsing this page, you accept our{' '}
               <ExternalLink href={AppRoutes.terms}>Terms & Conditions</ExternalLink> (last updated{' '}
-              {metadata.last_update_date}) and the use of necessary cookies. By clicking &quot;Accept all&quot; you
+              {metadata.lastUpdated}) and the use of necessary cookies. By clicking &quot;Accept all&quot; you
               additionally agree to the use of Beamer and Analytics cookies as listed below.{' '}
               <ExternalLink href={AppRoutes.cookie}>Cookie policy</ExternalLink>
             </Typography>
diff --git a/src/markdown/terms/terms.md b/src/markdown/terms/terms.md
index 2f3bfdb426..3ddf2c604c 100644
--- a/src/markdown/terms/terms.md
+++ b/src/markdown/terms/terms.md
@@ -1,8 +1,3 @@
----
-version: 1.2
-last_update_date: September, 2024
----
-
 # Terms and Conditions
 
 Last updated: September, 2024
diff --git a/src/markdown/terms/terms.md.d.ts b/src/markdown/terms/terms.md.d.ts
deleted file mode 100644
index a89eca7930..0000000000
--- a/src/markdown/terms/terms.md.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default } from '*.md'
-export const metadata = {
-  version: string,
-  last_update_date: string,
-}
diff --git a/src/markdown/terms/version.ts b/src/markdown/terms/version.ts
new file mode 100644
index 0000000000..3cfbbfd377
--- /dev/null
+++ b/src/markdown/terms/version.ts
@@ -0,0 +1,2 @@
+export const version = '1.2'
+export const lastUpdated = 'September, 2024'
diff --git a/src/store/cookiesAndTermsSlice.ts b/src/store/cookiesAndTermsSlice.ts
index 7f9c2a6410..3177eeee81 100644
--- a/src/store/cookiesAndTermsSlice.ts
+++ b/src/store/cookiesAndTermsSlice.ts
@@ -1,7 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit'
 import { createSlice } from '@reduxjs/toolkit'
 import type { RootState } from '.'
-import { metadata } from '@/markdown/terms/terms.md'
+import { version } from '@/markdown/terms/version'
 
 export enum CookieAndTermType {
   TERMS = 'terms',
@@ -38,12 +38,12 @@ export const selectCookies = (state: RootState) => state[cookiesAndTermsSlice.na
 
 export const hasAcceptedTerms = (state: RootState): boolean => {
   const cookies = selectCookies(state)
-  return cookies[CookieAndTermType.TERMS] === true && cookies.termsVersion === metadata.version
+  return cookies[CookieAndTermType.TERMS] === true && cookies.termsVersion === version
 }
 
 export const hasConsentFor = (state: RootState, type: CookieAndTermType): boolean => {
   const cookies = selectCookies(state)
-  return cookies[type] === true && cookies.termsVersion === metadata.version
+  return cookies[type] === true && cookies.termsVersion === version
 }
 
 export const { saveCookieAndTermConsent } = cookiesAndTermsSlice.actions
diff --git a/src/store/index.ts b/src/store/index.ts
index 8617ee59da..c1f7783974 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -26,7 +26,7 @@ import * as slices from './slices'
 import * as hydrate from './useHydrateStore'
 import { ofacApi } from '@/store/api/ofac'
 import { safePassApi } from './api/safePass'
-import { metadata } from '@/markdown/terms/terms.md'
+import { version as termsVersion } from '@/markdown/terms/version'
 
 const rootReducer = combineReducers({
   [slices.chainsSlice.name]: slices.chainsSlice.reducer,
@@ -103,10 +103,7 @@ export const _hydrationReducer: typeof rootReducer = (state, action) => {
     const nextState = merge({}, state, action.payload) as RootState
 
     // Check if termsVersion matches
-    if (
-      nextState[cookiesAndTermsSlice.name] &&
-      nextState[cookiesAndTermsSlice.name].termsVersion !== metadata.version
-    ) {
+    if (nextState[cookiesAndTermsSlice.name] && nextState[cookiesAndTermsSlice.name].termsVersion !== termsVersion) {
       // Reset consent
       nextState[cookiesAndTermsSlice.name] = {
         ...cookiesAndTermsInitialState,

From fb158730f0a0280b414dd45879446abdfa9c5e00 Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Mon, 2 Dec 2024 12:33:07 +0100
Subject: [PATCH 39/47] fix: add event labels to opening and (un-)pinning of
 Safe Apps (#4582)

* Add event labels to opening and (un-)pinning of Safe Apps

* Only prevent link from opening if never opened before
---
 .../SafeAppsDashboardSection.tsx              | 11 +++++--
 src/components/safe-apps/AppFrame/index.tsx   | 16 +---------
 .../safe-apps/SafeAppCard/index.tsx           |  9 +++---
 .../safe-apps/SafeAppList/index.tsx           | 31 ++++++++++++-------
 .../safe-apps/SafeAppPreviewDrawer/index.tsx  |  2 ++
 src/hooks/safe-apps/useSafeApps.ts            | 10 +++---
 src/pages/apps/custom.tsx                     |  2 ++
 src/pages/apps/index.tsx                      |  9 +++---
 src/services/analytics/events/safeApps.ts     |  9 ++++++
 src/services/analytics/gtm.ts                 |  2 +-
 10 files changed, 56 insertions(+), 45 deletions(-)

diff --git a/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx b/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx
index 6cc9c91608..a8cd748020 100644
--- a/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx
+++ b/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx
@@ -10,6 +10,7 @@ import SafeAppPreviewDrawer from '@/components/safe-apps/SafeAppPreviewDrawer'
 import SafeAppCard, { SafeAppCardContainer } from '@/components/safe-apps/SafeAppCard'
 import { AppRoutes } from '@/config/routes'
 import ExploreSafeAppsIcon from '@/public/images/apps/explore.svg'
+import { SAFE_APPS_LABELS } from '@/services/analytics'
 
 import css from './styles.module.css'
 
@@ -34,9 +35,13 @@ const SafeAppsDashboardSection = () => {
           <Grid key={rankedSafeApp.id} item xs={12} sm={6} md={4} xl={4}>
             <SafeAppCard
               safeApp={rankedSafeApp}
-              onBookmarkSafeApp={togglePin}
+              onBookmarkSafeApp={(appId) => togglePin(appId, SAFE_APPS_LABELS.dashboard)}
               isBookmarked={pinnedSafeAppIds.has(rankedSafeApp.id)}
-              onClickSafeApp={() => openPreviewDrawer(rankedSafeApp)}
+              onClickSafeApp={(e) => {
+                // Don't open link
+                e.preventDefault()
+                openPreviewDrawer(rankedSafeApp)
+              }}
               openPreviewDrawer={openPreviewDrawer}
             />
           </Grid>
@@ -51,7 +56,7 @@ const SafeAppsDashboardSection = () => {
         safeApp={previewDrawerApp}
         isBookmarked={previewDrawerApp && pinnedSafeAppIds.has(previewDrawerApp.id)}
         onClose={closePreviewDrawer}
-        onBookmark={togglePin}
+        onBookmark={(appId) => togglePin(appId, SAFE_APPS_LABELS.apps_sidebar)}
       />
     </WidgetContainer>
   )
diff --git a/src/components/safe-apps/AppFrame/index.tsx b/src/components/safe-apps/AppFrame/index.tsx
index 381c226f73..7e10c614cf 100644
--- a/src/components/safe-apps/AppFrame/index.tsx
+++ b/src/components/safe-apps/AppFrame/index.tsx
@@ -2,14 +2,12 @@ import useAddressBook from '@/hooks/useAddressBook'
 import useChainId from '@/hooks/useChainId'
 import { type AddressBookItem, Methods } from '@safe-global/safe-apps-sdk'
 import type { ReactElement } from 'react'
-import { useMemo } from 'react'
 import { useCallback, useEffect } from 'react'
 import { Box, CircularProgress, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import type { RequestId } from '@safe-global/safe-apps-sdk'
 import { trackSafeAppOpenCount } from '@/services/safe-apps/track-app-usage-count'
-import { SAFE_APPS_EVENTS, trackSafeAppEvent } from '@/services/analytics'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { useSafeAppFromBackend } from '@/hooks/safe-apps/useSafeAppFromBackend'
 import { useSafePermissions } from '@/hooks/safe-apps/permissions'
@@ -57,13 +55,12 @@ const AppFrame = ({ appUrl, allowedFeaturesList, safeAppFromManifest, isNativeEm
     transactions,
   } = useTransactionQueueBarState()
   const queueBarVisible = transactions.results.length > 0 && !queueBarDismissed
-  const [remoteApp, , isBackendAppsLoading] = useSafeAppFromBackend(appUrl, safe.chainId)
+  const [remoteApp] = useSafeAppFromBackend(appUrl, safe.chainId)
   const { thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled } = useThirdPartyCookies()
   const { iframeRef, appIsLoading, isLoadingSlow, setAppIsLoading } = useAppIsLoading()
   useAnalyticsFromSafeApp(iframeRef)
   const { permissionsRequest, setPermissionsRequest, confirmPermissionRequest, getPermissions, hasPermission } =
     useSafePermissions()
-  const appName = useMemo(() => (remoteApp ? remoteApp.name : appUrl), [appUrl, remoteApp])
 
   const communicator = useCustomAppCommunicator(iframeRef, remoteApp || safeAppFromManifest, chain, {
     onGetPermissions: getPermissions,
@@ -110,17 +107,6 @@ const AppFrame = ({ appUrl, allowedFeaturesList, safeAppFromManifest, isNativeEm
     }
   }, [appUrl, iframeRef, setAppIsLoading, router, isNativeEmbed])
 
-  useEffect(() => {
-    if (!isNativeEmbed && !appIsLoading && !isBackendAppsLoading) {
-      trackSafeAppEvent(
-        {
-          ...SAFE_APPS_EVENTS.OPEN_APP,
-        },
-        appName,
-      )
-    }
-  }, [appIsLoading, isBackendAppsLoading, appName, isNativeEmbed])
-
   if (!safeLoaded) {
     return <div />
   }
diff --git a/src/components/safe-apps/SafeAppCard/index.tsx b/src/components/safe-apps/SafeAppCard/index.tsx
index bc5fd0d51f..65419d9e3a 100644
--- a/src/components/safe-apps/SafeAppCard/index.tsx
+++ b/src/components/safe-apps/SafeAppCard/index.tsx
@@ -21,7 +21,7 @@ import css from './styles.module.css'
 
 type SafeAppCardProps = {
   safeApp: SafeAppData
-  onClickSafeApp?: () => void
+  onClickSafeApp?: (e: SyntheticEvent) => void
   isBookmarked?: boolean
   onBookmarkSafeApp?: (safeAppId: number) => void
   removeCustomApp?: (safeApp: SafeAppData) => void
@@ -66,7 +66,7 @@ export const getSafeAppUrl = (router: NextRouter, safeAppUrl: string) => {
 
 type SafeAppCardViewProps = {
   safeApp: SafeAppData
-  onClickSafeApp?: () => void
+  onClickSafeApp?: (e: SyntheticEvent) => void
   safeAppUrl: string
   isBookmarked?: boolean
   onBookmarkSafeApp?: (safeAppId: number) => void
@@ -137,7 +137,7 @@ const SafeAppCardGridView = ({
 }
 
 type SafeAppCardContainerProps = {
-  onClickSafeApp?: () => void
+  onClickSafeApp?: (e: SyntheticEvent) => void
   safeAppUrl: string
   children: ReactNode
   height?: string
@@ -153,8 +153,7 @@ export const SafeAppCardContainer = ({
 }: SafeAppCardContainerProps) => {
   const handleClickSafeApp = (event: SyntheticEvent) => {
     if (onClickSafeApp) {
-      event.preventDefault()
-      onClickSafeApp()
+      onClickSafeApp(event)
     }
   }
 
diff --git a/src/components/safe-apps/SafeAppList/index.tsx b/src/components/safe-apps/SafeAppList/index.tsx
index 16ecb6431b..62b86f65ac 100644
--- a/src/components/safe-apps/SafeAppList/index.tsx
+++ b/src/components/safe-apps/SafeAppList/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { type SyntheticEvent, useCallback } from 'react'
 import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
 
 import SafeAppCard from '@/components/safe-apps/SafeAppCard'
@@ -11,12 +11,14 @@ import css from './styles.module.css'
 import { Skeleton } from '@mui/material'
 import { useOpenedSafeApps } from '@/hooks/safe-apps/useOpenedSafeApps'
 import NativeSwapsCard from '@/components/safe-apps/NativeSwapsCard'
+import { SAFE_APPS_EVENTS, SAFE_APPS_LABELS, trackSafeAppEvent } from '@/services/analytics'
+import { useSafeApps } from '@/hooks/safe-apps/useSafeApps'
 
 type SafeAppListProps = {
   safeAppsList: SafeAppData[]
   safeAppsListLoading?: boolean
   bookmarkedSafeAppsId?: Set<number>
-  onBookmarkSafeApp?: (safeAppId: number) => void
+  eventLabel: SAFE_APPS_LABELS
   addCustomApp?: (safeApp: SafeAppData) => void
   removeCustomApp?: (safeApp: SafeAppData) => void
   title: string
@@ -29,7 +31,7 @@ const SafeAppList = ({
   safeAppsList,
   safeAppsListLoading,
   bookmarkedSafeAppsId,
-  onBookmarkSafeApp,
+  eventLabel,
   addCustomApp,
   removeCustomApp,
   title,
@@ -37,20 +39,25 @@ const SafeAppList = ({
   isFiltered = false,
   showNativeSwapsCard = false,
 }: SafeAppListProps) => {
+  const { togglePin } = useSafeApps()
   const { isPreviewDrawerOpen, previewDrawerApp, openPreviewDrawer, closePreviewDrawer } = useSafeAppPreviewDrawer()
   const { openedSafeAppIds } = useOpenedSafeApps()
 
   const showZeroResultsPlaceholder = query && safeAppsList.length === 0
 
   const handleSafeAppClick = useCallback(
-    (safeApp: SafeAppData) => {
+    (e: SyntheticEvent, safeApp: SafeAppData) => {
       const isCustomApp = safeApp.id < 1
-
-      if (isCustomApp || openedSafeAppIds.includes(safeApp.id)) return
-
-      return () => openPreviewDrawer(safeApp)
+      if (!openedSafeAppIds.includes(safeApp.id) && !isCustomApp) {
+        // Don't open link
+        e.preventDefault()
+        openPreviewDrawer(safeApp)
+      } else {
+        // We only track if not previously opened as it is then tracked in preview drawer
+        trackSafeAppEvent({ ...SAFE_APPS_EVENTS.OPEN_APP, label: eventLabel }, safeApp.name)
+      }
     },
-    [openPreviewDrawer, openedSafeAppIds],
+    [eventLabel, openPreviewDrawer, openedSafeAppIds],
   )
 
   return (
@@ -82,9 +89,9 @@ const SafeAppList = ({
             <SafeAppCard
               safeApp={safeApp}
               isBookmarked={bookmarkedSafeAppsId?.has(safeApp.id)}
-              onBookmarkSafeApp={onBookmarkSafeApp}
+              onBookmarkSafeApp={() => togglePin(safeApp.id, eventLabel)}
               removeCustomApp={removeCustomApp}
-              onClickSafeApp={handleSafeAppClick(safeApp)}
+              onClickSafeApp={(e) => handleSafeAppClick(e, safeApp)}
               openPreviewDrawer={openPreviewDrawer}
             />
           </li>
@@ -100,7 +107,7 @@ const SafeAppList = ({
         safeApp={previewDrawerApp}
         isBookmarked={previewDrawerApp && bookmarkedSafeAppsId?.has(previewDrawerApp.id)}
         onClose={closePreviewDrawer}
-        onBookmark={onBookmarkSafeApp}
+        onBookmark={(appId) => togglePin(appId, SAFE_APPS_LABELS.apps_sidebar)}
       />
     </>
   )
diff --git a/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx b/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
index f295558ed4..a8526a902b 100644
--- a/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
+++ b/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
@@ -18,6 +18,7 @@ import SafeAppSocialLinksCard from '@/components/safe-apps/SafeAppSocialLinksCar
 import CloseIcon from '@/public/images/common/close.svg'
 import { useOpenedSafeApps } from '@/hooks/safe-apps/useOpenedSafeApps'
 import css from './styles.module.css'
+import { SAFE_APPS_EVENTS, SAFE_APPS_LABELS, trackSafeAppEvent } from '@/services/analytics'
 
 type SafeAppPreviewDrawerProps = {
   safeApp?: SafeAppData
@@ -35,6 +36,7 @@ const SafeAppPreviewDrawer = ({ isOpen, safeApp, isBookmarked, onClose, onBookma
   const onOpenSafe = () => {
     if (safeApp) {
       markSafeAppOpened(safeApp.id)
+      trackSafeAppEvent({ ...SAFE_APPS_EVENTS.OPEN_APP, label: SAFE_APPS_LABELS.apps_sidebar }, safeApp.name)
     }
   }
 
diff --git a/src/hooks/safe-apps/useSafeApps.ts b/src/hooks/safe-apps/useSafeApps.ts
index a9a299c06e..4e3b8f0635 100644
--- a/src/hooks/safe-apps/useSafeApps.ts
+++ b/src/hooks/safe-apps/useSafeApps.ts
@@ -5,7 +5,7 @@ import { useCustomSafeApps } from '@/hooks/safe-apps/useCustomSafeApps'
 import { usePinnedSafeApps } from '@/hooks/safe-apps/usePinnedSafeApps'
 import { useBrowserPermissions, useSafePermissions } from './permissions'
 import { useRankedSafeApps } from '@/hooks/safe-apps/useRankedSafeApps'
-import { SAFE_APPS_EVENTS, trackSafeAppEvent } from '@/services/analytics'
+import { SAFE_APPS_EVENTS, type SAFE_APPS_LABELS, trackSafeAppEvent } from '@/services/analytics'
 
 type ReturnType = {
   allSafeApps: SafeAppData[]
@@ -18,7 +18,7 @@ type ReturnType = {
   customSafeAppsLoading: boolean
   remoteSafeAppsError?: Error
   addCustomApp: (app: SafeAppData) => void
-  togglePin: (appId: number) => void
+  togglePin: (appId: number, eventLabel: SAFE_APPS_LABELS) => void
   removeCustomApp: (appId: number) => void
 }
 
@@ -61,17 +61,17 @@ const useSafeApps = (): ReturnType => {
     [updateCustomSafeApps, customSafeApps, removeSafePermissions, removeBrowserPermissions],
   )
 
-  const togglePin = (appId: number) => {
+  const togglePin = (appId: number, eventLabel: SAFE_APPS_LABELS) => {
     const alreadyPinned = pinnedSafeAppIds.has(appId)
     const newSet = new Set(pinnedSafeAppIds)
     const appName = allSafeApps.find((app) => app.id === appId)?.name
 
     if (alreadyPinned) {
       newSet.delete(appId)
-      trackSafeAppEvent(SAFE_APPS_EVENTS.UNPIN, appName)
+      trackSafeAppEvent({ ...SAFE_APPS_EVENTS.UNPIN, label: eventLabel }, appName)
     } else {
       newSet.add(appId)
-      trackSafeAppEvent(SAFE_APPS_EVENTS.PIN, appName)
+      trackSafeAppEvent({ ...SAFE_APPS_EVENTS.PIN, label: eventLabel }, appName)
     }
     updatePinnedSafeApps(newSet)
   }
diff --git a/src/pages/apps/custom.tsx b/src/pages/apps/custom.tsx
index 5ff434e9de..eafcae0e1d 100644
--- a/src/pages/apps/custom.tsx
+++ b/src/pages/apps/custom.tsx
@@ -8,6 +8,7 @@ import SafeAppList from '@/components/safe-apps/SafeAppList'
 import SafeAppsSDKLink from '@/components/safe-apps/SafeAppsSDKLink'
 import { RemoveCustomAppModal } from '@/components/safe-apps/RemoveCustomAppModal'
 import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
+import { SAFE_APPS_LABELS } from '@/services/analytics'
 
 const CustomSafeApps: NextPage = () => {
   // TODO: create a custom hook instead of use useSafeApps
@@ -42,6 +43,7 @@ const CustomSafeApps: NextPage = () => {
           safeAppsList={customSafeApps}
           addCustomApp={addCustomApp}
           removeCustomApp={openRemoveCustomAppModal}
+          eventLabel={SAFE_APPS_LABELS.apps_custom}
         />
       </main>
 
diff --git a/src/pages/apps/index.tsx b/src/pages/apps/index.tsx
index 1f9daa1d33..72252d4f67 100644
--- a/src/pages/apps/index.tsx
+++ b/src/pages/apps/index.tsx
@@ -14,10 +14,11 @@ import useSafeAppsFilters from '@/hooks/safe-apps/useSafeAppsFilters'
 import SafeAppsFilters from '@/components/safe-apps/SafeAppsFilters'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import { SAFE_APPS_LABELS } from '@/services/analytics'
 
 const SafeApps: NextPage = () => {
   const router = useRouter()
-  const { remoteSafeApps, remoteSafeAppsLoading, pinnedSafeApps, pinnedSafeAppIds, togglePin } = useSafeApps()
+  const { remoteSafeApps, remoteSafeAppsLoading, pinnedSafeApps, pinnedSafeAppIds } = useSafeApps()
   const { filteredApps, query, setQuery, setSelectedCategories, setOptimizedWithBatchFilter, selectedCategories } =
     useSafeAppsFilters(remoteSafeApps)
   const isFiltered = filteredApps.length !== remoteSafeApps.length
@@ -72,7 +73,7 @@ const SafeApps: NextPage = () => {
             title="My pinned apps"
             safeAppsList={pinnedSafeApps}
             bookmarkedSafeAppsId={pinnedSafeAppIds}
-            onBookmarkSafeApp={togglePin}
+            eventLabel={SAFE_APPS_LABELS.apps_pinned}
           />
         )}
 
@@ -82,7 +83,7 @@ const SafeApps: NextPage = () => {
             title="Featured apps"
             safeAppsList={featuredSafeApps}
             bookmarkedSafeAppsId={pinnedSafeAppIds}
-            onBookmarkSafeApp={togglePin}
+            eventLabel={SAFE_APPS_LABELS.apps_featured}
           />
         )}
 
@@ -93,7 +94,7 @@ const SafeApps: NextPage = () => {
           safeAppsList={isFiltered ? filteredApps : nonPinnedApps}
           safeAppsListLoading={remoteSafeAppsLoading}
           bookmarkedSafeAppsId={pinnedSafeAppIds}
-          onBookmarkSafeApp={togglePin}
+          eventLabel={SAFE_APPS_LABELS.apps_all}
           query={query}
           showNativeSwapsCard
         />
diff --git a/src/services/analytics/events/safeApps.ts b/src/services/analytics/events/safeApps.ts
index 7ae48c78d5..98b8c4bba7 100644
--- a/src/services/analytics/events/safeApps.ts
+++ b/src/services/analytics/events/safeApps.ts
@@ -70,3 +70,12 @@ export const SAFE_APPS_EVENTS = {
     action: 'SDK method call',
   },
 }
+
+export enum SAFE_APPS_LABELS {
+  dashboard = 'dashboard',
+  apps_pinned = 'apps_pinned',
+  apps_featured = 'apps_featured',
+  apps_all = 'apps_all',
+  apps_custom = 'apps_custom',
+  apps_sidebar = 'apps_sidebar',
+}
diff --git a/src/services/analytics/gtm.ts b/src/services/analytics/gtm.ts
index 3945b2d9ed..978d090f5e 100644
--- a/src/services/analytics/gtm.ts
+++ b/src/services/analytics/gtm.ts
@@ -159,7 +159,7 @@ export const normalizeAppName = (appName?: string): string => {
 }
 
 export const gtmTrackSafeApp = (eventData: AnalyticsEvent, appName?: string, sdkEventData?: SafeAppSDKEvent): void => {
-  if (!location.pathname.startsWith(AppRoutes.apps.index)) {
+  if (!location.pathname.startsWith(AppRoutes.apps.index) && !eventData.label) {
     return
   }
 

From dc9327e89df056765f7a729561e5b6ee9f8647dd Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Mon, 2 Dec 2024 12:13:20 +0000
Subject: [PATCH 40/47] Tests: Fix tests (#4586)

* Fix tests
---
 cypress/e2e/happypath/recovery_hp_1.cy.js |  6 ------
 cypress/e2e/pages/main.page.js            | 10 ++++++++++
 cypress/e2e/pages/nfts.pages.js           |  2 +-
 cypress/e2e/pages/recovery.pages.js       |  1 -
 cypress/e2e/pages/sidebar.pages.js        |  2 +-
 cypress/e2e/smoke/load_safe.cy.js         |  1 -
 cypress/support/e2e.js                    |  5 +++++
 7 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/cypress/e2e/happypath/recovery_hp_1.cy.js b/cypress/e2e/happypath/recovery_hp_1.cy.js
index bb036e11fc..e542eead30 100644
--- a/cypress/e2e/happypath/recovery_hp_1.cy.js
+++ b/cypress/e2e/happypath/recovery_hp_1.cy.js
@@ -34,13 +34,7 @@ describe('Recovery happy path tests 1', () => {
     recovery.clickOnNextBtn()
     tx.executeFlow_1()
     recovery.verifyRecovererAdded([constants.SEPOLIA_OWNER_2_SHORT])
-
     recovery.clearRecoverers()
-
-    // recovery.removeRecoverer(0, constants.SEPOLIA_OWNER_2)
-    // recovery.clickOnNextBtn()
-    // tx.executeFlow_1()
-
     recovery.getSetupRecoveryBtn()
   })
 })
diff --git a/cypress/e2e/pages/main.page.js b/cypress/e2e/pages/main.page.js
index a7088c060f..229e7e963d 100644
--- a/cypress/e2e/pages/main.page.js
+++ b/cypress/e2e/pages/main.page.js
@@ -194,6 +194,16 @@ export function acceptCookies(index = 0) {
     })
 }
 
+export function acceptCookies2() {
+  cy.wait(2000)
+  cy.get('body').then(($body) => {
+    if ($body.find('button:contains(' + acceptSelection + ')').length > 0) {
+      cy.contains('button', acceptSelection).click()
+      cy.wait(500)
+    }
+  })
+}
+
 export function verifyOwnerConnected(prefix = 'sep:') {
   cy.get(connectedOwnerBlock).should('contain', prefix)
 }
diff --git a/cypress/e2e/pages/nfts.pages.js b/cypress/e2e/pages/nfts.pages.js
index dcd566f383..84b51313f4 100644
--- a/cypress/e2e/pages/nfts.pages.js
+++ b/cypress/e2e/pages/nfts.pages.js
@@ -22,7 +22,7 @@ const txDetailsSummary = '[data-testid="decoded-tx-summary"]'
 const txAccordionDetails = '[data-testid="decoded-tx-details"]'
 const accordionActionItem = '[data-testid="action-item"]'
 
-const noneNFTSelected = '0 NFTs selected'
+const noneNFTSelected = /0 NFT[s]? selected/
 const sendNFTStr = 'Send NFTs'
 const recipientAddressStr = 'Recipient address or ENS'
 const selectedNFTStr = 'Selected NFTs'
diff --git a/cypress/e2e/pages/recovery.pages.js b/cypress/e2e/pages/recovery.pages.js
index 9c84ea3fcc..4734e22da2 100644
--- a/cypress/e2e/pages/recovery.pages.js
+++ b/cypress/e2e/pages/recovery.pages.js
@@ -101,7 +101,6 @@ export function getSetupRecoveryBtn() {
 
 export function clickOnSetupRecoveryBtn() {
   getSetupRecoveryBtn().click()
-  cy.get(setupRecoveryModalBtn).should('be.visible')
 }
 
 export function clickOnSetupRecoveryModalBtn() {
diff --git a/cypress/e2e/pages/sidebar.pages.js b/cypress/e2e/pages/sidebar.pages.js
index a2bd1c0ad7..481e9bc923 100644
--- a/cypress/e2e/pages/sidebar.pages.js
+++ b/cypress/e2e/pages/sidebar.pages.js
@@ -349,7 +349,7 @@ export function checkSafeGroupBalance(index) {
     .find(groupBalance)
     .invoke('text')
     .should('include', '$')
-    .and('match', /\d+\.\d{2}/)
+    .and('match', /\$?\s?\d+(\.\d{1,3})?/)
 }
 
 export function checkSafeGroupAddress(index, address) {
diff --git a/cypress/e2e/smoke/load_safe.cy.js b/cypress/e2e/smoke/load_safe.cy.js
index ff05d98de6..b2665cc2ad 100644
--- a/cypress/e2e/smoke/load_safe.cy.js
+++ b/cypress/e2e/smoke/load_safe.cy.js
@@ -17,7 +17,6 @@ describe('[SMOKE] Load Safe tests', () => {
 
   beforeEach(() => {
     cy.visit(constants.loadNewSafeSepoliaUrl)
-    cy.wait(2000)
   })
 
   it('[SMOKE] Verify a network can be selected in the Safe', () => {
diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js
index 5be72d9f02..d4394774d7 100644
--- a/cypress/support/e2e.js
+++ b/cypress/support/e2e.js
@@ -19,6 +19,8 @@ import './commands'
 import './safe-apps-commands'
 import * as constants from './constants'
 import * as ls from './localstorage_data'
+import { acceptCookies2 } from '../e2e/pages/main.page'
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
@@ -73,5 +75,8 @@ beforeEach(() => {
       constants.localStorageKeys.SAFE_v2__SafeApps__infoModal,
       ls.appPermissions(constants.safeTestAppurl).infoModalAccepted,
     )
+    cy.wrap(window.localStorage).invoke('getItem', cookiesKey).should('equal', ls.cookies.acceptedCookies)
   })
+  cy.visit(constants.setupUrl + 'sep:0xBb26E3717172d5000F87DeFd391994f789D80aEB')
+  acceptCookies2()
 })

From 374f5565745d822615598eaafafac5be5b96236c Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Mon, 2 Dec 2024 14:45:46 +0100
Subject: [PATCH 41/47] 1.48.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9964334f1f..167165dde1 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "safe-wallet-web",
   "homepage": "https://github.com/safe-global/safe-wallet-web",
   "license": "GPL-3.0",
-  "version": "1.47.2",
+  "version": "1.48.0",
   "type": "module",
   "scripts": {
     "dev": "next dev",

From b30a74bd318bfbf895ec4cbcd41c4170f4fcb48b Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Mon, 2 Dec 2024 15:13:20 +0000
Subject: [PATCH 42/47] Tests: Update twap tests (#4590)

---
 cypress/e2e/pages/swaps.pages.js     | 16 ++++++++++++++++
 cypress/e2e/regression/twaps.cy.js   | 15 +++++++++++----
 cypress/e2e/regression/twaps_2.cy.js | 22 +++++++++++++++-------
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/pages/swaps.pages.js b/cypress/e2e/pages/swaps.pages.js
index 8707e5d35d..84b226c356 100644
--- a/cypress/e2e/pages/swaps.pages.js
+++ b/cypress/e2e/pages/swaps.pages.js
@@ -14,6 +14,7 @@ export const assetsSwapBtn = '[data-testid="swap-btn"]'
 export const dashboardSwapBtn = '[data-testid="overview-swap-btn"]'
 export const customRecipient = 'div[id="recipient"]'
 const recipientToggle = 'button[id="toggle-recipient-mode-button"]'
+const twapsAddressToggle = '[class*="Toggle__Wrapper"]'
 const orderTypeMenuItem = 'div[class*="MenuItem"]'
 const explorerBtn = '[data-testid="explorer-btn"]'
 const limitPriceFld = '[data-testid="limit-price"]'
@@ -27,6 +28,7 @@ const groupedItems = '[data-testid="grouped-items"]'
 const inputCurrencyPreview = '[id="input-currency-preview"]'
 const outputCurrencyPreview = '[id="output-currency-preview"]'
 const reviewTwapBtn = '[id="do-trade-button"]'
+export const unlockOrdersBtn = '[id="unlock-advanced-orders-btn"]'
 
 const swapStrBtn = 'Swap'
 const twapStrBtn = 'TWAP'
@@ -105,6 +107,15 @@ export const swapTxs = {
     '&id=multisig_0x03042B890b99552b60A073F808100517fb148F60_0x5f08e05edb210a8990791e9df2f287a5311a8137815ec85856a2477a36552f1e',
 }
 
+export function unlockTwapOrders(iframeSelector) {
+  main.getIframeBody(iframeSelector).then(($iframeBody) => {
+    if ($iframeBody.find(unlockOrdersBtn).length > 0) {
+      cy.wrap($iframeBody).find(unlockOrdersBtn).click()
+      cy.wait(500)
+    }
+  })
+}
+
 export function clickOnAssetSwapBtn(index) {
   cy.get(assetsSwapBtn).eq(index).as('btn')
   cy.get('@btn').click()
@@ -267,6 +278,10 @@ export function enableCustomRecipient(option) {
   if (!option) cy.get(recipientToggle).click()
 }
 
+export function enableTwapCustomRecipient() {
+  cy.get(twapsAddressToggle).click()
+}
+
 export function disableCustomRecipient(option) {
   if (option) cy.get(recipientToggle).click()
 }
@@ -349,6 +364,7 @@ export function switchToTwap() {
   cy.get('a').contains(swapStrBtn).click()
   cy.wait(1000)
   cy.get('a').contains(twapStrBtn).click()
+  cy.wait(1000)
 }
 
 export function checkTokenBalanceAndValue(tokenDirection, balance, value) {
diff --git a/cypress/e2e/regression/twaps.cy.js b/cypress/e2e/regression/twaps.cy.js
index ee918f2776..5b283a8515 100644
--- a/cypress/e2e/regression/twaps.cy.js
+++ b/cypress/e2e/regression/twaps.cy.js
@@ -10,15 +10,13 @@ const signer = walletCredentials.OWNER_4_PRIVATE_KEY
 let staticSafes = []
 let iframeSelector
 
-// Blocked by a bug on UI
-describe.skip('Twaps tests', { defaultCommandTimeout: 30000 }, () => {
+describe('Twaps tests', { defaultCommandTimeout: 30000 }, () => {
   before(async () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
 
   beforeEach(() => {
     cy.visit(constants.swapUrl + staticSafes.SEP_STATIC_SAFE_27)
-    main.waitForHistoryCallToComplete()
     wallet.connectSigner(signer)
     iframeSelector = `iframe[src*="${constants.swapWidget}"]`
   })
@@ -37,8 +35,12 @@ describe.skip('Twaps tests', { defaultCommandTimeout: 30000 }, () => {
 
     swaps.acceptLegalDisclaimer()
     cy.wait(4000)
+
     main.getIframeBody(iframeSelector).within(() => {
       swaps.switchToTwap()
+    })
+    swaps.unlockTwapOrders(iframeSelector)
+    main.getIframeBody(iframeSelector).within(() => {
       swaps.clickOnTokenSelctor('input')
       swaps.checkTokenList(tokens)
     })
@@ -51,7 +53,9 @@ describe.skip('Twaps tests', { defaultCommandTimeout: 30000 }, () => {
     cy.wait(4000)
     main.getIframeBody(iframeSelector).within(() => {
       swaps.switchToTwap()
-
+    })
+    swaps.unlockTwapOrders(iframeSelector)
+    main.getIframeBody(iframeSelector).within(() => {
       swaps.selectInputCurrency(swaps.swapTokens.cow)
       swaps.setInputValue(500)
       swaps.selectOutputCurrency(swaps.swapTokens.dai)
@@ -64,6 +68,9 @@ describe.skip('Twaps tests', { defaultCommandTimeout: 30000 }, () => {
     cy.wait(4000)
     main.getIframeBody(iframeSelector).within(() => {
       swaps.switchToTwap()
+    })
+    swaps.unlockTwapOrders(iframeSelector)
+    main.getIframeBody(iframeSelector).within(() => {
       swaps.selectInputCurrency(swaps.swapTokens.cow)
       swaps.clickOnMaxBtn()
       swaps.checkInputValue('input', '750')
diff --git a/cypress/e2e/regression/twaps_2.cy.js b/cypress/e2e/regression/twaps_2.cy.js
index 84f1399de1..c37923b049 100644
--- a/cypress/e2e/regression/twaps_2.cy.js
+++ b/cypress/e2e/regression/twaps_2.cy.js
@@ -10,8 +10,7 @@ const signer = walletCredentials.OWNER_4_PRIVATE_KEY
 let staticSafes = []
 let iframeSelector
 
-// Blocked by a bug on UI
-describe.skip('Twaps 2 tests', { defaultCommandTimeout: 30000 }, () => {
+describe('Twaps 2 tests', { defaultCommandTimeout: 30000 }, () => {
   before(async () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
@@ -32,6 +31,9 @@ describe.skip('Twaps 2 tests', { defaultCommandTimeout: 30000 }, () => {
       cy.wait(4000)
       main.getIframeBody(iframeSelector).within(() => {
         swaps.switchToTwap()
+      })
+      swaps.unlockTwapOrders(iframeSelector)
+      main.getIframeBody(iframeSelector).within(() => {
         swaps.selectInputCurrency(swaps.swapTokens.cow)
         swaps.setInputValue(2000)
         swaps.selectOutputCurrency(swaps.swapTokens.dai)
@@ -49,6 +51,9 @@ describe.skip('Twaps 2 tests', { defaultCommandTimeout: 30000 }, () => {
       cy.wait(4000)
       main.getIframeBody(iframeSelector).within(() => {
         swaps.switchToTwap()
+      })
+      swaps.unlockTwapOrders(iframeSelector)
+      main.getIframeBody(iframeSelector).within(() => {
         swaps.selectInputCurrency(swaps.swapTokens.cow)
         swaps.setInputValue(100)
         swaps.selectOutputCurrency(swaps.swapTokens.dai)
@@ -74,12 +79,15 @@ describe.skip('Twaps 2 tests', { defaultCommandTimeout: 30000 }, () => {
         })
         .within(() => {
           swaps.switchToTwap()
-          swaps.selectInputCurrency(swaps.swapTokens.cow)
-          swaps.clickOnSettingsBtnTwaps()
-          swaps.enableCustomRecipient(isCustomRecipientFound(swaps.customRecipient))
-          swaps.clickOnSettingsBtnTwaps()
-          swaps.enterRecipient(swaps.blockedAddress)
         })
+      swaps.unlockTwapOrders(iframeSelector)
+      main.getIframeBody(iframeSelector).within(() => {
+        swaps.selectInputCurrency(swaps.swapTokens.cow)
+        swaps.clickOnSettingsBtnTwaps()
+        swaps.enableTwapCustomRecipient()
+        swaps.clickOnSettingsBtnTwaps()
+        swaps.enterRecipient(swaps.blockedAddress)
+      })
       cy.contains(swaps.blockedAddressStr)
     },
   )

From 9e314183935f9e69b6932cbd08f9cba7cb28eea4 Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Mon, 2 Dec 2024 18:22:51 +0000
Subject: [PATCH 43/47] tests: Update test steps (#4591)

---
 cypress/e2e/regression/balances_pagination.cy.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/cypress/e2e/regression/balances_pagination.cy.js b/cypress/e2e/regression/balances_pagination.cy.js
index 8b81050e73..fdc658657b 100644
--- a/cypress/e2e/regression/balances_pagination.cy.js
+++ b/cypress/e2e/regression/balances_pagination.cy.js
@@ -5,12 +5,9 @@ import * as main from '../../e2e/pages/main.page'
 const ASSETS_LENGTH = 8
 
 describe('Balance pagination tests', () => {
-  before(() => {
+  it('Verify a user can change rows per page and navigate to next and previous page', () => {
     cy.visit(constants.BALANCE_URL + constants.SEPOLIA_TEST_SAFE_6)
     assets.selectTokenList(assets.tokenListOptions.allTokens)
-  })
-
-  it('Verify a user can change rows per page and navigate to next and previous page', () => {
     assets.verifyInitialTableState()
     assets.changeTo10RowsPerPage()
     assets.verifyTableHas10Rows()

From 2bf05141dee3a8f4e46b9ff6671fda580451724f Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 3 Dec 2024 10:40:51 +0100
Subject: [PATCH 44/47] Chore: speed up dev build (#4592)

---
 next.config.mjs | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/next.config.mjs b/next.config.mjs
index b867dc0049..b23c212339 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -47,7 +47,7 @@ const nextConfig = {
       '@gnosis.pm/zodiac',
     ],
   },
-  webpack(config) {
+  webpack(config, { dev }) {
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: { and: [/\.(js|ts|md)x?$/] },
@@ -79,6 +79,21 @@ const nextConfig = {
       'mainnet.json': path.resolve('./node_modules/@ethereumjs/common/dist.browser/genesisStates/mainnet.json'),
     }
 
+    if (dev) {
+      config.optimization.splitChunks = {
+        ...config.optimization.splitChunks,
+        cacheGroups: {
+          ...config.optimization.splitChunks.cacheGroups,
+          customModule: {
+            test: /[\\/]node_modules[\\/](@safe-global|ethers)[\\/]/,
+            name: 'protocol-kit-ethers',
+            chunks: 'all',
+          },
+        },
+      }
+      config.optimization.minimize = false
+    }
+
     return config
   },
 }

From 7668262bae05663c319462e66ef30f778d564456 Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Tue, 3 Dec 2024 12:48:58 +0100
Subject: [PATCH 45/47] fix: do not duplicate hex prefixes in
 `wallet_getCallsStatus` receipts (#4594)

---
 .../safe-wallet-provider/index.test.ts        | 55 ++++++++++++++++++-
 src/services/safe-wallet-provider/index.ts    |  9 ++-
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/src/services/safe-wallet-provider/index.test.ts b/src/services/safe-wallet-provider/index.test.ts
index cbb86f5c50..3aebe75d9c 100644
--- a/src/services/safe-wallet-provider/index.test.ts
+++ b/src/services/safe-wallet-provider/index.test.ts
@@ -619,7 +619,60 @@ describe('SafeWalletProvider', () => {
     })
 
     describe('wallet_getCallsStatus', () => {
-      it('should return a confirmed transaction', async () => {
+      it('should return a confirmed transaction if blockNumber/gasUsed are hex', async () => {
+        const receipt: Pick<TransactionReceipt, 'logs' | 'blockHash' | 'blockNumber' | 'gasUsed'> = {
+          logs: [],
+          blockHash: faker.string.hexadecimal(),
+          // Typed as number/bigint; is hex
+          blockNumber: faker.string.hexadecimal() as unknown as number,
+          gasUsed: faker.string.hexadecimal() as unknown as bigint,
+        }
+        const sdk = {
+          getBySafeTxHash: jest.fn().mockResolvedValue({
+            txStatus: 'SUCCESS',
+            txHash: '0x123',
+            txData: {
+              dataDecoded: {
+                parameters: [{ valueDecoded: [1] }],
+              },
+            },
+          }),
+          proxy: jest.fn().mockImplementation((method) => {
+            if (method === 'eth_getTransactionReceipt') {
+              return Promise.resolve(receipt)
+            }
+            return Promise.reject('Unknown method')
+          }),
+        }
+        const safeWalletProvider = new SafeWalletProvider(safe, sdk as any)
+
+        const params = ['0x123']
+
+        const status = await safeWalletProvider.request(1, { method: 'wallet_getCallsStatus', params } as any, appInfo)
+
+        expect(sdk.getBySafeTxHash).toHaveBeenCalledWith(params[0])
+        expect(sdk.proxy).toHaveBeenCalledWith('eth_getTransactionReceipt', params)
+        expect(status).toStrictEqual({
+          id: 1,
+          jsonrpc: '2.0',
+          result: {
+            receipts: [
+              {
+                blockHash: receipt.blockHash,
+                blockNumber: receipt.blockNumber,
+                chainId: '0x1',
+                gasUsed: receipt.gasUsed,
+                logs: receipt.logs,
+                status: '0x1',
+                transactionHash: '0x123',
+              },
+            ],
+            status: 'CONFIRMED',
+          },
+        })
+      })
+
+      it('should return a confirmed transaction if blockNumber/gasUsed are number/bigint', async () => {
         const receipt: Pick<TransactionReceipt, 'logs' | 'blockHash' | 'blockNumber' | 'gasUsed'> = {
           logs: [],
           blockHash: faker.string.hexadecimal(),
diff --git a/src/services/safe-wallet-provider/index.ts b/src/services/safe-wallet-provider/index.ts
index 086d835285..9598a23fc9 100644
--- a/src/services/safe-wallet-provider/index.ts
+++ b/src/services/safe-wallet-provider/index.ts
@@ -403,13 +403,18 @@ export class SafeWalletProvider {
     }
 
     const calls = tx.txData?.dataDecoded?.parameters?.[0].valueDecoded?.length ?? 1
+
+    // Typed as number; is hex
+    const blockNumber = Number(receipt.blockNumber)
+    const gasUsed = Number(receipt.gasUsed)
+
     const receipts = Array.from({ length: calls }, () => ({
       logs: receipt.logs,
       status: numberToHex(tx.txStatus === TransactionStatus.SUCCESS ? 1 : 0),
       chainId: numberToHex(this.safe.chainId),
       blockHash: receipt.blockHash as `0x${string}`,
-      blockNumber: numberToHex(receipt.blockNumber),
-      gasUsed: numberToHex(receipt.gasUsed),
+      blockNumber: numberToHex(blockNumber),
+      gasUsed: numberToHex(gasUsed),
       transactionHash: tx.txHash as `0x${string}`,
     }))
 

From 26d95a3115043e8664d3864034fd8f5cdd22d839 Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Tue, 3 Dec 2024 13:20:20 +0100
Subject: [PATCH 46/47] fix: Keep Sidebar drawer mounted

---
 src/components/sidebar/Sidebar/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
index 0423611e99..adce10f170 100644
--- a/src/components/sidebar/Sidebar/index.tsx
+++ b/src/components/sidebar/Sidebar/index.tsx
@@ -58,7 +58,13 @@ const Sidebar = (): ReactElement => {
 
         <IndexingStatus />
       </div>
-      <Drawer variant="temporary" anchor="left" open={isDrawerOpen} onClose={onDrawerToggle}>
+      <Drawer
+        variant="temporary"
+        anchor="left"
+        open={isDrawerOpen}
+        onClose={onDrawerToggle}
+        ModalProps={{ keepMounted: true }}
+      >
         <div className={css.drawer}>
           <MyAccounts onLinkClick={closeDrawer} isSidebar></MyAccounts>
         </div>

From d87151e83744d81fcd446bb7c7b0d6579cc9497a Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 3 Dec 2024 15:58:47 +0100
Subject: [PATCH 47/47] Delay initial mount

---
 src/components/sidebar/Sidebar/index.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
index adce10f170..002a40bbe2 100644
--- a/src/components/sidebar/Sidebar/index.tsx
+++ b/src/components/sidebar/Sidebar/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, type ReactElement } from 'react'
+import { useCallback, useEffect, useState, type ReactElement } from 'react'
 import { Box, Divider, Drawer } from '@mui/material'
 import ChevronRight from '@mui/icons-material/ChevronRight'
 
@@ -14,6 +14,7 @@ import MyAccounts from '@/features/myAccounts'
 
 const Sidebar = (): ReactElement => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
+  const [modalProps, setModalProps] = useState({ keepMounted: false })
 
   const onDrawerToggle = useCallback(() => {
     setIsDrawerOpen((isOpen) => {
@@ -25,6 +26,13 @@ const Sidebar = (): ReactElement => {
 
   const closeDrawer = useCallback(() => setIsDrawerOpen(false), [])
 
+  // Mount the drawer 600ms after the page load, and keep it mounted
+  useEffect(() => {
+    setTimeout(() => {
+      setModalProps({ keepMounted: true })
+    }, 600)
+  }, [])
+
   return (
     <div data-testid="sidebar-container" className={css.container}>
       <div className={css.scroll}>
@@ -58,13 +66,7 @@ const Sidebar = (): ReactElement => {
 
         <IndexingStatus />
       </div>
-      <Drawer
-        variant="temporary"
-        anchor="left"
-        open={isDrawerOpen}
-        onClose={onDrawerToggle}
-        ModalProps={{ keepMounted: true }}
-      >
+      <Drawer variant="temporary" anchor="left" open={isDrawerOpen} onClose={onDrawerToggle} ModalProps={modalProps}>
         <div className={css.drawer}>
           <MyAccounts onLinkClick={closeDrawer} isSidebar></MyAccounts>
         </div>