fix: upgrade @web3-onboard/* + remove patches (#2205)

* fix: upgrade `@web3-onboard/*` + remove patches * fix: mocks
safe-global · Jul 3, 2023 · 669bab8 · 669bab8
1 parent 7f56206
commit 669bab8
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 266 deletions.
diff --git a/jest.setup.js b/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())

diff --git a/package.json b/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",
@@ -54,13 +54,13 @@
     "@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.5.0",
+    "@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",

diff --git a/patches/@web3-onboard+walletconnect+2.3.9.patch b/patches/@web3-onboard+walletconnect+2.3.9.patch
diff --git a/src/hooks/wallets/useOnboard.ts b/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 as Error).message)
 

diff --git a/src/hooks/wallets/wallets.ts b/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)],
   })
@@ -46,12 +51,12 @@ const WALLET_MODULES: { [key in WALLET_KEYS]: (chain: ChainInfo) => WalletInit }
   [WALLET_KEYS.PAIRING]: () => pairingModule(),
   [WALLET_KEYS.WALLETCONNECT]: () => walletConnectV1(),
   [WALLET_KEYS.WALLETCONNECT_V2]: (chain) => walletConnectV2(chain),
-  [WALLET_KEYS.LEDGER]: () => ledgerModule(),
+  [WALLET_KEYS.LEDGER]: (chain) =>
+    ledgerModule({ walletConnectVersion: 2, projectId: WC_PROJECT_ID, requiredChains: [parseInt(chain.chainId)] }),
   [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[] => {

diff --git a/src/services/onboard.ts b/src/services/onboard.ts
@@ -56,6 +56,10 @@ export const createOnboard = (
       recommendedInjectedWallets: getRecommendedInjectedWallets(),
     },
 
+    connect: {
+      removeWhereIsMyWalletWarning: true,
+    },
+
     // TODO: Investigate using `autoConnectLastWallet` instead of our `lastWalletStorage`
   })