Add row and address component

packages/examples/packages/bip32/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "c3u/Z2xy1ChWDv4R+OHTAVLeSoT/K/yv9E+q2GAsric=",
+    "shasum": "8uciDR11gmEm8QDs/sHYPeICmkpHOE4qVe+7zF0O7Ew=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/bip44/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "odIxViYr4MKCR186MZNWbIHBROIRxFDuIGm9BgC0g1E=",
+    "shasum": "7WXzhl1UIxj91n9Ptv/Rf+nbsYUg3XSOP14sSwEcI2k=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/cronjobs/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "N4HEF5jf+USMjSvrxCYsRJBk9/tEk60CEV44F+RJwUk=",
+    "shasum": "CxqAZ3b6NadkqDJJDZnKKhXS8ecdcV+qIf/dOmMHzbk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/dialogs/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "2MlMpD+BND5lUkK5tSuCAODaVSpmMoWDgI6a9+h/1ZI=",
+    "shasum": "BSNPuKt7cC0lEJaE8M6Y0/7tepS8HiC/+WpjZaOYwYM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/ethers-js/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "67kh8YEtQfNVOHu3kd9n+qXpF9ZVdpnx0STiujWMpIE=",
+    "shasum": "FL7kREmDDwiAIHskdA1lbCYQ4NHv8p4UHR/1Tm2mKKA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/get-entropy/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "W/NHJ/KLYc9HpHVmqdvR5uUFMvn6GtfdN60kA2297xo=",
+    "shasum": "FzwUtEms+bZSRoUP/48CxTVoSkoQCLG+86oWSUZfueA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/home-page/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "QkxvGv1BjV0FiuIERffTlLiMO6dAyMRJXeBL913oHHM=",
+    "shasum": "utXHOukgm1RlUl/sYsI2aNAgeVgEKL+310wUjEAMT9E=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "DMRI1Ol2xCVZGTnotA3rDkMOY8xtrSC3aXzGBdcdknQ=",
+    "shasum": "dbIz1yLy7sqedSP6sb8cD5DJgDloM08zJERPa/e8N78=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/lifecycle-hooks/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "CawaMvDVaOdsD/Ok0HCRaSzK0HCZx2OZ+zxXap+0GiM=",
+    "shasum": "Ve8xul91MklBaGJpiaLvCB/qIHIXZEj251XP+pIOOUQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/manage-state/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "lliQFLB2uFZTWoJ1oU9/HYPWQHqQXlphski2+r4gg84=",
+    "shasum": "ClCqeb7sknLcct1+EMSjDpNqockG+NVmKnBmfXRXPpM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/notifications/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "AJvmSmfd184z7yFXizADKAl2u6uFewRlZNp64YCm7I0=",
+    "shasum": "cHCctempM7XrAWGixs2nkxELAqDEezV1/2JzBcVO4t0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "yGCIViDXf/YsS9eI9R46xg4GhMwqf9212A88uxsA4MY=",
+    "shasum": "23BCxdotVNBpoy9z40O7y6rahH4GUD6vsGWJq1uH7Rk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/transaction-insights/src/index.test.ts

@@ -1,19 +1,28 @@
 import { expect } from '@jest/globals';
 import { installSnap } from '@metamask/snaps-jest';
