Fix: revert relaying message (#2799)

package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/safe-global/safe-wallet-web",
   "license": "GPL-3.0",
   "type": "module",
-  "version": "1.22.1",
+  "version": "1.22.2",
   "scripts": {
     "dev": "next dev",
     "start": "next dev",

src/components/tx/ExecutionMethodSelector/index.tsx

@@ -71,7 +71,7 @@ export const ExecutionMethodSelector = ({
         </FormControl>
       </div>
 
-      <SponsoredBy relays={relays} tooltip={tooltip} shouldRelay={shouldRelay} />
+      {shouldRelay && relays ? <SponsoredBy relays={relays} tooltip={tooltip} /> : null}
     </Box>
   )
 }

src/components/tx/SignOrExecuteForm/ExecuteForm.tsx

@@ -12,6 +12,7 @@ import { useIsExecutionLoop, useTxActions } from './hooks'
 import { useRelaysBySafe } from '@/hooks/useRemainingRelays'
 import useWalletCanRelay from '@/hooks/useWalletCanRelay'
 import { ExecutionMethod, ExecutionMethodSelector } from '../ExecutionMethodSelector'
+import { hasRemainingRelays } from '@/utils/relaying'
 import type { SignOrExecuteProps } from '.'
 import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
 import { TxModalContext } from '@/components/tx-flow'
@@ -52,13 +53,15 @@ const ExecuteForm = ({
   // Check that the transaction is executable
   const isExecutionLoop = useIsExecutionLoop()
 
-  // SC wallets can relay fully signed transactions
-  const [canWalletRelay] = useWalletCanRelay(safeTx)
-  // We default to relay
+  // We default to relay, but the option is only shown if we canRelay
   const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)
+
+  // SC wallets can relay fully signed transactions
+  const [walletCanRelay] = useWalletCanRelay(safeTx)
+
   // The transaction can/will be relayed
-  const willRelay = executionMethod === ExecutionMethod.RELAY
-  const hasRelays = !!relays?.remaining
+  const canRelay = walletCanRelay && hasRemainingRelays(relays)
+  const willRelay = canRelay && executionMethod === ExecutionMethod.RELAY
 
   // Estimate gas limit
   const { gasLimit, gasLimitError } = useGasLimit(safeTx)
@@ -99,18 +102,12 @@ const ExecuteForm = ({
 
   const cannotPropose = !isOwner && !onlyExecute
   const submitDisabled =
-    !safeTx ||
-    !isSubmittable ||
-    disableSubmit ||
-    isValidExecutionLoading ||
-    isExecutionLoop ||
-    cannotPropose ||
-    (willRelay && !hasRelays)
+    !safeTx || !isSubmittable || disableSubmit || isValidExecutionLoading || isExecutionLoop || cannotPropose
 
   return (
     <>
       <form onSubmit={handleSubmit}>
-        <div className={classNames(css.params, { [css.noBottomBorderRadius]: canWalletRelay })}>
+        <div className={classNames(css.params, { [css.noBottomBorderRadius]: canRelay })}>
           <AdvancedParams
             willExecute
             params={advancedParams}
@@ -120,7 +117,7 @@ const ExecuteForm = ({
             willRelay={willRelay}
           />
 
-          {canWalletRelay && (
+          {canRelay && (
             <div className={css.noTopBorder}>
               <ExecutionMethodSelector
                 executionMethod={executionMethod}

src/components/tx/SponsoredBy/index.tsx

@@ -11,72 +11,43 @@ export const SPONSOR_LOGOS = {
   [chains.gor]: '/images/common/token-placeholder.svg',
 }
 
-const SponsoredBy = ({
-  relays,
-  tooltip,
-  shouldRelay,
-}: {
-  relays?: RelayResponse
-  tooltip?: string
-  shouldRelay: boolean
-}) => {
+const SponsoredBy = ({ relays, tooltip }: { relays: RelayResponse; tooltip?: string }) => {
   const chain = useCurrentChain()
 
   return (
     <Box className={css.sponsoredBy}>
       <SvgIcon component={GasStationIcon} inheritViewBox className={css.icon} />
-
-      {shouldRelay ? (
-        <div>
-          <Stack direction="row" spacing={0.5} alignItems="center">
-            <Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
-              Sponsored by
-            </Typography>
-
-            <img src={SPONSOR_LOGOS[chain?.chainId || '']} alt={chain?.chainName} className={css.logo} />
-            <Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
-              {chain?.chainName}
-            </Typography>
-
-            {tooltip ? (
-              <Tooltip title={tooltip} placement="top" arrow>
-                <span style={{ display: 'flex' }}>
-                  <SvgIcon
-                    component={InfoIcon}
-                    inheritViewBox
-                    color="info"
-                    fontSize="small"
-                    sx={{ verticalAlign: 'middle', color: '#B2B5B2' }}
-                  />
-                </span>
-              </Tooltip>
-            ) : null}
-          </Stack>
-
-          <Typography variant="body2" color="primary.light">
-            Transactions per hour:{' '}
-            <Box component="span" sx={{ fontWeight: '700', color: 'text.primary' }}>
-              {relays?.remaining ?? 0} of {relays?.limit ?? 0}
-            </Box>
-            {relays && !relays.remaining && (
-              <Box component="span" sx={{ color: 'error.main' }}>
-                {' '}
-                &mdash; will reset in the next hour
-              </Box>
-            )}
-          </Typography>
-        </div>
-      ) : (
-        <div>
+      <div>
+        <Stack direction="row" spacing={0.5} alignItems="center">
           <Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
-            Pay gas from the connected wallet
+            Sponsored by
           </Typography>
-
-          <Typography variant="body2" color="primary.light">
-            Please make sure your wallet has sufficient funds.
+          <img src={SPONSOR_LOGOS[chain?.chainId || '']} alt={chain?.chainName} className={css.logo} />
+          <Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
+            {chain?.chainName}
           </Typography>
-        </div>
-      )}
+          {tooltip ? (
+            <Tooltip title={tooltip} placement="top" arrow>
+              <span style={{ display: 'flex' }}>
+                <SvgIcon
+                  component={InfoIcon}
+                  inheritViewBox
+                  color="info"
+                  fontSize="small"
+                  sx={{ verticalAlign: 'middle', color: '#B2B5B2' }}
+                />
+              </span>
+            </Tooltip>
+          ) : null}
+        </Stack>
+
+        <Typography variant="body2" color="primary.light">
+          Transactions per hour:{' '}
+          <Box component="span" sx={{ fontWeight: '700', color: 'text.primary' }}>
+            {relays.remaining} of {relays.limit}
+          </Box>
+        </Typography>
+      </div>
     </Box>
   )
 }

src/hooks/useWalletCanRelay.ts

@@ -4,18 +4,14 @@ import useWallet from '@/hooks/wallets/useWallet'
 import { isSmartContractWallet } from '@/utils/wallets'
 import { Errors, logError } from '@/services/exceptions'
 import { type SafeTransaction } from '@safe-global/safe-core-sdk-types'
-import { FEATURES, hasFeature } from '@/utils/chains'
-import { useCurrentChain } from './useChains'
 
 const useWalletCanRelay = (tx: SafeTransaction | undefined) => {
   const { safe } = useSafeInfo()
   const wallet = useWallet()
-  const chain = useCurrentChain()
-  const isFeatureEnabled = chain && hasFeature(chain, FEATURES.RELAYING)
   const hasEnoughSignatures = tx && tx.signatures.size >= safe.threshold
 
   return useAsync(() => {
-    if (!isFeatureEnabled || !tx || !wallet) return
+    if (!tx || !wallet) return
 
     return isSmartContractWallet(wallet)
       .then((isSCWallet) => {
@@ -27,7 +23,7 @@ const useWalletCanRelay = (tx: SafeTransaction | undefined) => {
         logError(Errors._106, err.message)
         return false
       })
-  }, [isFeatureEnabled, hasEnoughSignatures, tx, wallet])
+  }, [hasEnoughSignatures, tx, wallet])
 }
 
 export default useWalletCanRelay