-
Notifications
You must be signed in to change notification settings - Fork 2
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
Conversation
There was a problem hiding this 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.
{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> | ||
)} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
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' && ( |
There was a problem hiding this comment.
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
...
There was a problem hiding this comment.
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 👍
There was a problem hiding this comment.
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) && (
I’ll wait to merge until #241 is complete, so I can compare how the privacy warning appears in the updated approval dialog design. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Much simpler 👍
second part of penumbra-zone/web#1882
focused more on functionality rather than design, which definitely has room for improvement.