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.

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

prax: add non-native-fee-warning #242

Merged
merged 5 commits into from
Nov 25, 2024
Merged

prax: add non-native-fee-warning #242

merged 5 commits into from
Nov 25, 2024

Conversation

TalDerei
Copy link
Contributor

@TalDerei TalDerei commented Nov 25, 2024

second part of penumbra-zone/web#1882

focused more on functionality rather than design, which definitely has room for improvement.


Screenshot 2024-11-24 at 10 50 22 PM

@TalDerei TalDerei self-assigned this Nov 25, 2024
@TalDerei TalDerei requested a review from a team November 25, 2024 06:54
Copy link
Contributor

@hdevalence hdevalence left a comment

Choose a reason for hiding this comment

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

The warning actually looks great, but let's put it at the top of the window rather than the bottom.

Comment on lines 54 to 64
{selectedTransactionViewName === TransactionViewTab.SENDER && symbol !== 'UM' && (
<div
style={{ marginBottom: '16px' }}
className='rounded border border-yellow-500 p-2 text-yellow-500 text-sm'
>
<span className='block text-center font-bold'>⚠ Privacy Warning:</span>
Transaction uses a non-native fee token. To reduce gas costs and protect your privacy,
maintain an UM balance for fees.
</div>
)}

Copy link
Contributor Author

@TalDerei TalDerei Nov 25, 2024

Choose a reason for hiding this comment

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

alternatively, we can implement a tooltip (using the react-tooltip library) with a hover animation

Screenshot 2024-11-25 at 12 31 47 AM

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it's fine, hopefully the user only sees this once or twice

@@ -47,7 +50,18 @@ export const TransactionApproval = () => {

return (
<div className='flex h-screen flex-col'>
<div className='grow overflow-auto p-[30px] pt-10'>
<div className='flex grow flex-col overflow-auto p-[30px] pt-10'>
{selectedTransactionViewName === TransactionViewTab.SENDER && symbol !== 'UM' && (
Copy link
Contributor

Choose a reason for hiding this comment

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

suggestion: think this would be simpler if we ditched the whole useEffect pattern and just did something like:

const hasAltGasFee = (txv?: TransactionView): boolean => {
  const { stakingAssetId } = new ChainRegistryClient().bundled.globals();
  return txv?.bodyView?.transactionParameters?.fee?.assetId?.equals(stakingAssetId) ?? false;
};
...

  return (
    <div className='flex h-screen flex-col'>
      <div className='flex grow flex-col overflow-auto p-[30px] pt-10'>
        {selectedTransactionViewName === TransactionViewTab.SENDER &&
          hasAltGasFee(selectedTransactionView) && (
            <div
                 ...

Copy link
Contributor Author

Choose a reason for hiding this comment

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

helper function is a better approach here 👍

Copy link
Contributor Author

@TalDerei TalDerei Nov 25, 2024

Choose a reason for hiding this comment

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

txv?.bodyView?.transactionParameters?.fee?.assetId? is undefined, so modified the logic slightly

const hasAltGasFee = (txv?: TransactionView): boolean => {
  const { stakingAssetId } = new ChainRegistryClient().bundled.globals();
  
  let feeAssetId = txv?.bodyView?.transactionParameters?.fee?.assetId;
  if (feeAssetId === undefined) {
    feeAssetId = stakingAssetId;
  }

  return feeAssetId.equals(stakingAssetId);
};

...

{selectedTransactionViewName === TransactionViewTab.SENDER && !hasAltGasFee(selectedTransactionView) && (

@TalDerei
Copy link
Contributor Author

I’ll wait to merge until #241 is complete, so I can compare how the privacy warning appears in the updated approval dialog design.

Copy link
Contributor

@grod220 grod220 left a comment

Choose a reason for hiding this comment

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

Much simpler 👍

@TalDerei TalDerei merged commit a79ce04 into main Nov 25, 2024
3 checks passed
@TalDerei TalDerei deleted the fee-warning branch November 25, 2024 22:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants