From 79edddc47600a15e47aa7033f170241d0b14dd9d Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Fri, 10 Nov 2023 13:47:27 +0100
Subject: [PATCH 1/4] Fix: show relays even when 0 relays left

---
 .../tx/ExecutionMethodSelector/index.tsx      |  2 +-
 .../tx/SignOrExecuteForm/ExecuteForm.tsx      | 14 +--
 src/components/tx/SponsoredBy/index.tsx       | 87 ++++++++++++-------
 3 files changed, 68 insertions(+), 35 deletions(-)

diff --git a/src/components/tx/ExecutionMethodSelector/index.tsx b/src/components/tx/ExecutionMethodSelector/index.tsx
index 95e56b9d4a..baae6e7855 100644
--- a/src/components/tx/ExecutionMethodSelector/index.tsx
+++ b/src/components/tx/ExecutionMethodSelector/index.tsx
@@ -71,7 +71,7 @@ export const ExecutionMethodSelector = ({
         </FormControl>
       </div>
 
-      {shouldRelay && relays ? <SponsoredBy relays={relays} tooltip={tooltip} /> : null}
+      <SponsoredBy relays={relays} tooltip={tooltip} shouldRelay={shouldRelay} />
     </Box>
   )
 }
diff --git a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
index 72ae840fc6..38ab56b1bc 100644
--- a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
@@ -12,7 +12,6 @@ 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'
@@ -57,11 +56,10 @@ const ExecuteForm = ({
   const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)
 
   // SC wallets can relay fully signed transactions
-  const [walletCanRelay] = useWalletCanRelay(safeTx)
-
+  const [canRelay] = useWalletCanRelay(safeTx)
   // The transaction can/will be relayed
-  const canRelay = walletCanRelay && hasRemainingRelays(relays)
   const willRelay = canRelay && executionMethod === ExecutionMethod.RELAY
+  const hasRelays = !!relays?.remaining
 
   // Estimate gas limit
   const { gasLimit, gasLimitError } = useGasLimit(safeTx)
@@ -102,7 +100,13 @@ const ExecuteForm = ({
 
   const cannotPropose = !isOwner && !onlyExecute
   const submitDisabled =
-    !safeTx || !isSubmittable || disableSubmit || isValidExecutionLoading || isExecutionLoop || cannotPropose
+    !safeTx ||
+    !isSubmittable ||
+    disableSubmit ||
+    isValidExecutionLoading ||
+    isExecutionLoop ||
+    cannotPropose ||
+    (willRelay && !hasRelays)
 
   return (
     <>
diff --git a/src/components/tx/SponsoredBy/index.tsx b/src/components/tx/SponsoredBy/index.tsx
index 6ae946c88e..e975168e15 100644
--- a/src/components/tx/SponsoredBy/index.tsx
+++ b/src/components/tx/SponsoredBy/index.tsx
@@ -11,43 +11,72 @@ export const SPONSOR_LOGOS = {
   [chains.gor]: '/images/common/token-placeholder.svg',
 }
 
-const SponsoredBy = ({ relays, tooltip }: { relays: RelayResponse; tooltip?: string }) => {
+const SponsoredBy = ({
+  relays,
+  tooltip,
+  shouldRelay,
+}: {
+  relays?: RelayResponse
+  tooltip?: string
+  shouldRelay: boolean
+}) => {
   const chain = useCurrentChain()
 
   return (
     <Box className={css.sponsoredBy}>
       <SvgIcon component={GasStationIcon} inheritViewBox className={css.icon} />
-      <div>
-        <Stack direction="row" spacing={0.5} alignItems="center">
-          <Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
-            Sponsored by
+
+      {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>
-          <img src={SPONSOR_LOGOS[chain?.chainId || '']} alt={chain?.chainName} className={css.logo} />
+        </div>
+      ) : (
+        <div>
           <Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
-            {chain?.chainName}
+            Pay gas from the connected wallet
+          </Typography>
+
+          <Typography variant="body2" color="primary.light">
+            Please make sure your wallet has sufficient funds.
           </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} of {relays.limit}
-          </Box>
-        </Typography>
-      </div>
+        </div>
+      )}
     </Box>
   )
 }

From 8db5a5eb152df6332fa9e27cc105130779babf34 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Fri, 10 Nov 2023 15:50:45 +0100
Subject: [PATCH 2/4] Do not show block if relaying not enabled at all

---
 .../tx/SignOrExecuteForm/ExecuteForm.tsx          | 15 ++++++++-------
 src/hooks/useWalletCanRelay.ts                    |  8 ++++++--
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
index 38ab56b1bc..0df4e852ce 100644
--- a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
@@ -52,13 +52,14 @@ const ExecuteForm = ({
   // Check that the transaction is executable
   const isExecutionLoop = useIsExecutionLoop()
 
-  // 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 [canRelay] = useWalletCanRelay(safeTx)
+  const [canWalletRelay] = useWalletCanRelay(safeTx)
+  // We default to relay
+  const [executionMethod, setExecutionMethod] = useState(
+    canWalletRelay ? ExecutionMethod.RELAY : ExecutionMethod.WALLET,
+  )
   // The transaction can/will be relayed
-  const willRelay = canRelay && executionMethod === ExecutionMethod.RELAY
+  const willRelay = executionMethod === ExecutionMethod.RELAY
   const hasRelays = !!relays?.remaining
 
   // Estimate gas limit
@@ -111,7 +112,7 @@ const ExecuteForm = ({
   return (
     <>
       <form onSubmit={handleSubmit}>
-        <div className={classNames(css.params, { [css.noBottomBorderRadius]: canRelay })}>
+        <div className={classNames(css.params, { [css.noBottomBorderRadius]: canWalletRelay })}>
           <AdvancedParams
             willExecute
             params={advancedParams}
@@ -121,7 +122,7 @@ const ExecuteForm = ({
             willRelay={willRelay}
           />
 
-          {canRelay && (
+          {canWalletRelay && (
             <div className={css.noTopBorder}>
               <ExecutionMethodSelector
                 executionMethod={executionMethod}
diff --git a/src/hooks/useWalletCanRelay.ts b/src/hooks/useWalletCanRelay.ts
index e7261e0226..d451855b3c 100644
--- a/src/hooks/useWalletCanRelay.ts
+++ b/src/hooks/useWalletCanRelay.ts
@@ -4,14 +4,18 @@ 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 (!tx || !wallet) return
+    if (!isFeatureEnabled || !tx || !wallet) return
 
     return isSmartContractWallet(wallet)
       .then((isSCWallet) => {
@@ -23,7 +27,7 @@ const useWalletCanRelay = (tx: SafeTransaction | undefined) => {
         logError(Errors._106, err.message)
         return false
       })
-  }, [hasEnoughSignatures, tx, wallet])
+  }, [isFeatureEnabled, hasEnoughSignatures, tx, wallet])
 }
 
 export default useWalletCanRelay

From 93e9e88431f77ca777f2bc7b7efacbb22d778fdd Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Mon, 13 Nov 2023 10:16:12 +0100
Subject: [PATCH 3/4] Restore default option to Relay

---
 src/components/tx/SignOrExecuteForm/ExecuteForm.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
index 0df4e852ce..628c5877f9 100644
--- a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
@@ -55,9 +55,7 @@ const ExecuteForm = ({
   // SC wallets can relay fully signed transactions
   const [canWalletRelay] = useWalletCanRelay(safeTx)
   // We default to relay
-  const [executionMethod, setExecutionMethod] = useState(
-    canWalletRelay ? ExecutionMethod.RELAY : ExecutionMethod.WALLET,
-  )
+  const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)
   // The transaction can/will be relayed
   const willRelay = executionMethod === ExecutionMethod.RELAY
   const hasRelays = !!relays?.remaining

From c29d8031d7be9a3ba890eaae3ccdfe0c32897275 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Mon, 13 Nov 2023 10:59:54 +0100
Subject: [PATCH 4/4] Restore version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 26ac24be3c..f2cabbfaf3 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "homepage": "https://github.com/safe-global/safe-wallet-web",
   "license": "GPL-3.0",
   "type": "module",
-  "version": "1.22.0",
+  "version": "1.21.0",
   "scripts": {
     "dev": "next dev",
     "start": "next dev",