Merge branch 'dev' into beamer-nps

.github/workflows/deploy-dockerhub.yml

@@ -13,7 +13,6 @@ on:
 jobs:
   dockerhub-push:
     runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' || startsWith(github.ref, 'refs/tags/')
     steps:
     - uses: actions/checkout@v3
     - name: Dockerhub login

Dockerfile

@@ -1,10 +1,10 @@
-FROM node:16-alpine
-RUN apk add --no-cache libc6-compat git python3 py3-pip make g++
+FROM node:18-alpine
+RUN apk add --no-cache libc6-compat git python3 py3-pip make g++ libusb-dev eudev-dev linux-headers
 WORKDIR /app
 COPY . .
 
 # install deps
-RUN yarn install
+RUN yarn install --frozen-lockfile
 
 ENV NODE_ENV production
 

cypress/e2e/smoke/address_book.cy.js

@@ -4,8 +4,7 @@ import { format } from 'date-fns'
 
 const NAME = 'Owner1'
 const EDITED_NAME = 'Edited Owner1'
-const ENS_NAME = 'diogo.eth'
-const ENS_ADDRESS = '0x6a5602335a878ADDCa4BF63a050E34946B56B5bC'
+const ADDRESS = '0x6a5602335a878ADDCa4BF63a050E34946B56B5bC'
 const GOERLI_TEST_SAFE = 'gor:0x97d314157727D517A706B5D08507A1f9B44AaaE9'
 const GNO_TEST_SAFE = 'gno:0xB8d760a90a5ed54D3c2b3EFC231277e99188642A'
 const GOERLI_CSV_ENTRY = {
@@ -30,13 +29,14 @@ describe('Address book', () => {
       // Add a new entry manually
       cy.contains('Create entry').click()
       cy.get('input[name="name"]').type(NAME)
-      cy.get('input[name="address"]').type(ENS_NAME)
-      // Name was translated
-      cy.get(ENS_NAME).should('not.exist')
+      cy.get('input[name="address"]').type(ADDRESS)
+
+      // Save the entry
       cy.contains('button', 'Save').click()
 
+      // The new entry is visible
       cy.contains(NAME).should('exist')
-      cy.contains(ENS_ADDRESS).should('exist')
+      cy.contains(ADDRESS).should('exist')
     })
 
     it('should save an edited entry name', () => {

cypress/e2e/smoke/batch_tx.cy.js

@@ -13,6 +13,8 @@ describe('Create batch transaction', () => {
   before(() => {
     cy.visit(`/home?safe=${SAFE}`)
     cy.contains('Accept selection').click()
+
+    cy.contains(/E2E Wallet @ G(ö|oe)rli/)
   })
 
   it('Should open an empty batch list', () => {

jest.setup.js

@@ -12,7 +12,6 @@ jest.mock('@web3-onboard/keystone/dist/index', () => 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())
 
 const mockOnboardState = {
   chains: [],

package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/safe-global/safe-wallet-web",
   "license": "GPL-3.0",
   "type": "module",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "scripts": {
     "dev": "next dev",
     "start": "next dev",
@@ -28,15 +28,15 @@
     "serve": "npx -y serve out -p ${REVERSE_PROXY_UI_PORT:=8080}",
     "static-serve": "yarn build && yarn serve"
   },
+  "engines": {
+    "node": ">=16"
+  },
   "pre-commit": [
     "lint"
   ],
   "resolutions": {
     "@web3-onboard/trezor/**/protobufjs": "^7.2.4"
   },
-  "engines": {
-    "node": ">=18"
-  },
   "dependencies": {
     "@date-io/date-fns": "^2.15.0",
     "@emotion/cache": "^11.10.1",
@@ -63,7 +63,6 @@
     "@web3-onboard/injected-wallets": "^2.10.0",
     "@web3-onboard/keystone": "^2.3.7",
     "@web3-onboard/ledger": "2.3.2",
-    "@web3-onboard/taho": "^2.0.5",
     "@web3-onboard/trezor": "^2.4.2",
     "@web3-onboard/walletconnect": "^2.4.5",
     "classnames": "^2.3.1",

src/components/batch/BatchSidebar/index.tsx

@@ -10,6 +10,7 @@ import ConfirmBatchFlow from '@/components/tx-flow/flows/ConfirmBatch'
 import Track from '@/components/common/Track'
 import { BATCH_EVENTS } from '@/services/analytics'
 import { BatchReorder } from './BatchTxList'
+import CheckWallet from '@/components/common/CheckWallet'
 
 import PlusIcon from '@/public/images/common/plus.svg'
 import EmptyBatch from './EmptyBatch'
@@ -27,6 +28,15 @@ const BatchSidebar = ({ isOpen, onToggle }: { isOpen: boolean; onToggle: (open:
     batchTxs.forEach((item) => deleteTx(item.id))
   }, [deleteTx, batchTxs])
 
+  // Close confirmation flow when batch is empty
+  const isConfirmationFlow = txFlow?.type === ConfirmBatchFlow
+  const shouldExitFlow = isConfirmationFlow && batchTxs.length === 0
+  useEffect(() => {
+    if (shouldExitFlow) {
+      setTxFlow(undefined)
+    }
+  }, [setTxFlow, shouldExitFlow])
+
   const onAddClick = useCallback(
     (e: SyntheticEvent) => {
       e.preventDefault()
@@ -65,33 +75,45 @@ const BatchSidebar = ({ isOpen, onToggle }: { isOpen: boolean; onToggle: (open:
               <BatchReorder txItems={batchTxs} onDelete={deleteTx} onReorder={onReorder} />
             </div>
 
-            <Track {...BATCH_EVENTS.BATCH_NEW_TX}>
-              <Button onClick={onAddClick}>
-                <SvgIcon component={PlusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
-                Add new transaction
-              </Button>
-            </Track>
+            <CheckWallet>
+              {(isOk) => (
+                <Track {...BATCH_EVENTS.BATCH_NEW_TX}>
+                  <Button onClick={onAddClick} disabled={!isOk}>
+                    <SvgIcon component={PlusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
+                    Add new transaction
+                  </Button>
+                </Track>
+              )}
+            </CheckWallet>
 
             <Divider />
 
-            <Track {...BATCH_EVENTS.BATCH_CONFIRM} label={batchTxs.length}>
-              <Button
-                variant="contained"
-                onClick={onConfirmClick}
-                disabled={!batchTxs.length}
-                className={css.confirmButton}
-              >
-                Confirm batch
-              </Button>
-            </Track>
+            <CheckWallet>
+              {(isOk) => (
+                <Track {...BATCH_EVENTS.BATCH_CONFIRM} label={batchTxs.length}>
+                  <Button
+                    variant="contained"
+                    onClick={onConfirmClick}
+                    disabled={!batchTxs.length || !isOk}
+                    className={css.confirmButton}
+                  >
+                    Confirm batch
+                  </Button>
+                </Track>
+              )}
+            </CheckWallet>
           </>
         ) : (
           <EmptyBatch>
-            <Track {...BATCH_EVENTS.BATCH_NEW_TX}>
-              <Button onClick={onAddClick} variant="contained">
-                New transaction
-              </Button>
-            </Track>
+            <CheckWallet>
+              {(isOk) => (
+                <Track {...BATCH_EVENTS.BATCH_NEW_TX}>
+                  <Button onClick={onAddClick} variant="contained" disabled={!isOk}>
+                    New transaction
+                  </Button>
+                </Track>
+              )}
+            </CheckWallet>
           </EmptyBatch>
         )}
 

src/components/licenses/index.tsx

@@ -552,14 +552,6 @@ const SafeLicenses = () => {
                   </ExternalLink>
                 </TableCell>
               </TableRow>
-              <TableRow>
-                <TableCell>@web3-onboard/taho</TableCell>
-                <TableCell>
-                  <ExternalLink href="https://github.com/blocknative/web3-onboard/blob/main/LICENSE">
-                    https://github.com/blocknative/web3-onboard/blob/main/LICENSE
-                  </ExternalLink>
-                </TableCell>
-              </TableRow>
               <TableRow>
                 <TableCell>@web3-onboard/trezor</TableCell>
                 <TableCell>

src/components/transactions/TxDetails/TxData/index.tsx

@@ -7,7 +7,6 @@ import {
   isMultisigDetailedExecutionInfo,
   isSettingsChangeTxInfo,
   isSpendingLimitMethod,
-  isSupportedMultiSendAddress,
   isSupportedSpendingLimitAddress,
   isTransferTxInfo,
 } from '@/utils/transaction-guards'
@@ -36,7 +35,7 @@ const TxData = ({ txDetails }: { txDetails: TransactionDetails }): ReactElement
     return <RejectionTxInfo nonce={txDetails.detailedExecutionInfo?.nonce} isTxExecuted={!!txDetails.executedAt} />
   }
 
-  if (isSupportedMultiSendAddress(txInfo, chainId) && isMultiSendTxInfo(txInfo)) {
+  if (isMultiSendTxInfo(txInfo)) {
     return <MultiSendTxInfo txInfo={txInfo} />
   }
 

src/components/transactions/TxDetails/index.tsx

@@ -14,7 +14,6 @@ import {
   isMultiSendTxInfo,
   isMultisigDetailedExecutionInfo,
   isMultisigExecutionInfo,
-  isSupportedMultiSendAddress,
   isTxQueued,
 } from '@/utils/transaction-guards'
 import { InfoDetails } from '@/components/transactions/InfoDetails'
@@ -39,7 +38,6 @@ type TxDetailsProps = {
 }
 
 const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement => {
-  const chainId = useChainId()
   const isPending = useIsPending(txSummary.id)
   const isQueue = isTxQueued(txSummary.txStatus)
   const awaitingExecution = isAwaitingExecution(txSummary.txStatus)
@@ -89,7 +87,7 @@ const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement
           <Summary txDetails={txDetails} />
         </div>
 
-        {isSupportedMultiSendAddress(txDetails.txInfo, chainId) && isMultiSendTxInfo(txDetails.txInfo) && (
+        {isMultiSendTxInfo(txDetails.txInfo) && (
           <div className={`${css.multiSend}`}>
             <ErrorBoundary fallback={<div>Error parsing data</div>}>
               <Multisend txData={txDetails.txData} />

src/components/transactions/TxInfo/index.tsx

@@ -17,12 +17,10 @@ import {
   isMultiSendTxInfo,
   isNativeTokenTransfer,
   isSettingsChangeTxInfo,
-  isSupportedMultiSendAddress,
   isTransferTxInfo,
 } from '@/utils/transaction-guards'
 import { ellipsis, shortenAddress } from '@/utils/formatters'
 import { useCurrentChain } from '@/hooks/useChains'
-import useChainId from '@/hooks/useChainId'
 
 export const TransferTx = ({
   info,
@@ -98,13 +96,11 @@ const SettingsChangeTx = ({ info }: { info: SettingsChange }): ReactElement => {
 }
 
 const TxInfo = ({ info, ...rest }: { info: TransactionInfo; omitSign?: boolean; withLogo?: boolean }): ReactElement => {
-  const chainId = useChainId()
-
   if (isSettingsChangeTxInfo(info)) {
     return <SettingsChangeTx info={info} />
   }
 
-  if (isSupportedMultiSendAddress(info, chainId) && isMultiSendTxInfo(info)) {
+  if (isMultiSendTxInfo(info)) {
     return <MultiSendTx info={info} />
   }
 

src/hooks/wallets/consts.ts

@@ -1,23 +1,19 @@
 export const enum WALLET_KEYS {
-  COINBASE = 'COINBASE',
   INJECTED = 'INJECTED',
-  KEYSTONE = 'KEYSTONE',
-  LEDGER = 'LEDGER',
+  WALLETCONNECT_V2 = 'WALLETCONNECT_V2',
+  COINBASE = 'COINBASE',
   PAIRING = 'PAIRING',
+  LEDGER = 'LEDGER',
   TREZOR = 'TREZOR',
-  WALLETCONNECT = 'WALLETCONNECT',
-  WALLETCONNECT_V2 = 'WALLETCONNECT_V2',
-  TAHO = 'TAHO',
+  KEYSTONE = 'KEYSTONE',
 }
 
 export const CGW_NAMES: { [key in WALLET_KEYS]: string | undefined } = {
-  [WALLET_KEYS.COINBASE]: 'coinbase',
   [WALLET_KEYS.INJECTED]: 'detectedwallet',
-  [WALLET_KEYS.KEYSTONE]: 'keystone',
-  [WALLET_KEYS.LEDGER]: 'ledger',
+  [WALLET_KEYS.WALLETCONNECT_V2]: 'walletConnect_v2',
+  [WALLET_KEYS.COINBASE]: 'coinbase',
   [WALLET_KEYS.PAIRING]: 'safeMobile',
+  [WALLET_KEYS.LEDGER]: 'ledger',
   [WALLET_KEYS.TREZOR]: 'trezor',
-  [WALLET_KEYS.WALLETCONNECT]: 'walletConnect',
-  [WALLET_KEYS.WALLETCONNECT_V2]: 'walletConnect_v2',
-  [WALLET_KEYS.TAHO]: 'tally',
+  [WALLET_KEYS.KEYSTONE]: 'keystone',
 }

src/hooks/wallets/useOnboard.ts

@@ -68,8 +68,7 @@ const getWalletConnectLabel = async (wallet: ConnectedWallet): Promise<string |
   if (!isWalletConnect) return
   const { connector } = wallet.provider as unknown as any
   const peerWalletV2 = connector.session?.peer?.metadata?.name
-  const peerWalletV1 = connector.peerMeta?.name
-  return peerWalletV2 || peerWalletV1 || UNKNOWN_PEER
+  return peerWalletV2 || UNKNOWN_PEER
 }
 
 const trackWalletType = (wallet: ConnectedWallet) => {

src/hooks/wallets/wallets.ts

@@ -1,5 +1,5 @@
-import { CYPRESS_MNEMONIC, TREZOR_APP_URL, TREZOR_EMAIL, WC_BRIDGE, WC_PROJECT_ID } from '@/config/constants'
-import type { RecommendedInjectedWallets, WalletInit, WalletModule } from '@web3-onboard/common/dist/types.d'
+import { CYPRESS_MNEMONIC, TREZOR_APP_URL, TREZOR_EMAIL, WC_PROJECT_ID } from '@/config/constants'
+import type { RecommendedInjectedWallets, WalletInit } from '@web3-onboard/common/dist/types.d'
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 import coinbaseModule from '@web3-onboard/coinbase'
@@ -8,7 +8,6 @@ import keystoneModule from '@web3-onboard/keystone/dist/index'
 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'
 
 import pairingModule from '@/services/pairing/module'
 import e2eWalletModule from '@/tests/e2e-wallet'
@@ -18,20 +17,6 @@ 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`
-export const WALLET_CONNECT_V1_MODULE_NAME = 'WalletConnect v1'
-const walletConnectV1 = (): WalletInit => {
-  return (helpers) => {
-    const walletConnectModule = walletConnect({ version: 1, bridge: WC_BRIDGE })(helpers) as WalletModule
-
-    walletConnectModule.label = WALLET_CONNECT_V1_MODULE_NAME
-
-    return walletConnectModule
-  }
-}
-
 const walletConnectV2 = (chain: ChainInfo): WalletInit => {
   // WalletConnect v2 requires a project ID
   if (!WC_PROJECT_ID) {
@@ -54,14 +39,12 @@ const walletConnectV2 = (chain: ChainInfo): WalletInit => {
 
 const WALLET_MODULES: { [key in WALLET_KEYS]: (chain: ChainInfo) => WalletInit } = {
   [WALLET_KEYS.INJECTED]: () => injectedWalletModule(),
-  [WALLET_KEYS.PAIRING]: () => pairingModule(),
-  [WALLET_KEYS.WALLETCONNECT]: () => walletConnectV1(),
   [WALLET_KEYS.WALLETCONNECT_V2]: (chain) => walletConnectV2(chain),
+  [WALLET_KEYS.COINBASE]: () => coinbaseModule({ darkMode: prefersDarkMode() }),
+  [WALLET_KEYS.PAIRING]: () => pairingModule(),
   [WALLET_KEYS.LEDGER]: () => ledgerModule(),
   [WALLET_KEYS.TREZOR]: () => trezorModule({ appUrl: TREZOR_APP_URL, email: TREZOR_EMAIL }),
   [WALLET_KEYS.KEYSTONE]: () => keystoneModule(),
-  [WALLET_KEYS.TAHO]: () => tahoModule(),
-  [WALLET_KEYS.COINBASE]: () => coinbaseModule({ darkMode: prefersDarkMode() }),
 }
 
 export const getAllWallets = (chain: ChainInfo): WalletInit[] => {