BREAKING: Use custom UI in transaction insights

packages/examples/examples/insights/package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@metamask/abi-utils": "^1.0.0",
+    "@metamask/snaps-ui": "^0.26.2",
     "@metamask/utils": "^3.3.1"
   },
   "devDependencies": {

packages/examples/examples/insights/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps-monorepo.git"
   },
   "source": {
-    "shasum": "a6DXy5lnzdhX/f1YSb0pRFgY8JC2kqbAqd6Rf4iA55g=",
+    "shasum": "RcPonQimhnc2MFKDfIKvYsfXtZRZQlV26YCwqgQFLeE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/examples/insights/src/index.ts

@@ -1,4 +1,5 @@
 import { OnTransactionHandler } from '@metamask/snaps-types';
+import { panel, text, copyable } from '@metamask/snaps-ui';
 
 import { getInsights } from './insights';
 
@@ -10,7 +11,14 @@ import { getInsights } from './insights';
  * @returns The transaction insights.
  */
 export const onTransaction: OnTransactionHandler = async ({ transaction }) => {
+  const { type, args } = await getInsights(transaction);
+  const content = panel([
+    text(`**Type:** ${type}`),
+    ...(args
+      ? [text('**Args:**'), copyable(JSON.stringify(args, null, 2))]
+      : []),
+  ]);
   return {
-    insights: await getInsights(transaction),
+    content,
   };
 };

packages/snaps-ui/tsconfig.build.json

@@ -11,10 +11,5 @@
     "./src/**/test-utils",
     "./src/**/__mocks__",
     "./src/**/__snapshots__"
-  ],
-  "references": [
-    {
-      "path": "../snaps-utils/tsconfig.build.json"
-    }
   ]
 }

packages/snaps-ui/tsconfig.json

@@ -3,6 +3,5 @@
   "compilerOptions": {
     "baseUrl": "./"
   },
-  "include": ["./src"],
-  "references": [{ "path": "../snaps-utils" }]
+  "include": ["./src"]
 }

packages/snaps-utils/package.json

@@ -53,6 +53,7 @@
     "@babel/core": "^7.18.6",
     "@babel/types": "^7.18.7",
     "@metamask/providers": "^10.2.1",
+    "@metamask/snaps-ui": "^0.26.2",
     "@metamask/utils": "^3.3.1",
     "@noble/hashes": "^1.1.3",
     "@scure/base": "^1.1.1",

packages/snaps-utils/src/handlers.ts

@@ -1,4 +1,5 @@
 import type { StreamProvider } from '@metamask/providers';
+import { Component } from '@metamask/snaps-ui';
 import { Json, JsonRpcRequest } from '@metamask/utils';
 
 import { AccountId, ChainId, RequestArguments } from './namespace';
@@ -34,7 +35,7 @@ export type OnRpcRequestHandler = (args: {
  * If the snap has no insights about the transaction, this should be `null`.
  */
 export type OnTransactionResponse = {
-  insights: { [key: string]: Json } | null;
+  content: Component;
 };
 
 /**

packages/snaps-utils/tsconfig.build.json

@@ -11,5 +11,10 @@
     "./src/**/test-utils",
     "./src/**/__mocks__",
     "./src/**/__snapshots__"
+  ],
+  "references": [
+    {
+      "path": "../snaps-ui/tsconfig.build.json"
+    }
   ]
 }

packages/snaps-utils/tsconfig.json

@@ -3,5 +3,6 @@
   "compilerOptions": {
     "baseUrl": "./"
   },
-  "include": ["./src"]
+  "include": ["./src"],
+  "references": [{ "path": "../snaps-ui" }]
 }

yarn.lock

@@ -3013,7 +3013,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@metamask/snaps-ui@workspace:packages/snaps-ui":
+"@metamask/snaps-ui@^0.26.2, @metamask/snaps-ui@workspace:packages/snaps-ui":
   version: 0.0.0-use.local
   resolution: "@metamask/snaps-ui@workspace:packages/snaps-ui"
   dependencies:
@@ -3060,6 +3060,7 @@ __metadata:
     "@metamask/eslint-config-nodejs": ^11.0.1
     "@metamask/eslint-config-typescript": ^11.0.0
     "@metamask/providers": ^10.2.1
+    "@metamask/snaps-ui": ^0.26.2
     "@metamask/utils": ^3.3.1
     "@noble/hashes": ^1.1.3
     "@scure/base": ^1.1.1
@@ -15613,6 +15614,7 @@ __metadata:
     "@metamask/eslint-config-typescript": ^11.0.0
     "@metamask/snaps-cli": ^0.26.2
     "@metamask/snaps-types": ^0.26.2
+    "@metamask/snaps-ui": ^0.26.2
     "@metamask/utils": ^3.3.1
     "@typescript-eslint/eslint-plugin": ^5.42.1
     "@typescript-eslint/parser": ^5.42.1