Merge remote-tracking branch 'origin/dev' into confirmation-icon

.github/workflows/build/action.yml

@@ -9,7 +9,6 @@ inputs:
   prod:  # id of input
     description: 'Production build flag'
     required: false
-    default: false
 
 runs:
   using: 'composite'

.github/workflows/deploy-dockerhub.yml

@@ -0,0 +1,38 @@
+# web-core image is meant to be used only by our safe-infrastructure repository
+
+name: Deploy to Dockerhub
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+  release:
+    types: [ released ]
+
+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
+      uses: docker/login-action@v2
+      with:
+        username: ${{ secrets.DOCKER_USER }}
+        password: ${{ secrets.DOCKER_PASSWORD }}
+    - name: Deploy Dockerhub main
+      if: github.ref == 'refs/heads/main'
+      run: bash scripts/github/deploy_docker.sh staging
+      env:
+        DOCKERHUB_PROJECT: web-core
+    - name: Deploy Dockerhub dev
+      if: github.ref == 'refs/heads/dev'
+      run: bash scripts/github/deploy_docker.sh dev
+      env:
+        DOCKERHUB_PROJECT: web-core
+    - name: Deploy Dockerhub tag
+      if: startsWith(github.ref, 'refs/tags/')
+      run: bash scripts/github/deploy_docker.sh ${GITHUB_REF##*/}
+      env:
+        DOCKERHUB_PROJECT: web-core

README.md

@@ -1,6 +1,6 @@
 # <img src="https://user-images.githubusercontent.com/381895/186411381-e05075ff-7565-4b4e-925e-bb1e85cb165b.png" height="60" width="60" valign="middle" /> Safe Web Core
 
-[![GitHub license](https://img.shields.io/github/license/safe-global/web-core)](https://github.com/safe-global/web-core/blob/main/LICENSE.md)
+[![License](https://img.shields.io/github/license/safe-global/web-core)](https://github.com/safe-global/web-core/blob/main/LICENSE)
 ![Tests](https://img.shields.io/github/actions/workflow/status/safe-global/web-core/test.yml?branch=main&label=tests)
 ![GitHub package.json version (branch)](https://img.shields.io/github/package-json/v/safe-global/web-core)
 [![GitPOAP Badge](https://public-api.gitpoap.io/v1/repo/safe-global/web-core/badge)](https://www.gitpoap.io/gh/safe-global/web-core)

cypress/e2e/create_tx.cy.js

@@ -34,8 +34,8 @@ describe('Queue a transaction on 1/N', () => {
     cy.get('input[name="tokenAddress"]').prev().click()
     cy.get('ul[role="listbox"]').contains('Görli Ether').click()
 
-    // Insert amount
-    cy.get('input[name="amount"]').type(`${sendValue}`)
+    // Insert max amount
+    cy.contains('Max').click()
 
     cy.contains('Next').click()
   })

cypress/e2e/smoke/tx_history.cy.js

@@ -96,22 +96,6 @@ describe('Transaction history', () => {
         // Status
         cy.contains('span', 'Success').should('exist')
       })
-      // Receive DAI
-      .prev()
-      .within(() => {
-        // Type
-        cy.get('img').should('have.attr', 'src', INCOMING)
-        cy.contains('div', 'Received').should('exist')
-
-        // Info
-        cy.contains('span', '120,497.61 DAI').should('exist')
-
-        // Time
-        cy.contains('span', '5:01 PM').should('exist')
-
-        // Status
-        cy.contains('span', 'Success').should('exist')
-      })
       // Send 0.11 WETH
       .prev()
       .within(() => {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "web-core",
   "homepage": "https://github.com/safe-global/web-core",
-  "license": "MIT",
+  "license": "GPL-3.0",
   "type": "module",
   "version": "1.2.1",
   "private": true,

scripts/github/deploy_docker.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+set -euo pipefail
+
+export DOCKER_BUILDKIT=1
+
+if [ "$1" = "dev" -o "$1" = "main" ]; then
+    # If image does not exist, don't use cache
+    docker pull safeglobal/$DOCKERHUB_PROJECT:$1 && \
+    docker build -t $DOCKERHUB_PROJECT . --cache-from safeglobal/$DOCKERHUB_PROJECT:$1 --build-arg BUILDKIT_INLINE_CACHE=1 || \
+    docker build -t $DOCKERHUB_PROJECT . --build-arg BUILDKIT_INLINE_CACHE=1
+else
+    # Building tag version from staging image (vX.X.X)
+    docker pull safeglobal/$DOCKERHUB_PROJECT:staging && \
+    docker build -t $DOCKERHUB_PROJECT . --cache-from safeglobal/$DOCKERHUB_PROJECT:staging --build-arg BUILDKIT_INLINE_CACHE=1 || \
+    docker build -t $DOCKERHUB_PROJECT . --build-arg BUILDKIT_INLINE_CACHE=1
+    # Only push latest on release
+    case $1 in v*)
+        docker tag $DOCKERHUB_PROJECT safeglobal/$DOCKERHUB_PROJECT:latest
+        docker push safeglobal/$DOCKERHUB_PROJECT:latest
+    esac
+fi
+docker tag $DOCKERHUB_PROJECT safeglobal/$DOCKERHUB_PROJECT:$1
+docker push safeglobal/$DOCKERHUB_PROJECT:$1

src/components/common/ErrorBoundary/index.tsx

@@ -1,4 +1,4 @@
-import { Typography, Link as MuiLink, SvgIcon } from '@mui/material'
+import { Typography, Link as MuiLink } from '@mui/material'
 import Link from 'next/link'
 import type { FallbackRender } from '@sentry/react'
 
@@ -20,7 +20,7 @@ const ErrorBoundary: FallbackRender = ({ error, componentStack }) => {
           please try again.
         </Typography>
 
-        <CircularIcon icon={<SvgIcon component={WarningIcon} inheritViewBox />} badgeColor="warning" />
+        <CircularIcon icon={WarningIcon} badgeColor="warning" />
 
         {IS_PRODUCTION ? (
           <Typography color="text.primary">
@@ -31,11 +31,11 @@ const ErrorBoundary: FallbackRender = ({ error, componentStack }) => {
           </Typography>
         ) : (
           <>
-            <Typography color="error">{error.toString()}</Typography>
+            {/* Error may be undefined despite what the type says */}
+            <Typography color="error">{error?.toString()}</Typography>
             <Typography color="error">{componentStack}</Typography>
           </>
         )}
-
         <Typography mt={2}>
           <Link href={AppRoutes.welcome} passHref target="_blank" rel="noopener noreferrer" color="primary">
             <MuiLink>Go Home</MuiLink>

src/components/common/ExternalLink/index.tsx

@@ -6,15 +6,15 @@ import { Box, Link, type LinkProps } from '@mui/material'
  * It also always adds the external link icon as end adornment.
  */
 const ExternalLink = ({
-  suppressIcon = false,
+  noIcon = false,
   children,
   ...props
-}: Omit<LinkProps, 'target' | 'rel'> & { suppressIcon?: boolean }) => {
+}: Omit<LinkProps, 'target' | 'rel'> & { noIcon?: boolean }) => {
   return (
     <Link rel="noreferrer noopener" target="_blank" {...props}>
       <Box display="inline-flex" alignItems="center" gap={0.2} component="span">
         {children}
-        {!suppressIcon && <OpenInNewRounded fontSize="small" />}
+        {!noIcon && <OpenInNewRounded fontSize="small" />}
       </Box>
     </Link>
   )

src/components/common/Footer/index.tsx

@@ -31,27 +31,27 @@ const Footer = (): ReactElement | null => {
           <Typography variant="caption">&copy;2022 Safe Ecosystem Foundation</Typography>
         </li>
         <li>
-          <ExternalLink suppressIcon href="https://safe.global/terms">
+          <ExternalLink noIcon href="https://safe.global/terms">
             Terms
           </ExternalLink>
         </li>
         <li>
-          <ExternalLink suppressIcon href="https://safe.global/privacy">
+          <ExternalLink noIcon href="https://safe.global/privacy">
             Privacy
           </ExternalLink>
         </li>
         <li>
-          <ExternalLink suppressIcon href="https://safe.global/licenses">
+          <ExternalLink noIcon href="https://safe.global/licenses">
             Licenses
           </ExternalLink>
         </li>
         <li>
-          <ExternalLink suppressIcon href="https://safe.global/imprint">
+          <ExternalLink noIcon href="https://safe.global/imprint">
             Imprint
           </ExternalLink>
         </li>
         <li>
-          <ExternalLink suppressIcon href="https://safe.global/cookie">
+          <ExternalLink noIcon href="https://safe.global/cookie">
             Cookie Policy
           </ExternalLink>
           &nbsp;&mdash;&nbsp;
@@ -60,7 +60,7 @@ const Footer = (): ReactElement | null => {
           </Link>
         </li>
         <li>
-          <ExternalLink suppressIcon href={`${packageJson.homepage}/releases/tag/v${packageJson.version}`}>
+          <ExternalLink noIcon href={`${packageJson.homepage}/releases/tag/v${packageJson.version}`}>
             v{packageJson.version}
           </ExternalLink>
         </li>

src/components/common/NetworkSelector/styles.module.css

@@ -11,6 +11,11 @@
   background: inherit;
 }
 
+.select *:focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .select :global .MuiSelect-select {
   padding-right: 40px !important;
   padding-left: 16px;

src/components/sidebar/SidebarList/styles.module.css

@@ -20,10 +20,18 @@
   color: var(--color-text-primary);
 }
 
-.list :global .MuiListItemButton-root:hover,
+[data-theme='dark'] .list :global .Mui-selected {
+  background-color: var(--color-border-light);
+}
+
+.list :global .MuiListItemButton-root:hover {
+  border-radius: 6px;
+  background-color: var(--color-background-light);
+}
+
 .list :global .Mui-selected {
   border-radius: 6px;
-  background-color: var(--color-secondary-background);
+  background-color: var(--color-background-main);
 }
 
 .listItemButton :global .beamer_icon.active {

src/components/tx/SignOrExecuteForm/index.tsx

@@ -93,8 +93,8 @@ const SignOrExecuteForm = ({
 
   // Estimating gas
   const isEstimating = willExecute && gasLimitLoading
-  // Nonce cannot be edited if the tx is already signed, or it's a rejection
-  const nonceReadonly = !!tx?.signatures.size || isRejection
+  // Nonce cannot be edited if the tx is already proposed, or signed, or it's a rejection
+  const nonceReadonly = !!txId || !!tx?.signatures.size || isRejection
 
   // Assert that wallet, tx and provider are defined
   const assertDependencies = (): [ConnectedWallet, SafeTransaction, Web3Provider] => {

src/components/tx/modals/TokenTransferModal/SendAssetsForm.tsx

@@ -116,10 +116,10 @@ const SendAssetsForm = ({ onSubmit, formData, disableSpendingLimit = false }: Se
   const spendingLimitAmount = spendingLimit ? BigNumber.from(spendingLimit.amount).sub(spendingLimit.spent) : undefined
 
   const onMaxAmountClick = () => {
-    if (!selectedToken || !spendingLimitAmount) return
+    if (!selectedToken) return
 
     const amount =
-      spendingLimit && isSpendingLimitType && spendingLimitAmount.lte(selectedToken.balance)
+      isSpendingLimitType && spendingLimitAmount && spendingLimitAmount.lte(selectedToken.balance)
         ? spendingLimitAmount.toString()
         : selectedToken.balance
 

src/config/chains.ts

@@ -192,6 +192,8 @@ const chains: Record<string, string> = {
   tftm: '4002',
   'iotex-mainnet': '4689',
   'iotex-testnet': '4690',
+  txvm: '4918',
+  xvm: '4919',
   es: '5197',
   uzmi: '5315',
   tsys: '5700',

src/hooks/safe-apps/useRemoteSafeApps.ts

@@ -15,9 +15,11 @@ const cachedGetSafeApps = (chainId: string): ReturnType<typeof getSafeApps> | un
     cache[chainId] = getSafeApps(chainId, { client_url: window.location.origin })
 
     // Clear the cache the promise resolves with a small delay
-    cache[chainId]?.finally(() => {
-      setTimeout(() => (cache[chainId] = undefined), 100)
-    })
+    cache[chainId]
+      ?.catch(() => null)
+      .then(() => {
+        setTimeout(() => (cache[chainId] = undefined), 100)
+      })
   }
 
   return cache[chainId]

src/hooks/wallets/wallets.test.ts

@@ -43,7 +43,7 @@ describe('shouldUseEthSignMethod', () => {
     expect(result).toBe(true)
   })
 
-  it('returns true for WalletConnect', () => {
+  it('returns false for WalletConnect', () => {
     const mockWallet: ConnectedWallet = {
       address: ZERO_ADDRESS,
       chainId: '4',
@@ -53,7 +53,7 @@ describe('shouldUseEthSignMethod', () => {
 
     const result = shouldUseEthSignMethod(mockWallet)
 
-    expect(result).toBe(true)
+    expect(result).toBe(false)
   })
 
   it('returns false for MetaMask', () => {

src/hooks/wallets/wallets.ts

@@ -78,10 +78,6 @@ export const isHardwareWallet = (wallet: ConnectedWallet): boolean => {
   )
 }
 
-export const isWalletConnect = (wallet: ConnectedWallet): boolean => {
-  return wallet.label.toUpperCase() === WALLET_KEYS.WALLETCONNECT
-}
-
 export const isSafeMobileWallet = (wallet: ConnectedWallet): boolean => {
   return wallet.label === PAIRING_MODULE_LABEL
 }
@@ -99,5 +95,5 @@ export const isSmartContractWallet = async (wallet: ConnectedWallet) => {
 }
 
 export const shouldUseEthSignMethod = (wallet: ConnectedWallet): boolean => {
-  return isHardwareWallet(wallet) || isSafeMobileWallet(wallet) || isWalletConnect(wallet)
+  return isHardwareWallet(wallet) || isSafeMobileWallet(wallet)
 }

src/styles/globals.css

@@ -36,6 +36,11 @@ button {
   font: inherit;
 }
 
+:focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -104,7 +109,7 @@ input[type='number'] {
 }
 
 body.beamerAnnouncementBarTopActive {
-  padding-top: 0px !important;
+  padding-top: 0 !important;
 }
 
 #beamerLastPostTitle {