Merge branch 'epic-tx-flow' of github.com:safe-global/web-core into r…

…isk-submit

.github/workflows/build/action.yml

@@ -42,3 +42,4 @@ runs:
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_PRODUCTION }}
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING }}
         NEXT_PUBLIC_IS_OFFICIAL_HOST: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_IS_OFFICIAL_HOST }}
+        NEXT_PUBLIC_REDEFINE_API: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_REDEFINE_API }}

jest.setup.js

@@ -9,7 +9,7 @@ import 'whatwg-fetch'
 jest.mock('@web3-onboard/coinbase', () => jest.fn())
 jest.mock('@web3-onboard/injected-wallets', () => ({ ProviderLabel: { MetaMask: 'MetaMask' } }))
 jest.mock('@web3-onboard/keystone/dist/index', () => jest.fn())
-jest.mock('@web3-onboard/ledger', () => jest.fn())
+jest.mock('@web3-onboard/ledger/dist/index', () => jest.fn())
 jest.mock('@web3-onboard/trezor', () => jest.fn())
 jest.mock('@web3-onboard/walletconnect', () => jest.fn())
 jest.mock('@web3-onboard/taho', () => jest.fn())

package.json

@@ -20,7 +20,7 @@
     "routes": "node scripts/generate-routes.js > src/config/routes.ts && prettier -w src/config/routes.ts && cat src/config/routes.ts",
     "css-vars": "ts-node-esm ./scripts/css-vars.ts > ./src/styles/vars.css && prettier -w src/styles/vars.css",
     "generate-types": "typechain --target ethers-v5 --out-dir src/types/contracts ./node_modules/@safe-global/safe-deployments/dist/assets/**/*.json ./node_modules/@safe-global/safe-modules-deployments/dist/assets/**/*.json ./node_modules/@openzeppelin/contracts/build/contracts/ERC20.json ./node_modules/@openzeppelin/contracts/build/contracts/ERC721.json",
-    "postinstall": "yarn patch-package && yarn generate-types && yarn css-vars",
+    "postinstall": "yarn generate-types && yarn css-vars",
     "analyze": "cross-env ANALYZE=true yarn build",
     "cypress:open": "cross-env TZ=UTC cypress open --e2e",
     "cypress:canary": "cross-env TZ=UTC cypress open --e2e -b chrome:canary",
@@ -43,24 +43,24 @@
     "@mui/x-date-pickers": "^5.0.12",
     "@reduxjs/toolkit": "^1.9.5",
     "@safe-global/safe-apps-sdk": "7.11.0",
-    "@safe-global/safe-core-sdk": "^3.3.3",
-    "@safe-global/safe-core-sdk-utils": "^1.7.3",
-    "@safe-global/safe-deployments": "^1.22.0",
-    "@safe-global/safe-ethers-lib": "^1.9.3",
+    "@safe-global/safe-core-sdk": "^3.3.4",
+    "@safe-global/safe-core-sdk-utils": "^1.7.4",
+    "@safe-global/safe-deployments": "^1.25.0",
+    "@safe-global/safe-ethers-lib": "^1.9.4",
     "@safe-global/safe-gateway-typescript-sdk": "^3.7.3",
     "@safe-global/safe-modules-deployments": "^1.0.0",
     "@safe-global/safe-react-components": "^2.0.5",
     "@sentry/react": "^7.28.1",
     "@sentry/tracing": "^7.28.1",
     "@truffle/hdwallet-provider": "^2.1.4",
     "@web3-onboard/coinbase": "^2.2.4",
-    "@web3-onboard/core": "2.20.3",
+    "@web3-onboard/core": "2.20.4",
     "@web3-onboard/injected-wallets": "^2.10.0",
     "@web3-onboard/keystone": "^2.3.7",
-    "@web3-onboard/ledger": "^2.4.6",
-    "@web3-onboard/taho": "^2.0.4",
+    "@web3-onboard/ledger": "2.3.2",
+    "@web3-onboard/taho": "^2.0.5",
     "@web3-onboard/trezor": "^2.4.2",
-    "@web3-onboard/walletconnect": "2.3.9",
+    "@web3-onboard/walletconnect": "2.4.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.2",
     "ethereum-blockies-base64": "^1.0.2",
@@ -115,7 +115,6 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "jest": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
-    "patch-package": "^7.0.0",
     "pre-commit": "^1.2.2",
     "prettier": "^2.7.0",
     "ts-node": "^10.8.2",

src/config/securityHeaders.ts

