feat: execution method for creation + batches

cypress/e2e/smoke/create_tx.cy.js

@@ -102,7 +102,6 @@ describe('Queue a transaction on 1/N', () => {
 
     // Asserting the sponsored info is present
     cy.contains('Sponsored by').should('be.visible')
-    cy.contains('Gnosis Chain').should('be.visible')
 
     cy.get('span').contains('Estimated fee').next().should('have.css', 'text-decoration-line', 'line-through')
     cy.contains('Transactions per hour')

src/components/dashboard/Relaying/index.tsx

@@ -8,10 +8,13 @@ import GasStationIcon from '@/public/images/common/gas-station.svg'
 import ExternalLink from '@/components/common/ExternalLink'
 import classnames from 'classnames'
 import css from './styles.module.css'
+import { useCurrentChain } from '@/hooks/useChains'
+import { SPONSOR_LOGOS } from '@/components/tx/SponsoredBy'
 
 const RELAYING_HELP_ARTICLE = 'https://help.safe.global/en/articles/7224713-what-is-gas-fee-sponsoring'
 
 const Relaying = () => {
+  const chain = useCurrentChain()
   const [relays, relaysError] = useRelaysBySafe()
 
   const limit = relays?.limit || MAX_HOUR_RELAYS
@@ -32,9 +35,9 @@ const Relaying = () => {
               <Typography variant="h6" fontWeight={700}>
                 Gas fees sponsored by
               </Typography>
-              <img src="/images/common/gnosis-chain-logo.png" alt="Gnosis Chain" className={css.gcLogo} />
+              <img src={SPONSOR_LOGOS[chain?.chainId || '']} alt={chain?.chainName} className={css.gcLogo} />
               <Typography variant="h6" fontWeight={700} flexShrink={0}>
-                Gnosis Chain
+                {chain?.chainName}
               </Typography>
             </Stack>
             <Typography variant="body2" marginRight={1} sx={{ display: 'inline' }}>

src/components/new-safe/create/steps/ReviewStep/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { Button, Grid, Typography, Divider, Box } from '@mui/material'
 import { lightPalette } from '@safe-global/safe-react-components'
 import ChainIndicator from '@/components/common/ChainIndicator'
@@ -22,9 +22,10 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import NetworkWarning from '@/components/new-safe/create/NetworkWarning'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
 import ReviewRow from '@/components/new-safe/ReviewRow'
-import SponsoredBy from '@/components/tx/SponsoredBy'
+import { ExecutionMethodSelector, ExecutionMethod } from '@/components/tx/ExecutionMethodSelector'
 import { useLeastRemainingRelays } from '@/hooks/useRemainingRelays'
 import classnames from 'classnames'
+import { hasRemainingRelays } from '@/utils/relaying'
 
 const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafeFormData>) => {
   const isWrongChain = useIsWrongChain()
@@ -35,12 +36,14 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
   const { maxFeePerGas, maxPriorityFeePerGas } = useGasPrice()
   const saltNonce = useMemo(() => Date.now(), [])
   const [_, setPendingSafe] = useLocalStorage<PendingSafeData | undefined>(SAFE_PENDING_CREATION_STORAGE_KEY)
+  const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)
 
   const ownerAddresses = useMemo(() => data.owners.map((owner) => owner.address), [data.owners])
   const [minRelays] = useLeastRemainingRelays(ownerAddresses)
 
-  // Chain supports relaying and relay transactions are available
-  const willRelay = minRelays && minRelays.remaining > 0
+  // Every owner has remaining relays and relay method is selected
+  const canRelay = hasRemainingRelays(minRelays)
+  const willRelay = canRelay && executionMethod === ExecutionMethod.RELAY
 
   const safeParams = useMemo(() => {
     return {
@@ -121,8 +124,22 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
 
       <Divider />
       <Box className={layoutCss.row}>
-        <Grid item xs={12}>
-          <Grid container spacing={3}>
+        <Grid container xs={12} spacing={3}>
+          {canRelay && (
+            <Grid item container spacing={3}>
+              <ReviewRow
+                name="Execution method"
+                value={
+                  <ExecutionMethodSelector
+                    executionMethod={executionMethod}
+                    setExecutionMethod={setExecutionMethod}
+                    relays={minRelays}
+                  />
+                }
+              />
+            </Grid>
+          )}
+          <Grid item container spacing={3}>
             <ReviewRow
               name="Est. network fee"
               value={
@@ -150,7 +167,6 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
                 </>
               }
             />
-            {willRelay ? <ReviewRow name="" value={<SponsoredBy relays={minRelays} />} /> : null}
           </Grid>
         </Grid>
 

src/components/tx/ExecutionMethodSelector/index.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import { Box, FormControl, FormControlLabel, SvgIcon, Radio, RadioGroup, Typography } from '@mui/material'
 import type { Dispatch, SetStateAction, ReactElement, ChangeEvent } from 'react'
 
@@ -19,10 +18,14 @@ export const ExecutionMethodSelector = ({
   executionMethod,
   setExecutionMethod,
   relays,
+  noLabel,
+  tooltip,
 }: {
   executionMethod: ExecutionMethod
   setExecutionMethod: Dispatch<SetStateAction<ExecutionMethod>>
   relays?: RelayResponse
+  noLabel?: boolean
+  tooltip?: string
 }): ReactElement | null => {
   const wallet = useWallet()
 
@@ -33,18 +36,20 @@ export const ExecutionMethodSelector = ({
   }
 
   return (
-    <Box className={classNames(css.noTopBorderRadius, { [css.noBorderRadius]: shouldRelay })}>
-      <Box className={css.container} sx={{ borderRadius: ({ shape }) => `${shape.borderRadius}px` }}>
+    <Box className={css.container} sx={{ borderRadius: ({ shape }) => `${shape.borderRadius}px` }}>
+      <Box className={css.method}>
         <FormControl sx={{ display: 'flex' }}>
-          <Typography variant="body2" sx={{ color: ({ palette }) => palette.text.secondary }}>
-            Choose execution method
-          </Typography>
+          {!noLabel ? (
+            <Typography variant="body2" className={css.label}>
+              Choose execution method:
+            </Typography>
+          ) : null}
           <RadioGroup row value={executionMethod} onChange={onChooseExecutionMethod}>
             <FormControlLabel
               sx={{ flex: 1 }}
               value={ExecutionMethod.RELAY}
               label={
-                <Typography className={css.label}>
+                <Typography className={css.radioLabel}>
                   <SvgIcon component={RelayerIcon} inheritViewBox fontSize="small" />
                   Relayer
                 </Typography>
@@ -55,7 +60,7 @@ export const ExecutionMethodSelector = ({
               sx={{ flex: 1 }}
               value={ExecutionMethod.WALLET}
               label={
-                <Typography className={css.label}>
+                <Typography className={css.radioLabel}>
                   <WalletIcon provider={wallet?.label || ''} width={20} height={20} /> Connected wallet
                 </Typography>
               }
@@ -65,11 +70,7 @@ export const ExecutionMethodSelector = ({
         </FormControl>
       </Box>
 
-      {shouldRelay && relays ? (
-        <Box className={css.noTopBorderRadius}>
-          <SponsoredBy relays={relays} />
-        </Box>
-      ) : null}
+      {shouldRelay && relays ? <SponsoredBy relays={relays} tooltip={tooltip} /> : null}
     </Box>
   )
 }

src/components/tx/ExecutionMethodSelector/styles.module.css

@@ -1,22 +1,19 @@
 .container {
   border: 1px solid var(--color-border-light);
-  padding: var(--space-2) var(--space-2) var(--space-1) var(--space-2);
-  margin-top: -1px;
+}
+
+.method {
+  padding: var(--space-1) var(--space-2);
 }
 
 .label {
+  padding-top: var(--space-1);
+  color: var(--color-text-secondary);
+}
+
+.radioLabel {
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: calc(var(--space-1) / 2);
 }
-
-.noTopBorderRadius > div {
-  margin-top: -1px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.noBorderRadius > div {
-  border-radius: 0;
-}

src/components/tx/SignOrExecuteForm/index.tsx

@@ -1,5 +1,5 @@
 import { type ReactElement, type ReactNode, type SyntheticEvent, useEffect, useState } from 'react'
-import { Button, DialogContent, Typography } from '@mui/material'
+import { Box, Button, DialogContent, Typography } from '@mui/material'
 import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
 
 import useGasLimit from '@/hooks/useGasLimit'
@@ -21,6 +21,7 @@ import UnknownContractError from './UnknownContractError'
 import { useRelaysBySafe } from '@/hooks/useRemainingRelays'
 import useWalletCanRelay from '@/hooks/useWalletCanRelay'
 import { ExecutionMethod, ExecutionMethodSelector } from '../ExecutionMethodSelector'
+import { hasRemainingRelays } from '@/utils/relaying'
 
 type SignOrExecuteProps = {
   safeTx?: SafeTransaction
@@ -71,16 +72,14 @@ const SignOrExecuteForm = ({
   // If checkbox is checked and the transaction is executable, execute it, otherwise sign it
   const willExecute = (onlyExecute || shouldExecute) && canExecute
 
-  // SC wallets can relay fully signed transactions
-  const [walletCanRelay] = useWalletCanRelay(tx)
-
-  // The transaction can be relayed
-  const canRelay = willExecute && !!relays && relays.remaining > 0 && !!walletCanRelay
-
   // We default to relay, but the option is only shown if we canRelay
   const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)
 
-  // The transaction will be executed through relaying
+  // SC wallets can relay fully signed transactions
+  const [walletCanRelay] = useWalletCanRelay(tx)
+
+  // The transaction can/will be relayed
+  const canRelay = hasRemainingRelays(relays) && !!walletCanRelay && willExecute
   const willRelay = canRelay && executionMethod === ExecutionMethod.RELAY
 
   // Synchronize the tx with the safeTx
@@ -183,11 +182,21 @@ const SignOrExecuteForm = ({
         />
 
         {canRelay && (
-          <ExecutionMethodSelector
-            executionMethod={executionMethod}
-            setExecutionMethod={setExecutionMethod}
-            relays={relays}
-          />
+          <Box
+            sx={{
+              '& > div': {
+                marginTop: '-1px',
+                borderTopLeftRadius: 0,
+                borderTopRightRadius: 0,
+              },
+            }}
+          >
+            <ExecutionMethodSelector
+              executionMethod={executionMethod}
+              setExecutionMethod={setExecutionMethod}
+              relays={relays}
+            />
+          </Box>
         )}
 
         <TxSimulation

src/components/tx/SponsoredBy/index.tsx

@@ -6,8 +6,9 @@ import chains from '@/config/chains'
 import { useCurrentChain } from '@/hooks/useChains'
 import type { RelayResponse } from '@/services/tx/relaying'
 
-const LOGOS = {
+export const SPONSOR_LOGOS = {
   [chains.gno]: '/images/common/gnosis-chain-logo.png',
+  [chains.gor]: '/images/common/token-placeholder.svg',
 }
 
 const SponsoredBy = ({ relays, tooltip }: { relays: RelayResponse; tooltip?: string }) => {
@@ -21,7 +22,7 @@ const SponsoredBy = ({ relays, tooltip }: { relays: RelayResponse; tooltip?: str
           <Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
             Sponsored by
           </Typography>
-          <img src={LOGOS[chain?.chainId || '']} alt={chain?.chainName} className={css.logo} />
+          <img src={SPONSOR_LOGOS[chain?.chainId || '']} alt={chain?.chainName} className={css.logo} />
           <Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
             {chain?.chainName}
           </Typography>

src/components/tx/SponsoredBy/styles.module.css

@@ -1,8 +1,9 @@
 .sponsoredBy {
   padding: 8px 12px;
   background-color: var(--color-background-main);
-  border-radius: 6px;
-  border: 1px solid var(--color-border-light);
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  border-top: 1px solid var(--color-border-light);
   display: flex;
 }
 

src/components/tx/modals/BatchExecuteModal/ReviewBatchExecute.tsx

@@ -15,21 +15,24 @@ import DecodedTxs from '@/components/tx/modals/BatchExecuteModal/DecodedTxs'
 import { getMultiSendTxs, getTxsWithDetails } from '@/utils/transactions'
 import { TxSimulation } from '@/components/tx/TxSimulation'
 import { useRelaysBySafe } from '@/hooks/useRemainingRelays'
-import SponsoredBy from '@/components/tx/SponsoredBy'
+import { ExecutionMethod, ExecutionMethodSelector } from '../../ExecutionMethodSelector'
 import { dispatchBatchExecution, dispatchBatchExecutionRelay } from '@/services/tx/tx-sender'
 import useOnboard from '@/hooks/wallets/useOnboard'
 import { WrongChainWarning } from '@/components/tx/WrongChainWarning'
 import { useWeb3 } from '@/hooks/wallets/web3'
+import { hasRemainingRelays } from '@/utils/relaying'
 
 const ReviewBatchExecute = ({ data, onSubmit }: { data: BatchExecuteData; onSubmit: (data: null) => void }) => {
   const [isSubmittable, setIsSubmittable] = useState<boolean>(true)
   const [submitError, setSubmitError] = useState<Error | undefined>()
+  const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)
   const chain = useCurrentChain()
   const { safe } = useSafeInfo()
   const [relays] = useRelaysBySafe()
 
   // Chain has relaying feature and available relays
-  const willRelay = relays && relays.remaining > 0
+  const canRelay = hasRemainingRelays(relays)
+  const willRelay = canRelay && executionMethod === ExecutionMethod.RELAY
   const onboard = useOnboard()
   const web3 = useWeb3()
 
@@ -125,12 +128,14 @@ const ReviewBatchExecute = ({ data, onSubmit }: { data: BatchExecuteData; onSubm
         </Typography>
         <DecodedTxs txs={txsWithDetails} />
 
-        {willRelay ? (
+        {canRelay ? (
           <>
             <Typography mt={2} mb={1} color="primary.light">
               Gas fees:
             </Typography>
-            <SponsoredBy
+            <ExecutionMethodSelector
+              executionMethod={executionMethod}
+              setExecutionMethod={setExecutionMethod}
               relays={relays}
               tooltip="You can only relay multisend transactions containing
 executions from the same Safe Account."

src/utils/relaying.ts

@@ -0,0 +1,5 @@
+import type { RelayResponse } from '@/services/tx/relaying'
+
+export const hasRemainingRelays = (relays?: RelayResponse): boolean => {
+  return !!relays && relays.remaining > 0
+}