-import { panel, text } from '@metamask/snaps-sdk';
+import { panel, text, row, address } from '@metamask/snaps-sdk';
 
 describe('onTransaction', () => {
+  const FROM_ADDRESS = '0xd8da6bf26964af9d7eed9e03e53415d37aa96045';
+  const TO_ADDRESS = '0x4bbeeb066ed09b7aed07bf39eee0460dfa261520';
+
   it('returns transaction insights for an ERC-20 transaction', async () => {
     const { sendTransaction, close } = await installSnap();
 
     const response = await sendTransaction({
+      from: FROM_ADDRESS,
+      to: TO_ADDRESS,
       // This is not a valid ERC-20 transfer as all the values are zero, but it
       // is enough to test the `onTransaction` handler.
       data: '0xa9059cbb00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
     });
 
     expect(response).toRender(
-      panel([text('**Transaction type:**'), text('ERC-20')]),
+      panel([
+        row('From', address(FROM_ADDRESS)),
+        row('To', address(TO_ADDRESS)),
+        row('Transaction type', text('ERC-20')),
+      ]),
     );
 
     await close();
@@ -23,13 +32,19 @@ describe('onTransaction', () => {
     const { sendTransaction, close } = await installSnap();
 
     const response = await sendTransaction({
+      from: FROM_ADDRESS,
+      to: TO_ADDRESS,
       // This is not a valid ERC-721 transfer as all the values are zero, but it
       // is enough to test the `onTransaction` handler.
       data: '0x23b872dd00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
     });
 
     expect(response).toRender(
-      panel([text('**Transaction type:**'), text('ERC-721')]),
+      panel([
+        row('From', address(FROM_ADDRESS)),
+        row('To', address(TO_ADDRESS)),
+        row('Transaction type', text('ERC-721')),
+      ]),
     );
 
     await close();
@@ -39,13 +54,19 @@ describe('onTransaction', () => {
     const { sendTransaction, close } = await installSnap();
 
     const response = await sendTransaction({
+      from: FROM_ADDRESS,
+      to: TO_ADDRESS,
       // This is not a valid ERC-1155 transfer as all the values are zero, but
       // it is enough to test the `onTransaction` handler.
       data: '0xf242432a00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
     });
 
     expect(response).toRender(
-      panel([text('**Transaction type:**'), text('ERC-1155')]),
+      panel([
+        row('From', address(FROM_ADDRESS)),
+        row('To', address(TO_ADDRESS)),
+        row('Transaction type', text('ERC-1155')),
+      ]),
     );
 
     await close();
@@ -55,11 +76,17 @@ describe('onTransaction', () => {
     const { sendTransaction, close } = await installSnap();
 
     const response = await sendTransaction({
+      from: FROM_ADDRESS,
+      to: TO_ADDRESS,
       data: '0xabcdef1200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
     });
 
     expect(response).toRender(
-      panel([text('**Transaction type:**'), text('Unknown')]),
+      panel([
+        row('From', address(FROM_ADDRESS)),
+        row('To', address(TO_ADDRESS)),
+        row('Transaction type', text('Unknown')),
+      ]),
     );
 
     await close();
@@ -69,11 +96,17 @@ describe('onTransaction', () => {
     const { sendTransaction, close } = await installSnap();
 
     const response = await sendTransaction({
+      from: FROM_ADDRESS,
+      to: TO_ADDRESS,
       data: '0x',
     });
 
     expect(response).toRender(
-      panel([text('**Transaction type:**'), text('Unknown')]),
+      panel([
+        row('From', address(FROM_ADDRESS)),
+        row('To', address(TO_ADDRESS)),
+        row('Transaction type', text('Unknown')),
+      ]),
     );
 
     await close();

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

@@ -1,5 +1,5 @@
 import type { OnTransactionHandler } from '@metamask/snaps-sdk';
-import { SeverityLevel, panel, text } from '@metamask/snaps-sdk';
+import { SeverityLevel, panel, text, row, address } from '@metamask/snaps-sdk';
 import { hasProperty } from '@metamask/utils';
 
 import { decodeData } from './utils';
@@ -30,10 +30,14 @@ export const onTransaction: OnTransactionHandler = async ({ transaction }) => {
   ) {
     const type = decodeData(transaction.data);
     return {
-      content: panel([text('**Transaction type:**'), text(type)]),
+      content: panel([
+        row('From', address(transaction.from)),
+        row('To', transaction.to ? address(transaction.to) : text('None')),
+        row('Transaction type', text(type)),
+      ]),
       severity: SeverityLevel.Critical,
     };
   }
 
-  return { content: panel([text('**Transaction type:**'), text('Unknown')]) };
+  return { content: panel([row('Transaction type', text('Unknown'))]) };
 };

packages/snaps-cli/package.json

@@ -54,6 +54,7 @@
     "@babel/plugin-transform-runtime": "^7.13.2",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-typescript": "^7.23.2",
+    "@metamask/snaps-sdk": "workspace:^",
     "@metamask/snaps-utils": "workspace:^",
     "@metamask/snaps-webpack-plugin": "workspace:^",
     "@metamask/utils": "^8.2.1",

packages/snaps-cli/src/config.ts

@@ -1,10 +1,9 @@
+import { literal, union } from '@metamask/snaps-sdk';
 import {
   createFromStruct,
   file,
   indent,
   isFile,
-  literal,
-  union,
   SnapsStructError,
   named,
 } from '@metamask/snaps-utils';

packages/snaps-execution-environments/lavamoat/browserify/iframe/policy.json

@@ -258,7 +258,13 @@
       "packages": {
         "external:../snaps-sdk/src/internals/error-wrappers.ts": true,
         "external:../snaps-sdk/src/internals/errors.ts": true,
-        "external:../snaps-sdk/src/internals/helpers.ts": true
+        "external:../snaps-sdk/src/internals/helpers.ts": true,
+        "external:../snaps-sdk/src/internals/structs.ts": true
+      }
+    },
+    "external:../snaps-sdk/src/internals/structs.ts": {
+      "packages": {
+        "superstruct": true
       }
     },
     "external:../snaps-sdk/src/types/handlers/index.ts": {
@@ -314,6 +320,13 @@
         "superstruct": true
       }
     },
+    "external:../snaps-sdk/src/ui/components/address.ts": {
+      "packages": {
+        "external:../snaps-sdk/src/ui/builder.ts": true,
+        "external:../snaps-sdk/src/ui/nodes.ts": true,
+        "superstruct": true
+      }
+    },
     "external:../snaps-sdk/src/ui/components/copyable.ts": {
       "packages": {
         "external:../snaps-sdk/src/ui/builder.ts": true,
@@ -345,28 +358,43 @@
     },
     "external:../snaps-sdk/src/ui/components/index.ts": {
       "packages": {
+        "external:../snaps-sdk/src/ui/components/address.ts": true,
         "external:../snaps-sdk/src/ui/components/copyable.ts": true,
         "external:../snaps-sdk/src/ui/components/divider.ts": true,
         "external:../snaps-sdk/src/ui/components/heading.ts": true,
         "external:../snaps-sdk/src/ui/components/image.ts": true,
         "external:../snaps-sdk/src/ui/components/panel.ts": true,
+        "external:../snaps-sdk/src/ui/components/row.ts": true,
         "external:../snaps-sdk/src/ui/components/spinner.ts": true,
         "external:../snaps-sdk/src/ui/components/text.ts": true
       }
     },
     "external:../snaps-sdk/src/ui/components/panel.ts": {
       "packages": {
         "external:../snaps-sdk/src/ui/builder.ts": true,
+        "external:../snaps-sdk/src/ui/components/address.ts": true,
         "external:../snaps-sdk/src/ui/components/copyable.ts": true,
         "external:../snaps-sdk/src/ui/components/divider.ts": true,
         "external:../snaps-sdk/src/ui/components/heading.ts": true,
         "external:../snaps-sdk/src/ui/components/image.ts": true,
+        "external:../snaps-sdk/src/ui/components/row.ts": true,
         "external:../snaps-sdk/src/ui/components/spinner.ts": true,
         "external:../snaps-sdk/src/ui/components/text.ts": true,
         "external:../snaps-sdk/src/ui/nodes.ts": true,
         "superstruct": true
       }
     },
+    "external:../snaps-sdk/src/ui/components/row.ts": {
+      "packages": {
+        "external:../snaps-sdk/src/internals/index.ts": true,
+        "external:../snaps-sdk/src/ui/builder.ts": true,
+        "external:../snaps-sdk/src/ui/components/address.ts": true,
+        "external:../snaps-sdk/src/ui/components/image.ts": true,
+        "external:../snaps-sdk/src/ui/components/text.ts": true,
+        "external:../snaps-sdk/src/ui/nodes.ts": true,
+        "superstruct": true
+      }
+    },
     "external:../snaps-sdk/src/ui/components/spinner.ts": {
       "packages": {
         "external:../snaps-sdk/src/ui/builder.ts": true,