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

* add privacy warning to approval dialogue

* move warning to top

* feedback: remove useEffect in favor of helper function

* simplify

apps/extension/src/routes/popup/approval/transaction/index.tsx

@@ -11,6 +11,7 @@ import type { Jsonified } from '@penumbra-zone/types/jsonified';
 import { TransactionViewTab } from './types';
 import { ChainRegistryClient } from '@penumbra-labs/registry';
 import { viewClient } from '../../../../clients';
+import { TransactionView } from '@penumbra-zone/protobuf/penumbra/core/transaction/v1/transaction_pb';
 
 const getMetadata: MetadataFetchFn = async ({ assetId }) => {
   const feeAssetId = assetId ? assetId : new ChainRegistryClient().bundled.globals().stakingAssetId;
@@ -19,6 +20,16 @@ const getMetadata: MetadataFetchFn = async ({ assetId }) => {
   return denomMetadata;
 };
 
+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);
+};
+
 export const TransactionApproval = () => {
   const { authorizeRequest: authReqString, setChoice, sendResponse } = useStore(txApprovalSelector);
 
@@ -53,6 +64,14 @@ export const TransactionApproval = () => {
         </h1>
       </div>
       <div className='grow overflow-auto p-4'>
+        {selectedTransactionViewName === TransactionViewTab.SENDER &&
+          !hasAltGasFee(selectedTransactionView) && (
+            <div className='mb-4 rounded border border-yellow-500 p-2 text-sm text-yellow-500'>
+              <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>
+          )}
         <ViewTabs
           defaultValue={selectedTransactionViewName}
           onValueChange={setSelectedTransactionViewName}
@@ -61,7 +80,7 @@ export const TransactionApproval = () => {
         <TransactionViewComponent txv={selectedTransactionView} metadataFetcher={getMetadata} />
 
         {selectedTransactionViewName === TransactionViewTab.SENDER && (
-          <div className='mt-4'>
+          <div className='mt-2'>
             <JsonViewer jsonObj={authorizeRequest.toJson() as Jsonified<AuthorizeRequest>} />
           </div>
         )}

packages/ui/components/ui/json-viewer/index.tsx

@@ -25,7 +25,7 @@ export const customTheme: NamedColorspace = {
 
 export const JsonViewer = ({ jsonObj }: { jsonObj: JsonObject | JsonValue[] }) => {
   return (
-    <div className='mt-5 rounded bg-black p-5'>
+    <div className='mt-0 rounded bg-black p-5'>
       <TextaJsonViewer
         value={jsonObj}
         style={{ fontFamily: 'Iosevka Term' }}