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; +}