diff --git a/src/components/new-safe/ReviewRow/index.tsx b/src/components/new-safe/ReviewRow/index.tsx
index 7478c054c4..6f434c108c 100644
--- a/src/components/new-safe/ReviewRow/index.tsx
+++ b/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 (
<>
-
- {name}
-
-
+ {name && (
+
+ {name}
+
+ )}
+
{value}
>
diff --git a/src/components/new-safe/create/steps/ReviewStep/index.test.tsx b/src/components/new-safe/create/steps/ReviewStep/index.test.tsx
index 26aa9fdd49..8ebfc9bdaa 100644
--- a/src/components/new-safe/create/steps/ReviewStep/index.test.tsx
+++ b/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()
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()
expect(
@@ -78,7 +79,7 @@ describe('ReviewStep', () => {
,
)
- 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', () => {
,
)
- 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(
+ ,
+ )
+
+ const payNow = getByText('Pay now')
+
+ act(() => {
+ fireEvent.click(payNow)
+ })
+
+ expect(getByText(/Who will pay gas fees:/)).toBeInTheDocument()
})
})
diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
index 357260d054..dee132db0c 100644
--- a/src/components/new-safe/create/steps/ReviewStep/index.tsx
+++ b/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,10 +44,12 @@ export const NetworkFee = ({
totalFee,
chain,
willRelay,
+ inline = false,
}: {
totalFee: string
chain: ChainInfo | undefined
willRelay: boolean
+ inline?: boolean
}) => {
const wallet = useWallet()
@@ -56,16 +57,8 @@ export const NetworkFee = ({
if (!isSocialLogin) {
return (
-
-
+
+
≈ {totalFee} {chain?.nativeCurrency.symbol}
@@ -247,11 +240,35 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps
+
+ {canRelay && !isSocialLogin && payMethod === PayMethod.PayNow && (
+
+
+ }
+ />
+
+ )}
+
+ {payMethod === PayMethod.PayNow && (
+
+
+ You will have to confirm a transaction and pay an estimated fee of{' '}
+ with your connected
+ wallet
+
+
+ )}
>
)}
- {(!isCounterfactual || payMethod === PayMethod.PayNow) && (
+ {!isCounterfactual && (
<>
diff --git a/src/components/new-safe/create/steps/ReviewStep/styles.module.css b/src/components/new-safe/create/steps/ReviewStep/styles.module.css
index 2d4e1be420..9b87174229 100644
--- a/src/components/new-safe/create/steps/ReviewStep/styles.module.css
+++ b/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;
+}