Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: show relays even when 0 relays left #2789

Merged
merged 5 commits into from
Nov 13, 2023
Merged

Fix: show relays even when 0 relays left #2789

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
79edddc
Fix: show relays even when 0 relays left
katspaugh Nov 10, 2023
8db5a5e
Do not show block if relaying not enabled at all
katspaugh Nov 10, 2023
93e9e88
Restore default option to Relay
katspaugh Nov 13, 2023
c29d803
Restore version
katspaugh Nov 13, 2023
8359c8d
Merge branch 'dev' of github.com:safe-global/safe-wallet-web into relays
katspaugh Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/tx/ExecutionMethodSelector/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const ExecutionMethodSelector = ({
</FormControl>
</div>

{shouldRelay && relays ? <SponsoredBy relays={relays} tooltip={tooltip} /> : null}
<SponsoredBy relays={relays} tooltip={tooltip} shouldRelay={shouldRelay} />
</Box>
)
}
14 changes: 9 additions & 5 deletions src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ 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 @@ -57,11 +56,10 @@ const ExecuteForm = ({
const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)

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

const [canRelay] = useWalletCanRelay(safeTx)
Copy link
Member

Choose a reason for hiding this comment

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

I think this naming is more confusing now since its not about if the user can relay but if their wallet supports relaying.

Copy link
Member Author

Choose a reason for hiding this comment

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

Renamed it to canWalletRelay.

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

// Estimate gas limit
const { gasLimit, gasLimitError } = useGasLimit(safeTx)
Expand Down Expand Up @@ -102,7 +100,13 @@ const ExecuteForm = ({

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

return (
<>
Expand Down
87 changes: 58 additions & 29 deletions src/components/tx/SponsoredBy/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,43 +11,72 @@ export const SPONSOR_LOGOS = {
[chains.gor]: '/images/common/token-placeholder.svg',
}

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

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">
Sponsored by

{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>
Comment on lines +61 to +65
Copy link
Member

Choose a reason for hiding this comment

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

I think this is slightly redundant since the label already says "Transactions per hour". Maybe we could instead make the "0 of 5" a red color?

Copy link
Member Author

Choose a reason for hiding this comment

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

I added this based on Liliya's feedback. It might be redundant, but it's definitely clearer. IMO we should err on the safe side.

)}
</Typography>
<img src={SPONSOR_LOGOS[chain?.chainId || '']} alt={chain?.chainName} className={css.logo} />
</div>
) : (
<div>
<Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
{chain?.chainName}
Pay gas from the connected wallet
</Typography>

<Typography variant="body2" color="primary.light">
Please make sure your wallet has sufficient funds.
</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} of {relays.limit}
</Box>
</Typography>
</div>
</div>
)}
</Box>
)
}
Expand Down
Loading