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 = ({ - {shouldRelay && relays ? : null} + ) } 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 ( -
- - - Sponsored by + + {shouldRelay ? ( +
+ + + Sponsored by + + + {chain?.chainName} + + {chain?.chainName} + + + {tooltip ? ( + + + + + + ) : null} + + + + Transactions per hour:{' '} + + {relays?.remaining ?? 0} of {relays?.limit ?? 0} + + {relays && !relays.remaining && ( + + {' '} + — will reset in the next hour + + )} - {chain?.chainName} +
+ ) : ( +
- {chain?.chainName} + Pay gas from the connected wallet + + + + Please make sure your wallet has sufficient funds. - {tooltip ? ( - - - - - - ) : null} - - - - Transactions per hour:{' '} - - {relays.remaining} of {relays.limit} - - -
+
+ )}
) }