Fix: show relays even when 0 relays left

safe-global · Nov 10, 2023 · 79edddc · 79edddc
1 parent 5399c1a
commit 79edddc
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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>
   )
 }