fix: Update design for pay now pay later block

src/components/new-safe/ReviewRow/index.tsx

@@ -1,13 +1,15 @@
 import React, { type ReactElement } from 'react'
 import { Grid, Typography } from '@mui/material'
 
-const ReviewRow = ({ name, value }: { name: string; value: ReactElement }) => {
+const ReviewRow = ({ name, value }: { name?: string; value: ReactElement }) => {
   return (
     <>
-      <Grid item xs={3}>
-        <Typography variant="body2">{name}</Typography>
-      </Grid>
-      <Grid item xs={9}>
+      {name && (
+        <Grid item xs={3}>
+          <Typography variant="body2">{name}</Typography>
+        </Grid>
+      )}
+      <Grid item xs={name ? 9 : 12}>
         {value}
       </Grid>
     </>

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

@@ -1,12 +1,13 @@
 import type { NewSafeFormData } from '@/components/new-safe/create'
 import * as useChains from '@/hooks/useChains'
+import * as relay from '@/utils/relaying'
 import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 import { render } from '@/tests/test-utils'
 import ReviewStep, { NetworkFee } from '@/components/new-safe/create/steps/ReviewStep/index'
 import * as useWallet from '@/hooks/wallets/useWallet'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
-import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
+import * as socialLogin from '@/services/mpc/SocialLoginModule'
 import { act, fireEvent } from '@testing-library/react'
 
 const mockChainInfo = {
@@ -28,14 +29,14 @@ describe('NetworkFee', () => {
   })
 
   it('displays a sponsored by message for social login', () => {
-    jest.spyOn(useWallet, 'default').mockReturnValue({ label: ONBOARD_MPC_MODULE_LABEL } as unknown as ConnectedWallet)
+    jest.spyOn(useWallet, 'default').mockReturnValue({ label: 'Social Login' } as unknown as ConnectedWallet)
     const result = render(<NetworkFee totalFee="0" chain={mockChainInfo} willRelay={true} />)
 
     expect(result.getByText(/Your account is sponsored by Gnosis/)).toBeInTheDocument()
   })
 
   it('displays an error message for social login if there are no relays left', () => {
-    jest.spyOn(useWallet, 'default').mockReturnValue({ label: ONBOARD_MPC_MODULE_LABEL } as unknown as ConnectedWallet)
+    jest.spyOn(useWallet, 'default').mockReturnValue({ label: 'Social Login' } as unknown as ConnectedWallet)
     const result = render(<NetworkFee totalFee="0" chain={mockChainInfo} willRelay={false} />)
 
     expect(
@@ -78,7 +79,7 @@ describe('ReviewStep', () => {
       <ReviewStep data={mockData} onSubmit={jest.fn()} onBack={jest.fn()} setStep={jest.fn()} />,
     )
 
-    expect(queryByText('Est. network fee')).not.toBeInTheDocument()
+    expect(queryByText('You will have to confirm a transaction and pay an estimated fee')).not.toBeInTheDocument()
   })
 
   it('should not display the execution method for counterfactual safes', () => {
@@ -94,10 +95,10 @@ describe('ReviewStep', () => {
       <ReviewStep data={mockData} onSubmit={jest.fn()} onBack={jest.fn()} setStep={jest.fn()} />,
     )
 
-    expect(queryByText('Execution method')).not.toBeInTheDocument()
+    expect(queryByText('Who will pay gas fees:')).not.toBeInTheDocument()
   })
 
-  it('should display the execution method for counterfactual safes if the user selects pay now', async () => {
+  it('should display the network fee for counterfactual safes if the user selects pay now', async () => {
     const mockData: NewSafeFormData = {
       name: 'Test',
       threshold: 1,
@@ -116,6 +117,30 @@ describe('ReviewStep', () => {
       fireEvent.click(payNow)
     })
 
-    expect(getByText(/Est. network fee/)).toBeInTheDocument()
+    expect(getByText(/You will have to confirm a transaction and pay an estimated fee/)).toBeInTheDocument()
+  })
+
+  it('should display the execution method for counterfactual safes if the user selects pay now and there is relaying', async () => {
+    const mockData: NewSafeFormData = {
+      name: 'Test',
+      threshold: 1,
+      owners: [{ name: '', address: '0x1' }],
+      saltNonce: 0,
+    }
+    jest.spyOn(useChains, 'useHasFeature').mockReturnValue(true)
+    jest.spyOn(relay, 'hasRemainingRelays').mockReturnValue(true)
+    jest.spyOn(socialLogin, 'isSocialLoginWallet').mockReturnValue(false)
+
+    const { getByText } = render(
+      <ReviewStep data={mockData} onSubmit={jest.fn()} onBack={jest.fn()} setStep={jest.fn()} />,
+    )
+
+    const payNow = getByText('Pay now')
+
+    act(() => {
+      fireEvent.click(payNow)
+    })
+
+    expect(getByText(/Who will pay gas fees:/)).toBeInTheDocument()
   })
 })

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

@@ -12,7 +12,6 @@ import layoutCss from '@/components/new-safe/create/styles.module.css'
 import { useEstimateSafeCreationGas } from '@/components/new-safe/create/useEstimateSafeCreationGas'
 import useSyncSafeCreationStep from '@/components/new-safe/create/useSyncSafeCreationStep'
 import ReviewRow from '@/components/new-safe/ReviewRow'
-import lightPalette from '@/components/theme/lightPalette'
 import ErrorMessage from '@/components/tx/ErrorMessage'
 import { ExecutionMethod, ExecutionMethodSelector } from '@/components/tx/ExecutionMethodSelector'
 import { RELAY_SPONSORS } from '@/components/tx/SponsoredBy'
@@ -45,27 +44,21 @@ export const NetworkFee = ({
   totalFee,
   chain,
   willRelay,
+  inline = false,
 }: {
   totalFee: string
   chain: ChainInfo | undefined
   willRelay: boolean
+  inline?: boolean
 }) => {
   const wallet = useWallet()
 
   const isSocialLogin = isSocialLoginWallet(wallet?.label)
 
   if (!isSocialLogin) {
     return (
-      <Box
-        p={1}
-        sx={{
-          backgroundColor: lightPalette.secondary.background,
-          color: 'static.main',
-          width: 'fit-content',
-          borderRadius: '6px',
-        }}
-      >
-        <Typography variant="body1" className={classnames({ [css.sponsoredFee]: willRelay })}>
+      <Box className={classnames(css.networkFee, { [css.networkFeeInline]: inline })}>
+        <Typography className={classnames({ [css.sponsoredFee]: willRelay })}>
           <b>
             &asymp; {totalFee} {chain?.nativeCurrency.symbol}
           </b>
@@ -247,11 +240,35 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
           <Divider />
           <Box className={layoutCss.row}>
             <PayNowPayLater totalFee={totalFee} canRelay={canRelay} payMethod={payMethod} setPayMethod={setPayMethod} />
+
+            {canRelay && !isSocialLogin && payMethod === PayMethod.PayNow && (
+              <Grid container spacing={3} pt={2}>
+                <ReviewRow
+                  value={
+                    <ExecutionMethodSelector
+                      executionMethod={executionMethod}
+                      setExecutionMethod={setExecutionMethod}
+                      relays={minRelays}
+                    />
+                  }
+                />
+              </Grid>
+            )}
+
+            {payMethod === PayMethod.PayNow && (
+              <Grid item>
+                <Typography mt={2}>
+                  You will have to confirm a transaction and pay an estimated fee of{' '}
+                  <NetworkFee totalFee={totalFee} willRelay={willRelay} chain={chain} inline /> with your connected
+                  wallet
+                </Typography>
+              </Grid>
+            )}
           </Box>
         </>
       )}
 
-      {(!isCounterfactual || payMethod === PayMethod.PayNow) && (
+      {!isCounterfactual && (
         <>
           <Divider />
           <Box className={layoutCss.row} display="flex" flexDirection="column" gap={3}>

src/components/new-safe/create/steps/ReviewStep/styles.module.css

@@ -13,3 +13,16 @@
 .errorMessage {
   margin-top: 0;
 }
+
+.networkFee {
+  padding: var(--space-1);
+  background-color: var(--color-secondary-background);
+  color: var(--color-static-main);
+  width: fit-content;
+  border-radius: 6px;
+}
+
+.networkFeeInline {
+  padding: 2px 4px;
+  display: inline-flex;
+}