interface improvements

Author: Thunkar

app/src/ipc/wallet-internal-interface.ts

@@ -90,7 +90,7 @@ export type InternalWalletInterface = Omit<Wallet, "getAccounts"> & {
   getInteractions(): Promise<WalletInteraction<WalletInteractionType>[]>;
   getExecutionTrace(
     interactionId: string
-  ): Promise<{ trace?: DecodedExecutionTrace; stats?: any } | undefined>;
+  ): Promise<{ trace?: DecodedExecutionTrace; stats?: any; from?: string; embeddedPaymentMethodFeePayer?: string } | undefined>;
   resolveAuthorization(response: AuthorizationResponse): void;
   onWalletUpdate(callback: OnWalletUpdateListener): void;
   onAuthorizationRequest(callback: OnAuthorizationRequestListener): void;
@@ -151,6 +151,8 @@ export const InternalWalletInterfaceSchema: ApiSchemaFor<InternalWalletInterface
       .returns(z.object({
         trace: DecodedExecutionTraceSchema.optional(),
         stats: z.any().optional(),
+        from: z.string().optional(),
+        embeddedPaymentMethodFeePayer: z.string().optional(),
       }).optional()),
     // @ts-ignore
     resolveAuthorization: z.function().args(

app/src/ui/components/authorization/AuthorizeSendTxContent.tsx

@@ -1,4 +1,7 @@
 import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import Alert from "@mui/material/Alert";
+import { AztecAddress } from "@aztec/stdlib/aztec-address";
 import type { AuthorizationItem } from "../../../wallet/types/authorization";
 import type { ReadableCallAuthorization } from "../../../wallet/decoding/call-authorization-formatter";
 import type { DecodedExecutionTrace } from "../../../wallet/decoding/tx-callstack-decoder";
@@ -18,10 +21,17 @@ export function AuthorizeSendTxContent({
     callAuthorizations?: ReadableCallAuthorization[];
     executionTrace?: DecodedExecutionTrace;
     stats?: any;
+    from?: string;
+    embeddedPaymentMethodFeePayer?: string;
   };
   const callAuthorizations = params.callAuthorizations || [];
   const executionTrace = params.executionTrace;
   const stats = params.stats;
+  const from = params.from;
+  const embeddedPaymentMethodFeePayer = params.embeddedPaymentMethodFeePayer;
+
+  const isFromZero = from && AztecAddress.fromString(from).equals(AztecAddress.ZERO);
+  const hasEmbeddedFeePayer = !!embeddedPaymentMethodFeePayer;
 
   return (
     <>
@@ -32,6 +42,18 @@ export function AuthorizeSendTxContent({
         </Typography>
       )}
 
+      {isFromZero && (
+        <Alert severity="info" sx={{ mb: 2 }}>
+          This request uses the MulticallEntrypoint and does not execute from any of your accounts.
+        </Alert>
+      )}
+
+      {hasEmbeddedFeePayer && (
+        <Alert severity="success" sx={{ mb: 2 }}>
+          The app is providing the fee payment method for this transaction.
+        </Alert>
+      )}
+
       {executionTrace && (
         <ExecutionTraceDisplay
           trace={executionTrace}

app/src/ui/components/authorization/AuthorizeSimulateTxContent.tsx

@@ -1,5 +1,7 @@
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
+import Alert from "@mui/material/Alert";
+import { AztecAddress } from "@aztec/stdlib/aztec-address";
 import type { AuthorizationItem } from "../../../wallet/types/authorization";
 import type { ReadableCallAuthorization } from "../../../wallet/decoding/call-authorization-formatter";
 import type { DecodedExecutionTrace } from "../../../wallet/decoding/tx-callstack-decoder";
@@ -21,11 +23,18 @@ export function AuthorizeSimulateTxContent({
     executionTrace?: DecodedExecutionTrace | any;
     isUtility?: boolean;
     stats?: any;
+    from?: string;
+    embeddedPaymentMethodFeePayer?: string;
   };
   const callAuthorizations = params.callAuthorizations || [];
   const executionTrace = params.executionTrace;
   const isUtility = params.isUtility || request.method === "simulateUtility";
   const stats = params.stats;
+  const from = params.from;
+  const embeddedPaymentMethodFeePayer = params.embeddedPaymentMethodFeePayer;
+
+  const isFromZero = from && AztecAddress.fromString(from).equals(AztecAddress.ZERO);
+  const hasEmbeddedFeePayer = !!embeddedPaymentMethodFeePayer;
 
   return (
     <>
@@ -37,6 +46,18 @@ export function AuthorizeSimulateTxContent({
         </Typography>
       )}
 
+      {isFromZero && (
+        <Alert severity="info" sx={{ mb: 2 }}>
+          This request uses the MulticallEntrypoint and does not execute from any of your accounts.
+        </Alert>
+      )}
+
+      {hasEmbeddedFeePayer && (
+        <Alert severity="success" sx={{ mb: 2 }}>
+          The app is providing the fee payment method for this transaction.
+        </Alert>
+      )}
+
       {executionTrace && (
         <Box sx={{ mb: 2 }}>
           <Typography variant="subtitle2" gutterBottom>

app/src/ui/components/dialogs/ExecutionTraceDialog.tsx

@@ -5,6 +5,8 @@ import DialogActions from "@mui/material/DialogActions";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
+import Alert from "@mui/material/Alert";
+import { AztecAddress } from "@aztec/stdlib/aztec-address";
 import { ExecutionTraceDisplay } from "../shared/ExecutionTraceDisplay";
 import type { DecodedExecutionTrace } from "../../../wallet/decoding/tx-callstack-decoder";
 
@@ -13,16 +15,23 @@ interface ExecutionTraceDialogProps {
   onClose: () => void;
   trace: DecodedExecutionTrace | null;
   stats?: any;
+  from?: string | null;
+  embeddedPaymentMethodFeePayer?: string | null;
 }
 
 export function ExecutionTraceDialog({
   open,
   onClose,
   trace,
   stats,
+  from,
+  embeddedPaymentMethodFeePayer,
 }: ExecutionTraceDialogProps) {
   if (!trace) return null;
 
+  const isFromZero = from && AztecAddress.fromString(from).equals(AztecAddress.ZERO);
+  const hasEmbeddedFeePayer = !!embeddedPaymentMethodFeePayer;
+
   return (
     <Dialog
       open={open}
@@ -54,6 +63,16 @@ export function ExecutionTraceDialog({
         </IconButton>
       </DialogTitle>
       <DialogContent dividers>
+        {isFromZero && (
+          <Alert severity="info" sx={{ mb: 2 }}>
+            This request uses the MulticallEntrypoint and does not execute from any of your accounts.
+          </Alert>
+        )}
+        {hasEmbeddedFeePayer && (
+          <Alert severity="success" sx={{ mb: 2 }}>
+            The app is providing the fee payment method for this transaction.
+          </Alert>
+        )}
         <ExecutionTraceDisplay
           trace={trace}
           accordionBgColor="background.default"

app/src/ui/components/sections/interactions/index.tsx

@@ -107,6 +107,8 @@ export function InteractionsList({
   const [selectedTrace, setSelectedTrace] =
     useState<DecodedExecutionTrace | null>(null);
   const [selectedStats, setSelectedStats] = useState<any | null>(null);
+  const [selectedFrom, setSelectedFrom] = useState<string | null>(null);
+  const [selectedFeePayer, setSelectedFeePayer] = useState<string | null>(null);
   const [traceDialogOpen, setTraceDialogOpen] = useState(false);
 
   const handleInteractionClick = async (
@@ -123,6 +125,8 @@ export function InteractionsList({
         if (result?.trace) {
           setSelectedTrace(result.trace);
           setSelectedStats(result.stats);
+          setSelectedFrom(result.from || null);
+          setSelectedFeePayer(result.embeddedPaymentMethodFeePayer || null);
           setTraceDialogOpen(true);
         }
       } catch (error) {
@@ -323,6 +327,8 @@ export function InteractionsList({
         onClose={() => setTraceDialogOpen(false)}
         trace={selectedTrace}
         stats={selectedStats}
+        from={selectedFrom}
+        embeddedPaymentMethodFeePayer={selectedFeePayer}
       />
     </Box>
   );

app/src/wallet/core/internal-wallet.ts

@@ -195,7 +195,7 @@ export class InternalWallet extends BaseNativeWallet {
 
   async getExecutionTrace(
     interactionId: string
-  ): Promise<{ trace?: DecodedExecutionTrace; stats?: any } | undefined> {
+  ): Promise<{ trace?: DecodedExecutionTrace; stats?: any; from?: string; embeddedPaymentMethodFeePayer?: string } | undefined> {
     // First check if it's a utility trace (simple trace)
     const utilityData = await this.db.getUtilityTrace(interactionId);
     if (utilityData) {
@@ -220,7 +220,12 @@ export class InternalWallet extends BaseNativeWallet {
     const { executionTrace } = await decodingService.decodeTransaction(
       parsedSimulationResult
     );
-    return { trace: executionTrace, stats: parsedSimulationResult.stats };
+    return {
+      trace: executionTrace,
+      stats: parsedSimulationResult.stats,
+      from: data.metadata?.from,
+      embeddedPaymentMethodFeePayer: data.metadata?.embeddedPaymentMethodFeePayer,
+    };
   }
 
   // App authorization management methods

app/src/wallet/database/wallet-db.ts

@@ -441,11 +441,13 @@ export class WalletDB {
   async storeTxSimulation(
     payloadHash: string,
     simulationResult: TxSimulationResult,
-    txRequest: TxExecutionRequest
+    txRequest: TxExecutionRequest,
+    metadata?: { from?: string; embeddedPaymentMethodFeePayer?: string }
   ) {
     const data = jsonStringify({
       simulationResult,
       txRequest,
+      metadata,
     });
     await this.txSimulations.set(payloadHash, data);
     this.logger.info(
@@ -455,7 +457,7 @@ export class WalletDB {
 
   async getTxSimulation(
     payloadHash: string
-  ): Promise<{ simulationResult: any; txRequest: any } | undefined> {
+  ): Promise<{ simulationResult: any; txRequest: any; metadata?: { from?: string; embeddedPaymentMethodFeePayer?: string } } | undefined> {
     const result = await this.txSimulations.getAsync(payloadHash);
     if (!result) {
       return undefined;

app/src/wallet/operations/send-tx-operation.ts

@@ -52,6 +52,7 @@ type SendTxDisplayData = {
   callAuthorizations: ReadableCallAuthorization[];
   executionTrace?: DecodedExecutionTrace;
   stats?: any;
+  embeddedPaymentMethodFeePayer?: AztecAddress;
 };
 
 /**
@@ -185,6 +186,7 @@ export class SendTxOperation extends ExternalOperation<
         callAuthorizations,
         executionTrace,
         stats: prepared.displayData?.stats,
+        embeddedPaymentMethodFeePayer: opts.fee?.embeddedPaymentMethodFeePayer,
       },
       executionData: {
         txRequest,
@@ -213,6 +215,7 @@ export class SendTxOperation extends ExternalOperation<
           title: displayData.title,
           from: displayData.from.toString(),
           stats: displayData.stats,
+          embeddedPaymentMethodFeePayer: displayData.embeddedPaymentMethodFeePayer?.toString(),
         },
         timestamp: Date.now(),
       },

app/src/wallet/operations/simulate-tx-operation.ts

@@ -80,6 +80,7 @@ type SimulateTxDisplayData = {
   from: AztecAddress;
   decoded: ReadableTxInformation;
   stats?: SimulationStats;
+  embeddedPaymentMethodFeePayer?: AztecAddress;
 } & Record<string, unknown>;
 
 /**
@@ -200,7 +201,10 @@ export class SimulateTxOperation extends ExternalOperation<
       { contracts: contractOverrides }
     );
 
-    await this.db.storeTxSimulation(payloadHash, simulationResult, txRequest);
+    await this.db.storeTxSimulation(payloadHash, simulationResult, txRequest, {
+      from: opts.from.toString(),
+      embeddedPaymentMethodFeePayer: opts.fee?.embeddedPaymentMethodFeePayer?.toString(),
+    });
 
     const decodingService = new TxDecodingService(this.decodingCache);
     const decoded = await decodingService.decodeTransaction(simulationResult);
@@ -212,6 +216,7 @@ export class SimulateTxOperation extends ExternalOperation<
         from: opts.from,
         decoded,
         stats: simulationResult.stats,
+        embeddedPaymentMethodFeePayer: opts.fee?.embeddedPaymentMethodFeePayer,
       },
       executionData: {
         simulationResult,
@@ -275,6 +280,7 @@ export class SimulateTxOperation extends ExternalOperation<
           title: displayData.title,
           from: displayData.from.toString(),
           stats: displayData.stats,
+          embeddedPaymentMethodFeePayer: displayData.embeddedPaymentMethodFeePayer?.toString(),
         },
         timestamp: Date.now(),
         persistence,