Merge remote-tracking branch 'origin/dev' into human-readable-txs

.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
 

README.md

@@ -21,7 +21,7 @@ Here's the list of all the required and optional variables:
 
 | Env variable                                           |              | Description
 | ------------------------------------------------------ | ------------ | -----------
-| `NEXT_PUBLIC_INFURA_TOKEN`                             | **required** | [Infura](https://docs.infura.io/infura/networks/ethereum/how-to/secure-a-project/project-id) RPC API token
+| `NEXT_PUBLIC_INFURA_TOKEN`                             | optional     | [Infura](https://docs.infura.io/infura/networks/ethereum/how-to/secure-a-project/project-id) RPC API token
 | `NEXT_PUBLIC_SAFE_APPS_INFURA_TOKEN`                   | optional     | Infura token for Safe Apps, falls back to `NEXT_PUBLIC_INFURA_TOKEN`
 | `NEXT_PUBLIC_IS_PRODUCTION`                            | optional     | Set to `true` to build a minified production app
 | `NEXT_PUBLIC_GATEWAY_URL_PRODUCTION`                   | optional     | The base URL for the [Safe Client Gateway](https://github.com/safe-global/safe-client-gateway)

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', () => {

docs/release-procedure.md

@@ -2,11 +2,13 @@
 
 The code is being actively developed on the `dev` branch. Pull requests are made against this branch.
 
-After a release is approved by QA, the code goes to the `main` branch and is deployed to the staging environment.
+When it's time to make a release, we "freeze" the code by creating a release branch off of the `dev` branch. A release PR is created from that branch, and sent to QA.
+
+After the PR is tested and approved by QA, it's merged into the `main` branch. `Main` is automatically deployed to the staging environment.
 
 Schematically:
 ```
-<PR branch> –> dev -> main
+<feature branches> –> dev -> release/X.Y.Z -> main
 ```
 
 We prepare at least one release every sprint. Sprints are two weeks long.
@@ -28,7 +30,7 @@ git log origin/main..origin/dev --pretty=format:'* %s'
 * If issues are found, bugfixes are merged into this branch
 * Once the QA is done, proceed to the next step
 
-### Tag & release
+### Releasing to production
 Wait for all the checks on GitHub to pass.
 * Switch to the main branch and make sure it's up to date:
 ```
@@ -44,12 +46,15 @@ git pull origin release/3.15.0
 ```
 git push
 ```
-* Create and push a new version tag :
-```
-git tag v3.15.0
-git push --tags
-```
 
-* Create a [GitHub release](https://github.com/gnosis/safe-react/releases) for this tag
+A deploy workflow will kick in and do the following things:
+
+* Deploy the code to staging
+* Create a new git tag from the version in package.json
+* Create a [GitHub release](https://github.com/safe-global/safe-wallet-web/releases) linked to this tag, with a changelog taken from the release PR
+* Build and upload the code to an S3 bucket
+
+After that, the release manager should:
+
 * Notify devops on Slack and send them the release link to deploy to production
-* Back-merge `main` into the `dev` branch to keep them in sync
+* Back-merge `main` into the `dev` branch to keep them in sync unless the release branch was based on `dev`

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.0",
+  "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/safe-apps/AppFrame/useAppCommunicator.ts

@@ -152,8 +152,12 @@ const useAppCommunicator = (
         return handlers.onSetSafeSettings(settings)
       }
 
+      if (!safeAppWeb3Provider) {
+        throw new Error('SafeAppWeb3Provider is not initialized')
+      }
+
       try {
-        return await safeAppWeb3Provider?.send(params.call, params.params)
+        return await safeAppWeb3Provider.send(params.call, params.params)
       } catch (err) {
         throw new Error((err as JsonRpcResponse).error)
       }

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',
 }