@@ -12,7 +12,7 @@ import { CYPRESS_MNEMONIC, IS_PRODUCTION } from '@/config/constants'
 export const ContentSecurityPolicy = `
  default-src 'self';
  connect-src 'self' *;
- script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com 'unsafe-inline' https://*.getbeamer.com https://www.googletagmanager.com https://*.ingest.sentry.io https://sentry.io https://cdn.jsdelivr.net/npm/@ledgerhq/connect-kit@1 ${
+ script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com 'unsafe-inline' https://*.getbeamer.com https://www.googletagmanager.com https://*.ingest.sentry.io https://sentry.io ${
    !IS_PRODUCTION || /* TODO: remove after moving cypress to görli and testing in staging again!! */ CYPRESS_MNEMONIC
      ? "'unsafe-eval'"
      : ''

src/hooks/wallets/useOnboard.ts

@@ -125,21 +125,7 @@ export const connectWallet = async (
   let wallets: WalletState[] | undefined
 
   try {
-    // Mount the onboard modal
-    const promise = onboard.connectWallet(options)
-
-    // Remove "Where's my wallet?" element if not auto-selecting a wallet
-    setTimeout(() => {
-      const onboardModal = document.querySelector('onboard-v2')?.shadowRoot
-      const wheresMyWallet = onboardModal?.querySelector('.wallets-container .notice-container')
-
-      if (wheresMyWallet) {
-        wheresMyWallet.remove()
-      }
-    }, 100)
-
-    // Wait for successful connection
-    wallets = await promise
+    wallets = await onboard.connectWallet(options)
   } catch (e) {
     logError(Errors._302, e)
 

src/hooks/wallets/wallets.ts

@@ -5,7 +5,7 @@ import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import coinbaseModule from '@web3-onboard/coinbase'
 import injectedWalletModule, { ProviderLabel } from '@web3-onboard/injected-wallets'
 import keystoneModule from '@web3-onboard/keystone/dist/index'
-import ledgerModule from '@web3-onboard/ledger'
+import ledgerModule from '@web3-onboard/ledger/dist/index'
 import trezorModule from '@web3-onboard/trezor'
 import walletConnect from '@web3-onboard/walletconnect'
 import tahoModule from '@web3-onboard/taho'
@@ -14,6 +14,10 @@ import pairingModule from '@/services/pairing/module'
 import e2eWalletModule from '@/tests/e2e-wallet'
 import { CGW_NAMES, WALLET_KEYS } from './consts'
 
+const prefersDarkMode = (): boolean => {
+  return window?.matchMedia('(prefers-color-scheme: dark)')?.matches
+}
+
 // We need to modify the module name as onboard dedupes modules with the same label and the WC v1 and v2 modules have the same
 // @see https://github.com/blocknative/web3-onboard/blob/d399e0b76daf7b363d6a74b100b2c96ccb14536c/packages/core/src/store/actions.ts#L419
 // TODO: When removing this, also remove the associated CSS in `onboard.css`
@@ -34,8 +38,9 @@ const walletConnectV2 = (chain: ChainInfo): WalletInit => {
     projectId: WC_PROJECT_ID,
     qrModalOptions: {
       themeVariables: {
-        '--w3m-z-index': '1302',
+        '--wcm-z-index': '1302',
       },
+      themeMode: prefersDarkMode() ? 'dark' : 'light',
     },
     requiredChains: [parseInt(chain.chainId)],
   })
@@ -50,8 +55,7 @@ const WALLET_MODULES: { [key in WALLET_KEYS]: (chain: ChainInfo) => WalletInit }
   [WALLET_KEYS.TREZOR]: () => trezorModule({ appUrl: TREZOR_APP_URL, email: TREZOR_EMAIL }),
   [WALLET_KEYS.KEYSTONE]: () => keystoneModule(),
   [WALLET_KEYS.TAHO]: () => tahoModule(),
-  [WALLET_KEYS.COINBASE]: () =>
-    coinbaseModule({ darkMode: !!window?.matchMedia('(prefers-color-scheme: dark)')?.matches }),
+  [WALLET_KEYS.COINBASE]: () => coinbaseModule({ darkMode: prefersDarkMode() }),
 }
 
 export const getAllWallets = (chain: ChainInfo): WalletInit[] => {

src/services/onboard.ts

@@ -56,6 +56,10 @@ export const createOnboard = (
       recommendedInjectedWallets: getRecommendedInjectedWallets(),
     },
 
+    connect: {
+      removeWhereIsMyWalletWarning: true,
+    },
+
     // TODO: Investigate using `autoConnectLastWallet` instead of our `lastWalletStorage`
   })
 

src/services/pairing/module.ts

@@ -75,6 +75,7 @@ const pairingModule = (): WalletInit => {
             this.disconnected$ = new Subject()
             this.providers = {}
 
+            // @ts-expect-error - `payload` type (`ISessionStatus`) is not correctly `pipe`ed
             fromEvent(this.connector, ProviderEvents.WC_SESSION_UPDATE, (error, payload) => {
               if (error) {
                 throw error
@@ -93,6 +94,7 @@ const pairingModule = (): WalletInit => {
                 error: console.warn,
               })
 
+            // @ts-expect-error - `this.connector` does not satisfy the event target type
             fromEvent(this.connector, ProviderEvents.DISCONNECT, (error, payload) => {
               if (error) {
                 throw error

src/styles/onboard.css

@@ -107,8 +107,3 @@
 #kv_sdk_container + .ReactModalPortal .ReactModal__Content {
   padding: 0 !important;
 }
-
-/* Ledger modal */
-.ledger-ck-modal > div#ModalWrapper {
-  z-index: 9999999 !important;
-}