> For the complete documentation index, see [llms.txt](/llms.txt).

# Transaction insights

You can provide transaction insights in MetaMask's transaction confirmation window before a user signs a transaction. For example, you can show the user the percentage of gas fees they would pay for their transaction.

## Steps[​](#steps "Direct link to Steps")

### 1\. Request permission to display transaction insights[​](#1-request-permission-to-display-transaction-insights "Direct link to 1. Request permission to display transaction insights")

Request the [endowment:transaction-insight](/snaps/reference/permissions/#endowmenttransaction-insight)permission by adding the following to your Snap's manifest file:

snap.manifest.json

```
"initialPermissions": {
  "endowment:transaction-insight": {}
}

```

If you need to receive the origin of the transaction request, add `allowTransactionOrigin` to the permission object, and set it to `true`:

snap.manifest.json

```
"initialPermissions": {
  "endowment:transaction-insight": {
    "allowTransactionOrigin": true
  }
}

```

### 2\. Implement the `onTransaction` entry point[​](#2-implement-the-ontransaction-entry-point "Direct link to 2-implement-the-ontransaction-entry-point")

Expose an [onTransaction](/snaps/reference/entry-points/#ontransaction) entry point, which receives a raw unsigned transaction payload, the chain ID, and the optional transaction origin, and returns [custom UI](/snaps/features/custom-ui/) content. When a user submits a transaction using the MetaMask extension, MetaMask calls the `onTransaction`handler method.

The following is an example implementation of `onTransaction`:

- JSX
- Functions

index.tsx

```
import type { OnTransactionHandler } from "@metamask/snaps-sdk";
import { Box, Heading, Text } from "@metamask/snaps-sdk/jsx";

export const onTransaction: OnTransactionHandler = async ({
  transaction,
  chainId,
  transactionOrigin,
}) => {
  const insights = /* Get insights */;
  return {
    content: (
      <Box>
        <Heading>My Transaction Insights</Heading>
        <Text>Here are the insights:</Text>
        {insights.map((insight) => (
          <Text>{insight.value}</Text>
        ))}
      </Box>
    ),
  };
};

```

index.ts

```
import type { OnTransactionHandler } from "@metamask/snaps-sdk";
import { panel, heading, text } from "@metamask/snaps-sdk";

export const onTransaction: OnTransactionHandler = async ({
  transaction,
  chainId,
  transactionOrigin,
}) => {
  const insights = /* Get insights */;
  return {
    content: panel([
      heading("My Transaction Insights"),
      text("Here are the insights:"),
      ...(insights.map((insight) => text(insight.value))),
    ]),
  };
};

```

The Snap tab in the transaction confirmation window displays the transaction insights:

![Transaction insights](/assets/images/transaction-insights-window-993288f566e310f6a5a7a86b0ebd8e08.png)

#### Transaction severity level[​](#transaction-severity-level "Direct link to Transaction severity level")

Flask Only

This feature is experimental and only available in [MetaMask Flask](https://metamask-docs-f8nytczy3-consensys-ddffed67.vercel.app/snaps/get-started/install-flask/), the canary distribution of MetaMask.

A Snap providing transaction insights can return an optional severity level of `"critical"`. MetaMask shows a modal with the warning before the user can confirm the transaction.

- JSX
- Functions

index.tsx

```
import type { OnTransactionHandler } from "@metamask/snaps-sdk";
import { Box, Heading, Text } from "@metamask/snaps-sdk/jsx";

export const onTransaction: OnTransactionHandler = async ({
  transaction,
  chainId,
  transactionOrigin,
}) => {
  const insights = /* Get insights */;
  return {
    content: (
      <Box>
        <Heading>My Transaction Insights</Heading>
        <Text>Here are the insights:</Text>
        {insights.map((insight) => (
          <Text>{insight.value}</Text>
        ))}
      </Box>
    ),
    severity: "critical",
  };
};

```

index.ts

```
import type { OnTransactionHandler } from "@metamask/snaps-sdk";
import { panel, heading, text } from "@metamask/snaps-sdk";

export const onTransaction: OnTransactionHandler = async ({
  transaction,
  chainId,
  transactionOrigin,
}) => {
  const insights = /* Get insights */;
  return {
    content: panel([
      heading("My Transaction Insights"),
      text("Here are the insights:"),
      ...(insights.map((insight) => text(insight.value))),
    ]),
    severity: "critical",
  };
};

```

![Transaction insights warning](/assets/images/transaction-insights-warning-bcc44107b136efbe6df830c536f9bbeb.png)

## Example[​](#example "Direct link to Example")

For a full end-to-end tutorial that walks you through creating a transaction insights Snap, see [Create a Snap to calculate gas fee percentages](/snaps/learn/tutorials/transaction-insights/). You can also see the [@metamask/transaction-insights-example-snap](https://github.com/MetaMask/snaps/tree/main/packages/examples/packages/transaction-insights)package for a full example of implementing transaction insights.