Skip to content

Commit

Permalink
Fix: revert relaying message (#2799)
Browse files Browse the repository at this point in the history
  • Loading branch information
katspaugh authored Nov 13, 2023
1 parent c8752b5 commit ced3211
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 80 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"homepage": "https://github.com/safe-global/safe-wallet-web",
"license": "GPL-3.0",
"type": "module",
"version": "1.22.1",
"version": "1.22.2",
"scripts": {
"dev": "next dev",
"start": "next dev",
Expand Down
2 changes: 1 addition & 1 deletion src/components/tx/ExecutionMethodSelector/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const ExecutionMethodSelector = ({
</FormControl>
</div>

<SponsoredBy relays={relays} tooltip={tooltip} shouldRelay={shouldRelay} />
{shouldRelay && relays ? <SponsoredBy relays={relays} tooltip={tooltip} /> : null}
</Box>
)
}
25 changes: 11 additions & 14 deletions src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { useIsExecutionLoop, useTxActions } from './hooks'
import { useRelaysBySafe } from '@/hooks/useRemainingRelays'
import useWalletCanRelay from '@/hooks/useWalletCanRelay'
import { ExecutionMethod, ExecutionMethodSelector } from '../ExecutionMethodSelector'
import { hasRemainingRelays } from '@/utils/relaying'
import type { SignOrExecuteProps } from '.'
import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
import { TxModalContext } from '@/components/tx-flow'
Expand Down Expand Up @@ -52,13 +53,15 @@ const ExecuteForm = ({
// Check that the transaction is executable
const isExecutionLoop = useIsExecutionLoop()

// SC wallets can relay fully signed transactions
const [canWalletRelay] = useWalletCanRelay(safeTx)
// We default to relay
// We default to relay, but the option is only shown if we canRelay
const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)

// SC wallets can relay fully signed transactions
const [walletCanRelay] = useWalletCanRelay(safeTx)

// The transaction can/will be relayed
const willRelay = executionMethod === ExecutionMethod.RELAY
const hasRelays = !!relays?.remaining
const canRelay = walletCanRelay && hasRemainingRelays(relays)
const willRelay = canRelay && executionMethod === ExecutionMethod.RELAY

// Estimate gas limit
const { gasLimit, gasLimitError } = useGasLimit(safeTx)
Expand Down Expand Up @@ -99,18 +102,12 @@ const ExecuteForm = ({

const cannotPropose = !isOwner && !onlyExecute
const submitDisabled =
!safeTx ||
!isSubmittable ||
disableSubmit ||
isValidExecutionLoading ||
isExecutionLoop ||
cannotPropose ||
(willRelay && !hasRelays)
!safeTx || !isSubmittable || disableSubmit || isValidExecutionLoading || isExecutionLoop || cannotPropose

return (
<>
<form onSubmit={handleSubmit}>
<div className={classNames(css.params, { [css.noBottomBorderRadius]: canWalletRelay })}>
<div className={classNames(css.params, { [css.noBottomBorderRadius]: canRelay })}>
<AdvancedParams
willExecute
params={advancedParams}
Expand All @@ -120,7 +117,7 @@ const ExecuteForm = ({
willRelay={willRelay}
/>

{canWalletRelay && (
{canRelay && (
<div className={css.noTopBorder}>
<ExecutionMethodSelector
executionMethod={executionMethod}
Expand Down
87 changes: 29 additions & 58 deletions src/components/tx/SponsoredBy/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,72 +11,43 @@ export const SPONSOR_LOGOS = {
[chains.gor]: '/images/common/token-placeholder.svg',
}

const SponsoredBy = ({
relays,
tooltip,
shouldRelay,
}: {
relays?: RelayResponse
tooltip?: string
shouldRelay: boolean
}) => {
const SponsoredBy = ({ relays, tooltip }: { relays: RelayResponse; tooltip?: string }) => {
const chain = useCurrentChain()

return (
<Box className={css.sponsoredBy}>
<SvgIcon component={GasStationIcon} inheritViewBox className={css.icon} />

{shouldRelay ? (
<div>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
Sponsored by
</Typography>

<img src={SPONSOR_LOGOS[chain?.chainId || '']} alt={chain?.chainName} className={css.logo} />
<Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
{chain?.chainName}
</Typography>

{tooltip ? (
<Tooltip title={tooltip} placement="top" arrow>
<span style={{ display: 'flex' }}>
<SvgIcon
component={InfoIcon}
inheritViewBox
color="info"
fontSize="small"
sx={{ verticalAlign: 'middle', color: '#B2B5B2' }}
/>
</span>
</Tooltip>
) : null}
</Stack>

<Typography variant="body2" color="primary.light">
Transactions per hour:{' '}
<Box component="span" sx={{ fontWeight: '700', color: 'text.primary' }}>
{relays?.remaining ?? 0} of {relays?.limit ?? 0}
</Box>
{relays && !relays.remaining && (
<Box component="span" sx={{ color: 'error.main' }}>
{' '}
&mdash; will reset in the next hour
</Box>
)}
</Typography>
</div>
) : (
<div>
<div>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
Pay gas from the connected wallet
Sponsored by
</Typography>

<Typography variant="body2" color="primary.light">
Please make sure your wallet has sufficient funds.
<img src={SPONSOR_LOGOS[chain?.chainId || '']} alt={chain?.chainName} className={css.logo} />
<Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
{chain?.chainName}
</Typography>
</div>
)}
{tooltip ? (
<Tooltip title={tooltip} placement="top" arrow>
<span style={{ display: 'flex' }}>
<SvgIcon
component={InfoIcon}
inheritViewBox
color="info"
fontSize="small"
sx={{ verticalAlign: 'middle', color: '#B2B5B2' }}
/>
</span>
</Tooltip>
) : null}
</Stack>

<Typography variant="body2" color="primary.light">
Transactions per hour:{' '}
<Box component="span" sx={{ fontWeight: '700', color: 'text.primary' }}>
{relays.remaining} of {relays.limit}
</Box>
</Typography>
</div>
</Box>
)
}
Expand Down
8 changes: 2 additions & 6 deletions src/hooks/useWalletCanRelay.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,14 @@ import useWallet from '@/hooks/wallets/useWallet'
import { isSmartContractWallet } from '@/utils/wallets'
import { Errors, logError } from '@/services/exceptions'
import { type SafeTransaction } from '@safe-global/safe-core-sdk-types'
import { FEATURES, hasFeature } from '@/utils/chains'
import { useCurrentChain } from './useChains'

const useWalletCanRelay = (tx: SafeTransaction | undefined) => {
const { safe } = useSafeInfo()
const wallet = useWallet()
const chain = useCurrentChain()
const isFeatureEnabled = chain && hasFeature(chain, FEATURES.RELAYING)
const hasEnoughSignatures = tx && tx.signatures.size >= safe.threshold

return useAsync(() => {
if (!isFeatureEnabled || !tx || !wallet) return
if (!tx || !wallet) return

return isSmartContractWallet(wallet)
.then((isSCWallet) => {
Expand All @@ -27,7 +23,7 @@ const useWalletCanRelay = (tx: SafeTransaction | undefined) => {
logError(Errors._106, err.message)
return false
})
}, [isFeatureEnabled, hasEnoughSignatures, tx, wallet])
}, [hasEnoughSignatures, tx, wallet])
}

export default useWalletCanRelay

1 comment on commit ced3211

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coverage report

St.
Category Percentage Covered / Total
🟡 Statements 75.04% 10107/13469
🔴 Branches 49.57% 2054/4144
🔴 Functions 57.54% 1500/2607
🟡 Lines 76.6% 9142/11934

Test suite run success

1105 tests passing in 155 suites.

Report generated by 🧪jest coverage report action from ced3211

Please sign in to comment.