Fix: better labels for relaying (#2988)

* Fix: better labels for relaying

* transitionDuration for ConnectionCenter

* Fix unit tests

cypress/e2e/pages/create_tx.pages.js

@@ -16,8 +16,6 @@ const connectedWalletExecMethod = '[data-testid="connected-wallet-execution-meth
 const addToBatchBtn = '[data-track="batching: Add to batch"]'
 const accordionDetails = '[data-testid="accordion-details"]'
 const copyIcon = '[data-testid="copy-btn-icon"]'
-const transactionType = '[data-testid="tx-type"]'
-const copyToClipboardItem = 'span[aria-label="Copy to clipboard"]'
 const transactionSideList = '[data-testid="transaction-actions-list"]'
 const confirmationVisibilityBtn = '[data-testid="confirmation-visibility-btn"]'
 const expandAllBtn = '[data-testid="expande-all-btn"]'
@@ -32,8 +30,7 @@ const viewTransactionBtn = 'View transaction'
 const transactionDetailsTitle = 'Transaction details'
 const QueueLabel = 'needs to be executed first'
 const TransactionSummary = 'Send '
-const transactionsPerHrStr = 'Transactions per hour'
-const transactionsPerHr5Of5Str = '5 of 5'
+const transactionsPerHrStr = 'free transactions left this hour'
 
 const maxAmountBtnStr = 'Max'
 const nextBtnStr = 'Next'
@@ -243,7 +240,6 @@ export function selectCurrentWallet() {
 
 export function verifyRelayerAttemptsAvailable() {
   cy.contains(transactionsPerHrStr).should('be.visible')
-  cy.contains(transactionsPerHr5Of5Str).should('be.visible')
 }
 
 export function clickOnTokenselectorAndSelectSepoliaEth() {

src/components/common/ConnectWallet/ConnectionCenter.tsx

@@ -63,6 +63,7 @@ export const ConnectionCenter = ({ isSocialLoginEnabled }: { isSocialLoginEnable
           horizontal: 'center',
         }}
         sx={{ mt: 1 }}
+        transitionDuration={0}
       >
         <Paper className={classnames(css.popoverContainer, css.largeGap)}>
           <WalletDetails onConnect={handleClose} />

src/components/common/SocialLoginInfo/index.tsx

@@ -3,7 +3,7 @@ import { Badge, Box, Typography } from '@mui/material'
 import { type BigNumber } from 'ethers'
 import css from './styles.module.css'
 import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
-import { type ConnectedWallet } from '@/services/onboard'
+import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import CopyAddressButton from '@/components/common/CopyAddressButton'
 import ExplorerButton from '@/components/common/ExplorerButton'
 import { getBlockExplorerLink } from '@/utils/chains'

src/components/common/WalletBalance/index.tsx

@@ -7,7 +7,7 @@ const WalletBalance = ({ balance }: { balance: BigNumber | undefined }) => {
   const currentChain = useCurrentChain()
 
   if (!balance) {
-    return <Skeleton width={30} />
+    return <Skeleton width={30} variant="text" sx={{ display: 'inline-block' }} />
   }
 
   return (

src/components/new-safe/create/__tests__/useSyncSafeCreationStep.test.ts

@@ -2,7 +2,7 @@ import { renderHook } from '@/tests/test-utils'
 import useSyncSafeCreationStep from '@/components/new-safe/create/useSyncSafeCreationStep'
 import * as wallet from '@/hooks/wallets/useWallet'
 import * as localStorage from '@/services/local-storage/useLocalStorage'
-import type { ConnectedWallet } from '@/services/onboard'
+import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import * as usePendingSafe from '../steps/StatusStep/usePendingSafe'
 import * as useIsWrongChain from '@/hooks/useIsWrongChain'
 import * as useRouter from 'next/router'

src/components/new-safe/create/logic/index.ts

@@ -5,7 +5,7 @@ import {
   getReadOnlyGnosisSafeContract,
   getReadOnlyProxyFactoryContract,
 } from '@/services/contracts/safeContracts'
-import type { ConnectedWallet } from '@/services/onboard'
+import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import { BigNumber } from '@ethersproject/bignumber'
 import { SafeCreationStatus } from '@/components/new-safe/create/steps/StatusStep/useSafeCreation'
 import { didRevert, type EthersError } from '@/utils/ethers-utils'

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

@@ -3,7 +3,7 @@ import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { render } from '@/tests/test-utils'
 import { NetworkFee } from '@/components/new-safe/create/steps/ReviewStep/index'
 import * as useWallet from '@/hooks/wallets/useWallet'
-import { type ConnectedWallet } from '@/services/onboard'
+import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
 
 const mockChainInfo = {
@@ -28,7 +28,7 @@ describe('NetworkFee', () => {
     jest.spyOn(useWallet, 'default').mockReturnValue({ label: ONBOARD_MPC_MODULE_LABEL } as unknown as ConnectedWallet)
     const result = render(<NetworkFee totalFee="0" chain={mockChainInfo} willRelay={true} />)
 
-    expect(result.getByText(/Your account is sponsored by Gnosis Chain/)).toBeInTheDocument()
+    expect(result.getByText(/Your account is sponsored by Gnosis/)).toBeInTheDocument()
   })
 
   it('displays an error message for social login if there are no relays left', () => {

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

@@ -28,7 +28,7 @@ import { BigNumber } from 'ethers'
 import { usePendingSafe } from '../StatusStep/usePendingSafe'
 import { LATEST_SAFE_VERSION } from '@/config/constants'
 import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
-import { SPONSOR_LOGOS } from '@/components/tx/SponsoredBy'
+import { RELAY_SPONSORS } from '@/components/tx/SponsoredBy'
 import Image from 'next/image'
 import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
@@ -66,20 +66,21 @@ export const NetworkFee = ({
   }
 
   if (willRelay) {
+    const sponsor = RELAY_SPONSORS[chain?.chainId || ''] || RELAY_SPONSORS.default
     return (
       <>
         <Typography fontWeight="bold">Free</Typography>
         <Typography variant="body2">
           Your account is sponsored by
           <Image
             data-testid="sponsor-icon"
-            src={SPONSOR_LOGOS[chain?.chainId || '']}
-            alt={chain?.chainName || ''}
+            src={sponsor.logo}
+            alt={sponsor.name}
             width={16}
             height={16}
             style={{ margin: '-3px 0px -3px 4px' }}
           />{' '}
-          {chain?.chainName}
+          {sponsor.name}
         </Typography>
       </>
     )

src/components/settings/PushNotifications/__tests__/logic.test.ts

@@ -7,7 +7,7 @@ import type { JsonRpcSigner } from '@ethersproject/providers'
 import * as logic from '../logic'
 import * as web3 from '@/hooks/wallets/web3'
 import packageJson from '../../../../../package.json'
-import type { ConnectedWallet } from '@/services/onboard'
+import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
 
 jest.mock('firebase/messaging')
 

src/components/settings/PushNotifications/hooks/__tests__/useNotificationRegistrations.test.ts

@@ -10,7 +10,7 @@ import * as wallet from '@/hooks/wallets/useWallet'
 import * as logic from '../../logic'
 import * as preferences from '../useNotificationPreferences'
 import * as notificationsSlice from '@/store/notificationsSlice'
-import type { ConnectedWallet } from '@/services/onboard'
+import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
 
 jest.mock('@safe-global/safe-gateway-typescript-sdk')
 

src/components/settings/PushNotifications/logic.ts

@@ -11,7 +11,7 @@ import ErrorCodes from '@/services/exceptions/ErrorCodes'
 import { checksumAddress } from '@/utils/addresses'
 import { isLedger } from '@/utils/wallets'
 import { createWeb3 } from '@/hooks/wallets/web3'
-import type { ConnectedWallet } from '@/services/onboard'
+import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
 
 type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] }
 

src/components/tx/BalanceInfo/index.tsx

@@ -1,5 +1,4 @@
-import { Box, Stack, SvgIcon, Typography } from '@mui/material'
-import GasStationIcon from '@/public/images/common/gas-station.svg'
+import { Typography } from '@mui/material'
 import css from './styles.module.css'
 import useWalletBalance from '@/hooks/wallets/useWalletBalance'
 import WalletBalance from '@/components/common/WalletBalance'
@@ -8,20 +7,11 @@ const BalanceInfo = () => {
   const [balance] = useWalletBalance()
 
   return (
-    <Box className={css.sponsoredBy}>
-      <SvgIcon component={GasStationIcon} inheritViewBox className={css.icon} />
-      <div>
-        <Stack direction="row" spacing={0.5} alignItems="center">
-          <Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
-            Connected wallet balance
-          </Typography>
-        </Stack>
-
-        <Typography variant="body2" color="primary.light">
-          <WalletBalance balance={balance} />
-        </Typography>
-      </div>
-    </Box>
+    <div className={css.container}>
+      <Typography variant="body2" color="primary.light">
+        <b>Wallet balance:</b> <WalletBalance balance={balance} />
+      </Typography>
+    </div>
   )
 }
 

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

@@ -1,20 +1,8 @@
-.sponsoredBy {
+.container {
   padding: 8px 12px;
   background-color: var(--color-background-main);
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   border-top: 1px solid var(--color-border-light);
   display: flex;
 }
-
-.icon {
-  margin-right: 8px;
-  margin-top: -1px;
-  color: var(--color-text-secondary);
-  width: 24px;
-}
-
-.logo {
-  width: 16px;
-  height: 16px;
-}

src/components/tx/ExecutionMethodSelector/index.tsx

@@ -1,35 +1,41 @@
-import { Box, FormControl, FormControlLabel, SvgIcon, Radio, RadioGroup, Typography } from '@mui/material'
+import { Box, FormControl, FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material'
 import type { Dispatch, SetStateAction, ReactElement, ChangeEvent } from 'react'
 
 import useWallet from '@/hooks/wallets/useWallet'
 import WalletIcon from '@/components/common/WalletIcon'
-import RelayerIcon from '@/public/images/common/relayer.svg'
 import SponsoredBy from '../SponsoredBy'
+import RemainingRelays from '../RemainingRelays'
 import type { RelayResponse } from '@/services/tx/relaying'
 
 import css from './styles.module.css'
 import BalanceInfo from '@/components/tx/BalanceInfo'
+import madProps from '@/utils/mad-props'
+import { useCurrentChain } from '@/hooks/useChains'
+import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
 
 export const enum ExecutionMethod {
   RELAY = 'RELAY',
   WALLET = 'WALLET',
 }
 
-export const ExecutionMethodSelector = ({
+const _ExecutionMethodSelector = ({
+  wallet,
+  chain,
   executionMethod,
   setExecutionMethod,
   relays,
   noLabel,
   tooltip,
 }: {
+  wallet: ConnectedWallet | null
+  chain?: ChainInfo
   executionMethod: ExecutionMethod
   setExecutionMethod: Dispatch<SetStateAction<ExecutionMethod>>
   relays?: RelayResponse
   noLabel?: boolean
   tooltip?: string
 }): ReactElement | null => {
-  const wallet = useWallet()
-
   const shouldRelay = executionMethod === ExecutionMethod.RELAY
 
   const onChooseExecutionMethod = (_: ChangeEvent<HTMLInputElement>, newExecutionMethod: string) => {
@@ -42,21 +48,23 @@ export const ExecutionMethodSelector = ({
         <FormControl sx={{ display: 'flex' }}>
           {!noLabel ? (
             <Typography variant="body2" className={css.label}>
-              Choose execution method:
+              Who will pay gas fees:
             </Typography>
           ) : null}
+
           <RadioGroup row value={executionMethod} onChange={onChooseExecutionMethod}>
             <FormControlLabel
               sx={{ flex: 1 }}
               value={ExecutionMethod.RELAY}
               label={
                 <Typography className={css.radioLabel}>
-                  <SvgIcon component={RelayerIcon} inheritViewBox fontSize="small" />
-                  Relayer
+                  Sponsored by
+                  <SponsoredBy chainId={chain?.chainId ?? ''} />
                 </Typography>
               }
               control={<Radio />}
             />
+
             <FormControlLabel
               data-testid="connected-wallet-execution-method"
               sx={{ flex: 1 }}
@@ -73,7 +81,12 @@ export const ExecutionMethodSelector = ({
         </FormControl>
       </div>
 
-      {shouldRelay && relays ? <SponsoredBy relays={relays} tooltip={tooltip} /> : wallet ? <BalanceInfo /> : null}
+      {shouldRelay && relays ? <RemainingRelays relays={relays} tooltip={tooltip} /> : wallet ? <BalanceInfo /> : null}
     </Box>
   )
 }
+
+export const ExecutionMethodSelector = madProps(_ExecutionMethodSelector, {
+  wallet: useWallet,
+  chain: useCurrentChain,
+})

src/components/tx/GasParams/GasParams.test.tsx

@@ -1,7 +1,8 @@
 import { render } from '@/tests/test-utils'
-import GasParams from '@/components/tx/GasParams/index'
+import { _GasParams as GasParams } from '@/components/tx/GasParams/index'
 import type { AdvancedParameters } from '@/components/tx/AdvancedParams'
 import { BigNumber } from '@ethersproject/bignumber'
+import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 describe('GasParams', () => {
   it('Shows the estimated fee on execution', () => {
@@ -53,10 +54,19 @@ describe('GasParams', () => {
       maxPriorityFeePerGas: BigNumber.from('10000'),
     }
 
-    const { getByText } = render(<GasParams params={params} isExecution={true} isEIP1559={true} onEdit={jest.fn} />)
+    const chainInfo = {
+      nativeCurrency: {
+        symbol: 'SepoliaETH',
+        decimals: 9,
+      },
+    } as unknown as ChainInfo
+
+    const { getByText } = render(
+      <GasParams params={params} isExecution={true} isEIP1559={true} onEdit={jest.fn} chain={chainInfo} />,
+    )
 
     expect(getByText('Estimated fee')).toBeInTheDocument()
-    expect(getByText('0.21')).toBeInTheDocument()
+    expect(getByText('0.21 SepoliaETH')).toBeInTheDocument()
   })
 
   it("Doesn't show an estimated fee if there is no gasLimit", () => {

src/components/tx/GasParams/index.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement, SyntheticEvent } from 'react'
 import { Accordion, AccordionDetails, AccordionSummary, Skeleton, Typography, Link, Grid } from '@mui/material'
+import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import { useCurrentChain } from '@/hooks/useChains'
 import { formatVisualAmount } from '@/utils/formatters'
@@ -8,6 +9,7 @@ import { trackEvent, MODALS_EVENTS } from '@/services/analytics'
 import classnames from 'classnames'
 import css from './styles.module.css'
 import accordionCss from '@/styles/accordion.module.css'
+import madProps from '@/utils/mad-props'
 
 const GasDetail = ({ name, value, isLoading }: { name: string; value: string; isLoading: boolean }): ReactElement => {
   const valueSkeleton = <Skeleton variant="text" sx={{ minWidth: '5em' }} />
@@ -30,21 +32,21 @@ type GasParamsProps = {
   willRelay?: boolean
 }
 
-const GasParams = ({
+export const _GasParams = ({
   params,
   isExecution,
   isEIP1559,
   onEdit,
   gasLimitError,
   willRelay,
-}: GasParamsProps): ReactElement => {
+  chain,
+}: GasParamsProps & { chain?: ChainInfo }): ReactElement => {
   const { nonce, userNonce, safeTxGas, gasLimit, maxFeePerGas, maxPriorityFeePerGas } = params
 
   const onChangeExpand = (_: SyntheticEvent, expanded: boolean) => {
     trackEvent({ ...MODALS_EVENTS.ESTIMATION, label: expanded ? 'Open' : 'Close' })
   }
 
-  const chain = useCurrentChain()
   const isLoading = !gasLimit || !maxFeePerGas
   const isError = gasLimitError && !gasLimit
 
@@ -76,9 +78,7 @@ const GasParams = ({
             {gasLimitError ? null : isLoading ? (
               <Skeleton variant="text" sx={{ display: 'inline-block', minWidth: '7em' }} />
             ) : (
-              <span className={classnames({ [css.sponsoredFee]: willRelay })}>
-                {totalFee} {chain?.nativeCurrency.symbol}
-              </span>
+              <span>{willRelay ? 'Free' : `${totalFee} ${chain?.nativeCurrency.symbol}`}</span>
             )}
           </Typography>
         ) : (
@@ -131,4 +131,8 @@ const GasParams = ({
   )
 }
 
+const GasParams = madProps(_GasParams, {
+  chain: useCurrentChain,
+})
+
 export default GasParams

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

@@ -2,8 +2,3 @@
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-
-.sponsoredFee {
-  text-decoration: line-through;
-  color: var(--color-text-secondary);
-}